diff --git a/src/gui/src/UI/UIWindowFontPicker.js b/src/gui/src/UI/UIWindowFontPicker.js index f84351c650..8de91051b5 100644 --- a/src/gui/src/UI/UIWindowFontPicker.js +++ b/src/gui/src/UI/UIWindowFontPicker.js @@ -41,13 +41,14 @@ const font_list = new Set([ async function UIWindowFontPicker (options) { // set sensible defaults if ( arguments.length > 0 ) { - // if first argument is a string, then assume it is the default color + // if first argument is a string, then assume it is the default font if ( window.isString(arguments[0]) ) { options = {}; - options.default = arguments[0]; + options.defaultValue = arguments[0]; } } options = options || {}; + const defaultFont = options.defaultValue || options.defaultFont || options.default; return new Promise(async (resolve) => { let h = ''; @@ -55,7 +56,7 @@ async function UIWindowFontPicker (options) { h += '
'; h += '
'; fontAvailable.forEach(element => { - h += `

${html_encode(element)}

`; // 👉️ one, two, three, four + h += `

${html_encode(element)}

`; }); h += '
'; @@ -89,10 +90,15 @@ async function UIWindowFontPicker (options) { on_close: () => { resolve(false); }, - onAppend: function (window) { - let active_font = $(window).find('.font-selector-active'); + onAppend: function (elWindow) { + let active_font = $(elWindow).find('.font-selector-active'); if ( active_font.length > 0 ) { - window.scrollParentToChild($(window).find('.font-list').get(0), active_font.get(0)); + const font_list = $(elWindow).find('.font-list').get(0); + if ( window.scrollParentToChild ) { + window.scrollParentToChild(font_list, active_font.get(0)); + } else { + active_font.get(0).scrollIntoView({ block: 'nearest' }); + } } }, window_class: 'window-login', @@ -118,4 +124,4 @@ async function UIWindowFontPicker (options) { }); } -export default UIWindowFontPicker; \ No newline at end of file +export default UIWindowFontPicker; diff --git a/src/puter-js/src/modules/UI.js b/src/puter-js/src/modules/UI.js index 3f245baa74..4799db4de9 100644 --- a/src/puter-js/src/modules/UI.js +++ b/src/puter-js/src/modules/UI.js @@ -854,16 +854,21 @@ class UI extends EventListener { }; showFontPicker (options) { + const opts = typeof options === 'string' ? { defaultValue: options } : (options ?? {}); + const defaultFont = opts.defaultValue || opts.defaultFont || opts.default || 'System UI'; + const normalizedOptions = { + ...opts, + defaultValue: defaultFont, + }; + if ( this.messageTarget ) { return new Promise((resolve) => { - this.#postMessageWithCallback('showFontPicker', resolve, { options: options ?? {} }); + this.#postMessageWithCallback('showFontPicker', resolve, { options: normalizedOptions }); }); } // Standalone fallback: render web component return new Promise((resolve) => { - const opts = typeof options === 'string' ? { defaultFont: options } : (options ?? {}); const el = document.createElement('puter-font-picker'); - const defaultFont = opts.defaultFont || opts.default || 'System UI'; el.setAttribute('default-font', defaultFont); el.addEventListener('response', (e) => resolve(e.detail)); document.body.appendChild(el); diff --git a/src/puter-js/types/modules/ui.d.ts b/src/puter-js/types/modules/ui.d.ts index addc981476..277be3ef0e 100644 --- a/src/puter-js/types/modules/ui.d.ts +++ b/src/puter-js/types/modules/ui.d.ts @@ -92,6 +92,7 @@ export interface ColorPickerOptions { export interface FontPickerOptions { defaultFont?: string; + defaultValue?: string; } export interface DirectoryPickerOptions {