@shijiu/jsview-vue 0.0.1-beta.0

package/utils/JsViewVueTools/DebugContentShellJBridge.js

@@ -0,0 +1,16 @@
+class BridgeProxy {
+  indicateHomePageLoadDone() {
+    const bridge = this._GetBridge();
+    if (bridge && bridge.indicateHomePageLoadDone) {
+      bridge.indicateHomePageLoadDone();
+    }
+  }
+
+  _GetBridge() {
+    return window.jContentShellJBridge;
+  }
+}
+
+const instance = new BridgeProxy();
+
+export { instance as JSBridge };

package/utils/JsViewVueTools/DebugTool.js

@@ -0,0 +1,21 @@
+
+
+// 用于存储用于Debug的全局引用
+let DebugObjectRefer = {
+    RootRouter: null,
+};
+
+let DebugTools = {
+    // 打印当前活跃的FDiv元素
+    printFocusNodes: ()=>{
+        DebugObjectRefer.RootRouter.printNodes();
+    },
+};
+
+// 全局引用，以便于在devtools中能直接进行查询
+window.JsvDebugTools = DebugTools;
+
+export {
+    DebugTools,
+    DebugObjectRefer,
+}

package/utils/JsViewVueTools/DefaultKeyMap.js

@@ -0,0 +1,12 @@
+// 10000以内的按键值同网页的键值，参照ASCII码
+const DefaultKeyCodeMap = {
+  Left: 37,
+  Up: 38,
+  Right: 39,
+  Down: 40,
+  Ok: 13,
+  Back: 10000,
+  Menu: 10001,
+};
+
+export default DefaultKeyCodeMap;

package/utils/JsViewVueTools/JsvDynamicCssStyle.js

@@ -0,0 +1,73 @@
+/**
+ * Created by donglin.lu@qcast.cn on 11/13/2020.
+ */
+
+/*
+ * 【模块 export 内容】
+ * CssStyleSheet：面向对象类，CSS rule的操作器，用于添加和删除CssStyle，服务于JsvStyleClass
+ *      接口：
+ *          insertRule {String} 将传入的Css rule对象插入到CSS列表中，
+ *                              请保证不要和其他css rule重名，重名场合以最后一个为准
+ *          removeRule {String} 从CSS列表中删除指定名字的css rule
+ *          removeMultiRules {String[]} 从CSS列表中删除复数个css rule
+ * getCssStyleSheet: 函数，获取 _StyleSheet 实例的函数，可接受一个参数anchor_tag，用来定位CSS rule的群组
+ */
+
+class CssStyleSheet {
+  constructor(style_sheet_ref) {
+    this._SS = style_sheet_ref;
+  }
+
+  insertRule(rule_define_string) {
+    const index = this._SS.cssRules.length;
+    this._SS.insertRule(rule_define_string, index);
+  }
+
+  hasRule(name) {
+    const css_rules_ref = this._SS.cssRules;
+    for (let i = css_rules_ref.length - 1; i >= 0; i--) {
+      if (css_rules_ref[i].selectorText === name) {
+        // Found
+        return true;
+      }
+    }
+
+    return false;
+  }
+
+  removeRule(name) {
+    this.removeMultiRules([name]);
+  }
+
+  removeMultiRules(names_array) {
+    const style_sheet_ref = this._SS;
+    const css_rules_ref = this._SS.cssRules;
+    // 对CssRules进行删除操作，倒序轮询
+    for (let i = css_rules_ref.length - 1; i >= 0; i--) {
+      for (const j in names_array) {
+        if (css_rules_ref[i].selectorText === names_array[j]) {
+          names_array.splice(j, 1);
+          style_sheet_ref.deleteRule(i);
+          break;
+        }
+      }
+    }
+  }
+}
+
+function getCssStyleGroup() {
+  // 获取所有的style
+  const ss = document.styleSheets;
+  if (!ss || ss.length === 0) {
+    console.error("Error: styleSheet empty");
+    return null;
+  }
+
+  const style_sheets_ref = ss[0]; // 使用第0个作为动态css rule的加入点
+
+  return new CssStyleSheet(style_sheets_ref);
+}
+
+export {
+  getCssStyleGroup,
+};

package/utils/JsViewVueTools/JsvDynamicKeyFrames.js

@@ -0,0 +1,128 @@
+/**
+ * Created by donglin.lu@qcast.cn on 11/13/2020.
+ */
+
+/*
+ * 【模块 export 内容】
+ * getKeyFramesGroup: 函数，获取KeyFrame操作类 KeyFrameStyleSheet
+ * KeyFrameStyleSheet：面向对象类，KeyFrames CSS rule的操作类，用于添加和删除KeyFrame
+ *      功能函数：(参数说明见函数本体)
+ *          insertRule(key_frame_string)    动态添加keyFrame
+ *          removeRule(name)                动态删除keyFrame
+ *          removeMultiRules(names_array)   批量动态删除keyFrame
+ *          hasRule(name)                   查询KeyFrame是否存在
+ */
+class KeyFrameStyleSheet {
+  constructor(style_sheet_ref) {
+    this._SS = style_sheet_ref;
+  }
+
+  /*
+     * insertRule 参数说明:
+     *      key_frame_string    (String) 要添加的keyFrame声明，
+     *                          格式为"@keyframes name {0%: XXX, 100%:XXX}"，同CSS文件中声明
+     *                          请使用者保证不要和其他KeyFrame重名
+     *  返回值:
+     *      无
+     */
+  insertRule(key_frame_string) {
+    if (window.jsvInAndroidWebView) {
+      // Convert keyframe => -webkit-keyframe
+      // Convert transform => -webkit-transform
+      // Convert transform-origin => -webkit-transform-origin
+      key_frame_string = key_frame_string.replace(/@keyframes/, "@-webkit-keyframes");
+      key_frame_string = key_frame_string.replace(/transform/g, "-webkit-transform");
+    }
+
+    const index = this._SS.cssRules.length;
+    this._SS.insertRule(key_frame_string, index);
+  }
+
+  /*
+     * hasRule 参数说明:
+     *      name    (String) 要动态删除的keyframe的名字
+     *  返回值:
+     *      boolean 是否含有指定名称的keyframe
+     */
+  hasRule(name) {
+    const css_rules_ref = this._SS.cssRules;
+    for (let i = css_rules_ref.length - 1; i >= 0; i--) {
+      if (css_rules_ref[i].name === name) {
+        // Found
+        return true;
+      }
+    }
+
+    return false;
+  }
+
+  /*
+     * removeRule 参数说明:
+     *      name    (String) 要动态删除的keyframe的名字
+     *  返回值:
+     *      无
+     */
+  removeRule(name) {
+    this.removeMultiRules([name]);
+  }
+
+  /*
+     * removeMultiRules 参数说明:
+     *      names_array    (Array) Array<String>，要动态删除的keyframe的名字数组
+     *  返回值:
+     *      无
+     */
+  removeMultiRules(names_array) {
+    const style_sheet_ref = this._SS;
+    const css_rules_ref = this._SS.cssRules;
+    // 对CssRules进行删除操作，倒序轮询
+    for (let i = css_rules_ref.length - 1; i >= 0; i--) {
+      for (const j in names_array) {
+        if (css_rules_ref[i].name === names_array[j]) {
+          names_array.splice(j, 1);
+          style_sheet_ref.deleteRule(i);
+          break;
+        }
+      }
+    }
+  }
+}
+
+/*
+ * getKeyFramesGroup 参数说明:
+ *      anchor_tag    (String) keyFrame的名称，可以不设置或者为undefined
+ *  返回值:
+ *      KeyFrameStyleSheet  以anchor_tag为锚点，找到对应的cssRule，以此cssRule创建出的KeyFrame管理句柄
+ */
+function getKeyFramesGroup(anchor_tag) {
+  let style_sheets_ref = null;
+
+  // 获取所有的style
+  const ss = document.styleSheets;
+  if (!ss || ss.length === 0) {
+    console.error("Error: styleSheet empty");
+    return null;
+  }
+
+  if (anchor_tag) {
+    for (let i = 0; i < ss.length; ++i) {
+      const item = ss[i];
+      if (item.cssRules[0] && item.cssRules[0].name && item.cssRules[0].name === anchor_tag) {
+        style_sheets_ref = item;
+        break;
+      }
+    }
+    if (style_sheets_ref === null) {
+      console.error(`Error: no found tag=${anchor_tag}`);
+      return null;
+    }
+  } else {
+    style_sheets_ref = ss[0];
+  }
+
+  return new KeyFrameStyleSheet(style_sheets_ref);
+}
+
+export {
+  getKeyFramesGroup,
+};

