interaktionsweise/hippie
1
1
Fork 0
Code Issues Pull requests Releases 3 Activity Actions

feat: Update card script

Browse source 
- Use vanilla instead of jQuery
- Remove super script
- Remove event for dither variant
- Reindent
This commit is contained in:
sthag 2025-05-18 12:44:47 +02:00
parent 9ff731395a
commit 9fbc19388f
1 changed files with 76 additions and 85 deletions
Download patch file Download diff file Expand all files Collapse all files

161
source/screens/demo/examples/card.njk
View file

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