@shijiu/jsview-vue 0.0.1-beta.0

package/samples/FlowMultiWidget/components/Item.vue

@@ -0,0 +1,103 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2021-09-27 13:49:54
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2021-10-15 10:53:13
+ * @Description: file content
+-->
+<script>
+import borderImg from "../assets/nine_patch_focus.png";
+
+export default {
+  props: {
+    data: Object,
+    query: Object,
+    onEdge: Function,
+    onAction: Object,
+  },
+  computed: {
+    imgClass() {
+      return this.focused ? "focus" : "blur";
+    },
+  },
+  setup(props) {
+    let borderStyle = {
+      borderImage: `url(${borderImg}) 40 fill`,
+      borderImageOutset: "28px 28px 28px 28px",
+      borderImageWidth: "40px",
+      width: 89,
+      height: 121,
+    };
+    let imageStyle = {
+      backgroundImage: props.data.content.url,
+      width: 89,
+      height: 121,
+      borderRadius: "8px 8px 8px 8px",
+    };
+    return {
+      borderImg,
+      borderStyle,
+      imageStyle,
+    };
+  },
+  data() {
+    return {
+      focused: false,
+    };
+  },
+  methods: {
+    onFocus() {
+      this.focused = true;
+    },
+    onBlur() {
+      this.focused = false;
+    },
+    onClick() {},
+  },
+  created() {
+    this.onAction.register("onFocus", this.onFocus);
+    this.onAction.register("onBlur", this.onBlur);
+    this.onAction.register("onClick", this.onClick);
+  },
+};
+</script>
+
+<template>
+  <div :class="imgClass">
+    <div :style="imageStyle" />
+    <div v-if="focused" :style="borderStyle" />
+  </div>
+  <div class="text">
+    {{ this.data.content.title }}
+  </div>
+</template>
+
+<style scoped>
+.focus {
+  width: 89px;
+  height: 121px;
+  transform: scale3d(1.05, 1.05, 1);
+  border-radius: 8px 8px 8px 8px;
+  transition: transform 0.25s linear;
+}
+
+.blur {
+  width: 89px;
+  height: 121px;
+  transform: scale3d(1, 1, 1);
+  border-radius: 8px 8px 8px 8px;
+  transition: transform 0.25s linear;
+}
+
+.text {
+  top: 121px;
+  width: 89px;
+  height: 25px;
+  color: #ffffff;
+  font-size: 12px;
+  line-height: 25px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>

package/samples/FlowMultiWidget/components/MenuItem.vue

@@ -0,0 +1,72 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2021-09-28 16:02:50
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2021-09-28 16:22:24
+ * @Description: file content
+-->
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2021-09-27 13:49:54
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2021-09-28 15:42:49
+ * @Description: file content
+-->
+<script>
+export default {
+  props: {
+    data: Object,
+    query: Object,
+    onEdge: Function,
+    onAction: Object,
+  },
+  computed: {
+    bgStyle() {
+      return {
+        width: 280,
+        height: 40,
+        backgroundColor: this.isFocus ? "#06a7ff" : "#575d8d",
+      };
+    },
+  },
+  data() {
+    return {
+      isFocus: false,
+    };
+  },
+  methods: {
+    onFocus() {
+      this.isFocus = true;
+    },
+    onBlur() {
+      this.isFocus = false;
+    },
+    onClick() {},
+  },
+  created() {
+    this.onAction.register("onFocus", this.onFocus);
+    this.onAction.register("onBlur", this.onBlur);
+    this.onAction.register("onClick", this.onClick);
+  },
+};
+</script>
+
+<template>
+  <div :style="bgStyle">
+    <div class="text">
+      {{ data.title }}
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.text {
+  width: 280px;
+  height: 40px;
+  color: #ececec;
+  font-size: 12px;
+  line-height: 40px;
+  white-space: nowrap;
+  text-align: left;
+}
+</style>

package/samples/FlowMultiWidget/components/MyMenu.vue

@@ -0,0 +1,90 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2021-09-27 13:49:54
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2021-10-25 09:56:36
+ * @Description: file content
+-->
+<script>
+import {
+  VERTICAL,
+  SimpleWidget,
+} from "jsview/utils/JsViewEngineWidget";
+import MenuItem from "./MenuItem.vue";
+
+export default {
+  components: {
+    SimpleWidget,
+    MenuItem,
+  },
+  props: {
+    data: Array,
+    name: String,
+  },
+  setup() {
+    let measures = () => {
+      return {
+        width: 280,
+        height: 50,
+        focusable: true,
+        hasSub: false,
+      };
+    };
+    return {
+      direction: VERTICAL,
+      measures,
+    };
+  },
+  mounted() {
+    this.$refs.focusNode.findBlockByName(this.name).requestFocus();
+  },
+};
+</script>
+
+<template>
+  <div
+    :style="{
+      left: (1280 - 300) / 2,
+      top: (720 - 255) / 2,
+      width: 300,
+      height: 255,
+      backgroundColor: '#000000',
+    }"
+  >
+    <div class="title">菜单</div>
+    <div :style="{ left: 10, top: 45 }">
+      <jsv-focus-block ref="focusNode">
+        <simple-widget
+          :name="name"
+          :width="280"
+          :height="200"
+          :direction="direction"
+          :data="data"
+          :measures="measures"
+        >
+          <template #renderItem="{ data, query, onEdge, onAction }">
+            <menu-item
+              :data="data"
+              :query="query"
+              :onEdge="onEdge"
+              :onAction="onAction"
+            />
+          </template>
+        </simple-widget>
+      </jsv-focus-block>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.title {
+  top: 10px;
+  left: 40px;
+  width: 200px;
+  height: 25px;
+  color: #ffffff;
+  font-size: 22px;
+  white-space: nowrap;
+  text-align: center;
+}
+</style>

