@shijiu/jsview-vue 0.0.1-beta.0

package/utils/JsViewVueWidget/JsvSwiper/JsvSwiper.vue

@@ -0,0 +1,495 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2021-11-23 09:42:26
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2021-12-02 15:47:26
+ * @Description: file content
+-->
+<script>
+import { Forge } from "../../../dom/jsv-forge-define";
+import JsvActorMove, {
+  JsvActorMoveControl,
+} from "jsview/utils/JsViewVueWidget/JsvActorMove";
+import Indicator from "./Indicator.vue";
+import { ref } from "vue";
+
+const VIEW_NUM = 3;
+
+function modToRange(value, mod, start = 0) {
+  let m = value % mod;
+  if (m < start) {
+    m += mod;
+  } else if (m >= start + mod) {
+    m -= mod;
+  }
+  return m;
+}
+
+export default {
+  components: { Indicator, JsvActorMove },
+  props: {
+    showIndicator: {
+      type: Boolean,
+      default: true,
+    },
+    dotSize: {
+      type: Number,
+      default: 10,
+    },
+    dotGap: {
+      type: Number,
+      default: 10,
+    },
+    indicatorPos: {
+      type: Number,
+      default: -1,
+    },
+    indicatorAlign: {
+      type: String,
+      default: "middle",
+    },
+    totalFrame: {
+      type: Number,
+      require: true,
+    },
+    firstFrame: {
+      type: Number,
+      default: 0,
+    },
+    layoutInfo: {
+      type: Object,
+      require: true,
+    },
+    onClick: {
+      type: Function,
+    },
+    onChange: {
+      type: Function,
+    },
+    autoplayInterval: {
+      type: Number,
+      default: 5000,
+    },
+    animation: {
+      type: Object,
+      default() {
+        return {
+          duration: 200,
+          easing: "linear",
+        };
+      },
+    },
+    vertical: {
+      type: Boolean,
+      default: false,
+    },
+    name: {
+      type: String,
+    },
+    onFocus: {
+      type: Function,
+    },
+    onBlur: {
+      type: Function,
+    },
+    swipeType: {
+      type: String,
+      default: "translate",
+    },
+    smoothTranslate: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  computed: {
+    indicatorLayout() {
+      let indicatorSize =
+        this.totalFrame * (this.dotSize + this.dotGap) - this.dotGap;
+      if (this.vertical) {
+        let top;
+        if (this.indicatorAlign === "start") {
+          top = this.dotGap;
+        } else if (this.indicatorAlign === "end") {
+          top = this.layoutInfo.height - indicatorSize - this.dotGap;
+        } else {
+          top = (this.layoutInfo.height - indicatorSize) / 2;
+        }
+        return {
+          left:
+            this.indicatorPos < 0
+              ? this.layoutInfo.width * 0.8
+              : this.indicatorPos,
+          top,
+          zIndex: 1,
+        };
+      } else {
+        let left;
+        if (this.indicatorAlign === "start") {
+          left = this.dotGap;
+        } else if (this.indicatorAlign === "end") {
+          left = this.layoutInfo.width - indicatorSize - this.dotGap;
+        } else {
+          left = (this.layoutInfo.width - indicatorSize) / 2;
+        }
+        return {
+          left,
+          top:
+            this.indicatorPos < 0
+              ? this.layoutInfo.height * 0.8
+              : this.indicatorPos,
+          zIndex: 1,
+        };
+      }
+    },
+    indicatorDotSize() {
+      return this.dotSize + this.dotGap;
+    },
+    currentDataIndex() {
+      return modToRange(this.firstFrame + this.offset, this.totalFrame);
+    },
+    currentViewIndex() {
+      return modToRange(this.offset + 1, VIEW_NUM);
+    },
+    viewInfoList() {
+      let styleList = [
+        {
+          top: 0,
+          left: 0,
+          width: this.layoutInfo.width,
+          height: this.layoutInfo.height,
+        },
+        {
+          top: 0,
+          left: 0,
+          width: this.layoutInfo.width,
+          height: this.layoutInfo.height,
+        },
+        {
+          top: 0,
+          left: 0,
+          width: this.layoutInfo.width,
+          height: this.layoutInfo.height,
+        },
+      ];
+      switch (this.swipeType) {
+        case "translate":
+          styleList[0].top = this.vertical ? -this.layoutInfo.height : 0;
+          styleList[0].left = this.vertical ? 0 : -this.layoutInfo.width;
+
+          styleList[2].top = this.vertical ? this.layoutInfo.height : 0;
+          styleList[2].left = this.vertical ? 0 : this.layoutInfo.width;
+          break;
+        case "opacity":
+          styleList[0].opaticy = 0;
+          styleList[1].opaticy = 1;
+          styleList[2].opaticy = 0;
+          break;
+        default:
+          break;
+      }
+
+      let viewList = [];
+      for (let i = 0; i < VIEW_NUM; i++) {
+        viewList.push({
+          dataIndex: modToRange(
+            this.currentDataIndex +
+              modToRange(i - this.currentViewIndex, VIEW_NUM, -1),
+            this.totalFrame
+          ),
+          style: styleList[modToRange(i - this.offset, VIEW_NUM)],
+        });
+      }
+      return viewList;
+    },
+  },
+  setup(props) {
+    console.log("setup");
+    let controllerList = new Array(VIEW_NUM);
+    if (props.smoothTranslate) {
+      for (let i = 0; i < controllerList.length; i++) {
+        controllerList[i] = new JsvActorMoveControl();
+      }
+    }
+    let preOffset = -1;
+    let offset = ref(0);
+    let focused = ref(false);
+    let timeoutHandler = -1;
+    return {
+      preOffset,
+      offset,
+      focused,
+      timeoutHandler,
+      controllerList,
+    };
+  },
+  watch: {
+    offset(newValue) {
+      this.onChange?.(modToRange(this.firstFrame + newValue, this.totalFrame));
+    },
+  },
+  methods: {
+    stopAutoplay() {
+      clearTimeout(this.timeoutHandler);
+      this.timeoutHandler = -1;
+    },
+    startAutoplay() {
+      if (this.autoplayInterval > 0) {
+        if (this.timeoutHandler > 0) {
+          clearTimeout(this.timeoutHandler);
+        }
+        this.timeoutHandler = setTimeout(() => {
+          this._trigger(1);
+        }, this.autoplayInterval);
+      }
+    },
+    _onKeyDown(ev) {
+      switch (ev.keyCode) {
+        case 37:
+          if (!this.vertical) {
+            this._trigger(-1);
+            return true;
+          }
+          break;
+        case 38:
+          if (this.vertical) {
+            this._trigger(-1);
+            return true;
+          }
+          break;
+        case 39:
+          if (!this.vertical) {
+            this._trigger(1);
+            return true;
+          }
+          break;
+        case 40:
+          if (this.vertical) {
+            this._trigger(1);
+            return true;
+          }
+          break;
+        case 13:
+          this.onClick?.();
+          return true;
+        default:
+          break;
+      }
+
+      return false;
+    },
+    _onAnimationEnd() {
+      if (this.autoplayInterval > 0 && !this.focused) {
+        this.timeoutHandler = setTimeout(() => {
+          this._trigger(1);
+        }, this.autoplayInterval);
+      }
+    },
+    _onFocus() {
+      this.focused = true;
+      this.stopAutoplay();
+      this.onFocus?.();
+    },
+    _onBlur() {
+      this.focused = false;
+      this.startAutoplay();
+      this.onBlur?.();
+    },
+    _startNormalAnimation() {
+      let duration = this.animation.duration;
+      // let easing = this.animation.easing ? this.animation.easing : "linear";
+
+      let curViewAnimation;
+      let preViewAnimation;
+      switch (this.swipeType) {
+        case "translate":
+          curViewAnimation = new Forge.TranslateAnimation(
+            this.vertical ? 0 : this.layoutInfo.width,
+            0,
+            this.vertical ? this.layoutInfo.height : 0,
+            0,
+            duration,
+            null
+          );
+          preViewAnimation = new Forge.TranslateAnimation(
+            this.vertical ? 0 : this.layoutInfo.width,
+            0,
+            this.vertical ? this.layoutInfo.height : 0,
+            0,
+            duration,
+            null
+          );
+          break;
+        case "opacity":
+          break;
+        default:
+          break;
+      }
+      curViewAnimation.SetAnimationListener(
+        new Forge.AnimationListener(null, this._onAnimationEnd, null)
+      );
+      this.$refs["element" + this.currentViewIndex]?.jsvMaskView.StartAnimation(
+        curViewAnimation
+      );
+      this.$refs[
+        "element" + modToRange(this.currentViewIndex - 1, VIEW_NUM)
+      ]?.jsvMaskView.StartAnimation(preViewAnimation);
+    },
+    _startSmoothTranslateAnimation() {
+      let curController = this.controllerList[this.currentViewIndex];
+      let preController =
+        this.controllerList[modToRange(this.currentViewIndex - 1, VIEW_NUM)];
+      if (this.vertical) {
+        let speed = (this.layoutInfo.height / this.animation.duration) * 1000;
+        curController.jumpTo(0, this.layoutInfo.height);
+        curController.moveToY(0, speed, this._onAnimationEnd);
+        preController.jumpTo(0, this.layoutInfo.height);
+        preController.moveToY(0, speed);
+      } else {
+        let speed = (this.layoutInfo.width / this.animation.duration) * 1000;
+        curController.jumpTo(this.layoutInfo.width, 0);
+        curController.moveToX(0, speed, this._onAnimationEnd);
+        preController.jumpTo(this.layoutInfo.width, 0);
+        preController.moveToX(0, speed);
+      }
+    },
+    _startAnimation() {
+      if (this.smoothTranslate) {
+        this._startSmoothTranslateAnimation();
+      } else {
+        this._startNormalAnimation();
+      }
+    },
+    _trigger(direction) {
+      this.preOffset = this.offset;
+      this.offset += direction;
+      this._startAnimation();
+    },
+  },
+  mounted() {
+    if (!this.focused) {
+      this.startAutoplay();
+    }
+  },
+  beforeUnmount() {
+    this.stopAutoplay();
+  },
+};
+</script>
+
+<template>
+  <jsv-focus-block
+    :name="name"
+    :onAction="{
+      onFocus: _onFocus,
+      onBlur: _onBlur,
+      onKeyDown: _onKeyDown,
+    }"
+  >
+    <div
+      :style="{
+        width: layoutInfo.width,
+        height: layoutInfo.height,
+        overflow: 'hidden',
+      }"
+    >
+      <div
+        :style="{
+          zIndex: 0,
+        }"
+      >
+        <div v-if="smoothTranslate">
+          <jsv-actor-move
+            v-for="(item, index) in viewInfoList"
+            :key="index"
+            :style="item.style"
+            :control="controllerList[index]"
+          >
+            <!-- 为了保证slot中的页面刷新。不加这个div slot中的img标签不会更新，vue或者是dom的bug？ -->
+            <div :key="item.dataIndex">
+              <slot
+                name="itemView"
+                :currentIndex="currentDataIndex"
+                :dataIndex="item.dataIndex"
+                :focused="focused"
+              ></slot>
+            </div>
+
+            <!-- <div
+              :style="{
+                width: 50,
+                height: 50,
+                top: 200,
+                fontSize: '30px',
+              }"
+            >
+              {{ index }}
+            </div> -->
+          </jsv-actor-move>
+        </div>
+        <div v-else>
+          <div
+            v-for="(item, index) in viewInfoList"
+            :key="index"
+            :style="item.style"
+            :ref="'element' + index"
+          >
+            <!-- 为了保证slot中的页面刷新。不加这个div slot中的img标签不会更新，vue或者是dom的bug？ -->
+            <div :key="item.dataIndex">
+              <slot
+                name="itemView"
+                :currentIndex="currentDataIndex"
+                :dataIndex="item.dataIndex"
+                :focused="focused"
+              ></slot>
+            </div>
+
+            <!-- <div
+            :style="{
+              width: 50,
+              height: 50,
+              top: 200,
+              fontSize: '30px',
+            }"
+          >
+            {{ index + " " + item.dataIndex }}
+          </div> -->
+          </div>
+        </div>
+      </div>
+
+      <div v-if="showIndicator" :style="indicatorLayout">
+        <indicator
+          :number="totalFrame"
+          :current="currentDataIndex"
+          :itemSize="indicatorDotSize"
+          :vertical="vertical"
+        >
+          <template #current>
+            <slot name="indicatorCur">
+              <div
+                :style="{
+                  width: 10,
+                  height: 10,
+                  backgroundColor: 'rgba(50, 50, 50, 1.0)',
+                  borderRadius: '5px',
+                }"
+              ></div>
+            </slot>
+          </template>
+          <template #normal>
+            <slot name="indicatorNor">
+              <div
+                :style="{
+                  width: 10,
+                  height: 10,
+                  backgroundColor: 'rgba(100, 100, 100, 0.7)',
+                  borderRadius: '5px',
+                }"
+              ></div>
+            </slot>
+          </template>
+        </indicator>
+      </div>
+    </div>
+  </jsv-focus-block>
+</template>

package/utils/JsViewVueWidget/JsvSwiper/index.js

@@ -0,0 +1,10 @@
+/*
+ * @Author: ChenChanghua
+ * @Date: 2021-11-23 09:44:31
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2021-11-23 15:42:46
+ * @Description: file content
+ */
+import JsvSwiper from "./JsvSwiper.vue";
+
+export default JsvSwiper;

package/utils/JsViewVueWidget/JsvSwiper3D/Indicator.vue

@@ -0,0 +1,35 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2021-11-23 09:44:44
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2021-11-23 17:11:08
+ * @Description: file content
+-->
+<script>
+export default {
+  props: {
+    number: Number,
+    vertical: Boolean,
+    itemSize: Number,
+    current: Number,
+  },
+  computed: {
+    indexList() {
+      return new Array(this.number).fill(0).map((_, index) => {
+        return index;
+      });
+    },
+  },
+};
+</script>
+
+<template>
+  <div
+    v-for="index in indexList"
+    :key="index"
+    :style="vertical ? { top: itemSize * index } : { left: itemSize * index }"
+  >
+    <slot v-if="index == current" name="current"></slot>
+    <slot v-else name="normal"></slot>
+  </div>
+</template>