From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Tue, 2 Jan 2018 15:07:18 +0000 (+0100)
Subject: wip #1762 @4
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=93cbbd7c1f6880fb034cab2f505a8d9c9b11df30;p=fluidbook-html5.git

wip #1762 @4
---

diff --git a/js/libs/fluidbook/fluidbook.nav.js b/js/libs/fluidbook/fluidbook.nav.js
index bed1937a..02f245e5 100644
--- a/js/libs/fluidbook/fluidbook.nav.js
+++ b/js/libs/fluidbook/fluidbook.nav.js
@@ -442,17 +442,13 @@ FluidbookNav.prototype = {
                 }
 
                 if (navType == 'horizontalNav') {
-
                     if (this.fluidbook.datas.navExtraImage != '' && this.fluidbook.datas.navExtraLink != '') {
                         navExtraImage = this.fluidbook.datas.navExtraImage;
                         link = '<a id="' + elementID + '" data-tooltip="' + this.fluidbook.datas.navExtraTooltip + '" href="' + this.fluidbook.datas.navExtraLink + '"' + navLinkTarget + '><img class="nav-icon" src="data/images/' + navExtraImage + '"></a>';
-
                     } else if (this.fluidbook.datas.afterSearch != '' && this.fluidbook.datas.afterSearchDisplayForHTML && this.fluidbook.datas.themeEnableAfterSearch && navType == 'horizontalNav') {
                         // Use the "afterSearch" image and links set in the theme and link editor
-                        $nav.find('ul').append('<li id="' + elementID + '"><div id="afterSearch"><div class="c">' + this.fluidbook.loader.getImage('data/images/' + this.fluidbook.datas.afterSearch) + '</div><div class="links">' + this.fluidbook.datas.links.aftersearch + '</div></div></li>');
+                        $nav.after('<div id="afterSearch"><div class="c">' + this.fluidbook.loader.getImage('data/images/' + this.fluidbook.datas.afterSearch) + '</div><div class="links">' + this.fluidbook.datas.links.aftersearch + '</div></li>');
                     }
-
-
                 } else if (navType == 'menu' && (this.fluidbook.datas.navExtraImage != '' || this.fluidbook.datas.navExtraImageMobile != '') && this.fluidbook.datas.navExtraLink != '') {
                     navExtraImage = this.fluidbook.datas.navExtraImageMobile || this.fluidbook.datas.navExtraImage; // Fallback to desktop image
                     link = '<a id="' + elementID + '" href="' + this.fluidbook.datas.navExtraLink + '"' + navLinkTarget + '><img class="nav-icon" src="data/images/' + navExtraImage + '"> <span class="menu-item-title">' + this.fluidbook.datas.navExtraTooltip + '</span></a>';
diff --git a/js/libs/fluidbook/fluidbook.resize.js b/js/libs/fluidbook/fluidbook.resize.js
index 83aaccdd..d13e475f 100644
--- a/js/libs/fluidbook/fluidbook.resize.js
+++ b/js/libs/fluidbook/fluidbook.resize.js
@@ -229,6 +229,7 @@ FluidbookResize.prototype = {
 
         this.resizeSplash();
 
+
         if (this.fluidbook.form) {
             this.fluidbook.form.resize();
         }
@@ -251,11 +252,28 @@ FluidbookResize.prototype = {
         $(this.fluidbook).trigger('fluidbook.resize', {ww: this.ww, hh: this.hh, orientation: this.orientation, fluidbookrect: $("#fluidbook").get(0).getBoundingClientRect()});
     },
     resizeNav: function (interfaceScale) {
+        var $this = this;
         var topNext = (this.hh - (100 * interfaceScale)) / 2;
         $("#next,#previous").css({
             top: topNext
         });
         $("#next,#previous").show();
+
+        if ($("#afterSearch:visible").length == 1) {
+            setTimeout(function () {
+                $this.resizeAfterSearch();
+            }, 10);
+            this.resizeAfterSearch();
+        }
+    },
+
+    resizeAfterSearch: function () {
+        var rect = $("#horizontalNav").get(0).getBoundingClientRect();
+        if ((this.fluidbook.l10n.ltr && !this.fluidbook.datas.invertMenuPosition) || (this.fluidbook.l10n.rtl && this.fluidbook.datas.invertMenuPosition)) {
+            $("#afterSearch").css({left: rect.left + rect.width, right: 'auto'});
+        } else {
+            $("#afterSearch").css({right: this.ww - rect.right + rect.width, left: 'auto'});
+        }
     },
 
     checkLogoVisibility: function () {
diff --git a/style/fluidbook.less b/style/fluidbook.less
index ec87918e..3982cab0 100644
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@ -704,29 +704,7 @@ header {
 	white-space: nowrap;
 }
 
-#afterSearch {
-	position: relative;
-	margin: 0 17px;
-
-	.c {
-		position: relative;
-		top: 0px;
-		left: 0px;
-		z-index: 9;
-		display: block;
-	}
 
-	.links {
-		position: absolute;
-		top: 0px;
-		left: 0px;
-		z-index: 10;
-
-		.link {
-			position: absolute;
-		}
-	}
-}
 
 input[type="search"]::-webkit-search-decoration,
 input[type="search"]::-webkit-search-cancel-button,
diff --git a/style/nav-horizontal.less b/style/nav-horizontal.less
index 8cdfcf48..3482259e 100644
--- a/style/nav-horizontal.less
+++ b/style/nav-horizontal.less
@@ -108,3 +108,31 @@
 		margin-right: 10px;
 	}
 }
+
+#afterSearch {
+	position: absolute;
+	margin: 0 17px;
+
+	.c {
+		position: relative;
+		top: 0px;
+		left: 0px;
+		z-index: 9;
+		display: block;
+	}
+
+	.links {
+		position: absolute;
+		top: 0px;
+		left: 0px;
+		z-index: 10;
+
+		.link {
+			position: absolute;
+		}
+	}
+
+	@media all and (max-width: @menu-breakpoint) {
+		display: none;
+	}
+}
\ No newline at end of file