Javascript work
* 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
parent
0fa1b3c4b4
commit
4cb89ec7af
8 changed files with 257 additions and 235 deletions
15
.jshintrc
15
.jshintrc
|
|
@ -19,7 +19,7 @@
|
|||
"nonbsp" : true, // true: Prohibit "non-breaking whitespace" characters.
|
||||
"nonew" : false, // true: Prohibit use of constructors for side-effects (without assignment)
|
||||
"plusplus" : false, // true: Prohibit use of `++` and `--`
|
||||
"quotmark" : true, // Quotation mark consistency:
|
||||
"quotmark" : false, // Quotation mark consistency:
|
||||
// false : do nothing (default)
|
||||
// true : ensure whatever is used is consistent
|
||||
// "single" : require single quotes
|
||||
|
|
@ -87,5 +87,16 @@
|
|||
"yui" : false, // Yahoo User Interface
|
||||
|
||||
// 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
|
||||
}
|
||||
|
|
|
|||
|
|
@ -179,11 +179,12 @@ function code(cb) {
|
|||
sourcemaps: true,
|
||||
allowEmpty: true
|
||||
}),
|
||||
cache('code'),
|
||||
plumber(),
|
||||
// cache('code'),
|
||||
concat(hippie.jsFile +'.js'),
|
||||
dest(output.code),
|
||||
uglify(),
|
||||
remember('code'),
|
||||
// remember('code'),
|
||||
rename({
|
||||
suffix: '.min'
|
||||
}),
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
"use strict";
|
||||
|
||||
function setup() {
|
||||
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.log('\n', hippie.brand, '\n\n');
|
||||
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>");
|
||||
$('#js_tph').addClass("hover_full_view_change");
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,155 +1,126 @@
|
|||
"use strict";
|
||||
|
||||
// DOM ready
|
||||
// ------------------------------------------------------------------------------
|
||||
$( document ).ready(function() {
|
||||
|
||||
// Setup
|
||||
// ------------------------------------------------------------------------------
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
setup();
|
||||
|
||||
// DOM ready
|
||||
// -----------------------------------------------------------------------------
|
||||
$(document).ready(function(){
|
||||
"use strict";
|
||||
|
||||
// logPerf('DOM ready.');
|
||||
|
||||
// Modules
|
||||
// ------------------------------------------------------------------------------
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
// Explanation module scripts
|
||||
var exp_mode = false;
|
||||
var expMode = false;
|
||||
|
||||
// Displays explanation popup
|
||||
$(".js_pop").hover(
|
||||
$('.js_pop').hover(
|
||||
function(){
|
||||
var $this = $(this);
|
||||
|
||||
// if($(this).attr("emmet")){
|
||||
// if($(this).attr('emmet')){
|
||||
//
|
||||
// }
|
||||
|
||||
$(this).next(".exp_pop").show();
|
||||
$(this).next('.exp_pop').show();
|
||||
}, function(){
|
||||
$(this).next(".exp_pop").hide();
|
||||
$(this).next('.exp_pop').hide();
|
||||
}
|
||||
).mousemove(
|
||||
function(ev) {
|
||||
$(this).next(".exp_pop").css({
|
||||
"top": ev.pageY - $(this).next(".exp_pop").outerHeight() - 4,
|
||||
"left": ev.pageX + 8
|
||||
// "left": ev.pageX - $(this).offset().left + 8
|
||||
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
|
||||
});
|
||||
// TODO - needs more love
|
||||
// console.log(ev.pageX);
|
||||
// console.log(event.pageX);
|
||||
}
|
||||
);
|
||||
|
||||
// WIP Activates layer with explanation elements
|
||||
// Besser ::after oder ::before benutzen
|
||||
$(".js_showmeta").click(function(e){
|
||||
$('.js_showmeta').click(function(e){
|
||||
var $wrap, $pop;
|
||||
|
||||
if(exp_mode !== true){
|
||||
exp_mode = true;
|
||||
if(expMode !== true){
|
||||
expMode = true;
|
||||
|
||||
$(".js_pop").each(function(i, e){
|
||||
if($(this).css("position") === "static") {
|
||||
$(this).addClass("js_changed_pos");
|
||||
$(this).css("position", "relative");
|
||||
$('.js_pop').each(function(i, e){
|
||||
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_marker_pop\"></span>");
|
||||
$pop = $(this).next('.exp_pop').detach();
|
||||
$wrap = $(this).wrap('<span class="exp_wrap"></span>').parent().prepend('<span class="exp_marker_pop"></span>');
|
||||
$wrap.after($pop);
|
||||
});
|
||||
|
||||
} else {
|
||||
$(".js_pop").each(function(i, e){
|
||||
$wrap = $(this).parent(".exp_wrap");
|
||||
$pop = $wrap.next(".exp_pop").detach();
|
||||
$wrap.find(".exp_marker_pop").remove();
|
||||
$(this).unwrap(".exp_wrap");
|
||||
$('.js_pop').each(function(i, e){
|
||||
$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");
|
||||
if($(this).hasClass('js_changed_pos')){
|
||||
$(this).css('position', '');
|
||||
if($(this).attr('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
|
||||
$('.js_scrolltop').click(function(event){
|
||||
event.preventDefault();
|
||||
console.log('scroll to the top');
|
||||
|
||||
document.documentElement.scrollTop = document.body.scrollTop = 0;
|
||||
|
||||
// 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');
|
||||
// });
|
||||
$('html, body').animate({
|
||||
scrollTop: 0
|
||||
}, basicEase);
|
||||
});
|
||||
$('.js_scrolldown').click(function(event){
|
||||
event.preventDefault();
|
||||
var pos = Math.max(html_height, body_height) - view_height;
|
||||
console.log('scroll down to', pos);
|
||||
var pos = Math.max(htmlH, bodyH) - viewH;
|
||||
document.documentElement.scrollTop = pos;
|
||||
console.info('scrolled down to', pos);
|
||||
});
|
||||
|
||||
|
||||
|
||||
$( "#gameIcon" ).click(function(event) {
|
||||
$('#gameIcon').click(function(event){
|
||||
event.preventDefault();
|
||||
$( this ).clone().appendTo( "#gameDetail" );
|
||||
$( this ).siblings().clone().appendTo( "#gameDetail" );
|
||||
$( "#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++;
|
||||
}
|
||||
$(this).clone().appendTo('#gameDetail');
|
||||
$(this).siblings().clone().appendTo('#gameDetail');
|
||||
$('#gameDetail').removeClass('magic');
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
// Scroll
|
||||
// ------------------------------------------------------------------------------
|
||||
$( document ).scroll(function(){
|
||||
"use strict";
|
||||
|
||||
// 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) {
|
||||
docPosY = $( document ).scrollTop();
|
||||
if(docPosY > docInitY){
|
||||
if(!docInitleft){
|
||||
$('.js_scrolltop').parent().removeClass('magic');
|
||||
} else {
|
||||
$('.js_scrolltop').parent().addClass('magic');
|
||||
console.info('Initial viewport left');
|
||||
}
|
||||
docInitleft = true;
|
||||
} else {
|
||||
if(docInitleft){
|
||||
$('.js_scrolltop').parent().addClass('magic');
|
||||
console.info('Initial viewport left');
|
||||
}
|
||||
docInitleft = false;
|
||||
}
|
||||
|
||||
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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 body_height = Math.max(document.body.offsetHeight, document.body.clientHeight, 0);
|
||||
var body_width = Math.max(document.body.offsetWidth, document.body.clientWidth, window.innerWidth, 0);
|
||||
var viewW = Math.max(document.documentElement.offsetWidth, document.documentElement.clientWidth, window.innerWidth, 0);
|
||||
var viewH = Math.max(document.documentElement.clientHeight, window.innerHeight, 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 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 basic_ease = 600;
|
||||
var scroll_y_margin = view_height;
|
||||
var viewHover = true;
|
||||
var basicEase = 600;
|
||||
|
||||
var onerow_alphabet = "/\\ ]3 ( |) [- /= (_, |-| | _T /< |_ |\\/| |\\| () |^ ()_ /? _\\~ ~|~ |_| \\/ \\/\\/ >< `/ ~/_ ";
|
||||
var onerow_digits = "\'| ^/_ -} +| ;~ (o \"/ {} \"| (\\) ";
|
||||
var onerowAlphabet = "/\\ ]3 ( |) [- /= (_, |-| | _T /< |_ |\\/| |\\| () |^ ()_ /? _\\~ ~|~ |_| \\/ \\/\\/ >< `/ ~/_ ";
|
||||
var onerowDigits = "\'| ^/_ -} +| ;~ (o \"/ {} \"| (\\) ";
|
||||
|
|
|
|||
|
|
@ -10,6 +10,8 @@
|
|||
{% include "demo/partials/_meta.njk" %}
|
||||
{% block meta %}{% endblock %}
|
||||
|
||||
{% include "hippie/partials/_head_script.njk" %}
|
||||
|
||||
{% include "demo/partials/_links.njk" %}
|
||||
{% block links %}
|
||||
<link rel="stylesheet" type="text/css" media="all" href="/css/demo.css"/>
|
||||
|
|
|
|||
|
|
@ -10,6 +10,8 @@
|
|||
{% include "demo/partials/_meta.njk" %}
|
||||
{% block meta %}{% endblock %}
|
||||
|
||||
{% include "hippie/partials/_head_script.njk" %}
|
||||
|
||||
{% include "demo/partials/_links.njk" %}
|
||||
{% block links %}
|
||||
<!--[if lte IE 9]>
|
||||
|
|
|
|||
32
source/templates/hippie/partials/_head_script.njk
Normal file
32
source/templates/hippie/partials/_head_script.njk
Normal 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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue