@aochuang/client-sdk 1.0.310 → 1.0.312

package/common/context-menu/context-menu.vue

@@ -36,16 +36,114 @@
   </div>
 </template>
 <script>
-import UiContextMenuBox from './context-menu-box'
-import UiContextMenuGroup from './context-menu-group'
-import UiContextMenuItem from './context-menu-item'
+import UiContextMenuBox from './context-menu-box'
+import UiContextMenuGroup from './context-menu-group'
+import UiContextMenuItem from './context-menu-item'
+import { isMobile } from '@aochuang/common/utils/browse.js'
 
-import {
-  getOptimalCoordinate,
-  getWindowRect,
-  createRectByXY,
-  getElementRect
-} from './utils.js'
+import {
+  getOptimalCoordinate,
+  getWindowRect,
+  createRectByXY,
+  getElementRect
+} from './utils.js'
+
+let mobileContextMenuMountCount = 0
+let longPressTimer = null
+let longPressStart = null
+let longPressTriggered = false
+
+function clearLongPressTimer () {
+  clearTimeout(longPressTimer)
+  longPressTimer = null
+}
+
+function handleDocumentTouchStart (event) {
+  if (event.touches.length !== 1) {
+    clearLongPressTimer()
+    return
+  }
+  const touch = event.touches[0]
+  longPressStart = {
+    target: event.target,
+    clientX: touch.clientX,
+    clientY: touch.clientY
+  }
+  longPressTriggered = false
+  clearLongPressTimer()
+  longPressTimer = setTimeout(() => {
+    if (!longPressStart || !longPressStart.target) {
+      return
+    }
+    longPressTriggered = true
+    longPressStart.target.dispatchEvent(new MouseEvent('contextmenu', {
+      bubbles: true,
+      cancelable: true,
+      clientX: longPressStart.clientX,
+      clientY: longPressStart.clientY
+    }))
+  }, 500)
+}
+
+function handleDocumentTouchMove (event) {
+  const touch = event.touches[0]
+  if (!longPressStart || !touch) {
+    return
+  }
+  if (Math.abs(touch.clientX - longPressStart.clientX) > 10 || Math.abs(touch.clientY - longPressStart.clientY) > 10) {
+    clearLongPressTimer()
+    longPressStart = null
+  }
+}
+
+function handleDocumentTouchEnd (event) {
+  clearLongPressTimer()
+  longPressStart = null
+  if (longPressTriggered) {
+    event.preventDefault()
+    longPressTriggered = false
+  }
+}
+
+function handleDocumentTouchCancel () {
+  clearLongPressTimer()
+  longPressStart = null
+  longPressTriggered = false
+}
+
+function handleDocumentContextMenu (event) {
+  event.preventDefault()
+}
+
+function addMobileContextMenuListeners () {
+  mobileContextMenuMountCount++
+  if (mobileContextMenuMountCount !== 1) {
+    return
+  }
+  window.document.addEventListener('touchstart', handleDocumentTouchStart, { passive: true })
+  window.document.addEventListener('touchmove', handleDocumentTouchMove, { passive: true })
+  window.document.addEventListener('touchend', handleDocumentTouchEnd, { passive: false })
+  window.document.addEventListener('touchcancel', handleDocumentTouchCancel, { passive: true })
+  window.document.addEventListener('contextmenu', handleDocumentContextMenu)
+  window.document.documentElement.classList.add('ui-context-menu-mobile')
+}
+
+function removeMobileContextMenuListeners () {
+  mobileContextMenuMountCount--
+  if (mobileContextMenuMountCount > 0) {
+    return
+  }
+  mobileContextMenuMountCount = 0
+  clearLongPressTimer()
+  longPressStart = null
+  longPressTriggered = false
+  window.document.removeEventListener('touchstart', handleDocumentTouchStart)
+  window.document.removeEventListener('touchmove', handleDocumentTouchMove)
+  window.document.removeEventListener('touchend', handleDocumentTouchEnd)
+  window.document.removeEventListener('touchcancel', handleDocumentTouchCancel)
+  window.document.removeEventListener('contextmenu', handleDocumentContextMenu)
+  window.document.documentElement.classList.remove('ui-context-menu-mobile')
+}
 
 export default {
   name: 'UiContextMenu',
@@ -93,10 +191,12 @@ export default {
       return this.innerData.filter(v => !v.divided)
     }
   },
