WIP #1495 @3.5

diff --git a/images/interface.svg b/images/interface.svg
index 6e158e0b68795ae8d8cade39b55c77c28253f84e..245cc32ab58dc8a0ee4bf3e77afeec09f30f4004 100644 (file)
--- a/images/interface.svg
+++ b/images/interface.svg
@@ -53,4 +53,9 @@
         <path d="m427 512l-342 0c-22 0-43-8-58-23-15-15-23-36-23-58l0-41c0-12 10-22 21-22 12 0 22 10 22 22l0 41c0 22 16 38 38 38l342 0c22 0 38-16 38-38l0-41c0-12 10-22 22-22 12 0 21 10 21 22l0 41c0 22-8 43-23 58-15 15-36 23-58 23z m-171-102c-12 0-21-10-21-22l0-367c0-11 9-21 21-21 12 0 21 10 21 21l0 367c0 12-9 22-21 22z m0 0c-6 0-11-3-16-7l-145-154c-8-8-7-22 1-30 9-8 22-8 30 1l130 137 130-137c8-8 21-9 30-1 8 8 9 22 1 30l-145 154c-5 4-10 7-16 7z"/>
     </symbol>
 
+
+    <symbol id="interface-share" viewBox="0 0 512 512">
+        <path d="m121 479c-2 0-5 0-7-1-8-3-13-11-13-19l0-103-28 0c-40 0-73-33-73-73l0-178c0-40 33-72 73-72l366 0c40 0 73 32 73 72l0 178c0 40-33 73-73 73l-186 0-118 117c-3 4-9 6-14 6z m-48-406c-18 0-33 15-33 33l0 177c0 18 15 33 33 33l48 0c11 0 20 9 20 20l0 75 90-89c4-4 9-6 14-6l194 0c18 0 33-15 33-33l0-178c0-18-15-32-33-32l-366 0z"/>
+    </symbol>
+
 </svg>

diff --git a/js/libs/fluidbook/fluidbook.nav.js b/js/libs/fluidbook/fluidbook.nav.js
index 6e33c0f21a215ec72488a59f9e195e9e508243b7..2552f23a3f720468762b94efa0e123b3083a4111 100644 (file)
--- a/js/libs/fluidbook/fluidbook.nav.js
+++ b/js/libs/fluidbook/fluidbook.nav.js
@@ -122,8 +122,11 @@ FluidbookNav.prototype = {
             res += getSpriteIcon(name);
         }
 
