♻️ #13 vditor types

Vanessa219 · Feb 17, 2019 · a9a605e · a9a605e
1 parent f0b3a4e
commit a9a605e
Show file tree

Hide file tree

Showing 9 changed files with 64 additions and 31 deletions.
diff --git a/src/index.ts b/src/index.ts
@@ -13,7 +13,7 @@ import {UploadClass} from "./ts/upload/index";
 
 class VditorClass {
     readonly version: string;
-    vditor: any
+    vditor: Vditor
 
     constructor(id: string, options?: Options) {
         this.version = VDITOR_VERSION;
@@ -40,10 +40,12 @@ class VditorClass {
             this.vditor.resize = resize
         }
 
-        const toolbar = new Toolbar(this.vditor)
-        this.vditor.toolbar = toolbar
+        if (mergedOptions.toolbar) {
+            const toolbar: Toolbar = new Toolbar(this.vditor)
+            this.vditor.toolbar = toolbar
+        }
 
-        if (toolbar.elements.preview) {
+        if (this.vditor.toolbar.elements.preview) {
             const preview = new Preview(this.vditor)
             this.vditor.preview = preview
         }
@@ -55,7 +57,7 @@ class VditorClass {
 
         new Ui(this.vditor)
 
-        if (this.vditor.options.atUser || this.vditor.toolbar.elements.emoji) {
+        if (this.vditor.options.hint.at || this.vditor.toolbar.elements.emoji) {
             const hint = new Hint(this.vditor)
             this.vditor.hint = hint
         }
@@ -94,7 +96,7 @@ class VditorClass {
     }
 
     getSelection() {
-       return this.vditor.editor.element.value.substring(this.vditor.editor.element.selectionStart, this.vditor.editor.element.selectionEnd)
+        return this.vditor.editor.element.value.substring(this.vditor.editor.element.selectionStart, this.vditor.editor.element.selectionEnd)
     }
 
     setValue(value: string) {

diff --git a/src/ts/editor/index.ts b/src/ts/editor/index.ts
@@ -116,10 +116,12 @@ class Editor {
                 vditor.options.focus(this.element.value)
             }
             if (vditor.toolbar.elements.emoji && vditor.toolbar.elements.emoji.children[1]) {
-                vditor.toolbar.elements.emoji.children[1].style.display = 'none'
+                const emojiPanel = <HTMLElement>vditor.toolbar.elements.emoji.children[1]
+                emojiPanel.style.display = 'none'
             }
             if (vditor.toolbar.elements.headings && vditor.toolbar.elements.headings.children[1]) {
-                vditor.toolbar.elements.headings.children[1].style.display = 'none'
+                const headingsPanel = <HTMLElement>vditor.toolbar.elements.headings.children[1]
+                headingsPanel.style.display = 'none'
             }
         })
 

diff --git a/src/ts/hint/index.ts b/src/ts/hint/index.ts
@@ -1,13 +1,12 @@
 import {getTextareaPosition} from "../util/textareaPosition";
 import {insertText} from "../editor/index";
-import {allEmoji} from "../emoji/allEmoji";
 
 export class Hint {
     timeId: number
     editorElement: HTMLTextAreaElement
     element: HTMLUListElement
-    atUser: { (value: string): Array<any> }
-    commonEmoji: any
+    atUser: { (value: string): Array<HintData> }
+    commonEmoji: {  [key: string]: string  }
     hintDelay: number
 
     constructor(vditor: Vditor) {
@@ -98,7 +97,7 @@ export class Hint {
         return key
     }
 
-    private genHTML(data: Array<any>, key: string) {
+    private genHTML(data: Array<HintData>, key: string) {
         if (data.length === 0) {
             this.element.style.display = 'none'
             return

diff --git a/src/ts/toolbar/Emoji.ts b/src/ts/toolbar/Emoji.ts
@@ -38,7 +38,8 @@ export class Emoji extends MenuItemClass {
             } else {
                 emojiPanelElement.style.display = 'block'
                 if (vditor.toolbar.elements.headings) {
-                    vditor.toolbar.elements.headings.children[1].style.display = 'none'
+                    const headingsPanel = <HTMLElement>vditor.toolbar.elements.headings.children[1]
+                    headingsPanel.style.display = 'none'
                 }
             }
         })

diff --git a/src/ts/toolbar/Fullscreen.ts b/src/ts/toolbar/Fullscreen.ts
@@ -16,7 +16,7 @@ export class Fullscreen extends MenuItemClass {
                 this.innerHTML = menuItem.icon || fullscreenSVG
                 vditorElement.className = vditorElement.className.replace(' vditor--fullscreen', '')
                 Object.keys(vditor.toolbar.elements).forEach((key) => {
-                    const svgElement = vditor.toolbar.elements[key].firstChild
+                    const svgElement  = <HTMLElement>vditor.toolbar.elements[key].firstChild
                     if (svgElement) {
                         svgElement.className = svgElement.className.replace('__s', '__n')
                     }
@@ -25,7 +25,7 @@ export class Fullscreen extends MenuItemClass {
                 this.innerHTML = menuItem.icon || contractSVG
                 vditorElement.className = vditorElement.className + ' vditor--fullscreen'
                 Object.keys(vditor.toolbar.elements).forEach((key) => {
-                    const svgElement = vditor.toolbar.elements[key].firstChild
+                    const svgElement = <HTMLElement>vditor.toolbar.elements[key].firstChild
                     if (svgElement) {
                         svgElement.className = svgElement.className.replace('__n', '__s')
                     }

diff --git a/src/ts/toolbar/Headings.ts b/src/ts/toolbar/Headings.ts
@@ -30,7 +30,8 @@ export class Headings extends MenuItemClass {
             } else {
                 headingsPanelElement.style.display = 'block'
                 if (vditor.toolbar.elements.emoji) {
-                    vditor.toolbar.elements.emoji.children[1].style.display = 'none'
+                    const panel = <HTMLElement>vditor.toolbar.elements.emoji.children[1]
+                    panel.style.display = 'none'
                 }
             }
         })

diff --git a/src/ts/toolbar/Record.ts b/src/ts/toolbar/Record.ts
@@ -31,7 +31,7 @@ export class Record extends MenuItemClass {
                     }
                     mediaRecorder.startRecordingNewWavFile()
                     vditor.upload.element.children[0].innerHTML = i18n[vditor.options.lang].recoding
-                    vditor.upload.element.style.opacity = 1
+                    vditor.upload.element.style.opacity = '1'
                     vditor.upload.element.className = 'vditor-upload vditor-upload--tip'
                     vditor.editor.element.setAttribute('disabled', 'disabled')
                 }).catch((err: ErrorEvent) => {
@@ -48,7 +48,7 @@ export class Record extends MenuItemClass {
                 uploadFiles(vditor, [file])
             } else {
                 vditor.upload.element.children[0].innerHTML = i18n[vditor.options.lang].recoding
-                vditor.upload.element.style.opacity = 1
+                vditor.upload.element.style.opacity = '1'
                 vditor.upload.element.className = 'vditor-upload vditor-upload--tip'
                 vditor.editor.element.setAttribute('disabled', 'disabled')
                 mediaRecorder.startRecordingNewWavFile()

diff --git a/src/ts/types/index.d.ts b/src/ts/types/index.d.ts
@@ -45,11 +45,16 @@ interface Preview {
     url?: string
 }
 
+interface HintData {
+    html: string,
+    value: string
+}
+
 interface Hint {
     emojiTail?: string
     delay?: number
-    emoji?: any
-    at?: { (value: string): Array<any> }
+    emoji?: { [key: string]: string }
+    at?: { (value: string): Array<HintData> }
 }
 
 interface Resize {
@@ -83,12 +88,34 @@ interface Vditor {
     id: string
     mdTimeoutId: number
     options: Options
-    timeId: number
-    toolbar?: any
-    preview?: any
-    editor?: any
-    counter?: any
-    resize?: any
-    hint?: any
-    upload?: any
+    toolbar?: {
+        elements?: { [key: string]: HTMLDivElement }
+    }
+    preview?: {
+        element: HTMLElement
+        render: { (vditor: Vditor, value?: string): void }
+    },
+    editor?: {
+        element: HTMLTextAreaElement
+    },
+    counter?: {
+        element: HTMLElement
+        render: { (length: number, counter: number): void }
+    },
+    resize?: {
+        element: HTMLElement
+    },
+    hint?: {
+        timeId: number
+        editorElement: HTMLTextAreaElement
+        element: HTMLUListElement
+        atUser: { (value: string): Array<HintData> }
+        commonEmoji: { [key: string]: string }
+        hintDelay: number
+        render: { (): void }
+    }
+    upload?: {
+        element: HTMLElement
+        isUploading: boolean
+    }
 }
diff --git a/src/ts/upload/index.ts b/src/ts/upload/index.ts
@@ -122,7 +122,7 @@ const uploadFiles = (vditor: Vditor, files: any, element?: HTMLInputElement) =>
                     genUploadedLabel(vditor.editor.element, xhr.responseText, vditor.options, vditor.upload.element)
                 }
 
-                vditor.upload.element.style.opacity = 0
+                vditor.upload.element.style.opacity = '0'
             } else {
                 if (vditor.options.upload.error) {
                     vditor.options.upload.error(xhr.responseText)
@@ -138,8 +138,9 @@ const uploadFiles = (vditor: Vditor, files: any, element?: HTMLInputElement) =>
             return
         }
         const progress = event.loaded / event.total * 100
-        vditor.upload.element.style.opacity = 1
-        vditor.upload.element.children[0].style.width = progress + '%'
+        vditor.upload.element.style.opacity = '1'
+        const progressBar = <HTMLElement>vditor.upload.element.children[0]
+        progressBar.style.width = progress + '%'
     }
     xhr.send(formData)
 }