var sizeAndPositionBackgroundMedia = function (backgroundMedia) {
var mediaWidth = backgroundMedia.clientWidth,
mediaHeight = backgroundMedia.clientHeight,
windowWidth = window.innerWidth,
windowHeight = window.innerHeight,
widthDifference = mediaWidth / windowWidth,
heightDifference = mediaHeight / windowHeight;
// console.log('backgroundMedia', backgroundMedia, mediaWidth, mediaHeight, windowWidth, windowHeight, 'widthDifference', widthDifference, 'heightDifference', heightDifference);
console.log('resize');
if (widthDifference < heightDifference) {
var heightOffset = ((mediaHeight / widthDifference) - windowHeight) / 2 * -1;
if (widthDifference < 1) {
heightOffset = ((mediaHeight / widthDifference) / 2) * -1;
}
backgroundMedia.style.width = '100%';
backgroundMedia.style.height = 'auto';
backgroundMedia.style['margin-top'] = heightOffset + 'px';
}
else {
var widthOffset = ((mediaWidth / heightDifference) - windowWidth) / 2 * -1;
if (heightDifference < 1) {
widthOffset = ((mediaWidth / heightDifference) / 2) * -1;
}
backgroundMedia.style.height = '100%';
backgroundMedia.style.width = 'auto';
backgroundMedia.style['margin-left'] = widthOffset + 'px';
}
if (classie.hasClass(backgroundMedia, 'lazyload')) {
lazyloadBackgroundMedia(backgroundMedia);
}
};
var openSubNav = function (event) {
// console.log('moving on nav');
var target = getEventTarget(event);
if (classie.hasClass(target, 'has-sub-nav')) {
self.showSubNav(target.getAttribute('data-navitr'));
self.$navbar.removeEventListener('mousemove', openSubNav);
}
};
var autoSubmitFormHandler = function (e) {
var formElement = this.form;
if (classie.hasClass(formElement, '_pea-ajax-form')) {
ajaxForm.get(e, formElement);
}
else {
formElement.submit();
}
};
openSubNav = function(event){
// console.log("moving on nav");
var target = getEventTarget(event);
if(classie.hasClass(target,"has-sub-nav")){
self.showSubNav(target.getAttribute("data-navitr"));
// console.log("moving on subnav",target.getAttribute("data-navitr"));
self.$navbar.removeEventListener("mousemove",openSubNav);
}
};
this.init = function(){
// do it for every element that matches selector
for(var x=0; x<thisElements.length;x++){
var touchDif,
barHeight,
divS = '<div></div>';
releaseScroll = false;
// used in event handlers and for better minification
me = thisElements[x];
classie.addClass(me,o.addedOriginalClass);
// ensure we are not binding it again
if( classie.hasClass(me.parentNode,o.wrapperClass) ){
// start from last bar position
var offset = me.scrollTop;
bar = me.parentNode.querSelector('.' + o.barClass),// find bar and rail,
rail = me.parentNode.querSelector('.' + o.railClass);
getBarHeight();
// check if we should scroll existing instance
if (typeof options==='object'){
// Pass height: auto to an existing slimscroll object to force a resize after contents have changed
if ( 'height' in options && options.height === 'auto' ) {
me.parentNode.style.height='auto';
me.style.height='auto';
var height = me.parentNode.parentNode.scrollHeight;
me.parent.style.height=height;
me.style.height=height;
}
if ('scrollTo' in options){
// jump to a static point
offset = parseInt(o.scrollTo,10);
}
else if ('scrollBy' in options){
// jump by value pixels
offset += parseInt(o.scrollBy,10);
}
else if ('destroy' in options){
// remove slimscroll elements
domhelper.removeElement(bar);
domhelper.removeElement(rail);
domhelper.unwrapElement(me);
return;
}
// scroll content by the given offset
// console.log("add scrollContent");
scrollContent(offset, false, true,me);
}
return;
}
// optionally set height to the parent's height
o.height = (options.height === 'auto') ? me.parentNode.offsetHeight : options.height;
// wrap content
var wrapper = document.createElement("div");
classie.addClass(wrapper,o.wrapperClass);
wrapper.style.position= 'relative';
wrapper.style.overflow= 'hidden';
wrapper.style.width= o.width;
wrapper.style.height= o.height;
// update style for the div
me.style.overflow= 'hidden';
me.style.width= o.width;
me.style.height= o.height;
// create scrollbar rail
rail = document.createElement("div");
classie.addClass(rail,o.railClass);
rail.style.width= o.size;
rail.style.height= '100%';
rail.style.position= 'absolute';
rail.style.top= 0;
rail.style.display= (o.alwaysVisible && o.railVisible) ? 'block' : 'none';
rail.style['border-radius']= o.railBorderRadius;
rail.style.background= o.railColor;
rail.style.opacity= o.railOpacity;
rail.style.zIndex= 90;
// create scrollbar
bar = document.createElement("div");
classie.addClass(bar,o.barClass);
bar.style.background= o.color;
bar.style.width= o.size;
bar.style.position= 'absolute';
bar.style.top= 0;
bar.style.opacity= o.opacity;
bar.style.display= o.alwaysVisible ? 'block' : 'none';
bar.style['border-radius'] = o.borderRadius;
bar.style.BorderRadius= o.borderRadius;
bar.style.MozBorderRadius= o.borderRadius;
bar.style.WebkitBorderRadius= o.borderRadius;
bar.style.zIndex= 99;
// set position
if(o.position === 'right'){
rail.style.right = o.distance;
bar.style.right = o.distance;
}
else{
rail.style.left = o.distance;
bar.style.left = o.distance;
}
// wrap it
domhelper.elementWrap(me,wrapper);
// append to parent div
me.parentNode.appendChild(bar);
me.parentNode.appendChild(rail);
// set up initial height
getBarHeight();
// make it draggable and no longer dependent on the jqueryUI
bar.addEventListener("mousedown",mousedownEventHandler);
document.addEventListener("mouseup",mouseupEventHandler);
bar.addEventListener("selectstart",selectstartEventHandler);
bar.addEventListener("mouseover",mouseoverEventHandler);
bar.addEventListener("mouseleave",mouseleaveEventHandler);
bar.addEventListener('touchstart',scrollContainerTouchStartEventHandler);
rail.addEventListener("mouseover",railMouseOverEventHandler);
rail.addEventListener("mouseleave",railMouseLeaveEventHandler);
me.addEventListener("mouseover",scrollContainerMouseOverEventHandler);
me.addEventListener("mouseleave",scrollContainerMouseLeaveEventHandler);
me.addEventListener('DOMMouseScroll', mouseWheelEventHandler, false );
me.addEventListener('mousewheel', mouseWheelEventHandler, false );
}
// check start position
if (o.start === 'bottom'){
// scroll content to bottom
bar.style.top= me.offsetHeight - bar.offsetHeight;
scrollContent(0, true);
}
else if (o.start !== 'top'){
// assume jQuery selector
scrollContent( domhelper.getPosition(document.querSelector(o.start).top, null, true));
// make sure bar stays hidden
if (!o.alwaysVisible) {
domhelper.elementHideCss(bar);
}
}
document.addEventListener('touchmove',scrollContainerTouchMoveEventHandler);
}.bind(this);