Fix scroll on mobile + minor fix form management

CHANGELOG.md

@@ -3,9 +3,10 @@
 - Add ARM Docker image
 - Refactor all runtime configuration
 - Improve local storage with PRESENTATION_STORAGE_DIR environment variable
-- Fix poll panel scroll on mobile
+- Fix poll/form panel scroll on mobile
 - Fix message length validation
 - Fix message word break
+- Minor fixes on form management
 
 ## v1.5.0
 

assets/js/app.js

@@ -484,19 +484,6 @@ window.addEventListener("phx:page-loading-stop", info => {
   topbar.hide()
 })
 
-// Used to fix the scroll issue on mobile on poll panel
-window.addEventListener("claper:toggle-poll", (event) => {
-  let extended = document.getElementById("extended-poll")
-  let parent = document.getElementById("poll-wrapper-parent")
-  if (extended.style.display == "block") {
-    parent.classList.add("overflow-y-auto")
-    parent.classList.add("h-full")
-  } else {
-    parent.classList.remove("overflow-y-auto")
-    parent.classList.remove("h-full")
-  }
-})
-
 const renderOnlineUsers = function(presences) {
   let onlineUsers = Presence.list(presences, (_id, {metas: [user, ...rest]}) => {
     return onlineUserTemplate(user);

lib/claper_web/live/event_live/manage.ex

@@ -51,6 +51,7 @@ defmodule ClaperWeb.EventLive.Manage do
           timeout: 500
         })
         |> poll_at_position(false)
+        |> form_at_position(false)
 
       {:ok, socket, temporary_assigns: [posts: [], form_submits: []]}
     end
@@ -157,7 +158,8 @@ defmodule ClaperWeb.EventLive.Manage do
     {:noreply,
      socket
      |> assign(:state, new_state)
-     |> poll_at_position}
+     |> poll_at_position
+     |> form_at_position}
   end
 
   @impl true
@@ -493,6 +495,27 @@ defmodule ClaperWeb.EventLive.Manage do
     end
   end
 
