@shijiu/jsview-vue 0.0.1-beta.0

package/samples/DemoHomepage/views/Homepage.vue

@@ -0,0 +1,186 @@
+<script>
+import { jJsvRuntimeBridge } from "jsview/utils/JsViewVueTools/JsvRuntimeBridge";
+import { EdgeDirection } from "jsview/utils/JsViewEngineWidget";
+import TabFrame from "../components/TabFrame.vue";
+import BodyFrame from "../components/BodyFrame.vue";
+import Dialog from "../components/Dialog.vue";
+import { routeList } from "../router.js";
+
+const colorTemplete = ["#89BEB2", "#C9BA83", "#DED38C", "#DE9C53"];
+
+const featureData = [];
+const sceneData = [];
+for (let item of routeList) {
+  let obj = {
+    name: item.name,
+    path: item.path,
+    width: 300,
+    height: 100,
+    focusable: true,
+  };
+  if (item.path.indexOf("feature") >= 0) {
+    obj.backgroundColor = colorTemplete[featureData.length % 4];
+    featureData.push(obj);
+  } else if (item.path.indexOf("scene") >= 0) {
+    obj.backgroundColor = colorTemplete[sceneData.length % 4];
+    sceneData.push(obj);
+  }
+}
+const dataList = [featureData, sceneData];
+
+export default {
+  components: {
+    TabFrame,
+    Dialog,
+    BodyFrame,
+  },
+  data() {
+    return {
+      showExitDialog: false,
+      contentData: dataList[0],
+      tabId: 0,
+      preFocusName: "",
+      curFocusName: "",
+    };
+  },
+  setup() {
+    return {
+      name: "/home",
+    };
+  },
+  computed: {
+    address() {
+      return window.localStorage.href;
+    },
+  },
+  methods: {
+    onFocus() {
+      this.changeFocus(this.name + "/bodyFrame");
+    },
+    onKeyDown(ev) {
+      // 处理返回键
+      if (
+        ev.keyCode == 8 || // Backspace
+        ev.keyCode == 27 || // Escape
+        ev.keyCode == 10000 // 盒子返回键
+      ) {
+        this.showExitDialog = !this.showExitDialog;
+        if (!this.showExitDialog) {
+          this.changeFocus(this.preFocusName);
+        } else {
+          this.preFocusName = this.curFocusName;
+          this.curFocusName = this.name + "/exitDialog";
+        }
+      }
+      return true;
+    },
+    changeFocus(name) {
+      this.preFocusName = this.curFocusName;
+      this.curFocusName = name;
+      this.$refs.rootNode.findBlockByName(name).requestFocus();
+    },
+    onTabEdge(edgeInfo) {
+      if (edgeInfo.direction === EdgeDirection.bottom) {
+        this.changeFocus(this.name + "/bodyFrame");
+      }
+    },
+    onContentEdge(edgeInfo) {
+      if (edgeInfo.direction === EdgeDirection.top) {
+        this.changeFocus(this.name + "/tabFrame");
+      }
+    },
+    tabItemFocus(data) {
+      if (data.id != this.tabId) {
+        this.tabId = data.id;
+        this.contentData = dataList[this.tabId];
+      }
+    },
+    onDialogAction(msg) {
+      console.log("cchtes dialog onaction", msg);
+      this.showExitDialog = false;
+      this.changeFocus(this.preFocusName);
+      switch (msg) {
+        case "ok":
+          jJsvRuntimeBridge.closePage();
+          // if (!window.JsView) {
+          //   // 浏览器调试
+          //   window.location.href = "about:blank";
+          // }
+          break;
+        case "back":
+        case "cancel":
+          break;
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="rootSize">
+    <div class="address">
+      {{ address }}
+    </div>
+    <div class="logo">JsView-Vue3</div>
+
+    <jsv-focus-block
+      autoFocus
+      ref="rootNode"
+      :onAction="{
+        onKeyDown: onKeyDown,
+        onFocus: onFocus,
+      }"
+    >
+      <div :style="{ left: 10 }">
+        <tab-frame
+          :name="name + '/tabFrame'"
+          :onEdge="onTabEdge"
+          :itemFocus="tabItemFocus"
+        />
+      </div>
+
+      <div
+        :style="{
+          left: 10,
+          top: 100,
+        }"
+      >
+        <body-frame
+          :data="contentData"
+          :name="name + '/bodyFrame'"
+          :onEdge="onContentEdge"
+        />
+      </div>
+
+      <Dialog
+        v-if="showExitDialog"
+        :name="name + '/exitDialog'"
+        :onAction="onDialogAction"
+      />
+    </jsv-focus-block>
+  </div>
+</template>
+
+<style scoped>
+.rootSize {
+  width: 1920;
+  height: 1080;
+  background-color: #334c4c;
+}
+
+.address {
+  width: 1280;
+  height: 30;
+  color: #ffffff;
+  font-size: 20px;
+}
+
+.logo {
+  width: 1280;
+  height: 30;
+  color: #00ff00;
+  font-size: 20px;
+  font-weight: bold;
+  text-align: right;
+}
+</style>

package/samples/FlipCard/App.vue

@@ -0,0 +1,80 @@
+<script>
+import {
+  HORIZONTAL,
+  SimpleWidget,
+} from "jsview/utils/JsViewEngineWidget";
+import FlipCard from "./FlipCard.vue";
+import { data } from "./data.js";
+import redEgg from "./assets/red_egg.png";
+import blueEgg from "./assets/blue_egg.png";
+export default {
+  components: { SimpleWidget, FlipCard },
+  setup() {
+    return {
+      name: "/flipCard",
+      flipCardData: data,
+      direction: HORIZONTAL,
+      redEgg,
+      blueEgg,
+    };
+  },
+  methods: {
+    onKeyDown(ev) {
+      // 8:Backspace, 27:Escape, 10000:盒子返回键
+      if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+        this.$router?.go(-1); // 有router时，是从DemoHomepage进入，回退
+        return true;
+      }
+
+      return false;
+    },
+    measures(item) {
+      return {
+        width: item.blocks.w,
+        height: item.blocks.h,
+        focusable: item.focusable,
+        hasSub: item.hasSub,
+      };
+    },
+    onFocus() {
+      this.$refs.focusNode.findBlockByName(this.name).requestFocus();
+    },
+  },
+};
+</script>
+<template>
+  <jsv-focus-block
+    ref="focusNode"
+    autoFocus
+    :onAction="{
+      onKeyDown: onKeyDown,
+      onFocus: onFocus,
+    }"
+  >
+    <simple-widget
+      :name="name"
+      :width="1280"
+      :height="720"
+      :padding="{ left: 50, top: 100, right: 20, bottom: 20 }"
+      :data="flipCardData"
+      :direction="direction"
+      :measures="measures"
+    >
+      <template #renderItem="{ data, query, onEdge, onAction }">
+        <FlipCard
+          :data="data"
+          :query="query"
+          :onEdge="onEdge"
+          :onAction="onAction"
+          :width="191"
+          :height="252"
+          :backImg="redEgg"
+          :foreImg="blueEgg"
+          :perspective="300"
+          :initFlipped="false"
+          :name="name + '/' + data.id"
+        />
+      </template>
+    </simple-widget>
+  </jsv-focus-block>
+</template>

