@shijiu/jsview-vue 1.9.731 → 1.9.759

package/samples/DemoHomepage/components/Dialog.vue

@@ -1,94 +0,0 @@
-<script>
-export default {
-  props: {
-    name: String,
-    onAction: Function,
-  },
-  data() {
-    return {
-      focusId: 0,
-    };
-  },
-  methods: {
-    onKeyDown(ev) {
-      switch (ev.keyCode) {
-        case 37:
-          if (this.focusId == 1) {
-            this.focusId = 0;
-          }
-          break;
-        case 39:
-          if (this.focusId == 0) {
-            this.focusId = 1;
-          }
-          break;
-        case 10000:
-        case 27:
-          this.onAction("back");
-          break;
-        case 13:
-          this.onAction(this.focusId == 0 ? "ok" : "cancel");
-          break;
-        default:
-      }
-      return true;
-    },
-  },
-};
-</script>
-
-<template>
-  <jsv-focus-block
-    autoFocus
-    :name="name"
-    :onAction="{
-      onKeyDown: onKeyDown,
-    }"
-  >
-    <div :style="{ top: 200, left: 465 }">
-      <div class="background"></div>
-      <div class="message">是否退出</div>
-      <div :style="{ top: 120, left: 30 }">
-        <div v-if="focusId == 0" class="focus"></div>
-        <div class="normal">确定</div>
-      </div>
-      <div :style="{ top: 120, left: 220 }">
-        <div v-if="focusId == 1" class="focus"></div>
-        <div class="normal">取消</div>
-      </div>
-    </div>
-  </jsv-focus-block>
-</template>
-
-<style scoped>
-.focus {
-  top: -5px;
-  left: -5px;
-  width: 100px;
-  height: 50px;
-  background-color: #0000ff;
-}
-
-.normal {
-  width: 90px;
-  height: 40px;
-  color: #ffffff;
-  text-align: center;
-  font-size: 30px;
-}
-.background {
-  left: 0px;
-  top: 0px;
-  width: 350px;
-  height: 200px;
-  background-color: rgba(0, 0, 0, 0.7);
-}
-.message {
-  top: 20px;
-  width: 350px;
-  height: 50px;
-  color: #ffffff;
-  font-size: 40px;
-  text-align: center;
-}
-</style>

package/samples/DemoHomepage/components/Item.vue

@@ -1,77 +0,0 @@
-<script>
-export default {
-  props: {
-    style: Object,
-    itemClick: Function,
-    itemFocus: Function,
-    data: Object,
-    query: Object,
-    onEdge: Function,
-    onAction: Object,
-  },
-  data() {
-    return {
-      focused: false,
-      anim: "flip 1s",
-    };
-  },
-  computed: {
-    foucsStyle() {
-      return {
-        width: this.style.width,
-        height: this.style.height,
-      };
-    },
-    itemStyle() {
-      return {
-        width: this.style.width - 10,
-        height: this.style.height - 10,
-        backgroundColor: this.style.backgroundColor,
-        color: this.style.color,
-      };
-    },
-  },
-  methods: {
-    onFocus() {
-      this.focused = true;
-      if (this.itemFocus) {
-        this.itemFocus(this.data);
-      }
-    },
-    onBlur() {
-      this.focused = false;
-    },
-    onClick() {
-      if (this.itemClick) {
-        this?.itemClick(this.query.id, this.data);
-      }
-    },
-  },
-  created() {
-    this.onAction.register("onFocus", this.onFocus);
-    this.onAction.register("onBlur", this.onBlur);
-    this.onAction.register("onClick", this.onClick);
-  },
-};
-</script>
-
-<template>
-  <div>
-    <div class="focus" :style="foucsStyle" v-if="focused" />
-    <div class="item" :style="itemStyle">
-      <slot></slot>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.focus {
-  top: -5;
-  left: -5;
-  background-color: #0000ff;
-}
-.item {
-  text-align: center;
-  font-size: 30;
-}
-</style>

package/samples/DemoHomepage/components/TabFrame.vue

@@ -1,85 +0,0 @@
-<script>
-import { MetroWidget, VERTICAL } from "jsview";
-import Item from "./Item.vue";
-
-const measures = (item) => {
-  return {
-    width: item.width,
-    height: item.height,
-    focusable: item.focusable,
-  };
-};
-
-export default {
-  components: {
-    MetroWidget,
-    Item,
-  },
-  props: {
-    name: String,
-    itemFocus: Function,
-    onEdge: Function,
-    initId: Number,
-  },
-  setup() {
-    const width = 1280;
-    const height = 100;
-    const data = [
-      {
-        width: 200,
-        height: 50,
-        name: "功能实例",
-        focusable: true,
-        id: 0,
-      },
-      {
-        width: 200,
-        height: 50,
-        name: "MetroWidget",
-        focusable: true,
-        id: 1,
-      },
-    ];
-    const direction = VERTICAL;
-    return {
-      width,
-      height,
-      data,
-      direction,
-      measures,
-    };
-  },
-};
-</script>
-
-<template>
-  <metro-widget
-    :name="name"
-    :width="width"
-    :height="height"
-    :direction="direction"
-    :data="data"
-    :measures="measures"
-    :padding="{ left: 10, top: 10, right: 10, bottom: 10 }"
-    :onEdge="onEdge"
-    :initFocusId="initId"
-  >
-    <template #renderItem="{ data, query, onEdge, onAction }">
-      <Item
-        :style="{
-          width: data.width,
-          height: data.height,
-          backgroundColor: '#00AA00',
-          color: '#FFFFFF',
-        }"
-        :data="data"
-        :query="query"
-        :onEdge="onEdge"
-        :onAction="onAction"
-        :itemFocus="itemFocus"
-      >
-        {{ data.name }}
-      </Item>
-    </template>
-  </metro-widget>
-</template>

package/samples/DemoHomepage/router.js

