diff --git a/docs/app.js b/docs/app.js index 18e1eab..462a85c 100644 --- a/docs/app.js +++ b/docs/app.js @@ -1,5 +1,6 @@ import Vue from 'vue' import VueSimplebar from '../src/VueSimplebar' + const app = new Vue({ el: '#app', @@ -8,5 +9,15 @@ const app = new Vue({ data: { YStart: 0, YEnd: 0 + }, + + methods: { + scrollTop () { + this.$refs.scroll.scrollTop() + }, + + scrollBottom () { + this.$refs.scroll.scrollBottom() + } } }) diff --git a/docs/css/styles.css b/docs/css/styles.css index a2ca3f1..09d21eb 100644 --- a/docs/css/styles.css +++ b/docs/css/styles.css @@ -24,3 +24,8 @@ p { margin: 0; padding: 0; } justify-content: space-around; padding: 12px; } + +.event-label { + display: flex; + flex-direction: column; +} diff --git a/docs/index.html b/docs/index.html index 493f671..01d60b1 100644 --- a/docs/index.html +++ b/docs/index.html @@ -9,7 +9,7 @@

Scroll Up & Down

- +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris at mi convallis, tempus ex eget, condimentum metus. Duis finibus nisi et pharetra blandit. Pellentesque rutrum, nibh at dictum vehicula, ligula turpis @@ -29,9 +29,15 @@

Scroll Up & Down
-

Scroll reached the TOP of Y axis: {{YStart}}

-

Scroll reached the BOTTOM of Y axis: {{YEnd}}

-
+
+

Scroll reached the TOP of Y axis: {{YStart}}

+ +
+
+

Scroll reached the BOTTOM of Y axis: {{YEnd}}

+ +
+
diff --git a/docs/js/build.js b/docs/js/build.js index 649a13d..6626871 100644 --- a/docs/js/build.js +++ b/docs/js/build.js @@ -108,6 +108,14 @@ var app = new vue__WEBPACK_IMPORTED_MODULE_0___default.a({ data: { YStart: 0, YEnd: 0 + }, + methods: { + scrollTop: function scrollTop() { + this.$refs.scroll.scrollTop(); + }, + scrollBottom: function scrollBottom() { + this.$refs.scroll.scrollBottom(); + } } }); @@ -4863,55 +4871,6 @@ var index = (function () { /* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! ./../../webpack/buildin/global.js */ "./node_modules/webpack/buildin/global.js"))) -/***/ }), - -/***/ "./node_modules/scrollbarwidth/scrollbarWidth.js": -/*!*******************************************************!*\ - !*** ./node_modules/scrollbarwidth/scrollbarWidth.js ***! - \*******************************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { - -var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/*! scrollbarWidth.js v0.1.3 | felixexter | MIT | https://github.com/felixexter/scrollbarWidth */ -(function (root, factory) { - if (true) { - !(__WEBPACK_AMD_DEFINE_ARRAY__ = [], __WEBPACK_AMD_DEFINE_FACTORY__ = (factory), - __WEBPACK_AMD_DEFINE_RESULT__ = (typeof __WEBPACK_AMD_DEFINE_FACTORY__ === 'function' ? - (__WEBPACK_AMD_DEFINE_FACTORY__.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__)) : __WEBPACK_AMD_DEFINE_FACTORY__), - __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); - } else {} -}(this, function () { - 'use strict'; - - function scrollbarWidth() { - if (typeof document === 'undefined') { - return 0 - } - - var - body = document.body, - box = document.createElement('div'), - boxStyle = box.style, - width; - - boxStyle.position = 'absolute'; - boxStyle.top = boxStyle.left = '-9999px'; - boxStyle.width = boxStyle.height = '100px'; - boxStyle.overflow = 'scroll'; - - body.appendChild(box); - - width = box.offsetWidth - box.clientWidth; - - body.removeChild(box); - - return width; - } - - return scrollbarWidth; -})); - - /***/ }), /***/ "./node_modules/setimmediate/setImmediate.js": @@ -5141,19 +5100,17 @@ __webpack_require__.r(__webpack_exports__); /* harmony import */ var core_js_modules_es_string_replace__WEBPACK_IMPORTED_MODULE_8___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_string_replace__WEBPACK_IMPORTED_MODULE_8__); /* harmony import */ var core_js_modules_web_dom_collections_for_each__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! core-js/modules/web.dom-collections.for-each */ "./node_modules/core-js/modules/web.dom-collections.for-each.js"); /* harmony import */ var core_js_modules_web_dom_collections_for_each__WEBPACK_IMPORTED_MODULE_9___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_web_dom_collections_for_each__WEBPACK_IMPORTED_MODULE_9__); -/* harmony import */ var scrollbarwidth__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! scrollbarwidth */ "./node_modules/scrollbarwidth/scrollbarWidth.js"); -/* harmony import */ var scrollbarwidth__WEBPACK_IMPORTED_MODULE_10___default = /*#__PURE__*/__webpack_require__.n(scrollbarwidth__WEBPACK_IMPORTED_MODULE_10__); -/* harmony import */ var lodash_throttle__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! lodash.throttle */ "./node_modules/lodash.throttle/index.js"); -/* harmony import */ var lodash_throttle__WEBPACK_IMPORTED_MODULE_11___default = /*#__PURE__*/__webpack_require__.n(lodash_throttle__WEBPACK_IMPORTED_MODULE_11__); -/* harmony import */ var lodash_debounce__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! lodash.debounce */ "./node_modules/lodash.debounce/index.js"); -/* harmony import */ var lodash_debounce__WEBPACK_IMPORTED_MODULE_12___default = /*#__PURE__*/__webpack_require__.n(lodash_debounce__WEBPACK_IMPORTED_MODULE_12__); -/* harmony import */ var lodash_memoize__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! lodash.memoize */ "./node_modules/lodash.memoize/index.js"); -/* harmony import */ var lodash_memoize__WEBPACK_IMPORTED_MODULE_13___default = /*#__PURE__*/__webpack_require__.n(lodash_memoize__WEBPACK_IMPORTED_MODULE_13__); -/* harmony import */ var resize_observer_polyfill__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! resize-observer-polyfill */ "./node_modules/resize-observer-polyfill/dist/ResizeObserver.es.js"); -/* harmony import */ var can_use_dom__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! can-use-dom */ "./node_modules/can-use-dom/index.js"); -/* harmony import */ var can_use_dom__WEBPACK_IMPORTED_MODULE_15___default = /*#__PURE__*/__webpack_require__.n(can_use_dom__WEBPACK_IMPORTED_MODULE_15__); +/* harmony import */ var lodash_throttle__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! lodash.throttle */ "./node_modules/lodash.throttle/index.js"); +/* harmony import */ var lodash_throttle__WEBPACK_IMPORTED_MODULE_10___default = /*#__PURE__*/__webpack_require__.n(lodash_throttle__WEBPACK_IMPORTED_MODULE_10__); +/* harmony import */ var lodash_debounce__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! lodash.debounce */ "./node_modules/lodash.debounce/index.js"); +/* harmony import */ var lodash_debounce__WEBPACK_IMPORTED_MODULE_11___default = /*#__PURE__*/__webpack_require__.n(lodash_debounce__WEBPACK_IMPORTED_MODULE_11__); +/* harmony import */ var lodash_memoize__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! lodash.memoize */ "./node_modules/lodash.memoize/index.js"); +/* harmony import */ var lodash_memoize__WEBPACK_IMPORTED_MODULE_12___default = /*#__PURE__*/__webpack_require__.n(lodash_memoize__WEBPACK_IMPORTED_MODULE_12__); +/* harmony import */ var resize_observer_polyfill__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! resize-observer-polyfill */ "./node_modules/resize-observer-polyfill/dist/ResizeObserver.es.js"); +/* harmony import */ var can_use_dom__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! can-use-dom */ "./node_modules/can-use-dom/index.js"); +/* harmony import */ var can_use_dom__WEBPACK_IMPORTED_MODULE_14___default = /*#__PURE__*/__webpack_require__.n(can_use_dom__WEBPACK_IMPORTED_MODULE_14__); /** - * SimpleBar.js - v4.0.0 + * SimpleBar.js - v4.2.0 * Scrollbars, simpler. * https://grsmto.github.io/simplebar/ * @@ -5177,6 +5134,23 @@ __webpack_require__.r(__webpack_exports__); +function scrollbarWidth() { + if (typeof document === 'undefined') { + return 0; + } + + var body = document.body; + var box = document.createElement('div'); + var boxStyle = box.style; + boxStyle.position = 'fixed'; + boxStyle.left = 0; + boxStyle.visibility = 'hidden'; + boxStyle.overflowY = 'scroll'; + body.appendChild(box); + var width = box.getBoundingClientRect().right; + body.removeChild(box); + return width; +} var SimpleBar = /*#__PURE__*/ @@ -5252,7 +5226,7 @@ function () { this.onWindowResize = function () { // Recalculate scrollbarWidth in case it's a zoom - _this.scrollbarWidth = scrollbarwidth__WEBPACK_IMPORTED_MODULE_10___default()(); + _this.scrollbarWidth = scrollbarWidth(); _this.hideNativeScrollbar(); }; @@ -5406,13 +5380,13 @@ function () { return; } - this.recalculate = lodash_throttle__WEBPACK_IMPORTED_MODULE_11___default()(this.recalculate.bind(this), 64); - this.onMouseMove = lodash_throttle__WEBPACK_IMPORTED_MODULE_11___default()(this.onMouseMove.bind(this), 64); - this.hideScrollbars = lodash_debounce__WEBPACK_IMPORTED_MODULE_12___default()(this.hideScrollbars.bind(this), this.options.timeout); - this.onWindowResize = lodash_debounce__WEBPACK_IMPORTED_MODULE_12___default()(this.onWindowResize.bind(this), 64, { + this.recalculate = lodash_throttle__WEBPACK_IMPORTED_MODULE_10___default()(this.recalculate.bind(this), 64); + this.onMouseMove = lodash_throttle__WEBPACK_IMPORTED_MODULE_10___default()(this.onMouseMove.bind(this), 64); + this.hideScrollbars = lodash_debounce__WEBPACK_IMPORTED_MODULE_11___default()(this.hideScrollbars.bind(this), this.options.timeout); + this.onWindowResize = lodash_debounce__WEBPACK_IMPORTED_MODULE_11___default()(this.onWindowResize.bind(this), 64, { leading: true }); - SimpleBar.getRtlHelpers = lodash_memoize__WEBPACK_IMPORTED_MODULE_13___default()(SimpleBar.getRtlHelpers); + SimpleBar.getRtlHelpers = lodash_memoize__WEBPACK_IMPORTED_MODULE_12___default()(SimpleBar.getRtlHelpers); this.init(); } /** @@ -5553,9 +5527,9 @@ function () { // Save a reference to the instance, so we know this DOM node has already been instancied this.el.SimpleBar = this; // We stop here on server-side - if (can_use_dom__WEBPACK_IMPORTED_MODULE_15___default.a) { + if (can_use_dom__WEBPACK_IMPORTED_MODULE_14___default.a) { this.initDOM(); - this.scrollbarWidth = scrollbarwidth__WEBPACK_IMPORTED_MODULE_10___default()(); + this.scrollbarWidth = scrollbarWidth(); this.recalculate(); this.initListeners(); } @@ -5646,14 +5620,17 @@ function () { } ['mousedown', 'click', 'dblclick', 'touchstart', 'touchend', 'touchmove'].forEach(function (e) { - _this3.el.addEventListener(e, _this3.onPointerEvent, true); + _this3.el.addEventListener(e, _this3.onPointerEvent, { + capture: true, + passive: true + }); }); this.el.addEventListener('mousemove', this.onMouseMove); this.el.addEventListener('mouseleave', this.onMouseLeave); this.contentWrapperEl.addEventListener('scroll', this.onScroll); // Browser zoom triggers a window resize window.addEventListener('resize', this.onWindowResize); - this.resizeObserver = new resize_observer_polyfill__WEBPACK_IMPORTED_MODULE_14__["default"](this.recalculate); + this.resizeObserver = new resize_observer_polyfill__WEBPACK_IMPORTED_MODULE_13__["default"](this.recalculate); this.resizeObserver.observe(this.el); this.resizeObserver.observe(this.contentEl); }; @@ -5884,7 +5861,10 @@ function () { } ['mousedown', 'click', 'dblclick', 'touchstart', 'touchend', 'touchmove'].forEach(function (e) { - _this4.el.removeEventListener(e, _this4.onPointerEvent); + _this4.el.removeEventListener(e, _this4.onPointerEvent, { + capture: true, + passive: true + }); }); this.el.removeEventListener('mousemove', this.onMouseMove); this.el.removeEventListener('mouseleave', this.onMouseLeave); @@ -5959,7 +5939,7 @@ SimpleBar.defaultOptions = { timeout: 1000 }; -if (can_use_dom__WEBPACK_IMPORTED_MODULE_15___default.a) { +if (can_use_dom__WEBPACK_IMPORTED_MODULE_14___default.a) { SimpleBar.initHtmlApi(); } diff --git a/docs/styles.css b/docs/styles.css index a2ca3f1..09d21eb 100644 --- a/docs/styles.css +++ b/docs/styles.css @@ -24,3 +24,8 @@ p { margin: 0; padding: 0; } justify-content: space-around; padding: 12px; } + +.event-label { + display: flex; + flex-direction: column; +} diff --git a/examples/bundle.js b/examples/bundle.js index 21aba3b..217c34e 100644 --- a/examples/bundle.js +++ b/examples/bundle.js @@ -2367,7 +2367,7 @@ exports = module.exports = __webpack_require__(/*! ../node_modules/css-loader/li // module -exports.push([module.i, "[data-simplebar] {\n position: relative;\n flex-direction: column;\n flex-wrap: wrap;\n justify-content: flex-start;\n align-content: flex-start;\n align-items: flex-start;\n}\n\n.simplebar-wrapper {\n overflow: hidden;\n width: inherit;\n height: inherit;\n max-width: inherit;\n max-height: inherit;\n}\n\n.simplebar-mask {\n direction: inherit;\n position: absolute;\n overflow: hidden;\n padding: 0;\n margin: 0;\n left: 0;\n top: 0;\n bottom: 0;\n right: 0;\n width: auto !important;\n height: auto !important;\n z-index: 0;\n}\n\n.simplebar-offset {\n direction: inherit !important;\n box-sizing: inherit !important;\n resize: none !important;\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n padding: 0;\n margin: 0;\n -webkit-overflow-scrolling: touch;\n}\n\n.simplebar-content-wrapper {\n direction: inherit;\n box-sizing: border-box !important;\n position: relative;\n display: block;\n height: 100%; /* Required for horizontal native scrollbar to not appear if parent is taller than natural height */\n width: auto;\n visibility: visible;\n overflow: auto; /* Scroll on this element otherwise element can't have a padding applied properly */\n max-width: 100%; /* Not required for horizontal scroll to trigger */\n max-height: 100%; /* Needed for vertical scroll to trigger */\n}\n\n.simplebar-content:before,\n.simplebar-content:after {\n content: \" \";\n display: table;\n}\n\n.simplebar-placeholder {\n max-height: 100%;\n max-width: 100%;\n width: 100%;\n pointer-events: none;\n}\n\n.simplebar-height-auto-observer-wrapper {\n box-sizing: inherit !important;\n height: 100%;\n width: inherit;\n max-width: 1px;\n position: relative;\n float: left;\n max-height: 1px;\n overflow: hidden;\n z-index: -1;\n padding: 0;\n margin: 0;\n pointer-events: none;\n flex-grow: inherit;\n flex-shrink: 0;\n flex-basis: 0;\n}\n\n.simplebar-height-auto-observer {\n box-sizing: inherit;\n display: block;\n opacity: 0;\n position: absolute;\n top: 0;\n left: 0;\n height: 1000%;\n width: 1000%;\n min-height: 1px;\n min-width: 1px;\n overflow: hidden;\n pointer-events: none;\n z-index: -1;\n}\n\n.simplebar-track {\n z-index: 1;\n position: absolute;\n right: 0;\n bottom: 0;\n pointer-events: none;\n overflow: hidden;\n}\n\n[data-simplebar].simplebar-dragging .simplebar-track {\n pointer-events: all;\n}\n\n.simplebar-scrollbar {\n position: absolute;\n right: 2px;\n width: 7px;\n min-height: 10px;\n}\n\n.simplebar-scrollbar:before {\n position: absolute;\n content: \"\";\n background: black;\n border-radius: 7px;\n left: 0;\n right: 0;\n opacity: 0;\n transition: opacity 0.2s linear;\n}\n\n.simplebar-track .simplebar-scrollbar.simplebar-visible:before {\n /* When hovered, remove all transitions from drag handle */\n opacity: 0.5;\n transition: opacity 0s linear;\n}\n\n.simplebar-track.simplebar-vertical {\n top: 0;\n width: 11px;\n}\n\n.simplebar-track.simplebar-vertical .simplebar-scrollbar:before {\n top: 2px;\n bottom: 2px;\n}\n\n.simplebar-track.simplebar-horizontal {\n left: 0;\n height: 11px;\n}\n\n.simplebar-track.simplebar-horizontal .simplebar-scrollbar:before {\n height: 100%;\n left: 2px;\n right: 2px;\n}\n\n.simplebar-track.simplebar-horizontal .simplebar-scrollbar {\n right: auto;\n left: 0;\n top: 2px;\n height: 7px;\n min-height: 0;\n min-width: 10px;\n width: auto;\n}\n\n/* Rtl support */\n\n[data-simplebar-direction=\"rtl\"] .simplebar-track.simplebar-vertical {\n right: auto;\n left: 0;\n}\n\n.hs-dummy-scrollbar-size {\n direction: rtl;\n position: fixed;\n opacity: 0;\n visibility: hidden;\n height: 500px;\n width: 500px;\n overflow-y: hidden;\n overflow-x: scroll;\n}\n", ""]); +exports.push([module.i, "[data-simplebar] {\n position: relative;\n flex-direction: column;\n flex-wrap: wrap;\n justify-content: flex-start;\n align-content: flex-start;\n align-items: flex-start;\n}\n\n.simplebar-wrapper {\n overflow: hidden;\n width: inherit;\n height: inherit;\n max-width: inherit;\n max-height: inherit;\n}\n\n.simplebar-mask {\n direction: inherit;\n position: absolute;\n overflow: hidden;\n padding: 0;\n margin: 0;\n left: 0;\n top: 0;\n bottom: 0;\n right: 0;\n width: auto !important;\n height: auto !important;\n z-index: 0;\n}\n\n.simplebar-offset {\n direction: inherit !important;\n box-sizing: inherit !important;\n resize: none !important;\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n padding: 0;\n margin: 0;\n -webkit-overflow-scrolling: touch;\n}\n\n.simplebar-content-wrapper {\n direction: inherit;\n box-sizing: border-box !important;\n position: relative;\n display: block;\n height: 100%; /* Required for horizontal native scrollbar to not appear if parent is taller than natural height */\n width: auto;\n visibility: visible;\n overflow: auto; /* Scroll on this element otherwise element can't have a padding applied properly */\n max-width: 100%; /* Not required for horizontal scroll to trigger */\n max-height: 100%; /* Needed for vertical scroll to trigger */\n}\n\n.simplebar-content:before,\n.simplebar-content:after {\n content: ' ';\n display: table;\n}\n\n.simplebar-placeholder {\n max-height: 100%;\n max-width: 100%;\n width: 100%;\n pointer-events: none;\n}\n\n.simplebar-height-auto-observer-wrapper {\n box-sizing: inherit !important;\n height: 100%;\n width: 100%;\n max-width: 1px;\n position: relative;\n float: left;\n max-height: 1px;\n overflow: hidden;\n z-index: -1;\n padding: 0;\n margin: 0;\n pointer-events: none;\n flex-grow: inherit;\n flex-shrink: 0;\n flex-basis: 0;\n}\n\n.simplebar-height-auto-observer {\n box-sizing: inherit;\n display: block;\n opacity: 0;\n position: absolute;\n top: 0;\n left: 0;\n height: 1000%;\n width: 1000%;\n min-height: 1px;\n min-width: 1px;\n overflow: hidden;\n pointer-events: none;\n z-index: -1;\n}\n\n.simplebar-track {\n z-index: 1;\n position: absolute;\n right: 0;\n bottom: 0;\n pointer-events: none;\n overflow: hidden;\n}\n\n[data-simplebar].simplebar-dragging .simplebar-track {\n pointer-events: all;\n}\n\n.simplebar-scrollbar {\n position: absolute;\n right: 2px;\n width: 7px;\n min-height: 10px;\n}\n\n.simplebar-scrollbar:before {\n position: absolute;\n content: '';\n background: black;\n border-radius: 7px;\n left: 0;\n right: 0;\n opacity: 0;\n transition: opacity 0.2s linear;\n}\n\n.simplebar-track .simplebar-scrollbar.simplebar-visible:before {\n /* When hovered, remove all transitions from drag handle */\n opacity: 0.5;\n transition: opacity 0s linear;\n}\n\n.simplebar-track.simplebar-vertical {\n top: 0;\n width: 11px;\n}\n\n.simplebar-track.simplebar-vertical .simplebar-scrollbar:before {\n top: 2px;\n bottom: 2px;\n}\n\n.simplebar-track.simplebar-horizontal {\n left: 0;\n height: 11px;\n}\n\n.simplebar-track.simplebar-horizontal .simplebar-scrollbar:before {\n height: 100%;\n left: 2px;\n right: 2px;\n}\n\n.simplebar-track.simplebar-horizontal .simplebar-scrollbar {\n right: auto;\n left: 0;\n top: 2px;\n height: 7px;\n min-height: 0;\n min-width: 10px;\n width: auto;\n}\n\n/* Rtl support */\n\n[data-simplebar-direction='rtl'] .simplebar-track.simplebar-vertical {\n right: auto;\n left: 0;\n}\n\n.hs-dummy-scrollbar-size {\n direction: rtl;\n position: fixed;\n opacity: 0;\n visibility: hidden;\n height: 500px;\n width: 500px;\n overflow-y: hidden;\n overflow-x: scroll;\n}\n", ""]); // exports @@ -5143,55 +5143,6 @@ var index = (function () { /* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! ./../../webpack/buildin/global.js */ "./node_modules/webpack/buildin/global.js"))) -/***/ }), - -/***/ "./node_modules/scrollbarwidth/scrollbarWidth.js": -/*!*******************************************************!*\ - !*** ./node_modules/scrollbarwidth/scrollbarWidth.js ***! - \*******************************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { - -var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/*! scrollbarWidth.js v0.1.3 | felixexter | MIT | https://github.com/felixexter/scrollbarWidth */ -(function (root, factory) { - if (true) { - !(__WEBPACK_AMD_DEFINE_ARRAY__ = [], __WEBPACK_AMD_DEFINE_FACTORY__ = (factory), - __WEBPACK_AMD_DEFINE_RESULT__ = (typeof __WEBPACK_AMD_DEFINE_FACTORY__ === 'function' ? - (__WEBPACK_AMD_DEFINE_FACTORY__.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__)) : __WEBPACK_AMD_DEFINE_FACTORY__), - __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); - } else {} -}(this, function () { - 'use strict'; - - function scrollbarWidth() { - if (typeof document === 'undefined') { - return 0 - } - - var - body = document.body, - box = document.createElement('div'), - boxStyle = box.style, - width; - - boxStyle.position = 'absolute'; - boxStyle.top = boxStyle.left = '-9999px'; - boxStyle.width = boxStyle.height = '100px'; - boxStyle.overflow = 'scroll'; - - body.appendChild(box); - - width = box.offsetWidth - box.clientWidth; - - body.removeChild(box); - - return width; - } - - return scrollbarWidth; -})); - - /***/ }), /***/ "./node_modules/setimmediate/setImmediate.js": @@ -5421,19 +5372,17 @@ __webpack_require__.r(__webpack_exports__); /* harmony import */ var core_js_modules_es_string_replace__WEBPACK_IMPORTED_MODULE_8___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_string_replace__WEBPACK_IMPORTED_MODULE_8__); /* harmony import */ var core_js_modules_web_dom_collections_for_each__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! core-js/modules/web.dom-collections.for-each */ "./node_modules/core-js/modules/web.dom-collections.for-each.js"); /* harmony import */ var core_js_modules_web_dom_collections_for_each__WEBPACK_IMPORTED_MODULE_9___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_web_dom_collections_for_each__WEBPACK_IMPORTED_MODULE_9__); -/* harmony import */ var scrollbarwidth__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! scrollbarwidth */ "./node_modules/scrollbarwidth/scrollbarWidth.js"); -/* harmony import */ var scrollbarwidth__WEBPACK_IMPORTED_MODULE_10___default = /*#__PURE__*/__webpack_require__.n(scrollbarwidth__WEBPACK_IMPORTED_MODULE_10__); -/* harmony import */ var lodash_throttle__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! lodash.throttle */ "./node_modules/lodash.throttle/index.js"); -/* harmony import */ var lodash_throttle__WEBPACK_IMPORTED_MODULE_11___default = /*#__PURE__*/__webpack_require__.n(lodash_throttle__WEBPACK_IMPORTED_MODULE_11__); -/* harmony import */ var lodash_debounce__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! lodash.debounce */ "./node_modules/lodash.debounce/index.js"); -/* harmony import */ var lodash_debounce__WEBPACK_IMPORTED_MODULE_12___default = /*#__PURE__*/__webpack_require__.n(lodash_debounce__WEBPACK_IMPORTED_MODULE_12__); -/* harmony import */ var lodash_memoize__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! lodash.memoize */ "./node_modules/lodash.memoize/index.js"); -/* harmony import */ var lodash_memoize__WEBPACK_IMPORTED_MODULE_13___default = /*#__PURE__*/__webpack_require__.n(lodash_memoize__WEBPACK_IMPORTED_MODULE_13__); -/* harmony import */ var resize_observer_polyfill__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! resize-observer-polyfill */ "./node_modules/resize-observer-polyfill/dist/ResizeObserver.es.js"); -/* harmony import */ var can_use_dom__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! can-use-dom */ "./node_modules/can-use-dom/index.js"); -/* harmony import */ var can_use_dom__WEBPACK_IMPORTED_MODULE_15___default = /*#__PURE__*/__webpack_require__.n(can_use_dom__WEBPACK_IMPORTED_MODULE_15__); +/* harmony import */ var lodash_throttle__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! lodash.throttle */ "./node_modules/lodash.throttle/index.js"); +/* harmony import */ var lodash_throttle__WEBPACK_IMPORTED_MODULE_10___default = /*#__PURE__*/__webpack_require__.n(lodash_throttle__WEBPACK_IMPORTED_MODULE_10__); +/* harmony import */ var lodash_debounce__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! lodash.debounce */ "./node_modules/lodash.debounce/index.js"); +/* harmony import */ var lodash_debounce__WEBPACK_IMPORTED_MODULE_11___default = /*#__PURE__*/__webpack_require__.n(lodash_debounce__WEBPACK_IMPORTED_MODULE_11__); +/* harmony import */ var lodash_memoize__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! lodash.memoize */ "./node_modules/lodash.memoize/index.js"); +/* harmony import */ var lodash_memoize__WEBPACK_IMPORTED_MODULE_12___default = /*#__PURE__*/__webpack_require__.n(lodash_memoize__WEBPACK_IMPORTED_MODULE_12__); +/* harmony import */ var resize_observer_polyfill__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! resize-observer-polyfill */ "./node_modules/resize-observer-polyfill/dist/ResizeObserver.es.js"); +/* harmony import */ var can_use_dom__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! can-use-dom */ "./node_modules/can-use-dom/index.js"); +/* harmony import */ var can_use_dom__WEBPACK_IMPORTED_MODULE_14___default = /*#__PURE__*/__webpack_require__.n(can_use_dom__WEBPACK_IMPORTED_MODULE_14__); /** - * SimpleBar.js - v4.0.0 + * SimpleBar.js - v4.2.0 * Scrollbars, simpler. * https://grsmto.github.io/simplebar/ * @@ -5457,6 +5406,23 @@ __webpack_require__.r(__webpack_exports__); +function scrollbarWidth() { + if (typeof document === 'undefined') { + return 0; + } + + var body = document.body; + var box = document.createElement('div'); + var boxStyle = box.style; + boxStyle.position = 'fixed'; + boxStyle.left = 0; + boxStyle.visibility = 'hidden'; + boxStyle.overflowY = 'scroll'; + body.appendChild(box); + var width = box.getBoundingClientRect().right; + body.removeChild(box); + return width; +} var SimpleBar = /*#__PURE__*/ @@ -5532,7 +5498,7 @@ function () { this.onWindowResize = function () { // Recalculate scrollbarWidth in case it's a zoom - _this.scrollbarWidth = scrollbarwidth__WEBPACK_IMPORTED_MODULE_10___default()(); + _this.scrollbarWidth = scrollbarWidth(); _this.hideNativeScrollbar(); }; @@ -5686,13 +5652,13 @@ function () { return; } - this.recalculate = lodash_throttle__WEBPACK_IMPORTED_MODULE_11___default()(this.recalculate.bind(this), 64); - this.onMouseMove = lodash_throttle__WEBPACK_IMPORTED_MODULE_11___default()(this.onMouseMove.bind(this), 64); - this.hideScrollbars = lodash_debounce__WEBPACK_IMPORTED_MODULE_12___default()(this.hideScrollbars.bind(this), this.options.timeout); - this.onWindowResize = lodash_debounce__WEBPACK_IMPORTED_MODULE_12___default()(this.onWindowResize.bind(this), 64, { + this.recalculate = lodash_throttle__WEBPACK_IMPORTED_MODULE_10___default()(this.recalculate.bind(this), 64); + this.onMouseMove = lodash_throttle__WEBPACK_IMPORTED_MODULE_10___default()(this.onMouseMove.bind(this), 64); + this.hideScrollbars = lodash_debounce__WEBPACK_IMPORTED_MODULE_11___default()(this.hideScrollbars.bind(this), this.options.timeout); + this.onWindowResize = lodash_debounce__WEBPACK_IMPORTED_MODULE_11___default()(this.onWindowResize.bind(this), 64, { leading: true }); - SimpleBar.getRtlHelpers = lodash_memoize__WEBPACK_IMPORTED_MODULE_13___default()(SimpleBar.getRtlHelpers); + SimpleBar.getRtlHelpers = lodash_memoize__WEBPACK_IMPORTED_MODULE_12___default()(SimpleBar.getRtlHelpers); this.init(); } /** @@ -5833,9 +5799,9 @@ function () { // Save a reference to the instance, so we know this DOM node has already been instancied this.el.SimpleBar = this; // We stop here on server-side - if (can_use_dom__WEBPACK_IMPORTED_MODULE_15___default.a) { + if (can_use_dom__WEBPACK_IMPORTED_MODULE_14___default.a) { this.initDOM(); - this.scrollbarWidth = scrollbarwidth__WEBPACK_IMPORTED_MODULE_10___default()(); + this.scrollbarWidth = scrollbarWidth(); this.recalculate(); this.initListeners(); } @@ -5926,14 +5892,17 @@ function () { } ['mousedown', 'click', 'dblclick', 'touchstart', 'touchend', 'touchmove'].forEach(function (e) { - _this3.el.addEventListener(e, _this3.onPointerEvent, true); + _this3.el.addEventListener(e, _this3.onPointerEvent, { + capture: true, + passive: true + }); }); this.el.addEventListener('mousemove', this.onMouseMove); this.el.addEventListener('mouseleave', this.onMouseLeave); this.contentWrapperEl.addEventListener('scroll', this.onScroll); // Browser zoom triggers a window resize window.addEventListener('resize', this.onWindowResize); - this.resizeObserver = new resize_observer_polyfill__WEBPACK_IMPORTED_MODULE_14__["default"](this.recalculate); + this.resizeObserver = new resize_observer_polyfill__WEBPACK_IMPORTED_MODULE_13__["default"](this.recalculate); this.resizeObserver.observe(this.el); this.resizeObserver.observe(this.contentEl); }; @@ -6164,7 +6133,10 @@ function () { } ['mousedown', 'click', 'dblclick', 'touchstart', 'touchend', 'touchmove'].forEach(function (e) { - _this4.el.removeEventListener(e, _this4.onPointerEvent); + _this4.el.removeEventListener(e, _this4.onPointerEvent, { + capture: true, + passive: true + }); }); this.el.removeEventListener('mousemove', this.onMouseMove); this.el.removeEventListener('mouseleave', this.onMouseLeave); @@ -6239,7 +6211,7 @@ SimpleBar.defaultOptions = { timeout: 1000 }; -if (can_use_dom__WEBPACK_IMPORTED_MODULE_15___default.a) { +if (can_use_dom__WEBPACK_IMPORTED_MODULE_14___default.a) { SimpleBar.initHtmlApi(); } diff --git a/package.json b/package.json index 12781dd..721e62f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vue-simplebar", - "version": "1.0.0", + "version": "1.1.0", "description": "Vue.js wrapper for simplebar", "paths": { "source": "src", @@ -64,6 +64,6 @@ "webpack-dev-server": "^3.1.7" }, "dependencies": { - "simplebar": "4.0.0" + "simplebar": "4.2.0" } } diff --git a/yarn.lock b/yarn.lock index da497ac..d073442 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6089,11 +6089,6 @@ schema-utils@^1.0.0: ajv-errors "^1.0.0" ajv-keywords "^3.1.0" -scrollbarwidth@^0.1.3: - version "0.1.3" - resolved "https://registry.yarnpkg.com/scrollbarwidth/-/scrollbarwidth-0.1.3.tgz#1b0de64e288c38c427f4a01fe00a462a04b94fdf" - integrity sha1-Gw3mTiiMOMQn9KAf4ApGKgS5T98= - scss-tokenizer@^0.2.3: version "0.2.3" resolved "https://registry.yarnpkg.com/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz#8eb06db9a9723333824d3f5530641149847ce5d1" @@ -6257,10 +6252,10 @@ simple-swizzle@^0.2.2: dependencies: is-arrayish "^0.3.1" -simplebar@4.0.0: - version "4.0.0" - resolved "https://registry.yarnpkg.com/simplebar/-/simplebar-4.0.0.tgz#7f1b9e735ec94a58f887d4803f6b15abf401b6b5" - integrity sha512-td6vJVhqIXfa3JgNZR5OgETPLfmHNSSpt+OXIbk6WH/nOrUtX3Qcyio30+5rdxxAV/61+F5eJ4jJV4Ek7/KJYQ== +simplebar@4.2.0: + version "4.2.0" + resolved "https://registry.yarnpkg.com/simplebar/-/simplebar-4.2.0.tgz#97e5c1c85d05cc04f8c92939e4da71dd087e325c" + integrity sha512-FqPl3FtO0ODIKHMJy2WsunqA+I0/hvw/dnHgackaXGwSP9FO7Y5APH1miPGVCsoGNFCK+v0MXL38f8Epe3qeBw== dependencies: can-use-dom "^0.1.0" core-js "^3.0.1" @@ -6268,7 +6263,6 @@ simplebar@4.0.0: lodash.memoize "^4.1.2" lodash.throttle "^4.1.1" resize-observer-polyfill "^1.5.1" - scrollbarwidth "^0.1.3" slash@^1.0.0: version "1.0.0"