-        if (title != undefined && title != '') {
-            res += ' ' + this.fluidbook.l10n.__(title);
+        // Only the Menu should have titles
+        if (navType == 'menu') {
+            if (title != undefined && title != '') {
+                res += ' ' + this.fluidbook.l10n.__(title);
+            }
         }
 
         // If there's no link defined, return the text an icon wrapped in a <span> (useful for MMenu)
@@ -170,18 +173,25 @@ FluidbookNav.prototype = {
         var $this = this;
         // index, chapters, print, friend, bookmark, pdf, archives, basket, fullscreen, sound, 3d, help
 
+        // MMenu specific elements
         if (navType == 'menu') {
 
             var menuOpener = '<a href="#" id="menuOpener">' + this.fluidbook.l10n.__('Menu') + getSpriteIcon('interface-menu') + '</a>';
             $('#main header').append(menuOpener);
 
             // Add holder list element for menu items
-            this.menu.append('<ul id="menuList"></ul>');
+            $nav.append('<ul id="menuList"></ul>');
 
             // Add Search form
             if (this.fluidbook.datas.search) {
                 $('#menuList').prepend('<li id="menuSearch">' + this.getSearch() + '</li>');
             }
+
+        // Horizontal icon nav
+        } else if (navType == 'horizontalNav') {
+
+            $nav.append('<ul id="iconList"></ul>');
+
         }
 
 
@@ -199,7 +209,7 @@ FluidbookNav.prototype = {
         }
 
 
-        var all = "index,chapters,print,friend,bookmark,archives,basket,fullscreen,sound,3d,help".split(",");
+        var all = "index,chapters,search,friend,print,bookmark,archives,basket,fullscreen,sound,3d,help".split(",");
         var hide = array_diff(all, this.fluidbook.datas.navOrder);
         var loop = [].concat(this.fluidbook.datas.navOrder).concat(hide);
 
@@ -254,7 +264,7 @@ FluidbookNav.prototype = {
                 if (navType == 'horizontalNav') {
 
                     if (this.fluidbook.datas.share) {
-                        link = this.addLink(navType, 'nav-friend', '#/share', 'share', 'share');
+                        link = this.addLink(navType, 'interface-share', '#/share', 'share', 'share', 'share');
                         $("#share").click(function () {
                             if ($this.fluidbook.datas.phonegap != 'android') {
                                 return true;
@@ -365,7 +375,24 @@ FluidbookNav.prototype = {
                     $this.menuAPI.close();
                     screenfull.toggle();
                     return false;
-                })
+                });
+
+            } else if (icon == 'search') {
+
+                // Only the horizontal icon menu has the search icon, which opens the main menu
+                if (this.fluidbook.datas.search && navType == 'horizontalNav') {
+                    link = this.addLink(navType, 'interface-search', '#', 'searchIcon', 'search', 'search');
+                    $("#searchIcon").click(function (event) {
+                        event.preventDefault()
+
+                        if (!fluidbook.isSearchActive()) {
+                            fluidbook.initSearchHints(); // Clears menu and only displays search box
+                            $this.menuAPI.closeAllPanels(); // Make sure we're on the main panel with the search box
+                        }
+                        $this.menuAPI.open();
+                    });
+                }
+
             }
 
             if (!visible) {
@@ -374,10 +401,6 @@ FluidbookNav.prototype = {
         }
 
 
-        // Todo: handle search icon in horizontal menu only...
-        // if (this.fluidbook.datas.search) {
-        //     this.setSearch();
-        // }
         if (this.fluidbook.datas.afterSearch != '' && this.fluidbook.datas.themeEnableAfterSearch) {
             this.setAfterSearch();
         }
@@ -454,6 +477,17 @@ FluidbookNav.prototype = {
             if ($this.fluidbook.isSearchActive()) {
                 $this.fluidbook.closeSearch();
             } else {
+
+                // If we're closing the menu but the search was open and nothing
+                // was searched for, we need to reset the menu...
+                var sHints = $this.fluidbook.menuSearchHints,
+                    sResults = $this.fluidbook.menuSearchResults;
+
+                // Make sure the search really is empty
+                if (sHints && sHints.html().length == 0 && sResults && sResults.html().length == 0) {
+                    $this.fluidbook.closeSearch();
+                }
+
                 $this.menuAPI.close();
             }
 

diff --git a/js/libs/fluidbook/fluidbook.search.js b/js/libs/fluidbook/fluidbook.search.js
index e5f3c681fa2b85e7c08c90c9223cc338b4187f2e..672d284c2a55a123fb2d01f6f1acb3bfa805a963 100644 (file)
--- a/js/libs/fluidbook/fluidbook.search.js
+++ b/js/libs/fluidbook/fluidbook.search.js
@@ -32,7 +32,7 @@ FluidbookSearch.prototype = {
                var words = this.normalizeQuery(q);
                q = words.pop();
                var res = [];
-               if (q.length < 2) {
+               if (q.length < 3) {
                        return res;
                }
 

diff --git a/js/main.js b/js/main.js
index af7c610958a22f7f62e8878ae4ecf6e9aad53c54..e1aaca580564ae47fab0d3c4db15dbdd2c003993 100644 (file)
--- a/js/main.js
+++ b/js/main.js
@@ -509,14 +509,16 @@ function setBackground(page, resolution) {
 }
 
 function searchHints() {
-    if ($("#q").val().length >= 2) {
+    if ($("#q").val().length >= 3) {
         fluidbook.initSearchHints();
         fluidbook.getSearchHints($("#q").val());
     } else {
         try {
-            fluidbook.hideSearchHints();
-            fluidbook.hideSearchResults();
-            fluidbook.showMenuItems(); // Show main menu items that were hidden previously
+            if ($("#q").val().length == 0) {
+                fluidbook.hideSearchHints();
+                fluidbook.hideSearchResults();
+                fluidbook.showMenuItems(); // Show main menu items that were hidden previously
+            }
         } catch (err) {
 
         }

diff --git a/style/00-import.less b/style/00-import.less
index 20409da54cf71f2dad96199e36131f3f33250b2a..29824c56004cb1a31e3b7a261f46378dd60291cb 100644 (file)
--- a/style/00-import.less
+++ b/style/00-import.less
@@ -1,3 +1,4 @@
 @import "variables";
 @import "mixins";
-@import "mmenu/mmenu";
\ No newline at end of file
+@import "mmenu/mmenu";
+@import "nav-horizontal";
\ No newline at end of file

diff --git a/style/mmenu/mmenu.less b/style/mmenu/mmenu.less
index 3f2f730fc28faed49bafd36ac5ecc480ababc0c8..535e8ba102d23bee2ddbe72c5678b41d1bfab89e 100644 (file)
--- a/style/mmenu/mmenu.less
+++ b/style/mmenu/mmenu.less
@@ -92,6 +92,7 @@ html.mm-opening .mm-menu.mm-opened[class*=mm-pagedim]~#mm-blocker {
 }
 
 #menuOpener {
+  display: none;
   position: absolute;
   right: 20px;
   top: 50%;
@@ -100,6 +101,10 @@ html.mm-opening .mm-menu.mm-opened[class*=mm-pagedim]~#mm-blocker {
   line-height: 1;
   color: @icon-color;
 
+  @media all and (max-width: @menu-breakpoint) {
+    display: block;
+  }
+
   .svg-icon {
     width: 20px;
     vertical-align: middle;

diff --git a/style/nav-horizontal.less b/style/nav-horizontal.less
new file mode 100644 (file)
index 0000000..8e5bd64
--- /dev/null
+++ b/style/nav-horizontal.less
@@ -0,0 +1,28 @@
+#horizontalNav {
+  position: absolute;
+  right: 0;
+  top: 18px;
+
+  @media all and (max-width: @menu-breakpoint) {
+    display: none;
+  }
+}
+
+#iconList {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+
+  li {
+    display: inline-block;
+  }
+
+  .svg-icon {
+    width: 26px;
+    height: 22px;
+    margin: 0 18px;
+    color: @icon-color;
+  }
+
+
+}
\ No newline at end of file

diff --git a/style/variables.less b/style/variables.less
index 9319fbaa828b494286578b4900bfc79f637fb1d7..6e19b02125c375d0520604e9db447eb41aba0241 100644 (file)
--- a/style/variables.less
+++ b/style/variables.less
@@ -2,6 +2,8 @@
 
 @max: 45;
 
+@menu-breakpoint: 1080px;
+
 @menu-background-green: max(@max, min(255-@max, green(@menu-background)));
 @menu-background-red: max(@max, min(255-@max, red(@menu-background)));
 @menu-background-blue: max(@max, min(255-@max, blue(@menu-background)));