@shijiu/jsview-vue-samples 2.3.0 → 2.3.728-alpha.0

package/MetroWidgetDemos/ListExpand/ExpandItem.vue

@@ -0,0 +1,375 @@
+<!-- 通用item -->
+<script setup>
+import { JsvMarquee, getKeyFramesGroup, useFocusHub, EdgeDirection } from 'jsview'
+import { shallowRef, ref, onMounted, nextTick, computed } from 'vue'
+import WidgetListHandler from './components/WidgetListHandler.vue'
+import ExpandItem1 from './ExpandItem1.vue'
+
+const props = defineProps({
+    data: Object,
+    name: {
+        type: String,
+        default: 'code',
+    },
+    onAction: Object,
+    query: Object,
+    onClick: Function,
+    onFocus: Function,
+    onBlur: Function,
+    onItemEdge: Function,
+    foldEvent: Function,
+})
+
+const focused = shallowRef(false)
+const gazed = shallowRef(false)
+
+// item样式
+const itemStyle = {
+    ...props.data.itemStyle,
+}
+
+// 图片样式
+const imgStyle = {
+    ...props.data.imgStyle,
+}
+
+// 图标样式
+const iconStyle = {
+    ...props.data.iconStyle,
+}
+
+// 文本样式
+const textStyle = {
+    ...props.data.textStyle,
+    width: props.data.textStyle.padding
+        ? props.data.textStyle.width - (props.data.textStyle.padding.left || 0) - (props.data.textStyle.padding.right || 0)
+        : props.data.textStyle.width,
+    height: props.data.textStyle.padding
+        ? props.data.textStyle.height - (props.data.textStyle.padding.top || 0) - (props.data.textStyle.padding.bottom || 0)
+        : props.data.textStyle.height,
+    left: (props.data.textStyle.left || 0) + (props.data.textStyle.padding?.left || 0),
+    top: (props.data.textStyle.top || 0) + (props.data.textStyle.padding?.top || 0),
+    whiteSpace: 'nowrap',
+    textOverflow: 'ellipsis',
+    overflow: 'hidden'
+}
+
+// 焦点样式
+const focusStyle = {
+    ...itemStyle,
+    ...props.data.focusStyle,
+}
+
+// 焦点图片样式
+const focusImgStyle = {
+    ...imgStyle,
+    ...props.data.focusImgStyle,
+}
+
+// 焦点图标样式
+const focusIconStyle = {
+    ...iconStyle,
+    ...props.data.focusIconStyle,
+}
+
+// 焦点文本样式
+const focusTextStyle = {
+    ...textStyle,
+    ...props.data.focusTextStyle,
+}
+
+// 失焦样式
+const blurStyle = {
+    ...itemStyle,
+    ...props.data.blurStyle,
+}
+
+// 失焦图片样式
+const blurImgStyle = {
+    ...imgStyle,
+    ...props.data.blurImgStyle,
+}
+
+// 失焦图标样式
+const blurIconStyle = {
+    ...iconStyle,
+    ...props.data.blurIconStyle,
+}
+
+// 失焦文本样式
+const blurTextStyle = {
+    ...textStyle,
+    ...props.data.blurTextStyle,
+}
+
+/**
+ * 关键代码
+ * 焦点快速往复移动时, 复用一个子widget会导致slideToDiv焦点位置的偏移, 因此每次缩放时都创建新的widget
+ */
+const duration = 200
+const focusHub = useFocusHub()
+let folded = ref(true)
+const styleShell = getKeyFramesGroup()
+const itemBoxHeight = props.data.itemStyle.height
+const childrenHeight = ref(0)
+const expandChildrenHeight = computed(() => {
+    const totalHeight = props.data.expandChildren.length * itemBoxHeight + childrenHeight.value
+    return totalHeight
+})
+const widgetRef = shallowRef(null)
+const widgetTop = ref(0)
+let animToken = 1
+const clipAnimStr = ref('')
+const slideAnimStr = ref('')
+const animationCache = {}
+
+const getClipAnimation = (from, to, anchor) => {
+    animToken++
+    const name = 'foldableItemClipAnim' + animToken
+    if (animationCache.hasOwnProperty(name)) {
+        styleShell.removeRule(name)
+        delete animationCache[name]
+    }
+    const clipAnimStr = `@keyframes ${name} { from { height: ${from}; } to { height: ${to}; } }`
+    animationCache[name] = clipAnimStr
+    styleShell.insertRule(clipAnimStr)
+
+    //平移动画
+    const anchorPosition = Math.round((to - from) * anchor)
+    const slideName = 'foldableItemSlideAnim' + animToken
+    if (animationCache.hasOwnProperty(slideName)) {
+        styleShell.removeRule(slideName)
+        delete animationCache[slideName]
+    }
+    const slideAnimStr = `@keyframes ${slideName} { from { transform: translate3d(0,${-anchorPosition},0); } to { transform: translate3d(0,0,0); } }`
+    animationCache[slideName] = slideAnimStr
+    styleShell.insertRule(slideAnimStr)
+
+    return {
+        clip: `${name} ${duration / 1000}s`,
+        slide: `${slideName} ${duration / 1000}s`,
+    }
+}
+
+const getAnchor = (index) => {
+    let anchor = 0
+    const l = props.data.expandChildren
+    if (index <= 0) {
+        anchor = 0
+    } else if (index > l.length - 1) {
+        anchor = 1
+    } else {
+        let focusMiddle = 0
+        for (let i = 0; i <= index - 1; ++i) {
+            focusMiddle += l[i].height
+        }
+        focusMiddle += l[index].height / 2
+        const maxHeight = expandChildrenHeight.value + itemBoxHeight
+        const scaleRate = maxHeight / itemBoxHeight
+        const targetPercent = focusMiddle / maxHeight // 居中目标位置的百分比
+        /**
+         * anchor计算说明
+         * 考虑[0,1]的线段, 以a(0 <= a <= 1)为锚点, 放大n倍(n > 1)
+         * 坐标的映射关系为 x -> n(x - a) + a
+         * 此处我们想要的是目标焦点的中线对齐0.5, 即targetPercent放大后的位置是0.5
+         * 所以方程为 scaleRate * (targetPercent - anchor) + anchor = 0.5
+         */
+        anchor = (scaleRate * targetPercent - 0.5) / (scaleRate - 1)
+    }
+    return anchor
+}
+
+const foldSubTab = () => {
+    if (!folded.value) {
+        updateWidgetHeight(itemBoxHeight, function () {
+            folded.value = true
+        })
+        focusHub.returnFocusToParent()
+    }
+    props.foldEvent()
+}
+
+const expand = (type) => {
+    if (folded.value && props.data.expandChildren.length > 0) {
+        widgetTop.value = itemBoxHeight
+        /**
+         * 动画未结束时, widgetTop不为0, 此时又获焦那一帧同时设置的widgetTop值未同步到div, slideToDiv获取的就不是展开后item的正确位置
+         */
+        folded.value = false
+        updateWidgetHeight(expandChildrenHeight.value + itemBoxHeight)
+        if (!type) {
+            nextTick(() => {
+                widgetRef.value.setFocusId(0)
+                focusHub.setFocus(props.name + '_' + props.query.index)
+            })
+        }
+    }
+    props.foldEvent()
+}
+
+//在回调中更改自身状态
+const onFocus = () => {
+    focused.value = true
+    if (!folded.value) {
+        focusHub.setFocus(props.name + '_' + props.query.index)
+    } else {
+        if (props.onFocus) {
+            props.onFocus(props.data, props.query)
+        }
+    }
+}
+
+const onBlur = () => {
+    focused.value = false
+    if (props.onBlur) {
+        props.onBlur(props.data, props.query)
+    }
+}
+
+const onClick = () => {
+    if (folded.value) {
+        expand()
+    } else {
+        // foldSubTab()
+    }
+    if (props.onClick) {
+        props.onClick(props.data, props.query)
+    }
+}
+
+// 无论widget是否获焦 item获焦
+const onGaze = () => {
+}
+
+// 无论widget是否获焦 item失焦
+const onIgnore = () => {
+    gazed.value = false
+}
+
+// 子列表获焦
+const onChildFocus = (data, query) => {
+    if (props.onFocus) {
+        props.onFocus(data, query)
+    }
+}
+
+// 子列表按键
+const childKeyDown = (e) => {
+    if (e.keyCode === 10000 || e.keyCode === 8 || e.keyCode === 27) {
+        foldSubTab()
+        return true
+    }
+}
+
+const onChildEdge = (edgeInfo) => {
+    if (edgeInfo.direction === EdgeDirection.top) {
+        foldSubTab()
+    } else if (edgeInfo.direction === EdgeDirection.bottom) {
+        foldSubTab()
+        props.onItemEdge(edgeInfo)
+    } else {
+        props.onItemEdge(edgeInfo)
+    }
+}
+
+onMounted(() => {
+})
+// 子列表展开高度更新
+const updateExpandHeight = (h) => {
+    childrenHeight.value = h
+    updateWidgetHeight(expandChildrenHeight.value + itemBoxHeight)
+    props.foldEvent()
+}
+
+let preHeight = itemBoxHeight;
+const updateWidgetHeight = (h, callback) => {
+    const anchor = getAnchor(0)
+    //创建动画
+    const anim = getClipAnimation(preHeight, h, anchor)
+    preHeight = h;
+    clipAnimStr.value = anim.clip
+    slideAnimStr.value = anim.slide
+    props.query.updateItemSize(
+        props.query.index,
+        {
+            width: props.data.itemStyle.width,
+            height: h,
+        },
+        {
+            anchor,
+            duration: duration,
+            onEnd: () => {
+                callback && callback()
+                console.log('unfold anim end.')
+            },
+        }
+    )
+}
+
+// 注册回调
+props.onAction.register('onFocus', onFocus)
+props.onAction.register('onBlur', onBlur)
+props.onAction.register('onClick', onClick)
+props.onAction.register('onGaze', onGaze)
+props.onAction.register('onIgnore', onIgnore)
+</script>
+
+<template>
+    <div v-if="folded" :style="focused ? focusStyle : gazed ? blurStyle : itemStyle">
+        <div v-if="imgStyle" :style="focused ? focusImgStyle : gazed ? blurImgStyle : imgStyle"></div>
+        <div v-if="iconStyle" :style="iconStyle"></div>
+        <div v-if="data.data.textVisible">
+            <jsv-marquee v-if="focused" :style="focusTextStyle" :text="data.data.name"></jsv-marquee>
+            <div v-else :style="gazed ? blurTextStyle : textStyle">{{ data.data?.name }}</div>
+        </div>
+    </div>
+    <div
+        v-else
+        :style="{
+            width: data.itemStyle.width,
+            height: expandChildrenHeight + itemBoxHeight,
+            overflow: 'hidden',
+            animation: clipAnimStr,
+        }"
+    >
+        <div :style="blurStyle">
+            <div v-if="imgStyle" :style="blurImgStyle"></div>
+            <div v-if="iconStyle" :style="blurIconStyle"></div>
+            <div v-if="data.data.textVisible">
+                <div :style="blurTextStyle">{{ data.data?.name }}</div>
+            </div>
+        </div>
+        <jsv-focus-block
+            :style="{
+                top: widgetTop,
+                width: data.itemStyle.width,
+                height: expandChildrenHeight,
+                backgroundColor: 'rgba(0, 0, 0, .2)',
+                borderRadius: 20,
+                animation: slideAnimStr,
+            }"
+            :onKeyDown="childKeyDown"
+        >
+            <WidgetListHandler
+                ref="widgetRef"
+                :layout="{
+                    left: 0,
+                    top: 0,
+                    width: data.itemStyle.width,
+                    height: expandChildrenHeight,
+                }"
+                :name="props.name + '_' + props.query.index"
+                :data="data.expandChildren"
+                :onWidgetFocus="onChildFocus"
+                :onEdge="onChildEdge"
+                :fullDisplayMode="true"
+            >
+                <template #item="slotProps">
+                    <ExpandItem1 v-bind="slotProps" :name="props.name + '_' + props.query.index" :foldEvent="props.foldEvent" :onExpandHeight="updateExpandHeight" />
+                </template>
+            </WidgetListHandler>
+        </jsv-focus-block>
+    </div>
+</template>
+
+<style scoped></style>