WIP #1495 @4

diff --git a/_index.html b/_index.html
index 95225c660f1afcdcbdaf84bf328701943e88b535..21343d5d7dcc64c8c592dc62d1fb6d33c56fb8a8 100644 (file)
--- a/_index.html
+++ b/_index.html
@@ -26,6 +26,7 @@
 <div id="main">
        <div id="background"></div>
        <header>
+               <nav id="horizontalNav"></nav>
                <nav id="menu"></nav>
                <div id="search"></div>
                <a id="logo" href="#"></a>

diff --git a/js/libs/fluidbook/fluidbook.nav.js b/js/libs/fluidbook/fluidbook.nav.js
index 1b0d34a5f2b3603a63f12c4941aef7c9af358c4b..6e33c0f21a215ec72488a59f9e195e9e508243b7 100644 (file)
--- a/js/libs/fluidbook/fluidbook.nav.js
+++ b/js/libs/fluidbook/fluidbook.nav.js
@@ -1,12 +1,13 @@
 function FluidbookNav(fluidbook) {
     this.fluidbook = fluidbook;
     this._dimensions = this.fluidbook.datas.iconsDimensions;
-    this._inited = false;
     this.menuIsOpen = false;
-    this.menu = $("#menu"); // Renamed from #nav because mmenu animations weren't working (probably due to some other script interference)
     this.chaptersMenuHTML = '';
-    this.setNav();
-
+    this.menu = $("#menu"); // Renamed from #nav because mmenu animations weren't working (probably due to some other script interference)
+    this.horizontalNav = $("#horizontalNav");
+    this._inited = {};
+    this.setNav('horizontalNav');
+    this.setNav('menu');
 }
 
 FluidbookNav.prototype = {
@@ -27,7 +28,7 @@ FluidbookNav.prototype = {
                 "pagedim-black"
             ],
             "offCanvas": {
-                "position": "right",
+                "position": this.fluidbook.datas.menuPosition,
                 "zposition": "front"
             },
             "navbar": {
@@ -78,22 +79,25 @@ FluidbookNav.prototype = {
     //     }
     //     return this.fluidbook.loader.getImage(src, this._dimensions[name][0], this._dimensions[name][1]);
     // },
-    addLink: function (name, href, id, title, help, before, c) {
-        if (this.menu.find('#' + id).length > 0) {
+    addLink: function (navType, name, href, id, title, help, before, className, showIcon) {
+
+        var $nav = this.getNavFromType(navType);
+
+        if ($nav.find('#' + id).length > 0) {
             return;
         }
-        var l = $(this.getLink(name, href, id, title, help, c)),
+        var l = $(this.getLink(name, href, id, title, help, className, showIcon, navType)),
             li = '<li>' + l[0].outerHTML + '</li>';
         if (before == undefined) {
-            this.menu.find('ul').append(li);
+            $nav.find('ul').append(li);
         } else {
-            this.menu.find("ul #" + before).before(li);
+            $nav.find("ul #" + before).before(li);
         }
         return l;
     },
-    getLink: function (name, href, id, title, help, className, icon) {
-        if (icon == undefined) {
-            icon = true;
+    getLink: function (name, href, id, title, help, className, showIcon, navType) {
+        if (showIcon == undefined) {
+            showIcon = true;
         }
 
         var res = '';
@@ -104,12 +108,17 @@ FluidbookNav.prototype = {
         if (className != undefined) {
             res += ' class="' + className + '"';
         }
-        // ToDo: Allow tooltips for horizontal icon nav but not for menu version
-        // if (help != undefined && help != '') {
-        //     res += ' data-tooltip="' + this.fluidbook.l10n.__(help) + '"';
-        // }
+
+        // Only the horizontal icon menu should have the tooltips
+        if (navType == 'horizontalNav') {
+            if (help != undefined && help != '') {
+                res += ' data-tooltip="' + this.fluidbook.l10n.__(help) + '"';
+            }
+        }
+
         res += '>';
-        if (icon) {
+
+        if (showIcon) {
             res += getSpriteIcon(name);
         }
 
@@ -124,11 +133,31 @@ FluidbookNav.prototype = {
             return '<a href="' + href + '"' + res + '</a>';
         }
     },
-    setNav: function () {
-        if (this._inited == true) {
+    getNavFromType: function (navType) {
+        switch (navType) {
+            case 'horizontalNav':
+                return this.horizontalNav;
+                break;
+            case 'menu':
+                return this.menu;
+                break;
+            default:
+                console.error('navType ' + navType + ' not found!');
+                return false;
+        }
+    },
+    setNav: function (navType) {
+
+        if (typeof navType == 'undefined') {
+            return false;
+        }
+
+        var $nav = this.getNavFromType(navType);
+
+        if (this._inited[navType] == true) {
             return;
         }
-        this._inited = true;
+        this._inited[navType] = true;
         /*
          * __('overview')
          * __('chapters')
@@ -141,17 +170,21 @@ FluidbookNav.prototype = {
         var $this = this;
         // index, chapters, print, friend, bookmark, pdf, archives, basket, fullscreen, sound, 3d, help
 
-        var menuOpener = '<a href="#" id="menuOpener">' + this.fluidbook.l10n.__('Menu') + getSpriteIcon('interface-menu') + '</a>';
-        $('#main header').append(menuOpener);
+        if (navType == 'menu') {
 
-        // Add holder list element for menu items
-        this.menu.append('<ul id="menuList"></ul>');
+            var menuOpener = '<a href="#" id="menuOpener">' + this.fluidbook.l10n.__('Menu') + getSpriteIcon('interface-menu') + '</a>';
+            $('#main header').append(menuOpener);
 
-        // Add Search form
-        if (this.fluidbook.datas.search) {
-            $('#menuList').prepend('<li id="menuSearch">' + this.getSearch() + '</li>');
+            // Add holder list element for menu items
+            this.menu.append('<ul id="menuList"></ul>');
+
+            // Add Search form
+            if (this.fluidbook.datas.search) {
+                $('#menuList').prepend('<li id="menuSearch">' + this.getSearch() + '</li>');
+            }
         }
 
+
         try {
             var skipHome = (window.localStorage.getItem('home') === '0');
             var forceHome = (window.localStorage.getItem('home') === '1');
@@ -186,7 +219,7 @@ FluidbookNav.prototype = {
                 }
                 try {
                     if (homeURL != '') {
-                        link = this.addLink('nav-home', homeURL, 'home', 'home', 'home');
+                        link = this.addLink(navType, 'nav-home', homeURL, 'home', 'home', 'home');
                     }
                 } catch (err) {
 
@@ -201,71 +234,77 @@ FluidbookNav.prototype = {
                     return false;
                 })
             } else if (icon == 'index') {
-                link = this.addLink('interface-index', '#/index', 'index', 'overview', 'overview');
+                link = this.addLink(navType, 'interface-index', '#/index', 'index', 'overview', 'overview');
             } else if (icon == 'chapters') {
                 if (this.fluidbook.datas.displayChaptersIcon) {
                     if (this.fluidbook.datas.chaptersPage != '') {
-                        link = this.addLink('interface-chapters', '#/page/' + this.fluidbook.datas.chaptersPage, 'chapters', 'chapters', 'chapters');
-                    } else if (this.fluidbook.datas.chapters.length > 0) {
+                        link = this.addLink(navType, 'interface-chapters', '#/page/' + this.fluidbook.datas.chaptersPage, 'chapters', 'chapters', 'chapters');
+                    } else if (navType == 'menu' && this.fluidbook.datas.chapters.length > 0) {
                         // this.addLink('nav-sommaire', '#/chapters', 'chapters', 'chapters');
-                        link = this.addLink('interface-chapters', '', 'chapters', 'chapters', 'chapters');
+                        link = this.addLink(navType, 'interface-chapters', '', 'chapters', 'chapters', 'chapters');
 
                         // Get HTML for submenus (appended later)
                         this.chaptersMenuHTML = this.makeChapterLists(this.fluidbook.datas.chapters);
                     }
                 }
 
-            // Sharing icons - this may contain many different icons
+                // Sharing icons - this may contain many different icons
             } else if (icon == 'friend') {
-                // if (this.fluidbook.datas.share) {
-                //     link = this.addLink('nav-friend', '#/share', 'share', 'share');
-                //     $("#share").click(function () {
-                //         if ($this.fluidbook.datas.phonegap != 'android') {
-                //             return true;
-                //         }
-                //         $this.fluidbook.intentShare();
-                //         return false;
-                //     });
-                // }
-
-                var shareLinks = {},
-                    shareHTML = '';
-
-                if (this.fluidbook.datas.friend) {
-                    shareLinks['email'] = 'E-mail';
-                }
-                if (this.fluidbook.datas.facebook) {
-                    shareLinks['facebook'] = 'Facebook';
-                }
-                if (this.fluidbook.datas.twitter) {
-                    shareLinks['twitter'] = 'Twitter';
-                }
-                if (this.fluidbook.datas.googleplus) {
-                    shareLinks['googleplus'] = 'Google Plus';
-                }
-                if (this.fluidbook.datas.linkedin) {
-                    shareLinks['linkedin'] = 'LinkedIn';
-                }
-                if (this.fluidbook.datas.viadeo) {
-                    shareLinks['viadeo'] = 'Viadeo';
-                }
 
-                // Generate links
-                for (var shareType in shareLinks) {
-                    if (shareLinks.hasOwnProperty(shareType)) { // Ensure we don't get inherited properties
-                        shareHTML += '<a href="#" data-service="'+ shareType +'" class="share" title="'+ shareLinks[shareType] +'">';
-                        shareHTML += '<img src="data/images/share-'+ shareType +'.svg" />';
-                        shareHTML += '</a>';
+                if (navType == 'horizontalNav') {
+
+                    if (this.fluidbook.datas.share) {
+                        link = this.addLink(navType, 'nav-friend', '#/share', 'share', 'share');
+                        $("#share").click(function () {
+                            if ($this.fluidbook.datas.phonegap != 'android') {
+                                return true;
+                            }
+                            $this.fluidbook.intentShare();
+                            return false;
+                        });
+                    }
+
+                } else if (navType == 'menu') {
+
+                    var shareLinks = {},
+                        shareHTML = '';
+
+                    if (this.fluidbook.datas.friend) {
+                        shareLinks['email'] = 'E-mail';
+                    }
+                    if (this.fluidbook.datas.facebook) {
+                        shareLinks['facebook'] = 'Facebook';
+                    }
+                    if (this.fluidbook.datas.twitter) {
+                        shareLinks['twitter'] = 'Twitter';
+                    }
+                    if (this.fluidbook.datas.googleplus) {
+                        shareLinks['googleplus'] = 'Google Plus';
+                    }
+                    if (this.fluidbook.datas.linkedin) {
+                        shareLinks['linkedin'] = 'LinkedIn';
+                    }
+                    if (this.fluidbook.datas.viadeo) {
+                        shareLinks['viadeo'] = 'Viadeo';
+                    }
+
+                    // Generate links
+                    for (var shareType in shareLinks) {
+                        if (shareLinks.hasOwnProperty(shareType)) { // Ensure we don't get inherited properties
+                            shareHTML += '<a href="#" data-service="' + shareType + '" class="share" title="' + shareLinks[shareType] + '">';
+                            shareHTML += '<img src="data/images/share-' + shareType + '.svg" />';
+                            shareHTML += '</a>';
+                        }
                     }
-                }
 
-                // Append to menu
-                this.menu.find('ul').append('<li id="shareLinks"><div class="mm-nopanel share-icons">'+ shareHTML +'</div></li>');
+                    // Append to menu
+                    this.menu.find('ul').append('<li id="shareLinks"><div class="mm-nopanel share-icons">' + shareHTML + '</div></li>');
+                }
 
 
             } else if (icon == 'bookmark') {
                 if (this.fluidbook.datas.bookmark) {
-                    link = this.addLink('interface-bookmarks', '#/bookmark', 'bookmarks', 'bookmarks', 'bookmarks');
+                    link = this.addLink(navType, 'interface-bookmarks', '#/bookmark', 'bookmarks', 'bookmarks', 'bookmarks');
                     $("#bookmarks").click(function () {
                         if (!$this.fluidbook.bookmarks.hasBookmarkedPages()) {
                             var message = $this.fluidbook.l10n.__("you don't have any bookmarks");
@@ -281,7 +320,7 @@ FluidbookNav.prototype = {
                 }
             } else if (icon == 'pdf') {
                 if ($("#download").length == 0 && this.fluidbook.datas.pdf) {
-                    link = this.addLink('interface-download', '#', 'download', 'download', 'download');
+                    link = this.addLink(navType, 'interface-download', '#', 'download', 'download', 'download');
                     $("#download").on('click', function () {
                         $this.fluidbook.print();
                         return false;
@@ -289,7 +328,7 @@ FluidbookNav.prototype = {
                 }
             } else if (icon == 'print') {
                 if ($("#print").length == 0 && this.fluidbook.datas.print) {
-                    link = this.addLink('interface-print', '#', 'print', 'print', 'print');
+                    link = this.addLink(navType, 'interface-print', '#', 'print', 'print', 'print');
                     $("#print").on('click', function () {
                         $this.fluidbook.print();
                         return false;
@@ -301,15 +340,15 @@ FluidbookNav.prototype = {
                 }
             } else if (icon == 'archives') {
                 if (this.fluidbook.datas.archivesLink != '') {
-                    link = this.addLink('nav-archives', this.fluidbook.datas.archivesLink, 'archives', '!' + this.fluidbook.datas.archivesLabel, '!' + this.fluidbook.datas.archivesLabel);
+                    link = this.addLink(navType, 'nav-archives', this.fluidbook.datas.archivesLink, 'archives', '!' + this.fluidbook.datas.archivesLabel, '!' + this.fluidbook.datas.archivesLabel);
                 } else if (this.fluidbook.datas.externalArchives != '') {
-                    link = this.addLink('nav-archives', '#/archives', 'archives', '!' + this.fluidbook.datas.archivesLabel, '!' + this.fluidbook.datas.archivesLabel);
+                    link = this.addLink(navType, 'nav-archives', '#/archives', 'archives', '!' + this.fluidbook.datas.archivesLabel, '!' + this.fluidbook.datas.archivesLabel);
                 }
             } else if (icon == 'help') {
-                link = this.addLink('interface-help', '#', 'help', 'help', 'help');
+                link = this.addLink(navType, 'interface-help', '#', 'help', 'help', 'help');
             } else if (icon == 'zoom' && !this.fluidbook.support.isMobile) {
-                link = this.addLink('nav-zoomin', '#', 'zoomin', 'zoom in', 'zoom in');
-                link = this.addLink('nav-zoomout', '#', 'zoomout', 'zoom out', 'zoom out');
+                link = this.addLink(navType, 'nav-zoomin', '#', 'zoomin', 'zoom in', 'zoom in');
+                link = this.addLink(navType, 'nav-zoomout', '#', 'zoomout', 'zoom out', 'zoom out');
 
                 $("#zoomin").click(function (e) {
                     $this.fluidbook.desktop.clickZoom(e, 'in');
@@ -321,7 +360,7 @@ FluidbookNav.prototype = {
                     return false;
                 });
             } else if (icon == 'fullscreen' && Modernizr.fullscreen && !DATAS.phonegap) {
-                link = this.addLink('interface-fullscreen', '#', 'fullscreen', 'full screen', 'switch between fullscreen and normal');
+                link = this.addLink(navType, 'interface-fullscreen', '#', 'fullscreen', 'full screen', 'switch between fullscreen and normal');
                 $("#fullscreen").click(function () {
                     $this.menuAPI.close();
                     screenfull.toggle();
@@ -334,6 +373,8 @@ FluidbookNav.prototype = {
             }
         }
 
+
+        // Todo: handle search icon in horizontal menu only...
         // if (this.fluidbook.datas.search) {
         //     this.setSearch();
         // }
@@ -342,43 +383,49 @@ FluidbookNav.prototype = {
         }
         this.setInterface();
 
-        // Insert Chapters submenus
-        if (this.chaptersMenuHTML != '') {
-            $('#chapters').parent().append(this.chaptersMenuHTML);
-        }
+        if (navType == 'menu') {
 
-        // Remove unwanted links from chapters menu
-        // For any items that have a submenu, we want to remove the page link
-        // from the parent item to make it easier to open the submenu
-        $('#chapterList li a').each(function() { // Process all links in the chapters submenu
-            if ($(this).siblings('ul').length > 0) { // Check if any have a <ul> element beside them (indicates a submenu)
-                // MMenu requires non-link elements to be wrapped in a <span>
-                // so we need to first wrap the contents of the link in a span before removing the wrapping <a>
-                $(this).contents().wrap('<span></span>').parent().unwrap('a');
+            // Insert Chapters submenus
+            if (this.chaptersMenuHTML != '') {
+                $('#chapters').parent().append(this.chaptersMenuHTML);
             }
-        });
+
+            // Remove unwanted links from chapters menu
+            // For any items that have a submenu, we want to remove the page link
+            // from the parent item to make it easier to open the submenu
+            $('#chapterList li a').each(function () { // Process all links in the chapters submenu
+                if ($(this).siblings('ul').length > 0) { // Check if any have a <ul> element beside them (indicates a submenu)
+                    // MMenu requires non-link elements to be wrapped in a <span>
+                    // so we need to first wrap the contents of the link in a span before removing the wrapping <a>
+                    $(this).contents().wrap('<span></span>').parent().unwrap('a');
+                }
+            });
 
 
-        // If the chapters menu is not cascading, wrap submenu lists in <div>s so that MMenu will show them in the same panel
-        if (!this.fluidbook.datas.chaptersCascade) {
+            // If the chapters menu is not cascading, wrap submenu lists in <div>s so that MMenu will show them in the same panel
+            if (!this.fluidbook.datas.chaptersCascade) {
 
-            // Create a single panel around the chapters
-            $('#chapterList').wrap('<div id="chaptersPanel" class="Panel"></div>');
+                // Create a single panel around the chapters
+                $('#chapterList').wrap('<div id="chaptersPanel" class="Panel"></div>');
 
-            // Tell MMenu not to render any child lists as subpanels (ref: https://github.com/FrDH/jQuery.mmenu/issues/499#issuecomment-170649868)
-            $('#chaptersPanel ul').addClass('mm-nopanel');
+                // Tell MMenu not to render any child lists as subpanels (ref: https://github.com/FrDH/jQuery.mmenu/issues/499#issuecomment-170649868)
+                $('#chaptersPanel ul').addClass('mm-nopanel');
 
-            $('#chapters').wrap('<a href="#chaptersPanel"></a>'); // Link to
+                $('#chapters').wrap('<a href="#chaptersPanel"></a>'); // Link to
 
-            //console.log($('#menuList').parent().html());
-        }
+                //console.log($('#menuList').parent().html());
+            }
+
+            // Add close button to menu
+            this.menu.append(this.getMenuCloseButton());
 
-        // Add close button to menu
-        this.menu.append(this.getMenuCloseButton());
+            this.initMenu();
+
+            $(this.fluidbook).trigger('fluidbooknavready');
+
+        }
 
-        this.initMenu();
 
-        $(this.fluidbook).trigger('fluidbooknavready');
     },
     addMultilangLink: function (langs) {
         var l = '<a id="localesContainer" help="!Select language" href="#/locales"><span id="locales"></span></a>';

diff --git a/plugins/com/promotal/catalogue/plugin.js b/plugins/com/promotal/catalogue/plugin.js
index 278655819b9897d37d054e2db6d594b3d0732787..8babf641cd4f75d9c2928d54024c1bb96ef6b5a9 100644 (file)
--- a/plugins/com/promotal/catalogue/plugin.js
+++ b/plugins/com/promotal/catalogue/plugin.js
@@ -15,7 +15,8 @@ function com_promotal_catalogue() {
                                        data = JSON.parse(data);\r
                                }\r
                                distributeurs = data;\r
-                               fluidbook.nav.addLink('nav-map', '#/distributors', 'map', 'find a distributor', 'find a distributor', 'help');\r
+                               fluidbook.nav.addLink('horizontalNav', 'nav-map', '#/distributors', 'map', 'find a distributor', 'find a distributor', 'help');\r
+                               fluidbook.nav.addLink('menu', 'nav-map', '#/distributors', 'map', 'find a distributor', 'find a distributor', 'help');\r
                        },\r
                        error: getDistributeursFromCache\r
                });\r
@@ -28,7 +29,8 @@ function com_promotal_catalogue() {
                                fluidbook.cache.set('promotions_' + locale, data);\r
                                promotions = data;\r
                                if (promotions.length > 0) {\r
-                                       fluidbook.nav.addLink('nav-tag', '#/promotions', 'tag', 'promotions', 'promotions', 'help');\r
+                                       fluidbook.nav.addLink('horizontalNav', 'nav-tag', '#/promotions', 'tag', 'promotions', 'promotions', 'help');\r
+                                       fluidbook.nav.addLink('menu', 'nav-tag', '#/promotions', 'tag', 'promotions', 'promotions', 'help');\r
                                }\r
                        },\r
                        error: getPromotionsFromCache\r
@@ -45,7 +47,8 @@ function getDistributeursFromCache() {
        var locale = fluidbook.l10n.getActiveLang();\r
        if (fluidbook.cache.isset('distributeurs_' + locale)) {\r
                distributeurs = fluidbook.cache.get('distributeurs_' + locale);\r
-               fluidbook.nav.addLink('nav-map', '#/distributors', 'map', 'find a distributor', 'find a distributor', 'help');\r
+               fluidbook.nav.addLink('horizontalNav', 'nav-map', '#/distributors', 'map', 'find a distributor', 'find a distributor', 'help');\r
+               fluidbook.nav.addLink('menu', 'nav-map', '#/distributors', 'map', 'find a distributor', 'find a distributor', 'help');\r
        }\r
 }\r
 \r
@@ -55,7 +58,8 @@ function getPromotionsFromCache() {
        if (fluidbook.cache.isset('promotions_' + locale)) {\r
                promotions = fluidbook.cache.get('promotions_' + locale);\r
                if (promotions.length > 0) {\r
-                       fluidbook.nav.addLink('nav-tag', '#/promotions', 'tag', 'promotions', 'promotions', 'help');\r
+                       fluidbook.nav.addLink('horizontalNav', 'nav-tag', '#/promotions', 'tag', 'promotions', 'promotions', 'help');\r
+                       fluidbook.nav.addLink('menu', 'nav-tag', '#/promotions', 'tag', 'promotions', 'promotions', 'help');\r
                }\r
        }\r
 }\r