https://palermo-huila.gov.co/Style%20Library/ScreenReaderV3/main.js

1import design from "/Style Library/ScreenReaderV3/Assets/js/design.js";
2
3window.addEventListener("DOMContentLoaded", () => {
4  //insertar barra lateral al html
5  design();
6
7  /* Elementos del Dom para el funcionamiento de la barra, ademas de la
8    seleccion de todas las letras. */
9  const $audioIMG = document.querySelector(".accessibilityBar__icon--play"),
10    $screenreaderLogo = document.querySelector(".accessibilityBar__figure"),
11    $screenreader = document.querySelector(".accessibilityBar"),
12    BODY_ELEMENT = document.querySelector("body"),
13    $allFont = document.querySelectorAll(
14      "span:not(.glyphicon), p, a, h1, h2, h3, h4, h5, input, div,strong:not(.fa)"
15    ),
16    $itemsMenu = document.querySelectorAll(".accessibilityBar__option"),
17    $allLinks = document.querySelectorAll("a");
18
19  const elements = {};
20  const ids = [
21    "narratorAc",
22    "moreSizeAc",
23    "lessSizeAc",
24    "restartAc",
25    "dyslexicAc",
26    "grayAc",
27    "cursorAc",
28    "contrastAc",
29    "linksAc",
30    "moreSpacingAc",
31    "lessSpacingAc",
32  ];
33
34  for (let i = 0; i < ids.length; i++) {
35    elements[ids[i]] = document.getElementById(ids[i]);
36  }
37
38  // Se inicializa el narrador, el array donde guardamos el tamaño de letra de cada texto en la pagina web.
39  let speakerOnOff = false,
40    speak = new SpeechSynthesisUtterance(),
41    arrayFont = [],
42    spacing = 1;
43
44  //Funcion para la activacion del menu y animacion de opciones en barra de accesibilidad.
45  function activeMenu() {
46    $screenreader.classList.toggle("accessibilityBar--active");
47    $itemsMenu.forEach((item, index) => {
48      item.style.animation
49        ? (item.style.animation = "")
50        : (item.style.animation = `itemFade .5s ease forwards ${index / 7 + 0.3}s`);
51    });
52  }
53
54  //Funcion para cambiar el tamaño de letra, es decir aumentarla o disminuirla,Ademas de tener la opción resetearla.
55  function changeSizeFont(type) {
56    $allFont.forEach((el, i) => {
57      let fontSize = window.getComputedStyle(el, null).getPropertyValue("font-size");
58      fontSize = parseFloat(fontSize);
59      arrayFont.push(fontSize);
60      if (type == "more" && fontSize < 20) {
61        el.style.fontSize = `${fontSize + 0.5}px`;
62      } else if (type == "less" && fontSize > 10) {
63        el.style.fontSize = `${fontSize - 0.5}px`;
64      } else if (type == "normal") {
65        arrayFont.forEach((font, index) => {
66          if (i == index) el.style.fontSize = `${font}px`;
67          if (index == null) el.style.fontSize = `${14}px`;
68        });
69        el.style.letterSpacing = `normal`;
70        if (el.classList.contains("font-dyslexic")) el.classList.toggle("font-dyslexic");
71        if (BODY_ELEMENT.classList.contains("scr_highcontrast"))
72          BODY_ELEMENT.classList.toggle("scr_highcontrast");
73        if (BODY_ELEMENT.classList.contains("scr_grayHues"))
74          BODY_ELEMENT.classList.toggle("scr_grayHues");
75        if (BODY_ELEMENT.classList.contains("scr_bigcursor"))
76          BODY_ELEMENT.classList.toggle("scr_bigcursor");
77        if (el.classList.contains("src_highlightLink")) el.classList.remove("src_highlightLink");
78        // translateLanguage("español");
79      } else {
80        el.style.fontSize = `${fontSize}px`;
81      }
82    });
83  }
84
85  //Funcion para cambiar el espaciado del texto.
86  function changeSpacing(type) {
87    if (type == "more" && spacing < 7) {
88      $allFont.forEach((el) => {
89        el.style.letterSpacing = `${spacing * 0.5}px`;
90      });
91      spacing++;
92    } else if (type == "less" && spacing > -1) {
93      $allFont.forEach((el) => {
94        el.style.letterSpacing = `${spacing * 0.5}px`;
95      });
96      spacing--;
97    } else {
98      $allFont.forEach((el) => {
99        el.style.letterSpacing = `${spacing}px`;
100      });
101    }
102  }
103
104  //Funcion para detectar la etiqueta
105  function returnTag(e) {
106    let tag = e.srcElement ? e.srcElement.tagName : e.target.type;
107    return tag;
108  }
109
110  //Funcion para a partir de la etiqueta, encontrar el texto
111  function returnText(e) {
112    if (
113      returnTag(e) == "P" ||
114      returnTag(e) == "H1" ||
115      returnTag(e) == "H2" ||
116      returnTag(e) == "H3" ||
117      returnTag(e) == "H4" ||
118      returnTag(e) == "H5" ||
119      returnTag(e) == "H6" ||
120      returnTag(e) == "A" ||
121      returnTag(e) == "LI" ||
122      returnTag(e) == "SPAN" ||
123      returnTag(e) == "STRONG" ||
124      returnTag(e) == "BUTTON" ||
125      returnTag(e) == "SELECT" ||
126      returnTag(e) == "LABEL" ||
127      returnTag(e) == "TD" ||
128      returnTag(e) == "B"
129    ) {
130      return e.target.textContent;
131    } else if (returnTag(e) == "DIV" && e.target.textContent.length <= 100) {
132      return e.target.textContent;
133    } else if (returnTag(e) == "IMG" && e.target.getAttribute("alt")) {
134      return e.target.getAttribute("alt");
135    } else if (returnTag(e) == "INPUT" && e.target.getAttribute("value")) {
136      return e.target.getAttribute("value");
137    } else if (returnTag(e) == "A" && e.target.getAttribute("aria-label")) {
138      return e.target.getAttribute("aria-label");
139    } else if (returnTag(e) == "INPUT" && e.target.getAttribute("placeholder")) {
140      return e.target.getAttribute("placeholder");
141    } else {
142      return "";
143    }
144  }
145
146  //Funcion de narrador para leer texto de pagina web al hacer el evento hover.
147  function screenReader(value) {
148    let mediaQuery = window.matchMedia("(max-width: 800px)");
149
150    speakerOnOff = value;
151
152    if (mediaQuery.matches) {
153      BODY_ELEMENT.addEventListener("click", (e) => {
154        if (returnText(e) != "") {
155          speak.text = returnText(e);
156          if (speakerOnOff) {
157            speechSynthesis.speak(speak);
158          }
159        }
160      });
161
162      BODY_ELEMENT.addEventListener("mouseout", () => {
163        speechSynthesis.cancel();
164      });
165    } else {
166      BODY_ELEMENT.addEventListener("mouseover", (e) => {
167        if (returnText(e) != "") {
168          speak.text = returnText(e);
169          if (speakerOnOff) {
170            speechSynthesis.speak(speak);
171          }
172        }
173      });
174
175      BODY_ELEMENT.addEventListener("mouseout", () => {
176        speechSynthesis.cancel();
177      });
178    }
179
180    // Dependiendo del estado del narrador se cambiara su icono para indicar si esta activo o inactivo
181    if (speakerOnOff === true) {

182      $audioIMG.classList.remove("accessibilityBar__icon--play");
183      $audioIMG.classList.add("accessibilityBar__icon--stop");
184    } else {
185      $audioIMG.classList.add("accessibilityBar__icon--play");
186      $audioIMG.classList.remove("accessibilityBar__icon--stop");
187    }
188  }
189
190  //Funcion para activar o desactivar narrador en evento click
191  function screenReaderClick(value) {
192    speakerOnOff = value;
193    speak.lang = "es-ES";
194    speak.rate = 1.3;
195    sessionStorage.setItem("valueNarrador", speakerOnOff);
196
197    screenReader(speakerOnOff);
198  }
199
200  //Funcion para sonido de abrir o cerrar barra de accesibilidad en evento hover al logo.
201  const audios = {
202    open: `/Style Library/ScreenReaderV3/Assets/sounds/open.mp3`,
203    close: `/Style Library/ScreenReaderV3/Assets/sounds/close.mp3`,
204  };
205
206  const $audioContent = document.getElementById("mp3AC");
207
208  function soundContent(option) {
209    switch (option) {
210      case "active":
211        if (speakerOnOff == true) {
212          $audioContent.pause();
213          $audioContent.currentTime = 0;
214        } else {
215          if ($screenreader.classList.contains("accessibilityBar--active")) {
216            $audioContent.setAttribute("src", `${audios.close}`);
217            $audioContent.play();
218          } else {
219            $audioContent.setAttribute("src", `${audios.open}`);
220            $audioContent.play();
221          }
222        }
223        break;
224      case "desactive":
225        $audioContent.pause();
226        $audioContent.currentTime = 0;
227        break;
228    }
229  }
230
231  //Funcion para guardar valor de narrador, es decir si esta activo o no, para no volver a activarlo en una pagina interna.
232  (function screenReaderAuto() {
233    let value = sessionStorage.getItem("valueNarrador");
234
235    value == "true" ? (speakerOnOff = true) : (speakerOnOff = false);
236
237    screenReader(speakerOnOff);
238
239    if (speakerOnOff == true) {
240      $audioContent.pause();
241      $audioContent.currentTime = 0;
242    }
243  })();
244
245  // funcion de traductor, seleccionamos los elementos del traductor
246  const $btnTranslate = document.querySelector(".accessibilityBar__select"),
247    $translateOptions = document.querySelector(".translateAc"),
248    $optionsTranslate = document.querySelectorAll(".translateAc__a");
249
250  //Seleccionamos el contenedor de los idiomas y apartir de la seleccion del usuario se enviara el valor y se eligira el idioma correcto en el traductor de google,
251  // en caso de que no se logre seleccionar el contenedor de idiomas por defecto de google, validar si contiene la misma clase que la seleccionda en este momento,
252  function translateLanguage(lang) {
253    let $frame = $(".VIpgJd-ZVi9od-xl07Ob-OEVmcd.skiptranslate:first");
254
255    $frame
256      .contents()
257      .find(`.VIpgJd-ZVi9od-vH1Gmf-ibnC6b span.text:contains(${lang})`)
258      .get(0)
259      .click();
260    return false;
261  }
262
263  $optionsTranslate.forEach((el) => {
264    el.addEventListener("click", () => {
265      let lang = el.getAttribute("data-lang");
266      translateLanguage(lang);
267    });
268  });
269
270  //Delegacion de eventos.
271  document.addEventListener("mouseover", (e) => {
272    if (e.target === $screenreaderLogo) soundContent("active");
273  });
274
275  document.addEventListener("mouseout", (e) => {
276    if (e.target === $screenreaderLogo) soundContent("desactive");
277  });
278
279  document.addEventListener("click", (e) => {
280    if (e.target == $screenreaderLogo) activeMenu();
281
282    if (e.target == elements.moreSizeAc) changeSizeFont("more");
283
284    if (e.target == elements.lessSizeAc) changeSizeFont("less");
285
286    if (e.target == elements.restartAc) changeSizeFont("normal");
287
288    if (e.target == elements.moreSpacingAc) changeSpacing("more");
289
290    if (e.target == elements.lessSpacingAc) changeSpacing("less");
291
292    if (e.target == elements.contrastAc) BODY_ELEMENT.classList.toggle("scr_highcontrast");
293
294    if (e.target == elements.dyslexicAc)
295      $allFont.forEach((el) => el.classList.toggle("font-dyslexic"));
296
297    if (e.target == elements.grayAc) BODY_ELEMENT.classList.toggle("scr_grayHues");
298
299    if (e.target == elements.cursorAc) BODY_ELEMENT.classList.toggle("scr_bigcursor");
300
301    if (e.target == elements.linksAc)
302      $allLinks.forEach((el) => el.classList.toggle("src_highlightLink"));
303
304    if (e.target == elements.narratorAc) screenReaderClick(!speakerOnOff);
305
306    if (e.target === $btnTranslate || e.target === `${$btnTranslate} > *`) {
307      $translateOptions.classList.toggle("translateAc--active");
308    } else {
309      $translateOptions.classList.remove("translateAc--active");
310    }
311  });
312
313  document.addEventListener("keypress", (e) => {
314    if (e.key == "enter" || e.keyCode == 13) {
315      if (e.target == $screenreaderLogo) activeMenu();
316
317      if (e.target == elements.moreSizeAc) changeSizeFont("more");
318
319      if (e.target == elements.lessSizeAc) changeSizeFont("less");
320
321      if (e.target == elements.restartAc) changeSizeFont("normal");
322
323      if (e.target == elements.moreSpacingAc) changeSpacing("more");
324
325      if (e.target == elements.lessSpacingAc) changeSpacing("less");
326
327      if (e.target == elements.contrastAc) BODY_ELEMENT.classList.toggle("scr_highcontrast");
328
329      if (e.target == elements.dyslexicAc)
330        $allFont.forEach((el) => el.classList.toggle("font-dyslexic"));
331
332      if (e.target == elements.grayAc) BODY_ELEMENT.classList.toggle("scr_grayHues");
333
334      if (e.target == elements.cursorAc) BODY_ELEMENT.classList.toggle("scr_bigcursor");
335
336      if (e.target == elements.linksAc)
337        $allLinks.forEach((el) => el.classList.toggle("src_highlightLink"));
338
339      if (e.target == elements.narratorAc) screenReaderClick(!speakerOnOff);
340
341      if (e.target == $btnTranslate) $translateOptions.classList.toggle("translateAc--active");
342    }
343  });
344});