add simple scrollbar lib

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;
+}

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 = '<div class="ss-scroll">';
+    //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;
+});