feature(package) load -> load.js + @cloudcmd/create/element

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) => {

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`);

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;
     

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
     });
 }
 

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) => {

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,
-    });
-};
-

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}

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;
             

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);
     }
 }
 

client/modules/create-element.js

@@ -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);
-}
-

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%;'                +

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);
         

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);
     });
 }

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,
         });
         

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);

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;
 };

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%'                      +

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);
     });
 }

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",