demo cleanup

uvalib · Sep 11, 2023 · 2839295 · 2839295
1 parent 61d7265
commit 2839295
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 63 deletions.
diff --git a/packages/site-analytics/demo/index.html b/packages/site-analytics/demo/index.html
@@ -1,50 +1,57 @@
 <!doctype html>
 <html lang="en-GB">
+
 <head>
-  <meta charset="utf-8">
-  <style>
-    body {
-      background: #fafafa;
-    }
-  </style>
-  <title>Demo site-analytics page</title>
+    <meta charset="utf-8">
+    <style>
+        body {
+            background: #fafafa;
+        }
+    </style>
+    <title>Demo site-analytics page</title>
 </head>
+
 <body>
-  <button>Click me to trigger an event</button><br />
-  <input placeholder="fake search field to log site search" /><br />
-  <a href="somepage.html">Log page view</a><br />
-  <a href="anotherpage.html">Log another page view with custom title</a>
-  <site-analytics variables='{"1":"foo", "2":"bar"}' spa matomoId="23"></site-analytics>
+    <button id="triggerEventBtn">Click me to trigger an event</button><br />
+    <input id="searchField" placeholder="fake search field to log site search" /><br />
+    <a href="somepage.html" class="pageLink">Log page view</a><br />
+    <a href="anotherpage.html" class="pageLink" data-title="foobar">Log another page view with custom title</a>
+    <site-analytics variables='{"1":"foo", "2":"bar"}' spa matomoId="23"></site-analytics>
 
-  <script type="module">
-    import '../dist/site-analytics.js';
+    <script type="module">
+        import '../dist/src/site-analytics.js';
 
-    document.querySelector('button').addEventListener('click',(e)=>{
-      e.target.dispatchEvent(new CustomEvent("site-analytics-event", {
-        detail: {event:["foo","bar","test","me"]},
-        bubbles: true
-      }));
-    });
+        // Event listener for button click
+        document.getElementById('triggerEventBtn').addEventListener('click', (e) => {
+            e.target.dispatchEvent(new CustomEvent("site-analytics-event", {
+                detail: { event: ["foo", "bar", "test", "me"] },
+                bubbles: true
+            }));
+        });
 
-    document.querySelector('input').addEventListener('keypress',(e)=>{
-      if (e.key === 'Enter') {
-        let searchQuery = e.target.value;
-        e.target.dispatchEvent(new CustomEvent("site-analytics-search", {
-          detail: {searchQuery:searchQuery, searchCategory:"testSearch", resultCount: 55555},
-          bubbles: true
-        }));
-      }
-    });
+        // Event listener for input keypress
+        document.getElementById('searchField').addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') {
+                let searchQuery = e.target.value;
+                e.target.dispatchEvent(new CustomEvent("site-analytics-search", {
+                    detail: { searchQuery: searchQuery, searchCategory: "testSearch", resultCount: 55555 },
+                    bubbles: true
+                }));
+            }
+        });
 
-    let links = document.querySelectorAll('a');
-    links[0].addEventListener('click',(e)=>{
-      e.preventDefault();
-      e.target.dispatchEvent(new CustomEvent("site-analytics-pageview", { bubbles: true }));
-    });
-    links[1].addEventListener('click',(e)=>{
-      e.preventDefault();
-      e.target.dispatchEvent(new CustomEvent("site-analytics-pageview", { bubbles: true, detail: {customTitle:"foobar"} }));
-    });
-  </script>
+        // Event delegation for anchor tags
+        document.body.addEventListener('click', (e) => {
+            if (e.target.matches('.pageLink')) {
+                e.preventDefault();
+                let customTitle = e.target.getAttribute('data-title');
+                e.target.dispatchEvent(new CustomEvent("site-analytics-pageview", {
+                    bubbles: true,
+                    detail: customTitle ? { customTitle: customTitle } : {}
+                }));
+            }
+        });
+    </script>
 </body>
+
 </html>
diff --git a/packages/site-analytics/demo/page1.html b/packages/site-analytics/demo/page1.html
@@ -1,20 +1,23 @@
 <!doctype html>
 <html lang="en-GB">
+
 <head>
-  <meta charset="utf-8">
-  <style>
-    body {
-      background: #fafafa;
-    }
-  </style>
-  <title>Demo uvalib-analytics page 1</title>
+    <meta charset="utf-8">
+    <style>
+        body {
+            background: #fafafa;
+        }
+    </style>
+    <title>Demo uvalib-analytics page 1</title>
 </head>
+
 <body>
-  <a href="page2.html">Page 2</a><br />
-  <uvalib-analytics matomoId="23"></uvalib-analytics>
+    <a href="page2.html">Page 2</a><br />
+    <uvalib-analytics matomoId="23"></uvalib-analytics>
 
-  <script type="module">
-    import '../uvalib-analytics.js';
-  </script>
+    <script type="module">
+        import '../dist/src/uvalib-analytics.js';
+    </script>
 </body>
+
 </html>
diff --git a/packages/site-analytics/demo/page2.html b/packages/site-analytics/demo/page2.html
@@ -1,20 +1,23 @@
 <!doctype html>
 <html lang="en-GB">
+
 <head>
-  <meta charset="utf-8">
-  <style>
-    body {
-      background: #fafafa;
-    }
-  </style>
-  <title>Demo site-analytics page 2</title>
+    <meta charset="utf-8">
+    <style>
+        body {
+            background: #fafafa;
+        }
+    </style>
+    <title>Demo site-analytics page 2</title>
 </head>
+
 <body>
-  <a href="page1.html">Page 1</a><br />
-  <site-analytics matomoId="23"></site-analytics>
+    <a href="page1.html">Page 1</a><br />
+    <site-analytics matomoId="23"></site-analytics>
 
-  <script type="module">
-    import '../site-analytics.js';
-  </script>
+    <script type="module">
+        import '../dist/src/site-analytics.js';
+    </script>
 </body>
+
 </html>