@shijiu/jsview-vue-samples 1.9.747

package/TouchSample/MetroWidgetVertical.vue

@@ -0,0 +1,144 @@
+<script>
+import {
+  VERTICAL,
+  MetroWidget,
+  WholePageSlide,
+  SeamlessSlide,
+  FixPositionSlide,
+} from "jsview";
+
+import Item from "./Item.vue";
+
+import { metroWidgetV, measures } from "./data.js";
+import { ref, shallowRef } from "vue";
+
+export default {
+  components: {
+    MetroWidget,
+    Item,
+  },
+  setup() {
+    return {
+      measures,
+      name: "/metroWidgetH",
+      direction: VERTICAL,
+      wholePageSlide: new WholePageSlide({
+        speed: 1.5,
+      }),
+      seamlessSlide: new SeamlessSlide({
+        startPercent: 0.4,
+        endPercent: 0.6,
+        speed: 0.5,
+      }),
+      fixPositionSlide: new FixPositionSlide({
+        fixPercent: 0.5,
+        speed: 0.5,
+      }),
+      token: ref(0),
+      CONST_ITEM_WIDTH: 300,
+      CONST_ITEM_HEIGHT: 100,
+    };
+  },
+  methods: {
+    _provideData() {
+      return metroWidgetV;
+    },
+  },
+
+  mounted() {},
+};
+</script>
+
+<template>
+  <div class="rootSize">
+    <div :style="{ width: 1280, height: 720, left: 50, overflow: 'hidden' }">
+      <div
+        :style="{
+          left: 0,
+          width: 200,
+          height: 40,
+          fontSize: 25,
+          lineHeight: '40px',
+          color: '#fff753',
+        }"
+      >
+        整页滑动
+      </div>
+      <div
+        :style="{
+          left: 200,
+          width: CONST_ITEM_WIDTH + 20,
+          height: CONST_ITEM_HEIGHT * 5 + 20,
+          backgroundColor: '#ff0000',
+        }"
+      >
+        <metro-widget
+          name="simpleWidgetVertical1"
+          :width="CONST_ITEM_WIDTH + 20"
+          :height="CONST_ITEM_HEIGHT * 5 + 20"
+          :direction="direction"
+          :measures="measures"
+          :provideData="_provideData"
+          :padding="{ top: 10, left: 10, right: 10, bottom: 10 }"
+          :enableTouch="true"
+          :flingPageWidth="CONST_ITEM_HEIGHT * 5"
+        >
+          <template #renderItem="{ data, query, onEdge, onAction }">
+            <item
+              :data="data"
+              :query="query"
+              :onEdge="onEdge"
+              :onAction="onAction"
+            /> </template
+        ></metro-widget>
+      </div>
+      <div
+        :style="{
+          left: 600,
+          width: 200,
+          height: 40,
+          fontSize: 25,
+          lineHeight: '40px',
+          color: '#fff753',
+        }"
+      >
+        普通滑动
+      </div>
+      <div
+        :style="{
+          left: 800,
+          width: CONST_ITEM_WIDTH + 20,
+          height: CONST_ITEM_HEIGHT * 5 + 20,
+          backgroundColor: '#ff0000',
+        }"
+      >
+        <metro-widget
+          name="simpleWidgetVertical2"
+          :width="CONST_ITEM_WIDTH + 20"
+          :height="CONST_ITEM_HEIGHT * 5 + 20"
+          :direction="direction"
+          :measures="measures"
+          :provideData="_provideData"
+          :padding="{ top: 10, left: 10, right: 10, bottom: 10 }"
+          :enableTouch="true"
+        >
+          <template #renderItem="{ data, query, onEdge, onAction }">
+            <item
+              :data="data"
+              :query="query"
+              :onEdge="onEdge"
+              :onAction="onAction"
+            /> </template
+        ></metro-widget>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.rootSize {
+  width: 1920;
+  height: 1080;
+  background-color: #334c4c;
+}
+</style>

