@shijiu/jsview-vue 0.9.246 → 0.9.254

package/samples/LongImage/Button.vue

@@ -1,153 +1,153 @@
-<script lang="ts">
-import { Vue } from "vue-class-component";
-export default class Button extends Vue {
-  constructor(props: any) {
-    super(props);
-  }
-  private onKeyDown?: Function = undefined;
-  private leftRef: any = null;
-  private rightRef: any = null;
-  private focusId: Number = 0; // 0：button未获得焦点/焦点移出。 1：button获取焦点切焦点在按钮1上。 2：button获取焦点切焦点在按钮2上。
-  private focusName: String = "";
-
-  onleftRef(ref: any) {
-    this.leftRef = ref;
-  }
-
-  onRightRef(ref: any) {
-    this.rightRef = ref;
-  }
-
-  private getLeftActionCallback() {
-    const onAction = {
-      // onKeyDown: this.onKeyDown,
-      onKeyDown: (ev: any) => {
-        let keyUsed = true;
-        switch (ev.keyCode) {
-          case 37:
-            this.focusName = "btn_left";
-            break;
-          case 38:
-            this.focusName = "LongImageScroll";
-            break;
-          case 39:
-            this.focusName = "btn_right";
-            break;
-          default:
-            keyUsed = false;
-        }
-        if (keyUsed) {
-          console.log("Button requestFocusName = ", this.focusName);
-          this.leftRef.findBlockByName(this.focusName).requestFocus();
-        }
-        return keyUsed;
-      },
-      onFocus: () => {
-        console.log("btn_left getFocus");
-        this.focusId = 1;
-      },
-      onBlur: () => {
-        console.log("btn_left loseFocus");
-        this.focusId = 0;
-      },
-    };
-    return onAction;
-  }
-
-  private getRightActionCallback() {
-    const onAction = {
-      // onKeyDown: this.onKeyDown,
-      onKeyDown: (ev: any) => {
-        let keyUsed = true;
-        switch (ev.keyCode) {
-          case 37:
-            this.focusName = "btn_left";
-            break;
-          case 38:
-            this.focusName = "LongImageScroll";
-            break;
-          case 39:
-            this.focusName = "btn_right";
-            break;
-          default:
-            keyUsed = false;
-        }
-        if (keyUsed) {
-          this.leftRef.findBlockByName(this.focusName).requestFocus();
-        }
-        return keyUsed;
-      },
-      onFocus: () => {
-        console.log("btn_left getFocus");
-        this.focusId = 2;
-      },
-      onBlur: () => {
-        console.log("btn_left loseFocus");
-        this.focusId = 0;
-      },
-    };
-    return onAction;
-  }
-}
-</script>
-
-<template>
-  <div>
-    <jsv-focus-block
-      :ref="onleftRef"
-      namespace="btn_left"
-      :onAction="getLeftActionCallback()"
-    >
-      <div
-        :style="{
-          width: 130,
-          height: 60,
-          left: -25,
-          top: -5,
-          backgroundColor: this.focusId === 1 ? '#DD0000' : '#FFFFFF',
-        }"
-      ></div>
-      <div
-        :style="{
-          width: 120,
-          height: 50,
-          left: -20,
-          fontSize: '30px',
-          textAlign: 'center',
-          lineHeight: '50px',
-          backgroundColor: '#EEEEEE',
-        }"
-      >
-        按钮1
-      </div>
-    </jsv-focus-block>
-    <jsv-focus-block
-      :ref="onRightRef"
-      namespace="btn_right"
-      :onAction="getRightActionCallback()"
-    >
-      <div
-        :style="{
-          width: 130,
-          height: 60,
-          left: 125,
-          top: -5,
-          backgroundColor: this.focusId === 2 ? '#DD0000' : '#FFFFFF',
-        }"
-      ></div>
-      <div
-        :style="{
-          width: 120,
-          height: 50,
-          left: 130,
-          fontSize: '30px',
-          textAlign: 'center',
-          lineHeight: '50px',
-          backgroundColor: '#EEEEEE',
-        }"
-      >
-        按钮2
-      </div>
-    </jsv-focus-block>
-  </div>
-</template>
+<script lang="ts">
+import { Vue } from "vue-class-component";
+export default class Button extends Vue {
+  constructor(props: any) {
+    super(props);
+  }
+  private onKeyDown?: Function = undefined;
+  private leftRef: any = null;
+  private rightRef: any = null;
+  private focusId: Number = 0; // 0：button未获得焦点/焦点移出。 1：button获取焦点切焦点在按钮1上。 2：button获取焦点切焦点在按钮2上。
+  private focusName: String = "";
+
+  onleftRef(ref: any) {
+    this.leftRef = ref;
+  }
+
+  onRightRef(ref: any) {
+    this.rightRef = ref;
+  }
+
+  private getLeftActionCallback() {
+    const onAction = {
+      // onKeyDown: this.onKeyDown,
+      onKeyDown: (ev: any) => {
+        let keyUsed = true;
+        switch (ev.keyCode) {
+          case 37:
+            this.focusName = "btn_left";
+            break;
+          case 38:
+            this.focusName = "LongImageScroll";
+            break;
+          case 39:
+            this.focusName = "btn_right";
+            break;
+          default:
+            keyUsed = false;
+        }
+        if (keyUsed) {
+          console.log("Button requestFocusName = ", this.focusName);
+          this.leftRef.findBlockByName(this.focusName).requestFocus();
+        }
+        return keyUsed;
+      },
+      onFocus: () => {
+        console.log("btn_left getFocus");
+        this.focusId = 1;
+      },
+      onBlur: () => {
+        console.log("btn_left loseFocus");
+        this.focusId = 0;
+      },
+    };
+    return onAction;
+  }
+
+  private getRightActionCallback() {
+    const onAction = {
+      // onKeyDown: this.onKeyDown,
+      onKeyDown: (ev: any) => {
+        let keyUsed = true;
+        switch (ev.keyCode) {
+          case 37:
+            this.focusName = "btn_left";
+            break;
+          case 38:
+            this.focusName = "LongImageScroll";
+            break;
+          case 39:
+            this.focusName = "btn_right";
+            break;
+          default:
+            keyUsed = false;
+        }
+        if (keyUsed) {
+          this.leftRef.findBlockByName(this.focusName).requestFocus();
+        }
+        return keyUsed;
+      },
+      onFocus: () => {
+        console.log("btn_left getFocus");
+        this.focusId = 2;
+      },
+      onBlur: () => {
+        console.log("btn_left loseFocus");
+        this.focusId = 0;
+      },
+    };
+    return onAction;
+  }
+}
+</script>
+
+<template>
+  <div>
+    <jsv-focus-block
+      :ref="onleftRef"
+      namespace="btn_left"
+      :onAction="getLeftActionCallback()"
+    >
+      <div
+        :style="{
+          width: 130,
+          height: 60,
+          left: -25,
+          top: -5,
+          backgroundColor: this.focusId === 1 ? '#DD0000' : '#FFFFFF',
+        }"
+      ></div>
+      <div
+        :style="{
+          width: 120,
+          height: 50,
+          left: -20,
+          fontSize: '30px',
+          textAlign: 'center',
+          lineHeight: '50px',
+          backgroundColor: '#EEEEEE',
+        }"
+      >
+        按钮1
+      </div>
+    </jsv-focus-block>
+    <jsv-focus-block
+      :ref="onRightRef"
+      namespace="btn_right"
+      :onAction="getRightActionCallback()"
+    >
+      <div
+        :style="{
+          width: 130,
+          height: 60,
+          left: 125,
+          top: -5,
+          backgroundColor: this.focusId === 2 ? '#DD0000' : '#FFFFFF',
+        }"
+      ></div>
+      <div
+        :style="{
+          width: 120,
+          height: 50,
+          left: 130,
+          fontSize: '30px',
+          textAlign: 'center',
+          lineHeight: '50px',
+          backgroundColor: '#EEEEEE',
+        }"
+      >
+        按钮2
+      </div>
+    </jsv-focus-block>
+  </div>
+</template>

