diff --git a/src/fontra/views/editor/editor.js b/src/fontra/views/editor/editor.js index 044dbc8ef..29e974a40 100644 --- a/src/fontra/views/editor/editor.js +++ b/src/fontra/views/editor/editor.js @@ -23,7 +23,6 @@ import { VarPackedPath, joinPaths } from "../core/var-path.js"; import { commandKeyProperty, enumerate, - fetchJSON, getCharFromUnicode, hyphenatedToCamelCase, isActiveElementTypeable, @@ -229,7 +228,7 @@ export class EditorController { rootSubscriptionPattern[rootKey] = null; } await this.fontController.subscribeChanges(rootSubscriptionPattern, false); - await this.initGlyphsSearch(); + this.initGlyphsSearch(); this.initTools(); await this.initSidebarDesignspace(); @@ -242,7 +241,7 @@ export class EditorController { setTimeout(() => this.setupFromWindowLocation(), 20); } - async initGlyphsSearch() { + initGlyphsSearch() { this.glyphsSearch = this.getSidebarPanel("glyph-search").contentElement.querySelector( "#glyphs-search" @@ -253,100 +252,6 @@ export class EditorController { ); } - async initUserSettings() { - const userSettings = - this.getSidebarPanel("user-settings").contentElement.querySelector( - "#user-settings" - ); - const items = []; - - // Visualization layer settings - const layers = this.visualizationLayers.definitions.filter( - (layer) => layer.userSwitchable - ); - const layerItems = layers.map((layer) => { - return { key: layer.identifier, displayName: layer.name, ui: "checkbox" }; - }); - items.push({ - displayName: "Glyph editor appearance", - controller: this.visualizationLayersSettings, - descriptions: layerItems, - }); - - // Clipboard settings - items.push({ - displayName: "Clipboard export format", - controller: this.clipboardFormatController, - descriptions: [ - { - key: "format", - ui: "radio", - options: [ - { key: "glif", displayName: "GLIF (RoboFont)" }, - { key: "svg", displayName: "SVG" }, - { key: "fontra-json", displayName: "JSON (Fontra)" }, - ], - }, - ], - }); - - // Experimental feature settings - items.push({ - displayName: "Experimental features", - controller: this.experimentalFeaturesController, - descriptions: [ - { - key: "scalingEditBehavior", - displayName: "Scaling edit tool behavior", - ui: "checkbox", - }, - { - key: "quadPenTool", - displayName: "Pen tool draws quadratics", - ui: "checkbox", - }, - ], - }); - - // Theme settings - items.push({ - displayName: "Theme settings", - controller: themeController, - descriptions: [ - { - key: "theme", - ui: "radio", - options: [ - { key: "automatic", displayName: "Automatic (use OS setting)" }, - { key: "light", displayName: "Light" }, - { key: "dark", displayName: "Dark" }, - ], - }, - ], - }); - - // Server info - const serverInfo = await fetchJSON("/serverinfo"); - items.push({ - displayName: "Server info", - controller: null, - descriptions: Object.entries(serverInfo).flatMap((entry) => { - return [ - { - displayName: entry[0] + ":", - ui: "header", - }, - { - displayName: entry[1], - ui: "plain", - }, - ]; - }), - }); - - userSettings.items = items; - } - async showDialogGlyphEditLocationNotAtSource() { const glyphName = this.sceneSettings.selectedGlyphName; const result = await dialog( @@ -502,8 +407,7 @@ export class EditorController { `fontra-selected-sidebar-${sidebar.identifier}`, onOff ? panelName : "" ); - const methodName = hyphenatedToCamelCase("toggle-" + panelName); - setTimeout(() => this[methodName]?.call(this, onOff, doFocus), 10); + this.getSidebarPanel(panelName).toggle(onOff, doFocus); return onOff; } @@ -1499,31 +1403,6 @@ export class EditorController { } } - toggleGlyphSearch(onOff, doFocus) { - if (onOff && doFocus) { - this.glyphsSearch.focusSearchField(); - } - } - - toggleTextEntry(onOff, doFocus) { - if (onOff && doFocus) { - this.getSidebarPanel("text-entry").focusTextEntry(); - } - } - - toggleSelectionInfo(onOff) { - if (onOff) { - this.getSidebarPanel("selection-info").update(); - } - } - - async toggleUserSettings(onOff) { - if (onOff && !this._didInitUserSettings) { - this._didInitUserSettings = true; - await loaderSpinner(this.initUserSettings()); - } - } - async editListenerCallback(editMethodName, senderID, ...args) { if (editMethodName === "editFinal") { this.sceneController.updateHoverState(); diff --git a/src/fontra/views/editor/panel-glyph-search.js b/src/fontra/views/editor/panel-glyph-search.js index 5996f9e7a..901538122 100644 --- a/src/fontra/views/editor/panel-glyph-search.js +++ b/src/fontra/views/editor/panel-glyph-search.js @@ -29,6 +29,12 @@ export default class GlyphSearchPanel extends Panel { ] ); } + + async toggle(on, focus) { + if (on && focus) { + this.editorController.glyphsSearch.focusSearchField(); + } + } } customElements.define("panel-glyph-search", GlyphSearchPanel); diff --git a/src/fontra/views/editor/panel-selection-info.js b/src/fontra/views/editor/panel-selection-info.js index 0941d4330..599782dab 100644 --- a/src/fontra/views/editor/panel-selection-info.js +++ b/src/fontra/views/editor/panel-selection-info.js @@ -36,6 +36,12 @@ export default class SelectionInfoPanel extends Panel { ); } + async toggle(on, focus) { + if (on) { + this.update(); + } + } + attach() { this.infoForm = new Form(); this.contentElement.appendChild(this.infoForm); diff --git a/src/fontra/views/editor/panel-text-entry.js b/src/fontra/views/editor/panel-text-entry.js index 88796a611..be967e5b7 100644 --- a/src/fontra/views/editor/panel-text-entry.js +++ b/src/fontra/views/editor/panel-text-entry.js @@ -197,6 +197,10 @@ export default class TextEntryPanel extends Panel { this.setupTextAlignElement(); this.setupIntersectionObserver(); } + + async toggle(on, focus) { + this.focusTextEntry(); + } } customElements.define("panel-text-entry", TextEntryPanel); diff --git a/src/fontra/views/editor/panel-user-settings.js b/src/fontra/views/editor/panel-user-settings.js index ae04926ff..d4eed9dee 100644 --- a/src/fontra/views/editor/panel-user-settings.js +++ b/src/fontra/views/editor/panel-user-settings.js @@ -1,5 +1,8 @@ import * as html from "/core/unlit.js"; +import { themeController } from "/core/theme-settings.js"; +import { fetchJSON } from "/core/utils.js"; import { css } from "../third-party/lit.js"; +import { loaderSpinner } from "../core/loader-spinner.js"; import Panel from "./panel.js"; export default class UserSettingsPanel extends Panel { @@ -26,6 +29,98 @@ export default class UserSettingsPanel extends Panel { }), ]); } + + async toggle(on) { + if (on && !this.editorController._didInitUserSettings) { + this.editorController._didInitUserSettings = true; + await loaderSpinner(this.setup()); + } + } + + async setup() { + const userSettings = this.contentElement.querySelector("#user-settings"); + const items = []; + const layers = this.editorController.visualizationLayers.definitions.filter( + (layer) => layer.userSwitchable + ); + const layerItems = layers.map((layer) => { + return { key: layer.identifier, displayName: layer.name, ui: "checkbox" }; + }); + items.push({ + displayName: "Glyph editor appearance", + controller: this.editorController.visualizationLayersSettings, + descriptions: layerItems, + }); + + items.push({ + displayName: "Clipboard export format", + controller: this.editorController.clipboardFormatController, + descriptions: [ + { + key: "format", + ui: "radio", + options: [ + { key: "glif", displayName: "GLIF (RoboFont)" }, + { key: "svg", displayName: "SVG" }, + { key: "fontra-json", displayName: "JSON (Fontra)" }, + ], + }, + ], + }); + + items.push({ + displayName: "Experimental features", + controller: this.editorController.experimentalFeaturesController, + descriptions: [ + { + key: "scalingEditBehavior", + displayName: "Scaling edit tool behavior", + ui: "checkbox", + }, + { + key: "quadPenTool", + displayName: "Pen tool draws quadratics", + ui: "checkbox", + }, + ], + }); + + items.push({ + displayName: "Theme settings", + controller: themeController, + descriptions: [ + { + key: "theme", + ui: "radio", + options: [ + { key: "automatic", displayName: "Automatic (use OS setting)" }, + { key: "light", displayName: "Light" }, + { key: "dark", displayName: "Dark" }, + ], + }, + ], + }); + + const serverInfo = await fetchJSON("/serverinfo"); + items.push({ + displayName: "Server info", + controller: null, + descriptions: Object.entries(serverInfo).flatMap((entry) => { + return [ + { + displayName: entry[0] + ":", + ui: "header", + }, + { + displayName: entry[1], + ui: "plain", + }, + ]; + }), + }); + + userSettings.items = items; + } } customElements.define("panel-user-settings", UserSettingsPanel); diff --git a/src/fontra/views/editor/panel.js b/src/fontra/views/editor/panel.js index 71b748445..2db4251f7 100644 --- a/src/fontra/views/editor/panel.js +++ b/src/fontra/views/editor/panel.js @@ -11,6 +11,8 @@ export default class Panel extends SimpleElement { getContentElement() {} attach() {} + + async toggle(on, focus) {} } customElements.define("fontra-panel", Panel);