@shijiu/jsview-vue 0.9.426 → 0.9.502

package/samples/TouchSample/App.vue

@@ -0,0 +1,137 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2022-04-10 21:20:39
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-04-11 09:51:24
+ * @Description: file content
+-->
+<script>
+import JsvTouchContainer from "jsview/utils/JsViewVueWidget/JsvTouchContainer.vue";
+import MetroWidgetHorizontal from "./MetroWidgetHorizontal.vue";
+import MetroWidgetVertical from "./MetroWidgetVertical.vue";
+import TouchContainerHorizontal from "./TouchContainerHorizontal.vue";
+import TouchContainerVertical from "./TouchContainerVertical.vue";
+import { jJsvRuntimeBridge } from "jsview/utils/JsViewVueTools/JsvRuntimeBridge";
+
+export default {
+  components: {
+    MetroWidgetHorizontal,
+    MetroWidgetVertical,
+    TouchContainerHorizontal,
+    JsvTouchContainer,
+    TouchContainerVertical,
+  },
+  data() {
+    return {
+      metroVerticalVisible: false,
+      metroHorizontalVisible: true,
+      touchContainerHorizontalVisible: false,
+      touchContainerVerticalVisible: false,
+      head: "SimpleWidget 横向",
+    };
+  },
+  setup() {
+    const tabList = [
+      "SimpleWidget 横向",
+      "SimpleWidget 纵向",
+      "TouchContainer 横向",
+      "TouchContainer 纵向",
+    ];
+    return {
+      tabList,
+    };
+  },
+  methods: {
+    _onClick(id) {
+      switch (id) {
+        case 0:
+          this.head = "SimpleWidget 横向";
+          this.metroVerticalVisible = false;
+          this.metroHorizontalVisible = true;
+          this.touchContainerHorizontalVisible = false;
+          this.touchContainerVerticalVisible = false;
+          break;
+        case 1:
+          this.head = "SimpleWidget 纵向";
+          this.metroVerticalVisible = true;
+          this.metroHorizontalVisible = false;
+          this.touchContainerHorizontalVisible = false;
+          this.touchContainerVerticalVisible = false;
+          break;
+        case 2:
+          this.head = "TouchContainer 横向";
+          this.metroVerticalVisible = false;
+          this.metroHorizontalVisible = false;
+          this.touchContainerHorizontalVisible = true;
+          this.touchContainerVerticalVisible = false;
+          break;
+        case 3:
+          this.head = "TouchContainer 纵向";
+          this.metroVerticalVisible = false;
+          this.metroHorizontalVisible = false;
+          this.touchContainerHorizontalVisible = false;
+          this.touchContainerVerticalVisible = true;
+          break;
+        default:
+          break;
+      }
+      return true;
+    },
+  },
+  mounted() {
+    jJsvRuntimeBridge.notifyPageLoaded();
+  },
+};
+</script>
+
+<template>
+  <div
+    :style="{
+      width: 1280,
+      height: 720 * 2,
+      backgroundColor: '#1b2697',
+    }"
+  >
+    <jsv-touch-container
+      v-for="(title, index) of tabList"
+      :key="'tab' + index"
+      :style="{
+        left: 50 + 300 * index,
+        top: 10,
+        width: 280,
+        height: 50,
+        backgroundColor: '#ff0000',
+        fontSize: 18,
+        lineHeight: '50px',
+      }"
+      :onClick="
+        () => {
+          return this._onClick(index);
+        }
+      "
+      :direction="DIRECTION_DISABLE"
+    >
+      {{ title }}
+    </jsv-touch-container>
+
+    <div
+      :style="{
+        left: 30,
+        top: 60,
+        width: 400,
+        height: 50,
+        fontSize: 30,
+        lineHeight: '50px',
+        color: '#f0ef29',
+      }"
+    >
+      {{ head }}
+    </div>
+    <div :style="{ left: 30, top: 120 }">
+      <metro-widget-horizontal v-if="metroHorizontalVisible" />
+      <metro-widget-vertical v-if="metroVerticalVisible" />
+      <touch-container-horizontal v-if="touchContainerHorizontalVisible" />
+      <touch-container-vertical v-if="touchContainerVerticalVisible" />
+    </div>
+  </div>
+</template>

package/samples/TouchSample/Item.vue

