Skip to content

WIP trying to make sliders active on click #143

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
arrowtype wants to merge 2 commits into from
Closed

WIP trying to make sliders active on click #143

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9899b5d
WIP trying to make sliders active on click
arrowtype Sep 30, 2025
5a924aa
Still trying to get sliders to take effect once clicked/changed
arrowtype Sep 30, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
114 changes: 98 additions & 16 deletions src/form.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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");
Expand Down Expand Up @@ -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<HTMLSelectElement>(".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 =
Expand Down Expand Up @@ -397,21 +422,22 @@ 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<HTMLSelectElement>(".select-instance");
if (dropdown) {
dropdown.value = (await font.activeInstance()) || "--axes--";
}
await updateFont(font);
};
// input.onclick = e => {
// activateSliders(font, parent);
// };

let sliders = parent.querySelectorAll<HTMLElement>(
".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);
}
Expand All @@ -428,6 +454,62 @@ function unhighlight(e: Event) {
e.stopPropagation();
}

// async function activateSliders(font: Font, parent: HTMLElement) {
// let slider_container = parent.querySelector<HTMLElement>(
// ".variable-sliders-container"
// );
// let sliders = parent.querySelectorAll<HTMLElement>(
// ".variable-slider input"
// );
// let styleMenu = parent.querySelector<HTMLSelectElement>(".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 {
const result = await chrome.storage.local.get(key);
Expand Down