@shijiu/jsview-vue 0.9.502 → 0.9.631

package/samples/MetroWidgetDemos/PingPong/ViewSwiper.vue

@@ -0,0 +1,214 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2022-07-12 10:30:33
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-09-01 17:05:07
+ * @Description: file content
+-->
+<script>
+import AppPage from "./AppPage.vue";
+import { getKeyFramesGroup } from "jsview";
+import { reactive, ref } from "vue";
+
+export default {
+  components: {
+    AppPage,
+  },
+  props: {
+    name: {
+      type: String,
+    },
+    curIndex: {
+      type: Object,
+    },
+    pageData: {
+      type: Array,
+    },
+    onEdge: {
+      type: Function,
+    },
+    layout: {
+      type: Object,
+    },
+    duration: {
+      type: Number,
+      default: 0.3,
+    },
+  },
+  inject: ["globalInfo"],
+  provide() {
+    return {
+      animState: this.animState,
+    };
+  },
+  setup() {
+    let styleShell = getKeyFramesGroup();
+    let animState = reactive({
+      value: 0, //0: 不在动画， 在动画中
+    });
+    return {
+      refName0: "page0",
+      refName1: "page1",
+      styleShell,
+      animState,
+    };
+  },
+  data() {
+    return {
+      curPage: 0,
+      page0Show: true,
+      page1Show: false,
+      page0Data: this.pageData[0],
+      page1Data: null,
+      page0Left: 0,
+      page1Left: 1280,
+      page0Anim: {
+        anim: "",
+        onend: null,
+      },
+      page1Anim: {
+        anim: "",
+        onend: null,
+      },
+    };
+  },
+  methods: {
+    $_appSwiper_onFocus() {
+      let curPageData = this.curPage === 0 ? this.page0Data : this.page1Data;
+      this.$refs.focusNode?.findBlockByName(curPageData.name).requestFocus();
+    },
+    $_appSwiper_tabIdWatcher(newValue, oldValue) {
+      console.log("AppSwiper curIndex changed ", newValue, oldValue);
+      if (newValue != oldValue) {
+        let direction = newValue > oldValue ? "left" : "right";
+        if (this.curPage == 0) {
+          this.curPage = 1;
+          this.page1Data = this.pageData[newValue];
+          this.page1Show = true;
+          this.animState.value = 1;
+          this.page0Anim = {
+            anim: `app-swiper-${direction}-slide-out ${this.duration}s`,
+            onend: () => {
+              this.page0Show = false;
+              this.page0Data = null;
+              this.animState.value = 0;
+            },
+          };
+          this.page1Anim = {
+            anim: `app-swiper-${direction}-slide-in ${this.duration}s`,
+            onend: null,
+          };
+        } else {
+          this.curPage = 0;
+          this.page0Data = this.pageData[newValue];
+          this.page0Show = true;
+          this.animState.value = 1;
+          this.page0Anim = {
+            anim: `app-swiper-${direction}-slide-in ${this.duration}s`,
+            onend: null,
+          };
+          this.page1Anim = {
+            anim: `app-swiper-${direction}-slide-out ${this.duration}s`,
+            onend: () => {
+              this.page1Show = false;
+              this.page1Data = null;
+              this.animState.value = 0;
+            },
+          };
+        }
+      }
+    },
+    $_appSwiper_initAnimation() {
+      let leftSlideOutDefine = `@keyframes app-swiper-left-slide-out {
+        from {
+          transform: translate3d(0px, 0px, 0px);
+        }
+        to {
+          transform: translate3d(${-this.layout.width}px, 0px, 0px);
+        }
+      }`;
+      let leftSlideInDefine = `@keyframes app-swiper-left-slide-in {
+        from {
+          transform: translate3d(${this.layout.width}px, 0px, 0px);
+        }
+        to {
+          transform: translate3d(0px, 0px, 0px);
+        }
+      }`;
+      let rightSlideOutDefine = `@keyframes app-swiper-right-slide-out {
+        from {
+          transform: translate3d(0px, 0px, 0px);
+        }
+        to {
+          transform: translate3d(${this.layout.width}px, 0px, 0px);
+        }
+      }`;
+      let rightSlideInDefine = `@keyframes app-swiper-right-slide-in {
+        from {
+          transform: translate3d(${-this.layout.width}px, 0px, 0px);
+        }
+        to {
+          transform: translate3d(0px, 0px, 0px);
+        }
+      }`;
+      this.styleShell.insertRule(leftSlideOutDefine);
+      this.styleShell.insertRule(leftSlideInDefine);
+      this.styleShell.insertRule(rightSlideOutDefine);
+      this.styleShell.insertRule(rightSlideInDefine);
+    },
+    $_appSwiper_releaseAnimation() {
+      this.styleShell.removeRule("app-swiper-left-slide-out");
+      this.styleShell.removeRule("app-swiper-left-slide-in");
+      this.styleShell.removeRule("app-swiper-right-slide-out");
+      this.styleShell.removeRule("app-swiper-right-slide-in");
+    },
+  },
+  created() {
+    console.log("AppSwiper created", this.globalInfo);
+    this.$watch(() => this.globalInfo.tabId, this.$_appSwiper_tabIdWatcher);
+    this.$_appSwiper_initAnimation();
+  },
+  beforeUnmount() {
+    this.$_appSwiper_releaseAnimation();
+  },
+};
+</script>
+
+<template>
+  <jsv-focus-block
+    :name="name"
+    ref="focusNode"
+    :onAction="{
+      onFocus: $_appSwiper_onFocus,
+    }"
+  >
+    <div
+      :style="{
+        animation: page0Anim.anim,
+        animationFillMode: 'forwards',
+      }"
+      :onAnimationEnd="page0Anim.onend"
+    >
+      <app-page
+        v-if="page0Show"
+        :data="page0Data"
+        :name="page0Data.name"
+        :onEdge="onEdge"
+      ></app-page>
+    </div>
+    <div
+      :style="{
+        animation: page1Anim.anim,
+        animationFillMode: 'forwards',
+      }"
+      :onAnimationEnd="page1Anim.onend"
+    >
+      <app-page
+        v-if="page1Show"
+        :data="page1Data"
+        :name="page1Data.name"
+        :onEdge="onEdge"
+      ></app-page>
+    </div>
+  </jsv-focus-block>
+</template>

