@shijiu/jsview-vue-samples 2.2.426-test.0 → 2.3.151-test.0

package/DemoForOperator/Stretch/App.vue

@@ -0,0 +1,103 @@
+<template>
+  <div
+    :style="{
+      width: 1280,
+      height: 720,
+      backgroundColor: '#007788',
+    }"
+  ></div>
+  <div
+    :style="{
+      left: 300,
+      top: 100,
+    }"
+  >
+    <Stretch
+      name="stretch"
+      :itemSizeInfo="itemSizeInfo"
+      :datas="datas"
+      :layout="layout"
+      :onItemClick="onItemClick"
+      :onEdge="onEdge"
+      :duration="0.3"
+      :initLargeIndex="0"
+    >
+      <template #itemLarge>
+        <div
+          :style="{
+            width: 320,
+            height: 180,
+            backgroundColor: '#0F0',
+            fontSize: 30,
+            lineHeight: 180,
+          }"
+        >
+          测试文字测试文字测试文字
+        </div></template
+      >
+      <template #itemSmall>
+        <div
+          :style="{
+            width: 100,
+            height: 180,
+            backgroundColor: '#F00',
+            fontSize: 30,
+            lineHeight: 180,
+          }"
+        >
+          测试文字
+        </div>
+      </template>
+      <template #itemLeftEdge>
+        <div
+          :style="{
+            width: 10,
+            height: 10,
+            backgroundColor: '#00F',
+          }"
+        ></div>
+      </template>
+      <template #itemRightEdge>
+        <div
+          :style="{
+            left: 90,
+            width: 10,
+            height: 10,
+            backgroundColor: '#00F',
+          }"
+        ></div>
+      </template>
+    </Stretch>
+  </div>
+</template>
+
+<script setup>
+import Stretch from "./Stretch/Stretch.vue";
+import { useFocusHub } from "jsview";
+import { onMounted } from "vue";
+
+const focusHub = useFocusHub();
+const itemSizeInfo = {
+  smallWidth: 100,
+  largeWidth: 320,
+  marginRight: 10,
+  height: 180,
+};
+const datas = [{}, {}, {}];
+const layout = {
+  width: 540,
+  height: 180,
+};
+
+const onItemClick = (index) => {
+  console.log("onItemClick", index);
+};
+
+const onEdge = (edgeInfo) => {
+  console.log("onEdge");
+};
+
+onMounted(() => {
+  focusHub.setFocus("stretch");
+});
+</script>

package/DemoForOperator/Stretch/Stretch/Item.vue

