artalk 2.0.4 → 2.1.1

package/src/components/{Editor.ts → editor.ts}

@@ -1,36 +1,34 @@
 import '../style/editor.less'
 
-import Context from '../Context'
+import Context from '../context'
 import Component from '../lib/component'
 import * as Utils from '../lib/utils'
 import * as Ui from '../lib/ui'
 import EditorHTML from './html/editor.html?raw'
 
-import EmoticonsPlug from './editor-plugs/EmoticonsPlug'
-import PreviewPlug from './editor-plugs/PreviewPlug'
+import EmoticonsPlug from './editor-plugs/emoticons-plug'
+import PreviewPlug from './editor-plugs/preview-plug'
 import { CommentData } from '~/types/artalk-data'
-import Api from '../lib/api'
+import Api from '../api'
 
 export default class Editor extends Component {
   private readonly LOADABLE_PLUG_LIST = [EmoticonsPlug, PreviewPlug]
   public plugList: { [name: string]: any } = {}
 
-  public el: HTMLElement
-
-  public headerEl: HTMLElement
-  public textareaWrapEl: HTMLElement
-  public textareaEl: HTMLTextAreaElement
-  public closeCommentEl: HTMLTextAreaElement
-  public plugWrapEl: HTMLElement
-  public bottomEl: HTMLElement
-  public bottomPartLeftEl: HTMLElement
-  public plugSwitcherWrapEl: HTMLElement
-  public bottomPartRightEl: HTMLElement
-  public submitBtn: HTMLButtonElement
-  public notifyWrapEl: HTMLElement
+  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 $submitBtn: HTMLButtonElement
+  public $notifyWrap: HTMLElement
 
   private replyComment: CommentData|null = null
-  private sendReplyEl: HTMLElement|null = null
+  private $sendReply: HTMLElement|null = null
 
   private get user () {
     return this.ctx.user
@@ -39,19 +37,19 @@ export default class Editor extends Component {
   constructor (ctx: Context) {
     super(ctx)
 
-    this.el = Utils.createElement(EditorHTML)
+    this.$el = Utils.createElement(EditorHTML)
 
-    this.headerEl = this.el.querySelector('.atk-editor-header')!
-    this.textareaWrapEl = this.el.querySelector('.atk-editor-textarea-wrap')!
-    this.textareaEl = this.el.querySelector('.atk-editor-textarea')!
-    this.closeCommentEl = this.el.querySelector('.atk-close-comment')!
-    this.plugWrapEl = this.el.querySelector('.atk-editor-plug-wrap')!
-    this.bottomEl = this.el.querySelector('.atk-editor-bottom')!
-    this.bottomPartLeftEl = this.el.querySelector('.atk-editor-bottom-part.atk-left')!
-    this.plugSwitcherWrapEl = this.el.querySelector('.atk-editor-plug-switcher-wrap')!
-    this.bottomPartRightEl = this.el.querySelector('.atk-editor-bottom-part.atk-right')!
-    this.submitBtn = this.el.querySelector('.atk-send-btn')!
-    this.notifyWrapEl = this.el.querySelector('.atk-editor-notify-wrap')!
+    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.$submitBtn = this.$el.querySelector('.atk-send-btn')!
+    this.$notifyWrap = this.$el.querySelector('.atk-editor-notify-wrap')!
 
     this.initLocalStorage()
     this.initHeader()
@@ -60,12 +58,12 @@ export default class Editor extends Component {
     this.initBottomPart()
 
     // 监听事件
-    this.ctx.addEventListener('editor-open-comment', () => (this.openComment()))
-    this.ctx.addEventListener('editor-close-comment', () => (this.closeComment()))
-    this.ctx.addEventListener('editor-reply', (commentData) => (this.setReply(commentData)))
-    this.ctx.addEventListener('editor-show-loading', () => (Ui.showLoading(this.el)))
-    this.ctx.addEventListener('editor-hide-loading', () => (Ui.hideLoading(this.el)))
-    this.ctx.addEventListener('editor-notify', (f) => (this.showNotify(f.msg, f.type)))
+    this.ctx.on('editor-open', () => (this.open()))
+    this.ctx.on('editor-close', () => (this.close()))
+    this.ctx.on('editor-reply', (commentData) => (this.setReply(commentData)))
+    this.ctx.on('editor-show-loading', () => (Ui.showLoading(this.$el)))
+    this.ctx.on('editor-hide-loading', () => (Ui.hideLoading(this.$el)))
+    this.ctx.on('editor-notify', (f) => (this.showNotify(f.msg, f.type)))
   }
 
   initLocalStorage () {
@@ -74,7 +72,7 @@ export default class Editor extends Component {
       this.showNotify('已自动恢复', 'i')
       this.setContent(localContent)
     }
-    this.textareaEl.addEventListener('input', () => {
+    this.$textarea.addEventListener('input', () => {
       this.saveContent()
     })
   }
@@ -91,7 +89,7 @@ export default class Editor extends Component {
   }
 
   getInputEl (field: string) {
-    const inputEl = this.headerEl.querySelector<HTMLInputElement>(`[name="${field}"]`)
+    const inputEl = this.$header.querySelector<HTMLInputElement>(`[name="${field}"]`)
     return inputEl
   }
 
@@ -127,7 +125,7 @@ export default class Editor extends Component {
           }
 
           // 未读消息更新
-          this.ctx.dispatchEvent('unread-update', { notifies: data.unread, })
+          this.ctx.trigger('unread-update', { notifies: data.unread, })
 
           // 若用户为管理员，执行登陆操作
           if (this.user.checkHasBasicUserInfo() && !data.is_login && data.user && data.user.is_admin) {
@@ -150,7 +148,7 @@ export default class Editor extends Component {
   }
 
   showLoginDialog () {
-    this.ctx.dispatchEvent('checker-admin', {
+    this.ctx.trigger('checker-admin', {
       onSuccess: () => {
       }
     })
@@ -158,7 +156,7 @@ export default class Editor extends Component {
 
   saveUser () {
     this.user.save()
-    this.ctx.dispatchEvent('user-changed')
+    this.ctx.trigger('user-changed', this.ctx.user.data)
   }
 
   saveContent () {
@@ -167,10 +165,10 @@ export default class Editor extends Component {
 
   initTextarea () {
     // 占位符
-    this.textareaEl.placeholder = this.ctx.conf.placeholder || ''
+    this.$textarea.placeholder = this.ctx.conf.placeholder || ''
 
     // 修复按下 Tab 输入的内容
-    this.textareaEl.addEventListener('keydown', (e) => {
+    this.$textarea.addEventListener('keydown', (e) => {
       const keyCode = e.keyCode || e.which
 
       if (keyCode === 9) {
@@ -180,25 +178,25 @@ export default class Editor extends Component {
     })
 
     // 输入框高度随内容而变化
-    this.textareaEl.addEventListener('input', (evt) => {
+    this.$textarea.addEventListener('input', (evt) => {
       this.adjustTextareaHeight()
     })
   }
 
   adjustTextareaHeight () {
-    const diff = this.textareaEl.offsetHeight - this.textareaEl.clientHeight
-    this.textareaEl.style.height = '0px' // it's a magic. 若不加此行，内容减少，高度回不去
-    this.textareaEl.style.height = `${this.textareaEl.scrollHeight + diff}px`
+    const diff = this.$textarea.offsetHeight - this.$textarea.clientHeight
+    this.$textarea.style.height = '0px' // it's a magic. 若不加此行，内容减少，高度回不去
+    this.$textarea.style.height = `${this.$textarea.scrollHeight + diff}px`
   }
 
   openedPlugName: string|null = null
 
   initEditorPlug () {
     this.plugList = {}
-    this.plugWrapEl.innerHTML = ''
-    this.plugWrapEl.style.display = 'none'
+    this.$plugWrap.innerHTML = ''
+    this.$plugWrap.style.display = 'none'
     this.openedPlugName = null
-    this.plugSwitcherWrapEl.innerHTML = ''
+    this.$plugSwitcherWrap.innerHTML = ''
 
     // 依次实例化 plug
     this.LOADABLE_PLUG_LIST.forEach((PlugObj) => {
@@ -207,27 +205,27 @@ export default class Editor extends Component {
 
       // 切换按钮
       const btnElem = Utils.createElement(`<span class="atk-editor-action atk-editor-plug-switcher">${plug.getBtnHtml()}</span>`)
-      this.plugSwitcherWrapEl.appendChild(btnElem)
+      this.$plugSwitcherWrap.appendChild(btnElem)
       btnElem.addEventListener('click', () => {
-        this.plugSwitcherWrapEl.querySelectorAll('.active').forEach(item => item.classList.remove('active'))
+        this.$plugSwitcherWrap.querySelectorAll('.active').forEach(item => item.classList.remove('active'))
 
         // 若点击已打开的，则收起
         if (plug.getName() === this.openedPlugName) {
           plug.onHide()
-          this.plugWrapEl.style.display = 'none'
+          this.$plugWrap.style.display = 'none'
           this.openedPlugName = null
           return
         }
 
-        if (this.plugWrapEl.querySelector(`[data-plug-name="${plug.getName()}"]`) === null) {
+        if (this.$plugWrap.querySelector(`[data-plug-name="${plug.getName()}"]`) === null) {
           // 需要初始化
           const plugEl = plug.getEl()
           plugEl.setAttribute('data-plug-name', plug.getName())
           plugEl.style.display = 'none'
-          this.plugWrapEl.appendChild(plugEl)
+          this.$plugWrap.appendChild(plugEl)
         }
 
-        (Array.from(this.plugWrapEl.children) as HTMLElement[]).forEach((plugItemEl: HTMLElement) => {
+        (Array.from(this.$plugWrap.children) as HTMLElement[]).forEach((plugItemEl: HTMLElement) => {
           const plugItemName = plugItemEl.getAttribute('data-plug-name')!
           if (plugItemName === plug.getName()) {
             plugItemEl.style.display = ''
@@ -238,7 +236,7 @@ export default class Editor extends Component {
           }
         })
 
-        this.plugWrapEl.style.display = ''
+        this.$plugWrap.style.display = ''
         this.openedPlugName = plug.getName()
 
         btnElem.classList.add('active')
@@ -248,33 +246,33 @@ export default class Editor extends Component {
 
   /** 关闭编辑器插件 */
   closePlug () {
-    this.plugWrapEl.innerHTML = ''
-    this.plugWrapEl.style.display = 'none'
+    this.$plugWrap.innerHTML = ''
+    this.$plugWrap.style.display = 'none'
     this.openedPlugName = null
   }
 
   insertContent (val: string) {
     if ((document as any).selection) {
-      this.textareaEl.focus();
+      this.$textarea.focus();
       (document as any).selection.createRange().text = val
-      this.textareaEl.focus()
-    } else if (this.textareaEl.selectionStart || this.textareaEl.selectionStart === 0) {
-      const sStart = this.textareaEl.selectionStart
-      const sEnd = this.textareaEl.selectionEnd
-      const sT = this.textareaEl.scrollTop
-      this.setContent(this.textareaEl.value.substring(0, sStart) + val + this.textareaEl.value.substring(sEnd, this.textareaEl.value.length))
-      this.textareaEl.focus()
-      this.textareaEl.selectionStart = sStart + val.length
-      this.textareaEl.selectionEnd = sStart + val.length
-      this.textareaEl.scrollTop = sT
+      this.$textarea.focus()
+    } else if (this.$textarea.selectionStart || this.$textarea.selectionStart === 0) {
+      const sStart = this.$textarea.selectionStart
+      const sEnd = this.$textarea.selectionEnd
+      const sT = this.$textarea.scrollTop
+      this.setContent(this.$textarea.value.substring(0, sStart) + val + this.$textarea.value.substring(sEnd, this.$textarea.value.length))
+      this.$textarea.focus()
+      this.$textarea.selectionStart = sStart + val.length
+      this.$textarea.selectionEnd = sStart + val.length
+      this.$textarea.scrollTop = sT
     } else {
-      this.textareaEl.focus()
-      this.textareaEl.value += val
+      this.$textarea.focus()
+      this.$textarea.value += val
     }
   }
 
   setContent (val: string) {
-    this.textareaEl.value = val
+    this.$textarea.value = val
     this.saveContent()
     if (!!this.plugList && !!this.plugList.preview) {
       this.plugList.preview.updateContent()
@@ -300,7 +298,7 @@ export default class Editor extends Component {
   }
 
   getContentOriginal () {
-    return this.textareaEl.value || '' // Tip: !!"0" === true
+    return this.$textarea.value || '' // Tip: !!"0" === true
   }
 
   getContentMarked () {
@@ -314,7 +312,7 @@ export default class Editor extends Component {
 
   initReply () {
     this.replyComment = null
-    this.sendReplyEl = null
+    this.$sendReply = null
   }
 
   setReply (commentData: CommentData) {
@@ -322,31 +320,31 @@ export default class Editor extends Component {
       this.cancelReply()
     }
 
-    if (this.sendReplyEl === null) {
-      this.sendReplyEl = Utils.createElement('<div class="atk-send-reply-wrap"><div class="atk-send-reply">回复 <span class="atk-text"></span><span class="atk-cancel" title="取消 AT">×</span></div></div>');
-      this.sendReplyEl.querySelector<HTMLElement>('.atk-text')!.innerText = `@${commentData.nick}`
-      this.sendReplyEl.addEventListener('click', () => {
+    if (this.$sendReply === null) {
+      this.$sendReply = Utils.createElement('<div class="atk-send-reply-wrap"><div class="atk-send-reply">回复 <span class="atk-text"></span><span class="atk-cancel" title="取消 AT">×</span></div></div>');
+      this.$sendReply.querySelector<HTMLElement>('.atk-text')!.innerText = `@${commentData.nick}`
+      this.$sendReply.addEventListener('click', () => {
         this.cancelReply()
       })
-      this.textareaWrapEl.prepend(this.sendReplyEl)
+      this.$textareaWrap.prepend(this.$sendReply)
     }
     this.replyComment = commentData
-    Ui.scrollIntoView(this.el)
-    this.textareaEl.focus()
+    Ui.scrollIntoView(this.$el)
+    this.$textarea.focus()
   }
 
   cancelReply () {
-    if (this.sendReplyEl !== null) {
-      this.sendReplyEl.remove()
-      this.sendReplyEl = null
+    if (this.$sendReply !== null) {
+      this.$sendReply.remove()
+      this.$sendReply = null
     }
     this.replyComment = null
   }
 
   initSubmit () {
-    this.submitBtn.innerText = this.ctx.conf.sendBtn || 'Send'
+    this.$submitBtn.innerText = this.ctx.conf.sendBtn || 'Send'
 
-    this.submitBtn.addEventListener('click', (evt) => {
+    this.$submitBtn.addEventListener('click', (evt) => {
       const btnEl = evt.currentTarget
       this.submit()
     })
@@ -354,11 +352,13 @@ export default class Editor extends Component {
 
   async submit () {
     if (this.getContent().trim() === '') {
-      this.textareaEl.focus()
+      this.$textarea.focus()
       return
     }
 
-    Ui.showLoading(this.el)
+    this.ctx.trigger('editor-submit')
+
+    Ui.showLoading(this.$el)
 
     try {
       const nComment = await new Api(this.ctx).add({
@@ -369,39 +369,41 @@ export default class Editor extends Component {
         rid: this.replyComment === null ? 0 : this.replyComment.id
       })
 
-      this.ctx.dispatchEvent('list-insert', nComment)
+      this.ctx.trigger('list-insert', nComment)
       this.clearEditor() // 清空编辑器
+      this.ctx.trigger('editor-submitted')
     } catch (err: any) {
+      console.error(err)
       this.showNotify(`评论失败，${err.msg || String(err)}`, 'e')
     } finally {
-      Ui.hideLoading(this.el)
+      Ui.hideLoading(this.$el)
     }
   }
 
   showNotify (msg: string, type) {
-    Ui.showNotify(this.notifyWrapEl, msg, type)
+    Ui.showNotify(this.$notifyWrap, msg, type)
   }
 
   /** 关闭评论 */
-  closeComment () {
-    this.closeCommentEl.style.display = ''
+  close () {
+    this.$closeComment.style.display = ''
 
     if (!this.user.data.isAdmin) {
-      this.textareaEl.style.display = 'none'
+      this.$textarea.style.display = 'none'
       this.closePlug()
-      this.bottomEl.style.display = 'none'
+      this.$bottom.style.display = 'none'
     } else {
       // 管理员一直打开评论
-      this.textareaEl.style.display = ''
-      this.bottomEl.style.display = ''
+      this.$textarea.style.display = ''
+      this.$bottom.style.display = ''
     }
   }
 
   /** 打开评论 */
-  openComment () {
-    this.closeCommentEl.style.display = 'none'
-    this.textareaEl.style.display = ''
-    this.bottomEl.style.display = ''
+  open () {
+    this.$closeComment.style.display = 'none'
+    this.$textarea.style.display = ''
+    this.$bottom.style.display = ''
   }
 }
 

package/src/components/html/comment.html

@@ -1,18 +1,14 @@
 <div class="atk-comment-wrap" data-comment-id="">
   <div class="atk-comment">
 
-    <div class="atk-avatar">
-      <a target="_blank"><img src=""></a>
-    </div>
+    <div class="atk-avatar"></div>
 
     <div class="atk-comment-main">
 
       <div class="atk-header">
-        <span class="atk-nick"><a target="_blank"></a></span>
+        <span class="atk-nick"></span>
         <span class="atk-badge"></span>
         <span class="atk-date"></span>
-        <span class="atk-ua ua-browser"></span>
-        <span class="atk-ua ua-os"></span>
       </div>
 
       <div class="atk-body">

package/src/components/html/list.html

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

package/src/components/html/sidebar.html

@@ -1,8 +1,22 @@
 <div class="atk-sidebar">
   <div class="atk-sidebar-inner">
-    <div class="atk-sidebar-title-wrap"><span class="atk-title-item atk-active"></span></div>
-    <div class="atk-sidebar-close"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/><path d="M0 0h24v24H0z" fill="none"/></svg></div>
-    <div class="atk-sidebar-actions"></div>
-    <div class="atk-sidebar-content"></div>
+    <div class="atk-sidebar-header">
+      <span class="atk-avatar">
+        <span class="atk-site-logo"></span>
+      </span>
+      <span class="atk-menu">
+        <span class="atk-item atk-active atk-sidebar-title">控制中心</span>
+      </span>
+      <div class="atk-sidebar-close"><i class="atk-icon atk-icon-close"></i></div>
+    </div>
+    <div class="atk-sidebar-nav">
+      <div class="akt-curt-view-btn">
+        <div class="atk-icon"><span></span><span></span><span></span></div>
+        <div class="atk-text"></div>
+      </div>
+      <div class="atk-tabs"></div>
+      <div class="atk-tabs atk-views" style="display: none;"></div>
+    </div>
+    <div class="atk-sidebar-view-wrap"></div>
   </div>
 </div>

package/src/components/item-text-editor.ts

@@ -0,0 +1,136 @@
+import '../style/item-text-editor.less'
+
+import * as Utils from '../lib/utils'
+
+interface ItemTextEditorConf {
+  initValue?: string
+  validator?: (value: string) => boolean
+  onYes?: (value: string) => boolean|void|Promise<boolean|void>
+  onNo?: () => boolean|void|Promise<boolean|void>
+  placeholder?: string
+}
+
+/**
+ * 通用列表项目文本编辑器
+ */
+export default class ItemTextEditor {
+  private conf: ItemTextEditorConf
+  public $el: HTMLElement
+
+  public $input: HTMLInputElement
+  public $yesBtn: HTMLElement
+  public $noBtn: HTMLElement
+
+  public value: string = ''
+  public allowSubmit = true
+
+  constructor(conf: ItemTextEditorConf) {
+    this.conf = conf
+
+    this.$el = Utils.createElement(
+    `<div class="atk-item-text-editor-layer">
+      <div class="atk-edit-form">
+        <input class="atk-main-input" type="text" placeholder="输入内容..." autocomplete="off" autofocus>
+      </div>
+      <div class="atk-actions">
+        <div class="atk-item atk-yes-btn">
+          <i class="atk-icon atk-icon-yes"></i>
+        </div>
+        <div class="atk-item atk-no-btn">
+          <i class="atk-icon atk-icon-no"></i>
+        </div>
+      </div>
+    </div>`)
+
+    this.$input = this.$el.querySelector('.atk-main-input')!
+    this.$yesBtn = this.$el.querySelector('.atk-yes-btn')!
+    this.$noBtn = this.$el.querySelector('.atk-no-btn')!
+
+    this.$input.value = conf.initValue || ''
+    this.value = conf.initValue || ''
+    if (this.conf.placeholder) this.$input.placeholder = this.conf.placeholder
+
+    this.$input.oninput = () => this.onInput()
+    this.$input.onkeyup = (evt) => {
+      if (evt.key === 'Enter' || evt.keyCode === 13) { // 按下回车键
+        evt.preventDefault()
+        this.submit()
+      }
+    }
+
+    window.setTimeout(() => this.$input.focus(), 80)
+
+    this.$yesBtn.onclick = () => { this.submit() }
+    this.$noBtn.onclick = () => { this.cancel() }
+  }
+
+  public appendTo(parentDOM: HTMLElement) {
+    parentDOM.append(this.$el)
+    return this
+  }
+
+  private onInput() {
+    this.value = this.$input.value
+
+    // 验证器
+    if (this.conf.validator) {
+      const ok = this.conf.validator(this.value)
+      this.setAllowSubmit(ok)
+      if (!ok) {
+        this.$input.classList.add('atk-invalid')
+      } else {
+        this.$input.classList.remove('atk-invalid')
+      }
+    }
+  }
+
+  public setAllowSubmit(allow: boolean) {
+    if (this.allowSubmit === allow) return
+    this.allowSubmit = allow
+    if (!allow) {
+      this.$yesBtn.classList.add('.atk-disabled')
+    } else {
+      this.$yesBtn.classList.remove('.atk-disabled')
+    }
+  }
+
+  public async submit() {
+    if (!this.allowSubmit) return
+
+    if (this.conf.onYes) {
+      let isContinue: any
+      if (this.conf.onYes instanceof (async () => {}).constructor) {
+        isContinue = await this.conf.onYes(this.value)
+      } else {
+        isContinue = this.conf.onYes(this.value)
+      }
+
+      if (isContinue === undefined || isContinue === true) {
+        this.closeEditor()
+      }
+    } else {
+      this.closeEditor()
+    }
+  }
+
+  public async cancel() {
+    if (this.conf.onNo) {
+      let isContinue: any
+      if (this.conf.onNo instanceof (async () => {}).constructor) {
+        isContinue = await this.conf.onNo()
+      } else {
+        isContinue = this.conf.onNo()
+      }
+
+      if (isContinue === undefined || isContinue === true) {
+        this.closeEditor()
+      }
+    } else {
+      this.closeEditor()
+    }
+  }
+
+  public closeEditor() {
+    this.$el.remove()
+  }
+}