wip #7461 @1

diff --git a/js/libs/fluidbook/fluidbook.burger.js b/js/libs/fluidbook/fluidbook.burger.js
new file mode 100644 (file)
index 0000000..1cec0ab
--- /dev/null
+++ b/js/libs/fluidbook/fluidbook.burger.js
@@ -0,0 +1,10 @@
+function FluidbookBurger(fluidbook) {
+    this.fluidbook = fluidbook;
+    this.init();
+}
+
+FluidbookBurger.prototype = {
+    init: function () {
+
+    },
+}
\ No newline at end of file

diff --git a/js/libs/fluidbook/fluidbook.nav.js b/js/libs/fluidbook/fluidbook.nav.js
index a2d6dcd88120dfc17680a2d2a0f7b6cfbbcca069..deaccd1eaa5d1939bb4cc64ee0c235b447d7d933 100644 (file)
--- a/js/libs/fluidbook/fluidbook.nav.js
+++ b/js/libs/fluidbook/fluidbook.nav.js
@@ -8,6 +8,7 @@ function FluidbookNav(fluidbook) {
     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.closeTimeout;
     this.setNav('horizontalNav');
     if ($("#iconList").html() !== '') {
         this.setNav('menu');
@@ -38,71 +39,74 @@ FluidbookNav.prototype = {
     },
 
     initMenu: function () {
-        var $this = this, dir = this.fluidbook.l10n.dir,
-            inverted = this.isInverted(),
+        var $this = this, dir = this.fluidbook.l10n.dir, inverted = this.isInverted(),
             side = ((dir === 'ltr' && inverted) || (dir === 'rtl' && !inverted)) ? 'right' : 'left';
 
-        var extensions = ['pagedim-black', 'position-front'];
-        if (side === 'right') {
-            extensions.push('position-right');
-        }
-
-        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: {
-                close: function () {
-                    if (fluidbook.settings.phonegap === 'ios') {
-                        return !$(this).is('#menu_download,#menu_print');
-                    }
-                    return true;
-                }, preventDefault: function () {
-                    return false;
-                },
-            },
-
-            "extensions": extensions, "offCanvas": {
-                "position": side, "zposition": "front",
-            }, "navbar": {
-                //add: false // Removes main title bars completely
-                title: "" // Hides the default "Menu" text
-            }, "rtl": {
-                "use": "detect" // Auto detect when in RTL mode based on html dir attribute
-            },
-
-        }, {
-            offCanvas: {
-                page: {
-                    noSelector: ['#loader']
-                }
-            }
-        });
-
-        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 () {
-            $('body').addClass('menu-open');
-            $("nav#menu").addClass('mm-menu_opened');
-            $this.menuIsOpen = true;
 
-            setInterval(function () {
-                $this.fluidbook.resize.resizeMenu()
-            }, 500);
-
-            //$('#q').focus(); // Disabled for now because it triggers the keyboard to open on some mobile devices
-        });
-
-        this.menuAPI.bind("close:finish", function () {
-            $('body').removeClass('menu-open');
-            $this.menuIsOpen = false;
-        });
+        $("#menu").insertAfter('#main');
+        $('<div id="menuOverlay"></div>').insertAfter('#menu');
+
+        // var extensions = ['pagedim-black', 'position-front'];
+        // if (side === 'right') {
+        //     extensions.push('position-right');
+        // }
+        //
+        // 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: {
+        //         close: function () {
+        //             if (fluidbook.settings.phonegap === 'ios') {
+        //                 return !$(this).is('#menu_download,#menu_print');
+        //             }
+        //             return true;
+        //         }, preventDefault: function () {
+        //             return false;
+        //         },
+        //     },
+        //
+        //     "extensions": extensions, "offCanvas": {
+        //         "position": side, "zposition": "front",
+        //     }, "navbar": {
+        //         //add: false // Removes main title bars completely
+        //         title: "" // Hides the default "Menu" text
+        //     }, "rtl": {
+        //         "use": "detect" // Auto detect when in RTL mode based on html dir attribute
+        //     },
+        //
+        // }, {
+        //     offCanvas: {
+        //         page: {
+        //             noSelector: ['#loader']
+        //         }
+        //     }
+        // });
+        //
+        // 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 () {
+        //     $('body').addClass('menu-open');
+        //     $("nav#menu").addClass('mm-menu_opened');
+        //     $this.menuIsOpen = true;
+        //
+        //     setInterval(function () {
+        //         $this.fluidbook.resize.resizeMenu()
+        //     }, 500);
+        //
+        //     //$('#q').focus(); // Disabled for now because it triggers the keyboard to open on some mobile devices
+        // });
+        //
+        // this.menuAPI.bind("close:finish", function () {
+        //     $('body').removeClass('menu-open');
+        //     $this.menuIsOpen = false;
+        // });
 
 
         $(document).on(this.fluidbook.input.clickEvent, '#menuOpener', function (e) {
             e.preventDefault();
-            $this.menuAPI.open();
+            $this.openMenu();
         });
 
         // Close menu when a search result is clicked