package/TouchSample/TouchContainerHorizontal.vue

@@ -0,0 +1,160 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2022-04-10 21:21:02
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-07-08 14:40:19
+ * @Description: file content
+-->
+<script>
+import {
+  JsvTouchContainer,
+  DIRECTION_VERTICAL,
+  DIRECTION_HORIZONTAL,
+  DIRECTION_DISABLE,
+} from "jsview";
+import { touchContainerH, measures } from "./data.js";
+function randomColor() {
+  let randomColor = Math.round(Math.random() * 2 ** 24).toString(16);
+  return (
+    "#" + new Array(6 - randomColor.length).fill("0").join("") + randomColor
+  );
+}
+export default {
+  components: {
+    JsvTouchContainer,
+  },
+  setup() {
+    return {
+      DIRECTION_VERTICAL,
+      DIRECTION_HORIZONTAL,
+      DIRECTION_DISABLE,
+      touchContainerH,
+      measures,
+      randomColor,
+    };
+  },
+  methods: {
+    _onClick(msg) {
+      console.log(`_onClick:${JSON.stringify(msg)}`);
+      return true;
+    },
+  },
+};
+</script>
+
+<template>
+  <div :style="{ width: 1280, height: 720, overflow: 'hidden' }">
+    <jsv-touch-container
+      :style="{ width: 1280, height: 720 * 2, backgroundColor: '#7b7a1c' }"
+      :direction="DIRECTION_VERTICAL"
+      :dragLimitArea="{ x: 0, y: 0, width: 1280, height: 720 }"
+    >
+      <div
+        :style="{
+          left: 30,
+          top: 0,
+          width: 400,
+          height: 30,
+          fontSize: 18,
+          lineHeight: '30px',
+          color: '#f0ef29',
+        }"
+      >
+        整屏幕滑动
+      </div>
+      <jsv-touch-container
+        :style="{
+          left: 0,
+          top: 40,
+          width: (1280 - 60) * 5,
+          height: 220,
+          backgroundColor: 'rgba(255,0,0,0.5)',
+        }"
+        :direction="DIRECTION_HORIZONTAL"
+        :flingPageWidth="1280 - 60"
+        :dragLimitArea="{ x: 0, y: 0, width: 1280 - 60, height: 220 }"
+      >
+        <div
+          v-for="(tabList, tabIndex) in touchContainerH"
+          :key="'tab' + tabIndex"
+          :style="{
+            left: (1280 - 60) * tabIndex,
+            top: 0,
+            width: 1280 - 60,
+            height: 220,
+            backgroundColor: randomColor(),
+          }"
+        >
+          <jsv-touch-container
+            v-for="(item, itemIndex) in tabList"
+            :key="'tab' + tabIndex + '-' + itemIndex"
+            :style="{
+              left: item.left,
+              top: item.top,
+              width: item.width,
+              height: item.height,
+              backgroundColor: item.backgroundColor,
+              fontSize: 18,
+            }"
+            :onClick="_onClick"
+            :direction="DIRECTION_DISABLE"
+            >{{ item.content }}</jsv-touch-container
+          >
+        </div>
+      </jsv-touch-container>
+
+      <div
+        :style="{
+          left: 30,
+          top: 280,
+          width: 400,
+          height: 40,
+          fontSize: 18,
+          lineHeight: '40px',
+          color: '#f0ef29',
+        }"
+      >
+        左右滑动
+      </div>
+      <jsv-touch-container
+        :style="{
+          left: 0,
+          top: 320,
+          width: (1280 - 60) * 5,
+          height: 220,
+          backgroundColor: '#1d9797',
+        }"
+        :direction="DIRECTION_HORIZONTAL"
+        :dragLimitArea="{ x: 0, y: 0, width: 1280 - 60, height: 220 }"
+      >
+        <div
+          v-for="(tabList, tabIndex) in touchContainerH"
+          :key="'tab' + tabIndex"
+          :style="{
+            left: (1280 - 60) * tabIndex,
+            top: 0,
+            width: 1280 - 60,
+            height: 220,
+            backgroundColor: randomColor(),
+          }"
+        >
+          <jsv-touch-container
+            v-for="(item, itemIndex) in tabList"
+            :key="'tab' + tabIndex + '-' + itemIndex"
+            :style="{
+              left: item.left,
+              top: item.top,
+              width: item.width,
+              height: item.height,
+              backgroundColor: item.backgroundColor,
+              fontSize: 18,
+            }"
+            :onClick="_onClick"
+            :direction="DIRECTION_DISABLE"
+            >{{ item.content }}</jsv-touch-container
+          >
+        </div>
+      </jsv-touch-container>
+    </jsv-touch-container>
+  </div>
+</template>