package/samples/MetroWidgetDemos/Simple/AbsoluteTemplate.vue

@@ -0,0 +1,75 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2022-07-11 13:31:36
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-07-18 10:03:44
+ * @Description: file content
+-->
+<script setup>
+import { MetroWidget, WholePageSlide, HORIZONTAL, EdgeDirection } from "jsview";
+import { useFocusHub } from "jsview";
+import { simpleDataAbs } from "../data";
+import Item from "../Item.vue";
+const foucsHub = useFocusHub();
+
+const wholePageSlide = new WholePageSlide();
+
+const provideDataAbs = () => {
+  return simpleDataAbs;
+};
+const measuresAbs = (item) => {
+  return {
+    width: item.width,
+    height: item.height,
+    marginRight: item.marginRight,
+    marginBottom: item.marginBottom,
+    left: item.left,
+    top: item.top,
+  };
+};
+const onEdgeAbs = (edgeInfo) => {
+  if (edgeInfo.direction == EdgeDirection.left) {
+    foucsHub.setFocus("mw");
+  }
+};
+</script>
+
+<template>
+  <div
+    :style="{
+      left: 700,
+      top: 50,
+      width: 700,
+      height: 50,
+      color: '#FFFFFF',
+      fontSize: 30,
+    }"
+  >
+    绝对坐标布局
+  </div>
+  <!-- 绝对坐标布局, 将layoutType设为absolute, measures返回的对象需要有left,top信息  -->
+  <metro-widget
+    name="mwAbs"
+    :top="150"
+    :left="700"
+    :provideData="provideDataAbs"
+    :width="500"
+    :height="400"
+    :padding="{
+      left: 50,
+      top: 50,
+      right: 50,
+      bottom: 50,
+    }"
+    :direction="HORIZONTAL"
+    :measures="measuresAbs"
+    :slideSetting="wholePageSlide"
+    :onEdge="onEdgeAbs"
+    layoutType="absolute"
+  >
+    <!-- data为每个item的数据, query提供获取MetroWidget内部状态的一些接口, onAction提供item注册自身回调的接口 -->
+    <template #renderItem="{ data, query, onAction }">
+      <item :data="data" :query="query" :onAction="onAction" />
+    </template>
+  </metro-widget>
+</template>

