import './style/main.less' ; import Context from './context' ; import ArtalkConfig from '~/types/artalk-config' ; import defaults from './defaults' ; import CheckerLauncher from './lib/checker' ; import Editor from './components/editor' ; import List from './components/list' ; import Sidebar from './components/sidebar' ; import { GetLayerWrap } from './components/layer' ; import { EventPayloadMap , Handler } from '~/types/event' ; link export default class Artalk { public static readonly defaults : ArtalkConfig = defaults ; public ctx : Context ; public conf : ArtalkConfig ; public $root : HTMLElement ; public checkerLauncher : CheckerLauncher ; public editor : Editor ; public list : List ; public sidebar : Sidebar ; constructor ( customConf ) { this . conf = { ... Artalk . defaults , ... customConf } ; this . conf . server = this . conf . server . replace ( /\/$/ , '' ) ; if ( ! this . conf . pageKey ) { this . conf . pageKey = `${ window . location . protocol }//${ window . location . host }${ window . location . pathname }` ; } try { const $root = document . querySelector < HTMLElement > ( this . conf . el ) ; if ( ! $root ) throw Error ( `Sorry, target element "${ this . conf . el }" was not found.` ) ; this . $root = $root ; } catch ( e ) { console . error ( e ) ; throw new Error ( 'Please check your Artalk `el` config.' ) ; } this . ctx = new Context ( this . $root , this . conf ) ; this . $root . classList . add ( 'artalk' ) ; this . $root . innerHTML = '' ; this . initDarkMode ( ) ; this . checkerLauncher = new CheckerLauncher ( this . ctx ) ; this . editor = new Editor ( this . ctx ) ; this . $root . appendChild ( this . editor . $el ) ; this . list = new List ( this . ctx ) ; this . $root . appendChild ( this . list . $el ) ; this . sidebar = new Sidebar ( this . ctx ) ; this . $root . appendChild ( this . sidebar . $el ) ; this . list . fetchComments ( 0 ) ; this . initEventBind ( ) ; } /** 事件绑定 · 初始化 */ private initEventBind ( ) { window . addEventListener ( 'hashchange' , ( ) => { this . list . checkGoToCommentByUrlHash ( ) ; } ) ; this . ctx . on ( 'check-admin-show-el' , ( ) => { const items = [ ] ; this . $root . querySelectorAll < HTMLElement > ( `[atk-only-admin-show]` ) . forEach ( item => items . push ( item ) ) ; const { $wrap : $layerWrap } = GetLayerWrap ( this . ctx ) ; if ( $layerWrap ) $layerWrap . querySelectorAll < HTMLElement > ( `[atk-only-admin-show]` ) . forEach ( item => items . push ( item ) ) ; items . forEach ( ( $item ) => { if ( this . ctx . user . data . isAdmin ) $item . classList . remove ( 'atk-hide' ) ; else $item . classList . add ( 'atk-hide' ) ; } ) ; } ) ; this . ctx . on ( 'user-changed' , ( ) => { this . ctx . trigger ( 'check-admin-show-el' ) ; this . ctx . trigger ( 'list-refresh-ui' ) ; } ) ; } /** 重新加载 */ public reload ( ) { this . list . fetchComments ( 0 ) ; } /** 暗黑模式 · 初始化 */ public initDarkMode ( ) { const darkModeClassName = 'atk-dark-mode' ; if ( this . conf . darkMode ) { this . $root . classList . add ( darkModeClassName ) ; } else { this . $root . classList . remove ( darkModeClassName ) ; } const { $wrap : $layerWrap } = GetLayerWrap ( this . ctx ) ; if ( $layerWrap ) { if ( this . conf . darkMode ) { $layerWrap . classList . add ( darkModeClassName ) ; } else { $layerWrap . classList . remove ( darkModeClassName ) ; } } } /** 暗黑模式 · 设定 */ public setDarkMode ( darkMode ) { this . ctx . conf . darkMode = darkMode ; this . initDarkMode ( ) ; } /** 监听事件 */ public on < K extends keyof EventPayloadMap > ( name , handler ) { this . ctx . on ( name , handler , 'external' ) ; } /** 解除监听事件 */ public off < K extends keyof EventPayloadMap > ( name , handler ) { this . ctx . off ( name , handler , 'external' ) ; } /** 触发事件 */ public trigger < K extends keyof EventPayloadMap > ( name , payload ? ) { this . ctx . trigger ( name , payload , 'external' ) ; } }