https://purificacion-tolima.gov.co/SiteAssets/V2/Componentes/FloatButtonV2/assets/js/main.js

1import data from "/SiteAssets/V2/Componentes/FloatButtonV2/assets/js/data.js";
2
3document.addEventListener("DOMContentLoaded", () => {
4  const btnCircle = document.querySelector(".buttonCircle__div"),
5    contentCircle = document.querySelector(".buttonCircle"),
6    containerCircle = document.querySelector(".buttonCircle__options");
7
8  btnCircle.addEventListener("click", () => {
9    contentCircle.classList.toggle("buttonCircle--active");
10  });
11
12  // Se crea fragmento para insertar elementos.
13  const fragmentContent = document.createDocumentFragment();
14
15  for (const i in data) {
16    // Se crea elemento tipo enlace (a)
17    let button = document.createElement("a");
18    // Se agrega clase principal para elemento tipo opcion
19    button.classList.add("buttonCircle__btn");
20    // Se ingresa atributo href al elemento
21    button.setAttribute("href", data[i].link);
22    button.setAttribute("aria-label", data[i].text);
23    // Si el elemento es tipo icono se agrega el siguiente contenido
24    if (data[i].link !== "none") {
25      button.innerHTML = `
26        <i class="${data[i].icon} buttonCircle__icon"></i>
27        <span class="buttonCircle__tooltip">${data[i].text}</span>`;
28    }
29    // Se insertan todos los elementos en el fragmento
30    fragmentContent.appendChild(button);
31  }
32
33  // Se inserta fragmento en contenedor principal de opciones
34  containerCircle.appendChild(fragmentContent);
35
36  const allItems = document.querySelectorAll(".buttonCircle__btn");
37
38  allItems.forEach((item, i) => {
39    item.style.transitionDelay = `0.${(i / 2) * 2}s`;
40  });
41
42  let tamañoTotal = parseInt(allItems.length) - 1;
43
44  allItems[0].style.left = `2px`;
45  allItems[0].style.top = `85px`;
46  allItems[tamañoTotal].style.left = `2px`;
47  allItems[tamañoTotal].style.top = `-85px`;
48
49  if (allItems.length === 7) {
50    allItems[1].style.left = "40px";
51    allItems[1].style.top = "61px";
52    allItems[2].style.left = "75px";
53    allItems[2].style.top = "37px";
54    allItems[3].style.left = "94px";
55    allItems[3].style.top = "0px";
56    allItems[4].style.left = "75px";
57    allItems[4].style.top = "-37px";
58    allItems[5].style.left = "40px";
59    allItems[5].style.top = "-61px";
60  } else if (allItems.length === 6) {
61    allItems[1].style.left = "47px";
62    allItems[1].style.top = "61px";
63    allItems[2].style.left = "85px";
64    allItems[2].style.top = "30px";
65    allItems[3].style.left = "85px";
66    allItems[3].style.top = "-30px";
67    allItems[4].style.left = "47px";
68    allItems[4].style.top = "-61px";
69  } else if (allItems.length === 5) {
70    allItems[1].style.left = "50px";
71    allItems[1].style.top = "50px";
72    allItems[2].style.left = "85px";
73    allItems[2].style.top = "0px";
74    allItems[3].style.left = "50px";
75    allItems[3].style.top = "-50px";
76  } else if (allItems.length === 4) {
77    allItems[1].style.left = "55px";
78    allItems[1].style.top = "43px";
79    allItems[2].style.left = "55px";
80    allItems[2].style.top = "-43px";
81    allItems.forEach((el) => {
82      el.style.width = "42px";
83      el.style.height = "42px";
84    });
85  } else if (allItems.length === 3) {
86    allItems[1].style.left = "72px";
87    allItems[1].style.top = "0px";
88    allItems.forEach((el) => {
89      el.style.width = "45px";
90      el.style.height = "45px";
91    });
92  } else {
93    console.log("No hay items");
94  }
95});