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

New es6 coding standard

Browse source 
* Added babel presets to setup standards
 * set jshint to es6
 * reworked javascript and cerated first two modules
This commit is contained in:
Stephan 2019-04-06 12:31:07 +02:00
parent 3d4eef5eb0
commit 371cb450f8
16 changed files with 1668 additions and 829 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,50 +1,62 @@
// This is called everytime
function setup () {
'use strict';
console.info('\n', hippie.brand, '\n\n');
if (debugOn) {
console.log('Debug information:\n', 'HTML:', hippie.screen, 'BODY:', hippie.body);
console.info('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");
// WANNABE MODULE Mouse over effect
// With CSS only
if ($('#js_mob').length && viewHover) {
$('#js_mob').addClass('mouse_over');
}
// if (viewHover) {
// $('body').prepend('<div id="js_mob" class="mouse_over"></div>');
// }
// With JS
}
// MODULE Scroll navigation
function HippieScroll ($el) {
// Using constructor function
function HippieScroll ($tp, $dn) {
'use strict';
// this.$el = $el;
// console.log('Elements:', $el, this.$el);
// Toggle display on scroll position
// console.log('Scroll object added');
// this.$tp = $tp;
// Define initial situation
let initLeft = false;
const initY = hippie.screen.vh;
$tp.addClass('hide');
// Check scroll position and toggle element
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');
$tp.removeClass('hide');
console.info('Initial viewport left');
}
initLeft = true;
} else {
if (initLeft) {
$el.parent().addClass('magic');
$tp.addClass('hide');
console.info('Initial viewport entered');
}
initLeft = false;
}
};
// Add events to navigation elements
$('.js_scrolltop').click(function (event) {
$tp.click(function (event) {
event.preventDefault();
$('html, body').animate({
$('html, body').stop().animate({
scrollTop: 0
}, basicEase);
// console.log('Scrolled to top');
});
$('.js_scrolldown').click(function (event) {
$dn.click(function (event) {
event.preventDefault();
var pos = Math.max(hippie.screen.dh, hippie.body.h) - hippie.screen.vh;
$('html').scrollTop(pos);
@ -53,6 +65,82 @@ function HippieScroll ($el) {
});
}
// 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);
});
}
// get document coordinates of the element
// function getCoords (elem) {
// let box = elem.getBoundingClientRect();
@ -83,22 +171,3 @@ function HippieScroll ($el) {
// };
//
// var Utils = new Utils();
// TEST
function scrollNav () {
'use strict';
$('.nav a').click(function () {
//Toggle Class
$(".active").removeClass("active");
$(this).closest('li').addClass("active");
var theClass = $(this).attr("class");
$('.'+theClass).parent('li').addClass('active');
//Animate
$('html, body').stop().animate({
scrollTop: $( $(this).attr('href') ).offset().top - 160
}, 400);
return false;
});
$('.scrollTop a').scrollTop();
}