http://tvr1.tvr.ro/src/js/asb.js

1/**
2 * ASB - Accessibility Settings Bar
3 * version 0.5
4 */
5
6(function() {
7  /**
8   * Content
9   */
10  
11   // Tecla que será usada para complementar o atalho do teclado.
12  const accessKey = 4;
13
14  // Definições dos botões
15  const btns = {
16    btnHighContrast: {
17      active: true,
18      dataAccessibility: "contrast",
19      class: "setAccessibility",
20      icon: "FontAwesome",
21      iconClass: ["fas", "fa-eye-low-vision"],
22      text: "Contrast mare",
23    },
24    btnDarkMode: {
25      active: true,
26      dataAccessibility: "dark",
27      class: "setAccessibility",
28      icon: "FontAwesome",
29      iconClass: ["fas", "fa-moon"],
30      text: "Contrast",
31    },
32    btnIncFont: {
33      active: true,
34      dataAccessibility: "incFont",
35      class: "setAccessibility",
36      icon: "A+",
37      iconClass: "",
38      text: "Mărește textul",
39    },
40    btnOriFont: {
41      active: true,
42      dataAccessibility: "oriFont",
43      class: "setAccessibility",
44      icon: "Aa",
45      iconClass: "",
46      text: "Text normal",
47    },
48    btnDecFont: {
49      active: true,
50      dataAccessibility: "decFont",
51      class: "setAccessibility",
52      icon: "A-",
53      iconClass: "",
54      text: "Micșorează textul",
55    },
56    btnMarkerLine: {
57      active: true,
58      dataAccessibility: "markerLine",
59      class: "setAccessibility",
60      icon: "FontAwesome",
61      iconClass: ["fas", "fa-ruler-horizontal"],
62      text: "Marcaj",
63    },
64    btnReadingLine: {
65      active: true,
66      dataAccessibility: "readingLine",
67      class: "setAccessibility",
68      icon: "FontAwesome",
69      iconClass: ["fas", "fa-ruler-horizontal"],
70      text: "Linie ghidată",
71    },
72    btnReset: {
73      active: true,
74      dataAccessibility: "reset",
75      class: "setAccessibility",
76      icon: "FontAwesome",
77      iconClass: ["fas", "fa-redo-alt"],
78      text: "Resetează",
79    },
80  }
81
82  /**
83   * Creating the bar
84   */
85
86  const accessibilityBar = document.createElement("div");
87  accessibilityBar.id = "accessibilityBar";
88  document.body.insertBefore(accessibilityBar, document.body.firstChild);
89
90  /**
91   * Creating main button
92   */
93  let btnAccessibilityBar;
94
95  function createMainButton() {
96    btnAccessibilityBar = document.createElement("button");
97    btnAccessibilityBar.id = "universalAccessBtn";
98    btnAccessibilityBar.type = "button";
99    btnAccessibilityBar.accessKey = accessKey;
100    accessibilityBar.appendChild(btnAccessibilityBar);
101
102    const icon = document.createElement("i");
103    btnAccessibilityBar.appendChild(icon);
104    icon.classList.add("fas", "fa-universal-access");
105
106    const spanText = document.createElement("span");
107    const spanTextNode = document.createTextNode("Menu de accesibilitate");
108    spanText.appendChild(spanTextNode);
109    btnAccessibilityBar.appendChild(spanText);
110  }
111  createMainButton();
112
113  /**
114   * Creating anothers button
115   */
116
117  function createButtons(el) {
118    const button = document.createElement("button");
119    button.type = "button";
120    button.classList.add(el.class);
121    button.setAttribute('data-accessibility', el.dataAccessibility);
122    accessibilityBar.appendChild(button);
123
124    const wrapIcon = document.createElement("strong");
125    button.appendChild(wrapIcon);
126
127    if (el.icon === "FontAwesome") {
128      const icon = document.createElement("i");
129      wrapIcon.appendChild(icon);
130      icon.classList.add(...el.iconClass);
131    } else {
132      const textIcon = document.createTextNode(el.icon);
133      wrapIcon.appendChild(textIcon);
134    }
135
136    const textButton = document.createTextNode(el.text);
137    button.appendChild(textButton);
138  }
139  Object.keys(btns).forEach(function (item) {
140    if(btns[item].active){
141      createButtons(btns[item]);
142    }
143   });
144 
145
146  const html = document.documentElement; //<html> for font-size settings
147  const body = document.body; //<body> for the adjusts classes
148  const btnAccessibility = document.querySelectorAll(".setAccessibility"); // Getting settings buttons
149
150  if (btnAccessibilityBar) {
151    setTimeout(function() {
152      btnAccessibilityBar.classList.add("collapsed");
153    }, 2000);
154  }
155
156  /**
157   * ReadingLine
158   */
159
160  const readingLine = document.createElement("div");
161  readingLine.id = "readingLine";
162  document.body.insertBefore(readingLine, document.body.firstChild);
163
164  html.addEventListener("mousemove", function(e) {
165    if (body.classList.contains("accessibility_readingLine")) {
166      let linePositionY = e.pageY - 20;
167      // console.log(linePositionY);
168      const elReadingLine = document.querySelector("#readingLine"); // Toggle button
169      elReadingLine.style.top = `${linePositionY}px`;
170    }
171  });
172
173  /**
174   * MarkerLine
175   */
176
177  const markerLine = document.createElement("div");
178  markerLine.id = "markerLine";
179  document.body.insertBefore(markerLine, document.body.firstChild);
180
181  html.addEventListener("mousemove", function(e) {
182    if (body.classList.contains("accessibility_markerLine")) {
183      let linePositionY = e.pageY - 20;
184      // console.log(linePositionY);
185      const elmarkerLine = document.querySelector("#markerLine"); // Toggle button
186      elmarkerLine.style.top = `${linePositionY}px`;
187    }
188  });
189
190  /*

191=== === === === === === === === === === === === === === === === === ===
192=== === === === === === === === openBar === === === === === === === ===
193=== === === === === === === === === === === === === === === === === ===
194*/
195
196  btnAccessibilityBar.addEventListener("click", () =>
197    accessibilityBar.classList.toggle("active")
198  );
199
200  /*
201=== === === === === === === === === === === === === === === === === ===
202=== === === === === ===  toggleAccessibilities  === === === === === ===
203=== === === === === === === === === === === === === === === === === ===
204*/
205
206  function toggleAccessibilities(action) {
207    switch (action) {
208      case "contrast":
209        window.toggleContrast();
210        break;
211      case "dark":
212        window.toggleDark();
213        break;
214      case "incFont":
215        window.toggleFontSize(action);
216        break;
217      case "oriFont":
218        window.toggleFontSize(action);
219        break;
220      case "decFont":
221        window.toggleFontSize(action);
222        break;
223      case "readingLine":
224        body.classList.toggle("accessibility_readingLine");
225        break;
226      case "markerLine":
227        body.classList.toggle("accessibility_markerLine");
228        break;
229      case "reset":
230        Dark.currentState === true ? Dark.setState(false) : null;
231        Contrast.currentState === true ? Contrast.setState(false) : null;
232        window.toggleFontSize("oriFont");
233        body.classList.remove("accessibility_readingLine");
234        body.classList.remove("accessibility_markerLine");
235        break;
236      default:
237        break;
238    }
239    accessibilityBar.classList.toggle("active");
240  }
241
242  btnAccessibility.forEach(button =>
243    button.addEventListener("click", () =>
244      toggleAccessibilities(button.dataset.accessibility)
245    )
246  );
247
248  /*
249=== === === === === === === === === === === === === === === === === ===
250=== === === === === === ===  FontSize   === === === === === === === ===
251=== === === === === === === === === === === === === === === === === ===
252*/
253
254  const htmlFontSize = parseFloat(
255    getComputedStyle(document.documentElement).getPropertyValue("font-size")
256  );
257  let FontSize = {
258    storage: "fontSizeState",
259    cssClass: "fontSize",
260    currentState: null,
261    check: checkFontSize,
262    getState: getFontSizeState,
263    setState: setFontSizeState,
264    toggle: toggleFontSize,
265    updateView: updateViewFontSize
266  };
267
268  window.toggleFontSize = function(action) {
269    FontSize.toggle(action);
270  };
271
272  FontSize.check();
273
274  function checkFontSize() {
275    this.updateView();
276  }
277
278  function getFontSizeState() {
279    return sessionStorage.getItem(this.storage)
280      ? sessionStorage.getItem(this.storage)
281      : 100;
282  }
283
284  function setFontSizeState(state) {
285    sessionStorage.setItem(this.storage, "" + state);
286    this.currentState = state;
287    this.updateView();
288  }
289
290  function updateViewFontSize() {
291    if (this.currentState === null) this.currentState = this.getState();
292
293    this.currentState
294      ? (html.style.fontSize = (this.currentState / 100) * htmlFontSize + "px")
295      : "";
296
297    this.currentState
298      ? body.classList.add(this.cssClass + this.currentState)
299      : "";
300  }
301
302  function toggleFontSize(action) {
303    switch (action) {
304      case "incFont":
305        if (parseFloat(this.currentState) < 200) {
306          body.classList.remove(this.cssClass + this.currentState);
307          this.setState(parseFloat(this.currentState) + 20);
308        } else {
309          alert("Limite atingido!");
310        }
311        break;
312      case "oriFont":
313        body.classList.remove(this.cssClass + this.currentState);
314        this.setState(100);
315        break;
316      case "decFont":
317        if (parseFloat(this.currentState) > 40) {
318          body.classList.remove(this.cssClass + this.currentState);
319          this.setState(parseFloat(this.currentState) - 20);
320        } else {
321          alert("Limite atingido!");
322        }
323        break;
324      default:
325        break;
326    }
327  }
328
329  /*
330=== === === === === === === === === === === === === === === === === ===
331=== === === === === ===  HighConstrast  === === === === === === === ===
332=== === === === === === === === === === === === === === === === === ===
333*/
334  let Contrast = {
335    storage: "contrastState",
336    cssClass: "contrast",
337    currentState: null,
338    check: checkContrast,
339    getState: getContrastState,
340    setState: setContrastState,
341    toggle: toggleContrast,
342    updateView: updateViewContrast
343  };
344
345  window.toggleContrast = function() {

346    Contrast.toggle();
347  };
348
349  Contrast.check();
350
351  function checkContrast() {
352    this.updateView();
353  }
354
355  function getContrastState() {
356    return sessionStorage.getItem(this.storage) === "true";
357  }
358
359  function setContrastState(state) {
360    sessionStorage.setItem(this.storage, "" + state);
361    this.currentState = state;
362    this.updateView();
363  }
364
365  function updateViewContrast() {
366    if (this.currentState === null) this.currentState = this.getState();
367
368    this.currentState
369      ? body.classList.add(this.cssClass)
370      : body.classList.remove(this.cssClass);
371  }
372
373  function toggleContrast() {
374    this.setState(!this.currentState);
375    Dark.currentState === true ? Dark.setState(false) : null;
376  }
377
378  /*
379=== === === === === === === === === === === === === === === === === ===
380=== === === === === === ===   DarkMode  === === === === === === === ===
381=== === === === === === === === === === === === === === === === === ===
382*/
383  let Dark = {
384    storage: "darkState",
385    cssClass: "darkmode",
386    currentState: null,
387    check: checkDark,

388    getState: getDarkState,
389    setState: setDarkState,
390    toggle: toggleDark,
391    updateView: updateViewDark
392  };
393
394  window.toggleDark = function() {
395    Dark.toggle();
396  };
397
398  Dark.check();
399
400  function checkDark() {
401    this.updateView();
402  }
403
404  function getDarkState() {
405    return sessionStorage.getItem(this.storage) === "true";
406  }
407
408  function setDarkState(state) {
409    sessionStorage.setItem(this.storage, "" + state);
410    this.currentState = state;
411    this.updateView();
412  }
413
414  function updateViewDark() {
415    if (this.currentState === null) this.currentState = this.getState();
416
417    this.currentState
418      ? body.classList.add(this.cssClass)
419      : body.classList.remove(this.cssClass);
420  }
421
422  function toggleDark() {
423    this.setState(!this.currentState);
424    Contrast.currentState === true ? Contrast.setState(false) : null;
425  }
426})();