diff --git a/client/client.js b/client/client.js index f3c3be07..4f5e980c 100644 --- a/client/client.js +++ b/client/client.js @@ -5,8 +5,8 @@ const Emitify = require('emitify/legacy'); const inherits = require('inherits'); const rendy = require('rendy/legacy'); -const wraptile = require('wraptile/legacy'); const exec = require('execon'); +const load = require('load.js'); const {kebabToCamelCase} = require('../common/util'); const isDev = process.env.NODE_ENV === 'development'; @@ -35,6 +35,11 @@ inherits(CloudCmdProto, Emitify); module.exports = new CloudCmdProto(DOM); +load.addErrorListener((e, src) => { + const msg = `file ${src} could not be loaded`; + Images.show.error(msg); +}); + function CloudCmdProto(DOM) { let Key; let Listeners; @@ -132,13 +137,9 @@ function CloudCmdProto(DOM) { exec.with(CloudCmd.route, location.hash), ], noop); - const { - load, - } = DOM; - const funcBefore = (callback) => { const src = prefix + CloudCmd.DIRCLIENT_MODULES + 'polyfill.js'; - load.js(src, callback)); + load.js(src, callback); }; CloudCmd.PREFIX = prefix; @@ -168,14 +169,14 @@ function CloudCmdProto(DOM) { const prefix = CloudCmd.PREFIX; const name = prefix + '/dist/cloudcmd.common.css'; - DOM.load.css(name, callback); + load.css(name, callback); } function loadPlugins(callback) { const prefix = CloudCmd.PREFIX; const plugins = prefix + '/plugins.js'; - DOM.load.js(plugins, callback); + load.js(plugins, callback); } this.join = (urls) => { diff --git a/client/cloudcmd.js b/client/cloudcmd.js index 8c1e754d..be53ed08 100644 --- a/client/cloudcmd.js +++ b/client/cloudcmd.js @@ -7,6 +7,7 @@ require('../css/columns/name-size.css'); const {promisify} = require('es6-promisify'); const wraptile = require('wraptile/legacy'); +const load = require('load.js'); const { registerSW, @@ -49,7 +50,7 @@ function getPrefix(prefix) { const onUpdateFound = wraptile(async (config) => { const {DOM} = window; const prefix = getPrefix(config.prefix); - const js = promisify(DOM.load.js); + const js = promisify(load.js); await js(`${prefix}/dist/cloudcmd.common.js`); await js(`${prefix}/dist/cloudcmd.js`); diff --git a/client/dom/current-file.js b/client/dom/current-file.js index 693bec2e..56084eda 100644 --- a/client/dom/current-file.js +++ b/client/dom/current-file.js @@ -4,6 +4,7 @@ /* global CloudCmd */ const btoa = require('../../common/btoa'); +const createElement = require('@cloudcmd/create-element'); const { encode, @@ -264,12 +265,10 @@ module.exports.isCurrentFile = (currentFile) => { module.exports.setTitle = (name) => { if (!Title) - Title = DOM.getByTag('title')[0] || - DOM.load({ - name : 'title', - innerHTML : name, - parentElement : document.head - }); + Title = DOM.getByTag('title')[0] || createElement('title', { + innerHTML: name, + parent: document.head + }); Title.textContent = name; diff --git a/client/dom/images.js b/client/dom/images.js index 42b9e348..9e9c3fe8 100644 --- a/client/dom/images.js +++ b/client/dom/images.js @@ -2,6 +2,8 @@ 'use strict'; +const createElement = require('@cloudcmd/create-element'); + const Images = module.exports; const LOADING = 'loading'; @@ -33,14 +35,12 @@ function isSVG() { return /SVGAnimate/.test(name); } - function getElement() { - return DOM.load({ - name : 'span', - id : 'js-status-image', - className : 'icon', - attribute : 'data-progress', - notAppend : true + return createElement('span', { + id: 'js-status-image', + className: 'icon', + dataName: 'progress', + notAppend: true }); } diff --git a/client/dom/load-remote.js b/client/dom/load-remote.js index 525fe63b..2b1578bc 100644 --- a/client/dom/load-remote.js +++ b/client/dom/load-remote.js @@ -6,12 +6,11 @@ const exec = require('execon'); const rendy = require('rendy/legacy'); const itype = require('itype/legacy'); const wraptile = require('wraptile/legacy'); +const load = require('load.js'); const {findObjByNameInArr} = require('../../common/util'); -const load = require('./load'); const Files = require('./files'); - const parallel = wraptile(load.parallel); module.exports = (name, options, callback = options) => { diff --git a/client/dom/load.js b/client/dom/load.js index f429e594..022b01e4 100644 --- a/client/dom/load.js +++ b/client/dom/load.js @@ -5,126 +5,8 @@ const jonny = require('jonny/legacy'); const Emitify = require('emitify/legacy'); const exec = require('execon'); const Images = require('./images'); -const Events = require('./events'); -const {getExt} = require('../../common/util'); - -module.exports = load; module.exports.getIdBySrc = getIdBySrc; -module.exports.ext = ext; - -/** - * Функция создаёт элемент и загружает файл с src. - * - * @param params = { - * name, - название тэга - * src', - путь к файлу - * func, - обьект, содержаий одну из функций - * или сразу две onload и onerror - * {onload: function() {}, onerror: function();} - * style, - * id, - * element, - * async, - true by default - * inner: 'id{color:red, }, - * class, - * notAppend - false by default - * - */ -function load(params) { - const { - src, - id = getIdBySrc(params.src), - func, - name, - async, - inner, - style, - parent = document.body, - className, - attribute, - notAppend, - } = params; - - let element = document.getElementById(id); - - if (element) { - exec(func); - return element; - } - - element = document.createElement(name); - - const funcError = () => { - const msg = `file ${src} could not be loaded`; - const error = new Error(msg); - - parent.removeChild(element); - - Images.show.error(msg); - - const callback = func && func.onerror || func.onload || func; - - exec(callback, error); - }; - - const funcLoad = () => { - const callback = func && func.onload || func; - - Events.remove('error', element, funcError); - - exec(callback); - }; - - if (/^(script|link)$/.test(name)) - Events.addOnce('load', element, funcLoad) - .addError(element, funcError); - - if (id) - element.id = id; - - if (className) - element.className = className; - - if (src) { - if (name !== 'link') { - element.src = src; - } else { - element.href = src; - element.rel = 'stylesheet'; - } - } - - if (attribute) { - const type = itype(attribute); - - switch(type) { - case 'string': - element.setAttribute(attribute, ''); - break; - - case 'object': - Object.keys(attribute).forEach((name) => { - element.setAttribute(name, attribute[name]); - }); - break; - } - } - - if (style) - element.style.cssText = style; - - if (async && name === 'script' || async === undefined) - element.async = true; - - if (!notAppend) - parent.appendChild(element); - - if (inner) - element.innerHTML = inner; - - return element; -} /** * Function gets id by src @@ -246,116 +128,3 @@ module.exports.put = (url, body) => { return emitter; }; -function ext(src, func) { - switch (getExt(src)) { - case '.js': - return load.js(src, func); - - case '.css': - return load.css(src, func); - - default: - return load({ - src, - func, - }); - } -} - -/** - * create elements and load them to DOM-tree - * one-by-one - * - * @param params - * @param callback - */ -load.series = (params, callback) => { - if (!params) - return load; - - const funcs = params - .map((url) => ext.bind(null, url)) - .concat(callback); - - exec.series(funcs); - - return load; -}; - -/** - * improve callback of funcs so - * we pop number of function and - * if it's last we call pCallBack - * - * @param params - * @param callback - onload function - */ -load.parallel = (params, callback) => { - if (!params) - return load; - - const funcs = params.map((url) => { - return ext.bind(null, url); - }); - - exec.parallel(funcs, callback); - - return load; -}; - -/** - * Функция загружает js-файл - * - * @param src - * @param func - */ -load.js = (src, func) => { - const name = 'script'; - - return load({ - name, - src, - func, - }); -}, - -load.css = (src, func) => { - const name = 'link'; - const {head:parent} = document; - - return load({ - name, - src, - parent, - func - }); -}; - -/** - * Функция создаёт елемент style и записывает туда стили - * @param params - структура параметров, заполняеться таким - * образом: {src: ' ',func: '', id: '', element: '', inner: ''} - * все параметры опциональны - */ -load.style = (params) => { - const { - id, - src, - name = 'style', - func, - inner, - parent = document.head, - element, - } = params; - - return load({ - id, - src, - func, - name, - inner, - parent, - element, - }); -}; - diff --git a/client/load-module.js b/client/load-module.js index 17fcf48b..130d1de6 100644 --- a/client/load-module.js +++ b/client/load-module.js @@ -3,14 +3,14 @@ /* global CloudCmd */ const exec = require('execon'); -const {promisify} = require('es6-promisify'); const tryToCatch = require('try-to-catch/legacy'); +const {promisify} = require('es6-promisify'); +const loadJS = promisify(require('load.js').js); + const { kebabToCamelCase, } = require('../common/util'); -const loadJS = promisify(require('./dom/load').js); - /** * function load modules * @params = {name, path, func, dobefore, arg} diff --git a/client/modules/cloud.js b/client/modules/cloud.js index 0f31b85f..32d83a1d 100644 --- a/client/modules/cloud.js +++ b/client/modules/cloud.js @@ -5,10 +5,11 @@ const exec = require('execon'); const currify = require('currify/legacy'); const {promisify} = require('es6-promisify'); +const loadJS = require('load.js').js; const {log} = CloudCmd; -const load = require('../dom/load'); +const {ajax} = require('../dom/load'); const Files = require('../dom/files'); const Images = require('../dom/images'); @@ -45,7 +46,7 @@ function _upload(callback, file) { const responseType = 'arraybuffer'; const success = exec.with(callback, filename); - load.ajax({ + ajax({ url, responseType, success, @@ -55,7 +56,7 @@ function _upload(callback, file) { const loadFiles = promisify((callback) => { const js = '//api.filepicker.io/v2/filepicker.js'; - load.js(js, () => { + loadJS(js, () => { Files.get('modules', (error, modules) => { const {key} = modules.data.FilePicker; diff --git a/client/modules/config.js b/client/modules/config.js index 03d68d5b..30c9c6c6 100644 --- a/client/modules/config.js +++ b/client/modules/config.js @@ -10,6 +10,8 @@ const currify = require('currify/legacy'); const wraptile = require('wraptile/legacy'); const squad = require('squad/legacy'); const {promisify} = require('es6-promisify'); +const load = require('load.js'); +const createElement = require('@cloudcmd/create-element'); const input = require('../input'); const Images = require('../dom/images'); @@ -117,9 +119,7 @@ function show() { const prefix = CloudCmd.PREFIX; const funcs = [ exec.with(Files.get, 'config-tmpl'), - exec.with(DOM.load.parallel, [ - prefix + '/dist/config.css' - ]) + exec.with(load.css, prefix + '/dist/config.css'), ]; if (Loading) @@ -148,15 +148,11 @@ function fillTemplate(error, template) { obj[obj.columns + '-selected'] = 'selected'; delete obj.columns; - const inner = rendy(Template, obj); + const innerHTML = rendy(Template, obj); - Element = DOM.load({ - name : 'form', + Element = createElement('form', { className : 'config', - inner, - attribute : { - 'data-name': 'js-config' - } + innerHTML, }); const inputs = document.querySelectorAll('input, select', Element); @@ -241,12 +237,10 @@ function onNameChange(name) { function onKey({keyCode, target}) { switch (keyCode) { case Key.ESC: - hide(); - break; + return hide(); case Key.ENTER: - onChange(target); - break; + return onChange(target); } } diff --git a/client/modules/create-element.js b/client/modules/create-element.js deleted file mode 100644 index 0255f8ae..00000000 --- a/client/modules/create-element.js +++ /dev/null @@ -1,40 +0,0 @@ -'use strict'; - -const query = (a) => document.querySelector(`[data-name="${a}"]`); -const isStr = (a) => typeof a === 'string'; - -module.exports = (name, {innerHTML, className, dataName, textContent, parent} = {}) => { - parent = parent || document.body; - className = className || ''; - dataName = dataName || ''; - - const elFound = isElementPresent(dataName); - - if (elFound) - return elFound; - - const el = document.createElement(name); - - if (isStr(innerHTML)) - el.innerHTML = innerHTML; - - if (isStr(textContent)) - el.textContent = textContent; - - el.className = className; - el.dataset.name = dataName; - - parent.appendChild(el); - - return el; -}; - -module.exports.isElementPresent = isElementPresent; - -function isElementPresent(dataName) { - if (!dataName) - return; - - return query(dataName); -} - diff --git a/client/modules/edit.js b/client/modules/edit.js index 0b21c23e..cb89e837 100644 --- a/client/modules/edit.js +++ b/client/modules/edit.js @@ -3,8 +3,8 @@ 'use strict'; const {promisify} = require('es6-promisify'); - -const load = require('../dom/load'); +const createElement = require('@cloudcmd/create-element'); +const load = require('load.js'); const {MAX_FILE_SIZE: maxSize} = require('../../common/cloudfunc'); const {time, timeEnd} = require('../../common/util'); @@ -28,15 +28,14 @@ const ConfigView = { }; module.exports.init = async () => { - const element = createElement(); + const element = create(); await CloudCmd.View(); await loadFiles(element); }; -function createElement() { - const element = load({ - name: 'div', +function create() { + const element = createElement('div', { style: 'width : 100%;' + 'height : 100%;' + diff --git a/client/modules/konsole.js b/client/modules/konsole.js index d68437ba..d50e3a79 100644 --- a/client/modules/konsole.js +++ b/client/modules/konsole.js @@ -10,6 +10,9 @@ CloudCmd.Konsole = exports; const exec = require('execon'); const {promisify} = require('es6-promisify'); const currify = require('currify/legacy'); +const loadJS = require('load.js').js; +const createElement = require('@cloudcmd/create-element'); + const Images = require('../dom/images'); const { Dialog, @@ -85,9 +88,8 @@ const create = promisify((callback) => { socketPath: CloudCmd.PREFIX, }; - Element = DOM.load({ - name : 'div', - className : 'console' + Element = createElement('div', { + className: 'console', }); konsole = Console(Element, options, (spawn) => { @@ -136,7 +138,7 @@ const load = promisify((callback) => { const prefix = getPrefix(); const url = prefix + '/console.js'; - DOM.load.js(url, (error) => { + loadJS(url, (error) => { if (error) return Dialog.alert(TITLE, error.message); diff --git a/client/modules/markdown.js b/client/modules/markdown.js index 40968f58..333dc4d3 100644 --- a/client/modules/markdown.js +++ b/client/modules/markdown.js @@ -4,8 +4,9 @@ CloudCmd.Markdown = exports; +const createElement = require('@cloudcmd/create-element'); + const Images = require('../dom/images'); -const load = require('../dom/load'); const {Markdown} = require('../dom/rest'); module.exports.init = async () => { @@ -32,18 +33,15 @@ function show(name, options = {}) { if (relative) name += relativeQuery; - Markdown.read(name, (error, inner) => { - const name = 'div'; + Markdown.read(name, (error, innerHTML) => { const className = 'help'; - const div = load({ - name, + const div = createElement('div', { className, - inner, + innerHTML, }); Images.hide(); - CloudCmd.View.show(div); }); } diff --git a/client/modules/menu.js b/client/modules/menu.js index 5dd21437..c1b88a47 100644 --- a/client/modules/menu.js +++ b/client/modules/menu.js @@ -5,9 +5,10 @@ const exec = require('execon'); const wrap = require('wraptile/legacy'); const supermenu = require('supermenu'); +const createElement = require('@cloudcmd/create-element'); const {FS} = require('../../common/cloudfunc'); -const load = require('../dom/load'); +const {getIdBySrc} = require('../dom/load'); const RESTful = require('../dom/rest'); const config = CloudCmd.config; @@ -271,7 +272,7 @@ function download(type) { * and all other characters, like "%" */ const encodedPath = encodeURI(path).replace(/#/g, '%23'); - const id = load.getIdBySrc(path); + const id = getIdBySrc(path); let src; @@ -280,11 +281,10 @@ function download(type) { else src = prefixUr + FS + encodedPath + '?download'; - const element = load({ - id : id + '-' + date, - name : 'iframe', - async : false, - className : 'hidden', + const element = createElement('iframe', { + id : id + '-' + date, + async: false, + className: 'hidden', src, }); diff --git a/client/modules/operation/index.js b/client/modules/operation/index.js index 9401b2ed..f52c395e 100644 --- a/client/modules/operation/index.js +++ b/client/modules/operation/index.js @@ -9,6 +9,7 @@ const currify = require('currify/legacy'); const wraptile = require('wraptile/legacy'); const {promisify} = require('es6-promisify'); const exec = require('execon'); +const loadJS = require('load.js').js; const { encode, @@ -459,7 +460,7 @@ function load(callback) { const prefix = CloudCmd.PREFIX; const file = `${prefix}/fileop/fileop.js`; - DOM.load.js(file, (error) => { + loadJS(file, (error) => { if (error) { Dialog.alert(TITLE, error.message); return exec(callback); diff --git a/client/modules/terminal.js b/client/modules/terminal.js index 7e41346a..6dcaea22 100644 --- a/client/modules/terminal.js +++ b/client/modules/terminal.js @@ -8,7 +8,7 @@ const tryToCatch = require('try-to-catch'); require('../../css/terminal.css'); const exec = require('execon'); -const load = require('../dom/load'); +const load = require('load.js'); const DOM = require('../dom'); const Images = require('../dom/images'); @@ -37,8 +37,10 @@ const loadAll = async () => { const [e] = await tryToCatch(loadParallel, [js, css]); - if (e) - return Dialog.alert(TITLE, e.message); + if (e) { + const src = e.target.src.replace(window.location.href, ''); + return Dialog.alert(TITLE, `file ${src} could not be loaded`); + } Loaded = true; }; diff --git a/client/modules/upload.js b/client/modules/upload.js index 1d7e083d..3397817d 100644 --- a/client/modules/upload.js +++ b/client/modules/upload.js @@ -4,10 +4,10 @@ CloudCmd.Upload = exports; -const load = require('../dom/load'); const Files = require('../dom/files'); const Images = require('../dom/images'); const uploadFiles = require('../dom/upload-files'); +const createElement = require('@cloudcmd/create-element'); module.exports.init = async () => { Images.show.load('top'); @@ -20,10 +20,14 @@ module.exports.hide = hide; function show() { Images.show.load('top'); - Files.get('upload', (error, data) => { + Files.get('upload', (error, innerHTML) => { const autoSize = true; - CloudCmd.View.show(data, { + const el = createElement('div', { + innerHTML, + }); + + CloudCmd.View.show(el, { autoSize, afterShow, }); @@ -36,9 +40,9 @@ function show() { 'monospace' ].join(', '); - load.style({ - id : 'upload-css', - inner : '[data-name=js-upload-file-button] {' + + createElement('style', { + dataName: 'upload-css', + innerText: '[data-name=js-upload-file-button] {' + `font-family: ${fontFamily};` + 'font-size: 20px;' + 'width: 97%' + diff --git a/client/modules/view.js b/client/modules/view.js index d67a9178..ddac13d4 100644 --- a/client/modules/view.js +++ b/client/modules/view.js @@ -11,14 +11,14 @@ const currify = require('currify/legacy'); const {promisify} = require('es6-promisify'); const modal = require('@cloudcmd/modal'); -const createElement = require('./create-element') +const createElement = require('@cloudcmd/create-element'); const {time} = require('../../common/util'); const {FS} = require('../../common/cloudfunc'); const Files = require('../dom/files'); const Events = require('../dom/events'); -const load = require('../dom/load'); +const load = require('load.js'); const Images = require('../dom/images'); const {encode} = require('../../common/entity'); @@ -99,7 +99,7 @@ function show(data, options) { className: 'view', }); - El.tabindex = 0; + El.tabIndex = 0; if (data) { El.append(data); @@ -276,13 +276,16 @@ function getMediaElement(src, callback) { const is = isAudio(name); const type = is ? 'audio' : 'video'; - const rendered = rendy(TemplateAudio, { + const innerHTML = rendy(TemplateAudio, { src, type, name, }); - const [element] = $(rendered); + const element = createElement('div', { + innerHTML, + }); + callback(element); }); } diff --git a/package.json b/package.json index 490f4f09..2bae0fc1 100644 --- a/package.json +++ b/package.json @@ -166,6 +166,7 @@ "@babel/plugin-transform-object-assign": "^7.0.0", "@babel/preset-env": "^7.0.0", "@cloudcmd/clipboard": "^1.0.2", + "@cloudcmd/create-element": "^1.0.0", "@cloudcmd/modal": "^1.0.0", "babel-eslint": "^9.0.0", "babel-loader": "^8.0.0", @@ -189,6 +190,7 @@ "html-webpack-plugin": "^3.0.7", "inherits": "^2.0.3", "limier": "^2.0.0", + "load.js": "^2.0.0", "memfs": "^2.9.0", "minor": "^1.2.2", "mkdirp": "^0.5.1",