Simplebar dependency upgrade

hfalucas · May 21, 2019 · 11af16d · 11af16d
1 parent 62ef936
commit 11af16d
Show file tree

Hide file tree

Showing 5 changed files with 122 additions and 29 deletions.
diff --git a/docs/js/build.js b/docs/js/build.js
@@ -5153,7 +5153,7 @@ __webpack_require__.r(__webpack_exports__);
 /* 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__);
 /**
- * SimpleBar.js - v4.0.0-alpha.5
+ * SimpleBar.js - v4.0.0
  * Scrollbars, simpler.
  * https://grsmto.github.io/simplebar/
  *
@@ -5342,8 +5342,20 @@ function () {
 
       _this.el.classList.remove(_this.classNames.dragging);
 
-      document.removeEventListener('mousemove', _this.drag);
-      document.removeEventListener('mouseup', _this.onEndDrag);
+      document.removeEventListener('mousemove', _this.drag, true);
+      document.removeEventListener('mouseup', _this.onEndDrag, true);
+      _this.removePreventClickId = window.setTimeout(function () {
+        // Remove these asynchronously so we still suppress click events
+        // generated simultaneously with mouseup.
+        document.removeEventListener('click', _this.preventClick, true);
+        document.removeEventListener('dblclick', _this.preventClick, true);
+        _this.removePreventClickId = null;
+      });
+    };
+
+    this.preventClick = function (e) {
+      e.preventDefault();
+      e.stopPropagation();
     };
 
     this.el = element;
@@ -5387,7 +5399,8 @@ function () {
         track: {},
         scrollbar: {}
       }
-    }; // Don't re-instantiate over an existing one
+    };
+    this.removePreventClickId = null; // Don't re-instantiate over an existing one
 
     if (this.el.SimpleBar) {
       return;
@@ -5831,8 +5844,16 @@ function () {
     this.axis[axis].dragOffset = eventOffset - scrollbar.getBoundingClientRect()[this.axis[axis].offsetAttr];
     this.draggedAxis = axis;
     this.el.classList.add(this.classNames.dragging);
-    document.addEventListener('mousemove', this.drag);
-    document.addEventListener('mouseup', this.onEndDrag);
+    document.addEventListener('mousemove', this.drag, true);
+    document.addEventListener('mouseup', this.onEndDrag, true);
+
+    if (this.removePreventClickId === null) {
+      document.addEventListener('click', this.preventClick, true);
+      document.addEventListener('dblclick', this.preventClick, true);
+    } else {
+      window.clearTimeout(this.removePreventClickId);
+      this.removePreventClickId = null;
+    }
   }
   /**
    * Drag scrollbar handle

diff --git a/examples/App.vue b/examples/App.vue
@@ -1,7 +1,7 @@
 <template>
 <div>
     <h2>Scroll Up & Down</h2>
-    <vue-simplebar class="container" @scroll-y-reach-end="YEnd++" @scroll-y-reach-start="YStart++">
+    <vue-simplebar ref="scroll" class="container" @scroll-y-reach-end="YEnd++" @scroll-y-reach-start="YStart++">
         <p>
             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
@@ -21,8 +21,14 @@
         </p>
     </vue-simplebar>
     <div class="event-listener">
-        <p><strong>Scroll reached the TOP of Y axis:</strong> {{YStart}}</p>
-        <p><strong>Scroll reached the BOTTOM of Y axis:</strong> {{YEnd}}</p>
+        <div class="event-label">
+            <p><strong>Scroll reached the TOP of Y axis:</strong> {{YStart}}</p>
+            <button type="button" @click="scrollTop">Scroll Top</button>
+        </div>
+        <div class="event-label">
+            <p><strong>Scroll reached the BOTTOM of Y axis:</strong> {{YEnd}}</p>
+            <button type="button" @click="scrollBottom">Scroll Bottom</button>
+        </div>
     </div>
 </div>
 </template>
@@ -34,7 +40,16 @@ export default {
     data: () => ({
         YStart: 0,
         YEnd: 0
-    })
+    }),
+
+    methods: {
+        scrollTop () {
+            this.$refs.scroll.scrollTop()
+        },
+        scrollBottom () {
+            this.$refs.scroll.scrollBottom()
+        }
+    }
 }
 </script>
 
@@ -65,4 +80,9 @@ p { margin: 0; padding: 0; }
     justify-content: space-around;
     padding: 12px;
 }
+
+.event-label {
+    display: flex;
+    flex-direction: column;
+}
 </style>
diff --git a/examples/bundle.js b/examples/bundle.js
@@ -242,13 +242,27 @@ __webpack_require__.r(__webpack_exports__);
 //
 //
 //
+//
+//
+//
+//
+//
+//
 /* harmony default export */ __webpack_exports__["default"] = ({
   name: 'example',
   data: function data() {
     return {
       YStart: 0,
       YEnd: 0
     };
+  },
+  methods: {
+    scrollTop: function scrollTop() {
+      this.$refs.scroll.scrollTop();
+    },
+    scrollBottom: function scrollBottom() {
+      this.$refs.scroll.scrollBottom();
+    }
   }
 });
 