@@ -115,24 +119,6 @@ FluidbookNav.prototype = {
             $this.fluidbook.resize.resizeMenu();
         });
 
-        // Handle swipe to close (it's only really practical to have this because swipe to open would interfere with main Fluidbook swipes)
-        // We are not using MMenu's "Drag" add-on because it doesn't close the main menu, only submenus on swipe.
-        // Close direction will be towards the same side the menu comes from
-        var swipeCloseDirection = this.menuAPI.getInstance().opts.offCanvas.position,
-            menuSwipe = new Hammer(document.getElementById('menu'));
-
-        // Swipe Handler
-        menuSwipe.on('swipe' + swipeCloseDirection, function (e) {
-
-            // Only trigger swipe response when menu is actually open
-            if (!$this.menuIsOpen) {
-                return false;
-            }
-
-            $this.closeMenu();
-        });
-
-
         // Add search and share links to main menu panel
         $('#menuList').append(this.searchHTML + this.shareLinksHTML);
 
@@ -140,10 +126,33 @@ FluidbookNav.prototype = {
         $('#menuList > ul, #chapterList').perfectScrollbar({
             suppressScrollX: true, minScrollbarLength: 40, //maxScrollbarLength: 60
         });
+
+        $("#menuOverlay").on(this.fluidbook.input.clickEvent, function () {
+            $this.closeMenu();
+        });
     },
+
+    openMenu: function () {
+        clearTimeout(this.closeTimeout);
+        $("#menu,#menuOverlay").show();
+        setTimeout(function () {
+            $("#menu").addClass('open');
+        },10);
+    },
+
+    closeAll: function () {
+        this.closeMenu();
+    },
+
     closeMenu: function () {
-        this.menuAPI.close();
-    }, // getIcon: function (name) {
+        clearTimeout(this.closeTimeout);
+        $("#menu").removeClass('open');
+        this.closeTimeout = setTimeout(function () {
+            $("#menu,#menuOverlay").hide();
+        }, 500);
+    },
+
+    // getIcon: function (name) {
     //     var src = 'data/images/' + name + '.';
     //     if (this.fluidbook.support.SVG) {
     //         src += 'svg';
@@ -246,8 +255,7 @@ FluidbookNav.prototype = {
         } else {
             return '<a href="' + href + '"' + res + '</a>';
         }
