From ee9f18a1347a6e3a628c69ef63ec65e557389861 Mon Sep 17 00:00:00 2001 From: cyber-dream Date: Sun, 19 Mar 2023 01:47:29 +0300 Subject: [PATCH] add simple scrollbar lib --- resources/sys/wde/simple-scrollbar.css | 56 +++++++++ resources/sys/wde/simple-scrollbar.js | 165 +++++++++++++++++++++++++ 2 files changed, 221 insertions(+) create mode 100644 resources/sys/wde/simple-scrollbar.css create mode 100644 resources/sys/wde/simple-scrollbar.js diff --git a/resources/sys/wde/simple-scrollbar.css b/resources/sys/wde/simple-scrollbar.css new file mode 100644 index 0000000..718e25e --- /dev/null +++ b/resources/sys/wde/simple-scrollbar.css @@ -0,0 +1,56 @@ +.ss-wrapper { + overflow: hidden; + width: 100%; + height: 100%; + position: relative; + z-index: 1; + float: left; +} + +.ss-content { + height: 100%; + width: calc(100% + 18px); + padding: 0 0 0 0; + position: relative; + overflow: auto; + box-sizing: border-box; +} + +.ss-content.rtl { + width: calc(100% + 18px); + right: auto; +} + +.ss-scroll { + position: relative; + background: rgba(0, 0, 0, 0.1); + width: 14px; + height: 31px; + /* border-radius: 4px; */ + top: 0; + z-index: 2; + cursor: pointer; + /* opacity: 0; */ + /* transition: opacity 0.25s linear; */ + background: #9999FF; + box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), + inset 1px 0px 0px rgba(255, 255, 255, 0.5), + inset -1px -1px 0px rgba(102, 102, 204, 0.91); +} + +.ss-hidden { + display: none; +} + +.ss-container:hover .ss-scroll, +.ss-container:active .ss-scroll { + opacity: 1; +} + +.ss-grabbed { + -o-user-select: none; + -ms-user-select: none; + -moz-user-select: none; + -webkit-user-select: none; + user-select: none; +} diff --git a/resources/sys/wde/simple-scrollbar.js b/resources/sys/wde/simple-scrollbar.js new file mode 100644 index 0000000..2ff768f --- /dev/null +++ b/resources/sys/wde/simple-scrollbar.js @@ -0,0 +1,165 @@ +;(function(root, factory) { + if (typeof exports === 'object') { + module.exports = factory(window, document) + } else { + root.SimpleScrollbar = factory(window, document) + } +})(this, function(w, d) { + var raf = w.requestAnimationFrame || w.setImmediate || function(c) { return setTimeout(c, 0); }; + + function initEl(el) { + Object.defineProperty(el, 'data-simple-scrollbar', { value: new SimpleScrollbar(el), configurable: true }); + } + + function unbindEl(el) { + if (!Object.prototype.hasOwnProperty.call(el, 'data-simple-scrollbar')) return; + el['data-simple-scrollbar'].unBind(); + //Remove the elements property + delete el['data-simple-scrollbar']; + } + + // Mouse drag handler + function dragDealer(el, context) { + var lastPageY; + + el.addEventListener('mousedown', function(e) { + lastPageY = e.pageY; + el.classList.add('ss-grabbed'); + d.body.classList.add('ss-grabbed'); + + d.addEventListener('mousemove', drag); + d.addEventListener('mouseup', stop); + + return false; + }); + + function drag(e) { + var delta = e.pageY - lastPageY; + lastPageY = e.pageY; + + raf(function() { + context.el.scrollTop += delta / context.scrollRatio; + }); + } + + function stop() { + el.classList.remove('ss-grabbed'); + d.body.classList.remove('ss-grabbed'); + d.removeEventListener('mousemove', drag); + d.removeEventListener('mouseup', stop); + } + } + + // Constructor + function ss(el) { + this.target = el; + this.content = el.firstElementChild; + + this.direction = w.getComputedStyle(this.target).direction; + + this.bar = '
'; + //Create a reference to the function binding to remove the event listeners + this.mB = this.moveBar.bind(this); + + this.wrapper = d.createElement('div'); + this.wrapper.setAttribute('class', 'ss-wrapper'); + + this.el = d.createElement('div'); + this.el.setAttribute('class', 'ss-content'); + + if (this.direction === 'rtl') { + this.el.classList.add('rtl'); + } + + this.wrapper.appendChild(this.el); + + while (this.target.firstChild) { + this.el.appendChild(this.target.firstChild); + } + this.target.appendChild(this.wrapper); + + this.target.insertAdjacentHTML('beforeend', this.bar); + this.bar = this.target.lastChild; + + dragDealer(this.bar, this); + this.moveBar(); + + w.addEventListener('resize', this.mB); + this.el.addEventListener('scroll', this.mB); + this.el.addEventListener('mouseenter', this.mB); + + this.target.classList.add('ss-container'); + + var css = w.getComputedStyle(el); + if (css['height'] === '0px' && css['max-height'] !== '0px') { + el.style.height = css['max-height']; + } + + this.unBind = function() { + //Remove event listeners + w.removeEventListener('resize', this.mB); + this.el.removeEventListener('scroll', this.mB); + this.el.removeEventListener('mouseenter', this.mB); + + this.target.classList.remove('ss-container'); + + //Unwrap the initial content and remove remaining wrappers + this.target.insertBefore(this.content, this.wrapper); + this.target.removeChild(this.wrapper); + + //Remove the bar including its drag-dealer event listener + this.target.removeChild(this.bar); + this.bar = null; //make way for the garbage collector + } + } + + ss.prototype = { + moveBar: function(e) { + var totalHeight = this.el.scrollHeight, + ownHeight = this.el.clientHeight, + _this = this; + + this.scrollRatio = ownHeight / totalHeight; + + var isRtl = _this.direction === 'rtl'; + var right = isRtl ? + (_this.target.clientWidth - _this.bar.clientWidth + 18) : + (_this.target.clientWidth - _this.bar.clientWidth) * -1; + + raf(function() { + // Hide scrollbar if no scrolling is possible + if(_this.scrollRatio >= 1) { + _this.bar.classList.add('ss-hidden') + } else { + _this.bar.classList.remove('ss-hidden') + _this.bar.style.cssText = 'height:' + Math.max(_this.scrollRatio * 100, 10) + '%; top:' + (_this.el.scrollTop / totalHeight ) * 100 + '%;right:' + right + 'px;'; + } + }); + } + } + + function initAll() { + var nodes = d.querySelectorAll('*[ss-container]'); + + for (var i = 0; i < nodes.length; i++) { + initEl(nodes[i]); + } + } + + function unbindAll() { + var nodes = d.querySelectorAll('.ss-container'); + + for (var i = 0; i < nodes.length; i++) { + unbindEl(nodes[i]); + } + } + + d.addEventListener('DOMContentLoaded', initAll); + ss.initEl = initEl; + ss.initAll = initAll; + ss.unbindEl = unbindEl; + ss.unbindAll = unbindAll; + + var SimpleScrollbar = ss; + return SimpleScrollbar; +}); \ No newline at end of file