@jx3box/jx3box-editor 3.2.3 → 3.2.4

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jx3box/jx3box-editor",
-    "version": "3.2.3",
+    "version": "3.2.4",
     "description": "JX3BOX Article & Editor",
     "main": "index.js",
     "scripts": {

package/src/Article.vue

@@ -59,38 +59,38 @@ import Vditor from "vditor";
 import "github-markdown-css/github-markdown-light.css";
 
 // XSS
-import execFilterXSS from "./assets/js/xss";
+import execFilterXSS from "./assets/js/xss.js";
 
 // 基本文本
-import execLazyload from "./assets/js/img";
-import execFilterIframe from "./assets/js/iframe";
-import execFilterLink from "./assets/js/a";
-import execSplitPages from "./assets/js/nextpage";
-import normalizeMarkdownForVditor from "./assets/js/normalizeMarkdownForVditor";
+import execLazyload from "./assets/js/img.js";
+import execFilterIframe from "./assets/js/iframe.js";
+import execFilterLink from "./assets/js/a.js";
+import execSplitPages from "./assets/js/nextpage.js";
+import normalizeMarkdownForVditor from "./assets/js/normalizeMarkdownForVditor.js";
 
 // 扩展文本
-import renderFoldBlock from "./assets/js/fold";
-import renderDirectory from "./assets/js/directory";
-import renderKatex from "./assets/js/katex";
-import renderCode from "./assets/js/code";
-import renderImgPreview from "./assets/js/renderImgPreview";
+import renderFoldBlock from "./assets/js/fold.js";
+import renderDirectory from "./assets/js/directory.js";
+import renderKatex from "./assets/js/katex.js";
+import renderCode from "./assets/js/code.js";
+import renderImgPreview from "./assets/js/renderImgPreview.js";
 
 // 魔盒
-import renderMacro from "./assets/js/macro";
-import renderTalent from "./assets/js/qixue";
-import renderTalent2 from "./assets/js/talent2";
-import renderPzIframe from "./assets/js/pz_iframe";
-import renderCombo from "./assets/js/combo";
-import renderAudio from "./assets/js/audio";
-import Author from "./components/Author";
+import renderMacro from "./assets/js/macro.js";
+import renderTalent from "./assets/js/qixue.js";
+import renderTalent2 from "./assets/js/talent2.js";
+import renderPzIframe from "./assets/js/pz_iframe.js";
+import renderCombo from "./assets/js/combo.js";
+import renderAudio from "./assets/js/audio.js";
+import Author from "./components/Author.vue";
 import PostAuthor from "./components/PostAuthor.vue";
 
 // 剑三
-import Item from "./Item";
-import Buff from "./Buff";
-import Skill from "./Skill";
-import Npc from "./Npc";
-import renderJx3Element from "./assets/js/jx3_element";
+import Item from "./Item.vue";
+import Buff from "./Buff.vue";
+import Skill from "./Skill.vue";
+import Npc from "./Npc.vue";
+import renderJx3Element from "./assets/js/jx3_element.js";
 
 export default {
     name: "Article",

package/src/ArticleMarkdown.vue

@@ -27,27 +27,27 @@
 import markdownRender from "@jx3box/markdown/src/render.vue";
 
 // 基本文本
-import execLazyload from "./assets/js/img";
-import execFilterIframe from "./assets/js/iframe";
-import execFilterLink from "./assets/js/a";
-import execFilterXSS from "./assets/js/script";
+import execLazyload from "./assets/js/img.js";
+import execFilterIframe from "./assets/js/iframe.js";
+import execFilterLink from "./assets/js/a.js";
+import execFilterXSS from "./assets/js/script.js";
 
 // 扩展文本
-import renderDirectory from "./assets/js/directory";
-import renderMacro from "./assets/js/macro";
-import renderTalent from "./assets/js/qixue";
-import renderTalent2 from "./assets/js/talent2";
-import { renderKatexAll } from "./assets/js/katex";
-import renderCode from "./assets/js/code";
+import renderDirectory from "./assets/js/directory.js";
+import renderMacro from "./assets/js/macro.js";
+import renderTalent from "./assets/js/qixue.js";
+import renderTalent2 from "./assets/js/talent2.js";
+import renderKatexAll from "./assets/js/katex.js";
+import renderCode from "./assets/js/code.js";
 
 // 剑三
-import Item from "./Item";
-import Buff from "./Buff";
-import Skill from "./Skill";
-import Npc from "./Npc";
-import renderJx3Element from "./assets/js/jx3_element";
-import renderImgPreview from "./assets/js/renderImgPreview";
-import renderAudio from "./assets/js/audio";
+import Item from "./Item.vue";
+import Buff from "./Buff.vue";
+import Skill from "./Skill.vue";
+import Npc from "./Npc.vue";
+import renderJx3Element from "./assets/js/jx3_element.js";
+import renderImgPreview from "./assets/js/renderImgPreview.js";
+import renderAudio from "./assets/js/audio.js";
 
 import { xssOptions } from "./assets/data/markdown_whitelist.json";
 

package/src/BoxResource.vue

@@ -190,9 +190,9 @@
 </template>
 
 <script>
-import { loadStat } from "./service/database";
-import { loadAuthors, loadEmotions, getLetterPaper } from "./service/cms";
-import { getUserInfo } from "./service/author";
+import { loadStat } from "./service/database.js";
+import { loadAuthors, loadEmotions, getLetterPaper } from "./service/cms.js";
+import { getUserInfo } from "./service/author.js";
 import JX3BOX from "@jx3box/jx3box-common/data/jx3box.json";
 import { getLink, showAvatar, resolveImagePath } from "@jx3box/jx3box-common/js/utils";
 import User from "@jx3box/jx3box-common/js/user";

package/src/GameText.vue

@@ -11,7 +11,7 @@
 
 <script>
 import { extractTextContent, getLink, iconLink } from "@jx3box/jx3box-common/js/utils";
-import { getResource as getResourceFromNode } from "./service/resource";
+import { getResource as getResourceFromNode } from "./service/resource.js";
 import { escape } from "lodash";
 import gameFonts from "./assets/data/game_font.json";
 

package/src/ItemSimple.vue

@@ -38,7 +38,7 @@
 </template>
 
 <script>
-import Item from "./Item";
+import Item from "./Item.vue";
 import icon_url from "./assets/js/item/icon_url.js";
 import item_color from "./assets/js/item/color.js";
 import item_border from "./assets/js/item/border.js";

package/src/Markdown.vue

@@ -35,7 +35,7 @@ import {
 import Vditor from "vditor";
 import "vditor/dist/index.css";
 import "github-markdown-css/github-markdown-light.css";
-import normalizeMarkdownForVditor from "./assets/js/normalizeMarkdownForVditor";
+import normalizeMarkdownForVditor from "./assets/js/normalizeMarkdownForVditor.js";
 
 const { __cms } = JX3BOX;
 const UPLOAD_API = `${__cms}api/cms/upload`;

package/src/Resource.vue

@@ -286,7 +286,7 @@
 
 <script>
 import { ArrowDown, Histogram } from "@element-plus/icons-vue";
-import { loadResource, loadStat, getIcons } from "./service/database";
+import { loadResource, loadStat, getIcons } from "./service/database.js";
 import JX3BOX from "@jx3box/jx3box-common/data/jx3box.json";
 import detach_types from "./assets/data/detach_type.json";
 import { iconLink, getLink as resolveLink } from "@jx3box/jx3box-common/js/utils";

package/src/Tinymce.vue

@@ -42,9 +42,9 @@ const { __cdn, __imgPath, __cms } = JX3BOX;
 // 开发环境走 devServer proxy，避免跨域导致粘贴图片上传“看起来没反应”
 const apiUrl = process.env.NODE_ENV === "development" ? "/api/cms/upload/tinymce" : __cms + "api/cms/upload/tinymce";
 
-import Upload from "./Upload";
-import Resource from "./Resource";
-import BoxResource from "./BoxResource";
+import Upload from "./Upload.vue";
+import Resource from "./Resource.vue";
+import BoxResource from "./BoxResource.vue";
 import Emotion from "@jx3box/jx3box-emotion/src/Emotion.vue";
 
 import axios from "axios";

package/src/Upload.vue

@@ -88,7 +88,7 @@ import axios from "axios";
 import { Delete, Plus, UploadFilled, ZoomIn } from "@element-plus/icons-vue";
 import JX3BOX from "@jx3box/jx3box-common/data/jx3box.json";
 import allow_types from "@jx3box/jx3box-common/data/conf";
-import { showImgPreview } from "./assets/js/renderImgPreview";
+import { showImgPreview } from "./assets/js/renderImgPreview.js";
 const { __cms } = JX3BOX;
 const API = __cms + "api/cms/upload";
 const imgtypes = ["jpg", "png", "gif", "bmp", "webp", "jpeg", "svg"];

package/src/assets/css/tinymce/pz.less

@@ -37,3 +37,8 @@
         display: block;
     }
 }
+
+.w-pz-iframe-wrap {
+    width: 100%;
+    overflow: auto;
+}

package/src/assets/js/jx3_element.js

@@ -3,62 +3,216 @@ import $ from "jquery";
 function renderItem(vm, selector = ".w-jx3-element") {
     let outer, inner;
     const pop_class = ".w-jx3-element-pop";
+    const scopeEl = vm && vm.$el ? vm.$el : document;
+    const $scope = $(scopeEl);
+    const uid = vm && vm._uid ? vm._uid : "default";
+    const ns = `.jx3boxElement_${uid}`;
+    let lastTappedElement = null;
+    const debugPop = false;
 
-    // 触发时
-    $(selector).on("mouseenter", function (e) {
-        clearTimeout(outer);
+    const isMobile = () => {
+        if (typeof window === "undefined") return false;
+
+        const coarsePointer =
+            typeof window.matchMedia === "function" &&
+            window.matchMedia("(hover: none) and (pointer: coarse)").matches;
+        const hasTouchEvent = "ontouchstart" in window;
+        const mobileUA =
+            typeof navigator !== "undefined" &&
+            /Android|iPhone|iPad|iPod|Mobile/i.test(navigator.userAgent || "");
+
+        return coarsePointer || (hasTouchEvent && mobileUA);
+    };
+
+    const cachedPop =
+        vm &&
+        vm.__jx3ElementPop &&
+        vm.__jx3ElementPop.length &&
+        document.documentElement.contains(vm.__jx3ElementPop[0])
+            ? vm.__jx3ElementPop
+            : null;
+    const $pop = cachedPop || $scope.find(pop_class).first();
+
+    if (!$pop.length) return;
+    if (isMobile() && vm) {
+        vm.__jx3ElementPop = $pop;
+        if ($pop.parent()[0] !== document.body) {
+            $pop.appendTo(document.body);
+        }
+    }
+
+    const getCurrentTarget = (el, e) => {
+        const $self = $(el).closest(selector);
+        if ($self.length) return $self;
+        return $(e.currentTarget || e.target).closest(selector);
+    };
+
+    const getDataTarget = ($target, e) => {
+        const $eventTarget = $(e?.target);
+        const $fromEvent = $eventTarget.closest("[data-type]");
+        if ($fromEvent.length && $target.has($fromEvent).length) return $fromEvent;
+        if ($target.attr("data-type")) return $target;
+
+        return $target.find("[data-type]").first();
+    };
 
-        // 获取元素数据
-        let type = $(e.target).attr("data-type");
-        if (type == "item") {
-            vm.item.id = $(e.target).attr("data-id");
-            vm.item.client = $(e.target).attr("data-client") == "origin" ? 2 : 1;
+    const getHrefTarget = ($target) => {
+        if ($target.is("a[href]")) return $target;
+        return $target.closest("a[href]");
+    };
+
+    const syncElementData = ($dataTarget, $targetForFallback = null) => {
+        let type = $dataTarget.attr("data-type");
+        if (!type && $targetForFallback && $targetForFallback.length) {
+            const $fallback = $targetForFallback.attr("data-type")
+                ? $targetForFallback
+                : $targetForFallback.find("[data-type]").first();
+            type = $fallback.attr("data-type");
+            if ($fallback.length) $dataTarget = $fallback;
+        }
+        if (!type) return "";
+
+        if (type === "item") {
+            vm.item.id = $dataTarget.attr("data-id");
+            vm.item.client = $dataTarget.attr("data-client") == "origin" ? 2 : 1;
         } else if (type === "author") {
-            vm.author.id = $(e.target).attr("data-id");
+            vm.author.id = $dataTarget.attr("data-id");
         } else if (type === "emotion") {
-            vm.emotion.id = $(e.target).attr("data-id");
-        } else {
-            vm[type].client = $(e.target).attr("data-client");
-            vm[type].id = $(e.target).attr("data-id");
-            vm[type].level = $(e.target).attr("data-level");
+            vm.emotion.id = $dataTarget.attr("data-id");
+        } else if (vm[type]) {
+            vm[type].client = $dataTarget.attr("data-client");
+            vm[type].id = $dataTarget.attr("data-id");
+            vm[type].level = $dataTarget.attr("data-level");
         }
 
-        // 显示浮层
-        $(pop_class).fadeIn();
         vm.jx3_element.type = type;
+        return type;
+    };
+
+    const showPop = ($dataTarget, point = {}, $targetForRect = null) => {
+        clearTimeout(outer);
+        clearTimeout(inner);
+
+        const type = syncElementData($dataTarget, $targetForRect);
+        if (!type) return;
+
+        const fallbackRect = $targetForRect && $targetForRect.length ? $targetForRect[0].getBoundingClientRect() : null;
+        const fallbackX = fallbackRect ? fallbackRect.left + fallbackRect.width / 2 : 0;
+        const fallbackY = fallbackRect ? fallbackRect.top + fallbackRect.height / 2 : 0;
+        const clientX = Number(point.clientX ?? fallbackX ?? 0);
+        const clientY = Number(point.clientY ?? fallbackY ?? 0);
+
+        vm.jx3_element.style.display = "block";
+        vm.jx3_element.style.position = "fixed";
+        vm.jx3_element.style.zIndex = "99999";
+        $pop.stop(true, true).fadeIn(120);
 
-        // 计算浮层位置
-        let self_height = $(pop_class).height();
-        let win_height = window.innerHeight;
-        let current_y = e.clientY;
-        let will_stay_y = e.clientY + 10;
+        const selfHeight = $pop.height();
+        const winHeight = window.innerHeight;
+        const currentY = clientY;
+        let willStayY = clientY + 10;
 
-        if (self_height && win_height - current_y < self_height) {
-            will_stay_y =
-                current_y - (self_height - (win_height - current_y)) - 100;
+        if (selfHeight && winHeight - currentY < selfHeight) {
+            willStayY = currentY - (selfHeight - (winHeight - currentY)) - 100;
         }
-        vm.jx3_element.style.left = e.clientX + 10 + "px";
-        vm.jx3_element.style.top = will_stay_y + "px";
+
+        const maxLeft = Math.max(0, window.innerWidth - ($pop.outerWidth() || 0) - 12);
+        vm.jx3_element.style.left = Math.max(0, Math.min(clientX + 10, maxLeft)) + "px";
+        vm.jx3_element.style.top = Math.max(0, willStayY) + "px";
+
+        if (debugPop && isMobile()) {
+            vm.jx3_element.style.left = "50%";
+            vm.jx3_element.style.top = "52%";
+            vm.jx3_element.style.transform = "translate(-50%, -50%)";
+            vm.jx3_element.style.zIndex = "99999";
+            vm.jx3_element.style.background = "rgba(0,0,0,0.88)";
+            vm.jx3_element.style.outline = "2px solid #00e5ff";
+            vm.jx3_element.style.maxHeight = "72vh";
+            vm.jx3_element.style.overflow = "auto";
+        } else {
+            vm.jx3_element.style.transform = "";
+            vm.jx3_element.style.background = "";
+            vm.jx3_element.style.outline = "";
+            vm.jx3_element.style.maxHeight = "";
+            vm.jx3_element.style.overflow = "";
+        }
+    };
+
+    const hidePop = () => {
+        vm.jx3_element.style.display = "none";
+        $pop.stop(true, true).fadeOut(120);
+    };
+
+    // 触发时
+    $scope.off(ns);
+    $pop.off(ns);
+    $(document).off(ns);
+
+    $scope.on(`mouseenter${ns}`, selector, function (e) {
+        if (isMobile()) return;
+        const $target = getCurrentTarget(this, e);
+        const $dataTarget = getDataTarget($target, e);
+        showPop($dataTarget, e, $target);
     });
 
     // 移除时
-    $(selector).on("mouseleave", function (e) {
+    $scope.on(`mouseleave${ns}`, selector, function () {
+        if (isMobile()) return;
         outer = setTimeout(() => {
-            $(pop_class).fadeOut();
+            hidePop();
         }, 380);
     });
 
+    $scope.on(`click${ns}`, selector, function (e) {
+        if (!isMobile()) return;
+
+        const $target = getCurrentTarget(this, e);
+        const $dataTarget = getDataTarget($target, e);
+        if (!$dataTarget.length) return;
+
+        const $hrefTarget = getHrefTarget($target);
+        const href = String($hrefTarget.attr("href") || "");
+        const touch = e.originalEvent?.touches?.[0] || e.originalEvent?.changedTouches?.[0];
+        const point = touch || e;
+        const tappedElement = $target.get(0);
+
+        if (href && lastTappedElement === tappedElement) {
+            lastTappedElement = null;
+            hidePop();
+            return;
+        }
+
+        e.preventDefault();
+        lastTappedElement = tappedElement;
+        showPop($dataTarget, point, $target);
+    });
+
     // POP内停留
-    $(pop_class).on("mouseenter", function (e) {
+    $pop.on(`mouseenter${ns}`, function () {
+        if (isMobile()) return;
         clearTimeout(outer);
-        $(pop_class).fadeIn();
+        vm.jx3_element.style.display = "block";
+        $pop.stop(true, true).fadeIn(120);
     });
-    $(pop_class).on("mouseleave", function (e) {
+    $pop.on(`mouseleave${ns}`, function () {
+        if (isMobile()) return;
         clearTimeout(inner);
         inner = setTimeout(() => {
-            $(pop_class).fadeOut();
+            hidePop();
         }, 280);
     });
+
+    $(document).on(`click${ns}`, function (e) {
+        if (!isMobile()) return;
+        const $target = $(e.target);
+        const $trigger = $target.closest(selector);
+        const isCurrentTrigger = $trigger.length && ($trigger[0] === scopeEl || $scope.has($trigger[0]).length);
+
+        if (isCurrentTrigger || $target.closest(pop_class).length) return;
+
+        lastTappedElement = null;
+        hidePop();
+    });
 }
 
 export default renderItem;

package/src/assets/js/pz_iframe.js

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

package/src/components/Author.vue

@@ -70,8 +70,8 @@
 
 <script>
 import { authorLink, getLink, getMedalLink, getThumbnail } from "@jx3box/jx3box-common/js/utils";
-import { getUserInfo, getUserMedals, getUserPublicTeams } from "../service/author";
-import { getDecoration, getDecorationJson } from "../service/cms";
+import { getUserInfo, getUserMedals, getUserPublicTeams } from "../service/author.js";
+import { getDecoration, getDecorationJson } from "../service/cms.js";
 import User from "@jx3box/jx3box-common/js/user";
 import JX3BOX from "@jx3box/jx3box-common/data/jx3box.json";
 import Avatar from "./Avatar.vue";

package/src/components/Combo.vue

@@ -154,7 +154,7 @@ import { h } from "vue";
 import { ElIcon } from "element-plus";
 import { Check, Close } from "@element-plus/icons-vue";
 import { iconLink } from "@jx3box/jx3box-common/js/utils";
-import { getSkill } from "../service/resource";
+import { getSkill } from "../service/resource.js";
 import SkillMartial from "./SkillMartial.vue";
 
 import Sortable from "sortablejs";

package/src/components/PostAuthor.vue

@@ -27,7 +27,7 @@
 
 <script>
 import { authorLink } from "@jx3box/jx3box-common/js/utils";
-import { getEmotion } from "../service/author";
+import { getEmotion } from "../service/author.js";
 import JX3BOX from "@jx3box/jx3box-common/data/jx3box.json";
 import dayjs from "dayjs";
 import Avatar from "./Avatar.vue";

package/src/components/SkillMartial.vue

@@ -178,7 +178,7 @@ import {
     getSkills,
     getTalents,
     getMobileForceSkillList,
-} from "../service/node";
+} from "../service/node.js";
 import kungfumap_std from "@jx3box/jx3box-data/data/martial/kungfu_std.json";
 import kungfumap_origin from "@jx3box/jx3box-data/data/martial/kungfu_origin.json";
 import { flattenDeep, uniqBy } from "lodash";