Pattern Library

{% extends 'patterns/organisms/header/simple_header.html' %}

{% block header_margin_class %}{% endblock %}

{% block after_header %}
  <div
    class="
      bg-pirati-yellow py-4
    "
  >
    <div class="container--wide">
      {% include "patterns/atoms/buttons/round_button.html" with button_text="Zobrazit na mapě" id="map-opener" %}
    </div>
  </div>

  <div
    class="
      opacity-0 absolute top-0 left-0 overflow-hidden

      py-8

      bg-pirati-yellow
    "
    id="address-popup"
    data-is-open="false"
  >
    <div
      class="
        container--wide flex flex-col gap-4

        lg:flex-row lg:justify-between
      "
    >
      <div
        class="prose prose-black leading-6"
      >
        <address>
          <div class="mb-3">
            <strong>
              K Pirátskému centru je možné se dostat autobusy č. 13, 15 a 17,<br>
              s výstupem na stanici Želivského.
            </strong>
          </div>

          <div class="whitespace-pre-line">Mozilla Foundation
331 E Evelyn Ave
Mountain View, CA 94041
USA</div>
        </address>
      </div>

      <div
        class="
          w-full [&_*]:mt-0

          lg:w-[35rem]
        "
      >
        <!-- Placeholder instead of map -->
        <img
          class="w-full mt-8"
          src="https://picsum.photos/536/354"
        >
      </div>
    </div>
  </div>

  <script>
    document.getElementById("map-opener").addEventListener(
      "click",
      (event) => {
        const addressPopup = document.getElementById("address-popup");

        if (addressPopup.dataset.isOpen === "false") {
          document.getElementById(`${event.currentTarget.id}-inner-text`).innerHTML = "Uzavřít mapu"

          addressPopup.dataset.isOpen = "true";
          addressPopup.classList.remove("absolute");
          addressPopup.classList.remove("top-0");
          addressPopup.classList.remove("left-0");
          addressPopup.classList.add("duration-300");
          addressPopup.classList.remove("opacity-0");

          // For some reason, this can't run immediately
          setTimeout(
            () => { addressPopup.scrollIntoView() },
            1
          )
        } else {
          document.getElementById(`${event.currentTarget.id}-inner-text`).innerHTML = "Zobrazit na mapě"

          addressPopup.dataset.isOpen = "false";
          addressPopup.classList.add("absolute");
          addressPopup.classList.add("top-0");
          addressPopup.classList.add("left-0");
          addressPopup.classList.remove("duration-300");
          addressPopup.classList.add("opacity-0");
        }
      }
    )
  </script>
{% endblock %}