diff --git a/localization/de.xlf b/localization/de.xlf index b5187aa..19d9fe3 100644 --- a/localization/de.xlf +++ b/localization/de.xlf @@ -46,6 +46,26 @@ Your editing history will be displayed here. Hier wird Ihre Bearbeitungshistorie angezeigt. + + Filename + Dateiname + + + Extension + Dateiendung + + + Close file + Datei schließen + + + Cancel + Abbrechen + + + Rename + Umbenennen + Close Schließen diff --git a/open-scd.ts b/open-scd.ts index 20ee272..bda912a 100644 --- a/open-scd.ts +++ b/open-scd.ts @@ -10,11 +10,18 @@ import '@material/mwc-drawer'; import '@material/mwc-icon'; import '@material/mwc-icon-button'; import '@material/mwc-list'; +import '@material/mwc-menu'; +import '@material/mwc-select'; import '@material/mwc-tab-bar'; +import '@material/mwc-textfield'; import '@material/mwc-top-app-bar-fixed'; -import type { ActionDetail } from '@material/mwc-list'; +import type { ActionDetail, SingleSelectedEvent } from '@material/mwc-list'; import type { Dialog } from '@material/mwc-dialog'; import type { Drawer } from '@material/mwc-drawer'; +import type { IconButton } from '@material/mwc-icon-button'; +import type { Menu } from '@material/mwc-menu'; +import type { Select } from '@material/mwc-select'; +import type { TextField } from '@material/mwc-textfield'; import { allLocales, sourceLocale, targetLocales } from './locales.js'; @@ -142,6 +149,27 @@ export class OpenSCD extends LitElement { /** The name of the [[`doc`]] currently being edited */ @property({ type: String, reflect: true }) docName = ''; + /** The file endings of editable files */ + @property({ type: Array, reflect: true }) editable = [ + 'cid', + 'icd', + 'iid', + 'scd', + 'sed', + 'ssd', + ]; + + isEditable(docName: string): boolean { + return !!this.editable.find(ext => + docName.toLowerCase().endsWith(`.${ext}`) + ); + } + + @state() + get editableDocs(): string[] { + return Object.keys(this.docs).filter(name => this.isEditable(name)); + } + #loadedPlugins = new Map(); @state() @@ -173,8 +201,8 @@ export class OpenSCD extends LitElement { } handleOpenDoc({ detail: { docName, doc } }: OpenEvent) { - this.docName = docName; - this.docs[this.docName] = doc; + this.docs[docName] = doc; + if (this.isEditable(docName)) this.docName = docName; } handleEditEvent(event: EditEvent) { @@ -203,9 +231,24 @@ export class OpenSCD extends LitElement { @query('#log') logUI!: Dialog; + @query('#editFile') + editFileUI!: Dialog; + @query('#menu') menuUI!: Drawer; + @query('#fileName') + fileNameUI!: TextField; + + @query('#fileExtension') + fileExtensionUI!: Select; + + @query('#fileMenu') + fileMenuUI!: Menu; + + @query('#fileMenuButton') + fileMenuButtonUI!: IconButton; + @property({ type: String, reflect: true }) get locale() { return getLocale() as LocaleTag; @@ -379,7 +422,41 @@ export class OpenSCD extends LitElement { ${renderActionItem(this.controls.menu, 'navigationIcon')} -
${this.docName}
+
+ ${this.editableDocs.length > 1 + ? html` this.fileMenuUI.show()} + > { + this.docName = this.editableDocs[index]; + }} + > + ${this.editableDocs.map( + name => html`${name}` + )} + ` + : nothing} + ${this.docName} + ${this.docName + ? html` this.editFileUI.show()} + >` + : nothing} +
${this.#actions.map(op => renderActionItem(op))} !p.isDisabled()).length @@ -411,6 +488,62 @@ export class OpenSCD extends LitElement { : nothing} + { + if (action === 'rename') { + const newDocName = `${this.fileNameUI.value}.${this.fileExtensionUI.value}`; + if (this.docs[newDocName]) return; + this.docs[newDocName] = this.doc; + delete this.docs[this.docName]; + this.docName = newDocName; + } else if (action === 'remove') { + delete this.docs[this.docName]; + this.docName = this.editableDocs[0] || ''; + } + }} + > + + + ${this.editable.map( + ext => + html`${ext}` + )} + + + ${msg('Close file')} + + + ${msg('Cancel')} + + + ${msg('Rename')} + + ${this.renderHistory()}