alpinejs_horizontal_slider #alpinejs

alpinejs_horizontal_slider.heex

  <section>
    <div class="mt-2 mb-4 text-xl font-bold">Import-Attempts</div>
    <div
      class="flex p-1 space-x-4 overflow-x-scroll cursor-all-scroll"
      x-data={"horizontalscroll(#{length(@attempts)})"}
    >
      <%= for item <- @attempts do %>
        <.editlink
          upload_id={item.upload_id}
          import_attempt_code={item.code}
          context={@context}
          link_type={:patch}
          class={[
            "flex flex-col min-w-[10rem] p-1 border rounded hover:ring-2 hover:ring-red-400",
            if(item.code == @attempt_code, do: "ring-2 ring-red-400")
          ]}
        >
          <div class="text-xs text-right opacity-20"><%= item.id %></div>
          <div class="text-center uppercase">
            <%= item.code %>
          </div>
          <div class="text-indigo-300 "><%= item.state %></div>
          <div class="text-xs">
            <%= item.updated_at |> to_string() %>
          </div>
        </.editlink>
      <% end %>
    </div>
  </section>
  <script>
    (() => {

        const defineComponent = () => {

            Alpine.data('horizontalscroll', () => ({
                init() {
                    const slider = this.$el;
                    let isDown = false;
                    let startX;
                    let scrollLeft;

                    slider.addEventListener('mousedown', (e) => {
                      isDown = true;
                      slider.classList.add('active');
                      startX = e.pageX - slider.offsetLeft;
                      scrollLeft = slider.scrollLeft;
                    });
                    slider.addEventListener('mouseleave', () => {
                      isDown = false;
                      slider.classList.remove('active');
                    });
                    slider.addEventListener('mouseup', () => {
                      isDown = false;
                      slider.classList.remove('active');
                    });
                    slider.addEventListener('mousemove', (e) => {
                      if(!isDown) return;
                      e.preventDefault();
                      const x = e.pageX - slider.offsetLeft;
                      const walk = (x - startX) * 3; //scroll-fast
                      slider.scrollLeft = scrollLeft - walk;
                    });
                },
            }));
        };
        if (window.Alpine) {
            defineComponent.apply();
        } else {
            document.addEventListener('alpine:init', defineComponent)
        }
    })();
  </script>