From a979d532d536f27b9c3e1e17b2bb62169fb9b17a Mon Sep 17 00:00:00 2001 From: coderaiser Date: Sat, 18 May 2019 18:49:44 +0300 Subject: [PATCH] refactor(dom) files: promisify --- client/client.js | 160 +++++++++++++++++++------------------- client/dom/files.js | 43 ++++------ client/dom/load-remote.js | 2 +- client/listeners/index.js | 11 +-- client/modules/cloud.js | 26 +++---- client/modules/config.js | 102 ++++++++++++------------ client/modules/menu.js | 3 +- client/modules/upload.js | 23 +++--- client/modules/view.js | 86 ++++++++++---------- 9 files changed, 223 insertions(+), 233 deletions(-) diff --git a/client/client.js b/client/client.js index 00f8f77b..254780d0 100644 --- a/client/client.js +++ b/client/client.js @@ -8,6 +8,7 @@ const rendy = require('rendy/legacy'); const exec = require('execon'); const load = require('load.js'); const {promisify} = require('es6-promisify'); +const tryToCatch = require('try-to-catch/legacy'); const pascalCase = require('just-pascal-case'); const isDev = process.env.NODE_ENV === 'development'; @@ -28,6 +29,8 @@ const { buildFromJSON, } = require('../common/cloudfunc'); +const callbackify = require('../common/callbackify'); + const loadModule = require('./load-module'); inherits(CloudCmdProto, Emitify); @@ -222,7 +225,7 @@ function CloudCmdProto(DOM) { }); }; - function initModules(callback) { + const initModules = callbackify(async () => { exec.if(CloudCmd.Key, () => { Key = new CloudCmd.Key(); CloudCmd.Key = Key; @@ -237,32 +240,29 @@ function CloudCmdProto(DOM) { }); }); - Files.get('modules', (error, modules) => { - const showLoad = Images.show.load; - - const doBefore = { - 'edit': showLoad, - 'menu': showLoad, - }; - - const load = (name, path, dobefore) => { - loadModule({ - name, - path, - dobefore, - }); - }; - - if (!modules) - modules = []; - - modules.local.forEach((module) => { - load(null, module, doBefore[module]); + const [, modules] = await tryToCatch(Files.get, 'modules'); + const showLoad = Images.show.load; + + const doBefore = { + 'edit': showLoad, + 'menu': showLoad, + }; + + const load = (name, path, dobefore) => { + loadModule({ + name, + path, + dobefore, }); - - callback(); + }; + + if (!modules) + return; + + modules.local.forEach((module) => { + load(null, module, doBefore[module]); }); - } + }); function baseInit(callback) { const files = DOM.getFiles(); @@ -378,12 +378,12 @@ function CloudCmdProto(DOM) { options.sort = sort; options.order = order; - createFileTable(newObj, panel, options, () => { - if (isRefresh && !noCurrent) - DOM.setCurrentByName(name); - - exec(callback); - }); + await createFileTable(newObj, panel, options); + + if (isRefresh && !noCurrent) + DOM.setCurrentByName(name); + + exec(callback); if (!CloudCmd.config('dirStorage')) return; @@ -409,7 +409,7 @@ function CloudCmdProto(DOM) { * @param history * @param callback */ - function createFileTable(json, panelParam, options, callback) { + async function createFileTable(json, panelParam, options) { const { history, noCurrent, @@ -417,59 +417,59 @@ function CloudCmdProto(DOM) { const names = ['file', 'path', 'link', 'pathLink']; - Files.get(names, (error, templFile, templPath, templLink, templPathLink) => { - const {Dialog} = DOM; - const panel = panelParam || DOM.getPanel(); - const {prefix} = CloudCmd; + const [ + error, + [templFile, templPath, templLink, templPathLink], + ] = await tryToCatch(Files.get, names); + + if (error) + return DOM.Dialog.alert(error.responseText); + + const panel = panelParam || DOM.getPanel(); + const {prefix} = CloudCmd; + + const { + dir, + name, + } = Info; + + const {childNodes} = panel; + let i = childNodes.length; + + while (i--) + panel.removeChild(panel.lastChild); + + panel.innerHTML = buildFromJSON({ + sort : options.sort, + order : options.order, + data : json, + id : panel.id, + prefix, + template : { + file : templFile, + path : templPath, + pathLink : templPathLink, + link : templLink, + }, + }); + + Listeners.setOnPanel(panel); + + if (!noCurrent) { + let current; - const { - dir, - name, - } = Info; + if (name === '..' && dir !== '/') + current = DOM.getCurrentByName(dir); - if (error) - return Dialog.alert(error.responseText); + if (!current) + [current] = DOM.getFiles(panel); - const {childNodes} = panel; - let i = childNodes.length; - - while (i--) - panel.removeChild(panel.lastChild); - - panel.innerHTML = buildFromJSON({ - sort : options.sort, - order : options.order, - data : json, - id : panel.id, - prefix, - template : { - file : templFile, - path : templPath, - pathLink : templPathLink, - link : templLink, - }, + DOM.setCurrentFile(current, { + history, }); - Listeners.setOnPanel(panel); - - if (!noCurrent) { - let current; - - if (name === '..' && dir !== '/') - current = DOM.getCurrentByName(dir); - - if (!current) - [current] = DOM.getFiles(panel); - - DOM.setCurrentFile(current, { - history, - }); - - CloudCmd.emit('active-dir', Info.dirPath); - } - - exec(callback); - }); + CloudCmd.emit('active-dir', Info.dirPath); + } } /** diff --git a/client/dom/files.js b/client/dom/files.js index 08e6bf76..dea2695f 100644 --- a/client/dom/files.js +++ b/client/dom/files.js @@ -4,7 +4,7 @@ const itype = require('itype/legacy'); const currify = require('currify/legacy'); -const exec = require('execon'); +const {promisify} = require('es6-promisify'); const load = require('./load'); const RESTful = require('./rest'); @@ -23,33 +23,23 @@ const unaryMap = (array, fn) => array.map((a) => fn(a)); module.exports.get = get; -function getFile(name, callback) { +async function getFile(name) { const type = itype(name); - let array; + check(name); - check(name, callback); + if (type === 'string') + return getModule(name); - switch(type) { - case 'string': - return getModule(name, callback); - - case 'array': - array = unaryMap(name, get); - return exec.parallel(array, callback); - } + if (type === 'array') + return Promise.all(unaryMap(name, get)); } -function check(name, callback) { +function check(name) { if (!name) throw Error('name could not be empty!'); - - if (typeof callback !== 'function') - throw Error('callback should be a function'); } -function getModule(name, callback) { - let path; - +async function getModule(name) { const regExpHTML = new RegExp(FILES_HTML + '|' + FILES_HTML_ROOT); const regExpJSON = new RegExp(FILES_JSON); @@ -60,11 +50,10 @@ function getModule(name, callback) { return showError(name); if (name === 'config') - return getConfig(callback); + return getConfig(); - path = getPath(name, isHTML, isJSON); - getSystemFile(path, callback); - + const path = getPath(name, isHTML, isJSON); + return getSystemFile(path); } function getPath(name, isHTML, isJSON) { @@ -93,7 +82,7 @@ function showError(name) { throw error; } -function getSystemFile(file, callback) { +const getSystemFile = promisify((file, callback) => { const {prefix} = CloudCmd; if (!Promises[file]) @@ -113,9 +102,9 @@ function getSystemFile(file, callback) { Promises[file] = null; callback(error); }); -} +}); -function getConfig(callback) { +const getConfig = promisify((callback) => { let is; if (!Promises.config) @@ -137,7 +126,7 @@ function getConfig(callback) { if (!is) Promises.config = null; }); -} +}); function getTimeoutOnce(time) { let is; diff --git a/client/dom/load-remote.js b/client/dom/load-remote.js index 1d814ccf..23069e0a 100644 --- a/client/dom/load-remote.js +++ b/client/dom/load-remote.js @@ -20,7 +20,7 @@ module.exports = (name, options, callback = options) => { if (o.name && window[o.name]) return callback(); - Files.get('modules', (error, modules) => { + Files.get('modules').then((modules) => { const online = config('online') && navigator.onLine; const module = findObjByNameInArr(modules.remote, name); diff --git a/client/listeners/index.js b/client/listeners/index.js index 2f8c6771..54d9d0c2 100644 --- a/client/listeners/index.js +++ b/client/listeners/index.js @@ -5,6 +5,7 @@ const exec = require('execon'); const itype = require('itype/legacy'); const currify = require('currify/legacy'); +const tryToCatch = require('try-to-catch/legacy'); const clipboard = require('@cloudcmd/clipboard'); const getRange = require('./get-range'); @@ -99,11 +100,11 @@ function getPath(el, path = []) { return getPath(el.parentElement, path.concat(el)); } -function config() { - DOM.Files.get('config', (e, config) => { - const type = config && config.packer; - EXT = DOM.getPackerExt(type); - }); +async function config() { + const [, config] = await tryToCatch(DOM.Files.get, 'config'); + const type = config && config.packer; + + EXT = DOM.getPackerExt(type); } module.exports.initKeysPanel = () => { diff --git a/client/modules/cloud.js b/client/modules/cloud.js index 32d83a1d..214d1325 100644 --- a/client/modules/cloud.js +++ b/client/modules/cloud.js @@ -5,7 +5,7 @@ const exec = require('execon'); const currify = require('currify/legacy'); const {promisify} = require('es6-promisify'); -const loadJS = require('load.js').js; +const loadJS = promisify(require('load.js').js); const {log} = CloudCmd; @@ -19,7 +19,11 @@ const Name = 'Cloud'; CloudCmd[Name] = module.exports; module.exports.init = async () => { - await loadFiles(); + const [modules] = await loadFiles(); + const {key} = modules.data.FilePicker; + + filepicker.setKey(key); + Images.hide(); }; module.exports.uploadFile = (filename, data) => { @@ -53,18 +57,12 @@ function _upload(callback, file) { }); } -const loadFiles = promisify((callback) => { +async function loadFiles() { const js = '//api.filepicker.io/v2/filepicker.js'; - loadJS(js, () => { - Files.get('modules', (error, modules) => { - const {key} = modules.data.FilePicker; - - filepicker.setKey(key); - - Images.hide(); - exec(callback); - }); - }); -}); + return Promise.all([ + Files.get('modules'), + loadJS(js), + ]); +} diff --git a/client/modules/config.js b/client/modules/config.js index db9cbea5..1e5852cf 100644 --- a/client/modules/config.js +++ b/client/modules/config.js @@ -9,6 +9,7 @@ const currify = require('currify/legacy'); const wraptile = require('wraptile/legacy'); const squad = require('squad/legacy'); const {promisify} = require('es6-promisify'); +const tryToCatch = require('try-to-catch/legacy'); const load = require('load.js'); const createElement = require('@cloudcmd/create-element'); @@ -43,7 +44,6 @@ const Config = {}; let Template; -const getFile = promisify(Files.get); const loadCSS = promisify(load.css); module.exports.init = async () => { @@ -55,7 +55,7 @@ module.exports.init = async () => { const {prefix} = CloudCmd; [Template] = await Promise.all([ - getFile('config-tmpl'), + Files.get('config-tmpl'), loadSocket(), loadCSS(prefix + '/dist/config.css'), CloudCmd.View(), @@ -127,60 +127,60 @@ Config.save = saveHttp; module.exports.show = show; -function show() { +async function show() { if (!CloudCmd.config('configDialog')) return; - fillTemplate(); + await fillTemplate(); } -function fillTemplate() { - Files.get('config', (error, config) => { - if (error) - return Dialog.alert('Could not load config!'); - - const { - editor, - packer, - columns, - configAuth, - ...obj - } = input.convert(config); - - obj[editor + '-selected'] = 'selected'; - obj[packer + '-selected'] = 'selected'; - obj[columns + '-selected'] = 'selected'; - obj.configAuth = configAuth ? '' : 'hidden'; - - const innerHTML = rendy(Template, obj); - - Element = createElement('form', { - className : 'config', - innerHTML, - }); - - const inputs = document.querySelectorAll('input, select', Element); - const [inputFirst] = inputs; - - let afterShow; - - if (inputFirst) { - onAuthChange(inputFirst.checked); - afterShow = inputFirst.focus.bind(inputFirst); - } - - const getTarget = ({target}) => target; - const handleChange = squad(onChange, getTarget); - - [...inputs] - .map(addKey(onKey)) - .map(addChange(handleChange)); - - const autoSize = true; - CloudCmd.View.show(Element, { - autoSize, - afterShow, - }); +async function fillTemplate() { + const [error, config] = await tryToCatch(Files.get, 'config'); + + if (error) + return Dialog.alert('Could not load config!'); + + const { + editor, + packer, + columns, + configAuth, + ...obj + } = input.convert(config); + + obj[editor + '-selected'] = 'selected'; + obj[packer + '-selected'] = 'selected'; + obj[columns + '-selected'] = 'selected'; + obj.configAuth = configAuth ? '' : 'hidden'; + + const innerHTML = rendy(Template, obj); + + Element = createElement('form', { + className : 'config', + innerHTML, + }); + + const inputs = document.querySelectorAll('input, select', Element); + const [inputFirst] = inputs; + + let afterShow; + + if (inputFirst) { + onAuthChange(inputFirst.checked); + afterShow = inputFirst.focus.bind(inputFirst); + } + + const getTarget = ({target}) => target; + const handleChange = squad(onChange, getTarget); + + [...inputs] + .map(addKey(onKey)) + .map(addChange(handleChange)); + + const autoSize = true; + CloudCmd.View.show(Element, { + autoSize, + afterShow, }); } diff --git a/client/modules/menu.js b/client/modules/menu.js index fbb994e6..6380ff66 100644 --- a/client/modules/menu.js +++ b/client/modules/menu.js @@ -232,9 +232,8 @@ function _uploadTo(nameModule) { return; const {name} = Info; - const execFrom = CloudCmd.execFromModule; - execFrom(nameModule, 'uploadFile', name, data); + CloudCmd.execFromModule(nameModule, 'uploadFile', name, data); }); CloudCmd.log('Uploading to ' + name + '...'); diff --git a/client/modules/upload.js b/client/modules/upload.js index eb144e93..c5135ce6 100644 --- a/client/modules/upload.js +++ b/client/modules/upload.js @@ -17,20 +17,19 @@ module.exports.init = async () => { module.exports.show = show; module.exports.hide = hide; -function show() { +async function show() { Images.show.load('top'); - Files.get('upload', (error, innerHTML) => { - const autoSize = true; - - const el = createElement('div', { - innerHTML, - }); - - CloudCmd.View.show(el, { - autoSize, - afterShow, - }); + const innerHTML = await Files.get('upload'); + const autoSize = true; + + const el = createElement('div', { + innerHTML, + }); + + CloudCmd.View.show(el, { + autoSize, + afterShow, }); const fontFamily = [ diff --git a/client/modules/view.js b/client/modules/view.js index 636842ab..8c52a830 100644 --- a/client/modules/view.js +++ b/client/modules/view.js @@ -9,6 +9,7 @@ const rendy = require('rendy/legacy'); const exec = require('execon'); const currify = require('currify/legacy'); const {promisify} = require('es6-promisify'); +const tryToCatch = require('try-to-catch/legacy'); const modal = require('@cloudcmd/modal'); const createElement = require('@cloudcmd/create-element'); @@ -81,7 +82,7 @@ module.exports.init = async () => { events.forEach(addEvent(Overlay, onOverlayClick)); }; -function show(data, options) { +async function show(data, options) { const prefixURL = CloudCmd.prefixURL + FS; if (Loading) @@ -120,22 +121,25 @@ function show(data, options) { } } -function viewMedia(path) { - getMediaElement(path, (element) => { - const allConfig = { - ...Config, - ...{ - autoSize: true, - afterShow: () => { - element - .querySelector('audio, video') - .focus(); - }, +async function viewMedia(path) { + const [e, element] = await getMediaElement(path); + + if (e) + return alert(e); + + const allConfig = { + ...Config, + ...{ + autoSize: true, + afterShow: () => { + element + .querySelector('audio, video') + .focus(); }, - }; - - modal.open(element, allConfig); - }); + }, + }; + + modal.open(element, allConfig); } function viewFile() { @@ -257,33 +261,33 @@ function getType(name) { return 'media'; } -function getMediaElement(src, callback) { - check(src, callback); +async function getMediaElement(src) { + check(src); - Files.get('view/media-tmpl', (error, template) => { - const {name} = Info; - - if (error) - return alert(error); - - if (!TemplateAudio) - TemplateAudio = template; - - const is = isAudio(name); - const type = is ? 'audio' : 'video'; - - const innerHTML = rendy(TemplateAudio, { - src, - type, - name, - }); - - const element = createElement('div', { - innerHTML, - }); - - callback(element); + const [error, template] = await tryToCatch(Files.get, 'view/media-tmpl'); + + if (error) + return [error]; + + const {name} = Info; + + if (!TemplateAudio) + TemplateAudio = template; + + const is = isAudio(name); + const type = is ? 'audio' : 'video'; + + const innerHTML = rendy(TemplateAudio, { + src, + type, + name, }); + + const element = createElement('div', { + innerHTML, + }); + + return [null, element]; } function check(src, callback) {