@shijiu/jsview-vue-samples 2.2.373 → 2.3.0

package/DemoForOperator/ChunLian/App.vue

@@ -0,0 +1,47 @@
+<template>
+  <div
+    :style="{
+      width: 1280,
+      height: 720,
+      backgroundColor: '#007788',
+    }"
+  ></div>
+
+  <couplets
+    :sourceMap="sourceMap"
+    :leftPosition="leftPosition"
+    :rightPosition="rightPosition"
+    :size="size"
+    :duration="2"
+  ></couplets>
+</template>
+
+<script setup>
+import Couplets from "./Couplets.vue";
+const leftImage = "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/DemoForOperator/ChunLian/App/couplet_left.png";
+const rightImage = "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/DemoForOperator/ChunLian/App/couplet_right.png";
+const scrollSprite = "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/DemoForOperator/ChunLian/App/scroll.png";
+const scrollStatic = "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/DemoForOperator/ChunLian/App/scroll_static.png";
+
+const sourceMap = {
+  leftContent: leftImage,
+  rightContent: rightImage,
+  scrollSprite: scrollSprite,
+  scrollStatic: scrollStatic,
+};
+
+const size = {
+  width: 180,
+  height: 600,
+};
+
+const leftPosition = {
+  left: 100,
+  top: 30,
+};
+
+const rightPosition = {
+  left: 1000,
+  top: 30,
+};
+</script>

package/DemoForOperator/ChunLian/Couplets.vue