+  defp form_at_position(
+         %{assigns: %{event: event, state: state}} = socket,
+         broadcast \\ true
+       ) do
+    with form <-
+           Claper.Forms.get_form_current_position(
+             event.presentation_file.id,
+             state.position
+           ) do
+      if broadcast do
+        Phoenix.PubSub.broadcast(
+          Claper.PubSub,
+          "event:#{event.uuid}",
+          {:current_form, form}
+        )
+      end
+
+      socket |> assign(:current_form, form)
+    end
+  end
+
   defp ban(user, %{assigns: %{event: event, state: state}} = socket) do
     {:ok, new_state} =
       Claper.Presentations.update_presentation_state(state, %{

lib/claper_web/live/event_live/manage.html.heex

@@ -714,7 +714,7 @@
           <% end %>
           <div
             id="form-list"
-            class={"overflow-y-auto #{if Enum.count(@form_submits) > 0, do: 'max-h-full'} pb-5 px-5"}
+            class={"overflow-y-auto #{if Enum.count(@form_submits) > 0, do: 'max-h-full'} pb-5 pt-8 px-5"}
             phx-update="append"
             data-forms-nb={Enum.count(@form_submits)}
             phx-hook="ScrollIntoDiv"

lib/claper_web/live/event_live/poll_component.ex

@@ -134,6 +134,5 @@ defmodule ClaperWeb.EventLive.PollComponent do
       in: "animate__animated animate__zoomIn",
       to: "#extended-poll"
     )
-    |> JS.dispatch("claper:toggle-poll", to: "#poll-wrapper-parent")
   end
 end

lib/claper_web/live/event_live/presenter.ex

@@ -48,6 +48,7 @@ defmodule ClaperWeb.EventLive.Presenter do
         |> assign(:posts, list_posts(socket, event.uuid))
         |> assign(:reacts, [])
         |> poll_at_position
+        |> form_at_position
 
       {:ok, socket, temporary_assigns: [posts: []]}
     end
@@ -201,6 +202,16 @@ defmodule ClaperWeb.EventLive.Presenter do
     end
   end
 
+  defp form_at_position(%{assigns: %{event: event, state: state}} = socket) do
+    with form <-
+           Claper.Forms.get_form_current_position(
+             event.presentation_file.id,
+             state.position
+           ) do
+      socket |> assign(:current_form, form)
+    end
+  end
+
   defp list_posts(_socket, event_id) do
     Claper.Posts.list_posts(event_id, [:event, :reactions])
   end

lib/claper_web/live/event_live/show.html.heex

@@ -52,7 +52,7 @@
     <%= if @current_poll do %>
       <div
         id="poll-wrapper-parent"
-        class="animate__animated animate__zoomInDown w-full lg:w-1/3 lg:mx-auto fixed top-16 z-10 px-2 lg:px-7 pb-6 h-full overflow-y-auto"
+        class="animate__animated animate__zoomInDown w-full lg:w-1/3 lg:mx-auto fixed top-16 z-10 px-2 lg:px-7 pb-6 max-h-screen overflow-y-auto"
       >
         <div class="transition-all" id="poll-wrapper">
           <.live_component
@@ -70,7 +70,10 @@
     <% end %>
 
     <%= if @current_form do %>
-      <div class="animate__animated animate__zoomInDown w-full lg:w-1/3 lg:mx-auto fixed top-16 z-10 px-2 lg:px-7">
+      <div
+        id="form-wrapper-parent"
+        class="animate__animated animate__zoomInDown w-full lg:w-1/3 lg:mx-auto fixed top-16 z-10 px-2 pb-6 lg:px-7 max-h-screen overflow-y-auto"
+      >
         <div class="transition-all" id="form-wrapper">
           <.live_component
             module={ClaperWeb.EventLive.FormComponent}

lib/claper_web/live/form_live/form_component.ex

@@ -77,7 +77,7 @@ defmodule ClaperWeb.FormLive.FormComponent do
            form_params
            |> Map.put("presentation_file_id", socket.assigns.presentation_file.id)
            |> Map.put("position", socket.assigns.position)
-           |> maybe_enable(socket)
+           |> Map.put("enabled", false)
          ) do
       {:ok, form} ->
         {:noreply,
@@ -104,14 +104,6 @@ defmodule ClaperWeb.FormLive.FormComponent do
 
   defp maybe_change_current_form(socket, _), do: socket
 
-  defp maybe_enable(form_params, socket) do
-    has_current_form =
-      socket.assigns.forms
-      |> Enum.count(fn f -> f.position == socket.assigns.position && f.enabled == true end) > 0
-
-    form_params |> Map.put("enabled", !has_current_form)
-  end
-
   defp list_forms(assigns) do
     Forms.list_forms(assigns.presentation_file.id)
   end

lib/claper_web/live/poll_live/form_component.ex

@@ -77,7 +77,7 @@ defmodule ClaperWeb.PollLive.FormComponent do
            poll_params
            |> Map.put("presentation_file_id", socket.assigns.presentation_file.id)
            |> Map.put("position", socket.assigns.position)
-           |> maybe_enable(socket)
+           |> Map.put("enabled", false)
          ) do
       {:ok, poll} ->
         {:noreply,
@@ -104,14 +104,6 @@ defmodule ClaperWeb.PollLive.FormComponent do
 
   defp maybe_change_current_poll(socket, _), do: socket
 
-  defp maybe_enable(poll_params, socket) do
-    has_current_poll =
-      socket.assigns.polls
-      |> Enum.count(fn p -> p.position == socket.assigns.position && p.enabled == true end) > 0
-
-    poll_params |> Map.put("enabled", !has_current_poll)
-  end
-
   defp list_polls(assigns) do
     Polls.list_polls(assigns.presentation_file.id)
   end