site/apps/web/public/wesp/js/kiosk-nav-menu.js

(function () {
  const STYLE_ID = "wespKioskMenuStyles";
  const OVERLAY_ID = "wespKioskMenuOverlay";

  function ensureStyles() {
    if (document.getElementById(STYLE_ID)) return;
    const style = document.createElement("style");
    style.id = STYLE_ID;
    style.textContent = `
      #${OVERLAY_ID} {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.62);
        z-index: 4300;
        align-items: center;
        justify-content: center;
        padding: 16px;
      }
      #${OVERLAY_ID} .wesp-kiosk-menu-panel {
        width: min(420px, 96vw);
        background: #1f1f1f;
        border: 1px solid #2f2f2f;
        border-radius: 14px;
        box-shadow: 0 0 24px rgba(0, 0, 0, 0.45);
        color: #fff;
        padding: 16px;
      }
      #${OVERLAY_ID} .wesp-kiosk-menu-logo-wrap {
        text-align: center;
        margin-bottom: 12px;
      }
      #${OVERLAY_ID} .wesp-kiosk-menu-logo {
        height: 32px;
        width: auto;
      }
      #${OVERLAY_ID} .wesp-kiosk-menu-links {
        display: flex;
        flex-direction: column;
        gap: 8px;
      }
      #${OVERLAY_ID} .wesp-kiosk-menu-link {
        display: block;
        text-decoration: none;
        color: #fff;
        background: #2b2b2b;
        border: 1px solid #3a3a3a;
        border-radius: 10px;
        padding: 12px 14px;
        font-size: 15px;
      }
      #${OVERLAY_ID} .wesp-kiosk-menu-link:hover {
        background: #1b66a8;
        border-color: #4ea8ff;
      }
      #${OVERLAY_ID} .wesp-kiosk-menu-close {
        margin-top: 10px;
        width: 100%;
        border: 1px solid #7a7a7a;
        border-radius: 10px;
        background: #3a3a3a;
        color: #fff;
        padding: 10px 12px;
        font-size: 15px;
        cursor: pointer;
      }
      #${OVERLAY_ID} .wesp-kiosk-menu-close:hover {
        background: #505050;
      }
      .wesp-kiosk-menu-button {
        position: fixed !important;
        top: 16px !important;
        right: 16px !important;
        z-index: 4250 !important;
        width: 56px !important;
        height: 56px !important;
        border-radius: 50% !important;
        border: 1px solid #1f6fd6 !important;
        background: #1f6fd6 !important;
        color: #fff !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        cursor: pointer !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35) !important;
        font-size: 30px !important;
        line-height: 1 !important;
      }
      .wesp-kiosk-menu-button:hover {
        background: #1859a8 !important;
        transform: scale(1.04);
      }
      .wesp-kiosk-menu-button img {
        display: none !important;
      }
      @media (max-width: 768px) {
        .wesp-kiosk-menu-button {
          top: 12px !important;
          right: 12px !important;
          width: 50px !important;
          height: 50px !important;
          font-size: 28px !important;
        }
      }
    `;
    document.head.appendChild(style);
  }

  function ensureOverlay() {
    ensureStyles();
    let overlay = document.getElementById(OVERLAY_ID);
    if (overlay) return overlay;

    overlay = document.createElement("div");
    overlay.id = OVERLAY_ID;
    overlay.innerHTML = `
      <div class="wesp-kiosk-menu-panel" role="dialog" aria-modal="true" aria-label="Меню киоска">
        <div class="wesp-kiosk-menu-logo-wrap">
          <img src="/static/logo2.png" alt="WESP" class="wesp-kiosk-menu-logo">
        </div>
        <div class="wesp-kiosk-menu-links">
          <a class="wesp-kiosk-menu-link" href="/scales">Главная</a>
          <a class="wesp-kiosk-menu-link" href="#" id="calibrationLink">Калибровка</a>
          <a class="wesp-kiosk-menu-link" href="#" id="dbCheckLink">Проверка БД</a>
          <a class="wesp-kiosk-menu-link" href="#" id="pairTerminalLink">Привязать терминал</a>
        </div>
        <button type="button" class="wesp-kiosk-menu-close" id="wespKioskMenuClose">Закрыть</button>
      </div>
    `;
    document.body.appendChild(overlay);

    const panel = overlay.querySelector(".wesp-kiosk-menu-panel");
    const closeBtn = overlay.querySelector("#wespKioskMenuClose");
    const close = () => {
      overlay.style.display = "none";
    };
    closeBtn.addEventListener("click", close);
    overlay.addEventListener("click", (e) => {
      if (e.target === overlay) close();
    });
    panel.addEventListener("click", (e) => e.stopPropagation());
    return overlay;
  }

  function setup(opts) {
    const options = opts || {};
    const selector =
      options.menuButtonSelector || "#kioskMenuButton, .kiosk-menu-btn, .nav-button";
    const menuButton = document.querySelector(selector);
    if (!menuButton) return;

    ensureStyles();
    const overlay = ensureOverlay();
    if (menuButton.dataset.wespMenuBound === "1") return;
    menuButton.classList.add("wesp-kiosk-menu-button");
    menuButton.setAttribute("title", "Меню");
    menuButton.setAttribute("aria-label", "Открыть меню");
    menuButton.textContent = "☰";
    menuButton.dataset.wespMenuBound = "1";
    menuButton.removeAttribute("onclick");
    menuButton.addEventListener("click", function (e) {
      e.preventDefault();
      overlay.style.display = "flex";
    });
  }

  window.WespKioskMenu = { setup, ensureOverlay };
})();