diff --git a/src/editor/view/EditorView.ts b/src/editor/view/EditorView.ts index ff617f076..82004a053 100644 --- a/src/editor/view/EditorView.ts +++ b/src/editor/view/EditorView.ts @@ -28,7 +28,7 @@ export default class EditorView extends View { const { config, modules } = model; const pfx = config.stylePrefix; const contEl = $(config.el || `body ${config.container}`); - appendStyles(config.cssIcons, { unique: 1, prepand: 1 }); + appendStyles(config.cssIcons, { unique: true, prepand: true }); $el.empty(); if (config.width) contEl.css('width', config.width); diff --git a/src/utils/mixins.js b/src/utils/mixins.ts similarity index 68% rename from src/utils/mixins.js rename to src/utils/mixins.ts index eea59a0a1..a5db08d0e 100644 --- a/src/utils/mixins.js +++ b/src/utils/mixins.ts @@ -1,17 +1,19 @@ import { keys, isUndefined, isElement, isArray } from 'underscore'; -export const isDef = value => typeof value !== 'undefined'; +export const isDef = (value: any) => typeof value !== 'undefined'; export const hasWin = () => typeof window !== 'undefined'; export const getGlobal = () => typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : global; -export const toLowerCase = str => (str || '').toLowerCase(); +export const toLowerCase = (str: string) => (str || '').toLowerCase(); const elProt = hasWin() ? window.Element.prototype : {}; +// @ts-ignore const matches = elProt.matches || elProt.webkitMatchesSelector || elProt.mozMatchesSelector || elProt.msMatchesSelector; +// @ts-ignore export const getUiClass = (em, defCls) => { const { stylePrefix, customUI } = em.getConfig(); return [customUI && `${stylePrefix}cui`, defCls].filter(i => i).join(' '); @@ -21,7 +23,7 @@ export const getUiClass = (em, defCls) => { * Import styles asynchronously * @param {String|Array} styles */ -const appendStyles = (styles, opts = {}) => { +const appendStyles = (styles: {}, opts: { unique?: boolean, prepand?: boolean } = {}) => { const stls = isArray(styles) ? [...styles] : [styles]; if (stls.length) { @@ -55,8 +57,8 @@ const appendStyles = (styles, opts = {}) => { * shallowDiff(a, b); * // -> {baz: 2, faz: null, bar: ''}; */ -const shallowDiff = (objOrig, objNew) => { - const result = {}; +const shallowDiff = (objOrig: Record, objNew: Record) => { + const result: Record = {}; const keysNew = keys(objNew); for (let prop in objOrig) { @@ -85,35 +87,35 @@ const shallowDiff = (objOrig, objNew) => { return result; }; -const on = (el, ev, fn, opts) => { - ev = ev.split(/\s+/); +const on = (el: HTMLElement | HTMLElement[], ev: string, fn: () => void, opts?: AddEventListenerOptions) => { + const evs = ev.split(/\s+/); el = el instanceof Array ? el : [el]; - for (let i = 0; i < ev.length; ++i) { - el.forEach(elem => elem && elem.addEventListener(ev[i], fn, opts)); + for (let i = 0; i < evs.length; ++i) { + el.forEach(elem => elem && elem.addEventListener(evs[i], fn, opts)); } }; -const off = (el, ev, fn, opts) => { - ev = ev.split(/\s+/); +const off = (el: HTMLElement | HTMLElement[], ev: string, fn: () => void, opts?: AddEventListenerOptions) => { + const evs = ev.split(/\s+/); el = el instanceof Array ? el : [el]; - for (let i = 0; i < ev.length; ++i) { - el.forEach(elem => elem && elem.removeEventListener(ev[i], fn, opts)); + for (let i = 0; i < evs.length; ++i) { + el.forEach(elem => elem && elem.removeEventListener(evs[i], fn, opts)); } }; -const getUnitFromValue = value => { +const getUnitFromValue = (value: any) => { return value.replace(parseFloat(value), ''); }; -const upFirst = value => value[0].toUpperCase() + value.toLowerCase().slice(1); +const upFirst = (value: string) => value[0].toUpperCase() + value.toLowerCase().slice(1); -const camelCase = value => { +const camelCase = (value: string) => { return value.replace(/-./g, x => x[1].toUpperCase()); }; -const normalizeFloat = (value, step = 1, valueDef = 0) => { +const normalizeFloat = (value: any, step = 1, valueDef = 0) => { let stepDecimals = 0; if (isNaN(value)) return valueDef; value = parseFloat(value); @@ -126,7 +128,7 @@ const normalizeFloat = (value, step = 1, valueDef = 0) => { return stepDecimals ? parseFloat(value.toFixed(stepDecimals)) : value; }; -const hasDnd = em => { +const hasDnd = (em: any) => { return 'draggable' in document.createElement('i') && (em ? em.get('Config').nativeDnD : 1); }; @@ -135,10 +137,12 @@ const hasDnd = em => { * @param {HTMLElement|Component} el Component or HTML element * @return {HTMLElement} */ -const getElement = el => { +const getElement = (el: HTMLElement) => { if (isElement(el) || isTextNode(el)) { return el; + // @ts-ignore } else if (el && el.getEl) { + // @ts-ignore return el.getEl(); } }; @@ -148,23 +152,23 @@ const getElement = el => { * @param {HTMLElement} el * @return {Boolean} */ -const isTextNode = el => el && el.nodeType === 3; +const isTextNode = (el: HTMLElement) => el && el.nodeType === 3; /** * Check if element is a comment node * @param {HTMLElement} el * @return {Boolean} */ -export const isCommentNode = el => el && el.nodeType === 8; +export const isCommentNode = (el: HTMLElement) => el && el.nodeType === 8; /** * Check if element is a comment node * @param {HTMLElement} el * @return {Boolean} */ -export const isTaggableNode = el => el && !isTextNode(el) && !isCommentNode(el); +export const isTaggableNode = (el: HTMLElement) => el && !isTextNode(el) && !isCommentNode(el); -export const find = (arr, test) => { +export const find = (arr: any[], test: (item: any, i: number, arr: any[]) => boolean) => { let result = null; arr.some((el, i) => (test(el, i, arr) ? ((result = el), 1) : 0)); return result; @@ -180,7 +184,7 @@ export const escape = (str = '') => { .replace(/`/g, '`'); }; -export const deepMerge = (...args) => { +export const deepMerge = (...args: Record[]) => { const target = { ...args[0] }; for (let i = 1; i < args.length; i++) { @@ -206,7 +210,7 @@ export const deepMerge = (...args) => { * @param {HTMLElement|Component} el Component or HTML element * @return {Component} */ -const getModel = (el, $) => { +const getModel = (el: any, $?: any) => { let model = el; if (!$ && el && el.__cashData) { model = el.__cashData.model; @@ -216,7 +220,7 @@ const getModel = (el, $) => { return model; }; -const getElRect = el => { +const getElRect = (el: HTMLElement) => { const def = { top: 0, left: 0, @@ -241,26 +245,28 @@ const getElRect = el => { * @param {Event} ev * @return {Event} */ -const getPointerEvent = ev => (ev.touches && ev.touches[0] ? ev.touches[0] : ev); +const getPointerEvent = (ev: Event) => + // @ts-ignore + (ev.touches && ev.touches[0] ? ev.touches[0] : ev); /** * Get cross-browser keycode * @param {Event} ev * @return {Number} */ -const getKeyCode = ev => ev.which || ev.keyCode; -const getKeyChar = ev => String.fromCharCode(getKeyCode(ev)); -const isEscKey = ev => getKeyCode(ev) === 27; -const isEnterKey = ev => getKeyCode(ev) === 13; -const isObject = val => val !== null && !Array.isArray(val) && typeof val === 'object'; -const isEmptyObj = val => Object.keys(val).length <= 0; - -const capitalize = str => str && str.charAt(0).toUpperCase() + str.substring(1); -const isComponent = obj => obj && obj.toHTML; -const isRule = obj => obj && obj.toCSS; - -const getViewEl = el => el.__gjsv; -const setViewEl = (el, view) => { +const getKeyCode = (ev: KeyboardEvent) => ev.which || ev.keyCode; +const getKeyChar = (ev: KeyboardEvent) => String.fromCharCode(getKeyCode(ev)); +const isEscKey = (ev: KeyboardEvent) => getKeyCode(ev) === 27; +const isEnterKey = (ev: KeyboardEvent) => getKeyCode(ev) === 13; +const isObject = (val: any) => val !== null && !Array.isArray(val) && typeof val === 'object'; +const isEmptyObj = (val: Record) => Object.keys(val).length <= 0; + +const capitalize = (str: string) => str && str.charAt(0).toUpperCase() + str.substring(1); +const isComponent = (obj: any) => obj && obj.toHTML; +const isRule = (obj: any) => obj && obj.toCSS; + +const getViewEl = (el: any) => el.__gjsv; +const setViewEl = (el: any, view: any) => { el.__gjsv = view; };