package/samples/FlipCard/FlipCard.vue

@@ -0,0 +1,124 @@
+<script>
+export default {
+  props: {
+    initFlipped: Boolean,
+    width: Number,
+    height: Number,
+    backImg: String,
+    foreImg: String,
+    perspective: Number,
+    data: Object,
+    query: Object,
+    onEdge: Function,
+    onAction: Object,
+    name: String,
+  },
+  data() {
+    return {
+      flipAnim: "",
+      flipped: this.initFlipped,
+      focused: false,
+      keyLocked: false,
+    };
+  },
+  methods: {
+    onFocus() {
+      this.focused = true;
+      this.$refs.focusNode.findBlockByName(this.name).requestFocus();
+    },
+    onBlur() {
+      this.focused = false;
+    },
+    onClick() {},
+    onFlipped() {
+      this.flipped = !this.flipped;
+      this.keyLocked = false;
+    },
+    onKeyDown(ev) {
+      if (this.keyLocked) {
+        return true;
+      } else {
+        if (ev.keyCode === 13) {
+          // this.keyLocked = true;
+          this.flipAnim = this.flipped ? "flip 1s" : "flipBack 1s";
+          return true;
+        }
+      }
+      return false;
+    },
+  },
+  created() {
+    this.onAction.register("onFocus", this.onFocus);
+    this.onAction.register("onBlur", this.onBlur);
+    this.onAction.register("onClick", this.onClick);
+  },
+};
+</script>
+<template>
+  <jsv-focus-block
+    ref="focusNode"
+    :name="name"
+    :onAction="{
+      onKeyDown: onKeyDown,
+    }"
+  >
+    <div :style="{ width, height, perspective }">
+      <div
+        :style="{
+          width,
+          height,
+          animation: flipAnim,
+          transformStyle: 'preserve-3d',
+          backgroundColor: '#FFFF00',
+        }"
+        :onAnimationEnd="onFlipped"
+      >
+        <div
+          :style="{
+            width,
+            height,
+            backgroundImage: backImg,
+            backfaceVisibility: 'hidden',
+            transform: flipped ? '' : 'rotate3d(0,1,0,180deg)',
+          }"
+        ></div>
+        <div
+          :style="{
+            width,
+            height,
+            backgroundImage: foreImg,
+            backfaceVisibility: 'hidden',
+            transform: flipped ? 'rotate3d(0,1,0,-180deg)' : '',
+          }"
+        ></div>
+      </div>
+    </div>
+    <div
+      v-if="focused"
+      :style="{ width: 20, height: 20, backgroundColor: '#FF0000' }"
+    ></div>
+  </jsv-focus-block>
+</template>
+<style>
+@keyframes flip {
+  from {
+    transform: rotate3d(0, 1, 0, 0deg);
+    transform-origin: center center;
+  }
+  to {
+    transform: rotate3d(0, 1, 0, 180deg);
+    transform-origin: center center;
+  }
+}
+
+@keyframes flipBack {
+  from {
+    transform: rotate3d(0, 1, 0, 0deg);
+    transform-origin: center center;
+  }
+  to {
+    transform: rotate3d(0, 1, 0, -180deg);
+    transform-origin: center center;
+  }
+}
+</style>

