hippie/source/code/hippie/app.js

// TODO: Inhalte angleichen nach Zusammenfassung von app.js und function.js.
// Bennung und Beschreibungen verbessern.

// This is called everytime
function setup() {
	'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();
	}
}

// MODULE Scroll navigation
// Using constructor function
function HippieScroll($tp, $dn) {
	'use strict';

	// this.$tp = $tp;
	// Define initial situation
	let initLeft = false;
	const initY = hippie.screen.vh;

	$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;
		}
	};

	// 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);
	});
}

function HippieFade(toggleElement, initState) {
	'use strict';

	const fragment = document.createDocumentFragment();
	const overlay = document.createElement('div');

	overlay.id = 'mouse-overlay';

	if (initState) {
		overlay.classList.add('active');
	}

	toggleElement.addEventListener('click', function () {
		overlay.classList.toggle('active');
	});

	fragment.appendChild(overlay);
	document.body.style.position = 'relative';
	document.body.prepend(fragment);
}

// MODULE Meta elements
function HippieMeta($ma, $pp) {
	'use strict';

	let metaOn = false;

	$ma.click(function () {
		var $wrap, $pop;

		// 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('<span class="exp_wrap"></span>').parent().prepend('<span class="exp_overlay"></span>').prepend('<span class="exp_marker_pop"></span>');
				// $wrap.after($pop);

				$('<div></div>').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
						});
					}
				});
			});

		} 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');
				// }
			});

			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
// function getCoords (elem) {
// 	let box = elem.getBoundingClientRect();
//
// 	return {
// 		top: box.top + pageYOffset,
// 		left: box.left + pageXOffset
// 	};
// }

// https://stackoverflow.com/a/488073/1444149
// function Utils () {}
//
// Utils.prototype = {
// 	constructor: Utils,
// 	isElementInView: function (element, fullyInView) {
// 		var pageTop = $(window).scrollTop();
// 		var pageBottom = pageTop + $(window).height();
// 		var elementTop = $(element).offset().top;
// 		var elementBottom = elementTop + $(element).height();
//
// 		if (fullyInView === true) {
// 			return ((pageTop < elementTop) && (pageBottom > elementBottom));
// 		} else {
// 			return ((elementTop <= pageBottom) && (elementBottom >= pageTop));
// 		}
// 	}
// };
//
// var Utils = new Utils();

// NEWER

class TimeDisplay {
	constructor(element, options, interval) {
		this.element = element;
		this.options = options || {hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false};
		this.interval = interval || 1000;
		this.isPaused = false;
		this.locale = navigator.language || 'en-US';

		this.updateTime();

		console.group('Time information');
		console.info('\nOptions:', this.options, '\n\n');
		console.info('Interval:', this.interval);
		console.groupEnd();
	}

	formatTime(time) {
		return time.toLocaleTimeString(this.locale, this.options);
	}

	// TODO: Zeit nur im Sekundentakt aktualisieren wenn Sekunden angezeigt werden
	async updateTime() {
		while (true) {
			if (!this.isPaused) {
				const now = new Date();
				this.element.textContent = this.formatTime(now);
			}
			await new Promise(resolve => setTimeout(resolve, this.interval));
		}
	}

	pause() {
		this.isPaused = true;
	}

	resume() {
		this.isPaused = false;
	}
}

class DateDisplay {
	constructor(element, options) {
		this.element = element;
		this.options = options || {year: 'numeric', month: 'long', day: 'numeric'};

		this.updateDate();
		this.checkForDateChange();

		console.group('Date information');
		console.info('\nOptions:', this.options, '\n\n');
		console.info('Remaining minutes:', Math.floor(this.getTimeUntilNextMidnight() / 3600));
		console.groupEnd();
	}

	formatDate(date) {
		return new Intl.DateTimeFormat(navigator.language, this.options).format(date);
	}

	updateDate() {
		const now = new Date();

		this.element.textContent = this.formatDate(now);
	}

	changeFormat(format) {
		this.options = format;

		this.updateDate();
	}

	getTimeUntilNextMidnight() {
		const now = new Date();
		const nextMidnight = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1);

		return nextMidnight - now;
	}

	checkForDateChange() {
		const timeUntilNextMidnight = this.getTimeUntilNextMidnight();

		setTimeout(() => {
			this.updateDate();
			this.checkForDateChange();
		}, timeUntilNextMidnight);
	}
}

//NEW

function Clock(id) {
	'use strict';

	this.id = id;
	const that = this;

	setInterval(function () {
		that.updateClock();
	}, 1000);
	this.updateClock();
}

Clock.prototype.updateClock = function () {
	'use strict';

	const date = new Date();
	const 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) {
	'use strict';

	if (val < 10) val = '0' + val;

	return val;
};

//OLD

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());
	var MNumb = Math.floor(now.getMonth());
	var M = new Array("Januar", "Februar", "M&auml;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);

	var utc = new Date();
	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);

	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 e = 23.439 - 0.0000004 * N;
	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 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 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) {
	width -= number.toString().length;
	if (width > 0) {
		return new Array(width + (/\./.test(number) ? 2 : 1)).join('0') + number;
	}
	return number + ""; // always return a string
}

//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);

	return newW;
}

//String Element erweitern
String.prototype.transform = function () {
	return parseFloat(this.replace(',', '.'));
}
//Array Element erweitern
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;
}

//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;
}

function checkButtonAndTarget(event, element, button = 0) {
	return (
		event.button === button &&
		event.target === element
	);
}