https://sanjuandeuraba-antioquia.gov.co/SiteAssets/V3/Componentes/Barra-de-Accesibilidad/main.js

1import design from "/SiteAssets/V3/Componentes/Barra-de-Accesibilidad/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 ${
51            index / 7 + 0.3
52          }s`);
53    });
54  }
55
56  //Funcion para cambiar el tamaño de letra, es decir aumentarla o disminuirla,Ademas de tener la opción resetearla.
57  function changeSizeFont(type) {
58    $allFont.forEach((el, i) => {
59      let fontSize = window
60        .getComputedStyle(el, null)
61        .getPropertyValue("font-size");
62      fontSize = parseFloat(fontSize);
63      arrayFont.push(fontSize);
64      if (type == "more" && fontSize < 20) {
65        el.style.fontSize = `${fontSize + 0.5}px`;
66      } else if (type == "less" && fontSize > 10) {
67        el.style.fontSize = `${fontSize - 0.5}px`;
68      } else if (type == "normal") {
69        arrayFont.forEach((font, index) => {
70          if (i == index) el.style.fontSize = `${font}px`;
71          if (index == null) el.style.fontSize = `${14}px`;
72        });
73        el.style.letterSpacing = `normal`;
74        if (el.classList.contains("font-dyslexic"))
75          el.classList.toggle("font-dyslexic");
76        if (BODY_ELEMENT.classList.contains("scr_highcontrast"))
77          BODY_ELEMENT.classList.toggle("scr_highcontrast");
78        if (BODY_ELEMENT.classList.contains("scr_grayHues"))
79          BODY_ELEMENT.classList.toggle("scr_grayHues");
80        if (BODY_ELEMENT.classList.contains("scr_bigcursor"))
81          BODY_ELEMENT.classList.toggle("scr_bigcursor");
82        if (el.classList.contains("src_highlightLink"))
83          el.classList.remove("src_highlightLink");
84        // translateLanguage("español");
85      } else {
86        el.style.fontSize = `${fontSize}px`;
87      }
88    });
89  }
90
91  //Funcion para cambiar el espaciado del texto.
92  function changeSpacing(type) {
93    if (type == "more" && spacing < 7) {
94      $allFont.forEach((el) => {
95        el.style.letterSpacing = `${spacing * 0.5}px`;
96      });
97      spacing++;
98    } else if (type == "less" && spacing > -1) {
99      $allFont.forEach((el) => {
100        el.style.letterSpacing = `${spacing * 0.5}px`;
101      });
102      spacing--;
103    } else {
104      $allFont.forEach((el) => {
105        el.style.letterSpacing = `${spacing}px`;
106      });
107    }
108  }
109
110  //Funcion para detectar la etiqueta
111  function returnTag(e) {
112    let tag = e.srcElement ? e.srcElement.tagName : e.target.type;
113    return tag;
114  }
115
116  //Funcion para a partir de la etiqueta, encontrar el texto
117  function returnText(e) {
118    if (
119      returnTag(e) == "P" ||
120      returnTag(e) == "H1" ||
121      returnTag(e) == "H2" ||
122      returnTag(e) == "H3" ||
123      returnTag(e) == "H4" ||
124      returnTag(e) == "H5" ||
125      returnTag(e) == "H6" ||
126      returnTag(e) == "A" ||
127      returnTag(e) == "LI" ||
128      returnTag(e) == "SPAN" ||
129      returnTag(e) == "STRONG" ||
130      returnTag(e) == "BUTTON" ||
131      returnTag(e) == "SELECT" ||
132      returnTag(e) == "LABEL" ||
133      returnTag(e) == "TD" ||
134      returnTag(e) == "B"
135    ) {
136      return e.target.textContent;
137    } else if (returnTag(e) == "DIV" && e.target.textContent.length <= 100) {
138      return e.target.textContent;
139    } else if (returnTag(e) == "IMG" && e.target.getAttribute("alt")) {
140      return e.target.getAttribute("alt");
141    } else if (returnTag(e) == "INPUT" && e.target.getAttribute("value")) {
142      return e.target.getAttribute("value");
143    } else if (returnTag(e) == "A" && e.target.getAttribute("aria-label")) {
144      return e.target.getAttribute("aria-label");
145    } else if (
146      returnTag(e) == "INPUT" &&
147      e.target.getAttribute("placeholder")
148    ) {
149      return e.target.getAttribute("placeholder");
150    } else {
151      return "";
152    }
153  }
154
155  //Funcion de narrador para leer texto de pagina web al hacer el evento hover.
156  function screenReader(value) {
157    let mediaQuery = window.matchMedia("(max-width: 800px)");
158
159    speakerOnOff = value;
160
161    if (mediaQuery.matches) {
162      BODY_ELEMENT.addEventListener("click", (e) => {
163        if (returnText(e) != "") {
164          speak.text = returnText(e);
165          if (speakerOnOff) {
166            speechSynthesis.speak(speak);
167          }
168        }
169      });
170
171      BODY_ELEMENT.addEventListener("mouseout", () => {
172        speechSynthesis.cancel();
173      });
174    } else {
175      BODY_ELEMENT.addEventListener("mouseover", (e) => {
176        if (returnText(e) != "") {
177          speak.text = returnText(e);
178          if (speakerOnOff) {
179            speechSynthesis.speak(speak);
180          }
181        }
182      });
183
184      BODY_ELEMENT.addEventListener("mouseout", () => {
185        speechSynthesis.cancel();
186      });
187    }
188
189    // Dependiendo del estado del narrador se cambiara su icono para indicar si esta activo o inactivo
190    if (speakerOnOff === true) {

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