From: Stephen Cameron <stephen@cubedesigners.com>
Date: Tue, 13 Jun 2017 10:36:28 +0000 (+0200)
Subject: Menu animations now working along with anchor links. WIP #807 @3
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=df7f774a8e165486462cdc7ef2f6c72685d4bc5f;p=fluidbook-html5.git

Menu animations now working along with anchor links. WIP #807 @3
---

diff --git a/_index.html b/_index.html
index 5d9919b1..447fdc5a 100644
--- a/_index.html
+++ b/_index.html
@@ -26,7 +26,7 @@
 <div id="main">
 	<div id="background"></div>
 	<header>
-		<nav id="nav"></nav>
+		<nav id="menu"></nav>
 		<div id="search"></div>
 		<a id="logo" href="#"></a>
 	</header>
diff --git a/js/libs/fluidbook/fluidbook.nav.js b/js/libs/fluidbook/fluidbook.nav.js
index 1d0c5ed7..ae3ec6f7 100644
--- a/js/libs/fluidbook/fluidbook.nav.js
+++ b/js/libs/fluidbook/fluidbook.nav.js
@@ -2,7 +2,8 @@ function FluidbookNav(fluidbook) {
     this.fluidbook = fluidbook;
     this._dimensions = this.fluidbook.datas.iconsDimensions;
     this._inited = false;
-    this.menu = $("#nav");
+    this.menuIsOpen = false;
+    this.menu = $("#menu"); // Renamed from #nav because mmenu animations weren't working (probably due to some other script interference)
     this.setNav();
 
 }
@@ -26,7 +27,16 @@ FluidbookNav.prototype = {
             });
         }
 
-        $('#nav').mmenu({
+        this.menu.mmenu({
+
+            // Allow #anchor links to trigger correctly and close the menu
+            // Ref: https://github.com/FrDH/jQuery.mmenu/issues/687#issuecomment-279377172
+            onClick: {
+                preventDefault: function() {
+                    $this.menuAPI.close();
+                }
+            },
+
             "extensions": [
                 "pagedim-black"
             ],
@@ -34,10 +44,24 @@ FluidbookNav.prototype = {
                 "position": "right",
                 "zposition": "front"
             },
+            "navbar": {
+                //add: false // Removes main title bars completely
+                title: "" // Hides the default "Menu" text
+            },
             "navbars": navbars
         });
 
-        this.menuAPI = $('#nav').data('mmenu');
+        this.menuAPI = this.menu.data('mmenu');
+
+        // Bind API hooks (see http://mmenu.frebsite.nl/documentation/core/off-canvas.html#h4)
+        this.menuAPI.bind("open:finish", function () {
+            $this.menuIsOpen = true;
+        });
+
+        this.menuAPI.bind("close:finish", function () {
+            $this.menuIsOpen = false;
+        });
+
 
         $(document).on('click', '#menuOpener', function (e) {
             e.preventDefault();
@@ -115,7 +139,7 @@ FluidbookNav.prototype = {
         $('#main header').append(menuOpener);
 
         // Add holder list element for menu items
-        this.menu.append('<ul></ul>');
+        this.menu.append('<ul id="menuList"></ul>');
 
         try {
             var skipHome = (window.localStorage.getItem('home') === '0');
diff --git a/style/fluidbook.less b/style/fluidbook.less
index 941b90d0..804c7150 100644
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@ -316,7 +316,7 @@ body, html {
 }
 
 /* Nav */
-#nav #locales {
+#menu #locales {
 	display: inline-block;
 	width: 22px;
 	height: 17px;
@@ -526,15 +526,15 @@ header {
 	z-index: 12;
 }
 
-.ltr #nav a#submitSearch {
+.ltr #menu a#submitSearch {
 	margin: 0 0 0 5px;
 }
 
-.rtl #nav a#submitSearch {
+.rtl #menu a#submitSearch {
 	margin: 0 5px 0 0;
 }
 
-#nav {
+#menu {
 	//position: relative;
 	//white-space: nowrap;
 	background-color: @menu-background;
diff --git a/style/mmenu/mmenu.less b/style/mmenu/mmenu.less
index 45d012ae..b080d939 100644
--- a/style/mmenu/mmenu.less
+++ b/style/mmenu/mmenu.less
@@ -22,6 +22,7 @@
 // Page overlay opacity
 html.mm-opening .mm-menu.mm-opened[class*=mm-pagedim]~#mm-blocker {
   opacity: 0.5;
+  transition: opacity .4s ease 0s; // No delay before fading in the overlay
 }