From 17bc496d2d9ddf9a4ce28dfcd7b54ff9ba25e646 Mon Sep 17 00:00:00 2001 From: Naiel <109038805+naielv@users.noreply.github.com> Date: Thu, 29 May 2025 14:42:33 +0200 Subject: [PATCH] fixed doublescroll --- static/doublescroll.js | 187 +++++++++++++++++++++++++++-------------- sw.js | 2 +- 2 files changed, 123 insertions(+), 66 deletions(-) diff --git a/static/doublescroll.js b/static/doublescroll.js index ff18907..8ba9d1c 100644 --- a/static/doublescroll.js +++ b/static/doublescroll.js @@ -1,83 +1,140 @@ /* * @name DoubleScroll * @desc displays scroll bar on top and on the bottom of the div - * @requires jQuery, jQueryUI + * @requires jQuery * * @author Pawel Suwala - http://suwala.eu/ - * @version 0.3 (12-03-2014) + * @author Antoine Vianey - http://www.astek.fr/ + * @version 0.5 (11-11-2015) * * Dual licensed under the MIT and GPL licenses: * http://www.opensource.org/licenses/mit-license.php * http://www.gnu.org/licenses/gpl.html + * + * Usage: + * https://github.com/avianey/jqDoubleScroll */ - -(function($){ - $.widget("suwala.doubleScroll", { - options: { - contentElement: undefined, // Widest element, if not specified first child element will be used - topScrollBarMarkup: '
', - topScrollBarInnerSelector: '.suwala-doubleScroll-scroll', + (function( $ ) { + + jQuery.fn.doubleScroll = function(userOptions) { + + // Default options + var options = { + contentElement: undefined, // Widest element, if not specified first child element will be used scrollCss: { - 'overflow-x': 'scroll', - 'overflow-y':'hidden' - }, + 'overflow-x': 'auto', + 'overflow-y': 'hidden', + 'height': '20px' + }, contentCss: { - 'overflow-x': 'scroll', - 'overflow-y':'hidden' + 'overflow-x': 'auto', + 'overflow-y': 'hidden' + }, + onlyIfScroll: true, // top scrollbar is not shown if the bottom one is not present + resetOnWindowResize: false, // recompute the top ScrollBar requirements when the window is resized + timeToWaitForResize: 30 // wait for the last update event (usefull when browser fire resize event constantly during ressing) + }; + + $.extend(true, options, userOptions); + + // do not modify + // internal stuff + $.extend(options, { + topScrollBarMarkup: '
', + topScrollBarWrapperSelector: '.doubleScroll-scroll-wrapper', + topScrollBarInnerSelector: '.doubleScroll-scroll' + }); + + var _showScrollBar = function($self, options) { + + if (options.onlyIfScroll && $self.get(0).scrollWidth <= Math.round($self.width())) { + // content doesn't scroll + // remove any existing occurrence... + $self.prev(options.topScrollBarWrapperSelector).remove(); + return; } - }, - _create : function() { - var self = this; - var contentElement; - - // add div that will act as an upper scroll - var topScrollBar = $($(self.options.topScrollBarMarkup)); - self.element.before(topScrollBar); - - // find the content element (should be the widest one) - if (self.options.contentElement !== undefined && self.element.find(self.options.contentElement).length !== 0) { - contentElement = self.element.find(self.options.contentElement); - } - else { - contentElement = self.element.find('>:first-child'); - } - - // bind upper scroll to bottom scroll - topScrollBar.scroll(function(){ - self.element.scrollLeft(topScrollBar.scrollLeft()); - }); + + // add div that will act as an upper scroll only if not already added to the DOM + var $topScrollBar = $self.prev(options.topScrollBarWrapperSelector); - // bind bottom scroll to upper scroll - self.element.scroll(function(){ - topScrollBar.scrollLeft(self.element.scrollLeft()); - }); + if ($topScrollBar.length == 0) { + + // creating the scrollbar + // added before in the DOM + $topScrollBar = $(options.topScrollBarMarkup); + $self.before($topScrollBar); - // apply css - topScrollBar.css(self.options.scrollCss); - self.element.css(self.options.contentCss); + // apply the css + $topScrollBar.css(options.scrollCss); + $(options.topScrollBarInnerSelector).css("height", "20px"); + $self.css(options.contentCss); - // set the width of the wrappers - $(self.options.topScrollBarInnerSelector, topScrollBar).width(contentElement[0].scrollWidth); - topScrollBar.width(self.element[0].clientWidth); - }, - refresh: function(){ - // this should be called if the content of the inner element changed. - // i.e. After AJAX data load - var self = this; - var contentElement; - var topScrollBar = self.element.parent().find('.suwala-doubleScroll-scroll-wrapper'); + var scrolling = false; - // find the content element (should be the widest one) - if (self.options.contentElement !== undefined && self.element.find(self.options.contentElement).length !== 0) { - contentElement = self.element.find(self.options.contentElement); - } - else { - contentElement = self.element.find('>:first-child'); - } + // bind upper scroll to bottom scroll + $topScrollBar.bind('scroll.doubleScroll', function() { + if (scrolling) { + scrolling = false; + return; + } + scrolling = true; + $self.scrollLeft($topScrollBar.scrollLeft()); + }); - // set the width of the wrappers - $(self.options.topScrollBarInnerSelector, topScrollBar).width(contentElement[0].scrollWidth); - topScrollBar.width(self.element[0].clientWidth); - } - }); -})(jQuery); \ No newline at end of file + // bind bottom scroll to upper scroll + var selfScrollHandler = function() { + if (scrolling) { + scrolling = false; + return; + } + scrolling = true; + $topScrollBar.scrollLeft($self.scrollLeft()); + }; + $self.bind('scroll.doubleScroll', selfScrollHandler); + } + + // find the content element (should be the widest one) + var $contentElement; + + if (options.contentElement !== undefined && $self.find(options.contentElement).length !== 0) { + $contentElement = $self.find(options.contentElement); + } else { + $contentElement = $self.find('>:first-child'); + } + + // set the width of the wrappers + $(options.topScrollBarInnerSelector, $topScrollBar).width($contentElement.outerWidth()); + $topScrollBar.width($self.width()); + $topScrollBar.scrollLeft($self.scrollLeft()); + + } + + return this.each(function() { + + var $self = $(this); + + _showScrollBar($self, options); + + // bind the resize handler + // do it once + if (options.resetOnWindowResize) { + + var id; + var handler = function(e) { + _showScrollBar($self, options); + }; + + $(window).bind('resize.doubleScroll', function() { + // adding/removing/replacing the scrollbar might resize the window + // so the resizing flag will avoid the infinite loop here... + clearTimeout(id); + id = setTimeout(handler, options.timeToWaitForResize); + }); + + } + + }); + + } + +}( jQuery )); \ No newline at end of file diff --git a/sw.js b/sw.js index 4fa3599..22f165a 100644 --- a/sw.js +++ b/sw.js @@ -1,4 +1,4 @@ -var cacheName = 'telesec_2025-05-29_1'; +var cacheName = 'telesec_2025-05-29_2'; self.addEventListener('install', event => { event.waitUntil(