artalk 2.1.3 → 2.1.4

package/dist/Artalk.es.js

@@ -109,7 +109,7 @@ const defaults$3 = {
     mirror: "https://sdn.geekzu.org/avatar/"
   },
   pagination: {
-    pageSize: 15,
+    pageSize: 20,
     readMore: true,
     autoLoad: true
   },
@@ -2584,6 +2584,8 @@ function timeAgo(date) {
   }
 }
 function onImagesLoaded($container, event) {
+  if (!$container)
+    return;
   const images = $container.getElementsByTagName("img");
   if (!images.length)
     return;
@@ -3038,16 +3040,13 @@ class Api {
     this.ctx = ctx;
     this.baseURL = ctx.conf.server;
   }
-  get(offset, type, flatMode, paramsEditor) {
-    var _a;
+  get(offset, pageSize, flatMode, paramsEditor) {
     const params = {
       page_key: this.ctx.conf.pageKey,
       site_name: this.ctx.conf.site || "",
-      limit: ((_a = this.ctx.conf.pagination) == null ? void 0 : _a.pageSize) || 15,
+      limit: pageSize,
       offset
     };
-    if (type)
-      params.type = type;
     if (flatMode)
       params.flat_mode = flatMode;
     if (this.ctx.user.checkHasBasicUserInfo()) {
@@ -3381,7 +3380,7 @@ class CheckerLauncher {
   }
 }
 var editor = "";
-var EditorHTML = '<div class="atk-main-editor">\n  <div class="atk-editor-header">\n    <input name="nick" placeholder="\u6635\u79F0" class="atk-nick" type="text" required="required">\n    <input name="email" placeholder="\u90AE\u7BB1" class="atk-email" type="email" required="required">\n    <input name="link" placeholder="\u7F51\u5740 (https://)" class="atk-link" type="url">\n  </div>\n  <div class="atk-editor-textarea-wrap">\n    <div class="atk-close-comment" style="display: none;"><span>\u4EC5\u7BA1\u7406\u5458\u53EF\u8BC4\u8BBA</span></div>\n    <textarea id="atk-editor-textarea" class="atk-editor-textarea" placeholder=""></textarea>\n  </div>\n  <div class="atk-editor-plug-wrap" style="display: none;"></div>\n  <div class="atk-editor-bottom">\n    <div class="atk-editor-bottom-part atk-left atk-editor-plug-switcher-wrap"></div>\n    <div class="atk-editor-bottom-part atk-right">\n      <button type="button" class="atk-send-btn"></button>\n    </div>\n  </div>\n  <div class="atk-editor-notify-wrap"></div>\n</div>\n';
+var EditorHTML = '<div class="atk-main-editor">\n  <div class="atk-header">\n    <input name="nick" placeholder="\u6635\u79F0" class="atk-nick" type="text" required="required">\n    <input name="email" placeholder="\u90AE\u7BB1" class="atk-email" type="email" required="required">\n    <input name="link" placeholder="\u7F51\u5740 (https://)" class="atk-link" type="url">\n  </div>\n  <div class="atk-textarea-wrap">\n    <textarea class="atk-textarea" placeholder=""></textarea>\n  </div>\n  <div class="atk-plug-wrap" style="display: none;"></div>\n  <div class="atk-bottom">\n    <div class="atk-item atk-plug-btn-wrap"></div>\n    <div class="atk-item">\n      <button type="button" class="atk-send-btn"></button>\n    </div>\n  </div>\n  <div class="atk-notify-wrap"></div>\n</div>\n';
 var emoticonsPlug = "";
 class EditorPlug {
   constructor(editor2) {
@@ -3398,8 +3397,8 @@ class EmoticonsPlug extends EditorPlug {
     super(editor2);
     __publicField(this, "$el");
     __publicField(this, "emoticons", []);
-    __publicField(this, "$listWrap");
-    __publicField(this, "$types");
+    __publicField(this, "$grpWrap");
+    __publicField(this, "$grpSwitcher");
     this.editor = editor2;
     this.$el = createElement(`<div class="atk-editor-plug-emoticons"></div>`);
     this.init();
@@ -3527,17 +3526,17 @@ class EmoticonsPlug extends EditorPlug {
     return dest;
   }
   initEmoticonsList() {
-    this.$listWrap = createElement(`<div class="atk-emoticons-list-wrap"></div>`);
-    this.$el.append(this.$listWrap);
+    this.$grpWrap = createElement(`<div class="atk-grp-wrap"></div>`);
+    this.$el.append(this.$grpWrap);
     this.emoticons.forEach((grp, index) => {
-      const emoticonsEl = createElement(`<div class="atk-emoticons-list" style="display: none;"></div>`);
-      this.$listWrap.append(emoticonsEl);
-      emoticonsEl.setAttribute("data-index", String(index));
-      emoticonsEl.setAttribute("data-grp-name", grp.name);
-      emoticonsEl.setAttribute("data-type", grp.type);
+      const $grp = createElement(`<div class="atk-grp" style="display: none;"></div>`);
+      this.$grpWrap.append($grp);
+      $grp.setAttribute("data-index", String(index));
+      $grp.setAttribute("data-grp-name", grp.name);
+      $grp.setAttribute("data-type", grp.type);
       grp.items.forEach((item) => {
-        const $item = createElement(`<span class="atk-emoticons-item"></span>`);
-        emoticonsEl.append($item);
+        const $item = createElement(`<span class="atk-item"></span>`);
+        $grp.append($item);
         if (!!item.key && !new RegExp(`^(${grp.name})?\\s?[0-9]+$`).test(item.key))
           $item.setAttribute("title", item.key);
         if (grp.type === "image") {
@@ -3557,21 +3556,21 @@ class EmoticonsPlug extends EditorPlug {
         };
       });
     });
-    this.$types = createElement(`<div class="atk-emoticons-types"></div>`);
-    this.$el.append(this.$types);
+    this.$grpSwitcher = createElement(`<div class="atk-grp-switcher"></div>`);
+    this.$el.append(this.$grpSwitcher);
     this.emoticons.forEach((grp, index) => {
       const $item = createElement("<span />");
       $item.innerText = grp.name;
       $item.setAttribute("data-index", String(index));
       $item.onclick = () => this.openGrp(index);
-      this.$types.append($item);
+      this.$grpSwitcher.append($item);
     });
     if (this.emoticons.length > 0)
       this.openGrp(0);
   }
   openGrp(index) {
     var _a;
-    Array.from(this.$listWrap.children).forEach((item) => {
+    Array.from(this.$grpWrap.children).forEach((item) => {
       const el = item;
       if (el.getAttribute("data-index") !== String(index)) {
         el.style.display = "none";
@@ -3579,8 +3578,8 @@ class EmoticonsPlug extends EditorPlug {
         el.style.display = "";
       }
     });
-    this.$types.querySelectorAll("span.active").forEach((item) => item.classList.remove("active"));
-    (_a = this.$types.querySelector(`span[data-index="${index}"]`)) == null ? void 0 : _a.classList.add("active");
+    this.$grpSwitcher.querySelectorAll("span.active").forEach((item) => item.classList.remove("active"));
+    (_a = this.$grpSwitcher.querySelector(`span[data-index="${index}"]`)) == null ? void 0 : _a.classList.add("active");
     this.changeListHeight();
   }
   getEl() {
@@ -3655,12 +3654,9 @@ class Editor extends Component {
     __publicField(this, "$header");
     __publicField(this, "$textareaWrap");
     __publicField(this, "$textarea");
-    __publicField(this, "$closeComment");
     __publicField(this, "$plugWrap");
     __publicField(this, "$bottom");
-    __publicField(this, "$bottomPartLeft");
-    __publicField(this, "$plugSwitcherWrap");
-    __publicField(this, "$bottomPartRight");
+    __publicField(this, "$plugBtnWrap");
     __publicField(this, "$submitBtn");
     __publicField(this, "$notifyWrap");
     __publicField(this, "replyComment", null);
@@ -3672,17 +3668,14 @@ class Editor extends Component {
     });
     __publicField(this, "openedPlugName", null);
     this.$el = createElement(EditorHTML);
-    this.$header = this.$el.querySelector(".atk-editor-header");
-    this.$textareaWrap = this.$el.querySelector(".atk-editor-textarea-wrap");
-    this.$textarea = this.$el.querySelector(".atk-editor-textarea");
-    this.$closeComment = this.$el.querySelector(".atk-close-comment");
-    this.$plugWrap = this.$el.querySelector(".atk-editor-plug-wrap");
-    this.$bottom = this.$el.querySelector(".atk-editor-bottom");
-    this.$bottomPartLeft = this.$el.querySelector(".atk-editor-bottom-part.atk-left");
-    this.$plugSwitcherWrap = this.$el.querySelector(".atk-editor-plug-switcher-wrap");
-    this.$bottomPartRight = this.$el.querySelector(".atk-editor-bottom-part.atk-right");
+    this.$header = this.$el.querySelector(".atk-header");
+    this.$textareaWrap = this.$el.querySelector(".atk-textarea-wrap");
+    this.$textarea = this.$el.querySelector(".atk-textarea");
+    this.$plugWrap = this.$el.querySelector(".atk-plug-wrap");
+    this.$bottom = this.$el.querySelector(".atk-bottom");
+    this.$plugBtnWrap = this.$el.querySelector(".atk-plug-btn-wrap");
     this.$submitBtn = this.$el.querySelector(".atk-send-btn");
-    this.$notifyWrap = this.$el.querySelector(".atk-editor-notify-wrap");
+    this.$notifyWrap = this.$el.querySelector(".atk-notify-wrap");
     this.initLocalStorage();
     this.initHeader();
     this.initTextarea();
@@ -3793,17 +3786,17 @@ class Editor extends Component {
     this.$plugWrap.innerHTML = "";
     this.$plugWrap.style.display = "none";
     this.openedPlugName = null;
-    this.$plugSwitcherWrap.innerHTML = "";
+    this.$plugBtnWrap.innerHTML = "";
     this.LOADABLE_PLUG_LIST.forEach((PlugObj) => {
-      const btnElem = createElement(`<span class="atk-editor-action atk-editor-plug-switcher">${PlugObj.BtnHTML}</span>`);
-      this.$plugSwitcherWrap.appendChild(btnElem);
+      const btnElem = createElement(`<span class="atk-plug-btn">${PlugObj.BtnHTML}</span>`);
+      this.$plugBtnWrap.appendChild(btnElem);
       btnElem.addEventListener("click", () => {
         let plug = this.plugList[PlugObj.Name];
         if (!plug) {
           plug = new PlugObj(this);
           this.plugList[PlugObj.Name] = plug;
         }
-        this.$plugSwitcherWrap.querySelectorAll(".active").forEach((item) => item.classList.remove("active"));
+        this.$plugBtnWrap.querySelectorAll(".active").forEach((item) => item.classList.remove("active"));
         if (PlugObj.Name === this.openedPlugName) {
           plug.onHide();
           this.$plugWrap.style.display = "none";
@@ -3965,7 +3958,8 @@ class Editor extends Component {
     showNotify(this.$notifyWrap, msg, type);
   }
   close() {
-    this.$closeComment.style.display = "";
+    if (!this.$textareaWrap.querySelector(".atk-comment-closed"))
+      this.$textareaWrap.prepend(createElement('<div class="atk-comment-closed">\u4EC5\u7BA1\u7406\u5458\u53EF\u8BC4\u8BBA</div>'));
     if (!this.user.data.isAdmin) {
       this.$textarea.style.display = "none";
       this.closePlug();
@@ -3976,7 +3970,8 @@ class Editor extends Component {
     }
   }
   open() {
-    this.$closeComment.style.display = "none";
+    var _a;
+    (_a = this.$textareaWrap.querySelector(".atk-comment-closed")) == null ? void 0 : _a.remove();
     this.$textarea.style.display = "";
     this.$bottom.style.display = "";
   }
@@ -4000,7 +3995,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        \u901A\u77E5\u4E2D\u5FC3\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      <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 comment = "";
 var win = window || {};
 var nav = navigator || {};
@@ -4243,7 +4238,7 @@ function Detect(userAgent) {
 function detectFactory(u) {
   return new Detect(u);
 }
-var CommentHTML = '<div class="atk-comment-wrap" data-comment-id="">\n  <div class="atk-comment">\n\n    <div class="atk-avatar"></div>\n\n    <div class="atk-comment-main">\n\n      <div class="atk-header">\n        <span class="atk-nick"></span>\n        <span class="atk-badge"></span>\n        <span class="atk-date"></span>\n      </div>\n\n      <div class="atk-body">\n        <div class="atk-content"></div>\n      </div>\n\n      <div class="atk-footer">\n        <div class="atk-comment-actions"></div>\n      </div>\n\n    </div>\n\n  </div>\n</div>\n';
+var CommentHTML = '<div class="atk-comment-wrap">\n  <div class="atk-comment">\n    <div class="atk-avatar"></div>\n    <div class="atk-main">\n      <div class="atk-header">\n        <span class="atk-item atk-nick"></span>\n        <span class="atk-item atk-badge"></span>\n        <span class="atk-item atk-date"></span>\n      </div>\n      <div class="atk-body">\n        <div class="atk-content"></div>\n      </div>\n      <div class="atk-footer">\n        <div class="atk-actions"></div>\n      </div>\n    </div>\n  </div>\n</div>\n';
 class ActionBtn {
   constructor(conf) {
     __publicField(this, "conf");
@@ -4306,7 +4301,7 @@ class ActionBtn {
     this.setLoading(false);
     this.$el.innerText = this.getText();
   }
-  setLoading(value = true, loadingText) {
+  setLoading(value, loadingText) {
     if (this.isLoading === value)
       return;
     this.isLoading = value;
@@ -4393,11 +4388,11 @@ class Comment extends Component {
   }
   render() {
     this.$el = createElement(CommentHTML);
-    this.$main = this.$el.querySelector(".atk-comment-main");
+    this.$main = this.$el.querySelector(".atk-main");
     this.$header = this.$el.querySelector(".atk-header");
     this.$body = this.$el.querySelector(".atk-body");
     this.$content = this.$body.querySelector(".atk-content");
-    this.$actions = this.$el.querySelector(".atk-comment-actions");
+    this.$actions = this.$el.querySelector(".atk-actions");
     this.$children = null;
     this.$el.setAttribute("data-comment-id", `${this.data.id}`);
     this.renderCheckUnread();
@@ -4540,7 +4535,7 @@ class Comment extends Component {
       }
     }
     if (this.data.is_allow_reply) {
-      const replyBtn = createElement(`<span data-atk-action="comment-reply">\u56DE\u590D</span>`);
+      const replyBtn = createElement(`<span>\u56DE\u590D</span>`);
       this.$actions.append(replyBtn);
       replyBtn.addEventListener("click", (e) => {
         e.stopPropagation();
@@ -4612,6 +4607,7 @@ class Comment extends Component {
     this.children.push(childC);
     this.getChildrenEl().appendChild(childC.getEl());
     childC.playFadeInAnim();
+    childC.checkHeightLimitArea("content");
   }
   getChildrenEl() {
     if (this.$children === null) {
@@ -4727,6 +4723,76 @@ class Comment extends Component {
     this.openURL = url;
     this.$el.classList.add("atk-openable");
   }
+  checkHeightLimit() {
+    this.checkHeightLimitArea("content");
+    this.checkHeightLimitArea("children");
+  }
+  checkHeightLimitArea(area) {
+    var _a, _b;
+    const childrenMaxH = (_a = this.ctx.conf.heightLimit) == null ? void 0 : _a.children;
+    const contentMaxH = (_b = this.ctx.conf.heightLimit) == null ? void 0 : _b.content;
+    if (area === "children" && !childrenMaxH)
+      return;
+    if (area === "content" && !contentMaxH)
+      return;
+    let maxHeight;
+    if (area === "children")
+      maxHeight = childrenMaxH;
+    if (area === "content")
+      maxHeight = contentMaxH;
+    const checkEl = ($el) => {
+      if (!$el)
+        return;
+      if (getHeight($el) > maxHeight) {
+        this.heightLimitAdd($el, maxHeight);
+      }
+    };
+    if (area === "children") {
+      checkEl(this.$children);
+    } else if (area === "content") {
+      checkEl(this.$content);
+      checkEl(this.$replyTo);
+      onImagesLoaded(this.$content, () => {
+        checkEl(this.$content);
+      });
+      if (this.$replyTo) {
+        onImagesLoaded(this.$replyTo, () => {
+          checkEl(this.$replyTo);
+        });
+      }
+    }
+  }
+  heightLimitRemove($el) {
+    if (!$el)
+      return;
+    if (!$el.classList.contains("atk-height-limit"))
+      return;
+    $el.classList.remove("atk-height-limit");
+    Array.from($el.children).forEach((e) => {
+      if (e.classList.contains("atk-height-limit-btn"))
+        e.remove();
+    });
+    $el.style.height = "";
+    $el.style.overflow = "";
+  }
+  heightLimitAdd($el, maxHeight) {
+    if (!$el)
+      return;
+    if ($el.classList.contains("atk-height-limit"))
+      return;
+    $el.classList.add("atk-height-limit");
+    $el.style.height = `${maxHeight}px`;
+    $el.style.overflow = "hidden";
+    const $hideMoreOpenBtn = createElement(`<div class="atk-height-limit-btn">\u9605\u8BFB\u66F4\u591A</span>`);
+    $hideMoreOpenBtn.onclick = (e) => {
+      e.stopPropagation();
+      this.heightLimitRemove($el);
+      const children = this.getChildren();
+      if (children.length === 1)
+        children[0].heightLimitRemove(children[0].$content);
+    };
+    $el.append($hideMoreOpenBtn);
+  }
 }
 var pagination = "";
 class Pagination {
@@ -4759,7 +4825,7 @@ class Pagination {
     this.checkDisabled();
   }
   get pageSize() {
-    return this.conf.pageSize || 15;
+    return this.conf.pageSize;
   }
   get offset() {
     return this.pageSize * (this.page - 1);
@@ -4869,19 +4935,28 @@ class ReadMoreBtn {
     __publicField(this, "$el");
     __publicField(this, "$loading");
     __publicField(this, "$text");
+    __publicField(this, "offset", 0);
+    __publicField(this, "total", 0);
     this.conf = conf;
     this.$el = createElement(`<div class="atk-list-read-more" style="display: none;">
       <div class="atk-list-read-more-inner">
         <div class="atk-loading-icon" style="display: none;"></div>
-        <span class="atk-text">\u67E5\u770B\u66F4\u591A</span>
+        <span class="atk-text">\u52A0\u8F7D\u66F4\u591A</span>
       </div>
     </div>`);
     this.$loading = this.$el.querySelector(".atk-loading-icon");
     this.$text = this.$el.querySelector(".atk-text");
-    this.$el.onclick = () => this.click();
+    this.$el.onclick = () => {
+      this.click();
+    };
+  }
+  get hasMore() {
+    return this.total > this.offset + this.conf.pageSize;
   }
   click() {
-    this.conf.onClick();
+    if (this.hasMore)
+      this.conf.onClick(this.offset + this.conf.pageSize);
+    this.checkDisabled();
   }
   show() {
     this.$el.style.display = "";
@@ -4902,38 +4977,43 @@ class ReadMoreBtn {
       this.$el.classList.remove("atk-err");
     }, 2e3);
   }
+  update(offset, total) {
+    this.offset = offset;
+    this.total = total;
+    this.checkDisabled();
+  }
+  checkDisabled() {
+    if (this.hasMore)
+      this.show();
+    else
+      this.hide();
+  }
 }
 class ListLite extends Component {
-  constructor(ctx, $parent) {
+  constructor(ctx) {
     super(ctx);
-    __publicField(this, "$parent");
     __publicField(this, "$commentsWrap");
     __publicField(this, "comments", []);
     __publicField(this, "data");
-    __publicField(this, "pageSize", 15);
-    __publicField(this, "offset", 0);
-    __publicField(this, "type");
-    __publicField(this, "noCommentText");
-    __publicField(this, "renderComment");
-    __publicField(this, "paramsEditor");
-    __publicField(this, "onAfterLoad");
     __publicField(this, "isLoading", false);
-    __publicField(this, "isFirstLoad", true);
-    __publicField(this, "flatMode");
+    __publicField(this, "noCommentText", "\u65E0\u5185\u5BB9");
+    __publicField(this, "flatMode", false);
     __publicField(this, "pageMode", "pagination");
+    __publicField(this, "pageSize", 20);
+    __publicField(this, "scrollListenerAt");
+    __publicField(this, "repositionAt");
     __publicField(this, "pagination");
     __publicField(this, "readMoreBtn");
     __publicField(this, "autoLoadScrollEvent");
-    __publicField(this, "autoLoadListenerAt");
+    __publicField(this, "renderComment");
+    __publicField(this, "paramsEditor");
+    __publicField(this, "onAfterLoad");
     __publicField(this, "unread", []);
-    __publicField(this, "unreadHighlight", false);
-    this.$parent = $parent;
+    __publicField(this, "unreadHighlight");
     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.pageSize = this.conf.pagination ? this.conf.pagination.pageSize || this.pageSize : this.pageSize;
-    this.noCommentText = this.conf.noComment || "\u65E0\u8BC4\u8BBA";
     window.setInterval(() => {
       this.$el.querySelectorAll("[data-atk-comment-date]").forEach((el) => {
         const date = el.getAttribute("data-atk-comment-date");
@@ -4942,11 +5022,10 @@ class ListLite extends Component {
     }, 30 * 1e3);
     this.ctx.on("unread-update", (data) => this.updateUnread(data.notifies));
   }
-  reqComments(offset = 0) {
+  fetchComments(offset) {
     return __async(this, null, function* () {
-      if (offset === 0 && this.pageMode !== "pagination") {
-        this.clearAllComments();
-      }
+      if (this.isLoading)
+        return;
       const showLoading$1 = () => {
         this.isLoading = true;
         if (offset === 0)
@@ -4967,28 +5046,23 @@ class ListLite extends Component {
       };
       showLoading$1();
       this.ctx.trigger("comments-load");
+      if (this.pageMode === "read-more" && offset === 0) {
+        this.clearAllComments();
+      }
       let listData;
       try {
-        listData = yield new Api(this.ctx).get(offset, this.type, this.flatMode, this.paramsEditor);
+        listData = yield new Api(this.ctx).get(offset, this.pageSize, this.flatMode, this.paramsEditor);
       } catch (e) {
-        this.onError(e.msg || String(e));
+        this.onError(e.msg || String(e), offset);
         throw e;
       } finally {
         hideLoading$1();
       }
-      if (this.ctx.conf.versionCheck) {
-        const needUpdate = this.apiVersionCheck(listData.api_version || {});
-        if (needUpdate)
-          return;
-      }
-      this.offset = offset;
+      setError(this.$el, null);
       try {
         this.onLoad(listData, offset);
-        if (this.onAfterLoad) {
-          this.onAfterLoad(listData);
-        }
       } catch (e) {
-        this.onError(String(e));
+        this.onError(String(e), offset);
         throw e;
       } finally {
         hideLoading$1();
@@ -4996,128 +5070,116 @@ class ListLite extends Component {
     });
   }
   onLoad(data, offset) {
-    var _a;
-    setError(this.$el, null);
     if (this.pageMode === "pagination") {
       this.clearAllComments();
     }
     this.data = data;
+    if (this.ctx.conf.versionCheck && this.versionCheck(data.api_version))
+      return;
     this.importComments(data.comments);
-    if (this.isFirstLoad) {
-      this.onLoadInit();
-    }
-    if (this.pageMode === "pagination") {
-      this.pagination.update(offset, ((_a = this.data) == null ? void 0 : _a.total_parents) || 0);
-    }
-    if (this.pageMode === "read-more") {
-      if (this.hasMoreComments)
-        this.readMoreBtn.show();
-      else
-        this.readMoreBtn.hide();
-    }
+    this.refreshPagination(offset, this.flatMode ? data.total : data.total_roots);
+    this.refreshUI();
     this.ctx.trigger("unread-update", { notifies: data.unread || [] });
-    this.isFirstLoad = false;
-  }
-  onLoadInit() {
+    this.ctx.trigger("comments-loaded");
+    if (this.onAfterLoad)
+      this.onAfterLoad(data);
+  }
+  refreshPagination(offset, total) {
+    const modePagination = this.pageMode === "pagination";
+    const modeReadMoreBtn = this.pageMode === "read-more";
+    const initialized = modePagination ? !!this.pagination : !!this.readMoreBtn;
+    if (!initialized) {
+      this.initPagination();
+    }
+    if (modePagination)
+      this.pagination.update(offset, total);
+    if (modeReadMoreBtn)
+      this.readMoreBtn.update(offset, total);
+  }
+  initPagination() {
     var _a;
-    if (this.autoLoadScrollEvent) {
-      const at = this.autoLoadListenerAt || document;
-      at.removeEventListener("scroll", this.autoLoadScrollEvent);
-    }
     if (this.pageMode === "read-more") {
-      const readMoreBtn = new ReadMoreBtn({
-        onClick: () => __async(this, null, function* () {
-          const offset = this.offset + this.pageSize;
-          yield this.reqComments(offset);
+      this.readMoreBtn = new ReadMoreBtn({
+        pageSize: this.pageSize,
+        onClick: (o) => __async(this, null, function* () {
+          yield this.fetchComments(o);
         })
       });
-      if (this.readMoreBtn)
-        this.readMoreBtn.$el.replaceWith(readMoreBtn.$el);
-      else
-        this.$el.append(readMoreBtn.$el);
-      this.readMoreBtn = readMoreBtn;
+      this.$el.append(this.readMoreBtn.$el);
       if ((_a = this.conf.pagination) == null ? void 0 : _a.autoLoad) {
+        const at = this.scrollListenerAt || document;
+        if (this.autoLoadScrollEvent)
+          at.removeEventListener("scroll", this.autoLoadScrollEvent);
         this.autoLoadScrollEvent = () => {
           if (this.pageMode !== "read-more")
             return;
-          if (!this.hasMoreComments)
+          if (!this.readMoreBtn)
+            return;
+          if (!this.readMoreBtn.hasMore)
             return;
           if (this.isLoading)
             return;
           const $target = this.$el.querySelector(".atk-list-comments-wrap > .atk-comment-wrap:nth-last-child(3)");
           if (!$target)
             return;
-          if (isVisible($target, this.autoLoadListenerAt)) {
+          if (isVisible($target, this.scrollListenerAt)) {
             this.readMoreBtn.click();
           }
         };
-        const at = this.autoLoadListenerAt || document;
         at.addEventListener("scroll", this.autoLoadScrollEvent);
       }
-    } else if (this.pageMode === "pagination") {
-      const pagination2 = new Pagination(this.parentCommentsCount, {
+    }
+    if (this.pageMode === "pagination") {
+      this.pagination = new Pagination(!this.flatMode ? this.data.total_roots : this.data.total, {
         pageSize: this.pageSize,
-        onChange: (offset) => __async(this, null, function* () {
+        onChange: (o) => __async(this, null, function* () {
           if (this.ctx.conf.editorTravel === true) {
             this.ctx.trigger("editor-travel-back");
           }
-          yield this.reqComments(offset);
-          if (this.$parent) {
-            let topPos = 0;
-            if (!this.autoLoadListenerAt && this.$parent) {
-              topPos = getOffset(this.$parent).top;
-            }
-            const at = this.autoLoadListenerAt || window;
+          yield this.fetchComments(o);
+          if (this.repositionAt) {
+            const at = this.scrollListenerAt || window;
             at.scroll({
-              top: topPos,
+              top: this.repositionAt ? getOffset(this.repositionAt).top : 0,
               left: 0
             });
           }
         })
       });
-      if (this.pagination)
-        this.pagination.$el.replaceWith(pagination2.$el);
-      else
-        this.$el.append(pagination2.$el);
-      this.pagination = pagination2;
+      this.$el.append(this.pagination.$el);
     }
   }
-  onError(msg) {
+  onError(msg, offset) {
     var _a;
     msg = String(msg);
     console.error(msg);
-    if (this.isFirstLoad || this.pageMode === "pagination") {
-      const errEl = createElement(`<span>${msg}\uFF0C\u65E0\u6CD5\u83B7\u53D6\u8BC4\u8BBA\u5217\u8868\u6570\u636E<br/></span>`);
-      const retryBtn = createElement('<span style="cursor:pointer;">\u70B9\u51FB\u91CD\u65B0\u83B7\u53D6</span>');
-      retryBtn.onclick = () => {
-        this.reqComments(this.offset);
-      };
-      errEl.appendChild(retryBtn);
-      const adminBtn = createElement('<span atk-only-admin-show> | <span style="cursor:pointer;">\u6253\u5F00\u63A7\u5236\u53F0</span></span>');
-      adminBtn.onclick = () => {
-        this.ctx.trigger("sidebar-show");
-      };
-      if (!this.ctx.user.data.isAdmin) {
-        adminBtn.classList.add("atk-hide");
-      }
-      errEl.appendChild(adminBtn);
-      setError(this.$el, errEl);
-    } else {
+    if (offset !== 0 && this.pageMode === "read-more") {
       (_a = this.readMoreBtn) == null ? void 0 : _a.showErr(`\u83B7\u53D6\u5931\u8D25`);
+      return;
     }
+    const $err = createElement(`<span>${msg}\uFF0C\u65E0\u6CD5\u83B7\u53D6\u8BC4\u8BBA\u5217\u8868\u6570\u636E<br/></span>`);
+    const $retryBtn = createElement('<span style="cursor:pointer;">\u70B9\u51FB\u91CD\u65B0\u83B7\u53D6</span>');
+    $retryBtn.onclick = () => this.fetchComments(0);
+    $err.appendChild($retryBtn);
+    const adminBtn = createElement('<span atk-only-admin-show> | <span style="cursor:pointer;">\u6253\u5F00\u63A7\u5236\u53F0</span></span>');
+    adminBtn.onclick = () => this.ctx.trigger("sidebar-show");
+    if (!this.ctx.user.data.isAdmin)
+      adminBtn.classList.add("atk-hide");
+    $err.appendChild(adminBtn);
+    setError(this.$el, $err);
   }
   refreshUI() {
-    const noComment = this.comments.length <= 0;
-    let noCommentEl = this.$commentsWrap.querySelector(".atk-list-no-comment");
-    if (noComment) {
-      if (!noCommentEl) {
-        noCommentEl = createElement('<div class="atk-list-no-comment"></div>');
-        this.$commentsWrap.appendChild(noCommentEl);
-        noCommentEl.innerHTML = this.noCommentText;
+    const isNoComment = this.comments.length <= 0;
+    let $noComment = this.$commentsWrap.querySelector(".atk-list-no-comment");
+    if (isNoComment) {
+      if (!$noComment) {
+        $noComment = createElement('<div class="atk-list-no-comment"></div>');
+        $noComment.innerHTML = this.noCommentText;
+        this.$commentsWrap.appendChild($noComment);
       }
+    } else {
+      $noComment == null ? void 0 : $noComment.remove();
     }
-    if (!noComment && noCommentEl)
-      noCommentEl.remove();
     this.ctx.trigger("check-admin-show-el");
   }
   createComment(data) {
@@ -5132,66 +5194,58 @@ class ListLite extends Component {
     };
     return comment2;
   }
-  importComments(rawData) {
-    const queryImportChildren = (parentC) => {
-      const children = rawData.filter((o) => o.rid === parentC.data.id);
-      if (children.length === 0)
-        return;
-      children.forEach((itemData) => {
-        itemData.is_allow_reply = parentC.data.is_allow_reply;
-        const childC = this.createComment(itemData);
+  importComments(srcData) {
+    if (this.flatMode) {
+      srcData.forEach((commentData) => {
+        this.putCommentFlatMode(commentData, srcData, "append");
+      });
+    } else {
+      this.importCommentsNesting(srcData);
+    }
+  }
+  importCommentsNesting(srcData) {
+    const loadChildren = (parentC) => {
+      const children = srcData.filter((o) => o.rid === parentC.data.id);
+      children.forEach((childData) => {
+        const childC = this.createComment(childData);
         childC.render();
         parentC.putChild(childC);
-        queryImportChildren(childC);
+        loadChildren(childC);
       });
     };
-    if (!this.flatMode) {
-      rawData.filter((o) => o.rid === 0).forEach((rootCommentData) => {
-        if (rootCommentData.is_collapsed)
-          rootCommentData.is_allow_reply = false;
-        const rootComment = this.createComment(rootCommentData);
-        rootComment.render();
-        this.comments.push(rootComment);
-        this.$commentsWrap.appendChild(rootComment.getEl());
-        rootComment.playFadeInAnim();
-        queryImportChildren(rootComment);
-      });
-    } else {
-      rawData.forEach((commentData) => {
-        this.putCommentFlatMode(commentData, rawData, "append");
-      });
-    }
-    this.eachComment(this.comments, (c) => {
-      if (c.getIsRoot())
-        this.checkMoreHide(c);
+    const rootComments = srcData.filter((o) => o.rid === 0);
+    rootComments.forEach((rootData) => {
+      const rootC = this.createComment(rootData);
+      rootC.render();
+      this.$commentsWrap.appendChild(rootC.getEl());
+      rootC.playFadeInAnim();
+      this.comments.push(rootC);
+      loadChildren(rootC);
+      rootC.checkHeightLimit();
     });
-    this.refreshUI();
-    this.ctx.trigger("comments-loaded");
   }
-  putCommentFlatMode(commentItem, comments, insertMode) {
-    if (commentItem.is_collapsed)
-      commentItem.is_allow_reply = false;
-    const comment2 = this.createComment(commentItem);
-    if (commentItem.rid !== 0) {
-      const rComment = comments.find((o) => o.id === commentItem.rid);
+  putCommentFlatMode(cData, srcData, insertMode) {
+    if (cData.is_collapsed)
+      cData.is_allow_reply = false;
+    const comment2 = this.createComment(cData);
+    if (cData.rid !== 0) {
+      const rComment = srcData.find((o) => o.id === cData.rid);
       if (rComment)
         comment2.replyTo = rComment;
     }
     comment2.render();
-    if (insertMode === "append") {
+    if (insertMode === "append")
       this.comments.push(comment2);
-    } else {
+    if (insertMode === "prepend")
       this.comments.unshift(comment2);
-    }
-    if (commentItem.visible) {
-      if (insertMode === "append") {
-        this.$commentsWrap.appendChild(comment2.getEl());
-      } else {
+    if (cData.visible) {
+      if (insertMode === "append")
+        this.$commentsWrap.append(comment2.getEl());
+      if (insertMode === "prepend")
         this.$commentsWrap.prepend(comment2.getEl());
-      }
       comment2.playFadeInAnim();
     }
-    this.checkMoreHide(comment2);
+    comment2.checkHeightLimit();
     return comment2;
   }
   insertComment(commentData) {
@@ -5201,18 +5255,17 @@ class ListLite extends Component {
       if (commentData.rid === 0) {
         this.$commentsWrap.prepend(comment2.getEl());
         this.comments.unshift(comment2);
-        this.checkMoreHide(comment2);
       } else {
         const parent = this.findComment(commentData.rid);
         if (parent) {
           parent.putChild(comment2);
-          if (parent.$children)
-            this.removeHideMore(parent.$children);
-          this.eachComment(parent.children, (c) => {
-            this.checkMoreHide(c);
+          comment2.getParents().forEach((p) => {
+            if (p.$children)
+              p.heightLimitRemove(p.$children);
           });
         }
       }
+      comment2.checkHeightLimit();
       scrollIntoView(comment2.getEl());
       comment2.playFadeInAnim();
     } else {
@@ -5224,92 +5277,6 @@ class ListLite extends Component {
     this.refreshUI();
     this.ctx.trigger("comments-loaded");
   }
-  checkMoreHide(c) {
-    const check = () => {
-      this.checkMoreHideEl(c, "children");
-      this.checkMoreHideEl(c, "content");
-      if (c.$replyTo)
-        this.checkMoreHideEl(c, "replyTo");
-    };
-    check();
-    if (c.$content.querySelectorAll("img").length) {
-      onImagesLoaded(c.$content, () => {
-        check();
-      });
-    }
-  }
-  checkMoreHideEl(comment2, area, allowHeight = 300) {
-    var _a, _b;
-    const childrenH = (_a = this.ctx.conf.heightLimit) == null ? void 0 : _a.children;
-    const contentH = (_b = this.ctx.conf.heightLimit) == null ? void 0 : _b.content;
-    if (area === "children" && !childrenH)
-      return;
-    if ((area === "content" || area === "replyTo") && !contentH)
-      return;
-    if (area === "children")
-      allowHeight = childrenH || 300;
-    else
-      allowHeight = contentH || 200;
-    let $target;
-    if (area === "children")
-      $target = comment2.$children;
-    else if (area === "content")
-      $target = comment2.$content;
-    else if (area === "replyTo")
-      $target = comment2.$replyTo;
-    if (!$target)
-      return;
-    let $hideMoreOpenBtn = $target.querySelector(".atk-more-hide-open-btn");
-    const removeHideMore = () => {
-      $target.classList.remove("atk-comment-more-hide");
-      if ($hideMoreOpenBtn)
-        $hideMoreOpenBtn.remove();
-      $target.style.height = "";
-      $target.style.overflow = "";
-    };
-    if (getHeight($target) > allowHeight) {
-      $target.classList.add("atk-comment-more-hide");
-      $target.style.height = `${allowHeight}px`;
-      $target.style.overflow = "hidden";
-      if (!$hideMoreOpenBtn) {
-        $hideMoreOpenBtn = createElement(`<div class="atk-more-hide-open-btn">\u9605\u8BFB\u66F4\u591A</span>`);
-        $hideMoreOpenBtn.onclick = (e) => {
-          e.stopPropagation();
-          removeHideMore();
-          if (comment2.getIsRoot()) {
-            const children = comment2.getChildren();
-            if (children.length > 1) {
-              this.eachComment(children, (c) => {
-                this.checkMoreHideEl(c, "content", contentH || 200);
-              });
-            }
-          }
-        };
-        $target.append($hideMoreOpenBtn);
-      }
-    }
-  }
-  removeHideMore($target) {
-    const $hideMoreOpenBtn = $target.querySelector(".atk-more-hide-open-btn");
-    $target.classList.remove("atk-comment-more-hide");
-    if ($hideMoreOpenBtn)
-      $hideMoreOpenBtn.remove();
-    $target.style.height = "";
-    $target.style.overflow = "";
-  }
-  get commentsCount() {
-    var _a;
-    return Number((_a = this.data) == null ? void 0 : _a.total) || 0;
-  }
-  get parentCommentsCount() {
-    var _a;
-    return Number((_a = this.data) == null ? void 0 : _a.total_parents) || 0;
-  }
-  get hasMoreComments() {
-    if (!this.data)
-      return false;
-    return (!this.flatMode ? this.data.total_parents : this.data.total) > this.offset + this.pageSize;
-  }
   eachComment(commentList, action) {
     if (commentList.length === 0)
       return;
@@ -5333,13 +5300,6 @@ class ListLite extends Component {
     });
     return comment2;
   }
-  getCommentCount() {
-    let count = 0;
-    this.eachComment(this.comments, () => {
-      count++;
-    });
-    return count;
-  }
   deleteComment(comment2) {
     let findComment;
     if (typeof comment2 === "number") {
@@ -5367,7 +5327,7 @@ class ListLite extends Component {
   }
   updateUnread(notifies) {
     this.unread = notifies;
-    if (this.unreadHighlight) {
+    if (this.unreadHighlight === true) {
       this.eachComment(this.comments, (comment2) => {
         const notify = this.unread.find((o) => o.comment_id === comment2.data.id);
         if (notify) {
@@ -5385,16 +5345,16 @@ class ListLite extends Component {
       });
     }
   }
-  apiVersionCheck(versionData) {
+  versionCheck(versionData) {
     const needVersion = (versionData == null ? void 0 : versionData.fe_min_version) || "0.0.0";
-    const needUpdate = versionCompare(needVersion, "2.1.3") === 1;
+    const needUpdate = versionCompare(needVersion, "2.1.4") === 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.3"}\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.4"}\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.reqComments(0);
+        this.fetchComments(0);
       };
       errEl.append(ignoreBtn);
       setError(this.ctx, errEl, '<span class="atk-warn-title">Artalk Warn</span>');
@@ -5404,9 +5364,9 @@ class ListLite extends Component {
 }
 class List extends ListLite {
   constructor(ctx) {
-    var _a;
+    var _a, _b;
     const el = createElement(ListHTML);
-    super(ctx, el);
+    super(ctx);
     __publicField(this, "$closeCommentBtn");
     __publicField(this, "$openSidebarBtn");
     __publicField(this, "$unreadBadge");
@@ -5421,9 +5381,11 @@ class List extends ListLite {
     }
     this.flatMode = flatMode;
     this.pageMode = ((_a = this.conf.pagination) == null ? void 0 : _a.readMore) ? "read-more" : "pagination";
+    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.3"}">Artalk</a>`;
-    this.ctx.on("list-reload", () => this.reqComments(0));
+    this.$el.querySelector(".atk-copyright").innerHTML = `Powered By <a href="https://artalk.js.org" target="_blank" title="Artalk v${"2.1.4"}">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));
     this.ctx.on("list-insert", (data) => this.insertComment(data));
@@ -5452,15 +5414,16 @@ class List extends ListLite {
     });
   }
   refreshUI() {
+    var _a;
     super.refreshUI();
-    this.$el.querySelector(".atk-comment-count-num").innerText = String(this.commentsCount);
+    this.$el.querySelector(".atk-comment-count-num").innerText = String(Number((_a = this.data) == null ? void 0 : _a.total) || 0);
     if (!!this.ctx.user.data.nick && !!this.ctx.user.data.email) {
       this.$openSidebarBtn.classList.remove("atk-hide");
     } else {
       this.$openSidebarBtn.classList.add("atk-hide");
     }
     this.ctx.trigger("check-admin-show-el");
-    this.$openSidebarBtn.innerText = !this.ctx.user.data.isAdmin ? "\u901A\u77E5\u4E2D\u5FC3" : "\u63A7\u5236\u4E2D\u5FC3";
+    this.$openSidebarBtn.querySelector(".atk-text").innerText = !this.ctx.user.data.isAdmin ? "\u901A\u77E5\u4E2D\u5FC3" : "\u63A7\u5236\u4E2D\u5FC3";
     if (!!this.data && !!this.data.page && this.data.page.admin_only === true) {
       this.ctx.trigger("editor-close");
       this.$closeCommentBtn.innerHTML = "\u6253\u5F00\u8BC4\u8BBA";
@@ -5619,10 +5582,10 @@ class MessageView extends SidebarView {
       };
       this.viewActiveTab = "mentions";
     }
-    this.list = new ListLite(this.ctx, this.$el);
+    this.list = new ListLite(this.ctx);
     this.list.flatMode = true;
     this.list.unreadHighlight = true;
-    this.list.autoLoadListenerAt = this.$parent;
+    this.list.scrollListenerAt = this.$parent;
     this.list.pageMode = "pagination";
     this.list.noCommentText = '<div class="atk-sidebar-no-content">\u65E0\u5185\u5BB9</div>';
     this.list.renderComment = (comment2) => {
@@ -5645,12 +5608,11 @@ class MessageView extends SidebarView {
   }
   switchTab(tab, siteName) {
     this.viewActiveTab = tab;
-    this.list.type = tab;
-    this.list.isFirstLoad = true;
     this.list.paramsEditor = (params) => {
+      params.type = tab;
       params.site_name = siteName;
     };
-    this.list.reqComments();
+    this.list.fetchComments(0);
     return true;
   }
 }
@@ -6764,7 +6726,7 @@ const _Artalk = class {
     this.$root.appendChild(this.list.$el);
     this.sidebar = new Sidebar(this.ctx);
     this.$root.appendChild(this.sidebar.$el);
-    this.list.reqComments();
+    this.list.fetchComments(0);
     this.initEventBind();
   }
   initEventBind() {
@@ -6790,7 +6752,7 @@ const _Artalk = class {
     });
   }
   reload() {
-    this.list.reqComments();
+    this.list.fetchComments(0);
   }
   initDarkMode() {
     const darkModeClassName = "atk-dark-mode";