wait #7984 @0:05

diff --git a/js/libs/fluidbook/fluidbook.burger.js b/js/libs/fluidbook/fluidbook.burger.js
index ecd1c89bd8fe2e31d468e12c62f39c4c3830c783..9c1a2a16960f5e760ec1ecf9fc281e17f0bbe4a4 100644 (file)
--- a/js/libs/fluidbook/fluidbook.burger.js
+++ b/js/libs/fluidbook/fluidbook.burger.js
@@ -3,12 +3,12 @@ function FluidbookBurger(nav) {
     this.fluidbook = nav.fluidbook;
     this.closeTimeout;
     this.isOpened = false;
+    this.floatmode = this.fluidbook.floatmode;
 }
 
 FluidbookBurger.prototype = {
 
     init: function () {
-
         // Copy credits
         var credits = $("footer#credits").clone().attr('id', 'mobile-credits');
         var a = credits.find('a');
@@ -49,15 +49,9 @@ FluidbookBurger.prototype = {
             //console.log($('#menuList').parent().html());
         }
 
-
         // Add close button to menu
         this.getElement().prepend(this.getMenuCloseButton());
         this.initBurger();
-
-        // Add class if search is float
-        if(this.fluidbook.settings.search_field === "float") {
-            $('body').addClass('floatmode');
-        }
     },
 
     initNav() {
@@ -71,13 +65,20 @@ FluidbookBurger.prototype = {
 
         // Add holder list element for menu items
         $("#menu").append('<div id="menuList"' + v2 + '><ul></ul></div>');
+
+        console.log("flooooat", this.floatmode)
+
+        if(this.floatmode) {
+            $('body').append(this.initSearch());
+        } else {
+            this.searchHTML = this.initSearch()
+        }
     },
 
     initSearch: function() {
         // Add Search form
         var searchElement = (this.fluidbook.settings.search) ? this.getSearch() : '';
-        const searchHtml = '<div id="menuSearch">' + searchElement + '</div>'; // Save for later so it can be injected after MMenu is rendered
-        $('body').append(searchHtml);
+        return '<div id="menuSearch" class="hidden">' + searchElement + '</div>'; // Save for later so it can be injected after MMenu is rendered
     },
 
     initBurger: function () {
@@ -94,6 +95,7 @@ FluidbookBurger.prototype = {
         $(document).on(this.fluidbook.input.clickEvent, '#menuOpener', function (e) {
             e.preventDefault();
             $this.open();
+            $this.openSearch();
         });
 
         // Close menu when a search result is clicked
@@ -132,7 +134,10 @@ FluidbookBurger.prototype = {
         clearTimeout(this.closeTimeout);
         if (!this.isOpened) {
             $('body').addClass('menu-open');
-            $("#menu,#menuOverlay").show();
+            $("#menuOverlay").show();
+            if(!this.floatmode) {
+                $("#menu").show()
+            }
             setTimeout(function () {
                 $("#menu").addClass('open');
                 this.fluidbook.resize.resizeMenu();
@@ -169,6 +174,9 @@ FluidbookBurger.prototype = {
         $("#main").attr('aria-hidden', 'false');
         $("#menu").attr('aria-hidden', 'true');
         $("#menuOpener").attr('aria-expanded', 'false');
+        if($("body.floatmode #menuSearch") !== undefined && $("#searchResultsNav").hasClass("hidden")) {
+            $("body.floatmode #menuSearch").addClass('hidden');
+        }
         this.closeTimeout = setTimeout(function () {
             $("#menu,#menuOverlay").hide();
         }, 500);
@@ -194,9 +202,11 @@ FluidbookBurger.prototype = {
     },
 
     openSearch: function (q, cb) {
+        let floatSearchVisible = false;
         if (!this.fluidbook.search.isSearchActive()) {
             if (!this.fluidbook.settings.searchFullBurger) {
                 this.fluidbook.search.initSearchHints(); // Clears menu and only displays search box
+                floatSearchVisible = true
             }
         }
 
@@ -207,7 +217,16 @@ FluidbookBurger.prototype = {
             }
         } else {
             this.open(false);
-            $('#q').focus(); // Put cursor in the search field
+
+            if(this.floatmode && !floatSearchVisible) {
+                $("#menuSearch").hide().removeClass('hidden')
+                setTimeout(function(){
+                    $("#menuSearch").show()
+                }, 1);
+            }
+            setTimeout(function(){
+                $('#q').focus(); // Put cursor in the search field
+            }, 500)
         }
 
         if (cb !== undefined) {
@@ -251,16 +270,39 @@ FluidbookBurger.prototype = {
         return '<a href="#" id="' + buttonID + '" aria-label="' + $this.fluidbook.l10n.__('close') + '" aria-keyshortcuts="Escape" tabindex="0">' + getSpriteIcon('interface-close') + '</a>';
     },
 
-    getSearch: function () {
-        var search = $("#search");
-
-        var $this = this;
+    getFloatSearchHTML: function() {
         var res = '<form action="#" id="searchForm" method="post">';
         res += '<input id="q" name="q" type="search" value="" aria-label="' + this.fluidbook.l10n.__('search keywords or reference') + '" placeholder="' + this.fluidbook.l10n.__('search keywords or reference') + '" autocorrect="off" autocomplete="off" autocapitalize="off" />';
         res += '<a href="#" id="submitSearch" class="icon-submitSearch" role="button" tabindex="-1" aria-label="' + this.fluidbook.l10n.__('submit search') + '"><svg viewBox="0 0 512 512" class="nav-search nav-icon svg-icon" aria-hidden="true"><use xlink:href="#nav-search"></use></svg></a>';
+        res += '<button id="menuSearchClose" role="button" aria-label="' + this.fluidbook.l10n.__('close') + '" aria-keyshortcuts="Escape">';
+        res += getSpriteIcon('interface-close');
+        res += '</button>';
         res += '</form>';
         res += '<div id="menuSearchHints" class="mm-nopanel"></div>';
         res += '<div id="menuSearchResults" class="mm-nopanel"></div>';
+
+        return res;
+    },
+
+    getSearchHtml: function() {
+        var res = '<form action="#" id="searchForm" method="post">';
+        res += '<input id="q" name="q" type="search" value="" aria-label="' + this.fluidbook.l10n.__('search keywords') + '" placeholder="' + this.fluidbook.l10n.__('search') + '" autocorrect="off" autocomplete="off" autocapitalize="off" />';
+        res += '<a href="#" id="submitSearch" class="icon-submitSearch" role="button" tabindex="-1" aria-label="' + this.fluidbook.l10n.__('submit search') + '"><svg viewBox="0 0 512 512" class="nav-search nav-icon svg-icon" aria-hidden="true"><use xlink:href="#nav-search"></use></svg></a>';
+        res += '</form>';
+        res += '<div id="menuSearchHints" class="mm-nopanel"></div>';
+        res += '<div id="menuSearchResults" class="mm-nopanel"></div>';
+
+        return res;
+    },
+
+    getSearch: function () {
+        var search = $("#search");
+        let $this = this;
+
+        let res = this.getSearchHtml();
+        if(this.floatmode) {
+            res = this.getFloatSearchHTML()
+        }
         search.append(res);
 
         // Search submit button
@@ -296,6 +338,19 @@ FluidbookBurger.prototype = {
             }
         });
 
+        // Close floatSearch
+        const menuSearchClose = $("#menuSearchClose")
+        if(!this.floatmode) {
+            menuSearchClose.hide()
+        }
+
+        $(document).on(this.fluidbook.input.clickEvent, '#menuSearchClose', function (e) {
+            $this.close();
+            $this.fluidbook.search.closeSearch();
+            e.preventDefault();
+            return false;
+        })
+
         $(document).on(this.fluidbook.input.clickEvent, ".hint", function () {
             var e = $("#q").val().split(' ');
             e.pop();