From: Stephen Cameron Date: Tue, 11 Jul 2017 13:04:24 +0000 (+0200) Subject: WIP #1495 @3.5 X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=cb3effc4a6d2b0ddec4f127e6a67d3d136d5e9f2;p=fluidbook-html5.git WIP #1495 @3.5 --- diff --git a/images/interface.svg b/images/interface.svg index 6e158e0b..245cc32a 100644 --- a/images/interface.svg +++ b/images/interface.svg @@ -53,4 +53,9 @@ + + + + + diff --git a/js/libs/fluidbook/fluidbook.nav.js b/js/libs/fluidbook/fluidbook.nav.js index 6e33c0f2..2552f23a 100644 --- 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 (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 = '' + this.fluidbook.l10n.__('Menu') + getSpriteIcon('interface-menu') + ''; $('#main header').append(menuOpener); // Add holder list element for menu items - this.menu.append(''); + $nav.append(''); // Add Search form if (this.fluidbook.datas.search) { $('#menuList').prepend(''); } + + // Horizontal icon nav + } else if (navType == 'horizontalNav') { + + $nav.append('
    '); + } @@ -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 e5f3c681..672d284c 100644 --- 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 af7c6109..e1aaca58 100644 --- 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 20409da5..29824c56 100644 --- 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 3f2f730f..535e8ba1 100644 --- 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 index 00000000..8e5bd64d --- /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 9319fbaa..6e19b021 100644 --- 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)));