@@ -1,196 +0,0 @@
-import { createRouter } from "vue-router";
-import { jsvCreateHashHistory } from "jsview";
-
-const routeList = [
-  // 功能实例
-  {
-    name: "Home",
-    path: "/",
-    component: () => import("./views/Homepage.vue"),
-  },
-  {
-    name: "基础示例合集",
-    path: "/feature/Basic",
-    component: () => import("jsview/samples/Basic/App.vue"),
-  },
-  {
-    name: "可视化变化通知",
-    path: "/feature/VisibleSensorDemo",
-    component: () => import("jsview/samples/VisibleSensorDemo/App.vue"),
-  },
-  {
-    name: "快速刷新的表格布局组件",
-    path: "/feature/GridDemo",
-    component: () => import("jsview/samples/GridDemo/App.vue"),
-  },
-  {
-    name: ".9图焦点框漂移",
-    path: "/feature/NinePatchDemo",
-    component: () => import("jsview/samples/NinePatchDemo/App.vue"),
-  },
-  {
-    name: "视频",
-    path: "/feature/VideoDemo",
-    component: () => import("jsview/samples/VideoDemo/App.vue"),
-  },
-  {
-    name: "焦点切换demo",
-    path: "/feature/BasicFocusControl",
-    component: () => import("jsview/samples/BasicFocusControl/App.vue"),
-  },
-  {
-    name: "Hash方式路由切换",
-    path: "/feature/HashHistory",
-    props: { routePath: "/feature/HashHistory" },
-    component: () => import("jsview/samples/HashHistory/App.vue"),
-  },
-  {
-    name: "翻牌游戏",
-    path: "/feature/FlipCard",
-    component: () => import("jsview/samples/FlipCard/App.vue"),
-  },
-  {
-    name: "设置颜色空间",
-    path: "/feature/ColorSpace",
-    component: () => import("jsview/samples/ColorSpace/App.vue"),
-  },
-  {
-    name: "制定Texture尺寸",
-    path: "/feature/TextureSize",
-    component: () => import("jsview/samples/TextureSize/App.vue"),
-  },
-  {
-    name: "动图",
-    path: "/feature/AnimPicture",
-    component: () => import("jsview/samples/AnimPicture/App.vue"),
-  },
-  {
-    name: "粒子效果",
-    path: "/feature/SprayView",
-    component: () => import("jsview/samples/SprayView/App.vue"),
-  },
-  {
-    name: "长文字",
-    path: "/feature/LongText",
-    component: () => import("jsview/samples/LongText/App.vue"),
-  },
-  {
-    name: "长图片",
-    path: "/feature/LongImage",
-    component: () => import("jsview/samples/LongImage/App.vue"),
-  },
-  {
-    name: "二维码",
-    path: "/feature/QrcodeDemo",
-    component: () => import("jsview/samples/QrcodeDemo/App.vue"),
-  },
-  {
-    name: "文字阴影",
-    path: "/feature/TextShadowDemo",
-    component: () => import("jsview/samples/TextShadowDemo/App.vue"),
-  },
-  {
-    name: "多行文字区域内对齐",
-    path: "/feature/TextBox",
-    component: () => import("jsview/samples/TextBox/App.vue"),
-  },
-  {
-    name: "抛物运动写法样例",
-    path: "/feature/ThrowMoveDemo",
-    component: () => import("jsview/samples/ThrowMoveDemo/App.vue"),
-  },
-  {
-    name: "精灵图",
-    path: "/feature/SpriteImage",
-    component: () => import("jsview/samples/SpriteImage/App.vue"),
-  },
-  {
-    name: "文字滚动(标题跑马灯)",
-    path: "/feature/Marquee",
-    component: () => import("jsview/samples/Marquee/App.vue"),
-  },
-  {
-    name: "文字输入",
-    path: "/feature/Input",
-    component: () => import("jsview/samples/Input/App.vue"),
-  },
-  {
-    name: "拼图demo",
-    path: "/feature/MaskClip",
-    component: () => import("jsview/samples/MaskClip/App.vue"),
-  },
-  {
-    name: "SoundPool",
-    path: "/feature/SoundPool",
-    component: () => import("jsview/samples/SoundPool/App.vue"),
-  },
-  {
-    name: "TextureAnimation",
-    path: "/feature/TextureAnimation",
-    component: () => import("jsview/samples/TextureAnimation/App.vue"),
-  },
-  {
-    name: "焦点框旋转光效果",
-    path: "/feature/TextureAnimation2",
-    component: () => import("jsview/samples/TextureAnimation/App2.vue"),
-  },
-  {
-    name: "公祭日黑白效果",
-    path: "/feature/FilterDemo",
-    component: () => import("jsview/samples/FilterDemo/App.vue"),
-  },
-  {
-    name: "预加载",
-    path: "/feature/Preload",
-    component: () => import("jsview/samples/Preload/App.vue"),
-  },
-  {
-    name: "图片缩小算法",
-    path: "/feature/ScaleDownNeon",
-    component: () => import("jsview/samples/ScaleDownNeon/App.vue"),
-  },
-  // {
-  //   name: "碰撞检测",
-  //   path: "/feature/Collision",
-  //   component: () => import("jsview/samples/Collision/App"),
-  // },
-  // {
-  //   name: "碰撞即停",
-  //   path: "/feature/ImpactStop",
-  //   component: () => import("jsview/samples/ImpactStop/App"),
-  // },
-
-  // MetroWidget示例
-  {
-    name: "简单示例",
-    path: "/metroWidget/Simple",
-    component: () => import("jsview/samples/MetroWidgetDemos/Simple/App.vue"),
-  },
-  {
-    name: "嵌套示例",
-    path: "/metroWidget/Advanced",
-    component: () => import("jsview/samples/MetroWidgetDemos/Advanced/App.vue"),
-  },
-  {
-    name: "性能测试",
-    path: "/metroWidget/PerformanceTest",
-    component: () =>
-      import("jsview/samples/MetroWidgetDemos/PerformanceTest/App.vue"),
-  },
-  {
-    name: "乒乓模式",
-    path: "/metroWidget/PingPong",
-    component: () =>
-      import("jsview/samples/MetroWidgetDemos/PingPong/App.vue"),
-  },
-];
-
-const router = createRouter({
-  // 浏览器调试和盒子上都可以使用类WebHashHistory的jsvCreateHashHistory(推荐)
-  // 或 createMemoryHistory;
-  // createWebHashHistory只能用于浏览器调试，盒子不支持
-  history: jsvCreateHashHistory(),
-  routes: routeList,
-});
-
-export { router, routeList };

