https://turbaco-bolivar.gov.co/Style%20Library/AccessibilityBar/main.js

1import design from "/Style Library/AccessibilityBar/Assets/js/design.js";
2
3//insertar barra lateral al html
4design();
5
6window.addEventListener("DOMContentLoaded", () => {
7  
8  //variable para cambiar dirección donde se encuentran ubicados los archivos de la barra de accesibilidad.
9  const direccion = `/Style Library/AccessibilityBar`;
10
11  /* Elementos del Dom para el funcionamiento de la barra, ademas de la
12    seleccion de todas las letras. */
13  const $audioIMG = document.querySelector(".accessibilityBar__icon--play"),
14    $screenreaderLogo = document.querySelector(".accessibilityBar__figure"),
15    $screenreader = document.querySelector(".accessibilityBar"),
16    BODY_ELEMENT = document.querySelector("html"),
17    $allFont = document.querySelectorAll(
18      "span:not(.glyphicon), p, a, h1, h2, h3, h4, h5, input, div,strong:not(.fa)"
19    ),
20    $itemsMenu = document.querySelectorAll(".accessibilityBar__option"),
21    $allLinks = document.querySelectorAll("a");
22
23  const elements = {};
24  const ids = [
25    "narratorAc",
26    "moreSizeAc",
27    "lessSizeAc",
28    "restartAc",
29    "dyslexicAc",
30    "signLanguageAc",
31    "readingLineAc",
32    "grayAc",

33    "cursorAc",
34    "contrastAc",
35    "linksAc",
36    "moreSpacingAc",
37    "lessSpacingAc",
38  ];
39
40  for (let i = 0; i < ids.length; i++) {
41    elements[ids[i]] = document.getElementById(ids[i]);
42  }
43
44  // Se inicializa el narrador, el array donde guardamos el tamaño de letra de cada texto en la pagina web.
45  let speakerOnOff = false,
46    speak = new SpeechSynthesisUtterance(),
47    arrayFont = [],
48    spacing = 1;
49
50  //Funcion para la activacion del menu y animacion de opciones en barra de accesibilidad.
51  function activeMenu() {
52    $screenreader.classList.toggle("accessibilityBar--active");
53    $itemsMenu.forEach((item, index) => {
54      item.style.animation
55        ? (item.style.animation = "")
56        : (item.style.animation = `itemFade .5s ease forwards ${
57            index / 7 + 0.3
58          }s`);
59    });
60  }
61
62  //Funcion para cambiar el tamaño de letra, es decir aumentarla o disminuirla,Ademas de tener la opción resetearla.
63  function changeSizeFont(type) {
64    $allFont.forEach((el, i) => {
65      let fontSize = window
66        .getComputedStyle(el, null)
67        .getPropertyValue("font-size");
68      fontSize = parseFloat(fontSize);
69      arrayFont.push(fontSize);
70      if (type == "more" && fontSize < 20) {
71        el.style.fontSize = `${fontSize + 0.5}px`;
72      } else if (type == "less" && fontSize > 10) {
73        el.style.fontSize = `${fontSize - 0.5}px`;
74      } else if (type == "normal") {
75        arrayFont.forEach((font, index) => {
76          if (i == index) el.style.fontSize = `${font}px`;
77          if (index == null) el.style.fontSize = `${14}px`;
78        });
79        el.style.letterSpacing = `normal`;
80        if (el.classList.contains("font-dyslexic"))
81          el.classList.toggle("font-dyslexic");
82        if (el.classList.contains("font-handsLanguage"))
83          el.classList.toggle("font-handsLanguage");
84        if (BODY_ELEMENT.classList.contains("scr_highcontrast"))
85          BODY_ELEMENT.classList.toggle("scr_highcontrast");
86        if (BODY_ELEMENT.classList.contains("scr_grayHues"))
87          BODY_ELEMENT.classList.toggle("scr_grayHues");
88        if (BODY_ELEMENT.classList.contains("scr_bigcursor"))
89          BODY_ELEMENT.classList.toggle("scr_bigcursor");
90        if (el.classList.contains("src_highlightLink"))
91          el.classList.remove("src_highlightLink");
92        if (el.querySelector("#lineReader"))
93          el.querySelector("#lineReader").remove();
94        // translateLanguage("español");
95      } else {
96        el.style.fontSize = `${fontSize}px`;
97      }
98    });
99  }
100
101  //Function para agregar linea de texto
102  function readingLine() {
103    const $s4Workspace = document.getElementById("s4-workspace");
104    if (document.getElementById("lineReader")) {
105      document.getElementById("lineReader").remove();
106    } else {
107      let line = document.createElement("span");
108      line.setAttribute(
109        "class",
110        "w-[100vw] h-[5px] fixed bg-gobColor translate-x-[-50%] top-0 left-[50%] pointer-events-none z-[9999]"
111      );
112      line.setAttribute("id", "lineReader");
113
114      $s4Workspace.appendChild(line);
115
116      $s4Workspace.addEventListener("mousemove", (e) => {
117        line.style.top = `${e.clientY}px`;
118      });
119    }
120  }
121
122  //Funcion para cambiar el espaciado del texto.
123  function changeSpacing(type) {
124    if (type == "more" && spacing < 7) {
125      $allFont.forEach((el) => {
126        el.style.letterSpacing = `${spacing * 0.5}px`;
127      });
128      spacing++;
129    } else if (type == "less" && spacing > -1) {
130      $allFont.forEach((el) => {
131        el.style.letterSpacing = `${spacing * 0.5}px`;
132      });
133      spacing--;
134    } else {
135      $allFont.forEach((el) => {
136        el.style.letterSpacing = `${spacing}px`;
137      });
138    }
139  }
140
141  //Funcion para detectar la etiqueta
142  function returnTag(e) {
143    let tag = e.srcElement ? e.srcElement.tagName : e.target.type;
144    return tag;
145  }
146
147  //Funcion para a partir de la etiqueta, encontrar el texto
148  function returnText(e) {
149    if (
150      returnTag(e) == "P" ||
151      returnTag(e) == "H1" ||
152      returnTag(e) == "H2" ||
153      returnTag(e) == "H3" ||
154      returnTag(e) == "H4" ||
155      returnTag(e) == "H5" ||
156      returnTag(e) == "H6" ||
157      returnTag(e) == "A" ||
158      returnTag(e) == "LI" ||
159      returnTag(e) == "SPAN" ||
160      returnTag(e) == "STRONG" ||
161      returnTag(e) == "BUTTON" ||
162      returnTag(e) == "SELECT" ||
163      returnTag(e) == "LABEL" ||
164      returnTag(e) == "TD" ||
165      returnTag(e) == "B"
166    ) {
167      return e.target.textContent;
168    } else if (returnTag(e) == "DIV" && e.target.textContent.length <= 100) {
169      return e.target.textContent;
170    } else if (returnTag(e) == "IMG" && e.target.getAttribute("alt")) {
171      return e.target.getAttribute("alt");
172    } else if (returnTag(e) == "INPUT" && e.target.getAttribute("value")) {
173      return e.target.getAttribute("value");
174    } else if (
175      returnTag(e) == "INPUT" &&
176      e.target.getAttribute("placeholder")
177    ) {
178      return e.target.getAttribute("placeholder");
179    } else {
180      return "";
181    }
182  }
183
184  //Funcion de narrador para leer texto de pagina web al hacer el evento hover.
185  function screenReader(value) {
186    let mediaQuery = window.matchMedia("(max-width: 800px)");
187
188    speakerOnOff = value;
189
190    if (mediaQuery.matches) {
191      BODY_ELEMENT.addEventListener("click", (e) => {
192        if (returnText(e) != "") {
193          speak.text = returnText(e);
194          if (speakerOnOff) {
195            speechSynthesis.speak(speak);
196          }
197        }
198      });
199
200      BODY_ELEMENT.addEventListener("mouseout", () => {
201        speechSynthesis.cancel();
202      });
203    } else {
204      BODY_ELEMENT.addEventListener("mouseover", (e) => {
205        if (returnText(e) != "") {
206          speak.text = returnText(e);
207          if (speakerOnOff) {
208            speechSynthesis.speak(speak);
209          }
210        }
211      });
212
213      BODY_ELEMENT.addEventListener("mouseout", () => {
214        speechSynthesis.cancel();
215      });
216    }
217
218    // Dependiendo del estado del narrador se cambiara su icono para indicar si esta activo o inactivo
219    if (speakerOnOff === true) {

220      $audioIMG.classList.remove("accessibilityBar__icon--play");
221      $audioIMG.classList.add("accessibilityBar__icon--stop");
222    } else {
223      $audioIMG.classList.add("accessibilityBar__icon--play");
224      $audioIMG.classList.remove("accessibilityBar__icon--stop");
225    }
226  }
227
228  //Funcion para activar o desactivar narrador en evento click
229  function screenReaderClick(value) {
230    speakerOnOff = value;
231    speak.lang = "es-ES";
232    speak.rate = 1.3;
233    sessionStorage.setItem("valueNarrador", speakerOnOff);
234
235    screenReader(speakerOnOff);
236  }
237
238  //Funcion para sonido de abrir o cerrar barra de accesibilidad en evento hover al logo.
239  const audios = {
240    open: `${direccion}/Assets/sounds/open.mp3`,
241    close: `${direccion}/Assets/sounds/close.mp3`,
242  };
243
244  const $audioContent = document.getElementById("mp3AC");
245
246  function soundContent(option) {
247    switch (option) {
248      case "active":
249        if (speakerOnOff == true) {
250          $audioContent.pause();
251          $audioContent.currentTime = 0;
252        } else {
253          if ($screenreader.classList.contains("accessibilityBar--active")) {
254            $audioContent.setAttribute("src", `${audios.close}`);
255            $audioContent.play();
256          } else {
257            $audioContent.setAttribute("src", `${audios.open}`);
258            $audioContent.play();
259          }
260        }
261        break;
262      case "desactive":
263        $audioContent.pause();
264        $audioContent.currentTime = 0;
265        break;
266    }
267  }
268
269  //Funcion para guardar valor de narrador, es decir si esta activo o no, para no volver a activarlo en una pagina interna.
270  (function screenReaderAuto() {
271    let value = sessionStorage.getItem("valueNarrador");
272
273    value == "true" ? (speakerOnOff = true) : (speakerOnOff = false);
274
275    screenReader(speakerOnOff);
276
277    if (speakerOnOff == true) {
278      $audioContent.pause();
279      $audioContent.currentTime = 0;
280    }
281  })();
282
283  //Delegacion de eventos.
284  document.addEventListener("mouseover", (e) => {
285    if (e.target === $screenreaderLogo) soundContent("active");
286  });
287
288  document.addEventListener("mouseout", (e) => {
289    if (e.target === $screenreaderLogo) soundContent("desactive");
290  });
291
292  document.addEventListener("click", (e) => {
293    if (e.target == $screenreaderLogo) activeMenu();
294
295    if (e.target == elements.moreSizeAc) changeSizeFont("more");
296
297    if (e.target == elements.lessSizeAc) changeSizeFont("less");
298
299    if (e.target == elements.restartAc) changeSizeFont("normal");
300
301    if (e.target == elements.moreSpacingAc) changeSpacing("more");
302
303    if (e.target == elements.lessSpacingAc) changeSpacing("less");
304
305    if (e.target == elements.contrastAc)
306      BODY_ELEMENT.classList.toggle("scr_highcontrast");
307
308    if (e.target == elements.dyslexicAc)
309      $allFont.forEach((el) => el.classList.toggle("font-dyslexic"));
310
311    if (e.target == elements.signLanguageAc)
312      $allFont.forEach((el) => el.classList.toggle("font-handsLanguage"));
313
314    if (e.target == elements.grayAc)
315      BODY_ELEMENT.classList.toggle("scr_grayHues");
316
317    if (e.target == elements.cursorAc)
318      BODY_ELEMENT.classList.toggle("scr_bigcursor");
319
320    if (e.target == elements.readingLineAc) readingLine();
321
322    if (e.target == elements.linksAc)
323      $allLinks.forEach((el) => el.classList.toggle("src_highlightLink"));
324
325    if (e.target == elements.narratorAc) screenReaderClick(!speakerOnOff);
326  });
327
328  document.addEventListener("keypress", (e) => {
329    if (e.key == "enter" || e.keyCode == 13) {
330      if (e.target == $screenreaderLogo) activeMenu();
331
332      if (e.target == elements.moreSizeAc) changeSizeFont("more");
333
334      if (e.target == elements.lessSizeAc) changeSizeFont("less");
335
336      if (e.target == elements.restartAc) changeSizeFont("normal");
337
338      if (e.target == elements.moreSpacingAc) changeSpacing("more");
339
340      if (e.target == elements.lessSpacingAc) changeSpacing("less");
341
342      if (e.target == elements.contrastAc)
343        BODY_ELEMENT.classList.toggle("scr_highcontrast");
344
345      if (e.target == elements.dyslexicAc)
346        $allFont.forEach((el) => el.classList.toggle("font-dyslexic"));
347
348      if (e.target == elements.signLanguageAc)
349        $allFont.forEach((el) => el.classList.toggle("font-handsLanguage"));
350
351      if (e.target == elements.grayAc)
352        BODY_ELEMENT.classList.toggle("scr_grayHues");
353
354      if (e.target == elements.cursorAc)
355        BODY_ELEMENT.classList.toggle("scr_bigcursor");
356
357      if (e.target == elements.readingLineAc) readingLine();
358
359      if (e.target == elements.linksAc)
360        $allLinks.forEach((el) => el.classList.toggle("src_highlightLink"));
361
362      if (e.target == elements.narratorAc) screenReaderClick(!speakerOnOff);
363    }
364  });
365});
366
367