@@ -0,0 +1,192 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2023-03-08 14:52:17
+ * @Description: file content
+-->
+<script>
+let animToken = 0;
+</script>
+<script setup>
+import { ref, watch, inject, computed, onBeforeUnmount } from "vue";
+import { getKeyFramesGroup } from "jsview";
+
+const props = defineProps({
+  data: Object,
+  onAction: Object,
+  query: Object,
+  size: {
+    type: Object,
+  },
+  largeSize: {
+    type: Object,
+  },
+  duration: {
+    type: Number,
+    default: 200,
+  },
+  resizeDelay: {
+    type: Number,
+    default: 0,
+  },
+  onItemClick: {
+    type: Function,
+  },
+});
+
+const focused = ref(false);
+const largeItemIndex = inject("largeItemIndex");
+
+const isLarge = ref(props.query.index == largeItemIndex.value);
+const showLarge = ref(isLarge.value);
+const width = ref(isLarge.value ? props.largeSize.width : props.size.width);
+const height = ref(isLarge.value ? props.largeSize.height : props.size.height);
+const duration = props.duration;
+const transitionStr = `left ${duration / 1000}s, width ${duration / 1000}s`;
+const animInfo = {
+  anchor: 0.5,
+  duration: duration,
+  onEnd: () => {
+    console.log("resize end", props.query.index);
+  },
+};
+
+const animation = ref(null);
+const scaleupAnim = `stretch_item_scale_up_keep_center_${animToken++}`;
+const scaledownAnim = `stretch_item_scale_down_keep_center_${animToken++}`;
+
+const xOffset = (props.size.width - props.largeSize.width) / 2;
+const yOffset = (props.size.height - props.largeSize.height) / 2;
+const scaleupBody = `@keyframes ${scaleupAnim} { from {transform: translate3d(${xOffset}, ${yOffset}, 0);} to {transform: translate3d(0, 0, 0);} }`;
+const scaledownBody = `@keyframes ${scaledownAnim} { from {transform: translate3d(0, 0, 0);} to {transform: translate3d(${xOffset}, ${yOffset}, 0);}}`;
+
+const styleSheets = getKeyFramesGroup();
+styleSheets.insertRule(scaleupBody);
+styleSheets.insertRule(scaledownBody);
+function onAnimEnd() {
+  animation.value = null;
+}
+
+const rightEdgeTransition = `left ${duration / 1000}s linear`;
+const rightSlotPosition = computed(() => {
+  return {
+    top: 0,
+    left: isLarge.value ? props.largeSize.width - props.size.width : 0,
+  };
+});
+watch(
+  () => largeItemIndex.value,
+  (newV) => {
+    if (newV == props.query.index) {
+      if (!isLarge.value) {
+        isLarge.value = true;
+        showLarge.value = true;
+        animation.value = `${scaleupAnim} ${duration / 1000}s linear`;
+
+        width.value = props.largeSize.width;
+        height.value = props.largeSize.height;
+
+        props.query.updateItemSize(
+          props.query.index,
+          {
+            width: width.value,
+            height: height.value,
+          },
+          animInfo
+        );
+      }
+    } else {
+      if (isLarge.value) {
+        isLarge.value = false;
+        width.value = props.size.width;
+        height.value = props.size.height;
+        animation.value = `${scaledownAnim} ${duration / 1000}s linear`;
+
+        props.query.updateItemSize(
+          props.query.index,
+          {
+            width: width.value,
+            height: height.value,
+          },
+          animInfo
+        );
+      }
+    }
+  }
+);
+
+function onTransitionDone() {
+  if (!isLarge.value) {
+    showLarge.value = false;
+  }
+}
+
+let timeoutHandler = -1;
+const onFocus = () => {
+  focused.value = true;
+  timeoutHandler = setTimeout(() => {
+    largeItemIndex.value = props.query.index;
+  }, props.resizeDelay);
+};
+
+const onBlur = () => {
+  focused.value = false;
+  clearTimeout(timeoutHandler);
+  timeoutHandler = -1;
+};
+
+const onClick = () => {
+  props.onItemClick(props.query.index);
+};
+
+props.onAction.register("onFocus", onFocus);
+props.onAction.register("onBlur", onBlur);
+props.onAction.register("onClick", onClick);
+
+onBeforeUnmount(() => {
+  styleSheets.removeRule(scaleupAnim);
+  styleSheets.removeRule(scaledownAnim);
+});
+</script>
+
+<template>
+  <div
+    :style="{
+      width: width,
+      height: height,
+      transition: transitionStr,
+      overflow: 'hidden',
+    }"
+    @transitionend="onTransitionDone"
+  >
+    <div
+      :style="{
+        width: width,
+        height: height,
+        animation: animation,
+      }"
+      @animationend="onAnimEnd"
+    >
+      <div v-if="showLarge">
+        <slot name="large"></slot>
+      </div>
+      <div v-else>
+        <slot name="small"></slot>
+      </div>
+    </div>
+  </div>
+  <div :style="{ width: size.width, hieght: size.height }">
+    <slot name="left"></slot>
+  </div>
+
+  <div
+    :style="{
+      left: rightSlotPosition.left,
+      top: rightSlotPosition.top,
+      width: size.width,
+      hieght: size.height,
+      transition: rightEdgeTransition,
+    }"
+  >
+    <slot name="right"></slot>
+  </div>
+</template>

package/DemoForOperator/Stretch/Stretch/Stretch.vue