package/samples/DemoHomepage/views/Homepage.vue

@@ -1,195 +0,0 @@
-<script>
-import { jJsvRuntimeBridge, EdgeDirection } from "jsview";
-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 metroWidgetData = [];
-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("metroWidget") >= 0) {
-    obj.backgroundColor = colorTemplete[metroWidgetData.length % 4];
-    metroWidgetData.push(obj);
-  }
-}
-const dataList = [featureData, metroWidgetData];
-
-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) {
-      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;
-      }
-    },
-  },
-  created() {
-    if (typeof localStorage.curTab !== "undefined") {
-      this.tabId = parseInt(localStorage.curTab);
-    }
-    localStorage.curTab = 0;
-    this.contentData = dataList[this.tabId];
-  },
-  mounted() {},
-  beforeUnmount() {},
-};
-</script>
-
-<template>
-  <div class="rootSize">
-    <div class="address">
-      {{ address }}
-    </div>
-    <div class="logo">JsView-Vue3(Vite3)</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"
-          :initId="tabId"
-        />
-      </div>
-
-      <div
-        :style="{
-          left: 10,
-          top: 100,
-        }"
-      >
-        <body-frame
-          :data="contentData"
-          :name="name + '/bodyFrame'"
-          :onEdge="onContentEdge"
-          :tabId="tabId"
-        />
-      </div>
-
-      <Dialog
-        v-if="showExitDialog"
-        :name="name + '/exitDialog'"
-        :onAction="onDialogAction"
-      ></Dialog>
-    </jsv-focus-block>
-  </div>
-</template>
-
-<style scoped>
-.rootSize {
-  width: 1280;
-  height: 720;
-  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/FilterDemo/AnimatePic.vue

@@ -1,58 +0,0 @@
-<script setup>
-const item_url =
-  "http://oss.image.51vtv.cn/homepage/20210209/27bda620942566673ab449a3ef765321.png";
-</script>
-
-<template>
-  <div
-    className="blockStyle"
-    :style="{
-      backgroundColor: '#0000FF',
-      animation: 'opacityDemo_CompositeNoOpacity 3s infinite',
-    }"
-  />
-  <img
-    className="blockStyle"
-    :style="{
-      objectFit: 'contain',
-      animation: 'opacityDemo_CompositeOpacity 3s infinite',
-    }"
-    :src="item_url"
-  />
-</template>
-
-<style scoped>
-.blockStyle {
-  top: 50;
-  left: 50;
-  width: 150;
-  height: 150;
-}
-
-.picTitleTextClass {
-  font-size: 25;
-  height: 68;
-  line-height: 34;
-  color: "#000000";
-  text-align: "center";
-}
-
-@keyframes opacityDemo_CompositeOpacity {
-  from {
-    transform: translate3d(50%, 30px, 0) scale3d(1.5, 1.5, 1)
-      rotate3d(1.5, 1, 0, 90deg) skew(30deg, 45deg);
-    opacity: 0.1;
-  }
-  to {
-  }
-}
-
-@keyframes opacityDemo_CompositeNoOpacity {
-  from {
-    transform: translate3d(50%, 30px, 0) scale3d(1.5, 1.5, 1)
-      rotate3d(1.5, 1, 0, 90deg) skew(30deg, 45deg);
-  }
-  to {
-  }
-}
-</style>