diff --git a/package-lock.json b/package-lock.json index e836776..bbfd532 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,7 +10,6 @@ "license": "MIT", "dependencies": { "@ptkdev/logger": "^1.8.0", - "brace": "^0.11.1", "filer": "^1.4.1", "prism-code-editor": "^1.2.2", "prismjs": "^1.29.0", @@ -1319,11 +1318,6 @@ "integrity": "sha512-eXRvHzWyYPBuB4NBy0cmYQjGitUrtqwbvlzP3G6VFnNRbsZQIxQ10PbKKHt8gZ/HW/D/747aDl+QkDqg3KQLMQ==", "dev": true }, - "node_modules/brace": { - "version": "0.11.1", - "resolved": "https://registry.npmjs.org/brace/-/brace-0.11.1.tgz", - "integrity": "sha512-Fc8Ne62jJlKHiG/ajlonC4Sd66Pq68fFwK4ihJGNZpGqboc324SQk+lRvMzpPRuJOmfrJefdG8/7JdWX4bzJ2Q==" - }, "node_modules/brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", diff --git a/package.json b/package.json index c6a350d..d91f9ff 100644 --- a/package.json +++ b/package.json @@ -21,7 +21,6 @@ }, "dependencies": { "@ptkdev/logger": "^1.8.0", - "brace": "^0.11.1", "filer": "^1.4.1", "prism-code-editor": "^1.2.2", "prismjs": "^1.29.0", diff --git a/src/apps/editor.ts b/src/apps/editor.ts index 4399776..5d3a846 100644 --- a/src/apps/editor.ts +++ b/src/apps/editor.ts @@ -26,9 +26,7 @@ export default class EditorApp implements App { version = '1.0.0' async open (data?: EditorConfig): Promise { - const fs = new (window as any).Filer.FileSystem() - - const win = (window as any).wm.createWindow({ + const win = window.wm.createWindow({ title: this.name, icon, width: 500, @@ -38,19 +36,114 @@ export default class EditorApp implements App { if (data != null) { win.setTitle('Editor - ' + data.path) - const value = (await fs.promises.readFile(data.path)).toString() + win.content.style.display = 'flex' + win.content.style.flexDirection = 'column' + win.content.innerHTML = ` +
+
File
+
Edit
+ + + +
+
+ + ` + + const fileBtn = win.content.querySelector('#file-open') + const editBtn = win.content.querySelector('#edit-open') + + const toggleDropdown = function (id: string): void { + const el = win.content.querySelector(`#${id}`) + el?.classList.toggle('show') + } + + fileBtn?.addEventListener('click', function (e) { + e.stopPropagation() + toggleDropdown('file') + }) + + editBtn?.addEventListener('click', function (e) { + e.stopPropagation() + toggleDropdown('edit') + }) + + win.content.addEventListener('click', function () { + const file = win.content.querySelector('#file') + const edit = win.content.querySelector('#edit') + if (file !== null) { + if (file.classList.contains('show')) { + toggleDropdown('file') + } + } + if (edit !== null) { + if (edit.classList.contains('show')) { + toggleDropdown('edit') + } + } + }) + + const value = (await window.fs.promises.readFile(data.path)).toString() const editor = fullEditor( Prism, - win.content, + win.content.querySelector('.editor'), { language: data.path.split('.').at(-1), theme: 'github-dark', value } ) + const style = document.createElement('style') style.innerHTML = ` .prism-editor { + border-radius: 10px 10px 0 0; caret-color: var(--text); font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; --editor__bg: var(--base); @@ -80,7 +173,13 @@ export default class EditorApp implements App { font-family: 'Satoshi', sans-serif; } ` - editor.scrollContainer.appendChild(style) + editor.scrollContainer.appendChild(style); + (win.content.querySelector('#find') as HTMLElement).onclick = () => { + editor.extensions.searchWidget.open() + } + (win.content.querySelector('#save') as HTMLElement).onclick = async () => { + await window.fs.promises.writeFile(data.path, editor.value) + } } return win diff --git a/src/apps/files.ts b/src/apps/files.ts index 25c188b..69ba2ff 100644 --- a/src/apps/files.ts +++ b/src/apps/files.ts @@ -13,34 +13,26 @@ export default class FilesApp implements App { version = '1.0.0' async open (): Promise { - const fs = new (window as any).Filer.FileSystem() - - const win = (window as any).wm.createWindow({ + const win = window.wm.createWindow({ title: this.name, icon, width: 500, height: 400 }) - try { - await fs.mkdir('/home', () => {}) - await fs.mkdir('/home/meow', () => {}) - } catch (e) {} - try { - await fs.writeFile('/home/owo1.txt', 'sussy', () => {}) - await fs.writeFile('/home/owo2.html', '', () => {}) - await fs.writeFile('/home/owo.js', 'alert(`hi`)', () => {}) - } catch (e) {} - win.content.style.display = 'flex' win.content.style.flexDirection = 'column' async function setDir (dir: string): Promise { - await fs.readdir(dir, (e: NodeJS.ErrnoException, files: string[]) => { + await window.fs.readdir(dir, (e: NodeJS.ErrnoException, files: string[]) => { const back = dir === '/' ? '' : '' win.content.innerHTML = ` -
${back}${dir}
+
+ ${back}${dir} +
+ +
` @@ -54,9 +46,21 @@ export default class FilesApp implements App { } } + (win.content.querySelector('.file') as HTMLElement).onclick = async () => { + const title: string = prompt('Enter file name') ?? 'new-file.txt' + await window.fs.promises.open(dir + '/' + title, 'w') + await setDir(dir) + } + + (win.content.querySelector('.folder') as HTMLElement).onclick = async () => { + const title: string = prompt('Enter folder name') ?? 'new-folder' + await window.fs.promises.mkdir(dir + '/' + title) + await setDir(dir) + } + for (const file of files) { const separator = dir === '/' ? '' : '/' - fs.stat(dir + separator + file, (e: NodeJS.ErrnoException, fileStat: Stats) => { + window.fs.stat(dir + separator + file, (e: NodeJS.ErrnoException, fileStat: Stats) => { const element = document.createElement('div') element.setAttribute('style', 'padding: 5px;border-bottom: 1px solid var(--text);display:flex;align-items:center;gap: 5px;') @@ -120,7 +124,7 @@ export default class FilesApp implements App { } } - win.content.querySelector('.files').appendChild(element) + win.content.querySelector('.files')?.appendChild(element) }) } }) diff --git a/src/apps/music.ts b/src/apps/music.ts index 0ac693c..a93abee 100644 --- a/src/apps/music.ts +++ b/src/apps/music.ts @@ -9,7 +9,7 @@ export default class MusicApp implements App { version = '1.0.0' async open (): Promise { - const win = (window as any).wm.createWindow({ + const win = window.wm.createWindow({ title: this.name, icon }) diff --git a/src/apps/settings.ts b/src/apps/settings.ts index fb82c5b..04567db 100644 --- a/src/apps/settings.ts +++ b/src/apps/settings.ts @@ -9,7 +9,7 @@ export default class SettingsApp implements App { version = '1.0.0' async open (): Promise { - const win = (window as any).wm.createWindow({ + const win = window.wm.createWindow({ title: this.name, icon, width: 700, diff --git a/src/filer.d.ts b/src/filer.d.ts deleted file mode 100644 index 4848cf7..0000000 --- a/src/filer.d.ts +++ /dev/null @@ -1 +0,0 @@ -declare module 'filer' diff --git a/src/index.ts b/src/index.ts index 6847ed8..ea1346d 100644 --- a/src/index.ts +++ b/src/index.ts @@ -3,5 +3,16 @@ import './style.less' import StatusBar from './statusbar.ts' import WM from './wm.ts' -(window as any).statusBar = new StatusBar(); -(window as any).wm = new WM() +import * as fs from 'fs' + +declare global { + interface Window { + statusBar: StatusBar + wm: WM + fs: typeof fs + } +} + +window.statusBar = new StatusBar() +window.wm = new WM() +window.fs = new (window as any).Filer.FileSystem() diff --git a/src/modules/appView.ts b/src/modules/appView.ts index 7a5c274..37333cd 100644 --- a/src/modules/appView.ts +++ b/src/modules/appView.ts @@ -12,6 +12,6 @@ export const run = (element: HTMLDivElement): void => { element.innerHTML = '' element.onclick = () => { - (window as any).wm.toggleLauncher() + window.wm.toggleLauncher() } }