@shijiu/jsview-vue 1.9.731 → 1.9.747

package/samples/MetroWidgetDemos/WidgetItem.vue

@@ -1,89 +0,0 @@
-
-<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/samples/MetroWidgetDemos/data.js

@@ -1,205 +0,0 @@
-/*
- * @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/samples/NinePatchDemo/App.vue

@@ -1,145 +0,0 @@
-<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/samples/NinePatchDemo/Item.vue

@@ -1,69 +0,0 @@
-<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/samples/Preload/App.vue

@@ -1,135 +0,0 @@
-<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/samples/Preload/Item.vue

@@ -1,32 +0,0 @@
-<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/samples/Preload/data.js

@@ -1,23 +0,0 @@
-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 };