From 875041bacfe0254fc1889df38065400cdf6583b2 Mon Sep 17 00:00:00 2001 From: sthag Date: Sun, 18 May 2025 13:02:30 +0200 Subject: [PATCH] feat: Update composeMail function - Move function to hippie functions - Use vanilla instead of jQuery - Add examples to introduction page - Reindent --- source/code/app.js | 143 +++++--------- source/code/hippie/functions.js | 279 +++++++++++++++------------ source/screens/demo/introduction.njk | 4 + 3 files changed, 213 insertions(+), 213 deletions(-) diff --git a/source/code/app.js b/source/code/app.js index 5ce57d0..8632638 100644 --- a/source/code/app.js +++ b/source/code/app.js @@ -1,22 +1,22 @@ //NEW -function Clock(id){ +function Clock(id) { this.id = id; - + var that = this; - setInterval(function(){that.updateClock();}, 1000); + setInterval(function () { that.updateClock(); }, 1000); this.updateClock(); } -Clock.prototype.updateClock = function(){ +Clock.prototype.updateClock = function () { var date = new Date(); var clock = document.getElementById(this.id); //console.log(this); clock.innerHTML = this.formatDigits(date.getHours()) + ":" + this.formatDigits(date.getMinutes()) + ":" + this.formatDigits(date.getSeconds()); }; - -Clock.prototype.formatDigits = function(val){ - if(val<10) val = "0" + val; + +Clock.prototype.formatDigits = function (val) { + if (val < 10) val = "0" + val; return val; } @@ -28,7 +28,7 @@ var floor = Math.floor; function ongoing() { var now = new Date(); - + var w = Math.floor(now.getDay()); var D = new Array("Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"); var DNumb = Math.floor(now.getDate()); @@ -36,157 +36,114 @@ function ongoing() { var M = new Array("Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"); var y = Math.floor(now.getYear()); if (y < 999) y += 1900; - + var ms = Math.floor(now.getMilliseconds()); var s = Math.floor(now.getSeconds()); var m = Math.floor(now.getMinutes() + s / 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) - j2000.setUTCFullYear(2000,0,1); - j2000.setUTCHours(0,0,0,0); + j2000.setUTCFullYear(2000, 0, 1); + j2000.setUTCHours(0, 0, 0, 0); var utc = new Date(); - utc.setUTCFullYear(y,MNumb,DNumb); // Monate müssen im Wertebereich 0...11 übergeben werden - utc.setUTCHours(h,m,s,ms); + utc.setUTCFullYear(y, MNumb, DNumb); // Monate müssen im Wertebereich 0...11 übergeben werden + utc.setUTCHours(h, m, s, ms); var utc0 = new Date(); - utc0.setUTCFullYear(y,MNumb,DNumb); - utc0.setUTCHours(0,0,0,0); + utc0.setUTCFullYear(y, MNumb, DNumb); + 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 L = 280.460 + 0.9856474 * N; // mittlere ekliptikale Länge der Sonne 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 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 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 hWGMT = stGMT2 * 15; 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 stH = Math.floor(st24); var stM = Math.floor((st24 % 1) * 60); var stS = zeroFill(Math.floor((((st24 % 1) * 60) % 1) * 60), 2); - + var travelWidth = document.body.clientWidth; var travelHeight = document.body.clientHeight; var sunPosX = 0; var sunPosY = 0; var moonPosX = 0; var moonPosY = 0; - + var sun = $("#sun").css({ "left": (s / 60) * travelWidth, "top": (m / 60) * travelHeight }); - + $("#day").text(D[w]); $("#dayNumb").text(DNumb); $("#month").text(M[MNumb]); $("#year").text(y); $("#time").text('' + zeroFill(h, 2) + ':' + zeroFill(m, 2) + ':' + zeroFill(s, 2)); - + $("#julian").text(jd.toFixed(6)); //$("#star").text(stH + ':' + stM + ':' + stS); $("#star").text(stH + ':' + stM); $("#star1").text(stGMT); $("#star2").text(stGMT2); - + } -function zeroFill( number, width ){ +function zeroFill(number, width) { width -= number.toString().length; - if ( width > 0 ){ - return new Array( width + (/\./.test( number ) ? 2 : 1) ).join( '0' ) + number; + if (width > 0) { + return new Array(width + (/\./.test(number) ? 2 : 1)).join('0') + number; } 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 function barwidth(size, G, W) { var s = size; var g = G; var w = W; - var p = ( w / g ) * 100; - var newW = s * ( p /100 ); + var p = (w / g) * 100; + var newW = s * (p / 100); return newW; } //String Element erweitern -String.prototype.transform = function() { - return parseFloat(this.replace(',', '.')); +String.prototype.transform = function () { + return parseFloat(this.replace(',', '.')); } //Array Element erweitern -Array.prototype.arrayAdd = function() { +Array.prototype.arrayAdd = function () { return eval(this.join("+")); } //Speicherplatz in Prozent berechnen function percentage(total, gigs, round) { - var totalSpace = total; - var singleSpace = gigs; - var z = round; - var p = singleSpace / ( totalSpace / 100 ); - - return p; + var totalSpace = total; + var singleSpace = gigs; + var z = round; + var p = singleSpace / (totalSpace / 100); + + return p; } //Speicherplatz in GB berechnen function gigabytes(percent, total, round) { - var occupiedPercent = percent; - var singleSpace = total; - var z = round; - var g = (singleSpace / 100 ) * occupiedPercent; - - return g; + var occupiedPercent = percent; + var singleSpace = total; + var z = round; + var g = (singleSpace / 100) * occupiedPercent; + + return g; } diff --git a/source/code/hippie/functions.js b/source/code/hippie/functions.js index 602ca13..cdca2f2 100644 --- a/source/code/hippie/functions.js +++ b/source/code/hippie/functions.js @@ -1,149 +1,188 @@ // This is called everytime function setup() { - 'use strict'; + 'use strict'; - console.group('Document information'); - console.info('\n', hippie.brand, '\n\n'); - console.info('HTML:', hippie.screen, '\nBODY:', hippie.body); - console.groupEnd(); - if (debugOn) { - console.group('Debug information'); - console.dir(hippie); - console.groupEnd(); - } + console.group('Document information'); + console.info('\n', hippie.brand, '\n\n'); + console.info('HTML:', hippie.screen, '\nBODY:', hippie.body); + console.groupEnd(); + if (debugOn) { + console.group('Debug information'); + console.dir(hippie); + console.groupEnd(); + } - // WANNABE MODULE Mouse over effect - // With CSS only - if ($('#js_mob').length && viewHover) { - $('#js_mob').addClass('mouse_over'); - } - // if (viewHover) { - // $('body').prepend('
'); - // } - // With JS + // WANNABE MODULE Mouse over effect + // With CSS only + if ($('#js_mob').length && viewHover) { + $('#js_mob').addClass('mouse_over'); + } + // if (viewHover) { + // $('body').prepend('
'); + // } + // With JS } // MODULE Scroll navigation // Using constructor function function HippieScroll($tp, $dn) { - 'use strict'; + 'use strict'; - // this.$tp = $tp; - // Define initial situation - let initLeft = false; - const initY = hippie.screen.vh; + // this.$tp = $tp; + // Define initial situation + let initLeft = false; + const initY = hippie.screen.vh; - $tp.addClass('di_none'); + $tp.addClass('di_none'); - // Check scroll position and toggle element - this.check = function () { - hippie.screen.y = Math.min($(document).scrollTop(), document.documentElement.scrollTop); - if (hippie.screen.y > initY) { - if (!initLeft) { - $tp.removeClass('di_none'); - console.info('Initial viewport left'); - } - initLeft = true; - } else { - if (initLeft) { - $tp.addClass('di_none'); - console.info('Initial viewport entered'); - } - initLeft = false; - } - }; + // Check scroll position and toggle element + this.check = function () { + hippie.screen.y = Math.min($(document).scrollTop(), document.documentElement.scrollTop); + if (hippie.screen.y > initY) { + if (!initLeft) { + $tp.removeClass('di_none'); + console.info('Initial viewport left'); + } + initLeft = true; + } else { + if (initLeft) { + $tp.addClass('di_none'); + console.info('Initial viewport entered'); + } + initLeft = false; + } + }; - // Add events to navigation elements - $tp.click(function (event) { - event.preventDefault(); - $('html, body').stop().animate({ - scrollTop: 0 - }, basicEase); - // console.log('Scrolled to top'); - }); - $dn.click(function (event) { - event.preventDefault(); - var pos = Math.max(hippie.screen.dh, hippie.body.h) - hippie.screen.vh; - $('html').scrollTop(pos); - // document.documentElement.scrollTop = pos; - console.info('Scrolled down to', pos); - }); + // Add events to navigation elements + $tp.click(function (event) { + event.preventDefault(); + $('html, body').stop().animate({ + scrollTop: 0 + }, basicEase); + // console.log('Scrolled to top'); + }); + $dn.click(function (event) { + event.preventDefault(); + var pos = Math.max(hippie.screen.dh, hippie.body.h) - hippie.screen.vh; + $('html').scrollTop(pos); + // document.documentElement.scrollTop = pos; + console.info('Scrolled down to', pos); + }); } // MODULE Meta elements function HippieMeta($ma, $pp) { - 'use strict'; + 'use strict'; - let metaOn = false; + let metaOn = false; - $ma.click(function () { - var $wrap, $pop; + $ma.click(function () { + var $wrap, $pop; - // if (metaOn !== true) { - if (!metaOn) { - metaOn = true; + // if (metaOn !== true) { + if (!metaOn) { + metaOn = true; - $pp.each(function () { - // if ($(this).css('position') === 'static') { - // $(this).addClass('js_changed_pos'); - // $(this).css('position', 'relative'); - // } - // $pop = $(this).next('.exp_pop').detach(); - // $wrap = $(this).wrap('').parent().prepend('').prepend(''); - // $wrap.after($pop); + $pp.each(function () { + // if ($(this).css('position') === 'static') { + // $(this).addClass('js_changed_pos'); + // $(this).css('position', 'relative'); + // } + // $pop = $(this).next('.exp_pop').detach(); + // $wrap = $(this).wrap('').parent().prepend('').prepend(''); + // $wrap.after($pop); - $('
').addClass('exp_overlay').css({ - position: 'absolute', - width: '100%', - height: '100%', - top: 0, - left: 0 - }).appendTo($(this).addClass('exp_wrap')); + $('
').addClass('exp_overlay').css({ + position: 'absolute', + width: '100%', + height: '100%', + top: 0, + left: 0 + }).appendTo($(this).addClass('exp_wrap')); - // Displays explanation popup following the mouse - $(this).on({ - mouseenter: function () { - // if ($(this).attr('emmet')) { - // - // } - $(this).next('.exp_pop').show(); - }, - mouseleave: function () { - $(this).next('.exp_pop').hide(); - }, - mousemove: function (event) { - $(this).next('.exp_pop').css({ - 'top': event.pageY - $(this).next('.exp_pop').outerHeight() - 4, - 'left': event.pageX + 8 - // 'left': event.pageX - $(this).offset().left + 8 - }); - } - }); - }); + // Displays explanation popup following the mouse + $(this).on({ + mouseenter: function () { + // if ($(this).attr('emmet')) { + // + // } + $(this).next('.exp_pop').show(); + }, + mouseleave: function () { + $(this).next('.exp_pop').hide(); + }, + mousemove: function (event) { + $(this).next('.exp_pop').css({ + 'top': event.pageY - $(this).next('.exp_pop').outerHeight() - 4, + 'left': event.pageX + 8 + // 'left': event.pageX - $(this).offset().left + 8 + }); + } + }); + }); - } else { - $pp.each(function () { - $(this).off('mouseenter mouseleave mousemove'); + } else { + $pp.each(function () { + $(this).off('mouseenter mouseleave mousemove'); - $(this).removeClass('exp_wrap').find('.exp_overlay').remove(); - // $wrap = $(this).parent('.exp_wrap'); - // $pop = $wrap.next('.exp_pop').detach(); - // $wrap.find('.exp_marker_pop').remove(); - // $(this).unwrap('.exp_wrap'); - // $(this).after($pop); - // if ($(this).hasClass('js_changed_pos')) { - // $(this).css('position', ''); - // if ($(this).attr('style') === '') { - // $(this).removeAttr('style'); - // } - // $(this).removeClass('js_changed_pos'); - // } - }); + $(this).removeClass('exp_wrap').find('.exp_overlay').remove(); + // $wrap = $(this).parent('.exp_wrap'); + // $pop = $wrap.next('.exp_pop').detach(); + // $wrap.find('.exp_marker_pop').remove(); + // $(this).unwrap('.exp_wrap'); + // $(this).after($pop); + // if ($(this).hasClass('js_changed_pos')) { + // $(this).css('position', ''); + // if ($(this).attr('style') === '') { + // $(this).removeAttr('style'); + // } + // $(this).removeClass('js_changed_pos'); + // } + }); - metaOn = false; - } - console.log('Explanation mode', metaOn); - }); + metaOn = false; + } + 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 diff --git a/source/screens/demo/introduction.njk b/source/screens/demo/introduction.njk index 792967e..d74be33 100644 --- a/source/screens/demo/introduction.njk +++ b/source/screens/demo/introduction.njk @@ -26,6 +26,8 @@ tags:

…

+

Contact:

+

More: ,

{% endblock %} @@ -43,6 +45,8 @@ tags: $(document).ready(function () { logPerf('JQ document ready event fired.'); + composeMail('special', 'me', 'domain', 'tld', 'Me', 'HIPPIE') + composeMail('.general', 'name', 'domain', 'tld', '', '') }); $(document).scroll(function () {