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

Javascript work

Browse source 
* removed cache and remember from js task
 * renamed js variables
 * reworked js code
 * added logPerf function to page head
This commit is contained in:
Stephan 2019-03-29 18:41:27 +01:00
parent 0fa1b3c4b4
commit 4cb89ec7af
8 changed files with 257 additions and 235 deletions
Download patch file Download diff file Expand all files Collapse all files

15
.jshintrc
View file

@ -19,7 +19,7 @@
"nonbsp" : true, // true: Prohibit "non-breaking whitespace" characters. "nonbsp" : true, // true: Prohibit "non-breaking whitespace" characters.
"nonew" : false, // true: Prohibit use of constructors for side-effects (without assignment) "nonew" : false, // true: Prohibit use of constructors for side-effects (without assignment)
"plusplus" : false, // true: Prohibit use of `++` and `--` "plusplus" : false, // true: Prohibit use of `++` and `--`
"quotmark" : true, // Quotation mark consistency: "quotmark" : false, // Quotation mark consistency:
// false : do nothing (default) // false : do nothing (default)
// true : ensure whatever is used is consistent // true : ensure whatever is used is consistent
// "single" : require single quotes // "single" : require single quotes
@ -87,5 +87,16 @@
"yui" : false, // Yahoo User Interface "yui" : false, // Yahoo User Interface
// Custom Globals // Custom Globals
"globals" : {"hippie": true} // additional predefined global variables "globals" : {
"hippie": true,
"viewW": true,
"viewH": true,
"htmlH": true,
"bodyW": true,
"bodyH": true,
"docPosY": true,
"docInitleft": true,
"viewHover": true,
"basicEase": true
} // additional predefined global variables
} }

5
gulpfile.js
View file

@ -179,11 +179,12 @@ function code(cb) {
sourcemaps: true, sourcemaps: true,
allowEmpty: true allowEmpty: true
}), }),
cache('code'), plumber(),
// cache('code'),
concat(hippie.jsFile +'.js'), concat(hippie.jsFile +'.js'),
dest(output.code), dest(output.code),
uglify(), uglify(),
remember('code'), // remember('code'),
rename({ rename({
suffix: '.min' suffix: '.min'
}), }),

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

@ -1,60 +1,60 @@
"use strict"; "use strict";
function setup() { function setup() {
console.log('\n', hippie_brand, '\n\n'); console.log('\n', hippie.brand, '\n\n');
console.info('Debug information:\n\nHTML height is', html_height, '\nBODY height is', body_height, '\nVIEW height is', view_height); console.info('Debug information:\n\nHTML height is', htmlH, '\nBODY height is', bodyH, '\nVIEW height is', viewH);
if($('#js_tph').length && full_view_hover) { if($('#js_tph').length && viewHover) {
// $('body').prepend("<div id=\"js_tph\" class=\"layer__hover hover_full_view_change\"></div>"); // $('body').prepend("<div id=\"js_tph\" class=\"layer__hover hover_full_view_change\"></div>");
$('#js_tph').addClass("hover_full_view_change"); $('#js_tph').addClass("hover_full_view_change");
} }
} }
// get document coordinates of the element // get document coordinates of the element
// function getCoords(elem) { // function getCoords(elem) {
// let box = elem.getBoundingClientRect(); // let box = elem.getBoundingClientRect();
// //
// return { // return {
// top: box.top + pageYOffset, // top: box.top + pageYOffset,
// left: box.left + pageXOffset // left: box.left + pageXOffset
// }; // };
// } // }
// https://stackoverflow.com/a/488073/1444149 // https://stackoverflow.com/a/488073/1444149
function Utils() {} function Utils() {}
Utils.prototype = { Utils.prototype = {
constructor: Utils, constructor: Utils,
isElementInView: function (element, fullyInView) { isElementInView: function (element, fullyInView) {
var pageTop = $(window).scrollTop(); var pageTop = $(window).scrollTop();
var pageBottom = pageTop + $(window).height(); var pageBottom = pageTop + $(window).height();
var elementTop = $(element).offset().top; var elementTop = $(element).offset().top;
var elementBottom = elementTop + $(element).height(); var elementBottom = elementTop + $(element).height();
if (fullyInView === true) { if (fullyInView === true) {
return ((pageTop < elementTop) && (pageBottom > elementBottom)); return ((pageTop < elementTop) && (pageBottom > elementBottom));
} else { } else {
return ((elementTop <= pageBottom) && (elementBottom >= pageTop)); return ((elementTop <= pageBottom) && (elementBottom >= pageTop));
} }
} }
}; };
var Utils = new Utils(); var Utils = new Utils();
// TEST // TEST
function scrollNav() { function scrollNav() {
$('.nav a').click(function(){ $('.nav a').click(function(){
//Toggle Class //Toggle Class
$(".active").removeClass("active"); $(".active").removeClass("active");
$(this).closest('li').addClass("active"); $(this).closest('li').addClass("active");
var theClass = $(this).attr("class"); var theClass = $(this).attr("class");
$('.'+theClass).parent('li').addClass('active'); $('.'+theClass).parent('li').addClass('active');
//Animate //Animate
$('html, body').stop().animate({ $('html, body').stop().animate({
scrollTop: $( $(this).attr('href') ).offset().top - 160 scrollTop: $( $(this).attr('href') ).offset().top - 160
}, 400); }, 400);
return false; return false;
}); });
$('.scrollTop a').scrollTop(); $('.scrollTop a').scrollTop();
} }

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

