diff --git a/.webpack/js.mjs b/.webpack/js.mjs index 5788300b..d616745a 100644 --- a/.webpack/js.mjs +++ b/.webpack/js.mjs @@ -114,7 +114,7 @@ export default { 'terminal': `${dirCss}/terminal.css`, 'user-menu': `${dirCss}/user-menu.css`, 'sw': `${dir}/sw/sw.js`, - 'cloudcmd': `${dir}/cloudcmd.js`, + 'cloudcmd': `${dir}/cloudcmd.mjs`, [`${modules}/edit`]: `${dirModules}/edit.js`, [`${modules}/edit-file`]: `${dirModules}/edit-file.js`, [`${modules}/edit-file-vim`]: `${dirModules}/edit-file-vim.js`, diff --git a/client/client.mjs b/client/client.mjs index daf55ca5..b1d9edd6 100644 --- a/client/client.mjs +++ b/client/client.mjs @@ -26,8 +26,11 @@ const isDev = process.env.NODE_ENV === 'development'; inherits(CloudCmdProto, Emitify); -export const createCloudCmd = (DOM) => { - return new CloudCmdProto(DOM); +export const createCloudCmd = ({DOM, Listeners}) => { + return new CloudCmdProto({ + DOM, + Listeners, + }); }; load.addErrorListener((e, src) => { @@ -35,9 +38,7 @@ load.addErrorListener((e, src) => { Images.show.error(msg); }); -function CloudCmdProto(DOM) { - let Listeners; - +function CloudCmdProto({DOM, Listeners}) { Emitify.call(this); const CloudCmd = this; @@ -224,7 +225,6 @@ function CloudCmdProto(DOM) { const dirPath = DOM.getCurrentDirPath(); - ({Listeners} = CloudCmd); Listeners.init(); const panels = getPanels(); diff --git a/client/cloudcmd.js b/client/cloudcmd.mjs similarity index 70% rename from client/cloudcmd.js rename to client/cloudcmd.mjs index 32b3bc1a..7ad6995b 100644 --- a/client/cloudcmd.js +++ b/client/cloudcmd.mjs @@ -1,33 +1,32 @@ -'use strict'; - -const process = require('node:process'); -require('../css/main.css'); - -const wraptile = require('wraptile'); -const load = require('load.js'); - -const {registerSW, listenSW} = require('./sw/register'); -const {initSortPanel, sortPanel} = require('./sort.mjs'); -const Util = require('../common/util'); -const CloudFunc = require('../common/cloudfunc.mjs'); -const DOM = require('./dom'); -const {createCloudCmd} = require('./client.mjs'); +import process from 'node:process'; +import wraptile from 'wraptile'; +import load from 'load.js'; +import '../css/main.css'; +import {registerSW, listenSW} from './sw/register.js'; +import {initSortPanel, sortPanel} from './sort.mjs'; +import Util from '../common/util.js'; +import * as CloudFunc from '../common/cloudfunc.mjs'; +import DOM from './dom/index.js'; +import {createCloudCmd} from './client.mjs'; +import * as Listeners from './listeners/index.js'; const isDev = process.env.NODE_ENV === 'development'; -module.exports = init; +export default init; + +globalThis.CloudCmd = init; async function init(config) { - globalThis.CloudCmd = createCloudCmd(DOM); + globalThis.CloudCmd = createCloudCmd({ + DOM, + Listeners, + }); globalThis.DOM = DOM; globalThis.Util = Util; globalThis.CloudFunc = CloudFunc; await register(config); - require('./listeners'); - require('./key'); - initSortPanel(); globalThis.CloudCmd.sortPanel = sortPanel; const prefix = getPrefix(config.prefix); @@ -41,8 +40,6 @@ async function init(config) { }, 100); } -globalThis.CloudCmd = init; - function getPrefix(prefix) { if (!prefix) return ''; @@ -75,3 +72,4 @@ async function register(config) { listenSW(sw, 'updatefound', onUpdateFound(config)); } + diff --git a/client/listeners/index.js b/client/listeners/index.js index f3b99f70..a953f1d7 100644 --- a/client/listeners/index.js +++ b/client/listeners/index.js @@ -29,8 +29,6 @@ module.exports.init = async () => { ]); }; -CloudCmd.Listeners = module.exports; - const unselect = (event) => { const isMac = /Mac/.test(globalThis.navigator.platform); const { @@ -50,9 +48,6 @@ const execAll = currify((funcs, event) => { fn(event); }); -const Info = DOM.CurrentInfo; -const {Events} = DOM; - const EventsFiles = { mousedown: exec.with(execIfNotUL, setCurrentFileByEvent), click: execAll([onClick, exec.with(execIfNotMobile, unselect)]), @@ -70,6 +65,8 @@ function header() { return /^js-(left|right)$/.test(el.dataset.name); }; + const {Events} = DOM; + Events.addClick(fm, (event) => { const el = event.target; const parent = el.parentElement; @@ -106,6 +103,7 @@ async function config() { } module.exports.initKeysPanel = () => { + const {Events} = DOM; const keysElement = DOM.getById('js-keyspanel'); if (!keysElement) @@ -152,6 +150,7 @@ const getPanel = (side) => { }; module.exports.setOnPanel = (side) => { + const {Events} = DOM; const panel = getPanel(side); const filesElement = DOM.getByDataName('js-files', panel); @@ -167,6 +166,7 @@ function getPathListener(panel) { } function isNoCurrent(panel) { + const Info = DOM.CurrentInfo; const infoPanel = Info.panel; if (!infoPanel) @@ -191,6 +191,7 @@ function decodePath(path) { } async function onPathElementClick(panel, event) { + const Info = DOM.CurrentInfo; event.preventDefault(); const element = event.target; @@ -261,6 +262,7 @@ function toggleSelect(key, files) { } function changePanel(element) { + const Info = DOM.CurrentInfo; const {panel} = Info; const files = DOM.getByDataName('js-files', panel); const ul = getULElement(element); @@ -302,6 +304,7 @@ async function onTouch(event) { * in Chrome (HTML5) */ function onDragStart(event) { + const Info = DOM.CurrentInfo; const {prefixURL} = CloudCmd; const element = getLIElement(event.target); const {isDir} = Info; @@ -338,6 +341,7 @@ function getULElement(element) { } function setCurrentFileByEvent(event) { + const Info = DOM.CurrentInfo; const BUTTON_LEFT = 0; const key = { @@ -376,6 +380,7 @@ function getFilesRange(from, to) { } function contextMenu() { + const {Events} = DOM; const fm = DOM.getFM(); Events.addOnce('contextmenu', fm, (event) => { @@ -391,6 +396,7 @@ function contextMenu() { } function dragndrop() { + const {Events} = DOM; const panels = DOM.getByClassAll('panel'); const select = ({target}) => { target.classList.add('selected-panel'); @@ -464,7 +470,7 @@ function unload() { } function pop() { - Events.add('popstate', async ({state}) => { + DOM.Events.add('popstate', async ({state}) => { const path = (state || '').replace(FS, ''); if (!path) @@ -479,7 +485,8 @@ function pop() { } function resize() { - Events.add('resize', () => { + DOM.Events.add('resize', () => { + const Info = DOM.CurrentInfo; const is = globalThis.innerWidth < CloudCmd.MIN_ONE_PANEL_WIDTH; if (!is)