@shijiu/jsview-vue-samples 2.2.373 → 2.3.0

package/DemoForOperator/PosterAnim/Item.vue

@@ -0,0 +1,46 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2023-03-08 14:52:17
+ * @Description: file content
+-->
+<script setup>
+import { ref } from "vue";
+
+const props = defineProps({
+  data: Object,
+  onAction: Object,
+  onItemFocus: Function,
+  query: Object,
+});
+
+const focused = ref(false);
+
+// 注册回调
+const onFocus = () => {
+  focused.value = true;
+  props.onItemFocus(props.query.index);
+};
+const onBlur = () => {
+  focused.value = false;
+};
+const onClick = () => {};
+props.onAction.register("onFocus", onFocus);
+props.onAction.register("onBlur", onBlur);
+props.onAction.register("onClick", onClick);
+</script>
+
+<template>
+  <div
+    :style="{
+      width: data.width,
+      height: data.height,
+      fontSize: 30,
+      color: '#000000',
+      backgroundColor: focused ? '#009900' : '#ff000033',
+      lineHeight: data.height,
+      textAlign: 'center',
+    }"
+  >
+    {{ data.content }}
+  </div>
+</template>

package/DemoForOperator/PosterAnim/PosterAnim.js

@@ -0,0 +1,58 @@
+import { getKeyFramesGroup } from "jsview"
+let token = 0;
+const bounceLevel = [10, 20, 30];
+const scaleLevel = [1.03, 1.07, 1.1];
+const shaleLevel = [1, 3, 5];
+
+let styleSheet = null;
+export function getPosterAnim(type, params) {
+  if (!styleSheet) {
+    styleSheet = getKeyFramesGroup();
+  }
+  ++token;
+  const levelIndex = params.level == "high" ? 2 : params.level == "middle" ? 1 : 0;
+  let name = undefined, body = undefined;
+  switch (type) {
+    case "bounce-left": {
+      name = `poster-anim-bounce-left-${token}`
+      body = `@keyframes ${name} {0%,70%,100% { transform: translate3d(0, 0, 0);} 35% {transform: translate3d(-${bounceLevel[levelIndex]}, 0, 0);}}`
+    } break;
+    case "bounce-bottom": {
+      name = `poster-anim-bounce-bottom-${token}`
+      body = `@keyframes ${name} {0%,70%,100% { transform: translate3d(0, 0, 0);} 35% {transform: translate3d(0, ${bounceLevel[levelIndex]}, 0);}}`
+    } break;
+    case "bounce-right": {
+      name = `poster-anim-bounce-right-${token}`
+      body = `@keyframes ${name} {0%,70%,100% { transform: translate3d(0, 0, 0);} 35% {transform: translate3d(${bounceLevel[levelIndex]}, 0, 0);}}`
+    } break;
+    case "bounce-top": {
+      name = `poster-anim-bounce-top-${token}`
+      body = `@keyframes ${name} {0%,70%,100% { transform: translate3d(0, 0, 0);} 35% {transform: translate3d(0, -${bounceLevel[levelIndex]}, 0);}}`
+    } break;
+    case "shake": {
+      name = `poster-anim-shake-${token}`
+      body = `@keyframes ${name} {0%, 35% { transform: rotate3d(0, 0, 1, ${shaleLevel[levelIndex]}deg); } 70% { transform: rotate3d(0, 0, 1, -${shaleLevel[levelIndex]}deg); } 100% { transform: rotate3d(0, 0, 1, 0deg); } }`
+    } break;
+
+    case "scale": {
+      const s0 = params.scale0
+      const s1 = params.scale1;
+      name = `poster-anim-scale-${token}`
+      body = `@keyframes ${name} {0% { transform: scale3d(${s0}, ${s0}, 1); } 50% { transform: scale3d(${s1}, ${s1}, 1); } 100% { transform: scale3d(1, 1, 1); }}`
+    } break;
+    case "breath": {
+      const s0 = params.scale
+      name = `poster-anim-breath-${token}`
+      body = `@keyframes ${name} {0% { transform: scale3d(1, 1, 1); transform-origin: center center;} 50% { transform: scale3d(${s0}, ${s0}, 1); transform-origin: center center;} 100% { transform: scale3d(1, 1, 1); transform-origin: center center;}}`
+    } break;
+  }
+  if (typeof body != "undefined") {
+    styleSheet.insertRule(body);
+  }
+  return {
+    name,
+    release: () => {
+      styleSheet.removeRule(name)
+    }
+  }
+}

package/DemoForOperator/PosterAnim/Scale/Item.vue

@@ -0,0 +1,72 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2023-03-08 14:52:17
+ * @Description: file content
+-->
+<script setup>
+import { ref } from "vue";
+import { EdgeDirection } from "jsview";
+
+const props = defineProps({
+  data: Object,
+  onAction: Object,
+  anim: Object,
+  scaleRate: Number,
+});
+const bgImage = "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/DemoForOperator/PosterAnim/Scale/Item/background.png";
+const transform = `scale3d(${props.scaleRate}, ${props.scaleRate}, 1)`;
+
+const focused = ref(false);
+const animation = ref(null);
+
+// 注册回调
+const onFocus = () => {
+  focused.value = true;
+  animation.value = `${props.anim.name} 0.4s`;
+};
+const onBlur = () => {
+  focused.value = false;
+};
+const onClick = () => {};
+
+const onAnimEnd = () => {
+  animation.value = null;
+};
+
+props.onAction.register("onFocus", onFocus);
+props.onAction.register("onBlur", onBlur);
+props.onAction.register("onClick", onClick);
+</script>
+
+<template>
+  <div
+    :style="{
+      width: data.width,
+      height: data.height,
+      animation: animation,
+    }"
+    @animationend="onAnimEnd"
+  >
+    <div
+      :style="{
+        width: data.width,
+        height: data.height,
+        transform: focused ? transform : null,
+      }"
+    >
+      <div
+        :style="{
+          width: data.width,
+          height: data.height,
+          fontSize: 30,
+          color: focused ? '#FF0000' : '#FFFFFF',
+          backgroundImage: bgImage,
+          lineHeight: data.height,
+          textAlign: 'center',
+        }"
+      >
+        缩放
+      </div>
+    </div>
+  </div>
+</template>

package/DemoForOperator/PosterAnim/Scale/ScalePage.vue

@@ -0,0 +1,48 @@
+<template>
+  <metro-widget
+    name="scale"
+    :left="widgetLayout.left"
+    :top="widgetLayout.top"
+    :width="widgetLayout.width"
+    :height="widgetLayout.height"
+    :provideData="provideData"
+    :direction="HORIZONTAL"
+    :measures="measures"
+    :onEdge="onEdge"
+    :padding="padding"
+  >
+    <template #renderItem="{ data, onAction }">
+      <item :data="data" :onAction="onAction" :anim="anim" :scaleRate=scaleRate />
+    </template>
+  </metro-widget>
+</template>
+
+<script setup>
+import { onUnmounted } from "vue";
+import { MetroWidget, HORIZONTAL } from "jsview";
+import Item from "./Item.vue";
+import { widgetLayout, padding, data } from "../CommonPageSetting.js";
+import { getPosterAnim } from "../PosterAnim.js";
+
+const scaleRate = 1.07;
+const anim = getPosterAnim("scale", { scale0: 1 / 1.07, scale1: 1.05 });
+const props = defineProps({
+  onEdge: Function,
+});
+const provideData = () => {
+  return data;
+};
+
+const measures = (data) => {
+  return {
+    width: data.width,
+    height: data.height,
+    marginRight: data.marginRight,
+    marginBottom: data.marginBottom,
+  };
+};
+
+onUnmounted(() => {
+  anim.release();
+});
+</script>

package/DemoForOperator/PosterAnim/Shake/Item.vue

@@ -0,0 +1,85 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2023-03-08 14:52:17
+ * @Description: file content
+-->
+<script setup>
+import { ref } from "vue";
+import { EdgeDirection } from "jsview";
+
+const props = defineProps({
+  data: Object,
+  onAction: Object,
+  anim: Object,
+});
+const bgImage = "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/DemoForOperator/PosterAnim/Shake/Item/background.png";
+
+const focused = ref(false);
+const animation = ref(null);
+
+// 注册回调
+const onFocus = () => {
+  focused.value = true;
+};
+const onBlur = () => {
+  focused.value = false;
+};
+const onClick = () => {};
+
+const onAnimEnd = () => {
+  animation.value = null;
+};
+
+const onWidgetEdge = (info) => {
+  switch (info.direction) {
+    case EdgeDirection.left:
+      animation.value = `${props.anim.left.name} 0.15s`;
+      break;
+    case EdgeDirection.top:
+      animation.value = `${props.anim.top.name} 0.15s`;
+      break;
+    case EdgeDirection.right:
+      animation.value = `${props.anim.right.name} 0.15s`;
+      break;
+  }
+};
+
+props.onAction.register("onFocus", onFocus);
+props.onAction.register("onBlur", onBlur);
+props.onAction.register("onClick", onClick);
+props.onAction.register("onWidgetEdge", onWidgetEdge);
+</script>
+
+<template>
+  <div
+    :style="{
+      width: data.width,
+      height: data.height,
+      transition: 'transform 0.2s',
+      transform: focused ? 'scale3d(1.05, 1.05, 1)' : null,
+    }"
+  >
+    <div
+      :style="{
+        width: data.width,
+        height: data.height,
+        animation: animation,
+      }"
+      @animationend="onAnimEnd"
+    >
+      <div
+        :style="{
+          width: data.width,
+          height: data.height,
+          fontSize: 30,
+          color: focused ? '#FF0000' : '#FFFFFF',
+          backgroundImage: bgImage,
+          lineHeight: data.height,
+          textAlign: 'center',
+        }"
+      >
+        边缘晃动
+      </div>
+    </div>
+  </div>
+</template>

package/DemoForOperator/PosterAnim/Shake/ShakePage.vue

@@ -0,0 +1,53 @@
+<template>
+  <metro-widget
+    name="shake"
+    :left="widgetLayout.left"
+    :top="widgetLayout.top"
+    :width="widgetLayout.width"
+    :height="widgetLayout.height"
+    :provideData="provideData"
+    :direction="HORIZONTAL"
+    :measures="measures"
+    :onEdge="onEdge"
+    :padding="padding"
+  >
+    <template #renderItem="{ data, onAction }">
+      <item :data="data" :onAction="onAction" :anim="animObj" />
+    </template>
+  </metro-widget>
+</template>
+
+<script setup>
+import { onUnmounted } from "vue";
+import { MetroWidget, HORIZONTAL } from "jsview";
+import Item from "./Item.vue";
+import { widgetLayout, padding, data } from "../CommonPageSetting.js";
+import { getPosterAnim } from "../PosterAnim.js";
+
+const anim = getPosterAnim("shake", { level: "middle" });
+const animObj = {
+  left: anim,
+  right: anim,
+  top: anim,
+  bottom: anim,
+};
+const props = defineProps({
+  onEdge: Function,
+});
+const provideData = () => {
+  return data;
+};
+
+const measures = (data) => {
+  return {
+    width: data.width,
+    height: data.height,
+    marginRight: data.marginRight,
+    marginBottom: data.marginBottom,
+  };
+};
+
+onUnmounted(() => {
+  anim.release();
+});
+</script>

package/DemoForOperator/PosterOverflow/App.vue

@@ -0,0 +1,116 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2023-03-08 14:52:08
+ * @Description: file content
+-->
+<script setup>
+import {
+  MetroWidget,
+  HORIZONTAL,
+  useFocusHub,
+  JsvPreload,
+  buildPreloadInfo,
+} from "jsview";
+import Item from "./Item.vue";
+import { onMounted } from "vue";
+
+const ironmanSmall =
+  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/DemoForOperator/PosterOverflow/App/ironman_small.png";
+const ironmanLarge =
+  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/DemoForOperator/PosterOverflow/App/ironman_large.png";
+const spidermanSmall =
+  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/DemoForOperator/PosterOverflow/App/spiderman_small.png";
+const spidermanLarge =
+  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/DemoForOperator/PosterOverflow/App/spiderman_large.png";
+const captainSmall =
+  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/DemoForOperator/PosterOverflow/App/captain_small.png";
+const captainLarge =
+  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/DemoForOperator/PosterOverflow/App/captain_large.png";
+
+const focusHub = useFocusHub();
+
+const data = [
+  {
+    width: 266,
+    height: 266,
+    marginRight: 20,
+    smallImg: ironmanSmall,
+    largeImg: ironmanLarge,
+    largeWidth: 566,
+    largeHeight: 566,
+  },
+  {
+    width: 266,
+    height: 266,
+    marginRight: 20,
+    smallImg: spidermanSmall,
+    largeImg: spidermanLarge,
+    largeWidth: 566,
+    largeHeight: 566,
+  },
+  {
+    width: 266,
+    height: 266,
+    marginRight: 20,
+    smallImg: captainSmall,
+    largeImg: captainLarge,
+    largeWidth: 566,
+    largeHeight: 566,
+  },
+];
+const preloadList = [];
+data.forEach((item) => {
+  preloadList.push(buildPreloadInfo(item.smallImg));
+  preloadList.push(buildPreloadInfo(item.largeImg));
+});
+const provideData = () => {
+  return data;
+};
+
+const measures = (data) => {
+  return {
+    width: data.width,
+    height: data.height,
+    marginRight: data.marginRight,
+  };
+};
+
+const widgetLayout = {
+  left: 200,
+  top: 100,
+  width: 1058,
+  height: 266,
+};
+
+onMounted(() => {
+  //组件mount后设置焦点
+  focusHub.setFocus("mainMw");
+});
+</script>
+
+<template>
+  <div
+    :style="{
+      width: 1280,
+      height: 720,
+      backgroundColor: '#007788',
+    }"
+  />
+  <JsvPreload :preloadList="preloadList"></JsvPreload>
+
+  <metro-widget
+    name="mainMw"
+    :left="widgetLayout.left"
+    :top="widgetLayout.top"
+    :width="widgetLayout.width"
+    :height="widgetLayout.height"
+    :provideData="provideData"
+    :direction="HORIZONTAL"
+    :measures="measures"
+    :disableClip="true"
+  >
+    <template #renderItem="{ data, onAction }">
+      <item :data="data" :onAction="onAction" />
+    </template>
+  </metro-widget>
+</template>

package/DemoForOperator/PosterOverflow/Item.vue

@@ -0,0 +1,67 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2023-03-08 14:52:17
+ * @Description: file content
+-->
+<script setup>
+import { ref, computed } from "vue";
+import PosterOverflow from "./PosterOverflow.vue";
+
+const props = defineProps({
+  data: Object,
+  onAction: Object,
+});
+
+const focused = ref(false);
+const showType = computed(() => {
+  return focused.value ? "large" : "small";
+});
+
+// 注册回调
+const onFocus = () => {
+  focused.value = true;
+};
+const onBlur = () => {
+  focused.value = false;
+};
+const onClick = () => {
+  console.log("item onclick ", props.data);
+};
+props.onAction.register("onFocus", onFocus);
+props.onAction.register("onBlur", onBlur);
+props.onAction.register("onClick", onClick);
+const posterSizeInfo = {
+  width: props.data.width,
+  height: props.data.height,
+  largeWidth: props.data.largeWidth,
+  largeHeight: props.data.largeHeight,
+};
+
+const largePos = { left: -props.data.width / 2 - 17, top: -161 };
+</script>
+
+<template>
+  <div
+    :style="{
+      width: data.width,
+      height: data.height,
+      transform: focused ? 'scale3d(1.1, 1.1, 1)' : 'scale3d(1, 1, 1)',
+      transition: 'transform 0.3s',
+    }"
+  >
+    <PosterOverflow :showType="showType" :largePos="largePos">
+      <template #small>
+        <img
+          :src="`url(${data.smallImg})`"
+          :style="{ width: data.width, height: data.height }"
+        />
+      </template>
+      <template #large>
+        <img
+          :src="`url(${data.largeImg})`"
+          :style="{ width: data.largeWidth, height: data.largeHeight }"
+        />
+      </template>
+    </PosterOverflow>
+  </div>
+</template>

package/DemoForOperator/PosterOverflow/PosterOverflow.vue

@@ -0,0 +1,23 @@
+<template>
+  <div v-if="imgType == 'large'" :style="largePos">
+    <slot name="large"></slot>
+  </div>
+  <slot name="small"></slot>
+</template>
+
+<script setup>
+import { ref, watchEffect, computed } from "vue";
+const props = defineProps({
+  showType: {
+    type: String,
+  },
+  largePos: {
+    type: Object,
+  },
+});
+
+const imgType = ref("small");
+watchEffect(() => {
+  imgType.value = props.showType;
+});
+</script>

package/DemoForOperator/Ripple/App.vue

@@ -0,0 +1,54 @@
+<template>
+  <jsv-focus-block autoFocus :onAction="{ onKeyDown }">
+    <Ripple
+      ref="rippleRef"
+      :layout="{
+        left: 320,
+        top: 200,
+        width: 640,
+        height: 360,
+      }"
+    >
+      <div
+        :style="{ width: 640, height: 360, backgroundImage: `url(${bg})` }"
+      ></div>
+    </Ripple>
+    <div
+      :style="{
+        width: 640,
+        height: 50,
+        left: 320,
+        top: 100,
+        fontSize: 30,
+        backgroundColor: '#ffffff77',
+        textAlign: 'center',
+      }"
+    >
+      按OK键生成波纹
+    </div>
+  </jsv-focus-block>
+</template>
+
+<script setup>
+import Ripple from "./Ripple.vue";
+import { shallowRef } from "vue";
+const bg =
+  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/TombSweepingDayTest/Raining/RainScene/qingming_bg.jpg";
+
+const rippleRef = shallowRef();
+const onKeyDown = (ev) => {
+  if (ev.keyCode == 13) {
+    const left = Math.round(Math.random() * 500 + 70);
+    const top = Math.round(Math.random() * 300 + 30);
+    rippleRef.value?.addRipple(
+      {
+        left,
+        top,
+      },
+      4000
+    );
+    return true;
+  }
+  return false;
+};
+</script>

package/DemoForOperator/Ripple/Ripple.vue

@@ -0,0 +1,50 @@
+<template>
+  <div :style="{ left: layout.left, top: layout.top }">
+    <JsvRipple
+      :width="layout.width"
+      :height="layout.height"
+      ref="rippleViewRef"
+    >
+      <slot></slot>
+    </JsvRipple>
+  </div>
+</template>
+
+<script setup>
+import { JsvRipple, JsvRippleShape } from "jsview";
+import { shallowRef } from "vue";
+const props = defineProps({
+  layout: {
+    type: Object,
+    required: true,
+  },
+});
+
+const rippleViewRef = shallowRef();
+
+defineExpose({
+  /* position: 位置, duration: 时长(秒) */
+  addRipple(position, duration = 3) {
+    //duration = ln(amplitude) / timeDecay => timeDecay = ln(amplitude) / duration
+    const amplitude = 50;
+
+    const timeDecay = Math.log(amplitude) / (duration);
+
+    rippleViewRef.value.addSource(
+      position.left,
+      position.top,
+      amplitude,
+      {
+        type: JsvRippleShape.CIRCLE,
+      },
+      {
+        timeDecay: timeDecay,
+        distanceDecay: 8,
+        speed: 60,
+        frequency: 2,
+        waveNum: 2,
+      }
+    );
+  },
+});
+</script>

package/DemoForOperator/ScalePoster/App.vue

@@ -0,0 +1,4 @@
+<template></template>
+<script setup>
+const posterUrl = "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/DemoForOperator/ScalePoster/App/element_228277_icon_20230530144223.png"
+</script>