@@ -0,0 +1,218 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2023-03-08 14:52:08
+ * @Description: file content
+-->
+<script setup>
+import {
+  ListWidget,
+  HORIZONTAL,
+  useFocusHub,
+  FixPositionSlide,
+  EdgeDirection,
+} from "jsview";
+import Item from "./Item.vue";
+import { ref, provide, onMounted } from "vue";
+
+const props = defineProps({
+  /**
+   * 组件名称标识
+   * @type {string}
+   */
+  name: {
+    type: String,
+    required: true,
+  },
+  /**
+   * 元素尺寸配置对象
+   * @type {Object}
+   * @property {number} smallWidth - 小元素宽度
+   * @property {number} largeWidth - 大元素宽度
+   * @property {number} height - 元素高度
+   * @property {number} [marginRight=10] - 元素右侧间距
+   */
+  itemSizeInfo: {
+    type: Object,
+    required: true,
+  },
+  /**
+   * 数据源数组
+   * @type {Array<Object>}
+   */
+  datas: {
+    type: Array,
+    required: true,
+  },
+  /**
+   * 布局配置对象
+   * @type {Object}
+   * @property {number} width - 容器宽度
+   * @property {number} height - 容器高度
+   * @property {number} left - 左侧位置
+   * @property {number} top - 顶部位置
+   */
+  layout: {
+    type: Object,
+    required: true,
+  },
+  /**
+   * 初始大元素索引
+   * @type {number}
+   * @default 0
+   */
+  initLargeIndex: {
+    type: Number,
+    default: 0,
+  },
+  /**
+   * 获取焦点时的回调函数
+   * @type {Function}
+   */
+  onFocus: {
+    type: Function,
+  },
+  /**
+   * 失去焦点时的回调函数
+   * @type {Function}
+   */
+  onBlur: {
+    type: Function,
+  },
+  /**
+   * 到达边缘时的回调函数
+   * @type {Function}
+   * @param {Object} edgeInfo - 边缘信息对象
+   */
+  onEdge: {
+    type: Function,
+  },
+  /**
+   * 元素点击事件回调
+   * @type {Function}
+   * @param {Object} itemData - 被点击元素的数据
+   */
+  onItemClick: {
+    type: Function,
+  },
+  /**
+   * 动画持续时间（单位：秒）
+   * @type {number}
+   * @default 0.2
+   */
+  duration: {
+    type: Number,
+    default: 0.2,
+  },
+});
+
+//一大多小
+const itemMargin = props.itemSizeInfo.marginRight ?? 10;
+const itemWidthSum =
+  props.itemSizeInfo.largeWidth +
+  props.itemSizeInfo.smallWidth * (props.datas.length - 1) +
+  (props.datas.length - 1) * itemMargin;
+if (props.layout.width < itemWidthSum) {
+  console.error(
+    "Stretch: sum of item size must be smaller than component layout width."
+  );
+}
+if (props.layout.height < props.itemSizeInfo.height) {
+  console.error(
+    "Stretch: item height must be smaller than component layout height."
+  );
+}
+const padding = {
+  left: (props.layout.width - itemWidthSum) / 2,
+  right: (props.layout.width - itemWidthSum) / 2,
+  top: (props.layout.height - props.itemSizeInfo.height) / 2,
+  bottom: (props.layout.height - props.itemSizeInfo.height) / 2,
+};
+
+const fixPositionSlide = new FixPositionSlide();
+const largeItemIndex = ref(props.initLargeIndex);
+provide("largeItemIndex", largeItemIndex);
+const provideData = () => {
+  const data = [];
+  for (let i = 0; i < props.datas.length; ++i) {
+    data.push({
+      width:
+        i == props.initLargeIndex
+          ? props.itemSizeInfo.largeWidth
+          : props.itemSizeInfo.smallWidth,
+      height: props.itemSizeInfo.height,
+      marginRight: props.itemSizeInfo.marginRight,
+      data: props.datas[i],
+    });
+  }
+  return data;
+};
+
+const measures = (data) => {
+  return {
+    width: data.width,
+    height: data.height,
+    marginRight: data.marginRight,
+  };
+};
+
+const _onEdge = (edgeInfo) => {
+  props.onEdge?.(edgeInfo);
+};
+
+onMounted(() => {});
+</script>
+
+<template>
+  <div>
+    <list-widget
+      :name="name"
+      :left="layout.left"
+      :top="layout.top"
+      :width="layout.width"
+      :height="layout.height"
+      :provideData="provideData"
+      :direction="HORIZONTAL"
+      :initFocusId="props.initLargeIndex"
+      :slideSetting="fixPositionSlide"
+      :measures="measures"
+      :padding="padding"
+      :onEdge="_onEdge"
+      :disableClip="true"
+    >
+      <template #renderItem="{ data, onAction, query }">
+        <item
+          :data="data"
+          :onAction="onAction"
+          :query="query"
+          :size="{
+            width: itemSizeInfo.smallWidth,
+            height: itemSizeInfo.height,
+          }"
+          :largeSize="{
+            width: itemSizeInfo.largeWidth,
+            height: itemSizeInfo.height,
+          }"
+          :duration="duration * 1000"
+          :onItemClick="onItemClick"
+        >
+          <template #small>
+            <slot name="itemSmall" :data="data.data"></slot>
+          </template>
+          <template #large>
+            <slot name="itemLarge" :data="data.data"></slot>
+          </template>
+          <template #right="{ width }">
+            <slot
+              name="itemRightEdge"
+              :itemSmallWidth="width"
+              :data="data.data"
+            ></slot>
+          </template>
+          <template #left>
+            <slot name="itemLeftEdge" :data="data.data"></slot>
+          </template>
+        </item>
+      </template>
+    </list-widget>
+  </div>
+</template>

