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'
}), }),

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

@ -1,10 +1,10 @@
"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");
} }

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

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

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