@ -1,155 +1,126 @@
"use strict"; // Setup
// -----------------------------------------------------------------------------
// DOM ready setup();
// ------------------------------------------------------------------------------
$( document ).ready(function() { // DOM ready
// -----------------------------------------------------------------------------
// Setup $(document).ready(function(){
// ------------------------------------------------------------------------------ "use strict";
setup(); // logPerf('DOM ready.');
// Modules
// ---------------------------------------------------------------------------
// Modules
// ------------------------------------------------------------------------------ // Explanation module scripts
var expMode = false;
// Explanation module scripts
var exp_mode = false; // Displays explanation popup
$('.js_pop').hover(
// Displays explanation popup function(){
$(".js_pop").hover( // if($(this).attr('emmet')){
function() { //
var $this = $(this); // }
$(this).next('.exp_pop').show();
// if($(this).attr("emmet")){ }, function(){
// $(this).next('.exp_pop').hide();
// } }
).mousemove(
$(this).next(".exp_pop").show(); function(event){
}, function() { $(this).next('.exp_pop').css({
$(this).next(".exp_pop").hide(); 'top': event.pageY - $(this).next('.exp_pop').outerHeight() - 4,
} 'left': event.pageX + 8
).mousemove( // 'left': event.pageX - $(this).offset().left + 8
function(ev) { });
$(this).next(".exp_pop").css({ // TODO - needs more love
"top": ev.pageY - $(this).next(".exp_pop").outerHeight() - 4, // console.log(event.pageX);
"left": ev.pageX + 8 }
// "left": ev.pageX - $(this).offset().left + 8 );
});
// TODO - needs more love // WIP Activates layer with explanation elements
// console.log(ev.pageX); // Besser ::after oder ::before benutzen
} $('.js_showmeta').click(function(e){
); var $wrap, $pop;
// WIP Activates layer with explanation elements if(expMode !== true){
// Besser ::after oder ::before benutzen expMode = true;
$(".js_showmeta").click(function(e){
var $wrap, $pop; $('.js_pop').each(function(i, e){
if($(this).css('position') === 'static'){
if(exp_mode !== true){ $(this).addClass('js_changed_pos');
exp_mode = true; $(this).css('position', 'relative');
}
$(".js_pop").each(function(i, e){
if($(this).css("position") === "static") { $pop = $(this).next('.exp_pop').detach();
$(this).addClass("js_changed_pos"); $wrap = $(this).wrap('<span class="exp_wrap"></span>').parent().prepend('<span class="exp_marker_pop"></span>');
$(this).css("position", "relative"); $wrap.after($pop);
} });
$pop = $(this).next(".exp_pop").detach(); } else {
$wrap = $(this).wrap("<span class=\"exp_wrap\"></span>").parent().prepend("<span class=\"exp_marker_pop\"></span>"); $('.js_pop').each(function(i, e){
$wrap.after($pop); $wrap = $(this).parent('.exp_wrap');
}); $pop = $wrap.next('.exp_pop').detach();
$wrap.find('.exp_marker_pop').remove();
} else { $(this).unwrap('.exp_wrap');
$(".js_pop").each(function(i, e){ $(this).after($pop);
$wrap = $(this).parent(".exp_wrap"); if($(this).hasClass('js_changed_pos')){
$pop = $wrap.next(".exp_pop").detach(); $(this).css('position', '');
$wrap.find(".exp_marker_pop").remove(); if($(this).attr('style') === ''){
$(this).unwrap(".exp_wrap"); $(this).removeAttr('style');
$(this).after($pop); }
if($(this).hasClass("js_changed_pos")){ $(this).removeClass('js_changed_pos');
$(this).css("position", ""); }
if($(this).attr("style") === "") { });
$(this).removeAttr("style");
} expMode = false;
$(this).removeClass("js_changed_pos");
} }
}); console.log('Explanation mode', expMode);
});
exp_mode = false;
// WIP Scroll to top
} $('.js_scrolltop').click(function(event){
console.log("Explanation mode", exp_mode); event.preventDefault();
}); $('html, body').animate({
scrollTop: 0
// WIP Scroll to top }, basicEase);
$('.js_scrolltop').click(function(event) { });
event.preventDefault(); $('.js_scrolldown').click(function(event){
console.log('scroll to the top'); event.preventDefault();
var pos = Math.max(htmlH, bodyH) - viewH;
document.documentElement.scrollTop = document.body.scrollTop = 0; document.documentElement.scrollTop = pos;
console.info('scrolled down to', pos);
// var body = document.querySelector('body'); });
// // get scroll position in px
// console.log(body.scrollTop);
// // set scroll position in px
// body.scrollTop = 0; $('#gameIcon').click(function(event){
event.preventDefault();
// $('body')[0].scrollTop = 0; $(this).clone().appendTo('#gameDetail');
// $('body').animate({scrollTop: 0}, basic_ease, function() { $(this).siblings().clone().appendTo('#gameDetail');
// console.log('arrived at top'); $('#gameDetail').removeClass('magic');
// }); });
}); });
$('.js_scrolldown').click(function(event) {
event.preventDefault();
var pos = Math.max(html_height, body_height) - view_height; // Scroll
console.log('scroll down to', pos); // ------------------------------------------------------------------------------
document.documentElement.scrollTop = pos; $( document ).scroll(function(){
}); "use strict";
// Toggle navigation elements
docPosY = $( document ).scrollTop();
$( "#gameIcon" ).click(function(event) { if(docPosY > docInitY){
event.preventDefault(); if(!docInitleft){
$( this ).clone().appendTo( "#gameDetail" ); $('.js_scrolltop').parent().removeClass('magic');
$( this ).siblings().clone().appendTo( "#gameDetail" ); console.info('Initial viewport left');
$( "#gameDetail" ).removeClass( "magic" ); }
}); docInitleft = true;
} else {
var i = 0; if(docInitleft){
$( ".pass-def dd" ).each(function() { $('.js_scrolltop').parent().addClass('magic');
$( this ).find( "li" ).each(function( index ) { console.info('Initial viewport left');
if ( 0 === $( this ).children( "ul" ).length ) { }
//console.log(index, ":", $( this ).text()); docInitleft = false;
var tempContent = $( this ).html(); }
//$( this ).html( "<span class=\"list-count\"></span>" ); });
$( this ).html(tempContent + "<span class=\"list-count\">" + i + "</span>");
i++;
}
});
});
});
// Scroll
// ------------------------------------------------------------------------------
$( document ).scroll(function() {
// Toggle navigation elements
doc_pos_y = $( document ).scrollTop();
// console.log(doc_pos_y);
// var demo_margin = $('.header__fix');
if (doc_pos_y > scroll_y_margin) {
$('.js_scrolltop').parent().removeClass('magic');
} else {
$('.js_scrolltop').parent().addClass('magic');
}
});

35
source/code/hippie/variables.js
View file

@ -1,16 +1,19 @@
var hippie_brand = "|-| | |^ |^ | [- "; var hippie = {
brand: "|-| | |^ |^ | [- "
var view_width = Math.max(document.documentElement.offsetWidth, document.documentElement.clientWidth, window.innerWidth, 0); };
var view_height = Math.max(document.documentElement.clientHeight, window.innerHeight, 0);
var html_height = Math.max(document.documentElement.offsetHeight, document.documentElement.clientHeight, 0); var viewW = Math.max(document.documentElement.offsetWidth, document.documentElement.clientWidth, window.innerWidth, 0);
var body_height = Math.max(document.body.offsetHeight, document.body.clientHeight, 0); var viewH = Math.max(document.documentElement.clientHeight, window.innerHeight, 0);
var body_width = Math.max(document.body.offsetWidth, document.body.clientWidth, window.innerWidth, 0); var htmlH = Math.max(document.documentElement.offsetHeight, document.documentElement.clientHeight, 0);
var bodyW = Math.max(document.body.offsetWidth, document.body.clientWidth, window.innerWidth, 0);
var full_view_hover = true; var bodyH = Math.max(document.body.offsetHeight, document.body.clientHeight, 0);
var doc_pos_y = 0; var docPosY = 0;
var basic_ease = 600; var docInitleft = false;
var scroll_y_margin = view_height; var docInitY = viewH;
var onerow_alphabet = "/\\ ]3 ( |) [- /= (_, |-| | _T /< |_ |\\/| |\\| () |^ ()_ /? _\\~ ~|~ |_| \\/ \\/\\/ >< `/ ~/_ "; var viewHover = true;
var onerow_digits = "\'| ^/_ -} +| ;~ (o \"/ {} \"| (\\) "; var basicEase = 600;
var onerowAlphabet = "/\\ ]3 ( |) [- /= (_, |-| | _T /< |_ |\\/| |\\| () |^ ()_ /? _\\~ ~|~ |_| \\/ \\/\\/ >< `/ ~/_ ";
var onerowDigits = "\'| ^/_ -} +| ;~ (o \"/ {} \"| (\\) ";

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

@ -10,6 +10,8 @@
{% include "demo/partials/_meta.njk" %} {% include "demo/partials/_meta.njk" %}
{% block meta %}{% endblock %} {% block meta %}{% endblock %}
{% include "hippie/partials/_head_script.njk" %}
{% include "demo/partials/_links.njk" %} {% include "demo/partials/_links.njk" %}
{% block links %} {% block links %}
<link rel="stylesheet" type="text/css" media="all" href="/css/demo.css"/> <link rel="stylesheet" type="text/css" media="all" href="/css/demo.css"/>

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

@ -10,6 +10,8 @@
{% include "demo/partials/_meta.njk" %} {% include "demo/partials/_meta.njk" %}
{% block meta %}{% endblock %} {% block meta %}{% endblock %}
{% include "hippie/partials/_head_script.njk" %}
{% include "demo/partials/_links.njk" %} {% include "demo/partials/_links.njk" %}
{% block links %} {% block links %}
<!--[if lte IE 9]> <!--[if lte IE 9]>

32
source/templates/hippie/partials/_head_script.njk Normal file
View file

@ -0,0 +1,32 @@
<!-- head.script.partial -->
<script>
//Entry script at page init
// get the current time difference between page
// load and when this func was invoked
function getTimeDiff() {
return new Date().getTime() - performance.timing.navigationStart;
}
var debugOn = true;
var $log, assetsLoaded = false;
function logPerf(msg) {
if (debugOn) {
if (assetsLoaded) {
if (!$('#jslogPerf').length) {
$('body').prepend('<div id="jslogPerf" style="position:fixed;bottom:8px;right:16px;z-index:1000;padding:8px;background:rgb(0,255,255,.5)"></div>')
}
$log = $log || $('#jslogPerf');
$log.append('<p style="margin-bottom:4px;font-size:.75em;"><b>' + getTimeDiff() + '</b>ms :: ' + msg);
}
if (window.console) {
console.log(getTimeDiff() + 'ms :: ' + msg);
if (console.timeStamp){
console.timeStamp(msg);
}
}
}
}
logPerf('On HEAD, starting...');
</script>