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

feat: Update composeMail function

Browse source 
- Move function to hippie functions
- Use vanilla instead of jQuery
- Add examples to introduction page
- Reindent
This commit is contained in:
sthag 2025-05-18 13:02:30 +02:00
parent 9fbc19388f
commit 875041bacf
3 changed files with 213 additions and 213 deletions
Download patch file Download diff file Expand all files Collapse all files

143
source/code/app.js
View file

@ -1,22 +1,22 @@
//NEW //NEW
function Clock(id){ function Clock(id) {
this.id = id; this.id = id;
var that = this; var that = this;
setInterval(function(){that.updateClock();}, 1000); setInterval(function () { that.updateClock(); }, 1000);
this.updateClock(); this.updateClock();
} }
Clock.prototype.updateClock = function(){ Clock.prototype.updateClock = function () {
var date = new Date(); var date = new Date();
var clock = document.getElementById(this.id); var clock = document.getElementById(this.id);
//console.log(this); //console.log(this);
clock.innerHTML = this.formatDigits(date.getHours()) + ":" + this.formatDigits(date.getMinutes()) + ":" + this.formatDigits(date.getSeconds()); clock.innerHTML = this.formatDigits(date.getHours()) + ":" + this.formatDigits(date.getMinutes()) + ":" + this.formatDigits(date.getSeconds());
}; };
Clock.prototype.formatDigits = function(val){ Clock.prototype.formatDigits = function (val) {
if(val<10) val = "0" + val; if (val < 10) val = "0" + val;
return val; return val;
} }
@ -28,7 +28,7 @@ var floor = Math.floor;
function ongoing() { function ongoing() {
var now = new Date(); var now = new Date();
var w = Math.floor(now.getDay()); var w = Math.floor(now.getDay());
var D = new Array("Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"); var D = new Array("Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag");
var DNumb = Math.floor(now.getDate()); var DNumb = Math.floor(now.getDate());
@ -36,157 +36,114 @@ function ongoing() {
var M = new Array("Januar", "Februar", "M&auml;rz", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"); var M = new Array("Januar", "Februar", "M&auml;rz", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember");
var y = Math.floor(now.getYear()); var y = Math.floor(now.getYear());
if (y < 999) y += 1900; if (y < 999) y += 1900;
var ms = Math.floor(now.getMilliseconds()); var ms = Math.floor(now.getMilliseconds());
var s = Math.floor(now.getSeconds()); var s = Math.floor(now.getSeconds());
var m = Math.floor(now.getMinutes() + s / 60); var m = Math.floor(now.getMinutes() + s / 60);
var h = Math.floor(now.getHours() + m / 60); var h = Math.floor(now.getHours() + m / 60);
var j2000 = new Date(); // Bezugspunkt ist der 1.1.2000 0:00 UT (entspricht JD 2451544,5) var j2000 = new Date(); // Bezugspunkt ist der 1.1.2000 0:00 UT (entspricht JD 2451544,5)
j2000.setUTCFullYear(2000,0,1); j2000.setUTCFullYear(2000, 0, 1);
j2000.setUTCHours(0,0,0,0); j2000.setUTCHours(0, 0, 0, 0);
var utc = new Date(); var utc = new Date();
utc.setUTCFullYear(y,MNumb,DNumb); // Monate müssen im Wertebereich 0...11 übergeben werden utc.setUTCFullYear(y, MNumb, DNumb); // Monate müssen im Wertebereich 0...11 übergeben werden
utc.setUTCHours(h,m,s,ms); utc.setUTCHours(h, m, s, ms);
var utc0 = new Date(); var utc0 = new Date();
utc0.setUTCFullYear(y,MNumb,DNumb); utc0.setUTCFullYear(y, MNumb, DNumb);
utc0.setUTCHours(0,0,0,0); utc0.setUTCHours(0, 0, 0, 0);
var jd = 2451544.5 + (utc - j2000) / 86400000; // Zählung erfolgt in Millisekunden, 1 Tag = 86.400.000 ms
var jdUTC0 = 2451544.5 + (utc0 - j2000) / 86400000;
var jd = 2451544.5 + (utc-j2000) / 86400000; // Zählung erfolgt in Millisekunden, 1 Tag = 86.400.000 ms
var jdUTC0 = 2451544.5 + (utc0-j2000) / 86400000;
var N = jd - 2451545.0; var N = jd - 2451545.0;
var L = 280.460 + 0.9856474 * N; // mittlere ekliptikale Länge der Sonne var L = 280.460 + 0.9856474 * N; // mittlere ekliptikale Länge der Sonne
var g = 357.528 + 0.9856003 * N; // mittlere Anomalie var g = 357.528 + 0.9856003 * N; // mittlere Anomalie
var el = L + 1.915 * Math.sin(g) + 0.020 * Math.sin(2*g); var el = L + 1.915 * Math.sin(g) + 0.020 * Math.sin(2 * g);
var e = 23.439 - 0.0000004 * N; var e = 23.439 - 0.0000004 * N;
var rektaszension = Math.atan((Math.cos(e)*Math.sin(el)) / Math.cos(el)); var rektaszension = Math.atan((Math.cos(e) * Math.sin(el)) / Math.cos(el));
var T = (jdUTC0 - 2451545.0) / 36525; var T = (jdUTC0 - 2451545.0) / 36525;
var stGMT = (((6*3600) + (41*60) + 50.54841) + (8640184.812866*T) + (0.093104*Math.pow(T,2)) - (0.0000062*Math.pow(T,3))) / 3600; var stGMT = (((6 * 3600) + (41 * 60) + 50.54841) + (8640184.812866 * T) + (0.093104 * Math.pow(T, 2)) - (0.0000062 * Math.pow(T, 3))) / 3600;
var stGMT2 = 6.697376 + 2400.05134 * T + 1.002738 * T; var stGMT2 = 6.697376 + 2400.05134 * T + 1.002738 * T;
var hWGMT = stGMT2 * 15; var hWGMT = stGMT2 * 15;
var hW = hWGMT + 11.9566185772; var hW = hWGMT + 11.9566185772;
var st = (stGMT + (now.getUTCHours()*1.00273790935)) + (11.9566185772/15); // Sommerzeit muss noch berücksichtigt werden var st = (stGMT + (now.getUTCHours() * 1.00273790935)) + (11.9566185772 / 15); // Sommerzeit muss noch berücksichtigt werden
var st24 = Math.abs(st - (Math.round(st / 24) * 24)); var st24 = Math.abs(st - (Math.round(st / 24) * 24));
var stH = Math.floor(st24); var stH = Math.floor(st24);
var stM = Math.floor((st24 % 1) * 60); var stM = Math.floor((st24 % 1) * 60);
var stS = zeroFill(Math.floor((((st24 % 1) * 60) % 1) * 60), 2); var stS = zeroFill(Math.floor((((st24 % 1) * 60) % 1) * 60), 2);
var travelWidth = document.body.clientWidth; var travelWidth = document.body.clientWidth;
var travelHeight = document.body.clientHeight; var travelHeight = document.body.clientHeight;
var sunPosX = 0; var sunPosX = 0;
var sunPosY = 0; var sunPosY = 0;
var moonPosX = 0; var moonPosX = 0;
var moonPosY = 0; var moonPosY = 0;
var sun = $("#sun").css({ var sun = $("#sun").css({
"left": (s / 60) * travelWidth, "left": (s / 60) * travelWidth,
"top": (m / 60) * travelHeight "top": (m / 60) * travelHeight
}); });
$("#day").text(D[w]); $("#day").text(D[w]);
$("#dayNumb").text(DNumb); $("#dayNumb").text(DNumb);
$("#month").text(M[MNumb]); $("#month").text(M[MNumb]);
$("#year").text(y); $("#year").text(y);
$("#time").text('' + zeroFill(h, 2) + ':' + zeroFill(m, 2) + ':' + zeroFill(s, 2)); $("#time").text('' + zeroFill(h, 2) + ':' + zeroFill(m, 2) + ':' + zeroFill(s, 2));
$("#julian").text(jd.toFixed(6)); $("#julian").text(jd.toFixed(6));
//$("#star").text(stH + ':' + stM + ':' + stS); //$("#star").text(stH + ':' + stM + ':' + stS);
$("#star").text(stH + ':' + stM); $("#star").text(stH + ':' + stM);
$("#star1").text(stGMT); $("#star1").text(stGMT);
$("#star2").text(stGMT2); $("#star2").text(stGMT2);
} }
function zeroFill( number, width ){ function zeroFill(number, width) {
width -= number.toString().length; width -= number.toString().length;
if ( width > 0 ){ if (width > 0) {
return new Array( width + (/\./.test( number ) ? 2 : 1) ).join( '0' ) + number; return new Array(width + (/\./.test(number) ? 2 : 1)).join('0') + number;
} }
return number + ""; // always return a string return number + ""; // always return a string
} }
// create emails
function composeMail(tag, name, prov, suffix, text, topic) {
var trigger = tag.indexOf(".");
var mailString = name + '@' + prov + '.' + suffix;
var textString = mailString.replace(/@/g, "(at)");
var descString = "Nachricht an " + mailString;
if (trigger == -1) {
if (!text) {
text = mailString;
} else if (text == "at") {
text = textString;
} else if (text == "to") {
text = descString;
}
if (!topic) {
topic = "";
} else {
topic = "?subject=" + topic;
}
var old = $('#'+tag).html();
$('#'+tag).html(old + text);
$('#'+tag).attr("href", "mailto:" + mailString + topic);
} else {
$(tag).each(function() {
if (!text) {
text = mailString;
} else if (text == "at") {
text = textString;
} else if (text == "to") {
text = descString;
}
if (!topic) {
topic = "";
} else {
topic = "?subject=" + topic;
}
var old = $(this).html();
$(this).html(old + text);
$(this).attr("href", "mailto:" + mailString + topic);
});
}
}
//Länge der Balken im Diagram berechnen //Länge der Balken im Diagram berechnen
function barwidth(size, G, W) { function barwidth(size, G, W) {
var s = size; var s = size;
var g = G; var g = G;
var w = W; var w = W;
var p = ( w / g ) * 100; var p = (w / g) * 100;
var newW = s * ( p /100 ); var newW = s * (p / 100);
return newW; return newW;
} }
//String Element erweitern //String Element erweitern
String.prototype.transform = function() { String.prototype.transform = function () {
return parseFloat(this.replace(',', '.')); return parseFloat(this.replace(',', '.'));
} }
//Array Element erweitern //Array Element erweitern
Array.prototype.arrayAdd = function() { Array.prototype.arrayAdd = function () {
return eval(this.join("+")); return eval(this.join("+"));
} }
//Speicherplatz in Prozent berechnen //Speicherplatz in Prozent berechnen
function percentage(total, gigs, round) { function percentage(total, gigs, round) {
var totalSpace = total; var totalSpace = total;
var singleSpace = gigs; var singleSpace = gigs;
var z = round; var z = round;
var p = singleSpace / ( totalSpace / 100 ); var p = singleSpace / (totalSpace / 100);
return p; return p;
} }
//Speicherplatz in GB berechnen //Speicherplatz in GB berechnen
function gigabytes(percent, total, round) { function gigabytes(percent, total, round) {
var occupiedPercent = percent; var occupiedPercent = percent;
var singleSpace = total; var singleSpace = total;
var z = round; var z = round;
var g = (singleSpace / 100 ) * occupiedPercent; var g = (singleSpace / 100) * occupiedPercent;
return g; return g;
} }

279
source/code/hippie/functions.js
View file

@ -1,149 +1,188 @@
// This is called everytime // This is called everytime
function setup() { function setup() {
'use strict'; 'use strict';
console.group('Document information'); console.group('Document information');
console.info('\n', hippie.brand, '\n\n'); console.info('\n', hippie.brand, '\n\n');
console.info('HTML:', hippie.screen, '\nBODY:', hippie.body); console.info('HTML:', hippie.screen, '\nBODY:', hippie.body);
console.groupEnd(); console.groupEnd();
if (debugOn) { if (debugOn) {
console.group('Debug information'); console.group('Debug information');
console.dir(hippie); console.dir(hippie);
console.groupEnd(); console.groupEnd();
} }
// WANNABE MODULE Mouse over effect // WANNABE MODULE Mouse over effect
// With CSS only // With CSS only
if ($('#js_mob').length && viewHover) { if ($('#js_mob').length && viewHover) {
$('#js_mob').addClass('mouse_over'); $('#js_mob').addClass('mouse_over');
} }
// if (viewHover) { // if (viewHover) {
// $('body').prepend('<div id="js_mob" class="mouse_over"></div>'); // $('body').prepend('<div id="js_mob" class="mouse_over"></div>');
// } // }
// With JS // With JS
} }
// MODULE Scroll navigation // MODULE Scroll navigation
// Using constructor function // Using constructor function
function HippieScroll($tp, $dn) { function HippieScroll($tp, $dn) {
'use strict'; 'use strict';
// this.$tp = $tp; // this.$tp = $tp;
// Define initial situation // Define initial situation
let initLeft = false; let initLeft = false;
const initY = hippie.screen.vh; const initY = hippie.screen.vh;
$tp.addClass('di_none'); $tp.addClass('di_none');
// Check scroll position and toggle element // Check scroll position and toggle element
this.check = function () { this.check = function () {
hippie.screen.y = Math.min($(document).scrollTop(), document.documentElement.scrollTop); hippie.screen.y = Math.min($(document).scrollTop(), document.documentElement.scrollTop);
if (hippie.screen.y > initY) { if (hippie.screen.y > initY) {
if (!initLeft) { if (!initLeft) {
$tp.removeClass('di_none'); $tp.removeClass('di_none');
console.info('Initial viewport left'); console.info('Initial viewport left');
} }
initLeft = true; initLeft = true;
} else { } else {
if (initLeft) { if (initLeft) {
$tp.addClass('di_none'); $tp.addClass('di_none');
console.info('Initial viewport entered'); console.info('Initial viewport entered');
} }
initLeft = false; initLeft = false;
} }
}; };
// Add events to navigation elements // Add events to navigation elements
$tp.click(function (event) { $tp.click(function (event) {
event.preventDefault(); event.preventDefault();
$('html, body').stop().animate({ $('html, body').stop().animate({
scrollTop: 0 scrollTop: 0
}, basicEase); }, basicEase);
// console.log('Scrolled to top'); // console.log('Scrolled to top');
}); });
$dn.click(function (event) { $dn.click(function (event) {
event.preventDefault(); event.preventDefault();
var pos = Math.max(hippie.screen.dh, hippie.body.h) - hippie.screen.vh; var pos = Math.max(hippie.screen.dh, hippie.body.h) - hippie.screen.vh;
$('html').scrollTop(pos); $('html').scrollTop(pos);
// document.documentElement.scrollTop = pos; // document.documentElement.scrollTop = pos;
console.info('Scrolled down to', pos); console.info('Scrolled down to', pos);
}); });
} }
// MODULE Meta elements // MODULE Meta elements
function HippieMeta($ma, $pp) { function HippieMeta($ma, $pp) {
'use strict'; 'use strict';
let metaOn = false; let metaOn = false;
$ma.click(function () { $ma.click(function () {
var $wrap, $pop; var $wrap, $pop;
// if (metaOn !== true) { // if (metaOn !== true) {
if (!metaOn) { if (!metaOn) {
metaOn = true; metaOn = true;
$pp.each(function () { $pp.each(function () {
// if ($(this).css('position') === 'static') { // if ($(this).css('position') === 'static') {
// $(this).addClass('js_changed_pos'); // $(this).addClass('js_changed_pos');
// $(this).css('position', 'relative'); // $(this).css('position', 'relative');
// } // }
// $pop = $(this).next('.exp_pop').detach(); // $pop = $(this).next('.exp_pop').detach();
// $wrap = $(this).wrap('<span class="exp_wrap"></span>').parent().prepend('<span class="exp_overlay"></span>').prepend('<span class="exp_marker_pop"></span>'); // $wrap = $(this).wrap('<span class="exp_wrap"></span>').parent().prepend('<span class="exp_overlay"></span>').prepend('<span class="exp_marker_pop"></span>');
// $wrap.after($pop); // $wrap.after($pop);
$('<div></div>').addClass('exp_overlay').css({ $('<div></div>').addClass('exp_overlay').css({
position: 'absolute', position: 'absolute',
width: '100%', width: '100%',
height: '100%', height: '100%',
top: 0, top: 0,
left: 0 left: 0
}).appendTo($(this).addClass('exp_wrap')); }).appendTo($(this).addClass('exp_wrap'));
// Displays explanation popup following the mouse // Displays explanation popup following the mouse
$(this).on({ $(this).on({
mouseenter: function () { mouseenter: function () {
// if ($(this).attr('emmet')) { // if ($(this).attr('emmet')) {
// //
// } // }
$(this).next('.exp_pop').show(); $(this).next('.exp_pop').show();
}, },
mouseleave: function () { mouseleave: function () {
$(this).next('.exp_pop').hide(); $(this).next('.exp_pop').hide();
}, },
mousemove: function (event) { mousemove: function (event) {
$(this).next('.exp_pop').css({ $(this).next('.exp_pop').css({
'top': event.pageY - $(this).next('.exp_pop').outerHeight() - 4, 'top': event.pageY - $(this).next('.exp_pop').outerHeight() - 4,
'left': event.pageX + 8 'left': event.pageX + 8
// 'left': event.pageX - $(this).offset().left + 8 // 'left': event.pageX - $(this).offset().left + 8
}); });
} }
}); });
}); });
} else { } else {
$pp.each(function () { $pp.each(function () {
$(this).off('mouseenter mouseleave mousemove'); $(this).off('mouseenter mouseleave mousemove');
$(this).removeClass('exp_wrap').find('.exp_overlay').remove(); $(this).removeClass('exp_wrap').find('.exp_overlay').remove();
// $wrap = $(this).parent('.exp_wrap'); // $wrap = $(this).parent('.exp_wrap');
// $pop = $wrap.next('.exp_pop').detach(); // $pop = $wrap.next('.exp_pop').detach();
// $wrap.find('.exp_marker_pop').remove(); // $wrap.find('.exp_marker_pop').remove();
// $(this).unwrap('.exp_wrap'); // $(this).unwrap('.exp_wrap');
// $(this).after($pop); // $(this).after($pop);
// if ($(this).hasClass('js_changed_pos')) { // if ($(this).hasClass('js_changed_pos')) {
// $(this).css('position', ''); // $(this).css('position', '');
// if ($(this).attr('style') === '') { // if ($(this).attr('style') === '') {
// $(this).removeAttr('style'); // $(this).removeAttr('style');
// } // }
// $(this).removeClass('js_changed_pos'); // $(this).removeClass('js_changed_pos');
// } // }
}); });
metaOn = false; metaOn = false;
} }
console.log('Explanation mode', metaOn); console.log('Explanation mode', metaOn);
}); });
}
// Sets the href attribute to mailto: with given information
function composeMail(tag, name, prov, suffix, text, topic) {
let trigger = tag.indexOf(".");
let mailString = name + '@' + prov + '.' + suffix;
let textString = mailString.replace(/@/g, "(at)");
let descString = "Nachricht an " + mailString;
if (!text) {
text = mailString;
} else if (text === "at") {
text = textString;
} else if (text === "to") {
text = descString;
}
if (topic) {
topic = "?subject=" + topic;
} else {
topic = "";
}
if (trigger === -1) {
const el = document.getElementById(tag);
const elContent = el.innerHTML;
el.innerHTML = elContent + text;
el.setAttribute("href", "mailto:" + mailString + topic);
} else {
const els = document.getElementsByClassName(tag.slice(1));
for (let el of els) {
const elContent = el.innerHTML;
el.innerHTML = elContent + text;
el.setAttribute("href", "mailto:" + mailString + topic);
};
}
} }
// get document coordinates of the element // get document coordinates of the element

4
source/screens/demo/introduction.njk
View file

@ -26,6 +26,8 @@ tags:
</header> </header>
<article> <article>
<p>&hellip;</p> <p>&hellip;</p>
<p>Contact: <a id="special" href=""></a></p>
<p>More: <a class="general" href=""></a>, <a class="general" href=""></a></p>
</article> </article>
</section> </section>
{% endblock %} {% endblock %}
@ -43,6 +45,8 @@ tags:
$(document).ready(function () { $(document).ready(function () {
logPerf('JQ document ready event fired.'); logPerf('JQ document ready event fired.');
composeMail('special', 'me', 'domain', 'tld', 'Me', 'HIPPIE')
composeMail('.general', 'name', 'domain', 'tld', '', '')
}); });
$(document).scroll(function () { $(document).scroll(function () {