From: Stephen Cameron <stephen@cubedesigners.com>
Date: Mon, 19 Jun 2017 16:31:49 +0000 (+0200)
Subject: Handle cascading and non-cascading chapter views in the menu. Remove links from paren... 
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=54d1b0afb9c57c52fed9ab6f57c86e0fcfd0b4c7;p=fluidbook-html5.git

Handle cascading and non-cascading chapter views in the menu. Remove links from parent items when in cascade mode. Debug problems with MMenu v6.x. WIP #807 @3
---

diff --git a/js/libs/fluidbook/fluidbook.nav.js b/js/libs/fluidbook/fluidbook.nav.js
index 2c448c7d..1f67d803 100644
--- a/js/libs/fluidbook/fluidbook.nav.js
+++ b/js/libs/fluidbook/fluidbook.nav.js
@@ -279,11 +279,39 @@ FluidbookNav.prototype = {
         }
         this.setInterface();
 
+        // 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');
+            }
+        });
+
         $('#menu').append('<div id="menuSearchResults" class="Panel"></div>');
         $('#menu').append('<div id="menuSearchHints" class="Panel"></div>');
+
+        // 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>');
+
+            // 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
+
+            //console.log($('#menuList').parent().html());
+        }
+
         this.initMenu();
 
         $(this.fluidbook).trigger('fluidbooknavready');
@@ -369,7 +397,7 @@ FluidbookNav.prototype = {
 
         var currentLevel = 0,
             loopIndex = 0,
-            html = '<ul>';
+            html = '<ul id="chapterList">';
 
         // Loop through all chapters and build new ULs based on level/depth
         chapters.forEach(function(chapter) {
@@ -394,7 +422,7 @@ FluidbookNav.prototype = {
 
             var page = (this.fluidbook.virtualToPhysical(chapter.page));
 
-            html += '<li><a href="#/page/' + page + '">' + chapter.label + '</a>';
+            html += '<li><a href="#/page/' + page + '" class="level-' + chapter.level + '">' + chapter.label + '</a>';
         });
 
         html += '</li></ul>';