@@ -2372,7 +2386,7 @@ exports = module.exports = __webpack_require__(/*! ../node_modules/css-loader/li
 
 
 // module
-exports.push([module.i, "\nhtml, body { height: 100%;\n}\nbody {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\nh2 {\n    text-align: center;\n}\n.container {\n    width: 770px !important;\n    height: 128px !important;\n    border: 1px solid #e8e8e8;\n    padding: 12px;\n}\np { margin: 0; padding: 0;\n}\n.event-listener {\n    display: flex;\n    justify-content: space-around;\n    padding: 12px;\n}\n", ""]);
+exports.push([module.i, "\nhtml, body { height: 100%;\n}\nbody {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\nh2 {\n    text-align: center;\n}\n.container {\n    width: 770px !important;\n    height: 128px !important;\n    border: 1px solid #e8e8e8;\n    padding: 12px;\n}\np { margin: 0; padding: 0;\n}\n.event-listener {\n    display: flex;\n    justify-content: space-around;\n    padding: 12px;\n}\n.event-label {\n    display: flex;\n    flex-direction: column;\n}\n", ""]);
 
 // exports
 
@@ -5419,7 +5433,7 @@ __webpack_require__.r(__webpack_exports__);
 /* 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__);
 /**
- * SimpleBar.js - v4.0.0-alpha.5
+ * SimpleBar.js - v4.0.0
  * Scrollbars, simpler.
  * https://grsmto.github.io/simplebar/
  *
@@ -5608,8 +5622,20 @@ function () {
 
       _this.el.classList.remove(_this.classNames.dragging);
 
-      document.removeEventListener('mousemove', _this.drag);
-      document.removeEventListener('mouseup', _this.onEndDrag);
+      document.removeEventListener('mousemove', _this.drag, true);
+      document.removeEventListener('mouseup', _this.onEndDrag, true);
+      _this.removePreventClickId = window.setTimeout(function () {
+        // Remove these asynchronously so we still suppress click events
+        // generated simultaneously with mouseup.
+        document.removeEventListener('click', _this.preventClick, true);
+        document.removeEventListener('dblclick', _this.preventClick, true);
+        _this.removePreventClickId = null;
+      });
+    };
+
+    this.preventClick = function (e) {
+      e.preventDefault();
+      e.stopPropagation();
     };
 
     this.el = element;
@@ -5653,7 +5679,8 @@ function () {
         track: {},
         scrollbar: {}
       }
-    }; // Don't re-instantiate over an existing one
+    };
+    this.removePreventClickId = null; // Don't re-instantiate over an existing one
 
     if (this.el.SimpleBar) {
       return;
@@ -6097,8 +6124,16 @@ function () {
     this.axis[axis].dragOffset = eventOffset - scrollbar.getBoundingClientRect()[this.axis[axis].offsetAttr];
     this.draggedAxis = axis;
     this.el.classList.add(this.classNames.dragging);
-    document.addEventListener('mousemove', this.drag);
-    document.addEventListener('mouseup', this.onEndDrag);
+    document.addEventListener('mousemove', this.drag, true);
+    document.addEventListener('mouseup', this.onEndDrag, true);
+
+    if (this.removePreventClickId === null) {
+      document.addEventListener('click', this.preventClick, true);
+      document.addEventListener('dblclick', this.preventClick, true);
+    } else {
+      window.clearTimeout(this.removePreventClickId);
+      this.removePreventClickId = null;
+    }
   }
   /**
    * Drag scrollbar handle
@@ -6851,6 +6886,7 @@ var render = function() {
       _c(
         "vue-simplebar",
         {
+          ref: "scroll",
           staticClass: "container",
           on: {
             "scroll-y-reach-end": function($event) {
@@ -6871,14 +6907,30 @@ var render = function() {
       ),
       _vm._v(" "),
       _c("div", { staticClass: "event-listener" }, [
-        _c("p", [
-          _c("strong", [_vm._v("Scroll reached the TOP of Y axis:")]),
-          _vm._v(" " + _vm._s(_vm.YStart))
+        _c("div", { staticClass: "event-label" }, [
+          _c("p", [
+            _c("strong", [_vm._v("Scroll reached the TOP of Y axis:")]),
+            _vm._v(" " + _vm._s(_vm.YStart))
+          ]),
+          _vm._v(" "),
+          _c(
+            "button",
+            { attrs: { type: "button" }, on: { click: _vm.scrollTop } },
+            [_vm._v("Scroll Top")]
+          )
         ]),
         _vm._v(" "),
-        _c("p", [
-          _c("strong", [_vm._v("Scroll reached the BOTTOM of Y axis:")]),
-          _vm._v(" " + _vm._s(_vm.YEnd))
+        _c("div", { staticClass: "event-label" }, [
+          _c("p", [
+            _c("strong", [_vm._v("Scroll reached the BOTTOM of Y axis:")]),
+            _vm._v(" " + _vm._s(_vm.YEnd))
+          ]),
+          _vm._v(" "),
+          _c(
+            "button",
+            { attrs: { type: "button" }, on: { click: _vm.scrollBottom } },
+            [_vm._v("Scroll Bottom")]
+          )
         ])
       ])
     ],

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "vue-simplebar",
-    "version": "1.0.0-beta.1",
+    "version": "1.0.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-alpha.6"
+        "simplebar": "4.0.0"
     }
 }
diff --git a/yarn.lock b/yarn.lock
@@ -6257,10 +6257,10 @@ simple-swizzle@^0.2.2:
   dependencies:
     is-arrayish "^0.3.1"
 
-simplebar@^4.0.0-alpha.6:
-  version "4.0.0-alpha.6"
-  resolved "https://registry.yarnpkg.com/simplebar/-/simplebar-4.0.0-alpha.6.tgz#69b2822486b8950f2d7121773d0c52361b3a3b30"
-  integrity sha512-OWU0lrx1hI/o7WddOz1TNlvQQiNMTv6I6p06HQwC1NjYORxutNOWM56Z/au9tVAz551x+IZn6UAuQGjkCgDnNQ==
+[email protected]:
+  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==
   dependencies:
     can-use-dom "^0.1.0"
     core-js "^3.0.1"