Improved language selection

extension/package.json

@@ -34,10 +34,10 @@
     "@types/rdflib": "^0.17.0",
     "@types/react": "^16.4.6",
     "@types/react-dom": "^16.0.6",
+    "awesome-typescript-loader": "^5.2.0",
     "copy-webpack-plugin": "^4.5.2",
     "html-webpack-plugin": "^3.0.0",
     "source-map-loader": "^0.2.3",
-    "ts-loader": "^4.4.2",
     "typescript": "^2.9.2",
     "web-ext": "^2.7.0",
     "webpack": "^4.0.1",

extension/src/common/data.ts

@@ -18,25 +18,13 @@
  * with CubicWeb.  If not, see <http://www.gnu.org/licenses/>.
  ******************************************************************************/
 
-/**
- * The data about a language
- */
-export class Language {
-  /**
-   * The language code
-   */
-  code: string;
-  /**
-   * The language's name
-   */
-  name: string;
-}
+import { application } from "@logilab/libview";
 
-export const LANGUAGES: Language[] = [
-  { code: "fr", name: "Français" },
-  { code: "en", name: "English" },
-  { code: "jp", name: "日本" }
-];
+export const NO_LANGUAGE: application.Language = {
+  iso639_1: "",
+  iso639_2: "",
+  name: "-- auto --"
+};
 
 /**
  * Metadata about a MIME type
@@ -341,7 +329,7 @@ export class TabCommand {
     this.isAutomatic = true;
     this.selectedSource = "";
     this.selectedView = "";
-    this.selectedLanguage = "";
+    this.selectedLanguage = NO_LANGUAGE;
   }
   /**
    * Whether the user activated the extension for this tab
@@ -362,7 +350,7 @@ export class TabCommand {
   /**
    * The selected language (if not automatic)
    */
-  selectedLanguage: string;
+  selectedLanguage: application.Language;
 
   /**
    * Updates this command with the specified one
@@ -426,7 +414,7 @@ export class TabData {
     this.command.isAutomatic = true;
     this.command.selectedSource = "";
     this.command.selectedView = "";
-    this.command.selectedLanguage = "";
+    this.command.selectedLanguage = NO_LANGUAGE;
     this.mainSource = NO_DATA;
     this.sources = [];
     this.primaryTopic = null;

extension/src/common/languages.d.ts

+/*******************************************************************************
+ * Copyright 2003-2018 LOGILAB S.A. (Paris, FRANCE), all rights reserved.
+ * contact http://www.logilab.fr/ -- mailto:contact@logilab.fr
+ *
+ * This file is part of CubicWeb.
+ *
+ * CubicWeb is free software: you can redistribute it and/or modify it under the
+ * terms of the GNU Lesser General Public License as published by the Free
+ * Software Foundation, either version 2.1 of the License, or (at your option)
+ * any later version.
+ *
+ * CubicWeb is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
+ * FOR A PARTICULAR PURPOSE.  See the GNU Lesser General Public License for more
+ * details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License along
+ * with CubicWeb.  If not, see <http://www.gnu.org/licenses/>.
+ ******************************************************************************/
+
+declare module "*.iso639.json" {
+  import { application } from "@logilab/libview";
+  const LANGUAGES: application.Language[];
+  export = LANGUAGES;
+}

extension/src/popup/main.tsx

@@ -18,16 +18,11 @@
  * with CubicWeb.  If not, see <http://www.gnu.org/licenses/>.
  ******************************************************************************/
 
+import * as LANGUAGES from "../common/data.iso639.json";
 import React = require("react");
 import ReactDOM = require("react-dom");