package/samples/MetroWidgetDemos/Simple/App.vue

@@ -0,0 +1,45 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2022-07-11 13:31:36
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-07-18 10:06:28
+ * @Description: file content
+-->
+<script setup>
+import { MetroWidget, WholePageSlide, HORIZONTAL, EdgeDirection } from "jsview";
+import { useRouter } from "vue-router";
+import { useFocusHub } from "jsview";
+import AbsoluteTemplate from "./AbsoluteTemplate.vue";
+import RelativeTemplate from "./RelativeTemplate.vue";
+
+const router = useRouter();
+const foucsHub = useFocusHub();
+
+const onFocus = () => {
+  foucsHub.setFocus("button");
+};
+const onKeyDown = (ev) => {
+  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+    router.go(-1);
+  }
+  return true;
+};
+</script>
+
+<template>
+  <jsv-focus-block
+    autoFocus
+    :onAction="{
+      onKeyDown,
+      onFocus,
+    }"
+    :style="{
+      width: 1920,
+      height: 1080,
+      backgroundColor: '#007788',
+    }"
+  >
+    <absolute-template></absolute-template>
+    <relative-template></relative-template>
+  </jsv-focus-block>
+</template>

package/samples/MetroWidgetDemos/Simple/RelativeTemplate.vue

@@ -0,0 +1,111 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2022-07-11 13:31:36
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-07-18 10:07:01
+ * @Description: file content
+-->
+<script setup>
+import { MetroWidget, WholePageSlide, HORIZONTAL, EdgeDirection } from "jsview";
+import { ref } from "vue";
+import { useFocusHub } from "jsview";
+import { simpleData } from "../data";
+import Item from "../Item.vue";
+
+const foucsHub = useFocusHub();
+const mwRef = ref(null);
+
+const wholePageSlide = new WholePageSlide();
+let innerData = simpleData.concat();
+let dataPool = [];
+
+const provideData = () => {
+  return innerData;
+};
+const measures = (item) => {
+  return {
+    width: item.width,
+    height: item.height,
+    marginRight: item.marginRight,
+    marginBottom: item.marginBottom,
+  };
+};
+const onEdge = (edgeInfo) => {
+  // MetroWidget焦点到达边缘后的回调
+  if (edgeInfo.direction == EdgeDirection.top) {
+    buttonFocus.value = true;
+    foucsHub.setFocus("button");
+  } else if (edgeInfo.direction == EdgeDirection.right) {
+    foucsHub.setFocus("mwAbs");
+  }
+};
+
+const buttonFocus = ref(true);
+const buttonOnKeyDown = (ev) => {
+  switch (ev.keyCode) {
+    case 40:
+      buttonFocus.value = false;
+      foucsHub.setFocus("mw");
+      return true;
+    case 13:
+      if (innerData.length == simpleData.length) {
+        innerData = [];
+        dataPool = simpleData.concat();
+      } else {
+        innerData.push(dataPool.shift());
+      }
+      mwRef.value?.refreshData(true);
+      return true;
+  }
+  return false;
+};
+</script>
+
+<template>
+  <jsv-focus-block
+    name="button"
+    :onAction="{
+      onKeyDown: buttonOnKeyDown,
+    }"
+  >
+    <div
+      :style="{
+        left: 100,
+        top: 50,
+        width: 500,
+        height: 100,
+        color: '#FFFFFF',
+        fontSize: 30,
+        backgroundColor: buttonFocus ? '#AA0000' : '#444444',
+      }"
+    >
+      {{ `自适应布局\n获焦时按确认查看时item排布的方式` }}
+    </div>
+  </jsv-focus-block>
+
+  <!-- item的排布区域为600*300, 但由于获焦时需要放大, 因此需要往外扩展padding, 合起来宽高为700*400 -->
+  <metro-widget
+    name="mw"
+    ref="mwRef"
+    :top="150"
+    :left="50"
+    :provideData="provideData"
+    :width="500"
+    :height="400"
+    :padding="{
+      left: 50,
+      top: 50,
+      right: 50,
+      bottom: 50,
+    }"
+    :direction="HORIZONTAL"
+    :measures="measures"
+    :slideSetting="wholePageSlide"
+    :onEdge="onEdge"
+  >
+    <!-- data为每个item的数据, query提供获取MetroWidget内部状态的一些接口, onAction提供item注册自身回调的接口 -->
+    <template #renderItem="{ data, query, onAction }">
+      <item :data="data" :query="query" :onAction="onAction" />
+    </template>
+  </metro-widget>
+</template>

