feat: Update composeMail function
- Move function to hippie functions - Use vanilla instead of jQuery - Add examples to introduction page - Reindent
This commit is contained in:
parent
9fbc19388f
commit
875041bacf
3 changed files with 213 additions and 213 deletions
|
|
@ -1,149 +1,188 @@
|
|||
// This is called everytime
|
||||
function setup() {
|
||||
'use strict';
|
||||
'use strict';
|
||||
|
||||
console.group('Document information');
|
||||
console.info('\n', hippie.brand, '\n\n');
|
||||
console.info('HTML:', hippie.screen, '\nBODY:', hippie.body);
|
||||
console.groupEnd();
|
||||
if (debugOn) {
|
||||
console.group('Debug information');
|
||||
console.dir(hippie);
|
||||
console.groupEnd();
|
||||
}
|
||||
console.group('Document information');
|
||||
console.info('\n', hippie.brand, '\n\n');
|
||||
console.info('HTML:', hippie.screen, '\nBODY:', hippie.body);
|
||||
console.groupEnd();
|
||||
if (debugOn) {
|
||||
console.group('Debug information');
|
||||
console.dir(hippie);
|
||||
console.groupEnd();
|
||||
}
|
||||
|
||||
// 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
|
||||
// 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
|
||||
// Using constructor function
|
||||
function HippieScroll($tp, $dn) {
|
||||
'use strict';
|
||||
'use strict';
|
||||
|
||||
// this.$tp = $tp;
|
||||
// Define initial situation
|
||||
let initLeft = false;
|
||||
const initY = hippie.screen.vh;
|
||||
// this.$tp = $tp;
|
||||
// Define initial situation
|
||||
let initLeft = false;
|
||||
const initY = hippie.screen.vh;
|
||||
|
||||
$tp.addClass('di_none');
|
||||
$tp.addClass('di_none');
|
||||
|
||||
// Check scroll position and toggle element
|
||||
this.check = function () {
|
||||
hippie.screen.y = Math.min($(document).scrollTop(), document.documentElement.scrollTop);
|
||||
if (hippie.screen.y > initY) {
|
||||
if (!initLeft) {
|
||||
$tp.removeClass('di_none');
|
||||
console.info('Initial viewport left');
|
||||
}
|
||||
initLeft = true;
|
||||
} else {
|
||||
if (initLeft) {
|
||||
$tp.addClass('di_none');
|
||||
console.info('Initial viewport entered');
|
||||
}
|
||||
initLeft = false;
|
||||
}
|
||||
};
|
||||
// Check scroll position and toggle element
|
||||
this.check = function () {
|
||||
hippie.screen.y = Math.min($(document).scrollTop(), document.documentElement.scrollTop);
|
||||
if (hippie.screen.y > initY) {
|
||||
if (!initLeft) {
|
||||
$tp.removeClass('di_none');
|
||||
console.info('Initial viewport left');
|
||||
}
|
||||
initLeft = true;
|
||||
} else {
|
||||
if (initLeft) {
|
||||
$tp.addClass('di_none');
|
||||
console.info('Initial viewport entered');
|
||||
}
|
||||
initLeft = false;
|
||||
}
|
||||
};
|
||||
|
||||
// Add events to navigation elements
|
||||
$tp.click(function (event) {
|
||||
event.preventDefault();
|
||||
$('html, body').stop().animate({
|
||||
scrollTop: 0
|
||||
}, basicEase);
|
||||
// console.log('Scrolled to top');
|
||||
});
|
||||
$dn.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);
|
||||
});
|
||||
// Add events to navigation elements
|
||||
$tp.click(function (event) {
|
||||
event.preventDefault();
|
||||
$('html, body').stop().animate({
|
||||
scrollTop: 0
|
||||
}, basicEase);
|
||||
// console.log('Scrolled to top');
|
||||
});
|
||||
$dn.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);
|
||||
});
|
||||
}
|
||||
|
||||
// MODULE Meta elements
|
||||
function HippieMeta($ma, $pp) {
|
||||
'use strict';
|
||||
'use strict';
|
||||
|
||||
let metaOn = false;
|
||||
let metaOn = false;
|
||||
|
||||
$ma.click(function () {
|
||||
var $wrap, $pop;
|
||||
$ma.click(function () {
|
||||
var $wrap, $pop;
|
||||
|
||||
// if (metaOn !== true) {
|
||||
if (!metaOn) {
|
||||
metaOn = true;
|
||||
// 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);
|
||||
$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'));
|
||||
$('<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
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
// 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');
|
||||
} 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');
|
||||
// }
|
||||
});
|
||||
$(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);
|
||||
});
|
||||
metaOn = false;
|
||||
}
|
||||
console.log('Explanation mode', metaOn);
|
||||
});
|
||||
}
|
||||
|
||||
// Sets the href attribute to mailto: with given information
|
||||
function composeMail(tag, name, prov, suffix, text, topic) {
|
||||
let trigger = tag.indexOf(".");
|
||||
let mailString = name + '@' + prov + '.' + suffix;
|
||||
let textString = mailString.replace(/@/g, "(at)");
|
||||
let descString = "Nachricht an " + mailString;
|
||||
|
||||
if (!text) {
|
||||
text = mailString;
|
||||
} else if (text === "at") {
|
||||
text = textString;
|
||||
} else if (text === "to") {
|
||||
text = descString;
|
||||
}
|
||||
|
||||
if (topic) {
|
||||
topic = "?subject=" + topic;
|
||||
} else {
|
||||
topic = "";
|
||||
}
|
||||
|
||||
if (trigger === -1) {
|
||||
const el = document.getElementById(tag);
|
||||
const elContent = el.innerHTML;
|
||||
|
||||
el.innerHTML = elContent + text;
|
||||
el.setAttribute("href", "mailto:" + mailString + topic);
|
||||
} else {
|
||||
const els = document.getElementsByClassName(tag.slice(1));
|
||||
|
||||
for (let el of els) {
|
||||
const elContent = el.innerHTML;
|
||||
|
||||
el.innerHTML = elContent + text;
|
||||
el.setAttribute("href", "mailto:" + mailString + topic);
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
// get document coordinates of the element
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue