artalk 2.4.1 → 2.4.3

package/dist/Artalk.es.js

@@ -183,15 +183,19 @@ const internal = {
   "en-US": en,
   "zh-CN": zhCN
 };
+const GLOBAL_LOCALES_KEY = "ArtalkI18n";
 function getLocaleSet(lang) {
   lang = lang.replace(
     /^([a-zA-Z]+)(-[a-zA-Z]+)?$/,
     (_, p1, p2) => p1.toLowerCase() + (p2 || "").toUpperCase()
   );
-  if (!internal[lang]) {
-    return internal.en;
+  if (internal[lang]) {
+    return internal[lang];
   }
-  return internal[lang];
+  if (window[GLOBAL_LOCALES_KEY] && window[GLOBAL_LOCALES_KEY][lang]) {
+    return window[GLOBAL_LOCALES_KEY][lang];
+  }
+  return internal.en;
 }
 function getI18n(locale, key, args = {}) {
   if (typeof locale === "string") {
@@ -232,18 +236,6 @@ class User {
     return !!this.data.nick && !!this.data.email;
   }
 }
-class Component {
-  constructor(ctx) {
-    __publicField(this, "$el");
-    __publicField(this, "ctx");
-    __publicField(this, "conf");
-    this.ctx = ctx;
-    this.conf = ctx.conf;
-  }
-  $t(key, args = {}) {
-    return this.ctx.$t(key, args);
-  }
-}
 function getDefaults() {
   return {
     baseUrl: null,
@@ -2851,7 +2843,12 @@ function marked(ctx, src) {
   }
   let dest = insane_1(markedContent, {
     allowedClasses: {},
-    allowedSchemes: ["http", "https", "mailto"],
+    allowedSchemes: [
+      "http",
+      "https",
+      "mailto",
+      "data"
+    ],
     allowedTags: [
       "a",
       "abbr",
@@ -2988,6 +2985,18 @@ function mergeDeep(target, source) {
   });
   return target;
 }
+class Component {
+  constructor(ctx) {
+    __publicField(this, "$el");
+    __publicField(this, "ctx");
+    __publicField(this, "conf");
+    this.ctx = ctx;
+    this.conf = ctx.conf;
+  }
+  $t(key, args = {}) {
+    return this.ctx.$t(key, args);
+  }
+}
 function showLoading(parentElem, conf) {
   let $loading = parentElem.querySelector(":scope > .atk-loading");
   if (!$loading) {
@@ -3905,7 +3914,7 @@ class UserApi extends ApiBase {
       if (this.ctx.conf.site)
         params.site_name = this.ctx.conf.site;
       const data = yield this.POST("/login", params);
-      return data.token;
+      return data;
     });
   }
   userGet(name, email) {
@@ -3959,6 +3968,58 @@ class UserApi extends ApiBase {
     }
     return this.POST(`/mark-read`, params);
   }
+  userList(offset, limit, type) {
+    return __async(this, null, function* () {
+      const params = {
+        offset: offset || 0,
+        limit: limit || 15
+      };
+      if (type)
+        params.type = type;
+      const d = yield this.POST("/admin/user-get", params);
+      return d;
+    });
+  }
+  userAdd(user, password) {
+    return __async(this, null, function* () {
+      const params = {
+        name: user.name || "",
+        email: user.email || "",
+        password: password || "",
+        link: user.link || "",
+        is_admin: user.is_admin || false,
+        site_names: user.site_names_raw || "",
+        receive_email: user.receive_email || true,
+        badge_name: user.badge_name || "",
+        badge_color: user.badge_color || ""
+      };
+      const d = yield this.POST("/admin/user-add", params);
+      return d.user;
+    });
+  }
+  userEdit(user, password) {
+    return __async(this, null, function* () {
+      const params = {
+        id: user.id,
+        name: user.name || "",
+        email: user.email || "",
+        password: password || "",
+        link: user.link || "",
+        is_admin: user.is_admin || false,
+        site_names: user.site_names_raw || "",
+        receive_email: user.receive_email || true,
+        badge_name: user.badge_name || "",
+        badge_color: user.badge_color || ""
+      };
+      const d = yield this.POST("/admin/user-edit", params);
+      return d.user;
+    });
+  }
+  userDel(userID) {
+    return this.POST("/admin/user-del", {
+      id: String(userID)
+    });
+  }
 }
 class SystemApi extends ApiBase {
   conf() {
@@ -3990,6 +4051,13 @@ class SystemApi extends ApiBase {
       return data;
     });
   }
+  version() {
+    return __async(this, null, function* () {
+      const resp = yield fetch(`${this.api.baseURL}/version`, { method: "POST" });
+      const data = yield resp.json();
+      return data;
+    });
+  }
 }
 class CaptchaApi extends ApiBase {
   captchaGet() {
@@ -4055,16 +4123,17 @@ const ApiComponents = {
 class Api {
   constructor(ctx) {
     __publicField(this, "ctx");
-    __publicField(this, "baseURL");
     this.ctx = ctx;
-    this.baseURL = `${ctx.conf.server}/api`;
     Object.entries(ApiComponents).forEach(([key, ApiComponent]) => {
       this[key] = new ApiComponent(this, this.ctx);
     });
   }
+  get baseURL() {
+    return `${this.ctx.conf.server}/api`;
+  }
 }
-const version = "2.4.1";
-const backendMinVersion = "2.2.0";
+const version = "2.4.3";
+const backendMinVersion = "2.3.0";
 const ListHTML = '<div class="atk-list">\n  <div class="atk-list-header">\n    <div class="atk-comment-count">\n      <div class="atk-text"></div>\n    </div>\n    <div class="atk-right-action">\n      <span data-action="admin-close-comment" class="atk-hide" atk-only-admin-show></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"></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';
 const win = window || {};
 const nav = navigator || {};
@@ -4423,7 +4492,8 @@ class CommentRender {
   renderAvatar() {
     const $avatar = this.$el.querySelector(".atk-avatar");
     const $avatarImg = createElement("<img />");
-    $avatarImg.src = this.comment.getGravatarURL();
+    const avatarURLBuilder = this.ctx.conf.avatarURLBuilder;
+    $avatarImg.src = avatarURLBuilder ? avatarURLBuilder(this.data) : this.comment.getGravatarURL();
     if (this.data.link) {
       const $avatarA = createElement('<a target="_blank" rel="noreferrer noopener nofollow"></a>');
       $avatarA.href = isValidURL(this.data.link) ? this.data.link : `https://${this.data.link}`;
@@ -5209,10 +5279,10 @@ class ListLite extends Component {
     __publicField(this, "data");
     __publicField(this, "isLoading", false);
     __publicField(this, "noCommentText");
-    __publicField(this, "flatMode", false);
-    __publicField(this, "nestSortBy");
-    __publicField(this, "pageMode", "pagination");
-    __publicField(this, "pageSize", 20);
+    __publicField(this, "_nestSortBy");
+    __publicField(this, "_flatMode");
+    __publicField(this, "_pageMode");
+    __publicField(this, "_pageSize");
     __publicField(this, "scrollListenerAt");
     __publicField(this, "repositionAt");
     __publicField(this, "pagination");
@@ -5223,20 +5293,53 @@ class ListLite extends Component {
     __publicField(this, "onAfterLoad");
     __publicField(this, "unread", []);
     __publicField(this, "unreadHighlight");
+    __publicField(this, "confLoaded", false);
     this.$el = createElement(
       `<div class="atk-list-lite">
       <div class="atk-list-comments-wrap"></div>
     </div>`
     );
     this.$commentsWrap = this.$el.querySelector(".atk-list-comments-wrap");
-    this.noCommentText = ctx.conf.noComment || ctx.$t("noComment");
-    this.nestSortBy = this.ctx.conf.nestSort || "DATE_ASC";
     window.setInterval(() => {
       this.$el.querySelectorAll("[data-atk-comment-date]").forEach((el) => {
         const date = el.getAttribute("data-atk-comment-date");
         el.innerText = timeAgo(new Date(Number(date)), this.ctx);
       });
     }, 30 * 1e3);
+    this.ctx.on("conf-loaded", () => {
+    });
+  }
+  get nestSortBy() {
+    if (this._nestSortBy !== void 0)
+      return this._nestSortBy;
+    return this.ctx.conf.nestSort || "DATE_ASC";
+  }
+  set nestSortBy(val) {
+    this._nestSortBy = val;
+  }
+  get flatMode() {
+    if (this._flatMode !== void 0)
+      return this._flatMode;
+    if (this.ctx.conf.flatMode === true || Number(this.ctx.conf.nestMax) <= 1)
+      return true;
+    if (this.ctx.conf.flatMode === "auto" && window.matchMedia("(max-width: 768px)").matches)
+      return true;
+    return false;
+  }
+  set flatMode(val) {
+    this._flatMode = val;
+  }
+  get pageMode() {
+    return this._pageMode || (this.conf.pagination.readMore ? "read-more" : "pagination");
+  }
+  set pageMode(val) {
+    this._pageMode = val;
+  }
+  get pageSize() {
+    return this._pageSize || this.conf.pagination.pageSize;
+  }
+  set pageSize(val) {
+    this._pageSize = val;
   }
   getData() {
     return this.data;
@@ -5264,7 +5367,7 @@ class ListLite extends Component {
       const setLoading2 = (val) => this.setLoading(val, isFirstLoad);
       setLoading2(true);
       this.ctx.trigger("list-load");
-      if (isFirstLoad && this.pageMode === "read-more") {
+      if (this.pageMode === "read-more" && isFirstLoad || this.pageMode === "pagination") {
         this.ctx.clearAllComments();
       }
       let listData;
@@ -5289,24 +5392,24 @@ class ListLite extends Component {
   }
   onLoad(data, offset) {
     var _a, _b;
-    if (this.pageMode === "pagination") {
-      this.ctx.clearAllComments();
-    }
     this.data = data;
+    if (!this.confLoaded) {
+      if (this.conf.useBackendConf)
+        this.ctx.updateConf(data.conf.frontend_conf);
+      else
+        this.ctx.updateConf({});
+      this.confLoaded = true;
+    }
     const feMinVersion = ((_a = data.api_version) == null ? void 0 : _a.fe_min_version) || "0.0.0";
     if (this.ctx.conf.versionCheck && this.versionCheck("frontend", feMinVersion, version))
       return;
     if (this.ctx.conf.versionCheck && this.versionCheck("backend", backendMinVersion, (_b = data.api_version) == null ? void 0 : _b.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.updateNotifies(data.unread || []);
     this.ctx.trigger("list-loaded");
-    this.ctx.trigger("conf-updated");
     if (this.onAfterLoad)
       this.onAfterLoad(data);
   }
@@ -5370,6 +5473,9 @@ class ListLite extends Component {
   }
   onError(msg, offset, errData) {
     var _a;
+    if (!this.confLoaded) {
+      this.ctx.updateConf({});
+    }
     msg = String(msg);
     console.error(msg);
     if (offset !== 0 && this.pageMode === "read-more") {
@@ -5403,7 +5509,7 @@ class ListLite extends Component {
     if (isNoComment) {
       if (!$noComment) {
         $noComment = createElement('<div class="atk-list-no-comment"></div>');
-        $noComment.innerHTML = this.noCommentText;
+        $noComment.innerHTML = this.noCommentText || this.ctx.conf.noComment || this.ctx.$t("noComment");
         this.$commentsWrap.appendChild($noComment);
       }
     } else {
@@ -5533,7 +5639,6 @@ class ListLite extends Component {
       ignoreBtn.onclick = () => {
         setError(this.$el.parentElement, null);
         this.ctx.conf.versionCheck = false;
-        this.ctx.trigger("conf-updated");
         this.fetchComments(0);
       };
       errEl.append(ignoreBtn);
@@ -5554,18 +5659,9 @@ class List extends ListLite {
     __publicField(this, "$dropdownWrap");
     __publicField(this, "goToCommentFounded", false);
     __publicField(this, "goToCommentDelay", true);
+    __publicField(this, "dropdownLoaded", false);
     el.querySelector(".atk-list-body").append(this.$el);
     this.$el = el;
-    if (this.ctx.conf.flatMode === true) {
-      this.flatMode = true;
-    } else if (this.conf.nestMax && this.conf.nestMax <= 1) {
-      this.flatMode = true;
-    } else if (this.ctx.conf.flatMode === "auto") {
-      if (window.matchMedia("(max-width: 768px)").matches)
-        this.flatMode = true;
-    }
-    this.pageMode = this.conf.pagination.readMore ? "read-more" : "pagination";
-    this.pageSize = this.conf.pagination.pageSize || 20;
     this.repositionAt = this.$el;
     this.initListActionBtn();
     this.$commentCount = this.$el.querySelector(".atk-comment-count");
@@ -5573,9 +5669,6 @@ class List extends ListLite {
       count: '<span class="atk-comment-count-num">0</span>'
     });
     this.$commentCountNum = this.$commentCount.querySelector(".atk-comment-count-num");
-    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${version}">Artalk</a>`;
   }
   initListActionBtn() {
@@ -5610,6 +5703,9 @@ class List extends ListLite {
       this.ctx.editorOpen();
       this.$closeCommentBtn.innerHTML = this.$t("closeComment");
     }
+    if (this.ctx.conf.listSort) {
+      this.initDropdown();
+    }
   }
   onLoad(data, offset) {
     super.onLoad(data, offset);
@@ -5683,6 +5779,9 @@ class List extends ListLite {
     }
   }
   initDropdown() {
+    if (this.dropdownLoaded)
+      return;
+    this.dropdownLoaded = true;
     this.$dropdownWrap = this.$commentCount;
     this.$commentCount.classList.add("atk-dropdown-wrap");
     this.$dropdownWrap.append(createElement(`<span class="atk-arrow-down-icon"></span>`));
@@ -5763,6 +5862,8 @@ class Context {
     __publicField(this, "markedReplacers", []);
     __publicField(this, "commentList", []);
     __publicField(this, "eventList", []);
+    __publicField(this, "darkModeMedia", window.matchMedia("(prefers-color-scheme: dark)"));
+    __publicField(this, "darkModeAutoFunc");
     this.cid = +new Date();
     this.conf = conf;
     this.user = new User(this);
@@ -5771,6 +5872,9 @@ class Context {
     this.$root.classList.add("artalk");
     this.$root.innerHTML = "";
     this.api = new Api(this);
+    this.on("conf-loaded", () => {
+      this.refreshDarkModeConf();
+    });
   }
   setApi(api) {
     this.api = api;
@@ -5932,21 +6036,42 @@ class Context {
     return getI18n(this.conf.locale, key, args);
   }
   setDarkMode(darkMode) {
+    if (this.conf.darkMode === darkMode)
+      return;
     const darkModeClassName = "atk-dark-mode";
     this.conf.darkMode = darkMode;
-    this.trigger("conf-updated");
-    if (this.conf.darkMode)
+    if (darkMode)
       this.$root.classList.add(darkModeClassName);
     else
       this.$root.classList.remove(darkModeClassName);
     const { $wrap: $layerWrap } = GetLayerWrap(this);
     if ($layerWrap) {
-      if (this.conf.darkMode)
+      if (darkMode)
         $layerWrap.classList.add(darkModeClassName);
       else
         $layerWrap.classList.remove(darkModeClassName);
     }
   }
+  refreshDarkModeConf() {
+    if (this.conf.darkMode === "auto") {
+      this.setDarkMode(this.darkModeMedia.matches);
+      if (!this.darkModeAutoFunc) {
+        this.darkModeAutoFunc = (evt) => {
+          this.setDarkMode(evt.matches);
+        };
+        this.darkModeMedia.addEventListener("change", this.darkModeAutoFunc);
+      }
+    } else {
+      if (this.darkModeAutoFunc) {
+        this.darkModeMedia.removeEventListener("change", this.darkModeAutoFunc);
+      }
+      this.setDarkMode(this.conf.darkMode || false);
+    }
+  }
+  updateConf(conf) {
+    this.conf = mergeDeep(this.conf, conf);
+    this.trigger("conf-loaded");
+  }
 }
 const defaults = {
   el: "",
@@ -5972,7 +6097,7 @@ const defaults = {
   pvEl: "#ArtalkPV",
   gravatar: {
     default: "mp",
-    mirror: "https://sdn.geekzu.org/avatar/"
+    mirror: "https://cravatar.cn/avatar/"
   },
   pagination: {
     pageSize: 20,
@@ -5986,7 +6111,7 @@ const defaults = {
   imgUpload: true,
   reqTimeout: 15e3,
   versionCheck: true,
-  useBackendConf: false,
+  useBackendConf: true,
   locale: "zh-CN"
 };
 class Dialog {
@@ -6102,6 +6227,7 @@ const CaptchaChecker = {
   },
   onError(that, ctx, err, inputVal, formEl) {
     formEl.querySelector(".atk-captcha-img").click();
+    formEl.querySelector('input[type="text"]').value = "";
   }
 };
 const AdminChecker = {
@@ -6112,7 +6238,10 @@ const AdminChecker = {
       email: that.ctx.user.data.email,
       password: inputVal
     };
-    return that.ctx.getApi().user.login(data.name, data.email, data.password);
+    return (() => __async(this, null, function* () {
+      const resp = yield that.ctx.getApi().user.login(data.name, data.email, data.password);
+      return resp.token;
+    }))();
   },
   body(that, ctx) {
     return createElement(`<span>${that.ctx.$t("adminCheck")}</span>`);
@@ -6526,7 +6655,7 @@ class UploadPlug extends EditorPlug {
       };
       $input.click();
     };
-    this.ctx.on("conf-updated", () => {
+    this.ctx.on("conf-loaded", () => {
       if (!this.ctx.conf.imgUpload) {
         this.getBtn().setAttribute("atk-only-admin-show", "");
         this.ctx.checkAdminShowEl();
@@ -6721,12 +6850,12 @@ class Editor extends Component {
     this.$notifyWrap = this.$el.querySelector(".atk-notify-wrap");
     this.$plugBtnWrap = this.$el.querySelector(".atk-plug-btn-wrap");
     this.$plugPanelWrap = this.$el.querySelector(".atk-plug-panel-wrap");
-    this.initLocalStorage();
-    this.initHeader();
-    this.initTextarea();
-    this.initPlugs();
-    this.initSubmitBtn();
-    this.ctx.on("conf-updated", () => {
+    this.ctx.on("conf-loaded", () => {
+      this.initLocalStorage();
+      this.initHeader();
+      this.initTextarea();
+      this.initSubmitBtn();
+      this.initPlugs();
     });
   }
   get user() {
@@ -7116,9 +7245,6 @@ class SidebarLayer extends Component {
         };
       }
       this.layer.show();
-      setTimeout(() => {
-        this.$el.style.transform = "translate(0, 0)";
-      }, 20);
       (() => __async(this, null, function* () {
         var _a;
         const resp = yield this.ctx.getApi().user.loginStatus();
@@ -7136,7 +7262,6 @@ class SidebarLayer extends Component {
           });
         }
       }))();
-      this.ctx.updateNotifies([]);
       if (this.firstShow) {
         this.$iframeWrap.innerHTML = "";
         this.$iframe = createElement("<iframe></iframe>");
@@ -7162,6 +7287,12 @@ class SidebarLayer extends Component {
         if (!this.conf.darkMode && isIframeSrcDarkMode)
           this.iframeLoad(this.$iframe.src.replace("&darkMode=1", ""));
       }
+      setTimeout(() => {
+        this.$el.style.transform = "translate(0, 0)";
+      }, 100);
+      setTimeout(() => {
+        this.ctx.updateNotifies([]);
+      }, 0);
       this.ctx.trigger("sidebar-show");
     });
   }
@@ -7182,7 +7313,13 @@ class SidebarLayer extends Component {
   }
 }
 const PvCountWidget = (ctx) => {
-  initCountWidget({ ctx, pvAdd: true });
+  if (!ctx.conf.useBackendConf) {
+    initCountWidget({ ctx, pvAdd: true });
+  } else {
+    ctx.on("list-loaded", () => {
+      initCountWidget({ ctx, pvAdd: true });
+    });
+  }
 };
 function initCountWidget(p) {
   return __async(this, null, function* () {
@@ -7229,14 +7366,11 @@ const _Artalk = class {
     if (this.conf.el instanceof HTMLElement)
       this.$root = this.conf.el;
     this.ctx = new Context(this.conf, this.$root);
-    if (this.conf.useBackendConf)
-      return this.loadConfRemoteAndInitComponents();
     this.initComponents();
   }
   initComponents() {
     this.initLocale();
     this.initLayer();
-    this.initDarkMode();
     initMarked(this.ctx);
     const Components = {
       checkerLauncher: () => {
@@ -7257,7 +7391,6 @@ const _Artalk = class {
       sidebarLayer: () => {
         const sidebarLayer = new SidebarLayer(this.ctx);
         this.ctx.setSidebarLayer(sidebarLayer);
-        this.$root.appendChild(sidebarLayer.$el);
       },
       eventsDefault: () => {
         this.initEventBind();
@@ -7295,26 +7428,6 @@ const _Artalk = class {
     }
     return conf;
   }
-  loadConfRemoteAndInitComponents() {
-    return __async(this, null, function* () {
-      yield this.loadConfRemote();
-      this.initComponents();
-      return this;
-    });
-  }
-  loadConfRemote() {
-    return __async(this, null, function* () {
-      showLoading(this.$root);
-      let backendConf = {};
-      try {
-        backendConf = yield this.ctx.getApi().system.conf();
-      } catch (err) {
-        console.error("Load config from remote err", err);
-      }
-      this.ctx.conf = mergeDeep(this.ctx.conf, backendConf);
-      hideLoading(this.$root);
-    });
-  }
   initEventBind() {
     window.addEventListener("hashchange", () => {
       this.ctx.listHashGotoCheck();
@@ -7333,17 +7446,6 @@ const _Artalk = class {
     Layer.BodyOrgOverflow = document.body.style.overflow;
     Layer.BodyOrgPaddingRight = document.body.style.paddingRight;
   }
-  initDarkMode() {
-    if (this.conf.darkMode === "auto") {
-      const darkModeMedia = window.matchMedia("(prefers-color-scheme: dark)");
-      darkModeMedia.addEventListener("change", (e) => {
-        this.setDarkMode(e.matches);
-      });
-      this.setDarkMode(darkModeMedia.matches);
-    } else {
-      this.setDarkMode(this.conf.darkMode || false);
-    }
-  }
   on(name, handler) {
     this.ctx.on(name, handler, "external");
   }