-import {
-  TabData,
-  NO_DATA,
-  DataSource,
-  LANGUAGES,
-  Language
-} from "../common/data";
-import { definition } from "@logilab/libview";
+import { TabData, NO_DATA, DataSource, NO_LANGUAGE } from "../common/data";
+import { application, definition } from "@logilab/libview";
 import {
   getCurrentTabId,
   getTabData,
@@ -167,6 +162,7 @@ class Popup extends React.Component<{}, State> {
     if (this.state.tabData.command.isAutomatic) {
       this.state.tabData.command.selectedSource = "";
       this.state.tabData.command.selectedView = "";
+      this.state.tabData.command.selectedLanguage = NO_LANGUAGE;
     }
     this.onUpdateTabCommand();
   }
@@ -176,16 +172,22 @@ class Popup extends React.Component<{}, State> {
     if (this.state.tabData.command.isAutomatic) {
       this.state.tabData.command.selectedSource = "";
       this.state.tabData.command.selectedView = "";
+      this.state.tabData.command.selectedLanguage = NO_LANGUAGE;
     }
     this.onUpdateTabCommand();
   }
 
   onTabCommandSelectLanguage(event: React.FormEvent<HTMLSelectElement>) {
-    this.state.tabData.command.selectedLanguage = event.currentTarget.value;
+    let language: application.Language = LANGUAGES.find(
+      (value: application.Language) =>
+        value.iso639_1 == event.currentTarget.value
+    );
+    this.state.tabData.command.selectedLanguage =
+      language == undefined ? NO_LANGUAGE : language;
     if (this.state.tabData.command.isAutomatic) {
       this.state.tabData.command.selectedSource = "";
       this.state.tabData.command.selectedView = "";
-      this.state.tabData.command.selectedLanguage = "";
+      this.state.tabData.command.selectedLanguage = NO_LANGUAGE;
     }
     this.onUpdateTabCommand();
   }
@@ -393,16 +395,19 @@ class Popup extends React.Component<{}, State> {
               id="fieldLanguage"
               disabled={this.state.tabData.command.isAutomatic}
               onChange={this.onTabCommandSelectLanguage}
-              value={this.state.tabData.command.selectedLanguage}
+              value={this.state.tabData.command.selectedLanguage.iso639_1}
               style={{ width: "250px" }}
             >
               <option key={"view-default"} value="">
                 {"-- auto --"}
               </option>
-              {LANGUAGES.map((language: Language, index: number) => {
+              {LANGUAGES.sort(
+                (a: application.Language, b: application.Language) =>
+                  a.name.localeCompare(b.name)
+              ).map((language: application.Language, index: number) => {
                 return (
-                  <option key={"language-" + index} value={language.code}>
-                    {language.name + " (" + language.code + ")"}
+                  <option key={"language-" + index} value={language.iso639_1}>
+                    {language.name + " (" + language.iso639_2 + ")"}
                   </option>
                 );
               })}

extension/webpack.config.js

@@ -21,7 +21,7 @@ module.exports = [
     },
     module: {
       rules: [
-        { test: /\.tsx?$/, loader: "ts-loader" },
+        { test: /\.tsx?$/, loader: "awesome-typescript-loader" },
         { enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
       ]
     },
@@ -52,7 +52,7 @@ module.exports = [
     },
     module: {
       rules: [
-        { test: /\.tsx?$/, loader: "ts-loader" },
+        { test: /\.tsx?$/, loader: "awesome-typescript-loader" },
         { enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
       ]
     },
@@ -75,7 +75,7 @@ module.exports = [
     },
     module: {
       rules: [
-        { test: /\.tsx?$/, loader: "ts-loader" },
+        { test: /\.tsx?$/, loader: "awesome-typescript-loader" },
         { enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
       ]
     },
@@ -105,7 +105,7 @@ module.exports = [
     },
     module: {
       rules: [
-        { test: /\.tsx?$/, loader: "ts-loader" },
+        { test: /\.tsx?$/, loader: "awesome-typescript-loader" },
         { enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
       ]
     },
@@ -144,7 +144,7 @@ module.exports = [
     },
     module: {
       rules: [
-        { test: /\.tsx?$/, loader: "ts-loader" },
+        { test: /\.tsx?$/, loader: "awesome-typescript-loader" },
         { enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
       ]
     },

libview/src/application.ts

@@ -34,6 +34,24 @@ export interface ViewRendering {
   viewId: string;
 }
 
+/**
+ * The data about a language
+ */
+export interface Language {
+  /**
+   * The ISO 639-2 language code
+   */
+  iso639_2: string;
+  /**
+   * The ISO 639-1 language code
+   */
+  iso639_1: string;
+  /**
+   * The language's name
+   */
+  name: string;
+}
+
 /**
  * The user events that can occur in a rendered view
  */
@@ -56,7 +74,7 @@ export interface TargetRenderingOptions {
   /**
    * The language to use
    */
-  language?: string;
+  language?: Language;
 }
 
 /**