Skip to content

Commit 3f142ea

Browse files
mclementemclemente
committed
Update Font Settings to AppV2
1 parent be2936b commit 3f142ea

File tree

3 files changed

+111
-95
lines changed

3 files changed

+111
-95
lines changed

‎src/module/forms/FontSettings.js‎

Lines changed: 71 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,51 @@
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,
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"],
1831
resizable: true,
19-
});
32+
}
33+
};
34+
35+
get title() {
36+
return `Polyglot: ${game.i18n.localize(this.options.window.title)}`;
2037
}
2138

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

@@ -35,19 +61,28 @@ export class PolyglotFontSettings extends FormApplication {
3561

3662
return {
3763
fonts: this.fonts,
64+
fields: game.settings.settings.get("polyglot.Alphabets").type.element.fields,
65+
buttons: [
66+
{ type: "submit", icon: "fa-solid fa-save", label: "SETTINGS.Save" },
67+
{ type: "reset", action: "reset", icon: "fa-solid fa-undo", label: "SETTINGS.Reset" },
68+
]
3869
};
3970
}
4071

41-
async activateListeners(html) {
42-
super.activateListeners(html);
72+
_onRender(context, options) {
73+
super._onRender(context, options);
4374

4475
const changeFontSize = async (event) => {
76+
event.preventDefault();
4577
if (!event.target.hasFocus) return;
4678
let size = event.target.value;
4779
if (event.type !== "change") {
48-
size -= event.originalEvent.deltaY / 10;
80+
const multiplier = event.deltaY / Math.abs(event.deltaY); // 1 or -1
81+
const step = Number(event.target.step) || 10;
82+
size = Math.floor(size - (multiplier * step));
4983
}
5084
if (size < 50) return;
85+
event.target.value = size;
5186
const parent = event.target.parentElement;
5287
const font = parent.previousElementSibling.textContent;
5388
parent.nextElementSibling.nextElementSibling.nextElementSibling.style.fontSize = `${size}%`;
@@ -64,31 +99,30 @@ export class PolyglotFontSettings extends FormApplication {
6499
this.fonts[font].logographical = event.target.checked;
65100
};
66101

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

70-
html.find(".selectatr").on("focus", (event) => {
105+
this.element.querySelectorAll(".selectatr").forEach((el) => el.addEventListener("focus", (event) => {
71106
event.target.hasFocus = true;
72-
});
73-
html.find(".selectatr").on("blur", (event) => {
107+
}));
108+
this.element.querySelectorAll(".selectatr").forEach((el) => el.addEventListener("blur", (event) => {
74109
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-
});
110+
}));
111+
this.element.querySelectorAll(".selectatr").forEach((el) => el.addEventListener("change", changeFontSize));
112+
this.element.querySelectorAll(".selectatr").forEach((el) => el.addEventListener("wheel", changeFontSize));
113+
}
114+
115+
static async reset() {
116+
const defaultAlphabets = new game.polyglot.languageProvider.constructor().fonts;
117+
game.polyglot.languageProvider.fonts = defaultAlphabets;
118+
await game.settings.set("polyglot", "Alphabets", game.polyglot.languageProvider.fonts);
119+
const defaultCustomFontSizes = game.settings.settings.get("polyglot.CustomFontSizes").default;
120+
await game.settings.set("polyglot", "CustomFontSizes", defaultCustomFontSizes);
121+
this.close();
122+
SettingsConfig.reloadConfirm({ world: true });
89123
}
90124

91-
async _updateObject() {
125+
static async #onSubmit() {
92126
const customFontSizes = {};
93127
for (const [key, font] of Object.entries(this.fonts)) {
94128
customFontSizes[key] = font.size;

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

Lines changed: 4 additions & 14 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,20 +14,6 @@
1014
margin: auto;
1115
}
1216

13-
.window-content {
14-
padding: 0;
15-
}
16-
form {
17-
height: 100%;
18-
section {
19-
padding: 1rem;
20-
overflow: hidden auto;
21-
}
22-
footer {
23-
margin: 1rem;
24-
flex: 0;
25-
}
26-
}
2717
.polyglot-languages-list {
2818
margin: 0;
2919

‎src/templates/FontSettings.hbs‎

Lines changed: 36 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,37 @@
1-
<form class="flexcol" autocomplete="off" onsubmit="event.preventDefault()">
2-
<section class="content">
3-
<div class="settings-list">
4-
<ul class="polyglot-languages-list">
5-
<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>
11-
</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>
1+
<form class="standard-form scrollable">
2+
<ul class="polyglot-languages-list">
3+
<li class="flexrow">
4+
<div class="font-name">{{localize "POLYGLOT.Font"}}</div>
5+
<div class="fontSize">{{localize "POLYGLOT.FontSize"}}</div>
6+
<div class="fontSize">{{localize "POLYGLOT.AlphabeticOnly"}}</div>
7+
<div class="fontSize">{{localize "POLYGLOT.Logographical"}}</div>
8+
<div class="polyglot-alphabet">ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
9+
</li>
10+
<hr />
11+
{{#each fonts}}
12+
<li class="flexrow">
13+
<div class="font-name">{{this.label}}</div>
14+
<div class="fontSize">
15+
{{formInput
16+
@root.fields.fontSize
17+
value=this.size
18+
name=""
19+
classes="selectatr"
20+
type="number"
21+
step=10
22+
}}
23+
</div>
24+
<div class="fontSize">
25+
{{formInput @root.fields.alphabeticOnly value=this.alphabeticOnly name="" classes="alphabeticOnly"}}
26+
</div>
27+
<div class="fontSize">
28+
{{formInput @root.fields.logographical value=this.logographical name="" classes="logographical"}}
29+
</div>
30+
<div
31+
class="polyglot-alphabet"
32+
style="font-size: {{this.size}}%; font-family: {{this.family}}"
33+
>ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
34+
</li>
35+
{{/each}}
36+
</ul>
4537
</form>

0 commit comments

Comments
 (0)