From 6bc6d006f46523fe91e8ba5ff9fe6d8c6f587947 Mon Sep 17 00:00:00 2001
From: Rael Monge <ra.elemm2009@gmail.com>
Date: Wed, 29 May 2024 18:58:54 -0600
Subject: [PATCH] Creating a dialog and using it on the tour page

---
 core/routes.go              |  1 +
 static/css/style.css        | 34 +++++++++++++++++-
 templates/feature_tour.html | 69 +++++++++++++++++++++++++++++++++----
 3 files changed, 96 insertions(+), 8 deletions(-)

diff --git a/core/routes.go b/core/routes.go
index 15c0269..a788b7e 100644
--- a/core/routes.go
+++ b/core/routes.go
@@ -340,6 +340,7 @@ func (s *Service) FeatureTour(c echo.Context) error {
 	pd.Data["integrations"] = lt.Translate("Integrations")
 	pd.Data["api_powered"] = lt.Translate("API Powered")
 	pd.Data["import_export"] = lt.Translate("Import Export")
+	pd.Data["analytics"] = lt.Translate("Analytics")
 
 	pd.Data["public_private"] = lt.Translate("Public/Private")
 	pd.Data["description"] = lt.Translate("Description")
diff --git a/static/css/style.css b/static/css/style.css
index 7910889..638b6e3 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -820,4 +820,36 @@ a.bullet-link:before {
   justify-content: center;
   margin-top: 16px;
   margin-bottom: 16px;
-}
\ No newline at end of file
+}
+
+.hide-dialog {
+  display: none;
+}
+
+.show-dialog {
+  display: flex;
+}
+
+.close-dialog-div {
+  z-index: -1;
+  height: 100%;
+  width: 100%;
+  position: absolute;
+}
+
+#dialog-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  background-color: rgba(0,0,0,0.5);
+  height: 100%;
+  border: solid 1px black;
+  justify-content: center;
+  align-items: center;
+}
+
+#dialog-image {
+  max-width: 95%;
+  max-height: 95%;
+}
diff --git a/templates/feature_tour.html b/templates/feature_tour.html
index 6b95acf..e98f15d 100644
--- a/templates/feature_tour.html
+++ b/templates/feature_tour.html
@@ -34,7 +34,7 @@
             </div>
         </div>
         <div class="col-4">
-            <img class="tour-section-img" src="{{staticURL "img/example.png"}}"/>
+            <img class="tour-section-img" src="{{ staticURL "img/web/lt_bookmarks_small.png" }}"/>
         </div>
     </div>
     <div class="tour-section row">
@@ -56,7 +56,7 @@
             </div>
         </div>
         <div class="col-4">
-            <img class="tour-section-img" src="{{staticURL "img/example.png"}}"/>
+            <img class="tour-section-img" src="{{staticURL "img/web/lt_linkshortening_small.png"}}"/>
         </div>
     </div>
     <div class="tour-section row">
@@ -79,7 +79,7 @@
             </div>
         </div>
         <div class="col-4">
-            <img class="tour-section-img" src="{{staticURL "img/example.png"}}"/>
+            <img class="tour-section-img" src="{{staticURL "img/web/lt_linklistings_small.png"}}"/>
         </div>
     </div>
     <div class="tour-section row">
@@ -98,7 +98,7 @@
             </div>
         </div>
         <div class="col-4">
-            <img class="tour-section-img" src="{{staticURL "img/example.png"}}"/>
+            <img class="tour-section-img" src="{{staticURL "img/web/lt_collaborate_small.png"}}"/>
         </div>
     </div>
     <div class="tour-section row">
@@ -118,7 +118,7 @@
             </div>
         </div>
         <div class="col-4">
-            <img class="tour-section-img" src="{{staticURL "img/example.png"}}"/>
+            <img class="tour-section-img" src="{{staticURL "img/web/lt_integrations_small.png"}}"/>
         </div>
     </div>
     <div class="tour-section row">
@@ -138,7 +138,7 @@
             </div>
         </div>
         <div class="col-4">
-            <img class="tour-section-img" src="{{staticURL "img/example.png"}}"/>
+            <img class="tour-section-img" src="{{staticURL "img/web/lt_graphql_small.png"}}"/>
         </div>
     </div>
     <div class="tour-section row">
@@ -157,8 +157,63 @@
             </div>
         </div>
         <div class="col-4">
-            <img class="tour-section-img" src="{{staticURL "img/example.png"}}"/>
+            <img class="tour-section-img" src="{{staticURL "img/web/lt_import_small.png"}}"/>
+        </div>
+    </div>
+    <div class="tour-section row">
+        <div class="col-8">
+            <h3 class="tour-title">{{.pd.Data.analytics}}</h3>
+            <ul>
+                <li>{{.pd.Data.import_pinboard}}</li>
+                <li>{{.pd.Data.export_json}}</li>
+            </ul>
+            <div class="tour-description">
+                <p>
+                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro voluptate illo alias fugit
+                    nobis, accusamus, quae eius repellat quaerat.
+                </p>
+                <p>— Juan Perez, Netlandish Inc.</p>
+            </div>
+        </div>
+        <div class="col-4">
+            <img class="tour-section-img" src="{{staticURL "img/web/lt_analytics_small.png"}}"/>
         </div>
     </div>
 </section>
+
+<div id="dialog-container" class="hide-dialog">
+    <div class="close-dialog-div" onclick="closeDialog()"></div>
+    <img src="" alt="image from dialog" id="dialog-image">
+</div>
+
 {{template "base_footer" .}}
+
+{{ define "extrajs" }}
+<script>
+    const openDialog = (photoName) => {
+        document.getElementById("dialog-image").src = "";
+        document.getElementById("dialog-image").src = "https://s3.amazonaws.com/linktaco/media/web/" + photoName;
+        document.getElementById("dialog-container").classList.remove("hide-dialog");
+        document.getElementById("dialog-container").classList.add("show-dialog");
+    };
+    const closeDialog = () => {
+        document.getElementById("dialog-container").classList.add("hide-dialog");
+        document.getElementById("dialog-container").classList.remove("show-dialog");
+    };
+
+    const images = document.getElementsByClassName("tour-section-img");
+
+    for(let i = 0; i < images.length; i++) {
+        images[i].addEventListener("click", (event) => {
+            openDialog(images[i].src.split("/").at(-1).replace("_small", ""));
+        });
+    }
+
+    document.addEventListener("keydown", (event) => {
+        const keyName = event.key;
+        if (keyName === "Escape") {
+            closeDialog();
+        }
+    });
+</script>
+{{ end }}
-- 
2.45.2