-    },
-    getNavFromType: function (navType) {
+    }, getNavFromType: function (navType) {
         switch (navType) {
             case 'horizontalNav':
                 return this.horizontalNav;
@@ -259,8 +267,7 @@ FluidbookNav.prototype = {
                 console.error('navType ' + navType + ' not found!');
                 return false;
         }
-    },
-    setNav: function (navType) {
+    }, setNav: function (navType) {
 
         if (typeof navType === 'undefined') {
             return false;
@@ -827,7 +834,7 @@ FluidbookNav.prototype = {
         if (!this.fluidbook.search.isSearchActive()) {
             if (!this.fluidbook.settings.searchFullBurger) {
                 this.fluidbook.search.initSearchHints(); // Clears menu and only displays search box
-                this.menuAPI.closeAllPanels(); // Make sure we're on the main panel with the search box
+                this.closeAll(); // Make sure we're on the main panel with the search box
             }
         }
 
@@ -838,7 +845,7 @@ FluidbookNav.prototype = {
                 this.fluidbook.search.submitForm();
             }
         } else {
-            this.menuAPI.open();
+            this.menu.openMenu();
             $('#q').focus(); // Put cursor in the search field
         }
 

diff --git a/js/libs/fluidbook/fluidbook.resize.js b/js/libs/fluidbook/fluidbook.resize.js
index 51d5132fa22b2cfbcf898db593e6cbdf7323279f..337d61aed5a452719e73faa8d27d11fc6453489d 100644 (file)
--- a/js/libs/fluidbook/fluidbook.resize.js
+++ b/js/libs/fluidbook/fluidbook.resize.js
@@ -276,6 +276,8 @@ FluidbookResize.prototype = {
             'transform': 'translateY(-' + 50 * navScale + '%) scale(' + navScale + ')'
         });
 
+        $("#menu").css('height', this.hh);
+
         var headerHeight = this.fluidbook.settings.menuHeight * navScale;
         $('header').css({
             height: headerHeight, backgroundSize: '100% ' + headerHeight + 'px'

diff --git a/style/mmenu/mmenu.less b/style/mmenu/mmenu.less
index 51f2c735e28bf9f678532c0b18232bbec69b5bb8..7b184f27f96efdcf3dfdcd7a453fd83bee013e8a 100644 (file)
--- a/style/mmenu/mmenu.less
+++ b/style/mmenu/mmenu.less
@@ -1,20 +1,3 @@
-@import (inline) "mmenu/jquery.mmenu.all.css";
-@import (inline) "mmenu/jquery.mmenu.positioning.css";
-
-// MMenu overrides
-.mm-menu {
-  max-width: 320px;
-  width: 100%; // Max-width will limit overall width but this allows it to take up more space on very narrow screens
-
-  .mm-listitem {
-    height: auto;
-
-    a, > * {
-      color: @menu-text;
-    }
-  }
-}
-
 // Menu title bar
 .mm-listitem .mm-title {
   line-height: 60px;
@@ -75,13 +58,39 @@ html.mm-opening .mm-menu.mm-opened[class*=mm-pagedim] ~ #mm-blocker {
 
 // Fluidbook menu styles
 #menu {
-  //position: relative;
-  //white-space: nowrap;
+  transition: left 0.4s ease, right 0.4s ease;
   background-color: @menu-background;
   color: @menu-text;
   box-shadow: rgba(0, 0, 0, 0.2) -5px 6px 13px 0px; // ToDo: adjust drop-shadow depending on which side the menu comes from
+  width: 320px;
+  position: absolute;
+  left: -320px;
+  top: 0;
+  z-index: 200;
+  display: none;
+
+  li {
+    display: block;
+  }
+
+  .rtl & {
+    left: auto;
+    right: -320px;
+
+    &.open {
+      left: auto;
+      right: 0;
+    }
+  }
+
+  &.open {
+    transition: left 0.4s, right 0.4s;
+    left: 0;
+  }
 
   a, li > span {
+    display: block;
+    height: 60px;
     padding: 10px 10px 10px 29px;
 
     .rtl & {
@@ -98,13 +107,28 @@ html.mm-opening .mm-menu.mm-opened[class*=mm-pagedim] ~ #mm-blocker {
   .mm-navbar .mm-title {
     padding: 0 !important;
   }
+}
+
+#menuOverlay {
+  display: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 199;
+  background-color: rgba(0, 0, 0, 0.3);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.4s ease;
+}
 
-  //> a {
-  //   vertical-align: top;
-  //   display: inline-block;
-  //}
+#menu.open + #menuOverlay {
+  pointer-events: auto;
+  opacity: 1;
 }
 
+
 #menuOpener {
   display: none;
   color: @icon-color;
@@ -162,14 +186,11 @@ html.mm-opening .mm-menu.mm-opened[class*=mm-pagedim] ~ #mm-blocker {
 }
 
 #menuSearch {
-  position: fixed; // So we can scroll the other items below...
-  .msie & {
-    position: absolute;
-  }
+  position: absolute;
 
   top: 0;
   left: 0;
-  width: 100%;
+  width: 260px;
   z-index: 2; // Ensure search box sits above #shareLinks
 
   &:after {
@@ -182,6 +203,7 @@ html.mm-opening .mm-menu.mm-opened[class*=mm-pagedim] ~ #mm-blocker {
   overflow: hidden;
   position: relative;
   height: 100%;
+  padding-top: 89px;
 
   &:before {
     height: 0; // Fix spacing with search box
@@ -222,6 +244,7 @@ html.mm-opening .mm-menu.mm-opened[class*=mm-pagedim] ~ #mm-blocker {
   padding: 21px 21px 23px 23px !important; // Controls size of icon and position within the element
   color: @menu-text;
   .button-hover();
+  cursor: pointer;
 
   .rtl & {
     right: auto;
@@ -236,6 +259,7 @@ html.mm-opening .mm-menu.mm-opened[class*=mm-pagedim] ~ #mm-blocker {
   position: relative;
   padding: 0;
   text-align: left;
+  width: calc(100% - 60px);
 
   .rtl & {
     text-align: right;
@@ -431,6 +455,7 @@ html.mm-opening .mm-menu.mm-opened[class*=mm-pagedim] ~ #mm-blocker {
 
     a {
       padding: 0 !important;
+      height: auto;
     }
 
     img {