♻️ #13 resize

Vanessa219 · Feb 17, 2019 · 08bae70 · 08bae70
1 parent c1e39c6
commit 08bae70
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 64 deletions.
diff --git a/src/ts/hotkey/index.ts b/src/ts/hotkey/index.ts
@@ -2,7 +2,7 @@ import {insertText} from "../editor/index";
 
 export class Hotkey {
     editorElement: HTMLTextAreaElement
-    toolbarElements: any
+    toolbarElements: { [key: string]: HTMLElement }
     options: Options
     hintElement: HTMLElement
 
@@ -35,7 +35,7 @@ export class Hotkey {
                 const hotkeys = menuItem.hotkey.split('-')
                 if ((hotkeys[0] === 'ctrl' || hotkeys[0] === '⌘') && (event.metaKey || event.ctrlKey)) {
                     if (event.key === hotkeys[1]) {
-                        this.toolbarElements[menuItem.name].children[0].click()
+                        (<HTMLElement>this.toolbarElements[menuItem.name].children[0]).click()
                         event.preventDefault()
                         event.stopPropagation()
                     }

diff --git a/src/ts/resize/index.ts b/src/ts/resize/index.ts
@@ -12,32 +12,23 @@ export class Resize {
     }
 
     private bindEvent(vditor: Vditor) {
-        this.element.addEventListener('mousedown', function (event: any) {
+        this.element.addEventListener('mousedown', function (event: MouseEvent) {
 
-            const _document: any = document;
+            const _document = <IEDocument>document;
             const vditorElement = document.getElementById(vditor.id)
-            if (!event) {
-                event = window.event;
-            }
             const y = event.clientY;
             const height = vditorElement.offsetHeight
-            _document.ondragstart = "return false;";
+            _document.ondragstart = () => false;
             _document.onselectstart = "return false;";
-            _document.onselect = "document.selection.empty();";
+            _document.onselect = () => {
+                (<IEDocument>document).selection.empty()
+            };
 
-            // @ts-ignore
-            if (this.setCapture) {
-                // @ts-ignore
-                this.setCapture()
-            } else if (window.captureEvents) {
-                // @ts-ignore
-                window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
+            if (window.captureEvents) {
+                window.captureEvents();
             }
 
-            _document.onmousemove = function (event: any) {
-                if (!event) {
-                    event = window.event
-                }
+            _document.onmousemove = function (event: MouseEvent) {
                 if (vditor.options.resize.position === 'top') {
                     vditorElement.style.height = Math.max(100, height + (y - event.clientY)) + 'px'
                 } else {
@@ -50,11 +41,8 @@ export class Resize {
                     vditor.options.resize.after(vditorElement.offsetHeight - height)
                 }
 
-                if (this.releaseCapture) {
-                    this.releaseCapture();
-                } else if (window.captureEvents) {
-                    // @ts-ignore
-                    window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
+                if (window.captureEvents) {
+                    window.captureEvents();
                 }
                 _document.onmousemove = null;
                 _document.onmouseup = null;

diff --git a/src/ts/types/index.d.ts b/src/ts/types/index.d.ts
@@ -11,11 +11,16 @@ declare module 'turndown-plugin-gfm/lib/turndown-plugin-gfm.es.js'
 
 declare var webkitAudioContext: {
     prototype: AudioContext;
-    new(contextOptions?: AudioContextOptions): AudioContext;
+    new(contextOptions?: AudioContextOptions): AudioContext
 }
 
 interface HTMLInputEvent extends Event {
-    target: HTMLInputElement & EventTarget;
+    target: HTMLInputElement & EventTarget
+}
+
+interface IEDocument extends Document {
+    onselectstart: string | null
+    selection: { empty(): void }
 }
 
 interface I18nLang {
@@ -126,7 +131,7 @@ interface Vditor {
         atUser: { (value: string): Array<HintData> }
         commonEmoji: { [key: string]: string }
         hintDelay: number
-        render: { (): void }
+        render(): void
     }
     upload?: {
         element: HTMLElement

diff --git a/src/ts/util/textareaPosition.ts b/src/ts/util/textareaPosition.ts
@@ -1,54 +1,53 @@
-export const getTextareaPosition = (element:any) => {
+export const getTextareaPosition = (element: HTMLTextAreaElement) => {
     const styleProperties = [
         'direction',
-        'boxSizing',
+        'box-sizing',
         'width',
         'height',
-        'overflowX',
-        'overflowY',
-        'borderTopWidth',
-        'borderRightWidth',
-        'borderBottomWidth',
-        'borderLeftWidth',
-        'borderStyle',
-        'paddingTop',
-        'paddingRight',
-        'paddingBottom',
-        'paddingLeft',
-        'fontStyle',
-        'fontVariant',
-        'fontWeight',
-        'fontStretch',
-        'fontSize',
-        'fontSizeAdjust',
-        'lineHeight',
-        'fontFamily',
-        'textAlign',
-        'textTransform',
-        'textIndent',
-        'textDecoration',
-        'letterSpacing',
-        'wordSpacing',
-        'tabSize',
-        'MozTabSize',
+        'overflow-x',
+        'overflow-y',
+        'border-top-width',
+        'border-right-width',
+        'border-bottom-width',
+        'border-left-width',
+        'border-style',
+        'padding-top',
+        'padding-right',
+        'padding-bottom',
+        'padding-left',
+        'font-style',
+        'font-variant',
+        'font-weight',
+        'font-stretch',
+        'font-size',
+        'text-size-adjust',
+        'line-height',
+        'font-family',
+        'text-align',
+        'text-transform',
+        'text-indent',
+        'text-decoration',
+        'letter-spacing',
+        'word-spacing',
+        'tab-size',
+        'tab-size',
     ]
-    const computed = window.getComputedStyle
-        ? window.getComputedStyle(element)
-        : element.currentStyle
-    let div:HTMLElement = document.querySelector('.vditor-position')
+    const computed = window.getComputedStyle(element)
+    let div: HTMLElement = document.querySelector('.vditor-position')
     if (!div) {
         div = document.createElement('div')
         div.className = 'vditor-position'
         document.body.appendChild(div)
     }
-    let style:any = div.style
+    let style = div.style
     style.whiteSpace = 'pre-wrap'
     style.wordWrap = 'break-word'
     style.position = 'absolute'
     style.overflow = 'hidden'
     style.left = '-100%'
-    styleProperties.forEach(function (prop) {
-        style[prop] = computed[prop]
+    styleProperties.forEach((prop) => {
+        console.log(prop, computed.getPropertyValue(prop))
+        style.setProperty(prop, computed.getPropertyValue(prop))
     })
     div.textContent = element.value.substring(0, element.selectionEnd)
     const span = document.createElement('span')