From 9fbc19388f1ed600868469cb30220306a8f4a52e Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 18 May 2025 12:44:47 +0200
Subject: [PATCH] feat: Update card script

- Use vanilla instead of jQuery
- Remove super script
- Remove event for dither variant
- Reindent
---
 source/screens/demo/examples/card.njk | 161 ++++++++++++--------------
 1 file changed, 76 insertions(+), 85 deletions(-)

diff --git a/source/screens/demo/examples/card.njk b/source/screens/demo/examples/card.njk
index ee7011a..7db860b 100644
--- a/source/screens/demo/examples/card.njk
+++ b/source/screens/demo/examples/card.njk
@@ -9,100 +9,91 @@ tags:
 {% extends "demo/_default.njk" %}
 {% import "hippie/macros/_placeholder.njk" as ph %}
 
-{% block title %}{{ title }}{% endblock %}
+{% block title %}{{ title }}
+{% endblock %}
 
 {% block head %}
-  {{ super() }}
+	{{ super() }}
 {% endblock %}
 
 {% block body %}
-<!-- {{ page.fileSlug }}.page -->
-  <div class="card_bkg">
-    <div id="dither"></div>
-    <svg version="1.1" id="flag" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewbox="0 0 1920 1200" preserveaspectratio="xMinYMax slice">
-      {# <defs>
-      <filter id="turb3">
-        <feColorMatrix type="saturate" values="1" />
-        <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="2"/>
-      </filter>
-      <symbol id="triangle-5">
-        <rect y="0" fill="#273F8B" width="1920" height="1200"/>
-      </symbol>
-    </defs>
-    <g>
-      <use xlink:href="#triangle-5" style="filter: url(#turb3);" />
-    </g> #}
-      <rect id="triangle-5" y="0" fill="#273F8B" width="1920" height="1200"/>
-      <polygon id="triangle-6" fill="#8E1F68" points="0,1200 1920,458.25 1920,1200 "/>
-      <polygon id="triangle-7" fill="#D30A51" points="0,1200 1920,522.75 1920,1200 "/>
-      <polygon id="triangle-8" fill="#F2AF13" points="0,1200 1920,741.75 1920,1200 "/>
-      <polygon id="triangle-9" fill="#FAD803" points="0,1200 1920,787.5 1920,1200 "/>
-      <polygon id="triangle-4" fill="#3C579A" points="0,1200 0,0 733.5,0 "/>
-      <polygon id="triangle-3" fill="#B7E0F0" points="0,1200 0,0 688.5,0 "/>
-      <polygon id="triangle-2" fill="#6BC7D9" points="0,1200 0,0 453,0 "/>
-      <polygon id="triangle-1" fill="#52BED1" points="0,1200 0,0 370.5,0 "/>
-    </svg>
-    {# <img id="dither" src="art/flag_dither.png" width="1920" height="1200" alt="Background flag dithered"/> #}
-  </div>
-  <div class="card_box">
-    <div id="jsCardHover">
-      <p>Titel<br/>und Beschreibung</p>
-      <h1>{{ ph.name() }}</h1>
-      <p>
-        {{ ph.email('card_address') }}<br/>
-        {{ ph.link('decent', 'site.tld') }}
-        &middot;
-        {{ ph.address('decent') }}</p>
-    </div>
-  </div>
+
+	<!-- {{ page.fileSlug }}.page -->
+	<div class="card_bkg">
+		<div id="dither"></div>
+		<svg version="1.1" id="flag" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewbox="0 0 1920 1200" preserveaspectratio="xMinYMax slice">
+			{# <defs>
+			<filter id="turb3">
+				<feColorMatrix type="saturate" values="1" />
+				<feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="2"/>
+			</filter>
+			<symbol id="triangle-5">
+				<rect y="0" fill="#273F8B" width="1920" height="1200"/>
+			</symbol>
+		</defs>
+		<g>
+			<use xlink:href="#triangle-5" style="filter: url(#turb3);" />
+		</g> #}
+			<rect id="triangle-5" y="0" fill="#273F8B" width="1920" height="1200"/>
+			<polygon id="triangle-6" fill="#8E1F68" points="0,1200 1920,458.25 1920,1200 "/>
+			<polygon id="triangle-7" fill="#D30A51" points="0,1200 1920,522.75 1920,1200 "/>
+			<polygon id="triangle-8" fill="#F2AF13" points="0,1200 1920,741.75 1920,1200 "/>
+			<polygon id="triangle-9" fill="#FAD803" points="0,1200 1920,787.5 1920,1200 "/>
+			<polygon id="triangle-4" fill="#3C579A" points="0,1200 0,0 733.5,0 "/>
+			<polygon id="triangle-3" fill="#B7E0F0" points="0,1200 0,0 688.5,0 "/>
+			<polygon id="triangle-2" fill="#6BC7D9" points="0,1200 0,0 453,0 "/>
+			<polygon id="triangle-1" fill="#52BED1" points="0,1200 0,0 370.5,0 "/>
+		</svg>
+		{# <img id="dither" src="art/flag_dither.png" width="1920" height="1200" alt="Background flag dithered"/> #}
+	</div>
+	<div class="card_box">
+		<div id="js_content">
+			<p>Titel<br/>und Beschreibung</p>
+			<h1>{{ ph.name() }}</h1>
+			<p>
+				{{ ph.email('card_address') }}<br/>
+				{{ ph.link('decent', 'site.tld') }}
+				&middot;
+				{{ ph.address('decent') }}</p>
+		</div>
+	</div>
 {% endblock %}
 
 {% block script %}
-  {{ super() }}
-  <script>
-    $(document).ready(function () {
-      // composeMail('.card_address', 'neues', 'interaktionsweise', 'de', '', '');
+	<script>
+		const flag = document.getElementById("flag");
+		let colors = new Array();
+		let iId = undefined;
+		let position = 0;
 
-      var colors = new Array();
-      var position = 0;
+		for (let i = 1; i <= flag.childElementCount; i++) {
+			colors.push(document.getElementById("triangle-" + i).getAttribute("fill"));
+		}
 
-      for (var i = 1; i <= $("#flag").children().length; i++) {
-        colors.push($("#triangle-" + i).attr("fill"));
-      }
+		// console.log(colors);
 
-      $('#jsCardHover').on({
-        mouseenter: function () {
-          // $('#flag').addClass('effect');
-          // $('#flag').css('opacity', 0);
-          $('#flag')
-            .stop()
-            .fadeOut(10000);
-          this.iid = setInterval(function () {
-            for (var i = 1; i <= colors.length; i++) {
-              position++;
-              if (position >= colors.length) {
-                position = 0;
-              }
-              $("#triangle-" + i).attr("fill", colors[position]);
-            }
-            position++;
-            if (position >= colors.length) {
-              position = 0;
-            }
-          }, 600);
-        },
-        mouseleave: function () {
-          // $('#flag').removeClass('effect');
-          // $('#flag').css('opacity', 1);
-          $('#flag')
-            .stop()
-            .fadeIn(1000);
-          this.iid && clearInterval(this.iid);
-        },
-        click: function () {
-          $("#dither").toggle();
-        }
-      });
-    });
-  </script>
+		document.getElementById('js_content').addEventListener('mouseenter', () => {
+			iId = setInterval(() => {
+				for (let i = 1; i <= colors.length; i++) {
+					position++;
+
+					if (position >= colors.length) {
+						position = 0;
+					}
+
+					document.getElementById("triangle-" + i).setAttribute("fill", colors[position]);
+				}
+
+				position++;
+
+				if (position >= colors.length) {
+					position = 0;
+				}
+			}, 600);
+		});
+
+		document.getElementById('js_content').addEventListener('mouseleave', () => {
+			iId && clearInterval(iId);
+		});
+	</script>
 {% endblock %}
\ No newline at end of file