Skip to content

Commit 50c097b

Browse files
mclementemclemente
committed
Update Font Settings to AppV2
1 parent be2936b commit 50c097b

File tree

3 files changed

+103
-83
lines changed

3 files changed

+103
-83
lines changed

‎src/module/forms/FontSettings.js‎

Lines changed: 70 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,50 @@
1-
export class PolyglotFontSettings extends FormApplication {
2-
/**
3-
* Default Options for this FormApplication
4-
*/
5-
static get defaultOptions() {
1+
const { ApplicationV2, HandlebarsApplicationMixin } = foundry.applications.api;
2+
3+
export class PolyglotFontSettings extends HandlebarsApplicationMixin(ApplicationV2) {
4+
static get classes() {
65
const classes = ["sheet", "polyglot", "polyglot-font-settings"];
7-
if (game.system.id === "wfrp4e") {
6+
if (game.system?.id === "wfrp4e") {
87
classes.push(game.system.id);
98
}
10-
return foundry.utils.mergeObject(super.defaultOptions, {
11-
id: "polyglot-font-form",
12-
title: "Polyglot Font Settings",
13-
template: "./modules/polyglot/templates/FontSettings.hbs",
14-
classes,
9+
return classes;
10+
}
11+
12+
static DEFAULT_OPTIONS = {
13+
id: "polyglot-font-form",
14+
classes: this.classes,
15+
actions: {
16+
reset: PolyglotFontSettings.reset
17+
},
18+
form: {
19+
handler: PolyglotFontSettings.#onSubmit,
20+
closeOnSubmit: true,
21+
},
22+
position: {
1523
width: 780,
1624
height: 680,
17-
closeOnSubmit: true,
18-
resizable: true,
19-
});
25+
},
26+
tag: "form", // The default is "div"
27+
window: {
28+
icon: "fas fa-font", // You can now add an icon to the header
29+
title: "Font Settings",
30+
contentClasses: ["standard-form"],
31+
}
32+
};
33+
34+
get title() {
35+
return `Polyglot: ${game.i18n.localize(this.options.window.title)}`;
2036
}
2137

22-
getData() {
38+
static PARTS = {
39+
form: {
40+
template: "./modules/polyglot/templates/FontSettings.hbs"
41+
},
42+
footer: {
43+
template: "templates/generic/form-footer.hbs",
44+
},
45+
};
46+
47+
_prepareContext() {
2348
const fonts = game.settings.get("polyglot", "Alphabets");
2449
this.fonts = {};
2550

@@ -35,19 +60,27 @@ export class PolyglotFontSettings extends FormApplication {
3560

3661
return {
3762
fonts: this.fonts,
63+
buttons: [
64+
{ type: "submit", icon: "fa-solid fa-save", label: "SETTINGS.Save" },
65+
{ type: "reset", action: "reset", icon: "fa-solid fa-undo", label: "SETTINGS.Reset" },
66+
]
3867
};
3968
}
4069

41-
async activateListeners(html) {
42-
super.activateListeners(html);
70+
_onRender(context, options) {
71+
super._onRender(context, options);
4372

4473
const changeFontSize = async (event) => {
74+
event.preventDefault();
4575
if (!event.target.hasFocus) return;
4676
let size = event.target.value;
4777
if (event.type !== "change") {
48-
size -= event.originalEvent.deltaY / 10;
78+
const multiplier = event.deltaY / Math.abs(event.deltaY); // 1 or -1
79+
const step = Number(event.target.step) || 10;
80+
size = Math.floor(size - (multiplier * step));
4981
}
5082
if (size < 50) return;
83+
event.target.value = size;
5184
const parent = event.target.parentElement;
5285
const font = parent.previousElementSibling.textContent;
5386
parent.nextElementSibling.nextElementSibling.nextElementSibling.style.fontSize = `${size}%`;
@@ -64,31 +97,30 @@ export class PolyglotFontSettings extends FormApplication {
6497
this.fonts[font].logographical = event.target.checked;
6598
};
6699

67-
html.find(".alphabeticOnly").on("change", changeFontAlphabetic);
68-
html.find(".logographical").on("change", changeFontLogographical);
100+
this.element.querySelectorAll(".alphabeticOnly").forEach((el) => el.addEventListener("change", changeFontAlphabetic));
101+
this.element.querySelectorAll(".logographical").forEach((el) => el.addEventListener("change", changeFontLogographical));
69102

70-
html.find(".selectatr").on("focus", (event) => {
103+
this.element.querySelectorAll(".selectatr").forEach((el) => el.addEventListener("focus", (event) => {
71104
event.target.hasFocus = true;
72-
});
73-
html.find(".selectatr").on("blur", (event) => {
105+
}));
106+
this.element.querySelectorAll(".selectatr").forEach((el) => el.addEventListener("blur", (event) => {
74107
event.target.hasFocus = false;
75-
});
76-
html.find(".selectatr").on("change", changeFontSize);
77-
html.find(".selectatr").on("wheel", changeFontSize);
78-
html.find("button").on("click", async (event) => {
79-
if (event.currentTarget?.dataset?.action === "reset") {
80-
const defaultAlphabets = new game.polyglot.languageProvider.constructor().fonts;
81-
game.polyglot.languageProvider.fonts = defaultAlphabets;
82-
await game.settings.set("polyglot", "Alphabets", game.polyglot.languageProvider.fonts);
83-
const defaultCustomFontSizes = game.settings.settings.get("polyglot.CustomFontSizes").default;
84-
await game.settings.set("polyglot", "CustomFontSizes", defaultCustomFontSizes);
85-
this.close();
86-
SettingsConfig.reloadConfirm({ world: true });
87-
}
88-
});
108+
}));
109+
this.element.querySelectorAll(".selectatr").forEach((el) => el.addEventListener("change", changeFontSize));
110+
this.element.querySelectorAll(".selectatr").forEach((el) => el.addEventListener("wheel", changeFontSize));
111+
}
112+
113+
static async reset() {
114+
const defaultAlphabets = new game.polyglot.languageProvider.constructor().fonts;
115+
game.polyglot.languageProvider.fonts = defaultAlphabets;
116+
await game.settings.set("polyglot", "Alphabets", game.polyglot.languageProvider.fonts);
117+
const defaultCustomFontSizes = game.settings.settings.get("polyglot.CustomFontSizes").default;
118+
await game.settings.set("polyglot", "CustomFontSizes", defaultCustomFontSizes);
119+
this.close();
120+
SettingsConfig.reloadConfirm({ world: true });
89121
}
90122

91-
async _updateObject() {
123+
static async #onSubmit() {
92124
const customFontSizes = {};
93125
for (const [key, font] of Object.entries(this.fonts)) {
94126
customFontSizes[key] = font.size;

‎src/styles/forms/_font-settings.scss‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22
min-height: 255px;
33
min-width: 780px;
44

5+
input.selectatr[type="number"] {
6+
width: 40px;
7+
}
8+
59
.polyglot-alphabet {
610
margin: auto;
711
}
@@ -10,9 +14,6 @@
1014
margin: auto;
1115
}
1216

13-
.window-content {
14-
padding: 0;
15-
}
1617
form {
1718
height: 100%;
1819
section {

‎src/templates/FontSettings.hbs‎

Lines changed: 29 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,32 @@
1-
<form class="flexcol" autocomplete="off" onsubmit="event.preventDefault()">
2-
<section class="content">
3-
<div class="settings-list">
4-
<ul class="polyglot-languages-list">
1+
<form class="standard-form scrollable">
2+
<div class="settings-list">
3+
<ul class="polyglot-languages-list">
4+
<li class="flexrow">
5+
<div class="font-name">{{localize "POLYGLOT.Font"}}</div>
6+
<div class="fontSize">{{localize "POLYGLOT.FontSize"}}</div>
7+
<div class="fontSize">{{localize "POLYGLOT.AlphabeticOnly"}}</div>
8+
<div class="fontSize">{{localize "POLYGLOT.Logographical"}}</div>
9+
<div class="polyglot-alphabet">ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
10+
</li>
11+
<hr />
12+
{{#each fonts}}
513
<li class="flexrow">
6-
<div class="font-name">{{localize "POLYGLOT.Font"}}</div>
7-
<div class="fontSize">{{localize "POLYGLOT.FontSize"}}</div>
8-
<div class="fontSize">{{localize "POLYGLOT.AlphabeticOnly"}}</div>
9-
<div class="fontSize">{{localize "POLYGLOT.Logographical"}}</div>
10-
<div class="polyglot-alphabet">ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
14+
<div class="font-name">{{this.label}}</div>
15+
<div class="fontSize">
16+
<input class="selectatr" type="number" value="{{this.size}}" min="50" max="350" step="10" />
17+
</div>
18+
<div class="fontSize">
19+
<input class="alphabeticOnly" type="checkbox" {{checked this.alphabeticOnly}} />
20+
</div>
21+
<div class="fontSize">
22+
<input class="logographical" type="checkbox" {{checked this.logographical}} />
23+
</div>
24+
<div
25+
class="polyglot-alphabet"
26+
style="font-size: {{this.size}}%; font-family: {{this.family}}"
27+
>ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
1128
</li>
12-
<hr />
13-
{{#each fonts}}
14-
<li class="flexrow">
15-
<div class="font-name">{{this.label}}</div>
16-
<div class="fontSize">
17-
<input class="selectatr" type="number" value="{{this.size}}" min="50" max="350" step="10" />
18-
</div>
19-
<div class="fontSize">
20-
<input class="alphabeticOnly" type="checkbox" {{checked this.alphabeticOnly}} />
21-
</div>
22-
<div class="fontSize">
23-
<input class="logographical" type="checkbox" {{checked this.logographical}} />
24-
</div>
25-
<div
26-
class="polyglot-alphabet"
27-
style="font-size: {{this.size}}%; font-family: {{this.family}}"
28-
>ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
29-
</li>
30-
{{/each}}
31-
</ul>
32-
</div>
33-
</section>
34-
35-
<footer class="sheet-footer flexrow">
36-
<button type="submit" name="submit">
37-
<i class="far fa-save"></i>
38-
{{localize "SETTINGS.Save"}}
39-
</button>
40-
<button type="button" data-action="reset">
41-
<i class="fas fa-undo"></i>
42-
{{localize "SETTINGS.Reset"}}
43-
</button>
44-
</footer>
29+
{{/each}}
30+
</ul>
31+
</div>
4532
</form>

0 commit comments

Comments
 (0)