@mptw/skylens-ui 1.4.87 → 1.4.89

package/components/SLContextMenu.vue

@@ -1,75 +1,205 @@
 <template lang="pug">
-  .sl-context-menu-avatar(ref='el')
-    ClientOnly
-      Teleport(to='body')
-        .sl-context-menu-wrapper.hidden(ref='menuWrapperEl', @mousedown='onMouseDown')
-          .sl-context-menu(ref='menuEl')
-            a.sl-context-menu-item(
-              v-for='action in actions',
-              href='javascript:;',
-              :key='action.key',
-              @click='onClickAction(action.key)',
-            ) {{ action.label }}
+  .sl-context-menu-wrapper(ref='el')
+    Teleport(to="#popup")
+      .sl-context-menu-container(v-if='isShow')
+        .sl-context-menu-container-modal(@click='onClickModal')
+        .sl-context-menu(:style='contextMenuStyle')
+          a.sl-context-menu-item(
+            v-for='action in contextMenuActions',
+            href='javascript:;',
+            :key='action.key',
+            @click='onClickAction(action.key)',
+          ) {{ action.label }}
+      SLToast.copy-msg-toast(v-model:show='isShowCopyMsg', :message='copyMsg')
+        template(#message)
+          .inline-flex.items-center(class='space-x-2.5')
+            SLIcon(:icon='isCopySuccess ? "check-circle" : "exclamation-circle"')
+            span {{ copyMsg }}
 </template>
 
 <script lang="ts">
 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',
   props: {
-    actions: {
-      type: Array as PropType<{
-        key: string,
-        label: string,
-      }[]>,
-      default: () => [{
-        key: 'saveAs',
-        label: '另存圖檔 (.png)',
-      }, {
-        key: 'copy',
-        label: '複製圖檔',
-      }],
+    target: {
+      type: HTMLElement,
+      default: () => null,
+    },
+    filename: {
+      type: String,
+      default: '',
+    },
+    dateRanges: {
+      type: Array as PropType<(IDateRange | null)[]>,
+      default: () => [],
+    },
+    padding: {
+      type: Number,
+      default: 0,
+    },
+    watermark: {
+      type: Boolean,
+      default: true,
+    },
+    customFilter: {
+      type: Function,
+      default: null,
+    },
+    customStyle: {
+      type: Object as PropType<Partial<CSSStyleDeclaration>>,
+      default: () => { },
     },
   },
   emits: ['action'],
   setup(props, { emit }) {
-    const { actions } = toRefs(props);
+    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);
-    const menuWrapperEl = shallowRef<HTMLDivElement | null>(null);
-    const menuEl = shallowRef<HTMLDivElement | null>(null);
+    const isShow = ref(false);
+    const contextMenuX = ref(0);
+    const contextMenuY = ref(0);
+    const isShowCopyMsg = ref(false);
+    const copyMsg = ref('');
+    const isCopySuccess = ref(false);
 
     let contextMenuSubscriber: Subscription | null = null;
+    let windowScrollSubscriber: Subscription | null = null;
+    let clearMsgTimeoutId: any = null;
 
-    function onClickAction(key: string) {
-      emit('action', key);
+    const contextMenuActions = computed(() => [
+      { key: 'saveAs', label: '另存圖檔(.png)' },
+      { key: 'copy', label: '複製圖檔' },
+    ]);
+    const contextMenuStyle = computed(() => ({
+      top: `${contextMenuY.value}px`,
+      left: `${contextMenuX.value}px`,
+    }));
+
+    async function onClickAction(key: string) {
       hide();
+      if (key === 'saveAs') {
+        const dataURL = await domToPngDataUrl(target.value, customFilter.value, customStyle.value, padding.value, dateRanges.value, watermark.value, WatermarkImage);
+        if (!dataURL) {
+          console.log("Can not generate data URL!");
+          return;
+        }
+        downloadURL(dataURL, `${filename.value}.png`);
+      } else if (key === 'copy') {
+        if (!navigator.clipboard?.write || !window.ClipboardItem) {
+          console.log("Can not copy image to clipboard!");
+          return;
+        }
+
+        const dataURL = await domToPngDataUrl(target.value, customFilter.value, customStyle.value, padding.value, dateRanges.value, watermark.value, WatermarkImage);
+        if (!dataURL) {
+          console.log("Can not generate data URL!");
+          return;
+        }
+
+        const blob = dataURLtoBlob(dataURL);
+        const data = [new window.ClipboardItem({ 'image/png': blob })];
+
+        try {
+          await navigator.clipboard.write(data);
+          copyMsg.value = '成功複製圖檔到剪貼簿';
+          isShowCopyMsg.value = true;
+          isCopySuccess.value = true;
+        } catch (e) {
+          copyMsg.value = '無法複製圖檔到剪貼簿';
+          isShowCopyMsg.value = true;
+          isCopySuccess.value = false;
+        }
+      }
     }
 
     function show() {
-      menuWrapperEl.value?.classList.remove('hidden');
+      isShow.value = true;
     }
 
     function hide() {
-      menuWrapperEl.value?.classList.add('hidden');
+      isShow.value = false;
     }
 
     function onRightClick(e: PointerEvent) {
-      console.log(menuEl.value, actions.value);
-      if (!menuEl.value || !actions.value.length) {
+      if (!el.value || !el.value.parentElement) {
         return;
       }
 
       e.preventDefault();
-      menuEl.value.setAttribute('style', `top: ${e.clientY}px; left: ${e.clientX}px;`);
+      contextMenuX.value = e.clientX;
+      contextMenuY.value = e.clientY;
       show();
     }
 
-    function onMouseDown() {
+    function onClickModal() {
       hide();
     }
 
+    function timeoutClearMessage() {
+      if (clearMsgTimeoutId) {
+        clearTimeout(clearMsgTimeoutId);
+      }
+      clearMsgTimeoutId = setTimeout(() => {
+        copyMsg.value = '';
+      }, 300);
+    }
+
+    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 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) {
+        subscribeScrollEvents();
+      } else {
+        unsubscribeScrollEvents();
+      }
+    });
+
+    watch(isShowCopyMsg, () => {
+      if (!isShowCopyMsg.value) {
+        timeoutClearMessage();
+      }
+    });
+
     onMounted(() => {
       if (el.value && el.value.parentElement) {
         contextMenuSubscriber = fromEvent(el.value.parentElement, 'contextmenu').subscribe((e) => {
@@ -83,27 +213,44 @@ export default defineComponent({
         contextMenuSubscriber.unsubscribe();
       }
       contextMenuSubscriber = null;
+
+      unsubscribeScroll();
     });
 
     return {
       el,
-      menuWrapperEl,
-      menuEl,
+      isShow,
+      copyMsg,
+      isCopySuccess,
+      isShowCopyMsg,
+      contextMenuActions,
+      contextMenuStyle,
       onClickAction,
-      onMouseDown,
+      onClickModal,
     };
   },
 });
 </script>
 
-<style lang="stylus">
+<style lang="stylus" scoped>
 .sl-context-menu-wrapper
-  @apply s('z-[9999]') fixed top-0 left-0 w-full h-full
+  @apply hidden
+
+.sl-context-menu-container
+  @apply fixed top-0 left-0 w-full h-full
+
+  &-modal
+    @apply absolute top-0 left-0 w-full h-full
+
+  .sl-context-menu
+    @apply absolute top-0 left-0 m-0 border border-primary-600 rounded overflow-hidden shadow-popup-sm
+
+    &-item
+      @apply block s('min-w-[160px]') p-3 bg-white text-base text-gray-2
+      @apply s('hover:bg-primary-100') s('hover:text-primary')
 
-.sl-context-menu
-  @apply absolute border border-primary-600 rounded overflow-hidden shadow-popup-sm
+.toast.copy-msg-toast
+  :deep(.toast-wrapper)
+    @apply s('bg-black/80') shadow-popup-sm
 
-  &-item
-    @apply block w-auto s('min-w-[160px]') p-3 bg-white text-base text-gray-2
-    @apply s('hover:bg-primary-100') s('hover:text-primary')
 </style>

package/package.json

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