@mptw/skylens-ui 1.4.88 → 1.4.89

package/components/SLContextMenu.vue

@@ -22,6 +22,18 @@ import { fromEvent, Subscription } from 'rxjs';
 import type IDateRange from '~/interface/IDateRange';
 
 const WatermarkImage = '/assets/images/commons/watermark-2.svg';
+const keys = { 37: 1, 38: 1, 30: 1, 40: 1 };
+
+function preventDefault(e: Event) {
+  e.preventDefault();
+}
+
+function preventDefaultForScrollKeys(e: Event) {
+  if (keys[e.keyCode]) {
+    preventDefault(e);
+    return false;
+  }
+}
 
 export default defineComponent({
   name: 'SLContextMenu',
@@ -57,6 +69,17 @@ export default defineComponent({
   },
   emits: ['action'],
   setup(props, { emit }) {
+    let supportsPassive = false;
+
+    try {
+      window.addEventListener("test", null, Object.defineProperty({}, 'passive', {
+        get: function () { supportsPassive = true; }
+      }));
+    } catch (e) { }
+
+    const wheelOpt = supportsPassive ? { passive: false } : false;
+    const wheelEvent = 'onwheel' in document.createElement('div') ? 'wheel' : 'mousewheel';
+
     const { target, filename, dateRanges, padding, watermark, customFilter, customStyle } = toRefs(props);
 
     const el = shallowRef<HTMLDivElement | null>(null);
@@ -149,26 +172,25 @@ export default defineComponent({
       }, 300);
     }
 
-    function subscribeScroll() {
-      if (window) {
-        windowScrollSubscriber = fromEvent(window, 'scroll').subscribe((e: Event) => {
-          e.preventDefault();
-        });
-      }
+    function subscribeScrollEvents() {
+      window.addEventListener('DOMMouseScroll', preventDefault, false); // older FF
+      window.addEventListener(wheelEvent, preventDefault, wheelOpt); // modern desktop
+      window.addEventListener('touchmove', preventDefault, wheelOpt); // mobile
+      window.addEventListener('keydown', preventDefaultForScrollKeys, false);
     }
 
-    function unsubscribeScroll() {
-      if (windowScrollSubscriber) {
-        windowScrollSubscriber.unsubscribe();
-        windowScrollSubscriber = null;
-      }
+    function unsubscribeScrollEvents() {
+      window.removeEventListener('DOMMouseScroll', preventDefault, false);
+      window.removeEventListener(wheelEvent, preventDefault, wheelOpt);
+      window.removeEventListener('touchmove', preventDefault, wheelOpt);
+      window.removeEventListener('keydown', preventDefaultForScrollKeys, false);
     }
 
     watch(isShow, () => {
       if (isShow.value) {
-        subscribeScroll();
+        subscribeScrollEvents();
       } else {
-        unsubscribeScroll();
+        unsubscribeScrollEvents();
       }
     });
 
@@ -211,6 +233,9 @@ export default defineComponent({
 </script>
 
 <style lang="stylus" scoped>
+.sl-context-menu-wrapper
+  @apply hidden
+
 .sl-context-menu-container
   @apply fixed top-0 left-0 w-full h-full
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mptw/skylens-ui",
   "type": "module",
-  "version": "1.4.88",
+  "version": "1.4.89",
   "main": "./nuxt.config.ts",
   "scripts": {
     "dev": "nuxi dev .playground",