Refactor locale handling and implement new locale switcher design. WIP #1597 @6

diff --git a/images/interface.svg b/images/interface.svg
index b7ab593662b8538cbae9ad0a9c6fae46ef23f721..07c181e7bdfb4f7c2678cc3f796bb6cde773f196 100644 (file)
--- a/images/interface.svg
+++ b/images/interface.svg
@@ -84,4 +84,8 @@
         <path d="m160 428c-4 0-8-2-10-4-7-6-7-14 0-21 0 0 94-96 94-186 0-90-45-137-45-137-6-6-6-14 0-21 6-6 14-6 20 0 2 2 53 56 53 158 0 102-98 203-102 207-2 2-6 4-10 4z m49 29c-78 0-143-64-143-144 0-80 63-143 143-143 8 0 14 6 14 14 0 9-6 15-14 15-64 0-115 51-115 114 0 64 51 115 115 115 63 0 115-51 115-115 0-16-5-30-11-45-4-8 0-16 9-18 8-4 16 0 18 8 8 18 12 37 12 57 0 78-63 142-143 142z m158-207c0 0-2 0-2 0-19 0-33-10-43-25-15-22-13-39-7-51 11-22 39-37 62-39 31-4 41-22 41-22 4-7 10-9 16-9 6 2 10 9 10 15 0 8-4 78-28 106-10 17-31 25-49 25z m-23-41c6 8 12 12 21 12 10 0 22-4 28-14 8-10 15-33 19-53-9 4-21 8-33 10-17 0-33 10-39 20 0 4-4 11 4 25z"/>
     </symbol>
 
+    <symbol id="interface-locales" viewBox="0 0 512 512">
+        <path d="m428 117l-174 0-4-29c-2-25-23-41-47-41l-119 0c-27 0-47 21-47 47l0 254c0 27 20 47 47 47l86 0 4 29c2 16 12 29 27 37 8 4 14 6 20 6l209 0c27 0 47-21 47-47l0-256c0-27-22-47-49-47z m-344 252c-12 0-21-11-21-21l0-254c0-12 11-20 21-20l119 0c10 0 20 8 20 18l35 277z m152 26c-15 17-21 23-25 27-2 2-4 4-6 8-2-4-4-6-4-10l-2-25z m215 23c0 12-11 20-21 20l-197 0c7-6 15-14 41-45l5-4c4-4 10-10 8-22l-31-224 172 0c12 0 21 11 21 21l0 254z m-310-268l-55 147 25 0 14-41 55 0 15 41 24 0-51-147z m-8 86l12-39c5-11 7-19 9-27 0 2 2 6 4 12 2 6 4 11 4 13l14 38-43 0z m281-9l-37 0 0-41-27 0 0 41-47 0 0 21 98 0c-2 16-8 49-26 69-29 33-64 41-64 41l6 27c2 0 43-10 78-49 35-39 35-96 35-98l-12 0 0-11z"/>
+    </symbol>
+
 </svg>

diff --git a/js/libs/fluidbook/fluidbook.l10n.js b/js/libs/fluidbook/fluidbook.l10n.js
index dd48a971e542c73d0a9c214d26c414e38c80e52e..ea186090cdbe1cb4ca912f6b7c8dc94095720aec 100644 (file)
--- a/js/libs/fluidbook/fluidbook.l10n.js
+++ b/js/libs/fluidbook/fluidbook.l10n.js
@@ -88,7 +88,8 @@ FluidbookL10N.prototype = {
 
             var o = {lang: l[0], flag: l[1], url: url, langName: l[3], countryName: l[4]};
 
-            $this.multilang[$this.multilang.length] = o;
+            // $this.multilang[$this.multilang.length] = o;
+            $this.multilang[l[0]] = o; // Indexed by language code to allow easier lookups later
         });
     },
     getActiveFlag: function () {
@@ -116,6 +117,36 @@ FluidbookL10N.prototype = {
             }
         }
     },