package/samples/MetroWidgetDemos/WidgetItem.vue

@@ -0,0 +1,89 @@
+
+<script setup>
+import { HORIZONTAL, MetroWidget, useFocusHub } from "jsview";
+import { ref } from "vue";
+import Item from "./Item.vue";
+
+const props = defineProps({
+  data: Object,
+  query: Object,
+  onItemEdge: Function,
+  onAction: Object,
+});
+const focusHub = useFocusHub();
+const mwRef = ref(null);
+
+const measures = (item) => {
+  return item;
+};
+const randomColor = () => {
+  let randomColor = Math.round(Math.random() * 2 ** 24).toString(16);
+  return (
+    "#" + new Array(6 - randomColor.length).fill("0").join("") + randomColor
+  );
+};
+const provideData = () => {
+  const data = [];
+  for (let i = 0; i < 10; i++) {
+    data.push({
+      width: 90,
+      height: 90,
+      marginRight: 10,
+      marginBottom: 10,
+      content: i,
+      color: randomColor(),
+    });
+  }
+  return data;
+};
+const onFocus = (rect) => {
+  //获得焦点时需要做就近移动的处理, 因此需要通过setEnterFocusRect设置寻找最近焦点的区域
+  mwRef.value?.setEnterFocusRect(rect);
+  focusHub.setFocus(props.data.name);
+};
+const onBlur = () => {
+  //onBlur时需要返还焦点给父MetroWidget
+  mwRef.value?.getFocusBlockRef().returnFocusToParent();
+};
+
+props.onAction.register("onFocus", onFocus);
+props.onAction.register("onBlur", onBlur);
+</script>
+
+<template>
+  <div
+    :style="{
+      width: 900,
+      height: 50,
+      fontSize: 30,
+      color: '#FFFFFF',
+    }"
+  >
+    {{ data.name }}
+  </div>
+  <!-- sendFocusRectEvent可以让MetroWidget的item在获焦时发送事件, 通知父的MetroWidget进行滚动 -->
+  <!-- onItemEdge直接作为onEdge回调, 既子MetroWidget到达边缘时触发父的onItemEdge -->
+  <metro-widget
+    ref="mwRef"
+    :top="50"
+    :name="data.name"
+    :provideData="provideData"
+    :width="data.width"
+    :height="data.height"
+    :direction="HORIZONTAL"
+    :padding="{
+      left: 10,
+      right: 10,
+      top: 10,
+      bottom: 10,
+    }"
+    :measures="measures"
+    :slideSetting="seamlessSlide"
+    :onEdge="onItemEdge"
+    :sendFocusRectEvent="true"
+  >
+    <template #renderItem="{ data, query, onAction }">
+      <item :data="data" :query="query" :onAction="onAction" />
+    </template>
+  </metro-widget>
+</template>