package/utils/JsViewVueTools/JsvHashHistory.js

@@ -0,0 +1,112 @@
+import { createMemoryHistory, createWebHashHistory }  from "vue-router";
+
+class JsvHashHistory {
+  constructor(base) {
+    if(window.jsvIsBrowserDebug) {
+      this.$_history = createWebHashHistory(base)
+    } else {
+      this.$_history = this.#createMockHashHistory(base);
+    }
+  }
+
+  get location() {
+    return this.$_history.location;
+  }
+
+  get state() {
+    return this.$_history.state;
+  }
+
+  get base() {
+    return this.$_history.base;
+  }
+
+  createHref(location) {
+    return this.$_history.createHref(location);
+  }
+
+  listen(callback) {
+    return this.$_history.listen(callback);
+  }
+
+  replace(to, data) {
+    this.$_history.replace(to, data);
+    this.#updateLocation(this.$_history.location);
+  } 
+
+  push(to, data) {
+    this.$_history.push(to, data);
+    this.#updateLocation(this.$_history.location);
+  }
+
+  go(delta, triggerListeners) {
+    this.$_history.go(delta, triggerListeners);
+    this.#updateLocation(this.$_history.location);
+  }
+
+  destroy() {
+    this.$_history.destroy();
+  }
+
+  #createMockHashHistory(base) {
+    // 抄 createWebHashHistory 作业
+    base = location.host ? base || location.pathname + location.search : '';
+    if (!base.includes('#'))
+        base += '#';
+    if (!base.endsWith('#/') && !base.endsWith('#')) {
+        console.warn(`A hash base must end with a "#":\n"${base}" should be "${base.replace(/#.*$/, '#')}".`);
+    }
+
+    this.baseURL = window.location.origin + base;
+
+    const history = createMemoryHistory(base)
+    const initHash = this.#getInitHash();
+    if(initHash) {
+      // 已设置hash，替换到hash页面
+      history.replace({
+        path: initHash.substring(1),// 去除#
+        query: window.location.search
+      });
+    } else {
+      // 未设置hash定位，追加hash根的显示
+      this.#updateLocation(null);
+    }
+
+    return history;
+  }
+
+  #getInitHash() {
+    let initHash;
+
+    // 抓取history hash在启动过程中的变更, 用于warmUp/warmLoad不一致的情况。
+    if (window.JsView.takeNativeHashChange) {
+      initHash = window.JsView.takeNativeHashChange({
+        //this.push(new_hash.substring(1)); // 去除#
+      });
+      if (initHash != null) {
+        // 将新hash融入window.location中
+        console.log("History: found init hash change to:" + initHash);
+      } else {
+        initHash = window.location.hash;
+      }
+    }
+
+    return initHash;
+  }
+
+  #updateLocation(location) {
+    if(!window.jsvIsBrowserDebug) {
+      const url = new window.JsView.Dom.UrlRef(
+        location ? this.baseURL + location : this.baseURL,
+        true
+      )
+      window.location.applyUrlInfo(url);
+    }
+  }
+}
+
+function createJsvHashHistory(base) {
+  return new JsvHashHistory(base)
+}
+
+export { createJsvHashHistory }