package/samples/FlipCard/data.js

@@ -0,0 +1,13 @@
+let data = [];
+for (let i = 0; i < 12; i++) {
+    data.push({
+        blocks: {
+            w: 200,
+            h: 300
+        },
+        focusable: true,
+        id: i
+    });
+}
+
+export { data }

package/samples/FlowMultiWidget/App.vue

@@ -0,0 +1,91 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2021-09-27 13:49:00
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2021-10-15 14:31:05
+ * @Description: file content
+-->
+<script>
+import { menuData, contentData } from "./data.js";
+import FlowPage from "./components/FlowPage.vue";
+import borderImg from "./assets/nine_patch_focus.png";
+import MyMenu from "./components/MyMenu.vue";
+import { ref } from "vue";
+
+export default {
+  components: {
+    FlowPage,
+    MyMenu,
+  },
+  setup() {
+    let showMenu = ref(false);
+    return {
+      menuData,
+      contentData,
+      borderImg,
+      showMenu,
+    };
+  },
+  methods: {
+    onFocus() {
+      this.$refs.rootNode.findBlockByName("/flow").requestFocus();
+    },
+    onKeyDown(ev) {
+      if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+        if (this.showMenu) {
+          this.showMenu = false;
+          this.$refs.rootNode.findBlockByName("/flow").requestFocus();
+        } else {
+          this.$router?.go(-1); // 有router时，是从DemoHomepage进入，回退
+        }
+        return true;
+      }
+
+      switch (ev.keyCode) {
+        case 10001:
+        case 77:
+          //menu key or M
+          this.showMenu = true;
+          //menu自动获得焦点
+          break;
+        case 10000:
+        case 82:
+          //back key or R
+          if (this.showMenu) {
+            this.showMenu = false;
+            this.$refs.rootNode.findBlockByName("/flow").requestFocus();
+          }
+          break;
+      }
+      return true;
+    },
+  },
+};
+</script>
+
+<template>
+  <div
+    :style="{
+      width: 1920,
+      height: 1080,
+      backgroundColor: '#123f80',
+    }"
+  >
+    <div
+      :style="{
+        top: 50,
+        left: 50,
+      }"
+    >
+      <jsv-focus-block
+        ref="rootNode"
+        autoFocus
+        :onKeyDown="onKeyDown"
+        :onFocus="onFocus"
+      >
+        <flow-page name="/flow" :data="contentData" />
+        <my-menu v-if="showMenu" :data="menuData" name="/menu" />
+      </jsv-focus-block>
+    </div>
+  </div>
+</template>

