artalk 2.1.3 → 2.1.6

package/src/components/editor.ts

@@ -18,12 +18,9 @@ export default class Editor extends Component {
   public $header: HTMLElement
   public $textareaWrap: HTMLElement
   public $textarea: HTMLTextAreaElement
-  public $closeComment: HTMLTextAreaElement
   public $plugWrap: HTMLElement
   public $bottom: HTMLElement
-  public $bottomPartLeft: HTMLElement
-  public $plugSwitcherWrap: HTMLElement
-  public $bottomPartRight: HTMLElement
+  public $plugBtnWrap: HTMLElement
   public $submitBtn: HTMLButtonElement
   public $notifyWrap: HTMLElement
 
@@ -41,17 +38,14 @@ export default class Editor extends Component {
 
     this.$el = Utils.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()
@@ -201,13 +195,13 @@ export default class Editor extends Component {
     this.$plugWrap.innerHTML = ''
     this.$plugWrap.style.display = 'none'
     this.openedPlugName = null
-    this.$plugSwitcherWrap.innerHTML = ''
+    this.$plugBtnWrap.innerHTML = ''
 
     // 依次实例化 plug
     this.LOADABLE_PLUG_LIST.forEach((PlugObj) => {
       // 切换按钮
-      const btnElem = Utils.createElement(`<span class="atk-editor-action atk-editor-plug-switcher">${PlugObj.BtnHTML}</span>`)
-      this.$plugSwitcherWrap.appendChild(btnElem)
+      const btnElem = Utils.createElement(`<span class="atk-plug-btn">${PlugObj.BtnHTML}</span>`)
+      this.$plugBtnWrap.appendChild(btnElem)
       btnElem.addEventListener('click', () => {
         let plug = this.plugList[PlugObj.Name]
         if (!plug) {
@@ -215,7 +209,7 @@ export default class Editor extends Component {
           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) {
@@ -413,7 +407,8 @@ export default class Editor extends Component {
 
   /** 关闭评论 */
   close () {
-    this.$closeComment.style.display = ''
+    if (!this.$textareaWrap.querySelector('.atk-comment-closed'))
+      this.$textareaWrap.prepend(Utils.createElement('<div class="atk-comment-closed">仅管理员可评论</div>'))
 
     if (!this.user.data.isAdmin) {
       this.$textarea.style.display = 'none'
@@ -428,7 +423,7 @@ export default class Editor extends Component {
 
   /** 打开评论 */
   open () {
-    this.$closeComment.style.display = 'none'
+    this.$textareaWrap.querySelector('.atk-comment-closed')?.remove()
     this.$textarea.style.display = ''
     this.$bottom.style.display = ''
   }

package/src/components/html/comment.html

@@ -1,25 +1,18 @@
-<div class="atk-comment-wrap" data-comment-id="">
+<div class="atk-comment-wrap">
   <div class="atk-comment">
-
     <div class="atk-avatar"></div>
-
-    <div class="atk-comment-main">
-
+    <div class="atk-main">
       <div class="atk-header">
-        <span class="atk-nick"></span>
-        <span class="atk-badge"></span>
-        <span class="atk-date"></span>
+        <span class="atk-item atk-nick"></span>
+        <span class="atk-item atk-badge"></span>
+        <span class="atk-item atk-date"></span>
       </div>
-
       <div class="atk-body">
         <div class="atk-content"></div>
       </div>
-
       <div class="atk-footer">
-        <div class="atk-comment-actions"></div>
+        <div class="atk-actions"></div>
       </div>
-
     </div>
-
   </div>
 </div>

package/src/components/html/editor.html

@@ -1,19 +1,18 @@
 <div class="atk-main-editor">
-  <div class="atk-editor-header">
+  <div class="atk-header">
     <input name="nick" placeholder="昵称" class="atk-nick" type="text" required="required">
     <input name="email" placeholder="邮箱" class="atk-email" type="email" required="required">
     <input name="link" placeholder="网址 (https://)" class="atk-link" type="url">
   </div>
-  <div class="atk-editor-textarea-wrap">
-    <div class="atk-close-comment" style="display: none;"><span>仅管理员可评论</span></div>
-    <textarea id="atk-editor-textarea" class="atk-editor-textarea" placeholder=""></textarea>
+  <div class="atk-textarea-wrap">
+    <textarea class="atk-textarea" placeholder=""></textarea>
   </div>
-  <div class="atk-editor-plug-wrap" style="display: none;"></div>
-  <div class="atk-editor-bottom">
-    <div class="atk-editor-bottom-part atk-left atk-editor-plug-switcher-wrap"></div>
-    <div class="atk-editor-bottom-part atk-right">
+  <div class="atk-plug-wrap" style="display: none;"></div>
+  <div class="atk-bottom">
+    <div class="atk-item atk-plug-btn-wrap"></div>
+    <div class="atk-item">
       <button type="button" class="atk-send-btn"></button>
     </div>
   </div>
-  <div class="atk-editor-notify-wrap"></div>
+  <div class="atk-notify-wrap"></div>
 </div>

package/src/components/html/list.html

@@ -8,7 +8,7 @@
       <span data-action="admin-close-comment" class="atk-hide" atk-only-admin-show>关闭评论</span>
       <span data-action="open-sidebar" class="atk-hide atk-on">
         <span class="atk-unread-badge" style="display: none;"></span>
-        通知中心
+        <div class="atk-text">通知中心</div>
       </span>
     </div>
   </div>

package/src/components/html/sidebar-layer.html

@@ -0,0 +1,8 @@
+<div class="atk-sidebar-layer">
+  <div class="atk-sidebar-inner">
+    <div class="atk-sidebar-header">
+      <div class="atk-sidebar-close"><i class="atk-icon atk-icon-close"></i></div>
+    </div>
+    <div class="atk-sidebar-iframe-wrap"></div>
+  </div>
+</div>