https://mitu-vaupes.gov.co/SiteAssets/V2/Componentes/FloatButtonV1/assets/js/main.js

1import buttonInformation from "./data.js";
2
3document.addEventListener("DOMContentLoaded", () => {
4  // Se inicializa constante con valor del boton y contenedor de opciones
5  const buttonFloat = document.querySelector(".floatButton"),
6    buttonsContainer = document.querySelector(".floatButton__options");
7
8  // Se crea fragmento para insertar elementos.
9  const fragmentContent = document.createDocumentFragment();
10
11  // Apartir de importar la informacion de cada opcion se recorre el objeto
12  for (const i in buttonInformation) {
13    // Se crea elemento tipo enlace (a)
14    let button = document.createElement("a");
15    // Se agrega clase principal para elemento tipo opcion
16    button.classList.add("floatButton__item");
17    //Se cambia color del elemento
18    button.style.background = `${buttonInformation[i].color}`;
19    button.style.boxShadow = `0 20px 20px -10px ${buttonInformation[i].color}`;
20
21    // Se ingresa atributo href al elemento
22    button.setAttribute("href", buttonInformation[i].link);
23
24    if (buttonInformation[i].data_target !== "none"){
25      button.dataset.target = buttonInformation[i].data_target;
26
27      button.dataset.toggle = 'modal'
28    };
29
30    // Si el elemento es tipo icono se agrega el siguiente contenido
31    if (buttonInformation[i].link !== "none") {
32      button.innerHTML = `<i class="${buttonInformation[i].icon} floatButton__icon"></i>

33      <span class="floatButton__tooltip"
34        >${buttonInformation[i].text}</span>`;
35    }
36
37    // Si el elemento es tipo imagen se agrega el siguiente contenido
38    if (buttonInformation[i].img !== "none") {
39      button.innerHTML = `<img
40      src="${buttonInformation[i].img}"
41      alt="${buttonInformation[i].text}"
42      class="floatButton__img ${
43        buttonInformation[i].imgFit ? "floatButton__img--fit" : ""
44      }"
45    />
46      <span class="floatButton__tooltip"
47      >${buttonInformation[i].text}</span>`;
48    }
49
50    // Se insertan todos los elementos en el fragmento
51    fragmentContent.appendChild(button);
52  }
53
54  // Se inserta fragmento en contenedor principal de opciones
55  buttonsContainer.appendChild(fragmentContent);
56
57  // Se crea funcion para activacion del boton y animacion a sus opciones
58  function activeButtons() {
59    buttonFloat.classList.toggle("floatButton--active");
60
61    const button = document.querySelectorAll(".floatButton__item");
62
63    button.forEach((el, i) => {
64      el.style.animation
65        ? (el.style.animation = "")
66        : (el.style.animation = `come-in 0.4s forwards ${i / 4 + 0.2}s`);
67    });
68  }
69
70  //Se realiza delegacion de eventos, especificamente en el evento click.
71  document.addEventListener("click", (e) => {
72    if (
73      e.target === buttonFloat ||
74      e.target.classList.contains("floatButton__button")
75    ) {
76      activeButtons();
77    }
78  });
79});