package/TouchSample/TouchContainerVertical.vue

@@ -0,0 +1,160 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2022-04-10 21:21:02
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-04-11 09:04:26
+ * @Description: file content
+-->
+<script>
+import {
+  JsvTouchContainer,
+  DIRECTION_VERTICAL,
+  DIRECTION_HORIZONTAL,
+  DIRECTION_DISABLE,
+} from "jsview";
+import { touchContainerV, measures } from "./data.js";
+function randomColor() {
+  let randomColor = Math.round(Math.random() * 2 ** 24).toString(16);
+  return (
+    "#" + new Array(6 - randomColor.length).fill("0").join("") + randomColor
+  );
+}
+export default {
+  components: {
+    JsvTouchContainer,
+  },
+  setup() {
+    return {
+      DIRECTION_VERTICAL,
+      DIRECTION_HORIZONTAL,
+      DIRECTION_DISABLE,
+      touchContainerV,
+      measures,
+      randomColor,
+    };
+  },
+  methods: {
+    _onClick(msg) {
+      console.log(`_onClick:${JSON.stringify(msg)}`);
+      return true;
+    },
+  },
+};
+</script>
+
+<template>
+  <div :style="{ width: 1280, height: 720, overflow: 'hidden' }">
+    <jsv-touch-container
+      :style="{ width: 1280, height: 720 * 2, backgroundColor: '#7b7a1c' }"
+      :direction="DIRECTION_HORIZONTAL"
+      :dragLimitArea="{ x: 0, y: 0, width: 1280, height: 720 }"
+    >
+      <div
+        :style="{
+          left: 30,
+          top: 0,
+          width: 400,
+          height: 40,
+          fontSize: 25,
+          lineHeight: '40px',
+          color: '#f0ef29',
+        }"
+      >
+        整屏幕滑动
+      </div>
+      <jsv-touch-container
+        :style="{
+          left: 30,
+          top: 50,
+          width: 400,
+          height: 500 * 5,
+          backgroundColor: '#810000',
+        }"
+        :direction="DIRECTION_VERTICAL"
+        :flingPageWidth="500"
+        :dragLimitArea="{ x: 0, y: 0, width: 400, height: 500 }"
+      >
+        <div
+          v-for="(tabList, tabIndex) in touchContainerV"
+          :key="'tab' + tabIndex"
+          :style="{
+            left: 0,
+            top: 500 * tabIndex,
+            width: 400,
+            height: 500,
+            backgroundColor: randomColor(),
+          }"
+        >
+          <jsv-touch-container
+            v-for="(item, itemIndex) in tabList"
+            :key="'tab' + tabIndex + '-' + itemIndex"
+            :style="{
+              left: item.left,
+              top: item.top,
+              width: item.width,
+              height: item.height,
+              backgroundColor: item.backgroundColor,
+              fontSize: 18,
+            }"
+            :onClick="_onClick"
+            :direction="DIRECTION_DISABLE"
+            >{{ item.content }}</jsv-touch-container
+          >
+        </div>
+      </jsv-touch-container>
+
+      <div
+        :style="{
+          left: 530,
+          top: 0,
+          width: 400,
+          height: 40,
+          fontSize: 25,
+          lineHeight: '40px',
+          color: '#f0ef29',
+        }"
+      >
+        上下滑动
+      </div>
+      <jsv-touch-container
+        :style="{
+          left: 530,
+          top: 50,
+          width: 400,
+          height: 500 * 5,
+          backgroundColor: '#810000',
+        }"
+        :direction="DIRECTION_VERTICAL"
+        :dragLimitArea="{ x: 0, y: 0, width: 400, height: 500 }"
+      >
+        <div
+          v-for="(tabList, tabIndex) in touchContainerV"
+          :key="'tab' + tabIndex"
+          :style="{
+            left: 0,
+            top: 500 * tabIndex,
+            width: 400,
+            height: 500,
+            backgroundColor: randomColor(),
+          }"
+        >
+          <jsv-touch-container
+            v-for="(item, itemIndex) in tabList"
+            :key="'tab' + tabIndex + '-' + itemIndex"
+            :style="{
+              left: item.left,
+              top: item.top,
+              width: item.width,
+              height: item.height,
+              backgroundColor: item.backgroundColor,
+              fontSize: 18,
+            }"
+            :onClick="_onClick"
+            :direction="DIRECTION_DISABLE"
+            >{{ item.content }}</jsv-touch-container
+          >
+        </div>
+      </jsv-touch-container>
+    </jsv-touch-container>
+  </div>
+</template>