package/DemoForOperator/Swiper/App.vue

@@ -0,0 +1,101 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2023-02-10 14:45:39
+ * @Description: file content
+-->
+
+<script setup>
+import { JsvSwiper2, useFocusHub, EdgeDirection } from "jsview";
+import { onMounted, ref } from "vue";
+import Item from "./Item.vue";
+
+const focusHub = useFocusHub();
+const imgSrcList = [
+  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/Swiper/App/element_228543_img_20230610184253.png",
+  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/Swiper/App/element_228544_img_20230610184145.png",
+  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/Swiper/App/element_228545_img_20230610184110.png",
+  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/Swiper/App/element_228542_img_20230610184253.png",
+];
+let itemSize = {
+  width: 400,
+  height: 600,
+};
+let data = [];
+for (let i = 0; i < 10; i++) {
+  data.push({
+    width: itemSize.width,
+    height: itemSize.height,
+    index: i,
+    src: imgSrcList[i % imgSrcList.length],
+  });
+}
+
+const currentIndex = ref(0);
+const swiper1 = {
+  onChange: (currentId) => {
+    currentIndex.value = currentId;
+    console.log("swiper1: onChange", currentId);
+  },
+  onClick: (currentId) => {
+    console.log("swiper1: onClick", currentId);
+  },
+  onEdge: (info) => {},
+};
+
+onMounted(() => {
+  focusHub.setFocus("mySwiper1");
+});
+const duration = 600;
+</script>
+
+<template>
+  <div
+    :style="{ width: 1280, height: 720, backgroundColor: '#000000cc' }"
+  ></div>
+  <div
+    :style="{
+      width: 1280,
+      height: 100,
+      fontSize: 30,
+      textAlign: 'center',
+      lineHeight: 100,
+      color: '#ffffff',
+    }"
+  >
+    左右键切换轮播图显示海报
+  </div>
+  <div :style="{ left: (1280 - 700) / 2, top: 100 }">
+    <jsv-swiper2
+      name="mySwiper1"
+      ref="mySwiper1"
+      :totalFrame="data.length"
+      :layoutInfo="{
+        width: 700,
+        height: 600,
+      }"
+      :itemSize="itemSize"
+      :animation="{
+        duration: duration,
+        easing: 'jsv-ease(0.4, 0.8, 1.2)',
+      }"
+      :autoplayInterval="1000"
+      :onChange="swiper1.onChange"
+      :onClick="swiper1.onClick"
+      :onEdge="swiper1.onEdge"
+      :itemGap="10"
+    >
+      <template #itemView="{ dataIndex, focused, distanceToCenter }">
+        <item
+          :data="data[dataIndex]"
+          :index="dataIndex"
+          :currentIndex="currentIndex"
+          :focused="focused"
+          :borderRadius="40"
+          :collapseWidth="140"
+          :duration="duration"
+          :distanceToCenter="distanceToCenter"
+        />
+      </template>
+    </jsv-swiper2>
+  </div>
+</template>

package/DemoForOperator/Swiper/Item.vue

@@ -0,0 +1,56 @@
+<template>
+  <div
+    :style="{
+      width: data.width,
+      height: data.height,
+      backgroundColor: '#00ff00',
+      borderRadius: borderRadius,
+    }"
+  ></div>
+  <ParallaxSlide
+    ref="pandaAnim"
+    :imgUrl="data.src"
+    :width="data.width"
+    :height="data.height"
+    :collapseWidth="collapseWidth"
+    :duration="duration"
+    :borderRadius="borderRadius"
+    :initPosition="initPosition"
+    easing="jsv-ease(0.4, 0.8, 1.2)"
+  ></ParallaxSlide>
+</template>
+<script setup>
+import ParallaxSlide from "./ParallaxSlide.vue";
+import { shallowRef, watch } from "vue";
+const props = defineProps({
+  data: Object,
+  focused: Boolean,
+  duration: Number,
+  borderRadius: Number,
+  collapseWidth: Number,
+  currentIndex: Number,
+  index: Number,
+  distanceToCenter: Number,
+});
+const initPosition =
+  props.distanceToCenter === 0
+    ? "center"
+    : props.distanceToCenter > 0
+    ? "right"
+    : "left";
+
+const pandaAnim = shallowRef(null);
+
+watch(
+  () => props.distanceToCenter,
+  (newVal) => {
+    if (newVal === 0) {
+      pandaAnim.value.slide("center");
+    } else if (newVal == 1) {
+      pandaAnim.value.slide("right");
+    } else if (newVal == -1) {
+      pandaAnim.value.slide("left");
+    }
+  }
+);
+</script>