@@ -0,0 +1,248 @@
+<!--
+ * 【模块 export 内容】
+ * JsvCouplets：春联组件
+ *      props说明:
+ *          width         {Number}   春联宽度
+ *          duration      {Number}   春联滚动时间
+ *          left          {Number}   春联Left位置
+ *          top           {Number}   春联Top位置 
+ * 
+-->
+<template>
+  <JsvPreload
+    :preloadList="preload_info"
+    :onPreloadDone="loadDone"
+  ></JsvPreload>
+  <div v-for="layout in layouts">
+    <div
+      v-show="myShow"
+      :style="{
+        width: 180,
+        height: size.height,
+        top: layout.top,
+        left: layout.left,
+        transform: `scale3d(${size.width / 180},${size.width / 180},1)`,
+        transformOrigin: 'left top',
+      }"
+    >
+      <div
+        :style="{
+          top: 0,
+          left: 0,
+          width: 180,
+          height: size.height,
+          overflow: 'hidden',
+          animation: aniName1,
+        }"
+      >
+        <div
+          :style="{
+            top: 0,
+            left: 0,
+            width: 180,
+            height: size.height,
+            backgroundImage: layout.isLeft
+              ? sourceMap.leftContent
+              : sourceMap.rightContent,
+            animation: aniName2,
+          }"
+        ></div>
+      </div>
+      <!-- 滚轴动画 -->
+      <JsvSpriteLoader
+        :imageUrl="sourceMap.scrollSprite"
+        :configUrl="scrollJson"
+        :onConfigReady="preloadCallback"
+        :noNeedResource="false"
+      >
+        <div
+          :style="{
+            left: -30,
+            top: size.height,
+            transform: `scale3d(${(180 + 60) / view_size.w},1,1)`,
+          }"
+        >
+          <div
+            :style="{
+              width: view_size.w,
+              height: view_size.h,
+              animation: aniName1,
+            }"
+          >
+            <JsvSpriteAnim
+              :spriteInfo="sprite_info.info"
+              :loop="4"
+              :duration="props.duration / 4"
+              :imageUrl="sourceMap.scrollSprite"
+              ref="myRef"
+            >
+            </JsvSpriteAnim>
+          </div>
+        </div>
+      </JsvSpriteLoader>
+      <!-- 滚轴图片 -->
+      <div
+        :style="{
+          top: -30,
+          left: -30,
+          width: 180 + 60,
+          height: 30,
+          backgroundImage: sourceMap.scrollStatic,
+        }"
+      ></div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {
+  JsvSpriteAnim,
+  getKeyFramesGroup,
+  JsvSpriteLoader,
+  JsvPreload,
+  buildPreloadInfo,
+} from "jsview";
+import { shallowRef, onBeforeUnmount, watch } from "vue";
+const props = defineProps({
+  sourceMap: {
+    type: Object,
+    require: true,
+    validator: function (value) {
+      return (
+        "leftContent" in value &&
+        "rightContent" in value &&
+        "scrollSprite" in value &&
+        "scrollStatic" in value
+      );
+    },
+  },
+  size: {
+    type: Object,
+    required: true,
+    validator: function (value) {
+      return "width" in value && "height" in value;
+    },
+  },
+  leftPosition: {
+    type: Object,
+    require: true,
+    validator: function (value) {
+      return "left" in value && "top" in value;
+    },
+  },
+  rightPosition: {
+    type: Object,
+    require: true,
+    validator: function (value) {
+      return "left" in value && "top" in value;
+    },
+  },
+  duration: { type: Number, require: true },
+});
+const layouts = [{ ...props.leftPosition, isLeft: true }, props.rightPosition];
+let myShow = shallowRef(false);
+const scrollJson = props.sourceMap.scrollSprite.split("?")[0] + ".json";
+
+//预加载
+const preload_info = [
+  buildPreloadInfo(props.sourceMap.leftContent),
+  buildPreloadInfo(props.sourceMap.rightContent),
+  buildPreloadInfo(props.sourceMap.scrollSprite),
+  buildPreloadInfo(props.sourceMap.scrollStatic),
+];
+
+let readyNum = shallowRef(0);
+const loadDone = (a) => {
+  readyNum.value++;
+};
+let sprite_info = shallowRef(null);
+const view_size = shallowRef(null);
+
+const _formatInfo = (action_json) => {
+  const info = {
+    frames: [],
+    meta: {
+      size: action_json.meta.size,
+    },
+  };
+  let frames_ref = info.frames;
+  let max_width = 0;
+  let max_height = 0;
+
+  for (let i = 0; i < action_json.frames.length; i++) {
+    const target = action_json.frames[i].spriteSourceSize;
+    frames_ref.push({
+      target,
+      source: action_json.frames[i].frame,
+    });
+    const sprite_with = target.x + target.w;
+    const sprite_height = target.y + target.h;
+    if (sprite_with > max_width) {
+      max_width = sprite_with;
+    }
+    if (sprite_height > max_height) {
+      max_height = sprite_height;
+    }
+  }
+  return { info, maxW: max_width, maxH: max_height };
+};
+const preloadCallback = (config_json, resolve_set) => {
+  sprite_info.value = _formatInfo(config_json);
+  view_size.value = {
+    w: sprite_info.value.maxW,
+    h: sprite_info.value.maxH,
+  };
+  resolve_set(); // 通知loader数组设置完成
+  readyNum.value++;
+};
+//动画名字
+let aniName1 = shallowRef(null);
+let aniName2 = shallowRef(null);
+
+//插入动画
+const idRandom = Math.floor(Math.random() * 1000000);
+let name1 = "anim1-" + idRandom;
+let name2 = "anim2-" + idRandom;
+let styleShell = getKeyFramesGroup();
+let anim1 = `@keyframes ${name1} {
+        from {
+          transform: translate3d(0,${-props.size.height}, 0);
+        }
+        to {
+          transform: translate3d(0, 0, 0);
+        }
+      }`;
+styleShell.insertRule(anim1);
+let anim2 = `@keyframes ${name2} {
+        from {
+          transform: translate3d(0,${props.size.height}, 0);
+        }
+        to {
+          transform: translate3d(0, 0, 0);
+        }
+      }`;
+styleShell.insertRule(anim2);
+
+let timer = { id: -1 };
+//ref
+let myRef = shallowRef(null);
+watch(readyNum, (n, o) => {
+  if (o != 2 && n == 2) {
+    timer.id = setTimeout(() => {
+      myShow.value = true;
+      myRef.value?.forEach((i) => i.start());
+      aniName1.value = `${name1} ${props.duration}s linear`;
+      aniName2.value = `${name2} ${props.duration}s linear`;
+    }, 0);
+  }
+});
+
+onBeforeUnmount(() => {
+  styleShell.removeRule(name1);
+  styleShell.removeRule(name2);
+  clearTimeout(timer.id);
+  timer.id = -1;
+});
+</script>
+
+<style scoped></style>

package/DemoForOperator/EpisodeList/App.vue