package/TouchSample/data.js

@@ -0,0 +1,81 @@
+/*
+ * @Author: ChenChanghua
+ * @Date: 2022-04-10 21:23:15
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-04-11 10:03:21
+ * @Description: file content
+ */
+function randomColor() {
+  let randomColor = Math.round(Math.random() * 2 ** 24).toString(16);
+  return (
+    "#" + new Array(6 - randomColor.length).fill("0").join("") + randomColor
+  );
+}
+
+const metroWidgetH = [];
+for (let i = 0; i < 500; i++) {
+  metroWidgetH.push({
+    content: i,
+    id: i,
+    width: 100,
+    height: 200,
+    color: randomColor(),
+  });
+}
+
+const metroWidgetV = [];
+for (let i = 0; i < 500; i++) {
+  metroWidgetV.push({
+    content: i,
+    id: i,
+    width: 200,
+    height: 100,
+    color: randomColor(),
+  });
+}
+
+const touchContainerH = [];
+for (let i = 0; i < 5; i++) {
+  const tabData = [];
+  for (let i = 0; i < 20; i++) {
+    tabData.push({
+      content: i,
+      id: i,
+      left: (122 / 2) * i,
+      top: 10,
+      width: 122 / 2 - 10,
+      height: 200,
+      backgroundColor: randomColor(),
+    });
+  }
+  touchContainerH.push(tabData);
+}
+
+const touchContainerV = [];
+for (let i = 0; i < 5; i++) {
+  const tabData = [];
+  for (let i = 0; i < 20; i++) {
+    tabData.push({
+      content: i,
+      id: i,
+      left: 10,
+      top: 50 * i,
+      width: 300,
+      height: 40,
+      backgroundColor: randomColor(),
+    });
+  }
+  touchContainerV.push(tabData);
+}
+
+function measures(item) {
+  return item;
+}
+
+export {
+  metroWidgetH,
+  metroWidgetV,
+  touchContainerH,
+  touchContainerV,
+  measures,
+};

package/TransitPage/App.vue

@@ -0,0 +1,29 @@
+<script setup>
+import DemoApp from "../DemoHomepage/App.vue";
+import ActivityApp from "../MetroWidgetDemos/PerformanceTest/App.vue"; // TODO
+import { jJsvRuntimeBridge } from "jsview";
+import { ref, shallowRef, onMounted } from "vue";
+
+const getShowMode = () => {
+  let showMode = 0;
+  // showMode信息可被URL中的?后缀信息替换
+  if (window.location.search.indexOf("showMode=0") >= 0) {
+    showMode = 0;
+  } else if (window.location.search.indexOf("showMode=1") >= 0) {
+    showMode = 1;
+  }
+
+  return showMode;
+};
+
+const showMode = ref(getShowMode());
+
+onMounted(() => {
+  jJsvRuntimeBridge.notifyPageLoaded();
+});
+</script>
+
+<template>
+  <DemoApp v-if="showMode === 0" />
+  <ActivityApp v-else-if="showMode === 1" />
+</template>