@@ -0,0 +1,101 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2022-04-10 21:21:43
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-04-10 21:21:44
+ * @Description: file content
+-->
+<script>
+import { getPositionRelativeToView } from "jsview/utils/JsViewEngineWidget";
+function randomColor() {
+  let randomColor = Math.round(Math.random() * 2 ** 24).toString(16);
+  return (
+    "#" + new Array(6 - randomColor.length).fill("0").join("") + randomColor
+  );
+}
+export default {
+  props: {
+    data: Object,
+    query: Object,
+    onEdge: Function,
+    onAction: Object,
+    test: Object,
+  },
+  data() {
+    return {
+      focused: false,
+    };
+  },
+  setup() {
+    return {
+      randomColor,
+    }
+  },
+  computed: {
+    style() {
+      return {
+        width: this.data.width,
+        height: this.data.height,
+        color: "#FFFFFF",
+        backgroundColor: this.focused ? "#FF0000" : this.data.color,
+      };
+    },
+  },
+  methods: {
+    onFocus() {
+      this.focused = true;
+      console.log("cchtest item onfocus", this.data)  
+    },
+
+    onBlur() {
+      this.focused = false;
+    },
+
+    onClick() {
+      console.log(`item ${this.query.id} clicked`);
+    }
+  },
+  created() {
+    // console.log("cchtest item created", this.data.content)
+    this.onAction.register("onFocus", this.onFocus);
+    this.onAction.register("onBlur", this.onBlur);
+    this.onAction.register("onClick", this.onClick);
+  },
+  mounted() {
+    // console.log("cchtest item mounted", this.data.content)
+  },
+  beforeUnmount() {
+    // console.log("cchtest item unmount", this.data.content)
+  },
+  updated() {
+    // console.log("cchtest item update", this.data.content)
+  }
+};
+</script>
+
+<template>
+  <div ref="element" :class="focused ? 'focus' : 'blur'" :style="style">
+    {{ data.content }}
+  </div>
+  <div :style="{
+    left: data.width/2,
+    top: data.height/2,
+    width: 10,
+    height: 10,
+    backgroundColor: focused ? '#000000' : '#FF0000'
+  }"/>
+</template>
+
+<style scoped>
+.focus {
+  transform: scale3d(1.0, 1.0, 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/TouchSample/MetroWidgetHorizontal.vue

@@ -0,0 +1,144 @@
+<script>
+import {
+  HORIZONTAL,
+  MetroWidget,
+  WholePageSlide,
+  SeamlessSlide,
+  FixPositionSlide,
+} from "jsview/utils/JsViewEngineWidget";
+
+import Item from "./Item.vue";
+
+import { metroWidgetH, measures } from "./data.js";
+import { ref } from "vue";
+
+export default {
+  components: {
+    MetroWidget,
+    Item,
+  },
+  setup() {
+    return {
+      measures,
+      name: "/metroWidgetH",
+      direction: HORIZONTAL,
+      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: 100,
+      CONST_ITEM_HEIGHT: 200,
+    };
+  },
+  methods: {
+    _provideData() {
+      return metroWidgetH;
+    },
+  },
+
+  mounted() {},
+};
+</script>
+
+<template>
+  <div class="rootSize">
+    <div :style="{ width: 1280, height: 720, left: 50, }">
+      <div
+        :style="{
+          top: 0,
+          width: 200,
+          height: 40,
+          fontSize: 25,
+          lineHeight: '40px',
+          color: '#fff753',
+        }"
+      >
+        整页滑动
+      </div>
+      <div
+        :style="{
+          top: 50,
+          width: CONST_ITEM_WIDTH * 10 + 20,
+          height: CONST_ITEM_HEIGHT + 20,
+          backgroundColor: '#ff0000',
+        }"
+      >
+        <metro-widget
+          name="simpleWidgetHorizontal1"
+          :width="CONST_ITEM_WIDTH * 10 + 20"
+          :height="CONST_ITEM_HEIGHT + 20"
+          :direction="direction"
+          :measures="measures"
+          :provideData="_provideData"
+          :padding="{ top: 10, left: 10, right: 10, bottom: 10 }"
+          :enableTouch="true"
+          :flingPageWidth="CONST_ITEM_WIDTH * 10"
+        >
+          <template #renderItem="{ data, query, onEdge, onAction }">
+            <item
+              :data="data"
+              :query="query"
+              :onEdge="onEdge"
+              :onAction="onAction"
+            /> </template
+        ></metro-widget>
+      </div>
+      <div
+        :style="{
+          top: CONST_ITEM_HEIGHT + 100,
+          width: 200,
+          height: 40,
+          fontSize: 25,
+          lineHeight: '40px',
+          color: '#fff753',
+        }"
+      >
+        普通滑动
+      </div>
+      <div
+        :style="{
+          top: CONST_ITEM_HEIGHT + 100 + 50,
+          width: CONST_ITEM_WIDTH * 10 + 20,
+          height: CONST_ITEM_HEIGHT + 20,
+          backgroundColor: '#ff0000',
+        }"
+      >
+        <metro-widget
+          name="simpleWidgetHorizontal2"
+          :width="CONST_ITEM_WIDTH * 10 + 20"
+          :height="CONST_ITEM_HEIGHT + 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/samples/TouchSample/MetroWidgetVertical.vue

@@ -0,0 +1,144 @@
+<script>
+import {
+  VERTICAL,
+  MetroWidget,
+  WholePageSlide,
+  SeamlessSlide,
+  FixPositionSlide,
+} from "jsview/utils/JsViewEngineWidget";
+
+import Item from "./Item.vue";
+
+import { metroWidgetV, measures } from "./data.js";
+import { ref } 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/samples/TouchSample/TouchContainerHorizontal.vue

@@ -0,0 +1,159 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2022-04-10 21:21:02
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-04-11 10:05:35
+ * @Description: file content
+-->
+<script>
+import JsvTouchContainer, {
+  DIRECTION_VERTICAL,
+  DIRECTION_HORIZONTAL,
+  DIRECTION_DISABLE,
+} from "jsview/utils/JsViewVueWidget/JsvTouchContainer.vue";
+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>