wait #7988 @4:00

diff --git a/js/libs/fluidbook/fluidbook.burger.js b/js/libs/fluidbook/fluidbook.burger.js
index 1008e4f440a08edecc4d497d2d8a605b8e01383b..e88a0dffe077713c613295b8862b240be010cc58 100644 (file)
--- a/js/libs/fluidbook/fluidbook.burger.js
+++ b/js/libs/fluidbook/fluidbook.burger.js
@@ -65,6 +65,11 @@ FluidbookBurger.prototype = {
         // Add holder list element for menu items
         $("#menu").append('<div id="menuList"' + v2 + '><ul></ul></div>');
 
+        // Add button for search float in mobile
+        if(!this.nav.horizontalOnly) {
+            $("#menuList ul").prepend('<li><a href="#" id="menu_search" class="icon-search" role="button" data-tooltip="Search" aria-label="Search" aria-keyshortcuts="Control+F">'+ getSpriteIcon('nav-search') + '<span class="menu-item-title">' +this.fluidbook.l10n.__('Search')+ '</span></a></li>')
+        }
+
         if(this.fluidbook.search.isSearchfloatActive) {
             $('body').append(this.initSearch());
         } else {
@@ -85,14 +90,13 @@ FluidbookBurger.prototype = {
         var inverted = this.nav.isInverted();
         var side = ((dir === 'ltr' && inverted) || (dir === 'rtl' && !inverted)) ? 'right' : 'left';
 
-
         $("#menu").insertAfter('#main');
         $('<div id="menuOverlay"></div>').insertAfter('#menu');
 
         $(document).on(this.fluidbook.input.clickEvent, '#menuOpener', function (e) {
             e.preventDefault();
             $this.open();
-            $this.openSearch();
+            //$this.openSearch();
         });
 
         // Close menu when a search result is clicked
@@ -131,13 +135,17 @@ FluidbookBurger.prototype = {
         clearTimeout(this.closeTimeout);
         if (!this.isOpened) {
             $('body').addClass('menu-open');
-            $("#menuOverlay").show();
-            if(!this.fluidbook.search.isSearchfloatActive) {
-                $("#menu").show()
+            $("#menuOverlay").show()
+
+            if(!this.fluidbook.nav.horizontalOnly) {
+                if(!this.fluidbook.search.isSearchfloatActive || (this.fluidbook.search.isSearchfloatActive && $('#menuSearch').hasClass('hidden'))) {
+                    $("#menu").show();
+                }
             }
+
             setTimeout(function () {
                 $("#menu").addClass('open');
-                this.fluidbook.resize.resizeMenu();
+                $this.fluidbook.resize.resizeMenu();
                 if (focusClose) {
                     setTimeout(function () {
                         if ($this.fluidbook.input.isUsingKeyboard()) {
@@ -165,6 +173,7 @@ FluidbookBurger.prototype = {
             return;
         }
         this.isOpened = false;
+        const $this = this;
         $('body').addClass('menu-open');
         clearTimeout(this.closeTimeout);
         $("#menu").removeClass('open');
@@ -175,8 +184,18 @@ FluidbookBurger.prototype = {
             $("body.floatmode #menuSearch").addClass('hidden');
         }
         this.closeTimeout = setTimeout(function () {
-            $("#menu,#menuOverlay").hide();
+            $("#menu").hide();
+            if($this.fluidbook.search.isSearchfloatActive && $("#menuSearch").hasClass("hidden")) {
+                $("#menuOverlay").hide();
+            }
         }, 500);
+
+        if(this.fluidbook.search.isSearchfloatActive && !this.nav.horizontalOnly) {
+            $("#menuOverlay").css({
+                "opacity": 0,
+                "pointer-events": "none"
+            })
+        }
     },
 
     toggle: function () {
@@ -187,6 +206,9 @@ FluidbookBurger.prototype = {
     },
 
     hideMenuItems: function () {
+        if(this.fluidbook.search.isSearchfloatActive) {
+            return false;
+        }
         gsap.to($('#menuList >ul > li, #shareLinks,footer#mobile-credits'), {
             duration: 0.1, opacity: 0, display: 'none'
         });
@@ -215,6 +237,17 @@ FluidbookBurger.prototype = {
         } else {
             this.open(false);
 
+            if(this.fluidbook.search.isSearchfloatActive && !this.nav.horizontalOnly) {
+                $("#menuOverlay").css({
+                    "opacity": 1,
+                    "pointer-events": "auto"
+                })
+                $("#menu").removeClass("open")
+                this.closeTimeout = setTimeout(function () {
+                    $("#menu").addClass("open").hide()
+                }, 500);
+            }
+
             if(this.fluidbook.search.isSearchfloatActive && !floatSearchVisible) {
                 $("#menuSearch").hide().removeClass('hidden')
                 setTimeout(function(){

diff --git a/js/libs/fluidbook/fluidbook.nav.js b/js/libs/fluidbook/fluidbook.nav.js
index fe9381cd65204341060978a74217ca2109382c27..aa0b3fb8012eae7643a314cd2ee49d0de9dae8e9 100644 (file)
--- a/js/libs/fluidbook/fluidbook.nav.js
+++ b/js/libs/fluidbook/fluidbook.nav.js
@@ -8,6 +8,7 @@ function FluidbookNav(fluidbook) {
     this.burger = new FluidbookBurger(this);
     this.horizontalNav = $("#horizontalNav");
     this._inited = {};
+    this.horizontalOnly = fluidbook.settings.menuBreakpoint < 320 && fluidbook.settings.menuBreakpoint !== "";
 
     this.setNav('horizontalNav');
     if ($("#iconList").html() !== '') {
@@ -544,7 +545,7 @@ FluidbookNav.prototype = {
         });
 
         // Search icon in horizontal menu
-        $(document).on(this.fluidbook.input.clickEvent, '#horizontalNav_searchIcon', function (event) {
+        $(document).on(this.fluidbook.input.clickEvent, '#horizontalNav_searchIcon, #menu_search', function (event) {
             event.preventDefault();
             $this.burger.openSearch();
         });

diff --git a/js/libs/fluidbook/fluidbook.search.float.js b/js/libs/fluidbook/fluidbook.search.float.js
index 9ed964a77ff83d097f23fda527fc82da1a6598e3..0cb1e250346a761a02c398c108d26eb37b16e70f 100644 (file)
--- a/js/libs/fluidbook/fluidbook.search.float.js
+++ b/js/libs/fluidbook/fluidbook.search.float.js
@@ -6,5 +6,19 @@ function FluidbookSearchFloat(fluidbook) {
 FluidbookSearchFloat.prototype = {
     init: function() {
        // Empty
-    }
+    },
+
+    getHtml: 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 += '<div id="menuSearchClose" role="button" aria-label="' + this.fluidbook.l10n.__('close') + '" aria-keyshortcuts="Escape" tabindex="0">';
+        res += getSpriteIcon('interface-close');
+        res += '</div>';
+        res += '</form>';
+        res += '<div id="menuSearchHints" class="mm-nopanel"></div>';
+        res += '<div id="menuSearchResults" class="mm-nopanel"></div>';
+
+        return res;
+    },
 }
\ No newline at end of file

diff --git a/js/libs/fluidbook/fluidbook.search.js b/js/libs/fluidbook/fluidbook.search.js
index d8b7dbbd9e2cc495a43ae532535a87c1c2596aab..0a7d71dbcad58f49041bd8ded7d7ce9677d870e8 100644 (file)
--- a/js/libs/fluidbook/fluidbook.search.js
+++ b/js/libs/fluidbook/fluidbook.search.js
@@ -1,6 +1,6 @@
 function FluidbookSearch(fluidbook) {
     this.fluidbook = fluidbook;
-    this.isSearchfloatActive = null;
+    this.isSearchfloatActive = false;
     this.indexLoaded = false;
     this.indexLoading = false;
     this.termsToHighlight = [];
@@ -867,6 +867,14 @@ FluidbookSearch.prototype = {
 
         this.menuSearchHints.fadeIn(300);
         $("#menuSearch").removeClass("hidden")
+
+        /*if(!this.fluidbook.nav.horizontalOnly && this.fluidbook.search.isSearchfloatActive) {
+            $("#menu").removeClass('open');
+            $("#menuOverlay").show();
+            this.closeTimeout = setTimeout(function () {
+                $("#menu").hide().addClass('open')
+            }, 500);
+        }*/
     },
 
     getSearchHints: function (q) {

diff --git a/style/search-float.less b/style/search-float.less
index ae8187c63b2f7f822c0d433add91942b2ad2bb0b..a5db8c327aadecff7497203418382827d9471957 100644 (file)
--- a/style/search-float.less
+++ b/style/search-float.less
@@ -1,4 +1,13 @@
+@import "variables";
+
 body.floatmode {
+
+  #menu {
+
+    @media (min-width: 1024px) {
+      display: none !important;
+    }
+  }
   #menuSearch {
     background-color: @search-float-background;
     color: @search-float-text;