+
+    getCurrentLanguageName: function () {
+        return this.getLanguageName(this.getActiveLang());
+    },
+
+    // Format the language name according to the settings
+    getLanguageName: function (languageCode) {
+
+        var details = this.multilang[languageCode],
+            name = '';
+
+        if (details === undefined) {
+            return name;
+        }
+
+        switch(this.fluidbook.datas.multilangDisplay) {
+            case 'lang':
+                name = details.langName;
+                break;
+            case 'lang_country':
+                name = details.langName + ' (' + details.countryName + ')';
+                break;
+            case 'country_lang':
+                name = details.countryName + ' (' + details.langName + ')';
+                break;
+        }
+
+        return name;
+    },
+
     updateTranslations: function () {
         var $this = this;
         $("#q").attr('placeholder', this.__('search'));

diff --git a/js/libs/fluidbook/fluidbook.menu.js b/js/libs/fluidbook/fluidbook.menu.js
index 798bd661bbfe68b2e1c745d1ae5c9ed80224da40..0b89d6c7d08d99a5d2d1e40694b48c9fd2b6b8ce 100644 (file)
--- a/js/libs/fluidbook/fluidbook.menu.js
+++ b/js/libs/fluidbook/fluidbook.menu.js
@@ -287,7 +287,9 @@ FluidbookMenu.prototype = {
         view += '<div class="content">';
         view += '<ul class="chapters localesList">';
         var $this = this;
-        $.each(this.fluidbook.l10n.multilang, function (k, v) {
+
+        Object.keys(this.fluidbook.l10n.multilang).forEach(function (langCode) {
+            var v = this.fluidbook.l10n.multilang[langCode];
             var url = v.url;
             if (url.substr(0, 3) == '../' && !$this.fluidbook.datas.standalone) {
                 url = '../' + url;
@@ -296,14 +298,7 @@ FluidbookMenu.prototype = {
              __('Langue') . ' (' . __('Pays') . ')' => 'lang_country',
              __('Pays') . ' (' . __('Langue') . ')' => 'country_lang'));*/
 
-            var name = '';
-            if ($this.fluidbook.datas.multilangDisplay == 'lang') {
-                name = v.langName;
-            } else if ($this.fluidbook.datas.multilangDisplay == 'lang_country') {
-                name = v.langName + ' (' + v.countryName + ')';
-            } else if ($this.fluidbook.datas.multilangDisplay == 'country_lang') {
-                name = v.countryName + ' (' + v.langName + ')';
-            }
+            var name = $this.fluidbook.l10n.getLanguageName(langCode);
 
             var c = '';
             if ($this.fluidbook.datas.phonegap) {

diff --git a/js/libs/fluidbook/fluidbook.nav.js b/js/libs/fluidbook/fluidbook.nav.js
index 7f7d90b704c63ec41dc229e537727b5c99a4ed4e..064e99c34d9bf9af8ab72ee248186a752be51a38 100644 (file)
--- a/js/libs/fluidbook/fluidbook.nav.js
+++ b/js/libs/fluidbook/fluidbook.nav.js
@@ -137,10 +137,10 @@ FluidbookNav.prototype = {
             }
         }
 
-        // Only the Menu should have titles
-        if (navType == 'menu') {
+        // Only the Menu should have titles + the locales icon in the horizontal menu
+        if (navType == 'menu' || id == 'locales') {
             if (title != undefined && title != '') {
-                res += ' ' + this.fluidbook.l10n.__(title);
+                res += ' <span class="menu-item-title">' + this.fluidbook.l10n.__(title) + '</span>';
             }
         }
 
@@ -223,13 +223,21 @@ FluidbookNav.prototype = {
         }
 
 
-        var all = "index,chapters,search,friend,print,bookmark,archives,basket,fullscreen,sound,3d,help".split(",");
-        var hide = array_diff(all, this.fluidbook.datas.navOrder);
-        var loop = [].concat(this.fluidbook.datas.navOrder).concat(hide);
+        // All possible icons and default ordering
+        var all = "index,chapters,search,friend,print,bookmark,archives,basket,fullscreen,sound,3d,help,lang".split(",");
+        // var hide = array_diff(all, this.fluidbook.datas.navOrder); // Array of icons that aren't in the navOrder list and should be hidden
+        // var loop = [].concat(this.fluidbook.datas.navOrder).concat(hide);
+        var loop = this.fluidbook.datas.navOrder;
+        var localeIconIndex;
+
+        // If the locales icon is included, it should always be placed last in the list for formatting reasons
+        if ((localeIconIndex = loop.indexOf('lang')) !== -1) {
+            loop.push(loop.splice(localeIconIndex, 1)[0]); // Push to end of array
+        }
 
         for (var e in loop) {
             var icon = loop[e];
-            var visible = hide.indexOf(icon) == -1;
+            //var visible = hide.indexOf(icon) == -1;
             var link;
 
             if (icon == 'home' && !skipHome) {
@@ -326,7 +334,8 @@ FluidbookNav.prototype = {
                 link = this.addLink(navType, 'interface-print', '#', 'print', 'print', 'print');
 
             } else if (icon == 'lang' && this.fluidbook.l10n.multilangEnabled) {
-                link = this.addMultilangLink(navType);
+                // Note: the "!" at the beginning of the title/help parameters means that we don't want these strings translated
+                link = this.addLink(navType, 'interface-locales', '#/locales', 'locales', '!' + this.fluidbook.l10n.getCurrentLanguageName(), '!Select Language');
 
             } else if (icon == 'archives') {
                 if (this.fluidbook.datas.archivesLink != '') {
@@ -354,9 +363,9 @@ FluidbookNav.prototype = {
 
             }
 
-            if (!visible) {
-                $(link).addClass('hidden');
-            }
+            // if (!visible) {
+            //     $(link).addClass('hidden');
+            // }
         }
 
 
@@ -495,37 +504,6 @@ FluidbookNav.prototype = {
 
     },
 
-    addMultilangLink: function (navType) {
-        var $nav = this.getNavFromType(navType),
-            id = 'locales',
-            elementID = navType + '_' + id;
-
-        if ($nav.find('#' + elementID).length > 0) {
-            return;
-        }
-
-        var label = this.fluidbook.l10n.__('Select language');
-        var url = '#/locales';
-        var flagHolder = '<span class="locale-flag"></span>';
-        var link;
-        if (navType == 'horizontalNav') {
-            link = '<a id="'+ elementID +'" data-tooltip="' + label + '" href="'+ url +'">'+ flagHolder +'</a>';
-        } else {
-            link = '<a id="'+ elementID +'" href="'+ url +'">'+ flagHolder +' '+ label +'</a>';
-        }
-
-        var flag = this.fluidbook.l10n.getActiveFlag();
-        if (flag === false) {
-            return;
-        }
-
-        // Add to menu and set flag
-        $nav.find('ul').append('<li>' + link + '</li>');
-        $nav.find(".locale-flag").css('background-image', 'url("images/flags/' + flag + '.png")');
-
-        return link;
-    },
-
     getMenuCloseButton: function () {
         var $this = this,
             buttonID = 'menuClose';
@@ -728,6 +706,12 @@ FluidbookNav.prototype = {
     },
     setInterface: function () {
 
+        // Ensure we don't add interface elements more than once
+        if (this._inited['interface'] == true) {
+            return;
+        }
+        this._inited['interface'] = true;
+
         var res = this.getLink('interface-previous', '#', 'previous', '', '', '', false);
         res += this.getLink('interface-next', '#', 'next', '', '', '', false);
         $('#interface').append(res);

diff --git a/style/mmenu/mmenu.less b/style/mmenu/mmenu.less
index 9d7d5e3878a87901a4396cda182afd24ad14715b..25e40b369cd575b8dd0c64bb59ca643dae061057 100644 (file)
--- a/style/mmenu/mmenu.less
+++ b/style/mmenu/mmenu.less
@@ -75,7 +75,7 @@ html.mm-opening .mm-menu.mm-opened[class*=mm-pagedim]~#mm-blocker {
   background-color: @menu-background;
   color: @menu-text;
 
-  a, span {
+  a, li > span {
     padding: 10px 10px 10px 29px;
 
     img {

diff --git a/style/nav-horizontal.less b/style/nav-horizontal.less
index fa4fa6517f4790de97607add6261e33c8b0facf4..eacf950023b9d930f22f419ac1e346a7c1c860b1 100644 (file)
--- a/style/nav-horizontal.less
+++ b/style/nav-horizontal.less
@@ -6,6 +6,17 @@
   @media all and (max-width: @menu-breakpoint) {
     display: none;
   }
+
+  // Locales icon + text link
+  &_locales {
+    border-left: 1px solid;
+    margin-right: 1.5em;
+    margin-left: 14px;
+
+    .svg-icon {
+      margin: 0 7px 0 30px !important;
+    }
+  }
 }
 
 #iconList {
@@ -17,12 +28,29 @@
     display: inline-block;
   }
 
+  a {
+    color: @icon-color;
+    display: inline-block;
+  }
+
   .svg-icon {
     width: 25px;
     height: 25px;
-    margin: 0 18px;
+    margin: 0 17px;
     color: @icon-color;
+    vertical-align: middle;
   }
+}
 
-
+// Small dropdown arrow after locale name
+.icon-locales .menu-item-title:after {
+  content: '';
+  width: 6px;
+  height: 6px;
+  vertical-align: middle;
+  margin: -3px 0 0 10px;
+  border-style: solid;
+  border-width: 0 2px 2px 0; // Make right angle for arrow
+  transform: rotate(45deg); // Rotate to downwards position
+  display: inline-block;
 }
\ No newline at end of file