@jx3box/jx3box-ui 0.0.1

package/assets/js/pswp.js

@@ -0,0 +1,67 @@
+import $ from "jquery";
+import PhotoSwipe from "photoswipe";
+import PhotoSwipeUI_Default from "photoswipe/dist/photoswipe-ui-default";
+import "photoswipe/dist/photoswipe.css";
+import "photoswipe/dist/default-skin/default-skin.css";
+import tpl from "./pswp_template.js";
+// https://photoswipe.com/documentation/options.html
+
+class Gallery {
+    constructor(options) {
+        this._picbox = "";
+        this.options = options || {
+            bgOpacity: 0.8,
+            shareEl: false,
+            zoomEl: false,
+            closeOnScroll: false,
+        };
+        this.bucket = [];
+        this.items = [];
+        this.pswp = "";
+    }
+    init($root, $selector = "img") {
+        // 创建容器
+        let isExist = document.querySelectorAll(".pswp").length;
+        if (!isExist) $("body").append(tpl);
+        this._picbox = document.querySelectorAll(".pswp")[0];
+
+        //fix需要清空,可能替换内容重复渲染
+        this.bucket = [];
+        this.items = [];
+
+        // 缓存图片序列
+        $($root)
+            .find($selector + ":visible")
+            .each((i, $pic) => {
+                this.bucket.push($pic);
+                this.items.push({
+                    $el: $pic,
+                    src: $pic.src,
+                    w: $pic.naturalWidth || $pic.width || 400,
+                    h: $pic.naturalHeight || $pic.height || 400,
+                });
+            });
+
+        // 绑定事件
+        $($root)
+            .find($selector)
+            .on("click", (e) => {
+                this.open(e.target);
+            });
+    }
+    open(target) {
+        let i = this.bucket.indexOf(target);
+        //可能为0
+        if (i > -1) {
+            let _options = Object.assign(this.options, {
+                index: i,
+            });
+            // 需要在每次调用时重新初始化，因为关闭按钮会自动销毁实例
+            let pswp = new PhotoSwipe(this._picbox, PhotoSwipeUI_Default, this.items, _options);
+
+            pswp.init();
+        }
+    }
+}
+
+export default new Gallery();

package/assets/js/pswp_template.js

@@ -0,0 +1,66 @@
+export default `<!-- Root element of PhotoSwipe. Must have class pswp. -->
+<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
+
+    <!-- Background of PhotoSwipe. 
+         It's a separate element as animating opacity is faster than rgba(). -->
+    <div class="pswp__bg"></div>
+
+    <!-- Slides wrapper with overflow:hidden. -->
+    <div class="pswp__scroll-wrap">
+
+        <!-- Container that holds slides. 
+            PhotoSwipe keeps only 3 of them in the DOM to save memory.
+            Don't modify these 3 pswp__item elements, data is added later on. -->
+        <div class="pswp__container">
+            <div class="pswp__item"></div>
+            <div class="pswp__item"></div>
+            <div class="pswp__item"></div>
+        </div>
+
+        <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
+        <div class="pswp__ui pswp__ui--hidden">
+
+            <div class="pswp__top-bar">
+
+                <!--  Controls are self-explanatory. Order can be changed. -->
+
+                <div class="pswp__counter"></div>
+
+                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
+
+                <button class="pswp__button pswp__button--share" title="Share"></button>
+
+                <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
+
+                <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
+
+                <!-- Preloader demo https://codepen.io/dimsemenov/pen/yyBWoR -->
+                <!-- element will get class pswp__preloader--active when preloader is running -->
+                <div class="pswp__preloader">
+                    <div class="pswp__preloader__icn">
+                      <div class="pswp__preloader__cut">
+                        <div class="pswp__preloader__donut"></div>
+                      </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
+                <div class="pswp__share-tooltip"></div> 
+            </div>
+
+            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
+            </button>
+
+            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
+            </button>
+
+            <div class="pswp__caption">
+                <div class="pswp__caption__center"></div>
+            </div>
+
+        </div>
+
+    </div>
+
+</div>`;

package/assets/js/pz_iframe.js

@@ -0,0 +1,30 @@
+import $ from "jquery";
+function buildIframe(str){
+    let _str = new URLSearchParams(str);
+    let mode = _str.get('mode')
+
+    if(mode == 'vertical'){
+        return `<iframe class="w-pz-iframe" src="${str}" scrolling="no" width="750" height="3468" style="border:none;background:none;max-width:100%;overflow:hidden;"></iframe>`
+    }else{
+        return `<iframe class="w-pz-iframe" src="${str}" scrolling="no" width="1280" height="720" style="border:none;background:none;max-width:100%;overflow:hidden;"></iframe>`
+    }
+}
+
+function renderPzIframe(selector = ".e-pz-iframe"){
+    try {
+        $(selector).each(function() {
+            // 获取嵌入源地址
+            let url =  $(this).text();
+
+            // 构建嵌入源码
+            let code = buildIframe(url)
+
+            // 挂载点
+            $(this).after(code);
+        });
+    } catch (e) {
+        console.error(e);
+    }
+}
+
+export default renderPzIframe

package/assets/js/qixue.js

@@ -0,0 +1,28 @@
+import JX3_QIXUE from '@jx3box/jx3box-talent'
+import $ from 'jquery'
+
+function qixue(selector=".e-jx3qixue-area"){
+    try {
+        $(selector).each(function (){
+
+            // 挂载点
+            $(this).after('<div class="e-jx3qixue-temp-container"></div>')
+            let container = $(this).next('.e-jx3qixue-temp-container')
+
+            // 内容解析
+            let qixue = ''
+            if($(this)[0].tagName == "INPUT"){
+                qixue = JSON.parse($(this).val())
+            }else{
+                qixue = JSON.parse($(this).text())
+            }
+
+            let _qixue = Object.assign({container:container},{...qixue, client: qixue?.client || 'std'})
+            new JX3_QIXUE(_qixue)
+        })
+    } catch (e) {
+        console.error(e);
+    }
+}
+export default qixue
+

package/assets/js/renderImgPreview.js

@@ -0,0 +1,18 @@
+import $ from "jquery";
+import "viewerjs/dist/viewer.css";
+import Viewer from "viewerjs";
+
+function renderImgPreview(selector = ".c-article img") {
+    // 获取src不为空的图片
+    let imgs = $(selector).filter(function () {
+        return $(this).attr("src") != "";
+    });
+    imgs.each((i, ele) => {
+        new Viewer(ele, {
+            toolbar: false,
+            navbar: false,
+        });
+    });
+}
+
+export default renderImgPreview;

package/assets/js/script.js

@@ -0,0 +1,6 @@
+// xss
+function fixXSS(str) {
+    const REG = /<\/?script(.*?)>/gi;
+    return str.replace(REG, "");
+}
+export default fixXSS;

package/assets/js/stat.js

@@ -0,0 +1,107 @@
+import {
+    Reporter
+} from "@jx3box/reporter"
+import JX3BOX from "@jx3box/jx3box-common/data/jx3box.json";
+import { $next } from "@jx3box/jx3box-common/js/api";
+
+const { __Domain } = JX3BOX;
+
+/**
+     * 16进制转int
+     * @param {string} str
+     * @returns
+     * @memberof stat
+    */
+function int162hex(str) {
+    let hex = str.toString(16);
+    return hex.length == 1 ? "0" + hex : hex;
+}
+
+/**
+ * 二进制转hex
+ * @param {string} str
+ */
+function bin2hex(str) {
+    let result = "";
+    for (let i = 0; i < str.length; i++) {
+        result += int162hex(str.charCodeAt(i));
+    }
+    return result;
+}
+
+/**
+ * 获取uuid
+ */
+function getUUID(domain = __Domain) {
+    const canvas = document.createElement("canvas");
+    const ctx = canvas.getContext("2d");
+    const txt =  domain;
+    ctx.textBaseline = "top";
+    ctx.font = "14px 'Arial'";
+    ctx.textBaseline = "alphabetic";
+    ctx.fillStyle = "#f60";
+    ctx.fillRect(125, 1, 62, 20);
+    ctx.fillStyle = "#069";
+    ctx.fillText(txt, 2, 15);
+    ctx.fillStyle = "rgba(102, 204, 0, 0.7)";
+    ctx.fillText(txt, 4, 17);
+
+    const b64 = canvas.toDataURL().replace("data:image/png;base64,", "");
+    const bin = atob(b64);
+    const crc = bin2hex(bin.slice(-16, -12));
+    return crc;
+}
+
+// 统计指令
+const stat = {
+    /**
+     * 上报指令 vue2
+     * @param {string} user_id 用户id 使用User.getInfo().uid获取
+     * @param {boolean} use_query 是否上报当前页面中url中的参数 默认false
+     * @param {string} caller 上报来源
+     * @param {object} data 上报数据
+     */
+    install(Vue) {
+        Vue.directive("stat", {
+            mounted: function (el, binding) {
+                el.clickHandler = function () {
+                    const {
+                        user_id,
+                        use_query = false,
+                        caller,
+                        data
+                    } = binding.value;
+
+                    const R = new Reporter({
+                        caller,
+                        use_query, // 上报当前页面中url中的参数 默认false
+                        useId: user_id // 当前登录用户id
+                    });
+
+                    R.p({ uuid: getUUID(), ...data })
+                };
+
+                el.addEventListener("click", el.clickHandler);
+            },
+            unmounted: function (el) {
+                el.removeEventListener("click", el.clickHandler);
+                el.clickHandler = null;
+            }
+        });
+    }
+}
+
+/**
+ * 添加历史记录
+ * @param {*} data
+ * @param {*} data.source_type 例如：macro,community
+ * @param {*} data.source_id 例如：文章id，帖子id
+ * @param {*} data.link 例如：文章链接，帖子链接
+ * @param {*} data.title 例如：文章标题，帖子标题
+ * @returns
+ */
+export function postHistory(data) {
+    return $next({mute: true}).post("/api/next2/userdata/visit-history/item", data);
+}
+
+export default stat;

package/assets/js/talent2.js

@@ -0,0 +1,21 @@
+import $ from "jquery";
+import { Base64 } from "js-base64";
+function talent2(selector = ".e-jx3talent2-area") {
+    try {
+        $(selector).each(function() {
+            // 挂载点
+            $(this).after('<div class="e-jx3talent2-temp-container" style="width:100%;height:525px;overflow:hidden;"></div>');
+            let container = $(this).next(".e-jx3talent2-temp-container");
+
+            // 内容解析
+            let talent = $(this).text();
+            let code = Base64.encode(talent);
+            let url = "https://oss.jx3box.com/static/jx3box-talent2/index.html" + "?code=" + code;
+
+            container.html(`<iframe src="${url}" width="100%" height="100%" style="overflow:hidden;border:none;"></iframe>`);
+        });
+    } catch (e) {
+        console.error(e);
+    }
+}
+export default talent2;