Search hints integration with MMenu. WIP #807 @4

diff --git a/js/libs/fluidbook/fluidbook.js b/js/libs/fluidbook/fluidbook.js
index 5baf47d44e59cb55949bfe9cd85a4c36f3f74f79..fed53a2968b3056c7593a22b7e149616726063f7 100644 (file)
--- a/js/libs/fluidbook/fluidbook.js
+++ b/js/libs/fluidbook/fluidbook.js
@@ -713,6 +713,14 @@ Fluidbook.prototype = {
         return this.datas.numerotation.indexOf(page) + 1;
     },
 
+    initSearchHints: function () {
+
+        this.menuSearchHints = $('#menuSearchHints');
+
+        if (this.menuSearchHints.hasClass('mm-hidden')) {
+            this.nav.menuAPI.openPanel(this.menuSearchHints, false);
+        }
+    },
     getSearchHints: function (q) {
 
         var $this = this;
@@ -723,12 +731,15 @@ Fluidbook.prototype = {
     },
     displaySearchHints: function (hints) {
 
-        this.hideSearchHints();
+        var $this = this;
+
+        //this.hideSearchHints();
         if (hints.length == 0) {
             return;
         }
+        this.menuSearchHints.html('');
         $.each(hints, function (k, v) {
-            $("#searchHints").append('<a class="hint" term="' + v[0] + '" href="#/search/' + v[0] + '">' + v[0] + ' <em>(' + v[1] + ')</em></a>');
+            $this.menuSearchHints.append('<a class="hint" term="' + v[0] + '" href="#/search/' + v[0] + '">' + v[0] + ' <em>(' + v[1] + ')</em></a>');
         });
         var qoffset = $("#q").offset();
         var top = qoffset.top + $("#q").outerHeight() + 5;
@@ -742,9 +753,10 @@ Fluidbook.prototype = {
         this.search.kill();
     },
     hideSearchHints: function () {
-        this.killLastSearchHint();
-        $("#searchHints").html('');
-        $("#searchHints").hide();
+        // this.killLastSearchHint();
+        // $("#searchHints").html('');
+        // $("#searchHints").hide();
+        this.nav.menuAPI.closeAllPanels(); // Todo: see if we can just close the hints panel. Doesn't seem to work using .closePanel(...). See how built-in search plugin works
     },
     getLocationToShare: function () {
         if (this.datas.phonegap) {

diff --git a/js/libs/fluidbook/fluidbook.nav.js b/js/libs/fluidbook/fluidbook.nav.js
index 7a0684f4b1f0d9004178d34479f800615371a8b8..2c448c7d6517f7be572c8f3d03fccbe3c568cfcb 100644 (file)
--- a/js/libs/fluidbook/fluidbook.nav.js
+++ b/js/libs/fluidbook/fluidbook.nav.js
@@ -282,6 +282,8 @@ FluidbookNav.prototype = {
         if (this.chaptersMenuHTML != '') {
             $('#chapters').parent().append(this.chaptersMenuHTML);
         }
+        $('#menu').append('<div id="menuSearchResults" class="Panel"></div>');
+        $('#menu').append('<div id="menuSearchHints" class="Panel"></div>');
         this.initMenu();
 
         $(this.fluidbook).trigger('fluidbooknavready');
@@ -326,7 +328,10 @@ FluidbookNav.prototype = {
 
             return false;
         });
-        $("#q").keyup(searchHints);
+
+        //$("#q").keyup(searchHints);
+        $(document).on('keyup', '#q', searchHints);
+
         $(document).on('click', ".hint", function () {
             var e = $("#q").val().split(' ');
             e.pop();
@@ -336,11 +341,11 @@ FluidbookNav.prototype = {
             return false;
         })
 
-        $("#q").blur(function (e) {
-            setTimeout(function () {
-                $this.fluidbook.hideSearchHints();
-            }, 250);
-        });
+        // $("#q").blur(function (e) {
+        //     setTimeout(function () {
+        //         $this.fluidbook.hideSearchHints();
+        //     }, 250);
+        // });
 
         //this.menu.append($("#search"));
         var searchHTML = $('#search').html();

diff --git a/js/main.js b/js/main.js
index 566df1817b2f8b5b50a91421c5b8149486abc238..31711d7074b59d2e666adb866eda4bac12ff0321 100644 (file)
--- a/js/main.js
+++ b/js/main.js
@@ -500,6 +500,7 @@ function setBackground(page, resolution) {
 
 function searchHints() {
     if ($("#q").val().length >= 3) {
+        fluidbook.initSearchHints();
         fluidbook.getSearchHints($("#q").val());
     } else {
         try {