Sangh Comments Preview

assets/js/hooks/hoverune.js

@@ -1,4 +1,4 @@
-import { computePosition, offset, inline } from "floating-ui.dom.umd.min";
+import { computePosition, offset, inline, autoUpdate } from "floating-ui.dom.umd.min";
 
 const findParent = (el, attr, stopper) => {
   // need identifier for marginoted content
@@ -8,27 +8,62 @@ const findParent = (el, attr, stopper) => {
   return findParent(el.parentElement, attr, stopper)
 }
 
+function floatHoveRune({clientX, clientY}) {
+
+  console.log("sting like a bees")
+  const selection = window.getSelection()
+  var getSelectRect = selection.getRangeAt(0).getBoundingClientRect()
+  const virtualEl = {
+    getBoundingClientRect() {
+      return getSelectRect
+    },
+    contextElement: document.querySelector('#verses'),
+  };
+  const hoverune = document.getElementById("hoverune");
+
+  computePosition(virtualEl, hoverune, {placement: 'top-end', middleware: [inline(getSelectRect.x, getSelectRect.y), offset(5)]}).then(({x, y}) => {
+    // Position the floating element relative to the click
+    hoverune.classList.remove("hidden")
+      Object.assign(hoverune.style, {
+      left: `${getSelectRect.x}px`,
+      top: `${y}px`,
+    })
+  });
+
+  // computePosition(virtualEl, hoverune, {placement: 'top-end', middleware: [inline(getSelectRect.x, getSelectRect.y), offset(5)]}).then(({x, y}) => {
+  //   hoverune.classList.remove("hidden")
+  //   Object.assign(hoverune.style, {
+  //     left: `${getSelectRect.x}px`,
+  //     top: `${y}px`,
+  //   });
+  // })
+}
+
 const findHook = el => findParent(el, "phx-hook", "HoveRune")
 const findMarginote = el => findParent(el, "phx-hook", "MargiNote")
 const findNode = el => el && el.getAttribute('node')
-const forgeBinding = (el, attrs)  => attrs.reduce((acc, attr) => {return acc.set(attr, el.getAttribute(attr))}, new Map())
+const forgeBinding = (el, attrs)  => attrs.reduce((acc, attr) => {
+  acc[attr] = el.getAttribute(attr)
+  return acc
+}, {})
 // const marginoteParent = el => findParent(el, "data-marginote", "parent")
 
 export default HoveRune = {
   mounted() {
     const t = this.el
-    const hoverune = document.querySelector('#hoverune');
     window.addEventListener('click', ({ target }) => {
-      const selection = window.getSelection()
+      var selection = window.getSelection()
       var getSelectRect = selection.getRangeAt(0).getBoundingClientRect();
+      const getSelectText = selection.toString()
       //const validElem = findHook(target)
       // const isMarginote = findMarginote(target)
       const isNode = findNode(target)
 
       if (isNode) {
-        binding = forgeBinding(target, ["node", "node_id", "field"])
-        binding = binding.set("selection", selection.toString())
-        console.log(binding)
+        binding = forgeBinding(target, ["node", "node_id", "field", "verse_id"])
+        binding["selection"] = getSelectText
+        this.pushEvent("bindHoveRune", {"binding": binding})
+
 
         computePosition(target, hoverune, {placement: 'top-end', middleware: [inline(getSelectRect.x, getSelectRect.y), offset(5)]}).then(({x, y}) => {
           hoverune.classList.remove("hidden")
@@ -37,42 +72,13 @@ export default HoveRune = {
             top: `${y}px`,
           });
         })
-      }
-      else
-      {
-        hoverune.classList.add("hidden")
-      }
-    //    if (marginoteParent(target)) return
-
-      // if (!isMarginote) {
-      //   console.log("not marginote yet")
-      //   //this.pushEvent("hide-quoted-comment")
-      // }
 
-      if (!selection || selection == "") return
-
-    //   t.classList.remove("hidden")
-    //   if (t.parentElement.classList.contains("popover__content")) {
-    //     this.pushEvent("quoted-text", {quoted: selection}, () => {
-    //       t.parentElement.classList.add("popover--visible")
-    //     })
-    //   }
+    }
+      else {
+        hoverune.classList.remove("hidden")
+      }
     })},
 
   updated() {
-    // const marginoteParent = document.querySelector("[data-marginote='parent']")
-    // const id = marginoteParent.getAttribute("data-marginote-id")
-    // const marginote = document.getElementById(`marginote-id-${id}`)
-
-    // if (!marginoteParent) return
-    // if (marginote) {
-    //   this.pushEvent("show-quoted-comment", {id: `marginote-id-${id}`}, () => {
-    //     computePosition(marginote, marginoteParent, {
-    //       middleware: [offset(10), autoPlacement()],
-    //     }).then(({ x, y}) => {
-    //       this.pushEvent("adjust-marginote", {top: `${y}px`, left: `${x}px`})
-    //     })
-    //   })
-    // }
   }
 }

