https://campoalegre-huila.gov.co/Style%20Library/AccessibilityBar/Assets/js/design.js

1import data from "./data.js";
2
3const design = () => {
4  const $s4Workspace = document.getElementById("s4-workspace"),
5    direccion = `/Style Library/AccessibilityBar/Assets`;
6
7  const accessibilityContainer = document.createElement("div");
8
9  accessibilityContainer.classList.add(
10    "accessibilityBar",
11    "accessibilityBar--right" // lateral derecha
12  );
13
14  accessibilityContainer.setAttribute("tabindex", "0");
15
16  accessibilityContainer.innerHTML = `
17  <figure class="accessibilityBar__figure" tabindex="0">
18    <img src="${direccion}/images/logo.svg" alt="logo de accesibilidad" class="accessibilityBar__logo" title="Accesibilidad" tabindex="0">
19    <!-- Botón cerrar dentro del figure -->
20    <button class="accessibilityBar__close" type="button" aria-label="Cerrar" title="Cerrar" hidden>×</button>
21  </figure>
22  <div class="accessibilityBar__content" tabindex="0" aria-expanded="false">
23    <div class="head-access">
24      <h3 class="accessibilityBar__title">Accesibilidad</h3>
25      <!-- (El botón ya no va aquí) -->
26    </div>
27    <div class="accessibilityBar__options">
28      <audio src="#" id="mp3AC" class="accessibilityBar__audio"></audio>
29    </div>
30  </div>
31`;
32
33  $s4Workspace.append(accessibilityContainer);
34
35  const optionsContainer = document.querySelector(".accessibilityBar__options");
36
37  let fragmentContent = document.createDocumentFragment();
38
39  for (const i in data) {
40    let optionAc = document.createElement("div");
41
42    optionAc.classList.add("accessibilityBar__option");
43    optionAc.setAttribute("id", `${data[i].id}`);
44
45    optionAc.innerHTML = `
46      <strong class="accessibilityBar__icon accessibilityBar__icon--${data[i].img}"></strong>
47      <p class="accessibilityBar__p" tabindex="0">${data[i].text}</p>`;
48
49    if (i == 13) {
50      optionAc.addEventListener("click", () => {
51        location.href = "https://centroderelevo.gov.co/632/w3-channel.html";
52      });
53      optionAc.innerHTML = `  
54        <strong class="accessibilityBar__icon accessibilityBar__icon--${data[i].img}"></strong>
55        <a href="https://centroderelevo.gov.co/632/w3-channel.html" class="accessibilityBar__p" target="_blank" tabindex="0">${data[i].text}</a>`;
56    }
57
58    fragmentContent.appendChild(optionAc);
59  }
60
61  const traductor = document.createElement("div");
62  traductor.className = "traductor-center";
63  traductor.innerHTML = `
64    <div class="translate-container">
65      <div class="gtranslate_wrapper"></div>
66    </div>
67  `;
68
69  fragmentContent.appendChild(traductor);
70  optionsContainer.appendChild(fragmentContent);
71};
72
73export default design;