package/samples/FlowMultiWidget/data.js

@@ -0,0 +1,446 @@
+/*
+ * @Author: ChenChanghua
+ * @Date: 2021-09-27 14:33:12
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2021-09-28 16:27:04
+ * @Description: file content
+ */
+const menuData = [
+  {
+    focusable: true,
+    hasSub: false,
+    id: 0,
+    title: "电视剧",
+  },
+  {
+    focusable: true,
+    hasSub: false,
+    id: 1,
+    title: "影视",
+  },
+  {
+    focusable: true,
+    hasSub: false,
+    id: 2,
+    title: "综艺",
+  },
+  {
+    focusable: true,
+    hasSub: false,
+    id: 3,
+    title: "综艺",
+  },
+];
+
+const contentData = [
+  {
+    blocks: {
+      w: 800,
+      h: 200,
+    },
+    focusable: true,
+    hasSub: true,
+    id: 0,
+    title: "电视剧",
+    data: [
+      {
+        focusable: true,
+        color: "#000022",
+        content: {
+          url:
+            "http://oss.image.51vtv.cn/homepage/20191224/0fdcdc8b258fe7baac16b73f58f8989d.jpg",
+          title: "剑王朝",
+        },
+      },
+      {
+        focusable: true,
+        color: "#003300",
+        content: {
+          url:
+            "http://oss.image.51vtv.cn/homepage/20191216/d0b14128b1783e5188de6ca98e6b5d05.jpg",
+          title: "我和我的祖国",
+        },
+      },
+
+      {
+        focusable: true,
+        color: "#000055",
+        content: {
+          url:
+            "http://oss.image.51vtv.cn/homepage/20191224/6235ab61a3c89ef2997b4c0441d91eae.jpg",
+          title: "汪汪队立大功第4季",
+        },
+      },
+
+      {
+        focusable: true,
+        color: "#0000CD",
+        content: {
+          url:
+            "http://oss.image.51vtv.cn/homepage/20191224/bded4e88fd610b7107c9836f5d5db959.jpg",
+          title: "变形警车珀利消防安全篇",
+        },
+      },
+      {
+        focusable: true,
+        color: "#000022",
+        content: {
+          url:
+            "http://oss.image.51vtv.cn/homepage/20191224/259f41751aa9642c5d543114a71b070a.png",
+          title: "迪士尼电影",
+        },
+      },
+      {
+        focusable: true,
+        color: "#000022",
+        content: {
+          url:
+            "http://oss.image.51vtv.cn/homepage/20190618/e449792161d2e66f39f6608f70c6c89b.png",
+          title: "灯塔慧",
+        },
+      },
+    ],
+  },
+  {
+    blocks: {
+      w: 800,
+      h: 200,
+    },
+    focusable: true,
+    hasSub: true,
+    id: 1,
+    title: "影视",
+    data: [
+      {
+        focusable: true,
+        color: "#000022",
+        content: {
+          url:
+            "http://oss.image.51vtv.cn/homepage/20191224/0fdcdc8b258fe7baac16b73f58f8989d.jpg",
+          title: "剑王朝",
+        },
+      },
+      {
+        focusable: true,
+        color: "#003300",
+        content: {
+          url:
+            "http://oss.image.51vtv.cn/homepage/20191216/d0b14128b1783e5188de6ca98e6b5d05.jpg",
+          title: "我和我的祖国",
+        },
+      },
+
+      {
+        focusable: true,
+        color: "#000055",
+        content: {
+          url:
+            "http://oss.image.51vtv.cn/homepage/20191224/6235ab61a3c89ef2997b4c0441d91eae.jpg",
+          title: "汪汪队立大功第4季",
+        },
+      },
+
+      {
+        focusable: true,
+        color: "#0000CD",
+        content: {
+          url:
+            "http://oss.image.51vtv.cn/homepage/20191224/bded4e88fd610b7107c9836f5d5db959.jpg",
+          title: "变形警车珀利消防安全篇",
+        },
+      },
+      {
+        focusable: true,
+        color: "#000022",
+        content: {
+          url:
+            "http://oss.image.51vtv.cn/homepage/20191224/259f41751aa9642c5d543114a71b070a.png",
+          title: "迪士尼电影",
+        },
+      },
+      {
+        focusable: true,
+        color: "#000022",
+        content: {
+          url:
+            "http://oss.image.51vtv.cn/homepage/20190618/e449792161d2e66f39f6608f70c6c89b.png",
+          title: "灯塔慧",
+        },
+      },
+    ],
+  },
+  {
+    blocks: {
+      w: 800,
+      h: 200,
+    },
+    focusable: true,
+    hasSub: true,
+    id: 2,
+    title: "综艺",
+    data: [
+      {
+        focusable: true,
+        color: "#000022",
+        content: {
+          url:
+            "http://oss.image.51vtv.cn/homepage/20191224/0fdcdc8b258fe7baac16b73f58f8989d.jpg",
+          title: "剑王朝",
+        },
+      },
+      {
+        focusable: true,
+        color: "#003300",
+        content: {
+          url:
+            "http://oss.image.51vtv.cn/homepage/20191216/d0b14128b1783e5188de6ca98e6b5d05.jpg",
+          title: "我和我的祖国",
+        },
+      },
+
+      {
+        focusable: true,
+        color: "#000055",
+        content: {
+          url:
+            "http://oss.image.51vtv.cn/homepage/20191224/6235ab61a3c89ef2997b4c0441d91eae.jpg",
+          title: "汪汪队立大功第4季",
+        },
+      },
+
+      {
+        focusable: true,
+        color: "#0000CD",
+        content: {
+          url:
+            "http://oss.image.51vtv.cn/homepage/20191224/bded4e88fd610b7107c9836f5d5db959.jpg",
+          title: "变形警车珀利消防安全篇",
+        },
+      },
+      {
+        focusable: true,
+        color: "#000022",
+        content: {
+          url:
+            "http://oss.image.51vtv.cn/homepage/20191224/259f41751aa9642c5d543114a71b070a.png",
+          title: "迪士尼电影",
+        },
+      },
+      {
+        focusable: true,
+        color: "#000022",
+        content: {
+          url:
+            "http://oss.image.51vtv.cn/homepage/20190618/e449792161d2e66f39f6608f70c6c89b.png",
+          title: "灯塔慧",
+        },
+      },
+    ],
+  },
+  {
+    blocks: {
+      w: 800,
+      h: 200,
+    },
+    focusable: true,
+    hasSub: true,
+    id: 3,
+    title: "电视剧",
+    data: [
+      {
+        focusable: true,
+        color: "#000022",
+        content: {
+          url:
+            "http://oss.image.51vtv.cn/homepage/20191224/0fdcdc8b258fe7baac16b73f58f8989d.jpg",
+          title: "剑王朝",
+        },
+      },
+      {
+        focusable: true,
+        color: "#003300",
+        content: {
+          url:
+            "http://oss.image.51vtv.cn/homepage/20191216/d0b14128b1783e5188de6ca98e6b5d05.jpg",
+          title: "我和我的祖国",
+        },
+      },
+
+      {
+        focusable: true,
+        color: "#000055",
+        content: {
+          url:
+            "http://oss.image.51vtv.cn/homepage/20191224/6235ab61a3c89ef2997b4c0441d91eae.jpg",
+          title: "汪汪队立大功第4季",
+        },
+      },
+
+      {
+        focusable: true,
+        color: "#0000CD",
+        content: {
+          url:
+            "http://oss.image.51vtv.cn/homepage/20191224/bded4e88fd610b7107c9836f5d5db959.jpg",
+          title: "变形警车珀利消防安全篇",
+        },
+      },
+      {
+        focusable: true,
+        color: "#000022",
+        content: {
+          url:
+            "http://oss.image.51vtv.cn/homepage/20191224/259f41751aa9642c5d543114a71b070a.png",
+          title: "迪士尼电影",
+        },
+      },
+      {
+        focusable: true,
+        color: "#000022",
+        content: {
+          url:
+            "http://oss.image.51vtv.cn/homepage/20190618/e449792161d2e66f39f6608f70c6c89b.png",
+          title: "灯塔慧",
+        },
+      },
+    ],
+  },
+  {
+    blocks: {
+      w: 800,
+      h: 200,
+    },
+    focusable: true,
+    hasSub: true,
+    id: 4,
+    title: "影视",
+    data: [
+      {
+        focusable: true,
+        color: "#000022",
+        content: {
+          url:
+            "http://oss.image.51vtv.cn/homepage/20191224/0fdcdc8b258fe7baac16b73f58f8989d.jpg",
+          title: "剑王朝",
+        },
+      },
+      {
+        focusable: true,
+        color: "#003300",
+        content: {
+          url:
+            "http://oss.image.51vtv.cn/homepage/20191216/d0b14128b1783e5188de6ca98e6b5d05.jpg",
+          title: "我和我的祖国",
+        },
+      },
+
+      {
+        focusable: true,
+        color: "#000055",
+        content: {
+          url:
+            "http://oss.image.51vtv.cn/homepage/20191224/6235ab61a3c89ef2997b4c0441d91eae.jpg",
+          title: "汪汪队立大功第4季",
+        },
+      },
+
+      {
+        focusable: true,
+        color: "#0000CD",
+        content: {
+          url:
+            "http://oss.image.51vtv.cn/homepage/20191224/bded4e88fd610b7107c9836f5d5db959.jpg",
+          title: "变形警车珀利消防安全篇",
+        },
+      },
+      {
+        focusable: true,
+        color: "#000022",
+        content: {
+          url:
+            "http://oss.image.51vtv.cn/homepage/20191224/259f41751aa9642c5d543114a71b070a.png",
+          title: "迪士尼电影",
+        },
+      },
+      {
+        focusable: true,
+        color: "#000022",
+        content: {
+          url:
+            "http://oss.image.51vtv.cn/homepage/20190618/e449792161d2e66f39f6608f70c6c89b.png",
+          title: "灯塔慧",
+        },
+      },
+    ],
+  },
+  {
+    blocks: {
+      w: 800,
+      h: 200,
+    },
+    focusable: true,
+    hasSub: true,
+    id: 5,
+    title: "综艺",
+    data: [
+      {
+        focusable: true,
+        color: "#000022",
+        content: {
+          url:
+            "http://oss.image.51vtv.cn/homepage/20191224/0fdcdc8b258fe7baac16b73f58f8989d.jpg",
+          title: "剑王朝",
+        },
+      },
+      {
+        focusable: true,
+        color: "#003300",
+        content: {
+          url:
+            "http://oss.image.51vtv.cn/homepage/20191216/d0b14128b1783e5188de6ca98e6b5d05.jpg",
+          title: "我和我的祖国",
+        },
+      },
+
+      {
+        focusable: true,
+        color: "#000055",
+        content: {
+          url:
+            "http://oss.image.51vtv.cn/homepage/20191224/6235ab61a3c89ef2997b4c0441d91eae.jpg",
+          title: "汪汪队立大功第4季",
+        },
+      },
+
+      {
+        focusable: true,
+        color: "#0000CD",
+        content: {
+          url:
+            "http://oss.image.51vtv.cn/homepage/20191224/bded4e88fd610b7107c9836f5d5db959.jpg",
+          title: "变形警车珀利消防安全篇",
+        },
+      },
+      {
+        focusable: true,
+        color: "#000022",
+        content: {
+          url:
+            "http://oss.image.51vtv.cn/homepage/20191224/259f41751aa9642c5d543114a71b070a.png",
+          title: "迪士尼电影",
+        },
+      },
+      {
+        focusable: true,
+        color: "#000022",
+        content: {
+          url:
+            "http://oss.image.51vtv.cn/homepage/20190618/e449792161d2e66f39f6608f70c6c89b.png",
+          title: "灯塔慧",
+        },
+      },
+    ],
+  },
+];
+
+export { menuData, contentData };