@@ -0,0 +1,80 @@
+<template>
+  <div
+    :style="{
+      width: 1280,
+      height: 720,
+      backgroundColor: '#007788',
+    }"
+  ></div>
+  <EpisodeList
+    :name="name"
+    :listLayout="listLayout"
+    :groupLayout="groupLayout"
+    :numPerPage="numPerPage"
+    :listMeasures="listMeasures"
+    :groupMeasures="groupMeasures"
+    :totalNumber="totalNumber"
+    :listPadding="listPadding"
+  >
+    <template #listItem="{ data, onAction, query }">
+      <list-item :data="data" :onAction="onAction" :query="query" />
+    </template>
+    <template #groupItem="{ data, onAction, query }">
+      <group-item :data="data" :onAction="onAction" :query="query" />
+    </template>
+  </EpisodeList>
+</template>
+
+<script setup>
+import EpisodeList from "./EpisodeList/EpisodeList.vue";
+import ListItem from "./ListItem.vue";
+import GroupItem from "./GroupItem.vue";
+import { onMounted } from "vue";
+import { useFocusHub } from "jsview";
+
+const focusHub = useFocusHub();
+const name = "episodeList";
+const listLayout = {
+  left: 80,
+  top: 100,
+  width: 940,
+  height: 120,
+};
+const groupLayout = {
+  left: 100,
+  top: 220,
+  width: 900,
+  height: 50,
+};
+const numPerPage = 10;
+function listMeasures(index) {
+  return {
+    width: 80,
+    height: 80,
+    marginRight: 10,
+    data: {
+      content: index,
+      width: 80,
+      height: 80,
+      backgroundColor: "#ffffffaa",
+    },
+  };
+}
+function groupMeasures(index) {
+  return {
+    width: 150,
+    height: 50,
+    marginRight: 10,
+  };
+}
+const totalNumber = 400;
+const listPadding = {
+  left: 20,
+  right: 20,
+  top: 20,
+  bottom: 20,
+};
+onMounted(() => {
+  focusHub.setFocus(name);
+});
+</script>

package/DemoForOperator/EpisodeList/EpisodeList/Controller.vue

@@ -0,0 +1,113 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2023-03-08 14:52:08
+ * @Description: file content
+-->
+<script setup>
+import { MetroWidget, HORIZONTAL, useFocusHub, EdgeDirection } from "jsview";
+import { ref } from "vue";
+
+const widget = ref();
+const props = defineProps({
+  name: String,
+  number: Number,
+  widgetHandler: Object,
+  numPerPage: Number,
+  measures: Function,
+  listName: String,
+  layout: Object,
+});
+
+const focusHub = useFocusHub();
+
+let data = [];
+const provideData = () => {
+  data = [];
+  const c = Math.ceil(props.number / props.numPerPage);
+  for (let i = 0; i < c; ++i) {
+    const m = props.measures(i);
+    data.push({
+      width: m.width,
+      height: m.height,
+      marginRight: m.marginRight,
+      from: i * props.numPerPage,
+      to: Math.min((i + 1) * props.numPerPage - 1, props.number - 1),
+    });
+  }
+  return data;
+};
+
+const measures = (data) => {
+  return {
+    width: data.width,
+    height: data.height,
+    marginRight: data.marginRight,
+  };
+};
+
+// callbacks
+const onEdge = (edgeInfo) => {
+  if (edgeInfo.direction == EdgeDirection.top) {
+    focusHub.setFocus(props.listName);
+  }
+};
+
+const onBlur = () => {
+  if (!firstLock) {
+    props.widgetHandler.widget.value?.setFocusId(targetFocus, false, false);
+  }
+  firstLock = false;
+};
+
+let targetFocus = 0;
+
+let firstLock = false;
+const setFocusId = (index) => {
+  targetFocus = index;
+  firstLock = true;
+  widget.value.setFocusId(index, true, true);
+};
+
+function onFocusItemChange(id) {
+  if (firstLock) {
+    firstLock = false;
+    return;
+  }
+
+  let itemData = data[id];
+
+  if (itemData) {
+    props.widgetHandler.widget.value?.setFocusId(itemData.from, false);
+    const itemPos = props.widgetHandler.widget.value?.getTemplatePosition(
+      itemData.from
+    );
+    props.widgetHandler.widget.value?.slideTo(itemPos.left);
+    targetFocus = itemData.from;
+  }
+}
+
+defineExpose({
+  setFocusId,
+});
+</script>
+
+<template>
+  <metro-widget
+    ref="widget"
+    :name="name"
+    :left="layout.left"
+    :top="layout.top"
+    :width="layout.width"
+    :height="layout.height"
+    :provideData="provideData"
+    :direction="HORIZONTAL"
+    :measures="measures"
+    :onEdge="onEdge"
+    :onBlur="onBlur"
+    :onFocusChange="onFocusItemChange"
+  >
+    <template #renderItem="{ data, onAction, query }">
+      <slot name="item" :onAction="onAction" :query="query" :data="data"></slot>
+    </template>
+  </metro-widget>
+</template>