lib/vyasa/written/verse.ex

@@ -8,6 +8,7 @@ defmodule Vyasa.Written.Verse do
   schema "verses" do
     field :no, :integer
     field :body, :string
+    field :binding, :any, virtual: true
 
     belongs_to :source, Source, type: Ecto.UUID
     belongs_to :chapter, Chapter, type: :integer, references: :no, foreign_key: :chapter_no

lib/vyasa_web/controllers/og_image_controller.ex

@@ -126,7 +126,6 @@ defmodule VyasaWeb.OgImageController do
         text_fill_color: caption_text_color,
         x: :right,
         y: :top,
-        autofit: true,
         width: caption_width,
         height: caption_height,
         font: font,

lib/vyasa_web/live/source_live/chapter/index.ex

@@ -11,8 +11,7 @@ defmodule VyasaWeb.SourceLive.Chapter.Index do
 
   @impl true
   def mount(_params, _session, socket) do
-    {:ok, socket
-     |> stream_configure(:verses, dom_id: &("verse-#{&1.id}"))}
+    {:ok, socket}
   end
 
 
@@ -40,7 +39,9 @@ defmodule VyasaWeb.SourceLive.Chapter.Index do
          %{verses: verses, translations: [ts | _]} = chap  <- Written.get_chapter(chap_no, sid, @default_lang) do
 
       socket
+      |> stream_configure(:verses, dom_id: &("verse-#{&1.id}"))
       |> stream(:verses, verses)
+      |> assign(:kv_verses,  Enum.into(verses, %{}, &({&1.id, &1})))
       |> assign(:src, source)
       |> assign(:lang, @default_lang)
       |> assign(:chap, chap)
@@ -55,18 +56,46 @@ defmodule VyasaWeb.SourceLive.Chapter.Index do
 
   @impl true
   @doc """
+  events
+
+  "clickVersetoSeek" ->
   Handles the action of clicking to seek by emitting the verse_id to the live player
   via the pubsub system.
+
+  "binding"
   """
   def handle_event("clickVerseToSeek",
     %{"verse_id" => verse_id} = _payload,
     %{assigns: %{session: %{"id" => sess_id}}}  = socket) do
 
     IO.inspect("handle_event::clickVerseToSeek", label: "checkpoint")
     Vyasa.PubSub.publish(%{verse_id: verse_id}, :playback_sync, "media:session:" <> sess_id)
-    {:noreply, socket}
+    {:noreply, socket }
   end
 
+  @impl true
+  def handle_event("bindHoveRune",
+    %{
+      "binding" => %{
+        "field" => field,
+        "node" => node,
+        "node_id" => node_id,
+        "verse_id" => verse_id,
+        "selection" => selection}} = _payload,
+    %{assigns: %{kv_verses: verses}}  = socket) do
+    # bind = %{node => %{node_id => %{field => %{"selection" => selection}}}}
+
+    {:noreply, socket
+    |> stream_insert(:verses,
+        %{verses[verse_id] | binding: %{node: node,
+                                        node_id: node_id,
+                                        field: field,
+                                        selection: selection}})
+    |> push_event("genHoveRune", %{})
+    }
+  end
+
+
   @doc """
   Upon rcv of :media_handshake, which indicates an intention to sync by the player,
   returns a message containing %Voice{} info that can be used to generate a playback.
@@ -148,7 +177,7 @@ defmodule VyasaWeb.SourceLive.Chapter.Index do
     assigns = assigns
       |> assign(:marginote_id, "marginote-#{Map.get(assigns, :id)}-#{Ecto.UUID.generate()}")
     ~H"""
-    <div class="scroll-m-20 mt-8 p-4 border-b-2 border-brandDark" id={@id}>
+    <div class="scroll-m-20 mt-8 p-4 border-b-2 border-brandDark"  id={@id}>
       <dl class="-my-4 divide-y divide-zinc-100">
         <div :for={elem <- @edge} class="flex gap-4 py-4 text-sm leading-6 sm:gap-8">
           <dt
@@ -164,10 +193,13 @@ defmodule VyasaWeb.SourceLive.Chapter.Index do
               </div>
            </button>
           </dt>
-          <dd node={Map.get(elem, :node, @verse).__struct__} node_id={Map.get(elem, :node, @verse).id} field={elem.field |> Enum.join("::")} class={"text-zinc-700 #{verse_class(elem.verseup)}"}>
+          <div class="relative">
+          <dd verse_id={@verse.id} node={Map.get(elem, :node, @verse).__struct__} node_id={Map.get(elem, :node, @verse).id} field={elem.field |> Enum.join("::")} class={"text-zinc-700 #{verse_class(elem.verseup)}"}>
             <%=  Struct.get_in(Map.get(elem, :node, @verse), elem.field)%>
           </dd>
