@aochuang/client-sdk 1.0.309 → 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/components/chat-panel/chat-panel-box.vue

@@ -35,7 +35,7 @@
         <div class="sdk-chat-panel-box__foot-row" v-if="inner_foot_vnode">
           <component :is="inner_foot_vnode"></component>
         </div>
-        <div class="sdk-chat-panel-box__foot-row" v-if="$slots.foot">
+        <div class="sdk-chat-panel-box__foot-row" v-if="$slots.foot || $scopedSlots.foot">
           <slot name="foot"></slot>
         </div>
         <div class="sdk-chat-panel-box__foot-row is-last">

package/components/chat-panel/chat-panel-chat.vue

@@ -105,7 +105,7 @@ export default {
 </script>
 <style lang="less">
 .sdk-chat-panel-chat{
-  padding: 3px 12px;
+  padding: 0 12px;
   transition: background-color .25s;
   display: flex;
   flex-direction: row;

package/components/chat-panel/chat-panel-chats.vue

@@ -18,31 +18,35 @@
           @range="handleIncrementRangeMore"
         ></chat-panel-increment>
         <template v-if="dataType === 'array'">
-          <chat-panel-chat
+          <template
             v-for="item in data"
-            :key="'chat_' + item[keyField]"
-            :dir="handleisSenderMethod(item) ? 'right' : 'left'"
-            :class="handleChatClassMethod(item)"
-            :id="item[keyField]"
-            :item="item"
-            :render-control="renderControl"
-            :fetch-user-method="fetchUserMethod"
-            :ref="'chat_' + item[keyField]"
-            :show-context-btn="showContextBtn"
-            :msg-time-field="msgTimeField"
-            @view-context="handleViewContextClick(item)"
-            @contextmenu="handleChatContextMenu(item, $event)"
           >
-            <template slot="chat" slot-scope="scope">
-              <slot name="chat" v-bind="scope"></slot>
-            </template>
-            <template slot-scope="scope" slot="chat-foot">
-              <slot name="chat-foot" v-bind="scope"></slot>
-            </template>
-            <template slot-scope="scope" slot="chat-append">
-              <slot name="chat-append" v-bind="scope"></slot>
-            </template>
-          </chat-panel-chat>
+            <slot name="chat-before" :item="item"></slot>
+            <chat-panel-chat
+              :key="'chat_' + item[keyField]"
+              :dir="handleisSenderMethod(item) ? 'right' : 'left'"
+              :class="handleChatClassMethod(item)"
+              :id="item[keyField]"
+              :item="item"
+              :render-control="renderControl"
+              :fetch-user-method="fetchUserMethod"
+              :ref="'chat_' + item[keyField]"
+              :show-context-btn="showContextBtn"
+              :msg-time-field="msgTimeField"
+              @view-context="handleViewContextClick(item)"
+              @contextmenu="handleChatContextMenu(item, $event)"
+            >
+              <template slot="chat" slot-scope="scope">
+                <slot name="chat" v-bind="scope"></slot>
+              </template>
+              <template slot-scope="scope" slot="chat-foot">
+                <slot name="chat-foot" v-bind="scope"></slot>
+              </template>
+              <template slot-scope="scope" slot="chat-append">
+                <slot name="chat-append" v-bind="scope"></slot>
+              </template>
+            </chat-panel-chat>
+          </template>
         </template>
         <template v-else>
           <template v-for="day in data">
@@ -52,6 +56,7 @@
               <template
                 v-for="item in milliseconds"
               >
+                <slot name="chat-before" :item="item"></slot>
                 <chat-panel-chat
                   :key="'chat_' + item[keyField]"
                   :dir="handleisSenderMethod(item) ? 'right' : 'left'"

package/components/chat-panel/chat-panel.vue

@@ -31,6 +31,9 @@
           @view-context="handleChatsViewContext"
           @chat-contextmenu="handleChatContext"
         >
+          <template slot="chat-before" slot-scope="scope">
+            <slot name="chat-before" v-bind="scope"></slot>
+          </template>
           <template slot="chat" slot-scope="scope">
             <slot name="chat" v-bind="scope"></slot>
           </template>

package/components/wechat-chat-panel/chat-panel.vue

@@ -14,14 +14,16 @@
     <template slot="filter">
       <slot name="filter"></slot>
     </template>
+    <template slot="chat-before" slot-scope="{ item }">
+      <div
+        v-if="handleShowTimeDivider(item)"
+        class="sdk-wechat-chat-panel__time"
+      >
+        {{ formatMessageTime(parseMessageTime(item.wechatTime)) }}
+      </div>
+    </template>
     <template slot="chat" slot-scope="{ item, dir }">
       <div class="sdk-wechat-chat-panel__item">
-        <div
-          v-if="handleShowTimeDivider(item)"
-          class="sdk-wechat-chat-panel__time"
-        >
-          {{ formatMessageTime(parseMessageTime(item.wechatTime)) }}
-        </div>
         <chat-panel-item
           :item="item"
           :dir="dir"

package/package.json

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