Javascript work
This commit is contained in:
Stephan
parent
4cb89ec7af
commit
9ce65091f4
11 changed files with 995 additions and 934 deletions
|
|
@ -1,15 +1,55 @@
|
|||
"use strict";
|
||||
'use strict';
|
||||
|
||||
function setup() {
|
||||
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 && viewHover) {
|
||||
console.info('\n', hippie.brand, '\n\n');
|
||||
if (debugOn) {
|
||||
console.log('Debug information:\n', 'HTML:', hippie.screen, 'BODY:', hippie.body);
|
||||
}
|
||||
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");
|
||||
}
|
||||
}
|
||||
|
||||
// MODULE Scroll navigation
|
||||
function HippieScroll($el) {
|
||||
'use strict';
|
||||
// Toggle display on scroll position
|
||||
// console.log('Scroll object added');
|
||||
this.check = function() {
|
||||
// console.log('Scroll position checked');
|
||||
hippie.screen.y = Math.min($(document).scrollTop(), document.documentElement.scrollTop);
|
||||
if (hippie.screen.y > initY) {
|
||||
if (!initLeft) {
|
||||
$el.parent().removeClass('magic');
|
||||
console.info('Initial viewport left');
|
||||
}
|
||||
initLeft = true;
|
||||
} else {
|
||||
if (initLeft) {
|
||||
$el.parent().addClass('magic');
|
||||
console.info('Initial viewport entered');
|
||||
}
|
||||
initLeft = false;
|
||||
}
|
||||
}
|
||||
// Add events to navigation elements
|
||||
$('.js_scrolltop').click(function(event) {
|
||||
event.preventDefault();
|
||||
$('html, body').animate({
|
||||
scrollTop: 0
|
||||
}, basicEase);
|
||||
// console.log('Scrolled to top');
|
||||
});
|
||||
$('.js_scrolldown').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);
|
||||
});
|
||||
}
|
||||
|
||||
// get document coordinates of the element
|
||||
// function getCoords(elem) {
|
||||
// let box = elem.getBoundingClientRect();
|
||||
|
|
@ -44,7 +84,7 @@ var Utils = new Utils();
|
|||
// TEST
|
||||
|
||||
function scrollNav() {
|
||||
$('.nav a').click(function(){
|
||||
$('.nav a').click(function() {
|
||||
//Toggle Class
|
||||
$(".active").removeClass("active");
|
||||
$(this).closest('li').addClass("active");
|
||||
|
|
|
|||
|
|
@ -4,8 +4,8 @@ setup();
|
|||
|
||||
// DOM ready
|
||||
// -----------------------------------------------------------------------------
|
||||
$(document).ready(function(){
|
||||
"use strict";
|
||||
$(document).ready(function() {
|
||||
'use strict';
|
||||
|
||||
// logPerf('DOM ready.');
|
||||
|
||||
|
|
@ -17,16 +17,16 @@ $(document).ready(function(){
|
|||
|
||||
// Displays explanation popup
|
||||
$('.js_pop').hover(
|
||||
function(){
|
||||
// if($(this).attr('emmet')){
|
||||
function() {
|
||||
// if ($(this).attr('emmet')) {
|
||||
//
|
||||
// }
|
||||
$(this).next('.exp_pop').show();
|
||||
}, function(){
|
||||
}, function() {
|
||||
$(this).next('.exp_pop').hide();
|
||||
}
|
||||
).mousemove(
|
||||
function(event){
|
||||
function(event) {
|
||||
$(this).next('.exp_pop').css({
|
||||
'top': event.pageY - $(this).next('.exp_pop').outerHeight() - 4,
|
||||
'left': event.pageX + 8
|
||||
|
|
@ -39,14 +39,14 @@ $(document).ready(function(){
|
|||
|
||||
// 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(expMode !== true){
|
||||
if (expMode !== true) {
|
||||
expMode = true;
|
||||
|
||||
$('.js_pop').each(function(i, e){
|
||||
if($(this).css('position') === 'static'){
|
||||
$('.js_pop').each(function(i, e) {
|
||||
if ($(this).css('position') === 'static') {
|
||||
$(this).addClass('js_changed_pos');
|
||||
$(this).css('position', 'relative');
|
||||
}
|
||||
|
|
@ -57,15 +57,15 @@ $(document).ready(function(){
|
|||
});
|
||||
|
||||
} else {
|
||||
$('.js_pop').each(function(i, e){
|
||||
$('.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')){
|
||||
if ($(this).hasClass('js_changed_pos')) {
|
||||
$(this).css('position', '');
|
||||
if($(this).attr('style') === ''){
|
||||
if ($(this).attr('style') === '') {
|
||||
$(this).removeAttr('style');
|
||||
}
|
||||
$(this).removeClass('js_changed_pos');
|
||||
|
|
@ -78,49 +78,10 @@ $(document).ready(function(){
|
|||
console.log('Explanation mode', expMode);
|
||||
});
|
||||
|
||||
// WIP Scroll to top
|
||||
$('.js_scrolltop').click(function(event){
|
||||
event.preventDefault();
|
||||
$('html, body').animate({
|
||||
scrollTop: 0
|
||||
}, basicEase);
|
||||
});
|
||||
$('.js_scrolldown').click(function(event){
|
||||
event.preventDefault();
|
||||
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');
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
// Scroll
|
||||
// ------------------------------------------------------------------------------
|
||||
$( document ).scroll(function(){
|
||||
"use strict";
|
||||
|
||||
// Toggle navigation elements
|
||||
docPosY = $( document ).scrollTop();
|
||||
if(docPosY > docInitY){
|
||||
if(!docInitleft){
|
||||
$('.js_scrolltop').parent().removeClass('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,20 @@
|
|||
var hippie = {
|
||||
brand: "|-| | |^ |^ | [- "
|
||||
brand: "|-| | |^ |^ | [- ",
|
||||
screen: {
|
||||
w: Math.max(document.documentElement.offsetWidth, document.documentElement.clientWidth, window.innerWidth, 0),
|
||||
vh: Math.max(document.documentElement.clientHeight, window.innerHeight, 0),
|
||||
dh: Math.max(document.documentElement.offsetHeight, document.documentElement.clientHeight, 0),
|
||||
y: Math.min($(document).scrollTop(), document.documentElement.scrollTop)
|
||||
// hippie.screen.y: document.documentElement.scrollTop
|
||||
},
|
||||
body: {
|
||||
w: Math.max(document.body.offsetWidth, document.body.clientWidth, window.innerWidth, 0),
|
||||
h: Math.max(document.body.offsetHeight, document.body.clientHeight, 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 docPosY = 0;
|
||||
var docInitleft = false;
|
||||
var docInitY = viewH;
|
||||
var initLeft = false;
|
||||
var initY = hippie.screen.vh;
|
||||
|
||||
var viewHover = true;
|
||||
var basicEase = 600;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue