artalk 2.1.6 → 2.1.9

package/dist/Artalk.es.js

@@ -68,6 +68,7 @@ class Context {
     __publicField(this, "conf");
     __publicField(this, "user");
     __publicField(this, "eventList", []);
+    __publicField(this, "markedInstance");
     this.cid = +new Date();
     this.$root = rootEl;
     this.conf = conf;
@@ -102,6 +103,7 @@ const defaults$3 = {
   vote: true,
   voteDown: false,
   uaBadge: true,
+  listSort: true,
   pvEl: "#ArtalkPV",
   flatMode: "auto",
   maxNesting: 3,
@@ -118,6 +120,7 @@ const defaults$3 = {
     content: 300,
     children: 400
   },
+  imgUpload: true,
   reqTimeout: 15e3,
   versionCheck: true
 };
@@ -2654,37 +2657,36 @@ function versionCompare(a, b) {
   }
   return 0;
 }
-let markedInstance;
+function initMarked(ctx) {
+  const renderer = new marked$1.Renderer();
+  const linkRenderer = renderer.link;
+  renderer.link = (href, title, text) => {
+    const localLink = href == null ? void 0 : href.startsWith(`${window.location.protocol}//${window.location.hostname}`);
+    const html = linkRenderer.call(renderer, href, title, text);
+    return html.replace(/^<a /, `<a target="_blank" ${!localLink ? `rel="noreferrer noopener nofollow"` : ""} `);
+  };
+  const nMarked = marked$1;
+  marked$1.setOptions({
+    renderer,
+    highlight: (code) => hanabi(code),
+    pedantic: false,
+    gfm: true,
+    breaks: true,
+    smartLists: true,
+    smartypants: true,
+    xhtml: false,
+    sanitize: true,
+    sanitizer: (html) => insane_1(html, __spreadProps(__spreadValues({}, insane_1.defaults), {
+      allowedAttributes: __spreadProps(__spreadValues({}, insane_1.defaults.allowedAttributes), {
+        img: ["src", "atk-emoticon"]
+      })
+    })),
+    silent: true
+  });
+  ctx.markedInstance = nMarked;
+}
 function marked(ctx, src) {
-  if (!markedInstance) {
-    const renderer = new marked$1.Renderer();
-    const linkRenderer = renderer.link;
-    renderer.link = (href, title, text) => {
-      const localLink = href == null ? void 0 : href.startsWith(`${window.location.protocol}//${window.location.hostname}`);
-      const html = linkRenderer.call(renderer, href, title, text);
-      return html.replace(/^<a /, `<a target="_blank" ${!localLink ? `rel="noreferrer noopener nofollow"` : ""} `);
-    };
-    const nMarked = marked$1;
-    marked$1.setOptions({
-      renderer,
-      highlight: (code) => hanabi(code),
-      pedantic: false,
-      gfm: true,
-      breaks: true,
-      smartLists: true,
-      smartypants: true,
-      xhtml: false,
-      sanitize: true,
-      sanitizer: (html) => insane_1(html, __spreadProps(__spreadValues({}, insane_1.defaults), {
-        allowedAttributes: __spreadProps(__spreadValues({}, insane_1.defaults.allowedAttributes), {
-          img: ["src", "atk-emoticon"]
-        })
-      })),
-      silent: true
-    });
-    markedInstance = nMarked;
-  }
-  return markedInstance.parse(src);
+  return ctx.markedInstance.parse(src);
 }
 function getCorrectUserAgent() {
   return __async(this, null, function* () {
@@ -2710,6 +2712,18 @@ function getCorrectUserAgent() {
     return uaRaw;
   });
 }
+function isValidURL(urlRaw) {
+  let url;
+  try {
+    url = new URL(urlRaw);
+  } catch (_) {
+    return false;
+  }
+  return url.protocol === "http:" || url.protocol === "https:";
+}
+function getURLBasedOnApi(ctx, path) {
+  return `${ctx.conf.server.replace(/\/api\/?$/, "")}/${path.replace(/^\//, "")}`;
+}
 function showLoading(parentElem) {
   if (parentElem instanceof Context)
     parentElem = parentElem.$root;
@@ -3300,6 +3314,25 @@ class Api {
       return p.pv;
     });
   }
+  imgUpload(file) {
+    return __async(this, null, function* () {
+      const params = {
+        name: this.ctx.user.data.nick,
+        email: this.ctx.user.data.email,
+        page_key: this.ctx.conf.pageKey
+      };
+      if (this.ctx.conf.site)
+        params.site_name = this.ctx.conf.site;
+      const form = ToFormData(params);
+      form.set("file", file);
+      const init = {
+        method: "POST",
+        body: form
+      };
+      const json = yield Fetch(this.ctx, `${this.baseURL}/img-upload`, init);
+      return json.data || {};
+    });
+  }
   captchaGet() {
     return __async(this, null, function* () {
       const data = yield GET(this.ctx, `${this.baseURL}/captcha/refresh`);
@@ -3723,6 +3756,7 @@ class Editor extends Component {
     __publicField(this, "$plugWrap");
     __publicField(this, "$bottom");
     __publicField(this, "$plugBtnWrap");
+    __publicField(this, "$imgUploadBtn");
     __publicField(this, "$submitBtn");
     __publicField(this, "$notifyWrap");
     __publicField(this, "replyComment", null);
@@ -3733,6 +3767,7 @@ class Editor extends Component {
       abortFunc: null
     });
     __publicField(this, "openedPlugName", null);
+    __publicField(this, "allowImgExts", ["png", "jpg", "jpeg", "gif", "bmp", "svg", "webp"]);
     this.$el = createElement(EditorHTML);
     this.$header = this.$el.querySelector(".atk-header");
     this.$textareaWrap = this.$el.querySelector(".atk-textarea-wrap");
@@ -3756,6 +3791,7 @@ class Editor extends Component {
     this.ctx.on("editor-notify", (f) => this.showNotify(f.msg, f.type));
     this.ctx.on("editor-travel", ($el) => this.travel($el));
     this.ctx.on("editor-travel-back", () => this.travelBack());
+    this.ctx.on("conf-updated", () => this.refreshUploadBtn());
   }
   get user() {
     return this.ctx.user;
@@ -3854,7 +3890,7 @@ class Editor extends Component {
     this.openedPlugName = null;
     this.$plugBtnWrap.innerHTML = "";
     this.LOADABLE_PLUG_LIST.forEach((PlugObj) => {
-      const btnElem = createElement(`<span class="atk-plug-btn">${PlugObj.BtnHTML}</span>`);
+      const btnElem = createElement(`<span class="atk-plug-btn" data-plug-name="${PlugObj.Name}">${PlugObj.BtnHTML}</span>`);
       this.$plugBtnWrap.appendChild(btnElem);
       btnElem.addEventListener("click", () => {
         let plug = this.plugList[PlugObj.Name];
@@ -3890,12 +3926,98 @@ class Editor extends Component {
         btnElem.classList.add("active");
       });
     });
+    this.initImgUpload();
   }
   closePlug() {
     this.$plugWrap.innerHTML = "";
     this.$plugWrap.style.display = "none";
     this.openedPlugName = null;
   }
+  initImgUpload() {
+    this.$imgUploadBtn = createElement(`<span class="atk-plug-btn">\u56FE\u7247</span>`);
+    this.$plugBtnWrap.querySelector('[data-plug-name="preview"]').before(this.$imgUploadBtn);
+    this.$imgUploadBtn.onclick = () => {
+      const $input = document.createElement("input");
+      $input.type = "file";
+      $input.accept = this.allowImgExts.map((o) => `.${o}`).join(",");
+      $input.onchange = () => {
+        (() => __async(this, null, function* () {
+          if (!$input.files || $input.files.length === 0)
+            return;
+          const file = $input.files[0];
+          this.uploadImg(file);
+        }))();
+      };
+      $input.click();
+    };
+    const uploadFromFileList = (files) => {
+      if (!files)
+        return;
+      for (let i = 0; i < files.length; i++) {
+        const file = files[i];
+        this.uploadImg(file);
+      }
+    };
+    this.$textarea.addEventListener("dragover", (evt) => {
+      evt.stopPropagation();
+      evt.preventDefault();
+    });
+    this.$textarea.addEventListener("drop", (evt) => {
+      var _a;
+      const files = (_a = evt.dataTransfer) == null ? void 0 : _a.files;
+      if (files == null ? void 0 : files.length) {
+        evt.preventDefault();
+        uploadFromFileList(files);
+      }
+    });
+    this.$textarea.addEventListener("paste", (evt) => {
+      var _a;
+      const files = (_a = evt.clipboardData) == null ? void 0 : _a.files;
+      if (files == null ? void 0 : files.length) {
+        evt.preventDefault();
+        uploadFromFileList(files);
+      }
+    });
+  }
+  refreshUploadBtn() {
+    if (!this.$imgUploadBtn)
+      return;
+    if (!this.ctx.conf.imgUpload) {
+      this.$imgUploadBtn.setAttribute("atk-only-admin-show", "");
+      this.ctx.trigger("check-admin-show-el");
+    }
+  }
+  uploadImg(file) {
+    return __async(this, null, function* () {
+      const fileExt = /[^.]+$/.exec(file.name);
+      if (!fileExt || !this.allowImgExts.includes(fileExt[0]))
+        return;
+      if (!this.ctx.user.checkHasBasicUserInfo()) {
+        this.showNotify("\u586B\u5165\u4F60\u7684\u540D\u5B57\u90AE\u7BB1\u624D\u80FD\u4E0A\u4F20\u54E6", "w");
+        return;
+      }
+      let insertPrefix = "\n";
+      if (this.$textarea.value.trim() === "")
+        insertPrefix = "";
+      const uploadPlaceholderTxt = `${insertPrefix}![](Uploading ${file.name}...)`;
+      this.insertContent(uploadPlaceholderTxt);
+      let resp;
+      try {
+        resp = yield new Api(this.ctx).imgUpload(file);
+      } catch (err) {
+        console.error(err);
+        this.showNotify(`\u56FE\u7247\u4E0A\u4F20\u5931\u8D25\uFF0C${err.msg}`, "e");
+      }
+      if (!!resp && resp.img_url) {
+        let imgURL = resp.img_url;
+        if (!isValidURL(imgURL))
+          imgURL = getURLBasedOnApi(this.ctx, imgURL);
+        this.setContent(this.$textarea.value.replace(uploadPlaceholderTxt, `${insertPrefix}![](${imgURL})`));
+      } else {
+        this.setContent(this.$textarea.value.replace(uploadPlaceholderTxt, ""));
+      }
+    });
+  }
   insertContent(val) {
     if (document.selection) {
       this.$textarea.focus();
@@ -3927,7 +4049,7 @@ class Editor extends Component {
     this.setContent("");
     this.cancelReply();
   }
-  getContent() {
+  getFinalContent() {
     let content = this.getContentOriginal();
     if (this.plugList && this.plugList.emoticons) {
       const emoticonsPlug2 = this.plugList.emoticons;
@@ -3939,7 +4061,7 @@ class Editor extends Component {
     return this.$textarea.value || "";
   }
   getContentMarked() {
-    return marked(this.ctx, this.getContent());
+    return marked(this.ctx, this.getFinalContent());
   }
   initBottomPart() {
     this.initReply();
@@ -3988,7 +4110,7 @@ class Editor extends Component {
   }
   submit() {
     return __async(this, null, function* () {
-      if (this.getContent().trim() === "") {
+      if (this.getFinalContent().trim() === "") {
         this.$textarea.focus();
         return;
       }
@@ -3996,7 +4118,7 @@ class Editor extends Component {
       showLoading(this.$el);
       try {
         const nComment = yield new Api(this.ctx).add({
-          content: this.getContent(),
+          content: this.getFinalContent(),
           nick: this.user.data.nick,
           email: this.user.data.email,
           link: this.user.data.link,
@@ -4061,7 +4183,7 @@ class Editor extends Component {
   }
 }
 var list = "";
-var ListHTML = '<div class="atk-list">\n  <div class="atk-list-header">\n    <div class="atk-comment-count">\n      <span class="atk-comment-count-num">0</span>\n      \u6761\u8BC4\u8BBA\n    </div>\n    <div class="atk-right-action">\n      <span data-action="admin-close-comment" class="atk-hide" atk-only-admin-show>\u5173\u95ED\u8BC4\u8BBA</span>\n      <span data-action="open-sidebar" class="atk-hide atk-on">\n        <span class="atk-unread-badge" style="display: none;"></span>\n        <div class="atk-text">\u901A\u77E5\u4E2D\u5FC3</div>\n      </span>\n    </div>\n  </div>\n  <div class="atk-list-body"></div>\n  <div class="atk-list-footer">\n    <div class="atk-copyright"></div>\n  </div>\n</div>\n';
+var ListHTML = '<div class="atk-list">\n  <div class="atk-list-header">\n    <div class="atk-comment-count">\n      <div class="atk-text">\n        <span class="atk-comment-count-num">0</span>\n        \u6761\u8BC4\u8BBA\n      </div>\n    </div>\n    <div class="atk-right-action">\n      <span data-action="admin-close-comment" class="atk-hide" atk-only-admin-show>\u5173\u95ED\u8BC4\u8BBA</span>\n      <span data-action="open-sidebar" class="atk-hide atk-on">\n        <span class="atk-unread-badge" style="display: none;"></span>\n        <div class="atk-text">\u901A\u77E5\u4E2D\u5FC3</div>\n      </span>\n    </div>\n  </div>\n  <div class="atk-list-body"></div>\n  <div class="atk-list-footer">\n    <div class="atk-copyright"></div>\n  </div>\n</div>\n';
 var comment = "";
 var win = window || {};
 var nav = navigator || {};
@@ -4527,6 +4649,10 @@ class Comment extends Component {
     } else {
       $badge.remove();
     }
+    if (this.data.is_pinned) {
+      const $pinnedBadge = createElement(`<span class="atk-item atk-pinned-badge">\u7F6E\u9876</span>`);
+      $nick.insertAdjacentElement("afterend", $pinnedBadge);
+    }
     const $date = this.$el.querySelector(".atk-date");
     $date.innerText = this.getDateFormatted();
     $date.setAttribute("data-atk-comment-date", String(+new Date(this.data.date)));
@@ -4640,6 +4766,14 @@ class Comment extends Component {
     delBtn.setClick(() => {
       this.adminDelete(delBtn);
     });
+    const pinnedBtn = new ActionBtn({
+      text: () => this.data.is_pinned ? "\u53D6\u6D88\u7F6E\u9876" : "\u7F6E\u9876",
+      adminOnly: true
+    });
+    pinnedBtn.appendTo(this.$actions);
+    pinnedBtn.setClick(() => {
+      this.adminEdit("pinned", pendingBtn);
+    });
   }
   refreshUI() {
     const originalEl = this.$el;
@@ -4750,6 +4884,8 @@ class Comment extends Component {
       modify.is_collapsed = !modify.is_collapsed;
     } else if (type === "pending") {
       modify.is_pending = !modify.is_pending;
+    } else if (type === "pinned") {
+      modify.is_pinned = !modify.is_pinned;
     }
     new Api(this.ctx).commentEdit(modify).then((comment2) => {
       btnElem.setLoading(false);
@@ -5144,11 +5280,15 @@ class ListLite extends Component {
     this.data = data;
     if (this.ctx.conf.versionCheck && this.versionCheck(data.api_version))
       return;
+    if (data.conf && typeof data.conf.img_upload === "boolean") {
+      this.ctx.conf.imgUpload = data.conf.img_upload;
+    }
     this.importComments(data.comments);
     this.refreshPagination(offset, this.flatMode ? data.total : data.total_roots);
     this.refreshUI();
     this.ctx.trigger("unread-update", { notifies: data.unread || [] });
     this.ctx.trigger("comments-loaded");
+    this.ctx.trigger("conf-updated");
     if (this.onAfterLoad)
       this.onAfterLoad(data);
   }
@@ -5415,13 +5555,14 @@ class ListLite extends Component {
   }
   versionCheck(versionData) {
     const needVersion = (versionData == null ? void 0 : versionData.fe_min_version) || "0.0.0";
-    const needUpdate = versionCompare(needVersion, "2.1.6") === 1;
+    const needUpdate = versionCompare(needVersion, "2.1.9") === 1;
     if (needUpdate) {
-      const errEl = createElement(`<div>\u524D\u7AEF Artalk \u7248\u672C\u5DF2\u8FC7\u65F6\uFF0C\u8BF7\u66F4\u65B0\u4EE5\u83B7\u5F97\u5B8C\u6574\u4F53\u9A8C<br/>\u82E5\u60A8\u662F\u7AD9\u70B9\u7BA1\u7406\u5458\uFF0C\u8BF7\u524D\u5F80 \u201C<a href="https://artalk.js.org/" target="_blank">\u5B98\u65B9\u6587\u6863</a>\u201D \u83B7\u53D6\u5E2E\u52A9<br/><br/><span style="color: var(--at-color-meta);">\u524D\u7AEF\u7248\u672C ${"2.1.6"}\uFF0C\u9700\u6C42\u7248\u672C >= ${needVersion}</span><br/><br/></div>`);
+      const errEl = createElement(`<div>\u524D\u7AEF Artalk \u7248\u672C\u5DF2\u8FC7\u65F6\uFF0C\u8BF7\u66F4\u65B0\u4EE5\u83B7\u5F97\u5B8C\u6574\u4F53\u9A8C<br/>\u82E5\u60A8\u662F\u7AD9\u70B9\u7BA1\u7406\u5458\uFF0C\u8BF7\u524D\u5F80 \u201C<a href="https://artalk.js.org/" target="_blank">\u5B98\u65B9\u6587\u6863</a>\u201D \u83B7\u53D6\u5E2E\u52A9<br/><br/><span style="color: var(--at-color-meta);">\u524D\u7AEF\u7248\u672C ${"2.1.9"}\uFF0C\u9700\u6C42\u7248\u672C >= ${needVersion}</span><br/><br/></div>`);
       const ignoreBtn = createElement('<span style="cursor:pointer;">\u5FFD\u7565</span>');
       ignoreBtn.onclick = () => {
         setError(this.ctx, null);
         this.ctx.conf.versionCheck = false;
+        this.ctx.trigger("conf-updated");
         this.fetchComments(0);
       };
       errEl.append(ignoreBtn);
@@ -5438,6 +5579,8 @@ class List extends ListLite {
     __publicField(this, "$closeCommentBtn");
     __publicField(this, "$openSidebarBtn");
     __publicField(this, "$unreadBadge");
+    __publicField(this, "$commentCount");
+    __publicField(this, "$dropdownWrap");
     el.querySelector(".atk-list-body").append(this.$el);
     this.$el = el;
     let flatMode = false;
@@ -5452,7 +5595,11 @@ class List extends ListLite {
     this.pageSize = ((_b = this.conf.pagination) == null ? void 0 : _b.pageSize) || 20;
     this.repositionAt = this.$el;
     this.initListActionBtn();
-    this.$el.querySelector(".atk-copyright").innerHTML = `Powered By <a href="https://artalk.js.org" target="_blank" title="Artalk v${"2.1.6"}">Artalk</a>`;
+    this.$commentCount = this.$el.querySelector(".atk-comment-count");
+    if (this.ctx.conf.listSort) {
+      this.initDropdown();
+    }
+    this.$el.querySelector(".atk-copyright").innerHTML = `Powered By <a href="https://artalk.js.org" target="_blank" title="Artalk v${"2.1.9"}">Artalk</a>`;
     this.ctx.on("list-reload", () => this.fetchComments(0));
     this.ctx.on("list-refresh-ui", () => this.refreshUI());
     this.ctx.on("list-import", (data) => this.importComments(data));
@@ -5555,6 +5702,67 @@ class List extends ListLite {
       this.$unreadBadge.style.display = "none";
     }
   }
+  initDropdown() {
+    this.$dropdownWrap = this.$commentCount;
+    this.$commentCount.classList.add("atk-dropdown-wrap");
+    this.$dropdownWrap.append(createElement(`<span class="atk-arrow-down-icon"></span>`));
+    const reloadUseParamsEditor = (func) => {
+      this.paramsEditor = (p) => {
+        func(p);
+      };
+      this.fetchComments(0);
+    };
+    const dropdownList = [
+      ["\u6700\u65B0", () => {
+        reloadUseParamsEditor((p) => {
+          p.sort_by = "date_desc";
+        });
+      }],
+      ["\u6700\u70ED", () => {
+        reloadUseParamsEditor((p) => {
+          p.sort_by = "vote";
+        });
+      }],
+      ["\u6700\u65E9", () => {
+        reloadUseParamsEditor((p) => {
+          p.sort_by = "date_asc";
+        });
+      }],
+      ["\u4F5C\u8005", () => {
+        reloadUseParamsEditor((p) => {
+          p.view_only_admin = true;
+        });
+      }]
+    ];
+    let curtActive = 0;
+    const onItemClick = (i, $item, name, action) => {
+      action();
+      curtActive = i;
+      $dropdown.querySelectorAll(".active").forEach((e) => {
+        e.classList.remove("active");
+      });
+      $item.classList.add("active");
+      $dropdown.style.display = "none";
+      setTimeout(() => {
+        $dropdown.style.display = "";
+      }, 80);
+    };
+    const $dropdown = createElement(`<ul class="atk-dropdown atk-fade-in"></ul>`);
+    dropdownList.forEach((item, i) => {
+      const name = item[0];
+      const action = item[1];
+      const $item = createElement(`<li class="atk-dropdown-item"><span></span></li>`);
+      const $link = $item.querySelector("span");
+      $link.innerText = name;
+      $link.onclick = () => {
+        onItemClick(i, $item, name, action);
+      };
+      $dropdown.append($item);
+      if (i === curtActive)
+        $item.classList.add("active");
+    });
+    this.$dropdownWrap.append($dropdown);
+  }
 }
 var sidebarLayer = "";
 var SidebarHTML = '<div class="atk-sidebar-layer">\n  <div class="atk-sidebar-inner">\n    <div class="atk-sidebar-header">\n      <div class="atk-sidebar-close"><i class="atk-icon atk-icon-close"></i></div>\n    </div>\n    <div class="atk-sidebar-iframe-wrap"></div>\n  </div>\n</div>\n';
@@ -5599,9 +5807,10 @@ class SidebarLayer extends Component {
       if (this.firstShow) {
         this.$iframeWrap.innerHTML = "";
         this.$iframe = createElement("<iframe></iframe>");
-        const baseURL = `${this.conf.server.replace(/\/$/, "")}/../sidebar/`;
+        const baseURL = getURLBasedOnApi(this.ctx, "sidebar/");
         const userData = encodeURIComponent(JSON.stringify(this.ctx.user.data));
-        this.iframeLoad(`${baseURL}?pageKey=${encodeURIComponent(this.conf.pageKey)}&site=${encodeURIComponent(this.conf.site || "")}&user=${userData}${this.conf.darkMode ? `&darkMode=1` : ``}`);
+        const location = window.location;
+        this.iframeLoad(`${baseURL}?pageKey=${encodeURIComponent(this.conf.pageKey)}&site=${encodeURIComponent(this.conf.site || "")}&user=${userData}&referer=${encodeURIComponent(`${location.protocol}//${location.host}${location.pathname}`)}${this.conf.darkMode ? `&darkMode=1` : ``}`);
         this.$iframeWrap.append(this.$iframe);
         this.firstShow = false;
       } else {
@@ -5681,6 +5890,7 @@ const _Artalk = class {
     this.$root.innerHTML = "";
     this.initDarkMode();
     this.checkerLauncher = new CheckerLauncher(this.ctx);
+    initMarked(this.ctx);
     this.editor = new Editor(this.ctx);
     this.$root.appendChild(this.editor.$el);
     this.list = new List(this.ctx);
@@ -5690,6 +5900,11 @@ const _Artalk = class {
     this.list.fetchComments(0);
     this.initEventBind();
     this.initPV();
+    _Artalk.Plugins.forEach((plugin) => {
+      if (typeof plugin === "function") {
+        plugin(this.ctx);
+      }
+    });
   }
   initEventBind() {
     window.addEventListener("hashchange", () => {
@@ -5737,6 +5952,7 @@ const _Artalk = class {
   }
   setDarkMode(darkMode) {
     this.ctx.conf.darkMode = darkMode;
+    this.ctx.trigger("conf-updated");
     this.initDarkMode();
   }
   initPV() {
@@ -5759,7 +5975,11 @@ const _Artalk = class {
   trigger(name, payload) {
     this.ctx.trigger(name, payload, "external");
   }
+  static Use(plugin) {
+    this.Plugins.push(plugin);
+  }
 };
 let Artalk = _Artalk;
 __publicField(Artalk, "defaults", defaults$3);
+__publicField(Artalk, "Plugins", []);
 export { Artalk as default };