@shijiu/jsview-vue 0.9.502 → 0.9.590

package/samples/MetroWidgetDemos/PingPong/ViewSwiper.vue

@@ -0,0 +1,214 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2022-07-12 10:30:33
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-07-13 10:50:43
+ * @Description: file content
+-->
+<script>
+import AppPage from "./AppPage.vue";
+import { getKeyFramesGroup } from "jsview";
+import { reactive } 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/App.vue

@@ -0,0 +1,194 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2022-07-11 13:31:36
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-07-11 16:02:14
+ * @Description: file content
+-->
+<script setup>
+import { MetroWidget, WholePageSlide, HORIZONTAL, EdgeDirection } from "jsview";
+import { useRouter } from "vue-router";
+import { ref } from "vue";
+import { useFocusHub } from "jsview";
+import { simpleData, simpleDataAbs } from "../data";
+import Item from "../Item.vue";
+
+const router = useRouter();
+const foucsHub = useFocusHub();
+const mwRef = ref(null);
+
+const wholePageSlide = new WholePageSlide();
+let innerData = simpleData.concat();
+let dataPool = [];
+
+const onFocus = () => {
+  foucsHub.setFocus("button");
+};
+const onKeyDown = (ev) => {
+  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+    router.go(-1);
+  }
+  return true;
+};
+
+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");
+      break;
+    case 13:
+      if (innerData.length == simpleData.length) {
+        innerData = [];
+        dataPool = simpleData.concat();
+      } else {
+        innerData.push(dataPool.shift());
+      }
+      mwRef.value?.refreshData(true);
+      break;
+  }
+  return true;
+};
+
+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>
+  <jsv-focus-block
+    autoFocus
+    :onAction="{
+      onKeyDown,
+      onFocus,
+    }"
+    :style="{
+      width: 1920,
+      height: 1080,
+      backgroundColor: '#007788',
+    }"
+  >
+    <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>
+
+    <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>
+  </jsv-focus-block>
+</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>

package/samples/MetroWidgetDemos/data.js

@@ -0,0 +1,204 @@
+/*
+ * @Author: ChenChanghua
+ * @Date: 2022-07-11 14:00:33
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-07-12 14:35:01
+ * @Description: file content
+ */
+
+const randomColor = () => {
+  let randomColor = Math.round(Math.random() * 2 ** 24).toString(16);
+  return (
+    "#" + new Array(6 - randomColor.length).fill("0").join("") + randomColor
+  );
+};
+
+const simpleData = [
+  {
+    width: 90,
+    height: 90,
+    marginRight: 10,
+    marginBottom: 10,
+    color: randomColor(),
+    content: "0",
+  },
+  {
+    width: 90,
+    height: 90,
+    marginRight: 10,
+    marginBottom: 10,
+    color: randomColor(),
+    content: "1",
+  },
+  {
+    width: 90,
+    height: 90,
+    marginRight: 10,
+    marginBottom: 10,
+    color: randomColor(),
+    content: "2",
+  },
+  {
+    width: 190,
+    height: 190,
+    marginRight: 10,
+    marginBottom: 10,
+    color: randomColor(),
+    content: "3",
+  },
+  {
+    width: 90,
+    height: 90,
+    marginRight: 10,
+    marginBottom: 10,
+    color: randomColor(),
+    content: "4",
+  },
+  {
+    width: 90,
+    height: 90,
+    marginRight: 10,
+    marginBottom: 10,
+    color: randomColor(),
+    content: "5",
+  },
+  {
+    width: 90,
+    height: 190,
+    marginRight: 10,
+    marginBottom: 10,
+    color: randomColor(),
+    content: "6",
+  },
+  {
+    width: 90,
+    height: 90,
+    marginRight: 10,
+    marginBottom: 10,
+    color: randomColor(),
+    content: "7",
+  },
+  {
+    width: 90,
+    height: 190,
+    marginRight: 10,
+    marginBottom: 10,
+    color: randomColor(),
+    content: "8",
+  },
+  {
+    width: 90,
+    height: 90,
+    marginRight: 10,
+    marginBottom: 10,
+    color: randomColor(),
+    content: "9",
+  },
+];
+
+const simpleDataAbs = [
+  {
+    left: 0,
+    top: 0,
+    width: 90,
+    height: 90,
+    marginRight: 10,
+    marginBottom: 10,
+    color: randomColor(),
+    content: "0",
+  },
+  {
+    left: 0,
+    top: 200,
+    width: 90,
+    height: 90,
+    marginRight: 10,
+    marginBottom: 10,
+    color: randomColor(),
+    content: "1",
+  },
+  {
+    left: 200,
+    top: 0,
+    width: 90,
+    height: 90,
+    marginRight: 10,
+    marginBottom: 10,
+    color: randomColor(),
+    content: "2",
+  },
+  {
+    left: 200,
+    top: 200,
+    width: 90,
+    height: 90,
+    marginRight: 10,
+    marginBottom: 10,
+    color: randomColor(),
+    content: "3",
+  },
+  {
+    left: 400,
+    top: 0,
+    width: 90,
+    height: 90,
+    marginRight: 10,
+    marginBottom: 10,
+    color: randomColor(),
+    content: "4",
+  },
+  {
+    left: 400,
+    top: 200,
+    width: 90,
+    height: 90,
+    marginRight: 10,
+    marginBottom: 10,
+    color: randomColor(),
+    content: "5",
+  },
+];
+
+const advanceButton = [];
+for (let i = 0; i < 6; i++) {
+  advanceButton.push({
+    width: 100,
+    height: 50,
+    name: "button_" + i,
+    marginRight: 10,
+    marginBottom: 10,
+  });
+}
+
+const advanceMetroWidget = [];
+for (let i = 0; i < 10; i++) {
+  advanceMetroWidget.push({
+    width: 500,
+    height: 170,
+    name: "widget_" + i,
+    marginBottom: 10,
+  });
+}
+
+const advanceMix = [];
+for (let i = 0; i < 6; i++) {
+  advanceMix.push({
+    width: 100,
+    height: 50,
+    name: "mix_button_" + i,
+    marginRight: 10,
+    marginBottom: 10,
+    type: i % 3 == 0 ? "button" : "item",
+    color: randomColor(),
+    content: i,
+  });
+}
+
+export {
+  randomColor,
+  simpleData,
+  simpleDataAbs,
+  advanceButton,
+  advanceMetroWidget,
+  advanceMix,
+};