@shijiu/jsview-vue-samples 1.9.747

package/MetroWidgetDemos/WidgetItem.vue

@@ -0,0 +1,89 @@
+
+<script setup>
+import { HORIZONTAL, MetroWidget, useFocusHub } from "jsview";
+import { ref, shallowRef } from "vue";
+import Item from "./Item.vue";
+
+const props = defineProps({
+  data: Object,
+  query: Object,
+  onItemEdge: Function,
+  onAction: Object,
+});
+const focusHub = useFocusHub();
+const mwRef = shallowRef(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/MetroWidgetDemos/data.js

@@ -0,0 +1,205 @@
+/*
+ * @Author: ChenChanghua
+ * @Date: 2022-07-11 14:00:33
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-11-02 15:23:08
+ * @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,
+    index: i,
+  });
+}
+
+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,
+};

package/NinePatchDemo/App.vue

@@ -0,0 +1,145 @@
+<script setup>
+import {
+  jJsvRuntimeBridge,
+  MetroWidget,
+  HORIZONTAL,
+  JsvNinePatch,
+} from "jsview";
+import Item from "./Item.vue";
+import borderImageUrl from "./assets/border.png";
+import { ref, shallowRef, onMounted } from "vue";
+import { useRouter, useRoute } from "vue-router";
+
+const router = useRouter();
+
+const data = [
+  {
+    blocks: {
+      w: 160,
+      h: 160,
+    },
+    color: "#FF9900",
+    content: 0,
+  },
+  {
+    blocks: {
+      w: 300,
+      h: 300,
+    },
+    color: "#0099FF",
+    content: 1,
+  },
+  {
+    blocks: {
+      w: 160,
+      h: 160,
+    },
+    color: "#FF9900",
+    content: 2,
+  },
+];
+
+const framePosition = ref({
+  x: 0,
+  y: 0,
+  width: 50,
+  height: 50,
+});
+
+const _onFramePositionChanged = (new_x, new_y, new_width, new_height) => {
+  console.log(
+    `new x=${new_x} y=${new_y} width=${new_width} height=${new_height}`
+  );
+
+  framePosition.value = {
+    x: new_x,
+    y: new_y,
+    width: new_width,
+    height: new_height,
+  };
+};
+
+const _measures = (item) => {
+  return {
+    width: item.blocks.w,
+    height: item.blocks.h,
+    marginRight: 10,
+    marginTop: 10,
+  };
+};
+
+const _onKeyDown = (ev) => {
+  // 8:Backspace, 27:Escape, 10000:盒子返回键
+  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+    router?.go(-1); // 有router时，是从DemoHomepage进入，回退
+    return true;
+  }
+  return false;
+};
+
+const myFocusWidget = shallowRef(null);
+
+onMounted(() => {
+  myFocusWidget.value.getFocusBlockRef().requestFocus();
+  jJsvRuntimeBridge.notifyPageLoaded();
+});
+</script>
+
+<template>
+  <div :style="{ width: 1280, height: 720, backgroundColor: '#FFFFFF' }">
+    <jsv-focus-block ref="focusNode" :onKeyDown="_onKeyDown">
+      <div
+        :style="{
+          textAlign: 'center',
+          fontSize: 30,
+          lineHeight: 50,
+          color: '#ffffff',
+          left: 140,
+          top: 20,
+          width: 1000,
+          height: 50,
+          backgroundColor: 'rgba(27,38,151,0.8)',
+        }"
+      >
+        NinePatch展示,框的四个角的方形中心和项目的四个顶点严格对齐
+      </div>
+      <metro-widget
+        ref="myFocusWidget"
+        :top="100"
+        :left="250"
+        :width="1000"
+        :height="400"
+        :direction="HORIZONTAL"
+        :data="data"
+        :measures="_measures"
+        :padding="{ left: 50, right: 50, top: 50, height: 50 }"
+      >
+        <template #renderItem="{ data, query, onEdge, onAction }">
+          <item
+            :data="data"
+            :query="query"
+            :onEdge="onEdge"
+            :onAction="onAction"
+            :frameChanged="_onFramePositionChanged"
+          />
+        </template>
+      </metro-widget>
+      <div :style="{ top: 150, left: 300 }">
+        <jsv-nine-patch
+          :style="{
+            width: framePosition.width,
+            height: framePosition.height,
+            top: framePosition.y,
+            left: framePosition.x,
+          }"
+          :imageUrl="borderImageUrl"
+          :imageWidth="81"
+          :centerWidth="25"
+          :borderOutset="14"
+          :imageDspWidth="81"
+          :animTime="0.2"
+        ></jsv-nine-patch>
+      </div>
+    </jsv-focus-block>
+  </div>
+</template>

package/NinePatchDemo/Item.vue

@@ -0,0 +1,69 @@
+<script setup>
+import { ref, shallowRef, computed } from "vue";
+
+const props = defineProps({
+  data: Object,
+  query: Object,
+  onEdge: Function,
+  onAction: Object,
+  frameChanged: Function,
+});
+
+let focused = ref(false);
+
+let styleValue = computed(() => {
+  return {
+    width: props.data.blocks.w,
+    height: props.data.blocks.h,
+    color: "#FFFFFF",
+    backgroundColor: props.data.color,
+  };
+});
+
+const onFocus = () => {
+  focused.value = true;
+  if (props.frameChanged) {
+    let pos = props.query.position(props.query.id);
+
+    // 焦点时套在放大的item外缘，所以要计算按照中心放大后的焦点框x,y,width,height
+    const new_x = pos.left + (pos.width - pos.width * 1.05) / 2;
+    const new_y = pos.top + (pos.height - pos.height * 1.05) / 2;
+    const new_width = pos.width * 1.05;
+    const new_height = pos.height * 1.05;
+
+    props.frameChanged(new_x, new_y, new_width, new_height);
+  }
+};
+
+const onBlur = () => {
+  focused.value = false;
+};
+
+const onClicked = () => {
+  onsole.log(`item ${props.query.id} clicked`);
+};
+
+props.onAction.register("onFocus", onFocus);
+props.onAction.register("onBlur", onBlur);
+props.onAction.register("onClick", onClicked);
+</script>
+
+<template>
+  <div :class="focused ? 'focus' : 'blur'" :style="styleValue">
+    {{ "" + props.data.content }}
+  </div>
+</template>
+
+<style scoped>
+.focus {
+  transform: scale3d(1.05, 1.05, 1);
+  transition: transform 0.25s linear;
+  font-size: 30px;
+}
+
+.blur {
+  transform: scale3d(1, 1, 1);
+  transition: transform 0.25s linear;
+  font-size: 30px;
+}
+</style>

package/Preload/App.vue

@@ -0,0 +1,135 @@
+<script setup>
+import {
+  HORIZONTAL,
+  MetroWidget,
+  JsvPreload,
+  buildPreloadInfo,
+  buildDownloadInfo,
+  useFocusHub,
+} from "jsview";
+import awesome from "./images/awesomeface.png";
+import cat from "./images/cat.jpg";
+import { data } from "./data.js";
+import Item from "./Item.vue";
+import { ref, shallowRef } from "vue";
+import { useRouter } from "vue-router";
+
+const name = "/preload";
+const focusHub = useFocusHub();
+const text = ref("");
+let preloadInfo = [];
+let downloadInfo = [];
+const router = useRouter();
+
+const _onPreloading = (percent) => {
+  console.log("preloading ", percent);
+};
+
+const _onPreloadDone = (imageInfo) => {
+  console.log("PRELOAD DONE!", imageInfo);
+};
+
+const _onDownloadDone = (urls, extra) => {
+  console.log("DOWNLOAD DONE!", urls, extra);
+  text.value = `图片下载完成\n${awesome}\n${cat}`;
+};
+
+const _measures = () => {
+  return {
+    width: 180,
+    height: 90,
+    focusable: true,
+  };
+};
+
+const _onKeyDown = (ev) => {
+  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+    router?.go(-1); // 有router时，是从DemoHomepage进入，回退
+  }
+  return true;
+};
+
+const _onFocus = () => {
+  focusHub.setFocus(name);
+};
+
+for (const item of data) {
+  preloadInfo.push(buildPreloadInfo(item.url));
+  preloadInfo.push(buildPreloadInfo(item.focusUrl));
+}
+preloadInfo.push(null); // 测试item为null的加载
+downloadInfo = [
+  buildDownloadInfo(awesome, null, true),
+  buildDownloadInfo(cat, null, true),
+  buildDownloadInfo(null), // 测试URL为null的加载
+];
+</script>
+
+<template>
+  <jsv-focus-block
+    autoFocus
+    :style="{
+      width: 1920,
+      height: 1080,
+      backgroundColor: '#FFFFFF',
+    }"
+    :onAction="{
+      onKeyDown: _onKeyDown,
+      onFocus: _onFocus,
+    }"
+  >
+    <div
+      :style="{
+        textAlign: 'center',
+        fontSize: '30px',
+        lineHeight: '50px',
+        color: '#ffffff',
+        left: 100,
+        top: 20,
+        width: 1280 - 200,
+        height: 50,
+        backgroundColor: 'rgba(27,38,151,0.8)',
+      }"
+    >
+      预加载后，图片(按钮焦点切换)切换不闪屏
+    </div>
+    <div :style="{ top: 200, left: 300 }">
+      <metro-widget
+        :name="name"
+        :width="540"
+        :height="90"
+        :direction="HORIZONTAL"
+        :data="data"
+        :measures="_measures"
+      >
+        <template #renderItem="{ data, query, onEdge, onAction }">
+          <item
+            :data="data"
+            :query="query"
+            :onEdge="onEdge"
+            :onAction="onAction"
+          />
+        </template>
+      </metro-widget>
+    </div>
+    <div
+      :style="{
+        left: 100,
+        top: 350,
+        width: 800,
+        height: 800,
+        fontSize: '30px',
+        color: '#000000',
+      }"
+    >
+      {{ text }}
+    </div>
+    <jsv-preload
+      :preloadList="preloadInfo"
+      :downloadList="downloadInfo"
+      :onPreloadDone="_onPreloadDone"
+      :onDownloadDone="_onDownloadDone"
+      :onPreloading="_onPreloading"
+    />
+  </jsv-focus-block>
+</template>

package/Preload/Item.vue

@@ -0,0 +1,32 @@
+<script setup>
+import { ref, shallowRef } from "vue";
+const props = defineProps({
+  data: Object,
+  query: Object,
+  onEdge: Function,
+  onAction: Object,
+});
+const focus = ref(false);
+
+const onFocus = () => {
+  focus.value = true;
+};
+const onBlur = () => {
+  focus.value = false;
+};
+props.onAction.register("onFocus", onFocus);
+props.onAction.register("onBlur", onBlur);
+props.onAction.register("onClick", () => {
+  console.log("cchtest item on click ", data);
+});
+</script>
+
+<template>
+  <div
+    :style="{
+      width: 166,
+      height: 90,
+      backgroundImage: focus ? data.focusUrl : data.url,
+    }"
+  ></div>
+</template>

package/Preload/data.js

@@ -0,0 +1,23 @@
+import rank from "./images/rank.png";
+import rankF from "./images/rank_focus.png";
+import rule from "./images/rule.png";
+import ruleF from "./images/rule_focus.png";
+import start from "./images/start.png";
+import startF from "./images/start_focus.png";
+
+const data = [
+    {
+        url: rank,
+        focusUrl: rankF,
+    },
+    {
+        url: start,
+        focusUrl: startF
+    },
+    {
+        url: rule,
+        focusUrl: ruleF,
+    },
+];
+
+export { data };