Jump to content

Widget:FryasFontPicker: Difference between revisions

From Oera Linda Wiki
No edit summary
No edit summary
 
(One intermediate revision by the same user not shown)
Line 1: Line 1:
<div id="fryas_font_picker">
<div id="fryas_font_picker">
<div class="label">Choose a Fryas font:</div>
<div class="label">Change font:</div>
<select class="picker">
<select class="picker">
  <option value="latin">Latin</option>
   <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>
Line 13: Line 13:
     var fryas = document.querySelectorAll(".fryas");
     var fryas = document.querySelectorAll(".fryas");
     switch (option) {
     switch (option) {
       case "latin":
       case "standskrift":
         fryas.forEach((element) => {
         fryas.forEach((element) => {
          element.classList.remove("standskrift");
           element.classList.remove("wagumskrift");
           element.classList.remove("wagumskrift");
          element.classList.remove("latin");
         });
         });
         break;
         break;
       case "standskrift":
       case "wagumskrift":
         fryas.forEach((element) => {
         fryas.forEach((element) => {
           element.classList.add("standskrift");
           element.classList.add("wagumskrift");
           element.classList.remove("wagumskrift");
           element.classList.remove("latin");
         });
         });
         break;
         break;
       case "wagumskrift":
       case "latin":
         fryas.forEach((element) => {
         fryas.forEach((element) => {
           element.classList.remove("standskrift");
           element.classList.remove("wagumskrift");
           element.classList.add("wagumskrift");
           element.classList.add("latin");
         });
         });
         break;
         break;

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>