package/samples/FlowMultiWidget/components/Block.vue

@@ -0,0 +1,107 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2021-09-27 13:49:54
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2021-10-15 11:02:22
+ * @Description: file content
+-->
+<script>
+import {
+  HORIZONTAL,
+  SimpleWidget,
+  SWidgetDispatcher,
+} from "jsview/utils/JsViewEngineWidget";
+import Item from "./Item.vue";
+
+export default {
+  components: {
+    SimpleWidget,
+    Item,
+  },
+  props: {
+    data: Object,
+    query: Object,
+    onEdge: Function,
+    onAction: Object,
+    name: String,
+  },
+  setup() {
+    let measures = () => {
+      return {
+        width: 105,
+        height: 162,
+        focusable: true,
+        hasSub: false,
+      };
+    };
+    let dispatcher = new SWidgetDispatcher();
+    return {
+      direction: HORIZONTAL,
+      measures,
+      dispatcher,
+    };
+  },
+  methods: {
+    onFocus(enterRect) {
+      if (enterRect) {
+        const foucsInfo = {
+          type: SWidgetDispatcher.Type.setFocusRect,
+          data: enterRect,
+        };
+        this.dispatcher.dispatch(foucsInfo);
+      }
+      this.$refs.focusNode.findBlockByName(this.name).requestFocus();
+    },
+    onBlur() {
+    },
+    onClick() {
+    },
+  },
+  created() {
+    this.onAction.register("onFocus", this.onFocus);
+    this.onAction.register("onBlur", this.onBlur);
+    this.onAction.register("onClick", this.onClick);
+  },
+};
+</script>
+
+<template>
+  <div class="text">
+    {{ data.title }}
+  </div>
+  <div :style="{ top: 50 }">
+    <jsv-focus-block ref="focusNode">
+      <simple-widget
+        :name="name"
+        :width="data.blocks.w"
+        :height="data.blocks.h"
+        :direction="direction"
+        :padding="{ left: 10, top: 10 }"
+        :data="data.data"
+        :measures="measures"
+        :onEdge="onEdge"
+        :dispatcher="dispatcher"
+      >
+        <template #renderItem="{ data, query, onEdge, onAction }">
+          <item
+            :data="data"
+            :query="query"
+            :onEdge="onEdge"
+            :onAction="onAction"
+          />
+        </template>
+      </simple-widget>
+    </jsv-focus-block>
+  </div>
+</template>
+
+
+<style scoped>
+.text {
+  width: 105px;
+  height: 50px;
+  color: #ffffff;
+  font-size: 25px;
+  line-height: 50px;
+}
+</style>

package/samples/FlowMultiWidget/components/FlowPage.vue

@@ -0,0 +1,60 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2021-09-27 13:50:40
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2021-09-28 14:38:05
+ * @Description: file content
+-->
+<script>
+import {
+  VERTICAL,
+  SimpleWidget,
+} from "jsview/utils/JsViewEngineWidget";
+import Block from "./Block.vue";
+
+export default {
+  components: {
+    Block,
+    SimpleWidget,
+  },
+  props: {
+    data: Object,
+    name: String,
+  },
+  setup() {
+    let measures = () => {
+      return {
+        width: 800,
+        height: 200,
+        focusable: true,
+        hasSub: false,
+      };
+    };
+    return {
+      direction: VERTICAL,
+      measures,
+    };
+  },
+};
+</script>
+
+<template>
+  <simple-widget
+    :name="name"
+    :width="800"
+    :height="600"
+    :direction="direction"
+    :data="data"
+    :measures="measures"
+  >
+    <template #renderItem="{ data, query, onEdge, onAction }">
+      <block
+        :name="name + '/block_' + query.id"
+        :data="data"
+        :query="query"
+        :onEdge="onEdge"
+        :onAction="onAction"
+      />
+    </template>
+  </simple-widget>
+</template>