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

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