Integration of contents index into MMenu. WIP #807 @5.5

diff --git a/js/libs/fluidbook/fluidbook.nav.js b/js/libs/fluidbook/fluidbook.nav.js
index ae3ec6f79bbb2eb5101eb957fad07f9a597ff0e6..7a0684f4b1f0d9004178d34479f800615371a8b8 100644 (file)
--- a/js/libs/fluidbook/fluidbook.nav.js
+++ b/js/libs/fluidbook/fluidbook.nav.js
@@ -4,6 +4,7 @@ function FluidbookNav(fluidbook) {
     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();
 
 }
@@ -96,7 +97,9 @@ FluidbookNav.prototype = {
         if (icon == undefined) {
             icon = true;
         }
-        var res = '<a href="' + href + '"';
+
+        var res = '';
+
         if (id != undefined) {
             res += ' id="' + id + '"';
         }
@@ -116,8 +119,12 @@ FluidbookNav.prototype = {
             res += ' ' + this.fluidbook.l10n.__(help);
         }
 
-        res += '</a>';
-        return res;
+        // If there's no link defined, return the text an icon wrapped in a <span> (useful for MMenu)
+        if (href == '') {
+            return '<span' + res + '</span>';
+        } else {
+            return '<a href="' + href + '"' + res + '</a>';
+        }
     },
     setNav: function () {
         if (this._inited == true) {
@@ -188,7 +195,11 @@ FluidbookNav.prototype = {
                     if (this.fluidbook.datas.chaptersPage != '') {
                         this.addLink('nav-sommaire', '#/page/' + this.fluidbook.datas.chaptersPage, 'chapters', 'chapters');
                     } else if (this.fluidbook.datas.chapters.length > 0) {
-                        this.addLink('nav-sommaire', '#/chapters', 'chapters', 'chapters');
+                        // this.addLink('nav-sommaire', '#/chapters', 'chapters', 'chapters');
+                        this.addLink('nav-sommaire', '', 'chapters', 'chapters');
+
+                        // Get HTML for submenus (appended later)
+                        this.chaptersMenuHTML = this.makeChapterLists(this.fluidbook.datas.chapters);
                     }
                 }
             } else if (icon == 'friend') {
@@ -237,7 +248,7 @@ FluidbookNav.prototype = {
                     this.addLink('nav-archives', '#/archives', 'archives', '!' + this.fluidbook.datas.archivesLabel);
                 }
             } else if (icon == 'help') {
-                this.addLink('nav-help', '#', 'help', '');
+                this.addLink('nav-help', '#', 'help', 'help');
             } else if (icon == 'zoom' && !this.fluidbook.support.isMobile) {
                 this.addLink('nav-zoomin', '#', 'zoomin', 'zoom in');
                 this.addLink('nav-zoomout', '#', 'zoomout', 'zoom out');
@@ -267,7 +278,12 @@ FluidbookNav.prototype = {
             this.setAfterSearch();
         }
         this.setInterface();
+
+        if (this.chaptersMenuHTML != '') {
+            $('#chapters').parent().append(this.chaptersMenuHTML);
+        }
         this.initMenu();
+
         $(this.fluidbook).trigger('fluidbooknavready');
     },
     addMultilangLink: function (langs) {
@@ -301,7 +317,13 @@ FluidbookNav.prototype = {
             if (q == '') {
                 return false;
             }
+
             window.location.hash = '/search/' + q;
+
+            if ($this.menuIsOpen) {
+                $this.menuAPI.close();
+            }
+
             return false;
         });
         $("#q").keyup(searchHints);
@@ -326,7 +348,7 @@ FluidbookNav.prototype = {
         return searchHTML;
     },
     setAfterSearch: function () {
-        this.menu.find('ul').append('<div id="afterSearch"><div class="c">' + this.fluidbook.loader.getImage('data/images/' + this.fluidbook.datas.afterSearch) + '</div><div class="links">' + this.fluidbook.datas.links.aftersearch + '</div></div>');
+        this.menu.find('ul').append('<div id="afterSearch"><div class="c interface-search">' + getSpriteIcon('interface-search') + '</div><div class="links">' + this.fluidbook.datas.links.aftersearch + '</div></div>');
     },
     setInterface: function () {
 
@@ -335,5 +357,43 @@ FluidbookNav.prototype = {
         $('#interface').append(res);
         $(document).on('click', '#next', goNextPage);
         $(document).on('click', '#previous', goPreviousPage);
+    },
+
+    // Build nested lists from chapters
+    makeChapterLists: function (chapters) {
+
+        var currentLevel = 0,
+            loopIndex = 0,
+            html = '<ul>';
+
+        // Loop through all chapters and build new ULs based on level/depth
+        chapters.forEach(function(chapter) {
+            loopIndex++;
+
+            if (chapter.level > currentLevel) {
+                html += '<ul>'; // Going one level deeper, start new list
+                                // It's assumed that consecutive items will never be more than 1 level deeper than the previous
+            } else if (chapter.level < currentLevel) {
+                var levelDifference = currentLevel - chapter.level;
+                // We need to close a list for every level change (eg. jumping from level 5 back to level 2)
+                for (var i = 0; i < levelDifference; i++) {
+                    html += '</li></ul></li>'; // Going one level higher, end previous list
+                }
+            } else {
+                if (loopIndex > 1) { // On the first run through, there's nothing to close
+                    html += '</li>'; // Same level so close off current item
+                }
+            }
+
+            currentLevel = chapter.level;
+
+            var page = (this.fluidbook.virtualToPhysical(chapter.page));
+
+            html += '<li><a href="#/page/' + page + '">' + chapter.label + '</a>';
+        });
+
+        html += '</li></ul>';
+
+        return html;
     }
 };
\ No newline at end of file

diff --git a/style/fluidbook.less b/style/fluidbook.less
index 804c7150641068fd5baace9014921db0e023731c..7cdd5b8d45a652e5dee43b6989bd84d86da8728d 100644 (file)
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@ -540,7 +540,7 @@ header {
        background-color: @menu-background;
        color: @menu-text;
 
-       a {
+       a, span {
                padding: 10px;
 
                img {

diff --git a/style/mmenu/mmenu.less b/style/mmenu/mmenu.less
index b080d9392ba940a33cbf7ca0f6a6e59ef54d9528..8207c05252c4ebdb055e6c176c97808d16e474eb 100644 (file)
--- a/style/mmenu/mmenu.less
+++ b/style/mmenu/mmenu.less
@@ -15,6 +15,11 @@
   }
 }
 
+// Submenu arrows < >
+.mm-menu .mm-btn:after, .mm-menu .mm-btn:before, .mm-menu .mm-listview>li .mm-next:after {
+  border-color: @menu-text;
+}
+
 .mm-hasnavbar-top-1 .mm-panels {
   top: 60px;
 }