-  mounted () {
-    window.document.addEventListener('mousewheel', this.handleDocumentMouseWheel)
-    window.document.addEventListener('mousedown', this.handleDocumentMouseDown)
-    // window.document.addEventListener('contextmenu', this.handleDocumentContextMenu)
+  mounted () {
+    window.document.addEventListener('mousewheel', this.handleDocumentMouseWheel)
+    window.document.addEventListener('mousedown', this.handleDocumentMouseDown)
+    if (isMobile()) {
+      addMobileContextMenuListeners()
+    }
   },
   watch: {
     value: {
@@ -105,9 +205,9 @@ export default {
         val ? this.open(this.left, this.top) : this.close()
       }
     }
-  },
-  methods: {
-    handleGroupClick () {
+  },
+  methods: {
+    handleGroupClick () {
       this.close()
     },
     handleGroupItemClick ({ item }) {
@@ -175,16 +275,21 @@ export default {
       this.activeSubItem = null
       this.$emit('input', false)
     }
-  },
-  beforeUnmount () {
-    window.document.removeEventListener('mousewheel', this.handleDocumentMouseWheel)
-    window.document.removeEventListener('mousedown', this.handleDocumentMouseDown)
-    // window.document.removeEventListener('contextmenu', this.handleDocumentContextMenu)
-  }
-}
+  },
+  beforeDestroy () {
+    window.document.removeEventListener('mousewheel', this.handleDocumentMouseWheel)
+    window.document.removeEventListener('mousedown', this.handleDocumentMouseDown)
+    if (isMobile()) {
+      removeMobileContextMenuListeners()
+    }
+  }
+}
 </script>
-<style>
-.ui-context-menu * {
+<style>
+.ui-context-menu-mobile {
+  -webkit-touch-callout: none;
+}
+.ui-context-menu * {
   box-sizing: content-box;
 }
 .ui-context-menu{

package/components/chat-editor/chat-editor-button/chat-editor-button.vue

@@ -1,5 +1,5 @@
 <template>
-    <ui-tooltip :disabled="!tips" :content="tips">
+    <ui-tooltip :disabled="!tips || isMobile" :content="tips">
         <div class="sdk-chat-editor-button" :class="{'is-active': active}" @click.stop="handleClick">
             <template v-if="loading">
                 <ui-loading size="mini"></ui-loading>
@@ -18,6 +18,7 @@
 </template>
 <script>
 import { Tooltip as UiTooltip, Loading as UiLoading } from '@aochuang/common/components'
+import { isMobile } from '@aochuang/common/utils/browse.js'
 
 export default {
     name: 'SdkChatEditorButton',
@@ -25,6 +26,11 @@ export default {
         UiLoading,
         UiTooltip
     },
+    data () {
+        return {
+            isMobile: isMobile()
+        }
+    },
     props: {
         tips: {
             type: String
@@ -75,4 +81,4 @@ export default {
     height: 100%;
     vertical-align: top;
 }
-</style>
+</style>

package/components/chat-editor/chat-editor-suggestions/chat-editor-suggestions.vue

@@ -1,6 +1,7 @@
 <template>
     <div 
         class="sdk-chat-editor-suggestions"
+        :class="{'is-mobile': isMobile}"
         v-if="isShow"
     >
         <div class="sdk-chat-editor-suggestions__head">
@@ -49,6 +50,7 @@
 </template>
 <script>
 import { Loading as UiLoading } from '@aochuang/common/components'
+import { isMobile } from '@aochuang/common/utils/browse.js'
 
 export default {
     name: 'SdkChatEditorSuggestions',
@@ -73,7 +75,8 @@ export default {
     data () {
         return {
             closed: false,
-            focusId: null
+            focusId: null,
+            isMobile: isMobile()
         }
     },
     computed: {
@@ -227,6 +230,18 @@ export default {
     display: flex;
     flex-direction: column;
 }
+.sdk-chat-editor-suggestions.is-mobile {
+    box-sizing: border-box;
+    width: 100%;
+    min-width: 0;
+    max-width: none;
+}
+.sdk-chat-editor-suggestions.is-mobile .sdk-chat-editor-suggestions__body {
+    overflow-x: hidden;
+}
+.sdk-chat-editor-suggestions.is-mobile .sdk-chat-editor-suggestions__foot {
+    flex-wrap: wrap;
+}
 .sdk-chat-editor-suggestions__head{
     line-height: 24px;
     padding: 4px 12px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aochuang/client-sdk",
-  "version": "1.0.310",
+  "version": "1.0.312",
   "description": "",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"