Widget:FryasFontPicker: Difference between revisions
Appearance
No edit summary |
No edit summary |
||
| (9 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
<div id="fryas_font_picker"> | <div id="fryas_font_picker"> | ||
<div class="label"> | <div class="label">Change font:</div> | ||
<select class="picker"> | <select class="picker"> | ||
<option value="standskrift">Standskrift</option> | <option value="standskrift">Standskrift</option> | ||
<option value="wagumskrift">Wagumskrift</option> | <option value="wagumskrift">Wagumskrift</option> | ||
<option value="latin">Latin</option> | |||
</select> | </select> | ||
</div> | </div> | ||
<script> | <script> | ||
var lang_picker = document.querySelector("#fryas_font_picker > .picker"); | window.addEventListener("DOMContentLoaded", (win_ev) => { | ||
var lang_picker = document.querySelector("#fryas_font_picker > .picker"); | |||
function pick_font(option) { | |||
var fryas = document.querySelectorAll(".fryas"); | |||
switch (option) { | |||
case "standskrift": | |||
fryas.forEach((element) => { | |||
element.classList.remove("wagumskrift"); | |||
element.classList.remove("latin"); | |||
}); | |||
break; | |||
case "wagumskrift": | |||
fryas.forEach((element) => { | |||
element.classList.add("wagumskrift"); | |||
element.classList.remove("latin"); | |||
}); | |||
break; | |||
case "latin": | |||
fryas.forEach((element) => { | |||
element.classList.remove("wagumskrift"); | |||
element.classList.add("latin"); | |||
}); | |||
break; | |||
} | |||
} | |||
lang_picker.addEventListener("change", (ch_ev) => { | |||
pick_font(lang_picker.value); | |||
localStorage.setItem("preferred_fryas_font", lang_picker.value); | |||
}); | |||
var pref_font = localStorage.getItem("preferred_fryas_font"); | |||
if (pref_font != null) { | |||
lang_picker.value = pref_font; | |||
pick_font(pref_font); | |||
} | } | ||
}); | }); | ||
</script> | </script> | ||
Latest revision as of 17:01, 7 June 2023
Change font:
<select class="picker">
<option value="standskrift">Standskrift</option> <option value="wagumskrift">Wagumskrift</option> <option value="latin">Latin</option>
</select>
<script> window.addEventListener("DOMContentLoaded", (win_ev) => {
var lang_picker = document.querySelector("#fryas_font_picker > .picker");
function pick_font(option) {
var fryas = document.querySelectorAll(".fryas");
switch (option) {
case "standskrift":
fryas.forEach((element) => {
element.classList.remove("wagumskrift");
element.classList.remove("latin");
});
break;
case "wagumskrift":
fryas.forEach((element) => {
element.classList.add("wagumskrift");
element.classList.remove("latin");
});
break;
case "latin":
fryas.forEach((element) => {
element.classList.remove("wagumskrift");
element.classList.add("latin");
});
break;
}
}
lang_picker.addEventListener("change", (ch_ev) => {
pick_font(lang_picker.value);
localStorage.setItem("preferred_fryas_font", lang_picker.value);
});
var pref_font = localStorage.getItem("preferred_fryas_font");
if (pref_font != null) {
lang_picker.value = pref_font;
pick_font(pref_font);
}
}); </script>