package/DemoForOperator/EpisodeList/EpisodeList/EpisodeList.vue

@@ -0,0 +1,176 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2023-03-08 14:52:08
+ * @Description: file content
+-->
+<script>
+let TOKEN = 0;
+</script>
+<script setup>
+import {
+  MetroWidget,
+  HORIZONTAL,
+  useFocusHub,
+  SeamlessSlide,
+  EdgeDirection,
+  SlideSetting,
+} from "jsview";
+import Controller from "./Controller.vue";
+import { onMounted, ref } from "vue";
+
+const props = defineProps({
+  name: {
+    type: String,
+  },
+  listLayout: {
+    type: Object,
+    required: true,
+  },
+  groupLayout: {
+    type: Object,
+    required: true,
+  },
+  numPerPage: {
+    type: Number,
+    default: 10,
+  },
+  /* (index: Number) => {width: Number, height: Number, marginRight?: Number, data: Object} */
+  listMeasures: {
+    type: Function,
+  },
+  groupMeasures: {
+    type: Function,
+  },
+  totalNumber: {
+    type: Number,
+  },
+  listPadding: {
+    type: Object,
+  },
+});
+
+const controller = ref(null);
+const widget = ref(null);
+const handler = {
+  widget,
+};
+
+const slideObj = {
+  headRange: 0.5,
+  tailRange: 0.5,
+};
+const defaultSlide = new SeamlessSlide(slideObj);
+
+const slide1 = new SeamlessSlide({
+  ...slideObj,
+  boundaryProtect: SlideSetting.START_PROTECT,
+});
+
+const focusHub = useFocusHub();
+
+let t = TOKEN++;
+const listName = props.name + "_list_" + t;
+const controllerName = props.name + "_controller_" + t;
+let curFocusName = listName;
+
+const provideData = () => {
+  const data = [];
+  for (let i = 0; i < props.totalNumber; i++) {
+    const item = props.listMeasures(i);
+    data.push({
+      index: i,
+      data: item.data,
+      width: item.width,
+      height: item.height,
+      marginRight: item.marginRight,
+    });
+  }
+  return data;
+};
+
+const measures = (data) => {
+  return {
+    width: data.width,
+    height: data.height,
+    marginRight: data.marginRight,
+  };
+};
+
+function onItemFocus(index) {
+  const ctrlItemIndex = Math.floor(index / props.numPerPage);
+  controller.value?.setFocusId(ctrlItemIndex);
+}
+
+const onEdge = (edgeInfo) => {
+  if (edgeInfo.direction == EdgeDirection.bottom) {
+    focusHub.setFocus(controllerName);
+    curFocusName = controllerName;
+  }
+};
+
+const onBlur = () => {
+  widget.value?.setSlideSetting(slide1);
+};
+
+const onFocus = () => {
+  widget.value?.setSlideSetting(null);
+};
+
+onMounted(() => {});
+
+function componentOnFocus() {
+  focusHub.setFocus(curFocusName);
+}
+</script>
+
+<template>
+  <jsv-focus-block
+    :name="name"
+    :onAction="{
+      onFocus: componentOnFocus,
+    }"
+  >
+    <metro-widget
+      ref="widget"
+      :name="listName"
+      :left="listLayout.left"
+      :top="listLayout.top"
+      :width="listLayout.width"
+      :height="listLayout.height"
+      :provideData="provideData"
+      :direction="HORIZONTAL"
+      :measures="measures"
+      :onEdge="onEdge"
+      :onBlur="onBlur"
+      :onFocus="onFocus"
+      :initFocusId="0"
+      :slideSetting="defaultSlide"
+      :onFocusChange="onItemFocus"
+      :padding="listPadding"
+    >
+      <template #renderItem="{ data, onAction, query }">
+        <slot
+          name="listItem"
+          :data="data.data"
+          :onAction="onAction"
+          :query="query"
+        ></slot>
+      </template>
+    </metro-widget>
+
+    <controller
+      ref="controller"
+      :name="controllerName"
+      :number="totalNumber"
+      :widgetHandler="handler"
+      :numPerPage="numPerPage"
+      :measures="groupMeasures"
+      :listName="listName"
+      :layout="groupLayout"
+    >
+      <template #item="slotProps">
+        <slot name="groupItem" v-bind="slotProps"></slot>
+      </template>
+    </controller>
+  </jsv-focus-block>
+</template>