From 9899b5d4b4b56387b0951986595495f47cd1bb95 Mon Sep 17 00:00:00 2001 From: Stephen Nixon <45946693+arrowtype@users.noreply.github.com> Date: Mon, 29 Sep 2025 22:29:01 -0400 Subject: [PATCH 1/2] WIP trying to make sliders active on click --- src/form.ts | 57 ++++++++++++++++++++++++++++++++++++++--------------- 1 file changed, 41 insertions(+), 16 deletions(-) diff --git a/src/form.ts b/src/form.ts index 4fe4548..70a2558 100644 --- a/src/form.ts +++ b/src/form.ts @@ -147,6 +147,7 @@ export async function addFormElement( await addVariableSliders(font, parentEl); await addNamedInstances(font, parentEl); + await activateSliders(font, parentEl); // Set up font name and instance in title await setFontNameAndInstance(font, parentEl); @@ -270,9 +271,9 @@ async function addNamedInstances(font: Font, el: HTMLElement) { // Create instances dropdown const dropdown = document.createElement("select"); + dropdown.onchange = applyNamedInstance; dropdown.classList.add("select-instance"); dropdown.name = "select-instance"; - dropdown.onchange = applyNamedInstance; // Add "turn off font-variation-settings" option const option = document.createElement("option"); @@ -370,6 +371,30 @@ async function addVariableSliders(font: Font, el: HTMLElement) { } } +async function setStyleFromSliders( + font: Font, + axis: Axis, + parent: HTMLElement, + input: HTMLInputElement, + value: HTMLSpanElement +) { + input.onchange = async e => { + let fontId = parent.dataset.fontid; + let font = await getFont(fontId); + let newValue = (e.target as HTMLInputElement).value; + value.innerText = newValue; + // Store the value back in the font object + font.location[axis.id] = parseFloat(newValue); + /// If we're on an instance, update .select-instance + const dropdown = + parent.querySelector(".select-instance"); + if (dropdown) { + dropdown.value = (await font.activeInstance()) || "--axes--"; + } + await updateFont(font); + }; +} + function addSlider(font: Font, axis: Axis, parent: HTMLElement) { const variableSliders = parent.querySelector(".variable-sliders"); const template: HTMLTemplateElement = @@ -397,21 +422,7 @@ function addSlider(font: Font, axis: Axis, parent: HTMLElement) { font.location[axis.id] = axis.default; } - input.onchange = async e => { - let fontId = parent.dataset.fontid; - let font = await getFont(fontId); - let newValue = (e.target as HTMLInputElement).value; - value.innerText = newValue; - // Store the value back in the font object - font.location[axis.id] = parseFloat(newValue); - /// If we're on an instance, update .select-instance - const dropdown = - parent.querySelector(".select-instance"); - if (dropdown) { - dropdown.value = (await font.activeInstance()) || "--axes--"; - } - await updateFont(font); - }; + setStyleFromSliders(font, axis, parent, input, value); variableSliders.append(el); } @@ -428,6 +439,20 @@ function unhighlight(e: Event) { e.stopPropagation(); } +async function activateSliders(font: Font, parent: HTMLElement) { + let sliders = parent.querySelector(".variable-sliders-container"); + let styleMenu = parent.querySelector(".select-instance"); + // watch for click on variableSliders, and add class "active" + (sliders as HTMLElement).onclick = async e => { + sliders.classList.remove("mute"); + (styleMenu as HTMLSelectElement).value = "--axes--"; + (styleMenu as HTMLSelectElement).value = + (await font.activeInstance()) || "--axes--"; + applyNamedInstance(e); + await updateFont(font); + }; +} + async function setStorageKeyIfNotFound(key: string, defaultValue: Font[]) { try { const result = await chrome.storage.local.get(key); From 5a924aaf0b2ade9bcd96704d1d4c945d8d91e591 Mon Sep 17 00:00:00 2001 From: Stephen Nixon <45946693+arrowtype@users.noreply.github.com> Date: Tue, 30 Sep 2025 10:08:42 -0400 Subject: [PATCH 2/2] Still trying to get sliders to take effect once clicked/changed --- src/form.ts | 85 ++++++++++++++++++++++++++++++++++++++++++++--------- 1 file changed, 71 insertions(+), 14 deletions(-) diff --git a/src/form.ts b/src/form.ts index 70a2558..7b788fa 100644 --- a/src/form.ts +++ b/src/form.ts @@ -147,7 +147,7 @@ export async function addFormElement( await addVariableSliders(font, parentEl); await addNamedInstances(font, parentEl); - await activateSliders(font, parentEl); + // await activateSliders(font, parentEl); // Set up font name and instance in title await setFontNameAndInstance(font, parentEl); @@ -422,6 +422,21 @@ function addSlider(font: Font, axis: Axis, parent: HTMLElement) { font.location[axis.id] = axis.default; } + // input.onclick = e => { + // activateSliders(font, parent); + // }; + + let sliders = parent.querySelectorAll( + ".variable-slider input" + ); + + variableSliders.addEventListener("click", async e => { + variableSliders.classList.remove("mute"); + sliders.forEach(slider => { + (slider as HTMLInputElement).disabled = false; + }); + }); + setStyleFromSliders(font, axis, parent, input, value); variableSliders.append(el); @@ -439,19 +454,61 @@ function unhighlight(e: Event) { e.stopPropagation(); } -async function activateSliders(font: Font, parent: HTMLElement) { - let sliders = parent.querySelector(".variable-sliders-container"); - let styleMenu = parent.querySelector(".select-instance"); - // watch for click on variableSliders, and add class "active" - (sliders as HTMLElement).onclick = async e => { - sliders.classList.remove("mute"); - (styleMenu as HTMLSelectElement).value = "--axes--"; - (styleMenu as HTMLSelectElement).value = - (await font.activeInstance()) || "--axes--"; - applyNamedInstance(e); - await updateFont(font); - }; -} +// async function activateSliders(font: Font, parent: HTMLElement) { +// let slider_container = parent.querySelector( +// ".variable-sliders-container" +// ); +// let sliders = parent.querySelectorAll( +// ".variable-slider input" +// ); +// let styleMenu = parent.querySelector(".select-instance"); + +// // slider_container.classList.remove("mute"); +// // watch for click on variableSliders, and remove class "mute" +// slider_container.onclick = async e => { +// slider_container.classList.remove("mute"); +// sliders.forEach(slider => { +// (slider as HTMLInputElement).disabled = false; +// }); +// }; +// // // styleMenu.value = (await font.activeInstance()) || "--axes--"; +// // // applyNamedInstance(e); +// // // await updateFont(font); +// // sliders.forEach(slider => { +// // (slider as HTMLInputElement).disabled = false; +// // }); +// // }; +// // sliders.forEach(slider => { +// // slider.onclick = e => { +// // slider_container.classList.remove("mute"); +// // sliders.forEach(slider => { +// // (slider as HTMLInputElement).disabled = false; +// // }); +// // }; +// // }); +// sliders.forEach(slider => { +// slider.onclick = e => { +// slider_container.classList.remove("mute"); +// sliders.forEach(slider => { +// (slider as HTMLInputElement).disabled = false; +// }); +// }; +// // When slider is moved, update the font object and save to storage +// slider.oninput = async e => { +// // slider_container.classList.remove("mute"); +// let fontId = parent.dataset.fontid; +// let font = await getFont(fontId); +// let input = e.target as HTMLInputElement; +// let value = (e.target as HTMLInputElement).value; +// let axisId = (e.target as HTMLInputElement).name.replace( +// "var-", +// "" +// ); + +// setStyleFromSliders(font, axisId, parent, input, value); +// }; +// }); +// } async function setStorageKeyIfNotFound(key: string, defaultValue: Font[]) { try {