-        </div>
+           <.comment_binding :if={@verse.binding} class={(@verse.binding.node_id == Map.get(elem, :node, @verse).id && @verse.binding.field == elem.field |> Enum.join("::")) && "" || "hidden"} />
+          </div>
+          </div>
       </dl>
     </div>
     """
@@ -180,25 +212,25 @@ defmodule VyasaWeb.SourceLive.Chapter.Index do
     do:
       "font-dn text-m"
 
-  attr :current_user, :map, required: true
+  attr :class, :string, default: nil
 
-  def comment_information(assigns) do
+  def comment_binding(assigns) do
     assigns = assigns |> assign(:elem_id, "comment-modal-#{Ecto.UUID.generate()}")
 
     ~H"""
-    <div class="max-w-28 flex items-center hidden rounded-md bg-gray-200 px-2 py-1 shadow-2xl" id={Ecto.UUID.generate()}
-      phx-hook="PopoverComment"
-      style="max-width:7rem"
-      >
-      <button
-        id={"comment-button-#{Ecto.UUID.generate()}"}
-        phx-click={show_modal(@elem_id)}
-        class="inline-flex items-center gap-1 border-none w-full font-serif text-sm"
-      >
-      <.icon name="hero-chat-bubble-left-ellipsis" class="h-4 w-4" /> Comment
-      </button>
-      <.modal_comments id={@elem_id} show={true} current_user={@current_user} />
-    </div>
+    <div class={["block mt-4 text-sm text-gray-700 font-serif leading-relaxed
+              md:absolute md:top-0 md:right-0 md:mt-0 md:w-64
+              lg:float-right lg:clear-right lg:-mr-[45%] lg:w-[40%] lg:text-[0.9rem]
+              opacity-70 transition-opacity duration-300 ease-in-out
+              hover:opacity-100", @class]}>
+       <span class="block
+                 before:content-['╰'] before:mr-1 before:text-gray-500
+                 md:before:content-none
+                 md:border-l-4 md:border-gray-300 md:pl-3 lg:border-l-0 lg:pl-2">
+
+          Sangh comment here
+          </span>
+     </div>
     """
   end
 

lib/vyasa_web/live/source_live/chapter/index.html.heex

@@ -1,4 +1,4 @@
-<div id="chapter-index-container" phx-hook="HoveRune">
+<div id="chapter-index-container">
     <.header class="p-4 pb-0">
         <div class="font-dn text-4xl mb-4">
            <%= @selected_transl.target.translit_title %> | <%= @chap.title%>
@@ -13,7 +13,7 @@
             </div>
         </:subtitle>
     </.header>
-
+  <div id="verses" phx-update="stream" phx-hook="HoveRune">
     <.verse_matrix id={dom_id} verse={verse} :for={{dom_id, %Written.Verse{} = verse} <- @streams.verses}>
         <:edge
             title={"#{verse.chapter_no}.#{verse.no}"}
@@ -34,10 +34,11 @@
             field={[:target, :body]}
             verseup={:mid}/>
     </.verse_matrix>
+  </div>
     <.back navigate={~p"/explore/#{@src.title}"}>Back to <%= to_title_case(@src.title)%> Chapters</.back>
 </div>
 
-<div id="hoverune" class="absolute hidden top-0 left-0 max-w-max group-hover:flex items-center space-x-2 bg-white rounded-lg shadow-lg px-4 py-2 border border-gray-200 transition-all duration-300 ease-in-out">
+<div id="hoverune"  phx-update="ignore" class="absolute hidden top-0 left-0 max-w-max group-hover:flex items-center space-x-2 bg-white rounded-lg shadow-lg px-4 py-2 border border-gray-200 transition-all duration-300 ease-in-out">
   <button class="text-gray-600 hover:text-blue-600 focus:outline-none">
     <.icon
         name="hero-bars-3-bottom-left-mini"

mix.exs

@@ -41,13 +41,13 @@ defmodule Vyasa.MixProject do
   # Type `mix help deps` for examples and options.
   defp deps do
     [
-      {:phoenix, "~> 1.7.10"},
+      {:phoenix, "~> 1.7.14"},
       {:phoenix_ecto, "~> 4.4"},
       {:ecto_sql, "~> 3.10"},
       {:postgrex, ">= 0.0.0"},
-      {:phoenix_html, "~> 3.3"},
+      {:phoenix_html, "~> 4.0"},
       {:phoenix_live_reload, "~> 1.2", only: :dev},
-      {:phoenix_live_view, "~> 0.20.1"},
+      {:phoenix_live_view, "~> 0.20.17"},
       {:floki, ">= 0.30.0"},
       {:phoenix_live_dashboard, "~> 0.8.2"},
       {:esbuild, "~> 0.8", runtime: Mix.env() == :dev},
@@ -67,7 +67,7 @@ defmodule Vyasa.MixProject do
       {:cors_plug, "~> 3.0"},
       {:ex_aws, "~> 2.0"},
       {:ex_aws_s3, "~> 2.5"},
-      {:live_admin, "~> 0.11.4"},
+      {:live_admin, "~> 0.12"},
       {:req, "~> 0.4.0"},
       {:recase, "~> 0.5"},
       {:timex, "~> 3.0"}