From 9265d6e74b790be6eefedc49a93d15b53bf450d6 Mon Sep 17 00:00:00 2001 From: Vincent Vanwaelscappel Date: Wed, 20 Sep 2017 19:00:32 +0200 Subject: [PATCH] #1666 @1 | merge burgermenu in searchengine --- js/libs/fluidbook/fluidbook.js | 101 +++----------------------- js/libs/fluidbook/fluidbook.nav.js | 47 ++++++------ js/libs/fluidbook/fluidbook.search.js | 63 ++++++++++++++-- 3 files changed, 90 insertions(+), 121 deletions(-) diff --git a/js/libs/fluidbook/fluidbook.js b/js/libs/fluidbook/fluidbook.js index ec34c8c3..4615c4de 100644 --- a/js/libs/fluidbook/fluidbook.js +++ b/js/libs/fluidbook/fluidbook.js @@ -737,12 +737,6 @@ Fluidbook.prototype = { $('#menuList > ul > li, #shareLinks').fadeIn(300); }, - initSearchResults: function () { - this.menuSearchResults = $('#menuSearchResults'); - this.resizeMenu(); - this.menuSearchResults.hide(); - }, - resizeMenu: function () { //console.warn('calling resizeSR'); @@ -757,8 +751,8 @@ Fluidbook.prototype = { mainMenuMaxHeight = wh - $('#menuSearch').height() - $('#shareLinks').outerHeight(); // Search results element may not exist when resize is called - if (fluidbook.menuSearchResults == undefined) { - fluidbook.initSearchResults(); + if (fluidbook.search.menuSearchResults == undefined) { + fluidbook.search.initSearchResults(); return false; // initSearchResults will call this resize function anyway } @@ -766,97 +760,20 @@ Fluidbook.prototype = { $('#menuList > ul').css('maxHeight', mainMenuMaxHeight); // Set max-height for search results section (using CSS vh units was unreliable) - if (fluidbook.menuSearchResults !== undefined) { - fluidbook.menuSearchResults.css('maxHeight', searchResultsMaxHeight); - fluidbook.menuSearchResults.css('marginTop', marginTop); - fluidbook.menuSearchResults.perfectScrollbar('update'); + if (fluidbook.search.menuSearchResults !== undefined) { + fluidbook.search.menuSearchResults.css('maxHeight', searchResultsMaxHeight); + fluidbook.search.menuSearchResults.css('marginTop', marginTop); + fluidbook.search.menuSearchResults.perfectScrollbar('update'); } // Also set same max-height for search hints - if (fluidbook.menuSearchHints !== undefined) { - fluidbook.menuSearchHints.css('maxHeight', wh - formHeight); - fluidbook.menuSearchHints.perfectScrollbar('update'); - } - }, - - initSearchHints: function () { - - this.menuSearchHints = $('#menuSearchHints'); - this.hideMenuItems(); // Hide menu items to give space for hints div - - this.menuSearchHints.fadeIn(300); - - this.initSearchResults(); - - // if (this.menuSearchHints.hasClass('mm-hidden')) { - // this.nav.menuAPI.openPanel(this.menuSearchHints, false); - // } - }, - getSearchHints: function (q) { - - var $this = this; - this.killLastSearchHint(); - this.search.getHints(q, function (r) { - $this.displaySearchHints(r); - }); - }, - displaySearchHints: function (hints) { - - var $this = this; - - //this.hideSearchHints(); - if (hints.length == 0) { - return; - } - this.menuSearchHints.html(''); - $.each(hints, function (k, v) { - $this.menuSearchHints.append('' + v[0] + ' (' + v[1] + ')'); - }); - var qoffset = $("#q").offset(); - var top = qoffset.top + $("#q").outerHeight() + 5; - var left = qoffset.left; - if (this.l10n.dir == 'rtl') { - left = -1 * ($(window).width() - left - $("#q").outerWidth()); + if (fluidbook.search.menuSearchHints !== undefined) { + fluidbook.search.menuSearchHints.css('maxHeight', wh - formHeight); + fluidbook.search.menuSearchHints.perfectScrollbar('update'); } - - this.menuSearchHints.perfectScrollbar({ - suppressScrollX: true, - minScrollbarLength: 40 - }); - - $("#searchHints").css({top: top, left: left}).show(); - }, - killLastSearchHint: function () { - this.search.kill(); }, - hideSearchHints: function () { - // this.killLastSearchHint(); - // $("#searchHints").html(''); - // $("#searchHints").hide(); - this.menuSearchHints.html('').hide(); // Clear and hide all hints - }, - - hideSearchResults: function () { - this.menuSearchResults.html('').hide(); - }, - - // Check if a search is active in the interface - isSearchActive: function () { - if (!this.datas.search) { - return false; // Search feature disabled on this Fluidbook - } - - return ($('#q').val().length > 0); - }, - // Clear search query and close search related menu items - closeSearch: function () { - $('#q').val(''); // Clear search field - this.hideSearchHints(); - this.hideSearchResults(); - this.showMenuItems(); // Show menu items that were hidden previously - }, print: function () { diff --git a/js/libs/fluidbook/fluidbook.nav.js b/js/libs/fluidbook/fluidbook.nav.js index e5453074..51e800c2 100644 --- a/js/libs/fluidbook/fluidbook.nav.js +++ b/js/libs/fluidbook/fluidbook.nav.js @@ -21,7 +21,7 @@ FluidbookNav.prototype = { // Allow #anchor links to trigger correctly and close the menu // Ref: https://github.com/FrDH/jQuery.mmenu/issues/687#issuecomment-279377172 onClick: { - preventDefault: function() { + preventDefault: function () { $this.menuAPI.close(); } }, @@ -80,7 +80,7 @@ FluidbookNav.prototype = { menuSwipe = new Hammer(document.getElementById('menu')); // Swipe Handler - menuSwipe.on('swipe' + swipeCloseDirection, function(e) { + menuSwipe.on('swipe' + swipeCloseDirection, function (e) { // Only trigger swipe response when menu is actually open if (!$this.menuIsOpen) { @@ -91,7 +91,6 @@ FluidbookNav.prototype = { }); - // Add search and share links to main menu panel $('#menuList').append(this.searchHTML + this.shareLinksHTML); @@ -236,7 +235,7 @@ FluidbookNav.prototype = { var searchElement = (this.fluidbook.datas.search) ? this.getSearch() : '' + this.fluidbook.l10n.__('Menu') + ''; this.searchHTML = ''; // Save for later so it can be injected after MMenu is rendered - // Horizontal icon nav + // Horizontal icon nav } else if (navType == 'horizontalNav') { $nav.append(''); @@ -326,7 +325,7 @@ FluidbookNav.prototype = { } } - // Sharing icons - this may contain many different icons + // Sharing icons - this may contain many different icons } else if (icon == 'friend') { if (this.fluidbook.share.isEnabled()) { @@ -536,8 +535,8 @@ FluidbookNav.prototype = { $(document).on('click', '#horizontalNav_searchIcon', function (event) { event.preventDefault() - if (!fluidbook.isSearchActive()) { - fluidbook.initSearchHints(); // Clears menu and only displays search box + if (!fluidbook.search.isSearchActive()) { + 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.menuAPI.open(); @@ -610,24 +609,24 @@ FluidbookNav.prototype = { buttonID = 'menuClose'; // Click handler to close menu - $(document).on('click', '#' + buttonID, function(e) { + $(document).on('click', '#' + buttonID, function (e) { e.preventDefault(); // If the search is active, the close button should clear the search // and return the user to the main menu instead of closing the menu - if ($this.fluidbook.isSearchActive()) { - $this.fluidbook.closeSearch(); + if ($this.fluidbook.search.isSearchActive()) { + $this.fluidbook.search.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; + var sHints = $this.fluidbook.search.menuSearchHints, + sResults = $this.fluidbook.search.menuSearchResults; // Make sure the search really is empty if (sHints && sHints.html().length == 0 && sResults && sResults.html().length == 0) { - $this.fluidbook.closeSearch(); + $this.fluidbook.search.closeSearch(); } $this.menuAPI.close(); @@ -636,7 +635,7 @@ FluidbookNav.prototype = { }); - return ''+ getSpriteIcon('interface-close') +''; + return '' + getSpriteIcon('interface-close') + ''; }, getSearch: function () { @@ -668,9 +667,9 @@ FluidbookNav.prototype = { // Handle empty result set if (results.total <= 0) { - fluidbook.menuSearchResults.html('
' + this.fluidbook.l10n.__('no result found') + '
'); - fluidbook.hideSearchHints(); - fluidbook.menuSearchResults.fadeIn(300); + fluidbook.search.menuSearchResults.html('
' + this.fluidbook.l10n.__('no result found') + '
'); + fluidbook.search.hideSearchHints(); + fluidbook.search.menuSearchResults.fadeIn(300); return false; } @@ -694,10 +693,10 @@ FluidbookNav.prototype = { //res += $this.fluidbook.l10n.__('search results for') + ' « ' + q + " »" // Use the index of all pages as a starting point to filter results thumbnails - fluidbook.menuSearchResults.html($this.fluidbook.menu.index.getView()).hide(); + fluidbook.search.menuSearchResults.html($this.fluidbook.menu.index.getView()).hide(); // Process each spread of pages to collect the ones with results - fluidbook.menuSearchResults.find('.doubleThumb').each(function() { + fluidbook.search.menuSearchResults.find('.doubleThumb').each(function () { var currentPages = $(this).data('pages').toString().split(','), totalHits = 0, @@ -748,8 +747,8 @@ FluidbookNav.prototype = { $this.fluidbook.search.highlightSearchTerms($this.fluidbook.currentPage); - fluidbook.hideSearchHints(); - fluidbook.menuSearchResults.fadeIn(300).scrollTop(0); + fluidbook.search.hideSearchHints(); + fluidbook.search.menuSearchResults.fadeIn(300).scrollTop(0); // On some phones, the height of the search results is miscalculated due to the // keyboard being open and reducing the available window height. We need to wait until @@ -758,7 +757,7 @@ FluidbookNav.prototype = { // Initialise scrollbar after populating so bars appear immediately - fluidbook.menuSearchResults.perfectScrollbar({ + fluidbook.search.menuSearchResults.perfectScrollbar({ suppressScrollX: true, minScrollbarLength: 40, //maxScrollbarLength: 60 @@ -776,7 +775,7 @@ FluidbookNav.prototype = { }); //$("#q").keyup(searchHints); - $(document).on('keyup', '#q', function(key) { + $(document).on('keyup', '#q', function (key) { switch (key.which) { case 13: // Enter key case 37: // Left arrow @@ -836,7 +835,7 @@ FluidbookNav.prototype = { html = '