Merge pull request #22696 from andreubisquerra/develop

NEW Header Scroll in TakePOS

htdocs/takepos/css/pos.css.php

@@ -930,3 +930,106 @@ div#moreinfo, div#infowarehouse {
 		height:10%;
 	}
 }
+
+.arrows {
+	display: none;
+	position: absolute;
+	justify-content: space-between;
+	width: 100%;
+}
+
+.indicator {
+	background: #00000042;
+	padding: 15px 5px;
+	cursor: pointer;
+}
+
+.indicator:hover {
+	background: #000000;
+}
+
+.indicator i {
+	color: white;
+}
+
+.topnav-left {
+	margin-left: 20px;
+}
+
+.topnav-right {
+	margin-right: 20px;
+}
+
+/* For Header Scroll */
+html {
+  scroll-behavior: smooth;
+}
+
+.topnav {
+  scroll-behavior: smooth;
+}
+
+.header {
+	height: unset;
+}
+
+.topnav {
+	width: 100%;
+	white-space: nowrap;
+	overflow-x: scroll;
+	display: inline-flex;
+}
+
+.topnav-left {
+	white-space: nowrap;
+	float: none;
+	margin-right: auto;
+	align-items: center;
+}
+
+.topnav-right {
+	display: flex;
+	white-space: nowrap;
+	float: none;
+	align-items: center;
+}
+
+.topnav-left #shoppingcart {
+	display:inline-flex;
+}
+
+.topnav-right .login_block_other {
+	display: flex;
+	white-space: nowrap;
+}
+
+::-webkit-scrollbar {
+  width: 8px;
+}
+
+
+::-webkit-scrollbar-track {
+  background: #f1f1f1; 
+}
+ 
+
+::-webkit-scrollbar-thumb {
+  background: #888; 
+}
+
+.topnav::-webkit-scrollbar-track{
+  background: #eeeeee;
+}
+
+.topnav::-webkit-scrollbar{
+  width: 1px;
+  background: #F5F5F5;
+}
+
+.topnav::-webkit-scrollbar-thumb{
+	background: #f9171700;
+}
+
+.topnav.overflow .arrows {
+	display: flex;
+}

htdocs/takepos/index.php

@@ -939,6 +939,65 @@ $( document ).ready(function() {
 		}
 	}
 	?>
+	
+	/* For Header Scroll */
+	var elem1 = $("#topnav-left")[0];
+	var elem2 = $("#topnav-right")[0];
+	var checkOverflow = function() {
+		if (scrollBars().horizontal) $("#topnav").addClass("overflow");
+		else  $("#topnav").removeClass("overflow");			
+	}
+	
+	var scrollBars = function(){
+		var container= $('#topnav')[0];
+		return {
+			vertical:container.scrollHeight > container.clientHeight,
+			horizontal:container.scrollWidth > container.clientWidth
+		};
+	}
+	
+	$(window).resize(function(){
+		checkOverflow();
+	});
+	
+	   let resizeObserver = new ResizeObserver(() => {
+		   checkOverflow();
+	   });
+		  resizeObserver.observe(elem1);
+	   resizeObserver.observe(elem2);
+	checkOverflow();
+	
+	var pressTimer = [];
+	var direction = 1;
+	var step = 200;
+	
+	$(".indicator").mousedown(function(){
+		direction = $(this).hasClass("left") ? -1 : 1;
+		scrollTo();
+		pressTimer.push(setInterval(scrollTo, 100));
+	});
+	
+	$(".indicator").mouseup(function(){
+		pressTimer.forEach(clearInterval);
+	});
+	
+	$("body").mouseup(function(){
+		pressTimer.forEach(clearInterval);
+		console.log("body");
+	});
+	
+	function scrollTo(){
+		console.log("here");
+		var pos = $("#topnav").scrollLeft();
+		document.getElementById("topnav").scrollTo({ left: $("#topnav").scrollLeft() + direction * step, behavior: 'smooth' })
+	}
+	
+	$("#topnav").scroll(function(){
+		if (($("#topnav").offsetWidth + $("#topnav").scrollLeft >= $("#topnav").scrollWidth)) {
+			console.log("end");
+		}
+	});
+	/* End Header Scroll */
 });
 </script>
 
@@ -951,8 +1010,8 @@ $keyCodeForEnter = getDolGlobalInt('CASHDESK_READER_KEYCODE_FOR_ENTER'.$_SESSION
 if (empty($conf->global->TAKEPOS_HIDE_HEAD_BAR)) {
 	?>
 	<div class="header">
-		<div class="topnav">
+		<div id="topnav" class="topnav">
-			<div class="topnav-left">
+			<div id="topnav-left" class="topnav-left">
 				<div class="inline-block valignmiddle">
 				<a class="topnav-terminalhour" onclick="ModalBox('ModalTerminal');">
 				<span class="fa fa-cash-register"></span>
@@ -986,7 +1045,7 @@ if (empty($conf->global->TAKEPOS_HIDE_HEAD_BAR)) {
 				}
 				?>
 			</div>
-			<div class="topnav-right">
+			<div id="topnav-right" class="topnav-right">
 				<div class="login_block_other">
 				<input type="text" id="search" name="search" class="input-search-takepos" onkeyup="Search2('<?php echo dol_escape_js($keyCodeForEnter); ?>', null);" placeholder="<?php echo dol_escape_htmltag($langs->trans("Search")); ?>" autofocus>
 				<a onclick="ClearSearch();"><span class="fa fa-backspace"></span></a>
@@ -1002,6 +1061,10 @@ if (empty($conf->global->TAKEPOS_HIDE_HEAD_BAR)) {
 				?>
 				</div>
 			</div>
+			<div class="arrows">
+				<span class="indicator left"><i class="fa fa-arrow-left"></i></span>
+				<span class="indicator right"><i class="fa fa-arrow-right"></i></span>
+			</div>
 		</div>
 	</div>
 	<?php