package/VideoDemo/App.vue

@@ -0,0 +1,121 @@
+<script setup>
+import { provide, reactive, ref, shallowRef, watch } from "vue";
+import Controllor from "./components/Controllor.vue";
+import VideoFrame from "./components/VideoFrame.vue";
+
+const Caption = {
+  offscreenVideo:
+    "名称:OffscreenVideo(自动播放）\n" +
+    "功能描述:\n" +
+    "1.离屏视频播放、支持前进/后退控制\n" +
+    "2.支持圆角设置\n" +
+    "3.支持平移、缩放、旋转等动画\n" +
+    "4.支持ObjectFit调整\n",
+  normalVideo:
+    "名称:Video\n" +
+    "功能描述:\n" +
+    "1.视频播放、支持前进/后退控制\n" +
+    "2.支持ObjectFit调整\n",
+};
+
+let caption = shallowRef(null);
+let useTexture = shallowRef(null);
+let videoTime = reactive({
+  currentTime: 0,
+  duration: 0,
+});
+let objectFitTitle = shallowRef(null);
+let playStatus = ref("");
+provide("useTexture", useTexture);
+provide("objectFit", shallowRef(null));
+provide("videoRect", ref({}));
+provide("playVideo", shallowRef(null));
+provide("seekVideo", shallowRef(null));
+provide("enableAnimation", shallowRef(null));
+provide("videoTime", videoTime);
+provide("objectFitTitle", objectFitTitle);
+provide("playStatus", playStatus);
+watch(useTexture, () => {
+  caption.value = useTexture.value ? Caption.offscreenVideo : Caption.normalVideo;
+});
+</script>
+
+<template>
+  <div
+    :style="{
+      top: 0,
+      left: 0,
+      width: 1280,
+      height: 720,
+      backgroundColor: 'rgb(222,211,140)',
+    }"
+  >
+    <!-- :key="useTexture" => 当useTexture属性变化时，重建VideoFrame -->
+    <VideoFrame :key="useTexture" />
+
+    <!-- :key="useTexture" => JsView bug，当useTexture属性变化时，为了保证显示在VideoFrame前面 -->
+    <div class="caption" :key="useTexture">
+      {{ caption }}
+    </div>
+    <div>
+      <div class="text status">
+        {{ "播放状态: " + playStatus }}
+      </div>
+      <div class="text objectFit">
+        {{ objectFitTitle }}
+      </div>
+      <div class="text current">
+        {{ Math.ceil(videoTime.currentTime) }}
+      </div>
+      <div class="text duration">
+        {{ "/" + Math.ceil(videoTime.duration) }}
+      </div>
+    </div>
+    <Controllor class="controllor" />
+  </div>
+</template>
+
+<style scoped>
+.caption {
+  text-align: left;
+  font-size: 24px;
+  line-height: 30px;
+  color: #ffffff;
+  left: 10;
+  top: 10;
+  width: 400;
+  height: 180;
+  background-color: rgba(27, 38, 151, 0.8);
+}
+
+.text {
+  color: #ff0000;
+  font-size: 24px;
+  top: 550;
+  width: 60;
+  height: 40;
+}
+.status {
+  left: 50;
+  width: 300;
+}
+.objectFit {
+  left: 800;
+  width: 200;
+  text-align: center;
+}
+
+.current {
+  left: 1060;
+  text-align: right;
+}
+.duration {
+  left: 1120;
+  text-align: left;
+}
+
+.controllor {
+  left: 40;
+  top: 600;
+}
+</style>