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

10 years later #1

Merged
sthag merged 374 commits from development into main 2026-03-07 00:18:59 +01:00
Conversation 0 Commits 374 Files changed 135 +243 -242
8 changed files with 243 additions and 242 deletions
Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit b79edd4858 - Show all commits

232
source/code/app.js → source/code/hippie/app.js
View file

@ -1,3 +1,235 @@
// 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 {

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

@ -1,228 +0,0 @@
// 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();

3
source/code/hippie/global.js
View file

@ -1,3 +0,0 @@
// Setup
// -----------------------------------------------------------------------------
setup();

0
source/code/hippie/variables.js → source/code/hippie/globals.js
View file

2
source/templates/demo/_default.njk
View file

@ -15,5 +15,5 @@
{% block script %}
{{ super() }}
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="/vendor/jquery.min.js"></script>
{% endblock %}

4
source/templates/hippie/_app.njk
View file

@ -22,8 +22,8 @@
{% block body %}{% endblock %}
{% block script %}
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="{{ pageBase }}js/variables.js"></script>
<script src="/vendor/jquery.min.js"></script>
<script src="{{ pageBase }}js/globals.js"></script>
<script src="{{ pageBase }}js/app.js"></script>
<script>

14
source/templates/hippie/_main.njk
View file

@ -42,14 +42,14 @@
{% block script %}
{{ log.log('BODY :: Loading script assets...') }}
{# <script src="{{ pageBase }}js/{{hippie.jsFile}}.min.js" type="text/javascript"></script> #}
<!-- build:js js/main.concat.min.js -->
{# // TODO: Remove dependecy to jQuery; at least maek it optional #}
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="{{ pageBase }}js/variables.js"></script>
<script src="{{ pageBase }}js/functions.js"></script>
<script src="{{ pageBase }}js/global.js"></script>
<script src="/vendor/jquery.min.js"></script>
<script src="{{ pageBase }}js/globals.js"></script>
<script src="{{ pageBase }}js/app.js"></script>
<script>
// Create instances of objects made by contructor functions
// Setup global things for all screens
setup();
// Create instances of objects made by constructor functions
let scrollUi = new HippieScroll($('.js_scrolltop'), $('.js_scrolldown'));
let helpUi = new HippieMeta($('.js_showmeta'), $('.js_pop'));

2
source/templates/hippie/app.liquid
View file

@ -14,7 +14,7 @@
{% block script %}
{{ block.super -}}
<script src="/vendor/jquery.min.js"></script>
<script src="{{ pageBase }}js/variables.js"></script>
<script src="{{ pageBase }}js/globals.js"></script>
<script src="{{ pageBase }}js/app.js"></script>
<script>