From b5b9dd41dea4808c5de01a2879390603342fe1b5 Mon Sep 17 00:00:00 2001
From: noracato <ncschinkel@gmail.com>
Date: Wed, 23 Oct 2024 12:25:29 +0200
Subject: [PATCH] Add hovercard for private/public saved sceanrios

---
 app/components/hovercard/component.html.erb   | 20 +++++++++++
 app/components/hovercard/component.rb         |  8 +++++
 .../controllers/hello_controller.js           |  7 ----
 .../controllers/hovercard_controller.js       | 35 +++++++++++++++++++
 .../_block_right_menu.html.erb                | 18 +++++-----
 config/locales/en.yml                         |  4 +++
 6 files changed, 77 insertions(+), 15 deletions(-)
 create mode 100644 app/components/hovercard/component.html.erb
 create mode 100644 app/components/hovercard/component.rb
 delete mode 100644 app/javascript/controllers/hello_controller.js
 create mode 100644 app/javascript/controllers/hovercard_controller.js

diff --git a/app/components/hovercard/component.html.erb b/app/components/hovercard/component.html.erb
new file mode 100644
index 0000000..02bfac4
--- /dev/null
+++ b/app/components/hovercard/component.html.erb
@@ -0,0 +1,20 @@
+
+<div
+  data-controller="hovercard"
+  data-hovercard-url-value="<%= @path %>"
+  data-action="mouseenter->hovercard#show mouseleave->hovercard#hide"
+>
+  <%= content %>
+
+  <%# static card %>
+  <%# should make text optional and setup the @path with turbo see: https://boringrails.com/articles/hovercards-stimulus/ %>
+  <div class="relative hidden" data-hovercard-target="card">
+    <div data-tooltip-arrow class="absolute top-0 left-0 z-50 shadow-lg rounded-lg p-3 min-w-max-content bg-midnight-300 text-midnight-800">
+      <div class="flex space-x-3 items-center w-64 text-sm">
+        <%= @text %>
+      </div>
+    </div>
+  </div>
+</div>
+
+
diff --git a/app/components/hovercard/component.rb b/app/components/hovercard/component.rb
new file mode 100644
index 0000000..7c8ffae
--- /dev/null
+++ b/app/components/hovercard/component.rb
@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+module Hovercard
+  class Component < ApplicationComponent
+    option :path
+    option :text, default: proc { "" }
+  end
+end
diff --git a/app/javascript/controllers/hello_controller.js b/app/javascript/controllers/hello_controller.js
deleted file mode 100644
index 5975c07..0000000
--- a/app/javascript/controllers/hello_controller.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import { Controller } from "@hotwired/stimulus"
-
-export default class extends Controller {
-  connect() {
-    this.element.textContent = "Hello World!"
-  }
-}
diff --git a/app/javascript/controllers/hovercard_controller.js b/app/javascript/controllers/hovercard_controller.js
new file mode 100644
index 0000000..6a86b75
--- /dev/null
+++ b/app/javascript/controllers/hovercard_controller.js
@@ -0,0 +1,35 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["card"];
+  static values = { url: String };
+
+  show() {
+    if (this.hasCardTarget) {
+      this.cardTarget.classList.remove("hidden");
+    } else {
+      fetch(this.urlValue)
+        .then((r) => r.text())
+        .then((html) => {
+          const fragment = document
+            .createRange()
+            .createContextualFragment(html);
+
+          this.element.appendChild(fragment);
+        });
+    }
+  }
+
+  hide() {
+    if (this.hasCardTarget) {
+      this.cardTarget.classList.add("hidden");
+    }
+  }
+
+  disconnect() {
+    if (this.hasCardTarget) {
+      this.cardTarget.remove();
+    }
+  }
+}
+
diff --git a/app/views/saved_scenarios/_block_right_menu.html.erb b/app/views/saved_scenarios/_block_right_menu.html.erb
index 3071836..df59dd7 100644
--- a/app/views/saved_scenarios/_block_right_menu.html.erb
+++ b/app/views/saved_scenarios/_block_right_menu.html.erb
@@ -19,14 +19,16 @@
 
 <div class="border-t border-solid border-gray-200 my-10"></div>
 
-<%= render(PublishSavedScenario::Component.new(
-  path_on: publish_saved_scenario_path(saved_scenario),
-  path_off: unpublish_saved_scenario_path(saved_scenario),
-  status: saved_scenario.private,
-  title: t("scenario_bar.private.#{saved_scenario.private}"),
-  icon_on:'eye-slash',
-  icon_off: 'eye',
-))%>
+<%= render(Hovercard::Component.new(path: '', text: t("scenario_bar.private.description.#{saved_scenario.private}"))) do %>
+  <%= render(PublishSavedScenario::Component.new(
+    path_on: publish_saved_scenario_path(saved_scenario),
+    path_off: unpublish_saved_scenario_path(saved_scenario),
+    status: saved_scenario.private,
+    title: t("scenario_bar.private.#{saved_scenario.private}"),
+    icon_on:'eye-slash',
+    icon_off: 'eye',
+  ))%>
+<% end %>
 <%= render(SavedScenarioNavItem::Component.new(
   path: saved_scenario_path(saved_scenario),
   title: t("scenario_bar.featured.#{saved_scenario.featured?}"),
diff --git a/config/locales/en.yml b/config/locales/en.yml
index ff2b9a9..3796f85 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -38,6 +38,10 @@ en:
     private:
       true: Private
       false: Public
+      description:
+        true: Only you can view or copy this scenario
+        false: |
+          Anyone can view or copy this scenario, but only you can make changes
     featured:
       true: Featured
       false: Make this featured