https://sansebastiandemariquita-tolima.gov.co/SiteAssets/V3/Compon…/assets/js/floatBottom-functions.js

1"use strict";
2
3import buttonsData from "./buttons-data.js";
4
5document.addEventListener("DOMContentLoaded", () => {
6  const containerButtons = document.querySelector(".floatButtonBottom__options");
7  const fragmentContent = document.createDocumentFragment();
8
9  for (const { text, icon, link, target } of buttonsData) {
10    const buttonItem = document.createElement("li");
11    buttonItem.classList.add("floatButtonBottom__btn");
12
13    const buttonWrapper = document.createElement("a");
14    buttonWrapper.classList.add("floatButtonBottom__link");
15    buttonWrapper.href = link;
16    if (target) buttonWrapper.target = "_blank";
17    buttonWrapper.innerHTML = `<i class="${icon} floatButtonBottom__icon" aria-hidden="true"></i><span class="floatButtonBottom__tooltip">${text}</span>`;
18
19    buttonItem.appendChild(buttonWrapper);
20    fragmentContent.appendChild(buttonItem);
21  }
22
23  containerButtons.appendChild(fragmentContent);
24
25  document.addEventListener("click", (e) => {
26    if (e.target.classList.contains("floatButtonBottom__button")) {
27      e.preventDefault();
28      containerButtons.classList.toggle("floatButtonBottom__options--active");
29      e.target.classList.toggle("floatButtonBottom__button--active");
30    }
31  });
32});