Merge pull request #22696 from andreubisquerra/develop
NEW Header Scroll in TakePOS
This commit is contained in:
Laurent Destailleur
GitHub
commit
b405caa96c
@ -929,4 +929,107 @@ div#moreinfo, div#infowarehouse {
|
||||
div.wrapper2{
|
||||
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;
|
||||
}
|
||||
@ -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 class="topnav-left">
|
||||
<div id="topnav" class="topnav">
|
||||
<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
|
||||
|
||||
Loading…
Reference in New Issue
Block a user