package/samples/LongImage/LongImageScroll.vue

@@ -1,127 +1,127 @@
-<script lang="ts">
-import Scroll from "./Scroll.vue";
-import { Options, Vue } from "vue-class-component";
-
-@Options({
-  components: {
-    Scroll,
-  },
-  props: {
-    step: Number,
-    style: Object,
-    scrollStyle: Object,
-    scrollBlockStyle: Object,
-    imageSrc: String,
-  },
-})
-export default class LongImageScroll extends Vue {
-  constructor(props: any) {
-    super(props);
-  }
-
-  onMainRef(ref: any) {
-    this.rootRef = ref;
-  }
-
-  private getActionCallback() {
-    const onAction = {
-      onKeyDown: (ev: any) => {
-        const valid =
-          this.element &&
-          this.element.clientHeight &&
-          this.element.clientHeight > this.style.height;
-        // let keyUsed = true;
-        if (valid) {
-          let text_y;
-          switch (ev.keyCode) {
-            case 38:
-              if (this.textY !== 0) {
-                text_y =
-                  this.textY + this.step >= 0 ? 0 : this.textY + this.step;
-                (this.textY = text_y),
-                  (this.scrollY =
-                    (-text_y /
-                      (this.element.clientHeight - this.style.height)) *
-                    (this.scrollStyle.height - this.scrollBlockStyle.height));
-              }
-              break;
-            case 40:
-              if (
-                this.textY !==
-                this.style.height - this.element.clientHeight
-              ) {
-                text_y =
-                  this.textY - this.step <=
-                  this.style.height - this.element.clientHeight
-                    ? this.style.height - this.element.clientHeight
-                    : this.textY - this.step;
-                (this.textY = text_y),
-                  (this.scrollY =
-                    (-text_y /
-                      (this.element.clientHeight - this.style.height)) *
-                    (this.scrollStyle.height - this.scrollBlockStyle.height));
-              } else {
-                this.rootRef.findBlockByName("btn_left").requestFocus();
-              }
-              break;
-          }
-        }
-      },
-      onFocus: () => {
-        console.log("LongImageScroll getFocus");
-      },
-      onBlur: () => {
-        console.log("LongImageScroll loseFocus");
-      },
-    };
-    return onAction;
-  }
-
-  OnLoad = () => {
-    // 图片加载完成的回调
-    console.log("Image loaded!");
-  };
-
-  private element: any = null;
-  private scrollY: Number = 0;
-  private textY: any = 0;
-  private rootRef: any = null;
-  private step: any = 0;
-  private style: any = null;
-  private scrollStyle: any = null;
-  private scrollBlockStyle: any = null;
-  private imageSrc: any = null;
-
-  mounted() {
-    this.rootRef.requestFocus();
-  }
-}
-</script>
-
-
-<template>
-  <jsv-focus-block
-    :ref="onMainRef"
-    namespace="LongImageScroll"
-    :onAction="getActionCallback()"
-  >
-    <div :style="{ overflow: 'hidden', ...style }">
-      <img
-        :alt="{}"
-        :ref="
-          (ele) => {
-            this.element = ele;
-          }
-        "
-        :src="imageSrc"
-        :style="{ top: this.textY, width: style.width }"
-        :onLoad="OnLoad"
-      />
-    </div>
-    <Scroll
-      :top="this.scrollY"
-      :scrollStyle="scrollStyle"
-      :scrollBlockStyle="scrollBlockStyle"
-    />
-  </jsv-focus-block>
+<script lang="ts">
+import Scroll from "./Scroll.vue";
+import { Options, Vue } from "vue-class-component";
+
+@Options({
+  components: {
+    Scroll,
+  },
+  props: {
+    step: Number,
+    style: Object,
+    scrollStyle: Object,
+    scrollBlockStyle: Object,
+    imageSrc: String,
+  },
+})
+export default class LongImageScroll extends Vue {
+  constructor(props: any) {
+    super(props);
+  }
+
+  onMainRef(ref: any) {
+    this.rootRef = ref;
+  }
+
+  private getActionCallback() {
+    const onAction = {
+      onKeyDown: (ev: any) => {
+        const valid =
+          this.element &&
+          this.element.clientHeight &&
+          this.element.clientHeight > this.style.height;
+        // let keyUsed = true;
+        if (valid) {
+          let text_y;
+          switch (ev.keyCode) {
+            case 38:
+              if (this.textY !== 0) {
+                text_y =
+                  this.textY + this.step >= 0 ? 0 : this.textY + this.step;
+                (this.textY = text_y),
+                  (this.scrollY =
+                    (-text_y /
+                      (this.element.clientHeight - this.style.height)) *
+                    (this.scrollStyle.height - this.scrollBlockStyle.height));
+              }
+              break;
+            case 40:
+              if (
+                this.textY !==
+                this.style.height - this.element.clientHeight
+              ) {
+                text_y =
+                  this.textY - this.step <=
+                  this.style.height - this.element.clientHeight
+                    ? this.style.height - this.element.clientHeight
+                    : this.textY - this.step;
+                (this.textY = text_y),
+                  (this.scrollY =
+                    (-text_y /
+                      (this.element.clientHeight - this.style.height)) *
+                    (this.scrollStyle.height - this.scrollBlockStyle.height));
+              } else {
+                this.rootRef.findBlockByName("btn_left").requestFocus();
+              }
+              break;
+          }
+        }
+      },
+      onFocus: () => {
+        console.log("LongImageScroll getFocus");
+      },
+      onBlur: () => {
+        console.log("LongImageScroll loseFocus");
+      },
+    };
+    return onAction;
+  }
+
+  OnLoad = () => {
+    // 图片加载完成的回调
+    console.log("Image loaded!");
+  };
+
+  private element: any = null;
+  private scrollY: Number = 0;
+  private textY: any = 0;
+  private rootRef: any = null;
+  private step: any = 0;
+  private style: any = null;
+  private scrollStyle: any = null;
+  private scrollBlockStyle: any = null;
+  private imageSrc: any = null;
+
+  mounted() {
+    this.rootRef.requestFocus();
+  }
+}
+</script>
+
+
+<template>
+  <jsv-focus-block
+    :ref="onMainRef"
+    namespace="LongImageScroll"
+    :onAction="getActionCallback()"
+  >
+    <div :style="{ overflow: 'hidden', ...style }">
+      <img
+        :alt="{}"
+        :ref="
+          (ele) => {
+            this.element = ele;
+          }
+        "
+        :src="imageSrc"
+        :style="{ top: this.textY, width: style.width }"
+        :onLoad="OnLoad"
+      />
+    </div>
+    <Scroll
+      :top="this.scrollY"
+      :scrollStyle="scrollStyle"
+      :scrollBlockStyle="scrollBlockStyle"
+    />
+  </jsv-focus-block>
 </template>

package/samples/LongImage/Scroll.vue

@@ -1,16 +1,16 @@
-<script>
-export default {
-  props: {
-    scrollStyle: Object,
-    top: Number,
-    scrollBlockStyle: Object,
-  },
-};
-</script>
-<template>
-  <div :style="{ ...scrollStyle }">
-    <div :style="{ top: top }">
-      <div :style="{ ...scrollBlockStyle }" />
-    </div>
-  </div>
+<script>
+export default {
+  props: {
+    scrollStyle: Object,
+    top: Number,
+    scrollBlockStyle: Object,
+  },
+};
+</script>
+<template>
+  <div :style="{ ...scrollStyle }">
+    <div :style="{ top: top }">
+      <div :style="{ ...scrollBlockStyle }" />
+    </div>
+  </div>
 </template>