/******/ (() => { // webpackBootstrap
/******/ var __webpack_modules__ = ({
/***/ "./inc/core/_core.js":
/*!***************************!*\
!*** ./inc/core/_core.js ***!
\***************************/
/***/ (() => {
/***/ }),
/***/ "./inc/scrollmagic/_scrollmagic.js":
/*!*****************************************!*\
!*** ./inc/scrollmagic/_scrollmagic.js ***!
\*****************************************/
/***/ (() => {
var scrollMagicController = ''; //setup scroller function
/**
* element can have these data attributes:
* data-scrollanimation = a class to add to this element on scroll
* data-scrolltrigger = the element that triggers the scene to start
* data-scrollhook = onEnter, onLeave, default is center
* data-scrolloffset = offset from scrollhook on trigger element
* data-scrollduration = how long it should last. if not set, 0 is used and that means it doesnt reset until you scroll up.
* data-scrollscrub = tweens between two classes as you scroll. tween expects a duration, else duration will be 100
*
*/
function runScrollerAttributes(element) {
//this function can be run on an alement even after load and they will be added to scrollMagicController
//scrollmagic must be loaded
if ('undefined' != typeof ScrollMagic && element.hasAttribute('data-scrollanimation')) {
//scroll animation attributes
var animationClass = element.dataset.scrollanimation,
triggerHook = element.dataset.scrollhook || 'center',
offset = element.dataset.offset || 0,
triggerElement = element.dataset.scrolltrigger || element,
duration = element.dataset.duration || 0,
tween = element.dataset.scrollscrub,
reverse = element.dataset.reverse || true;
scene = ''; //if animation has word up or down, its probably an animation that moves it up or down,
//so make sure trigger element
if (-1 !== animationClass.toLowerCase().indexOf('up') || -1 !== animationClass.toLowerCase().indexOf('down')) {
//get parent element and make that the trigger, but use an offset from current element
if (triggerElement === element) {
triggerElement = element.parentElement;
offset = element.offsetTop - triggerElement.offsetTop + parseInt(offset);
}
triggerHook = 'onEnter';
} //if fixed at top, wrap in div
if (element.getAttribute('data-scrollanimation') === 'fixed-at-top') {
var wrappedElement = wrap(element, document.createElement('div'));
wrappedElement.classList.add('fixed-holder');
triggerHook = 'onLeave';
triggerElement = element.parentElement;
} //if scrollscrub exists used tweenmax
if (tween !== undefined) {
if (!duration) {
duration = 100;
}
tween = TweenMax.to(element, .65, {
className: '+=' + animationClass
}); //finally output the scene
scene = new ScrollMagic.Scene({
triggerElement: triggerElement,
offset: offset,
triggerHook: triggerHook,
duration: duration,
reverse: reverse
}).setTween(tween).addTo(scrollMagicController) // .addIndicators()
;
} else {
scene = new ScrollMagic.Scene({
triggerElement: triggerElement,
offset: offset,
triggerHook: triggerHook,
duration: duration,
reverse: reverse
}).on('enter leave', function () {
//instead of using toggle class we can use these events of on enter and leave and toggle class at both times
element.classList.toggle(animationClass);
element.classList.toggle('active'); //if fixed at top set height for spacer and width
if (element.getAttribute('data-scrollanimation') === 'fixed-at-top') {
//making fixed item have a set width matching parent
element.style.width = element.parentElement.clientWidth + 'px';
element.style.left = element.parentElement.offsetLeft + 'px';
}
}).addTo(scrollMagicController) //.setClassToggle(element, animationClass + ' active').addTo(scrollMagicController)
// .addIndicators()
;
} //good for knowing when its been loaded
document.body.classList.add('scrollmagic-loaded');
}
}
document.addEventListener('DOMContentLoaded', function () {
/*------- Scroll Magic Events Init --------*/
if ('undefined' != typeof ScrollMagic) {
scrollMagicController = new ScrollMagic.Controller();
document.querySelectorAll('[data-scrollanimation]').forEach(function (element) {
runScrollerAttributes(element);
});
}
});
/***/ }),
/***/ "./src/js/core/direction-reveal.js":
/*!*****************************************!*\
!*** ./src/js/core/direction-reveal.js ***!
\*****************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__)
/* harmony export */ });
/**
Direction aware content reveals.
@param {Object} object - Container for all options.
@param {string} selector - Container element selector.
@param {string} itemSelector - Item element selector.
@param {string} animationName - Animation CSS class.
@param {string} animationPostfixEnter - Animation CSS class postfix for enter event.
@param {string} animationPostfixLeave - Animation CSS class postfix for leave event.
@param {boolean} enableTouch - Adds touch event to show content on first click then follow link on the second click.
@param {integer} touchThreshold - Touch length must be less than this to trigger reveal which prevents the event triggering if user is scrolling.
*/
var DirectionReveal = function DirectionReveal() {
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
_ref$selector = _ref.selector,
selector = _ref$selector === void 0 ? '.direction-reveal' : _ref$selector,
_ref$itemSelector = _ref.itemSelector,
itemSelector = _ref$itemSelector === void 0 ? '.direction-reveal__card' : _ref$itemSelector,
_ref$animationName = _ref.animationName,
animationName = _ref$animationName === void 0 ? 'swing' : _ref$animationName,
_ref$animationPostfix = _ref.animationPostfixEnter,
animationPostfixEnter = _ref$animationPostfix === void 0 ? 'enter' : _ref$animationPostfix,
_ref$animationPostfix2 = _ref.animationPostfixLeave,
animationPostfixLeave = _ref$animationPostfix2 === void 0 ? 'leave' : _ref$animationPostfix2,
_ref$enableTouch = _ref.enableTouch,
enableTouch = _ref$enableTouch === void 0 ? true : _ref$enableTouch,
_ref$touchThreshold = _ref.touchThreshold,
touchThreshold = _ref$touchThreshold === void 0 ? 250 : _ref$touchThreshold;
var containers = document.querySelectorAll(selector);
var touchStart; // Utilities - https://hackernoon.com/rethinking-javascript-eliminate-the-switch-statement-for-better-code-5c81c044716d
var addEventListenerMulti = function addEventListenerMulti(element, events, fn) {
events.forEach(function (e) {
return element.addEventListener(e, fn);
});
};
var switchCase = function switchCase(cases) {
return function (defaultCase) {
return function (key) {
return key in cases ? cases[key] : defaultCase;
};
};
};
var fireEvent = function fireEvent(item, eventName, eventDetail) {
var event = new CustomEvent(eventName, {
bubbles: true,
detail: eventDetail
});
item.dispatchEvent(event);
}; // Get direction data based on element and pointer positions
var getDirection = function getDirection(e, item) {
// Width and height of current item
var w = item.offsetWidth;
var h = item.offsetHeight;
var position = getPosition(item); // Calculate the x/y value of the pointer entering/exiting, relative to the center of the item.
var x = (e.pageX - position.x - w / 2) * (w > h ? h / w : 1);
var y = (e.pageY - position.y - h / 2) * (h > w ? w / h : 1); // Calculate the angle the pointer entered/exited and convert to clockwise format (top/right/bottom/left = 0/1/2/3). - https://stackoverflow.com/a/3647634
var d = Math.round(Math.atan2(y, x) / 1.57079633 + 5) % 4; // console.table([x, y, w, h, e.pageX, e.pageY, item.offsetLeft, item.offsetTop, position.x, position.y]);
return d;
}; // Gets an elements position - https://www.kirupa.com/html5/get_element_position_using_javascript.htm
var getPosition = function getPosition(el) {
var xPos = 0;
var yPos = 0;
while (el) {
xPos += el.offsetLeft + el.clientLeft;
yPos += el.offsetTop + el.clientTop;
el = el.offsetParent;
}
return {
x: xPos,
y: yPos
};
};
var translateDirection = switchCase({
0: 'top',
1: 'right',
2: 'bottom',
3: 'left'
})('top'); // Updates direction and toggles classes
var updateDirection = function updateDirection(e, action) {
var currentItem = e.currentTarget;
var direction = getDirection(e, currentItem);
var directionString = translateDirection(direction); // Remove current animation classes and adds current action/direction.
var currentCssClasses = currentItem.className.split(' ');
var filteredCssClasses = currentCssClasses.filter(function (cssClass) {
return !cssClass.startsWith(animationName);
}).join(' ');
currentItem.className = filteredCssClasses;
currentItem.classList.add("".concat(animationName, "--").concat(action, "-").concat(directionString));
var eventDetail = {
action: action,
direction: directionString
};
fireEvent(currentItem, 'directionChange', eventDetail);
};
var bindEvents = function bindEvents(containerItem) {
var items = containerItem.querySelectorAll(itemSelector);
items.forEach(function (item) {
addEventListenerMulti(item, ['mouseenter', 'focus'], function (e) {
updateDirection(e, animationPostfixEnter);
});
addEventListenerMulti(item, ['mouseleave', 'blur'], function (e) {
updateDirection(e, animationPostfixLeave);
});
if (enableTouch) {
item.addEventListener('touchstart', function (e) {
touchStart = +new Date();
}, {
passive: true
});
item.addEventListener('touchend', function (e) {
var touchTime = +new Date() - touchStart;
if (touchTime < touchThreshold && !item.className.includes("".concat(animationName, "--").concat(animationPostfixEnter))) {
e.preventDefault();
resetVisible(e, items, updateDirection(e, animationPostfixEnter));
}
});
}
});
};
var resetVisible = function resetVisible(e, items, callback) {
items.forEach(function (item) {
var currentCssClasses = item.className;
if (currentCssClasses.includes("".concat(animationName, "--").concat(animationPostfixEnter)) && item !== e.currentTarget) {
item.className = currentCssClasses.replace("".concat(animationName, "--").concat(animationPostfixEnter), "".concat(animationName, "--").concat(animationPostfixLeave));
}
});
callback;
};
var init = function init() {
if (containers.length) {
containers.forEach(function (containerItem) {
bindEvents(containerItem);
});
} else {
return;
}
}; // Self init
init(); // Reveal API
return {
init: init
};
};
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (DirectionReveal);
/***/ }),
/***/ "./src/js/core/events.js":
/*!*******************************!*\
!*** ./src/js/core/events.js ***!
\*******************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _setup__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./setup */ "./src/js/core/setup.js");
/*--------------------------------------------------------------
# Adding some global events and functions users can use via data attributes
--------------------------------------------------------------*/
/**
* resize menu buttons on load. also runs on resize.
* menu button is not inside site-top for various reasons (we dont want x to be inside or when menu opens the ex is uinderneath.
* so we use this function to match the site -top height and center it as if it was inside
*/
var menuButtons = '';
function placeMenuButtons() {
var $siteTopHeight = document.querySelector('.site-top');
if ($siteTopHeight != null) {
$siteTopHeight = $siteTopHeight.clientHeight;
} // let adminbar = document.querySelector(' ');
// let adminbarHeight = 0;
//
// if (adminbar !== null) {
// adminbarHeight = adminbar.clientHeight;
// }
if (menuButtons.length) {
menuButtons.forEach(function (button) {
button.style.height = $siteTopHeight + 'px';
});
}
}
/*--------------------------------------------------------------
# IGN Events
--------------------------------------------------------------*/
document.addEventListener('DOMContentLoaded', function () {
/*------- Add touch classes or not --------*/
if (!("ontouchstart" in document.documentElement)) {
document.documentElement.className += " no-touch-device";
} else {
document.documentElement.className += " touch-device";
}
/*------- menu buttons --------*/
//if the menu button is outside site-top. get both buttons for centering both.
if (!document.querySelector('.app-menu')) {
menuButtons = document.querySelectorAll('.panel-left-toggle, .panel-right-toggle');
} else {
//otherwise the menu button does not need to be centered because its part of the app menu and moves. (moved in navigation.js)
menuButtons = document.querySelectorAll('.panel-right-toggle');
} //we run menu button function below in resize event
/*------- Toggle Buttons --------*/
//trigger optional afterToggle event
//adding new custom event for after the element is toggled
var toggleEvent = null;
if (isIE11) {
toggleEvent = document.createEvent('Event'); // Define that the event name is 'build'.
toggleEvent.initEvent('afterToggle', true, true);
} else {
toggleEvent = new Event('afterToggle', {
bubbles: true
}); //bubble allows for delegation on body
} //add aria to buttons currently on page
var buttons = document.querySelectorAll('[data-toggle]');
buttons.forEach(function (button) {
button.setAttribute('role', 'switch');
button.setAttribute('aria-checked', button.classList.contains('toggled-on') ? 'true' : 'false');
}); //toggling the buttons with delegation click
document.body.addEventListener('click', function (e) {
var item = e.target.closest('[data-toggle]');
if (item) {
var $doDefault = item.getAttribute('data-default'); //normally we prevent default unless someone add data-default
if (null === $doDefault) {
e.preventDefault();
e.stopPropagation();
} //if data-radio is found, only one can be selected at a time.
// untoggles any other item with same radio value
//radio items cannot be untoggled until another item is clicked
var radioSelector = item.getAttribute('data-radio');
if (radioSelector !== null) {
var radioSelectors = document.querySelectorAll("[data-radio=\"".concat(radioSelector, "\"]"));
radioSelectors.forEach(function (radioItem) {
if (radioItem !== item && radioItem.classList.contains('toggled-on')) {
toggleItem(radioItem); //toggle all other radio items off when this one is being turned on
}
});
} //if item has data-switch it can only be turned on or off but not both by this button based on value of data-switch (its either on or off)
var switchItem = item.getAttribute('data-switch'); //finally toggle the clicked item. some types of items cannot be untoggled like radio or an on switch
if (radioSelector !== null) {
toggleItem(item, 'on'); //the item clicked on cannot be unclicked until another item is pressed
} else if (switchItem !== null) {
if (switchItem === 'on') {
toggleItem(item, 'on');
} else {
toggleItem(item, 'off');
}
} else {
toggleItem(item); //normal regular toggle can turn itself on or off
}
} //end if item found
}); //actual toggle of an item and add class toggled-on and any other classes needed. Also do a slide if necessary
function toggleItem(item) {
var forcedState = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'none';
//toggle item
if (forcedState === 'on') {
item.classList.add('toggled-on'); //radio or data-switch of on will always toggle-on
} else if (forcedState === 'off') {
item.classList.remove('toggled-on'); //data-switch of off will always toggle off
} else {
item.classList.toggle('toggled-on'); //basic data toggle item
} //is item toggled? used for the rest of this function to toggle another target if needed.
var isToggled = item.classList.contains('toggled-on');
item.setAttribute('aria-expanded', isToggled ? 'true' : 'false'); //get class to add to this item or another
var $class = item.getAttribute('data-toggle'),
$target = document.querySelectorAll(item.getAttribute('data-target'));
if ($class === null || !$class) {
$class = 'toggled-on'; //default class added is toggled-on
} //special class added to another item
if ($target.length) {
$target.forEach(function (targetItem) {
if (isToggled) {
targetItem.classList.add($class);
} else {
targetItem.classList.remove($class);
}
targetItem.setAttribute('aria-expanded', isToggled ? 'true' : 'false'); //data slide open or closed
if (targetItem.dataset.slide !== undefined) {
var slideTime = targetItem.dataset.slide ? parseFloat(targetItem.dataset.slide) : .5;
if (isToggled) {
(0,_setup__WEBPACK_IMPORTED_MODULE_0__.ignSlideDown)(targetItem, slideTime);
} else {
ignSlideUp(targetItem, slideTime);
}
} //allow event to happen after click for the targeted item
targetItem.dispatchEvent(toggleEvent);
});
} else {
//applies class to the clicked item, there is no target
if ($class !== 'toggled-on') {
//add class to clicked item if its not set to be toggled-on
if (isToggled) {
item.classList.toggle($class);
} else {
item.classList.remove($class);
}
}
} //trigger optional afterToggle event. continue the click event for customized stuff
item.dispatchEvent(toggleEvent);
}
/*------- Moving items Event as well as all resizing --------*/
//on Window resize we can move items to and from divs with data-moveto="the destination"
//it will move there when the site reaches smaller than a size defaulted to 1030 or set that with data-moveat
//the whole div, including the data att moveto moves back and forth
var movedId = 0;
var moveEvent = new Event('afterResize', {
bubbles: true
}); //bubble allows for delegation on body
function moveItems() {
var windowWidth = window.innerWidth;
var $moveItems = document.querySelectorAll('[data-moveto]');
$moveItems.forEach(function (item) {
var moveAt = item.getAttribute('data-moveat'),
destination = document.querySelector(item.getAttribute('data-moveto')),
source = item.getAttribute('data-movefrom');
moveAt = moveAt ? moveAt : 1030;
if (moveAt.startsWith('--')) {
if (isIE11) {
moveAt = 1030;
} else {
var cssVars = getComputedStyle(document.body); //get css variables
moveAt = parseInt(cssVars.getPropertyValue(moveAt), 10);
}
}
if (!destination) {
return;
} //if no data movefrom is found add one to parent so we can move items back in. now they go back and forth
if (!source) {
var sourceElem = item.parentElement.id; //if parent has no id attr, add one with a number so its unique
if (!sourceElem) {
item.parentElement.setAttribute('id', 'move-' + movedId);
movedId++;
sourceElem = item.parentElement.id;
}
item.setAttribute('data-movefrom', '#' + sourceElem);
}
source = document.querySelector(item.getAttribute('data-movefrom')); //if the screen is smaller than moveAt (1030), move to destination
if (windowWidth < moveAt || moveAt == 0) {
//no need to move if its already there...
if (!destination.contains(item)) {
if (item.hasAttribute('data-moveto-pos')) {
destination.insertBefore(item, destination.children[item.getAttribute('data-moveto-pos')]);
} else {
destination.appendChild(item);
}
}
} else {
if (!source.contains(item)) {
if (item.hasAttribute('data-movefrom-pos')) {
source.insertBefore(item, source.children[item.getAttribute('data-movefrom-pos')]);
} else {
source.appendChild(item);
}
}
} //show it
item.classList.add('visible');
});
placeMenuButtons(); //running the moving of menu buttons here. nothing to do with moving items.
//fix height of fixed holder fixed at top items
document.querySelectorAll('.fixed-holder').forEach(function (fixed) {
fixed.style.height = fixed.firstElementChild.clientHeight + 'px';
});
document.dispatchEvent(moveEvent);
}
window.addEventListener('resize', (0,_setup__WEBPACK_IMPORTED_MODULE_0__.throttle)(moveItems, 400));
moveItems();
document.documentElement.classList.remove('dom-loading'); //add finished loading aspace events
var EventFinished = null;
if (isIE11) {
EventFinished = document.createEvent('Event'); // Define that the event name is 'build'.
EventFinished.initEvent('afterIgnEvents', true, true);
} else {
EventFinished = new Event('afterIgnEvents');
}
document.dispatchEvent(EventFinished);
});
/*------- Function for hi red background image swap --------*/
//check if device is retina
function isHighDensity() {
return window.matchMedia && window.matchMedia('(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)').matches;
} //check if file exists on server before using
function fileExists(image_url) {
var http = new XMLHttpRequest();
http.open('HEAD', image_url, true);
http.send();
return http.status != 404;
} //Add inline retina image if found and on retina device. To use add data-high-res to an inline element with a background-image
if (isHighDensity()) {
var retinaImage = document.querySelectorAll('[data-high-res]');
retinaImage.forEach(function (item) {
var image2x = ''; //if a high res is provided use that, else use background image but add 2x at end.
if (item.dataset.highRes) {
image2x = item.dataset.highRes;
} else {
//get url for original image
var image = item.style.backgroundImage.slice(4, -1).replace(/"/g, ""); //add @2x to it if image exists.
image2x = image.replace(/(\.[^.]+$)/, '@2x$1');
}
if (fileExists(image2x)) {
item.style.backgroundImage = 'url("' + image2x + '")';
}
});
}
/***/ }),
/***/ "./src/js/core/navigation.js":
/*!***********************************!*\
!*** ./src/js/core/navigation.js ***!
\***********************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _setup__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./setup */ "./src/js/core/setup.js");
/* harmony import */ var _navigation_callbacks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./navigation_callbacks */ "./src/js/core/navigation_callbacks.js");
/* harmony import */ var _theme_config__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../theme.config */ "./theme.config.json");
//toggle logic functionality that calls the above functions
//use this one to run the opening and closing of a menu item. dont call above functions directly
function toggleMenuItem(menuItem) {
var toggleState = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
var topLevel = isTopLevel(menuItem);
var horizontalMenu = isHorizontalMenu(menuItem); //toplevel horizontal on tablet
if (topLevel && horizontalMenu) {
//also check if menu is offscreen and give it a class
//checkOffScreenMenu(menuItem.querySelector('.sub-menu'))
(0,_navigation_callbacks__WEBPACK_IMPORTED_MODULE_1__.toggleTopLevelHorizontalMenu)(menuItem, toggleState);
return;
} //toplevel vertical on tablet
if (topLevel && !horizontalMenu) {
(0,_navigation_callbacks__WEBPACK_IMPORTED_MODULE_1__.toggleTopLevelVerticalMenu)(menuItem, toggleState);
return;
}
(0,_navigation_callbacks__WEBPACK_IMPORTED_MODULE_1__.toggleSubMenu)(menuItem, toggleState);
} //MAIN MENU EVENT. CAN BE CALLED ON ANY MENU ITEM WITH CHILDREN
var menuClickEvent = false; //make only one click event once a click is used
function createMenuListener(menuItem) {
menuItem.addEventListener('pointerover', function (e) {
e.stopPropagation();
var toggleState = true; //always open unless touch event which changes this below
//TOUCH CLICK EVENT
if (e.pointerType !== 'mouse') {
//clicking a real link opens it
if (!e.target.closest("a[href^=\"#\"]") && !e.target.closest('.submenu-dropdown-toggle')) {
return;
}
if (menuItem.classList.contains('toggled-on')) {
toggleState = false;
} //if were opening a top level on horizontal with a click, we need a way to close another that may be opened
if (isTopLevel(menuItem) && !menuItem.classList.contains('toggled-on') && isHorizontalMenu(menuItem)) {
closeAllTopMenus();
}
} //touch device
//open close for hover and device touch
toggleMenuItem(menuItem, toggleState);
}); //pointerover
menuItem.addEventListener('pointerleave', function (e) {
e.stopPropagation(); //simply close for hover
if (e.pointerType === 'mouse') {
toggleMenuItem(menuItem, false);
} //triggers when the lcick on is removed...too fast so we need to add another event for clicking off
if (e.pointerType !== 'mouse') {
//clicked up on touch now we want that fi they click elsewhere to close everything
if (!menuClickEvent) {
menuClickEvent = true;
document.addEventListener('click', function (e) {
//if were not clicking a menu, close any menus opened
if (!e.target.closest('.menu')) {
closeAllTopMenus();
}
});
}
}
});
} //close all top level menus
function closeAllTopMenus() {
var otherMenuItems = document.querySelectorAll('.top-level-item.toggled-on');
if (otherMenuItems) {
otherMenuItems.forEach(function (item) {
toggleMenuItem(item, false);
});
}
}
function isTopLevel(menuItem) {
return menuItem.classList.contains('top-level-item');
} //if the item is inside a submenu inside another submenu
function isNestedSubMenu(menuItem) {
return menuItem.classList.contains('nested-menu-item');
}
function isHorizontalMenu(menuItem) {
return getComputedStyle(menuItem.closest('.menu')).flexDirection !== 'column';
} //fix and reset on resize
document.addEventListener('afterResize', function () {
document.querySelectorAll('.top-level-item.menu-item-has-children').forEach(function (item) {
toggleMenuItem(item, false);
item.querySelector('.sub-menu').style.removeProperty('display');
if (isHorizontalMenu(item)) {
checkOffScreenMenu(item.querySelector('.sub-menu'));
}
});
});
document.addEventListener('DOMContentLoaded', function () {
//adds menu events to all menus. more menus can be added later by passing it through createMenuListener
var menus = document.querySelectorAll('.menu-item');
menus.forEach(function (menuItem, index) {
createMenuListener(menuItem);
}); //on load if its a vertical menu, open the parent dropdown right away
document.querySelectorAll('.menu .current-menu-item.menu-item-has-children, .menu .current-menu-parent').forEach(function (menu) {
//if its a vertical menu. we can know by the flex direction of menu
if (getComputedStyle(menu.closest('.menu')).flexDirection === 'column') {
toggleMenuItem(menu);
}
});
}); // FOCUS EVENTS - only for keyboard
var menuMightBeOpen = false;
document.body.addEventListener('focusin', function (e) {
var menuItem = e.target.closest('.menu-item');
if (menuItem && menuItem.classList.contains('menu-item-has-children')) {
window.addEventListener('keyup', function (e) {
var code = e.keyCode ? e.keyCode : e.which;
if (code === 9 || code === 16) {
menuMightBeOpen = true; //close other top menus when this one is turned on
if (isTopLevel(menuItem)) {
closeAllTopMenus();
}
toggleMenuItem(menuItem, true);
}
}, {
once: true
});
}
if (menuMightBeOpen) {
closeAllTopMenus();
menuMightBeOpen = false;
}
});
/*------- move submenus if too close to edge on desktop --------*/
function checkOffScreenMenu(submenu) {
var display = window.getComputedStyle(submenu).display;
if (display !== 'block') {
submenu.style.display = 'block';
} //make item visible so we can get left edge
var rightEdge = submenu.getBoundingClientRect().right;
var leftEdge = submenu.getBoundingClientRect().left; //set menu back
if (display !== 'block') {
submenu.style.removeProperty('display');
}
var viewport = document.documentElement.clientWidth; //if the submenu is off the page, pull it back somewhat
if (rightEdge > viewport) {
(0,_navigation_callbacks__WEBPACK_IMPORTED_MODULE_1__.fixOffScreenMenu)(submenu, 'right');
return;
}
if (leftEdge < 0) {
(0,_navigation_callbacks__WEBPACK_IMPORTED_MODULE_1__.fixOffScreenMenu)(submenu, 'left');
} else {
(0,_navigation_callbacks__WEBPACK_IMPORTED_MODULE_1__.fixOffScreenMenu)(submenu, 'none');
}
}
jQuery(function ($) {
//move logo in middle of menu on desktop if logo is middle position
if ($('.logo-in-middle').length) {
var navigationLi = $('.site-navigation__nav-holder .menu li');
var middle = Math.floor($(navigationLi).length / 2) - 1; //add logo to the middle when page loads
$('').insertAfter(navigationLi.filter(':eq(' + middle + ')'));
$('.site-logo').clone().appendTo('.li-logo-holder');
}
});
/***/ }),
/***/ "./src/js/core/navigation_callbacks.js":
/*!*********************************************!*\
!*** ./src/js/core/navigation_callbacks.js ***!
\*********************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "toggleTopLevelHorizontalMenu": () => (/* binding */ toggleTopLevelHorizontalMenu),
/* harmony export */ "toggleTopLevelVerticalMenu": () => (/* binding */ toggleTopLevelVerticalMenu),
/* harmony export */ "toggleSubMenu": () => (/* binding */ toggleSubMenu),
/* harmony export */ "fixOffScreenMenu": () => (/* binding */ fixOffScreenMenu)
/* harmony export */ });
/* harmony import */ var src_js_core_setup__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! src/js/core/setup */ "./src/js/core/setup.js");
//CHANGE THE FUNCTIONS BELOW TO CHANGE HOW YOUR MENUS OPEN AND CLOSE
//menuItem is an li that has a .sub-menu, you can decide however you want to open this
//css for this can be found in menus.scss and menu_layout.scss
//its better to override the layout file in menu.scss rather than touch that
//opens a top level item when the menu is horizontal
function toggleTopLevelHorizontalMenu(menuItem) {
var open = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
if (open) {
//change to whatever you want ie: ignSlideDown...
menuItem.classList.add('toggled-on');
} else {
menuItem.classList.remove('toggled-on');
}
} //runs when a toplevel vertical menu item is hovered or clicked
function toggleTopLevelVerticalMenu(menuItem) {
var open = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
var subMenu = menuItem.querySelector('.sub-menu');
if (open) {
//change to whatever you want ie: ignSlideDown...
menuItem.classList.add('toggled-on');
return (0,src_js_core_setup__WEBPACK_IMPORTED_MODULE_0__.ignSlideDown)(subMenu);
} else {
menuItem.classList.remove('toggled-on');
return (0,src_js_core_setup__WEBPACK_IMPORTED_MODULE_0__.ignSlideUp)(subMenu);
}
} //non on all top level submenus for click and hover
function toggleSubMenu(menuItem) {
var open = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
var subMenu = menuItem.querySelector('.sub-menu'); // Exit function if no subMenu is found.
if (!subMenu) return;
if (open) {
//change to whatever you want ie: ignSlideDown...
menuItem.classList.add('toggled-on');
return (0,src_js_core_setup__WEBPACK_IMPORTED_MODULE_0__.ignSlideDown)(subMenu);
} else {
menuItem.classList.remove('toggled-on');
return (0,src_js_core_setup__WEBPACK_IMPORTED_MODULE_0__.ignSlideUp)(subMenu);
}
} //when a top level horizontal
function fixOffScreenMenu(submenu) {
var side = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'right';
if (side === 'right') {
submenu.closest('.menu-item').classList.add('offscreen-right');
}
if (side === 'left') {
submenu.closest('.menu-item').classList.add('offscreen-left');
}
if (side === 'none') {
submenu.closest('.menu-item').classList.remove('offscreen-left', 'offscreen-right');
}
}
/***/ }),
/***/ "./src/js/core/objectfitFallback.js":
/*!******************************************!*\
!*** ./src/js/core/objectfitFallback.js ***!
\******************************************/
/***/ (() => {
jQuery(function ($) {
'use strict'; // the css selector for the container that the image should be attached to as a background-image
var imgContainer = '.background-image, .cover-image';
function getCurrentSrc(element, cb) {
var _getSrc;
if (!window.HTMLPictureElement) {
if (window.respimage) {
respimage({
elements: [element]
});
} else if (window.picturefill) {
picturefill({
elements: [element]
});
}
cb(element.src);
return;
}
_getSrc = function getSrc() {
element.removeEventListener('load', _getSrc);
element.removeEventListener('error', _getSrc);
cb(element.currentSrc);
};
element.addEventListener('load', _getSrc);
element.addEventListener('error', _getSrc);
if (element.complete) {
_getSrc();
}
}
function setBgImage() {
$(imgContainer).each(function () {
var $this = $(this),
img = $this.find('img').get(0);
getCurrentSrc(img, function (elementSource) {
$this.css('background-image', 'url(' + elementSource + ')');
});
});
}
if ('objectFit' in document.documentElement.style === false) {
$('html').addClass('no-objectfit');
$(window).resize(function () {
setBgImage();
});
setBgImage();
}
});
/***/ }),
/***/ "./src/js/core/panel-left.js":
/*!***********************************!*\
!*** ./src/js/core/panel-left.js ***!
\***********************************/
/***/ (() => {
document.addEventListener('DOMContentLoaded', function () {
//app-menu ability for the top menu
var body = document.body;
var menuToggle = document.querySelector('.panel-left-toggle');
var topNav = document.querySelector('.site-top');
var page = document.querySelector('#page'); //first move the button into site-top if app-menu is being used cause we dont want it on the outside
if (body.classList.contains('app-menu')) {
topNav.append(menuToggle);
}
if (body.classList.contains('page-menu')) {
topNav.append(menuToggle);
}
function closeAppMenu(e) {
e.preventDefault();
menuToggle.click();
} //when button is opened we will lock the body so there is no scrolling and then open the page
if (menuToggle) {
menuToggle.addEventListener('afterToggle', function (e) {
//if button has been toggled on
if (menuToggle.classList.contains('toggled-on')) {
if (body.classList.contains('app-menu')) {
body.classList.add('mobile-menu-body-lock');
} //clicking anywhere outside the menu will close it
document.querySelector('.site-content').addEventListener('click', closeAppMenu, {
once: true
});
} else {
document.querySelector('.site-content').removeEventListener('click', closeAppMenu);
if (body.classList.contains('app-menu')) {
page.addEventListener('transitionend', function () {
body.classList.remove('mobile-menu-body-lock'); //only remove toggle and hide menu once page holder finishes its transition to cover it.
}, {
once: true
});
} else {//body.classList.remove('mobile-menu-body-lock');
}
}
});
} //when button is opened we will lock the body so there is no scrolling and then open the page
if (menuToggle) {
menuToggle.addEventListener('afterToggle', function (e) {
//if button has been toggled on
if (menuToggle.classList.contains('toggled-on')) {
if (body.classList.contains('page-menu')) {
body.classList.add('mobile-menu-body-lock');
} //clicking anywhere outside the menu will close it
document.querySelector('.site-content').addEventListener('click', closeAppMenu, {
once: true
});
} else {
document.querySelector('.site-content').removeEventListener('click', closeAppMenu);
if (body.classList.contains('page-menu')) {
page.addEventListener('transitionend', function () {
body.classList.remove('mobile-menu-body-lock'); //only remove toggle and hide menu once page holder finishes its transition to cover it.
}, {
once: true
});
} else {//body.classList.remove('mobile-menu-body-lock');
}
}
});
}
});
/***/ }),
/***/ "./src/js/core/scrollMagic.js":
/*!************************************!*\
!*** ./src/js/core/scrollMagic.js ***!
\************************************/
/***/ (function(module, exports, __webpack_require__) {
var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_RESULT__;function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
/*!
* ScrollMagic v2.0.8 (2020-08-14)
* The javascript library for magical scroll interactions.
* (c) 2020 Jan Paepke (@janpaepke)
* Project Website: http://scrollmagic.io
*
* @version 2.0.8
* @license Dual licensed under MIT license and GPL.
* @author Jan Paepke - e-mail@janpaepke.de
*
* @file ScrollMagic main library.
*/
/**
* @namespace ScrollMagic
*/
(function (root, factory) {
if (true) {
// AMD. Register as an anonymous module.
!(__WEBPACK_AMD_DEFINE_FACTORY__ = (factory),
__WEBPACK_AMD_DEFINE_RESULT__ = (typeof __WEBPACK_AMD_DEFINE_FACTORY__ === 'function' ?
(__WEBPACK_AMD_DEFINE_FACTORY__.call(exports, __webpack_require__, exports, module)) :
__WEBPACK_AMD_DEFINE_FACTORY__),
__WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
} else {}
})(this, function () {
"use strict";
var ScrollMagic = function ScrollMagic() {
_util.log(2, '(COMPATIBILITY NOTICE) -> As of ScrollMagic 2.0.0 you need to use \'new ScrollMagic.Controller()\' to create a new controller instance. Use \'new ScrollMagic.Scene()\' to instance a scene.');
};
ScrollMagic.version = "2.0.8"; // TODO: temporary workaround for chrome's scroll jitter bug
if (typeof window !== 'undefined') {
window.addEventListener("mousewheel", void 0);
} // global const
var PIN_SPACER_ATTRIBUTE = "data-scrollmagic-pin-spacer";
/**
* The main class that is needed once per scroll container.
*
* @class
*
* @example
* // basic initialization
* var controller = new ScrollMagic.Controller();
*
* // passing options
* var controller = new ScrollMagic.Controller({container: "#myContainer", loglevel: 3});
*
* @param {object} [options] - An object containing one or more options for the controller.
* @param {(string|object)} [options.container=window] - A selector, DOM object that references the main container for scrolling.
* @param {boolean} [options.vertical=true] - Sets the scroll mode to vertical (`true`) or horizontal (`false`) scrolling.
* @param {object} [options.globalSceneOptions={}] - These options will be passed to every Scene that is added to the controller using the addScene method. For more information on Scene options see {@link ScrollMagic.Scene}.
* @param {number} [options.loglevel=2] Loglevel for debugging. Note that logging is disabled in the minified version of ScrollMagic.
** `0` => silent
** `1` => errors
** `2` => errors, warnings
** `3` => errors, warnings, debuginfo
* @param {boolean} [options.refreshInterval=100] - Some changes don't call events by default, like changing the container size or moving a scene trigger element.
This interval polls these parameters to fire the necessary events.
If you don't use custom containers, trigger elements or have static layouts, where the positions of the trigger elements don't change, you can set this to 0 disable interval checking and improve performance.
*
*/
ScrollMagic.Controller = function (options) {
/*
* ----------------------------------------------------------------
* settings
* ----------------------------------------------------------------
*/
var NAMESPACE = 'ScrollMagic.Controller',
SCROLL_DIRECTION_FORWARD = 'FORWARD',
SCROLL_DIRECTION_REVERSE = 'REVERSE',
SCROLL_DIRECTION_PAUSED = 'PAUSED',
DEFAULT_OPTIONS = CONTROLLER_OPTIONS.defaults;
/*
* ----------------------------------------------------------------
* private vars
* ----------------------------------------------------------------
*/
var Controller = this,
_options = _util.extend({}, DEFAULT_OPTIONS, options),
_sceneObjects = [],
_updateScenesOnNextCycle = false,
// can be boolean (true => all scenes) or an array of scenes to be updated
_scrollPos = 0,
_scrollDirection = SCROLL_DIRECTION_PAUSED,
_isDocument = true,
_viewPortSize = 0,
_enabled = true,
_updateTimeout,
_refreshTimeout;
/*
* ----------------------------------------------------------------
* private functions
* ----------------------------------------------------------------
*/
/**
* Internal constructor function of the ScrollMagic Controller
* @private
*/
var construct = function construct() {
for (var key in _options) {
if (!DEFAULT_OPTIONS.hasOwnProperty(key)) {
log(2, "WARNING: Unknown option \"" + key + "\"");
delete _options[key];
}
}
_options.container = _util.get.elements(_options.container)[0]; // check ScrollContainer
if (!_options.container) {
log(1, "ERROR creating object " + NAMESPACE + ": No valid scroll container supplied");
throw NAMESPACE + " init failed."; // cancel
}
_isDocument = _options.container === window || _options.container === document.body || !document.body.contains(_options.container); // normalize to window
if (_isDocument) {
_options.container = window;
} // update container size immediately
_viewPortSize = getViewportSize(); // set event handlers
_options.container.addEventListener("resize", onChange);
_options.container.addEventListener("scroll", onChange);
var ri = parseInt(_options.refreshInterval, 10);
_options.refreshInterval = _util.type.Number(ri) ? ri : DEFAULT_OPTIONS.refreshInterval;
scheduleRefresh();
log(3, "added new " + NAMESPACE + " controller (v" + ScrollMagic.version + ")");
};
/**
* Schedule the next execution of the refresh function
* @private
*/
var scheduleRefresh = function scheduleRefresh() {
if (_options.refreshInterval > 0) {
_refreshTimeout = window.setTimeout(refresh, _options.refreshInterval);
}
};
/**
* Default function to get scroll pos - overwriteable using `Controller.scrollPos(newFunction)`
* @private
*/
var getScrollPos = function getScrollPos() {
return _options.vertical ? _util.get.scrollTop(_options.container) : _util.get.scrollLeft(_options.container);
};
/**
* Returns the current viewport Size (width vor horizontal, height for vertical)
* @private
*/
var getViewportSize = function getViewportSize() {
return _options.vertical ? _util.get.height(_options.container) : _util.get.width(_options.container);
};
/**
* Default function to set scroll pos - overwriteable using `Controller.scrollTo(newFunction)`
* Make available publicly for pinned mousewheel workaround.
* @private
*/
var setScrollPos = this._setScrollPos = function (pos) {
if (_options.vertical) {
if (_isDocument) {
window.scrollTo(_util.get.scrollLeft(), pos);
} else {
_options.container.scrollTop = pos;
}
} else {
if (_isDocument) {
window.scrollTo(pos, _util.get.scrollTop());
} else {
_options.container.scrollLeft = pos;
}
}
};
/**
* Handle updates in cycles instead of on scroll (performance)
* @private
*/
var updateScenes = function updateScenes() {
if (_enabled && _updateScenesOnNextCycle) {
// determine scenes to update
var scenesToUpdate = _util.type.Array(_updateScenesOnNextCycle) ? _updateScenesOnNextCycle : _sceneObjects.slice(0); // reset scenes
_updateScenesOnNextCycle = false;
var oldScrollPos = _scrollPos; // update scroll pos now instead of onChange, as it might have changed since scheduling (i.e. in-browser smooth scroll)
_scrollPos = Controller.scrollPos();
var deltaScroll = _scrollPos - oldScrollPos;
if (deltaScroll !== 0) {
// scroll position changed?
_scrollDirection = deltaScroll > 0 ? SCROLL_DIRECTION_FORWARD : SCROLL_DIRECTION_REVERSE;
} // reverse order of scenes if scrolling reverse
if (_scrollDirection === SCROLL_DIRECTION_REVERSE) {
scenesToUpdate.reverse();
} // update scenes
scenesToUpdate.forEach(function (scene, index) {
log(3, "updating Scene " + (index + 1) + "/" + scenesToUpdate.length + " (" + _sceneObjects.length + " total)");
scene.update(true);
});
if (scenesToUpdate.length === 0 && _options.loglevel >= 3) {
log(3, "updating 0 Scenes (nothing added to controller)");
}
}
};
/**
* Initializes rAF callback
* @private
*/
var debounceUpdate = function debounceUpdate() {
_updateTimeout = _util.rAF(updateScenes);
};
/**
* Handles Container changes
* @private
*/
var onChange = function onChange(e) {
log(3, "event fired causing an update:", e.type);
if (e.type == "resize") {
// resize
_viewPortSize = getViewportSize();
_scrollDirection = SCROLL_DIRECTION_PAUSED;
} // schedule update
if (_updateScenesOnNextCycle !== true) {
_updateScenesOnNextCycle = true;
debounceUpdate();
}
};
var refresh = function refresh() {
if (!_isDocument) {
// simulate resize event. Only works for viewport relevant param (performance)
if (_viewPortSize != getViewportSize()) {
var resizeEvent;
try {
resizeEvent = new Event('resize', {
bubbles: false,
cancelable: false
});
} catch (e) {
// stupid IE
resizeEvent = document.createEvent("Event");
resizeEvent.initEvent("resize", false, false);
}
_options.container.dispatchEvent(resizeEvent);
}
}
_sceneObjects.forEach(function (scene, index) {
// refresh all scenes
scene.refresh();
});
scheduleRefresh();
};
/**
* Send a debug message to the console.
* provided publicly with _log for plugins
* @private
*
* @param {number} loglevel - The loglevel required to initiate output for the message.
* @param {...mixed} output - One or more variables that should be passed to the console.
*/
var log = this._log = function (loglevel, output) {
if (_options.loglevel >= loglevel) {
Array.prototype.splice.call(arguments, 1, 0, "(" + NAMESPACE + ") ->");
_util.log.apply(window, arguments);
}
}; // for scenes we have getters for each option, but for the controller we don't, so we need to make it available externally for plugins
this._options = _options;
/**
* Sort scenes in ascending order of their start offset.
* @private
*
* @param {array} ScenesArray - an array of ScrollMagic Scenes that should be sorted
* @return {array} The sorted array of Scenes.
*/
var sortScenes = function sortScenes(ScenesArray) {
if (ScenesArray.length <= 1) {
return ScenesArray;
} else {
var scenes = ScenesArray.slice(0);
scenes.sort(function (a, b) {
return a.scrollOffset() > b.scrollOffset() ? 1 : -1;
});
return scenes;
}
};
/**
* ----------------------------------------------------------------
* public functions
* ----------------------------------------------------------------
*/
/**
* Add one ore more scene(s) to the controller.
* This is the equivalent to `Scene.addTo(controller)`.
* @public
* @example
* // with a previously defined scene
* controller.addScene(scene);
*
* // with a newly created scene.
* controller.addScene(new ScrollMagic.Scene({duration : 0}));
*
* // adding multiple scenes
* controller.addScene([scene, scene2, new ScrollMagic.Scene({duration : 0})]);
*
* @param {(ScrollMagic.Scene|array)} newScene - ScrollMagic Scene or Array of Scenes to be added to the controller.
* @return {Controller} Parent object for chaining.
*/
this.addScene = function (newScene) {
if (_util.type.Array(newScene)) {
newScene.forEach(function (scene, index) {
Controller.addScene(scene);
});
} else if (newScene instanceof ScrollMagic.Scene) {
if (newScene.controller() !== Controller) {
newScene.addTo(Controller);
} else if (_sceneObjects.indexOf(newScene) < 0) {
// new scene
_sceneObjects.push(newScene); // add to array
_sceneObjects = sortScenes(_sceneObjects); // sort
newScene.on("shift.controller_sort", function () {
// resort whenever scene moves
_sceneObjects = sortScenes(_sceneObjects);
}); // insert Global defaults.
for (var key in _options.globalSceneOptions) {
if (newScene[key]) {
newScene[key].call(newScene, _options.globalSceneOptions[key]);
}
}
log(3, "adding Scene (now " + _sceneObjects.length + " total)");
}
} else {
log(1, "ERROR: invalid argument supplied for '.addScene()'");
}
return Controller;
};
/**
* Remove one ore more scene(s) from the controller.
* This is the equivalent to `Scene.remove()`.
* @public
* @example
* // remove a scene from the controller
* controller.removeScene(scene);
*
* // remove multiple scenes from the controller
* controller.removeScene([scene, scene2, scene3]);
*
* @param {(ScrollMagic.Scene|array)} Scene - ScrollMagic Scene or Array of Scenes to be removed from the controller.
* @returns {Controller} Parent object for chaining.
*/
this.removeScene = function (Scene) {
if (_util.type.Array(Scene)) {
Scene.forEach(function (scene, index) {
Controller.removeScene(scene);
});
} else {
var index = _sceneObjects.indexOf(Scene);
if (index > -1) {
Scene.off("shift.controller_sort");
_sceneObjects.splice(index, 1);
log(3, "removing Scene (now " + _sceneObjects.length + " left)");
Scene.remove();
}
}
return Controller;
};
/**
* Update one ore more scene(s) according to the scroll position of the container.
* This is the equivalent to `Scene.update()`.
* The update method calculates the scene's start and end position (based on the trigger element, trigger hook, duration and offset) and checks it against the current scroll position of the container.
* It then updates the current scene state accordingly (or does nothing, if the state is already correct) – Pins will be set to their correct position and tweens will be updated to their correct progress.
* _**Note:** This method gets called constantly whenever Controller detects a change. The only application for you is if you change something outside of the realm of ScrollMagic, like moving the trigger or changing tween parameters._
* @public
* @example
* // update a specific scene on next cycle
* controller.updateScene(scene);
*
* // update a specific scene immediately
* controller.updateScene(scene, true);
*
* // update multiple scenes scene on next cycle
* controller.updateScene([scene1, scene2, scene3]);
*
* @param {ScrollMagic.Scene} Scene - ScrollMagic Scene or Array of Scenes that is/are supposed to be updated.
* @param {boolean} [immediately=false] - If `true` the update will be instant, if `false` it will wait until next update cycle.
This is useful when changing multiple properties of the scene - this way it will only be updated once all new properties are set (updateScenes).
* @return {Controller} Parent object for chaining.
*/
this.updateScene = function (Scene, immediately) {
if (_util.type.Array(Scene)) {
Scene.forEach(function (scene, index) {
Controller.updateScene(scene, immediately);
});
} else {
if (immediately) {
Scene.update(true);
} else if (_updateScenesOnNextCycle !== true && Scene instanceof ScrollMagic.Scene) {
// if _updateScenesOnNextCycle is true, all connected scenes are already scheduled for update
// prep array for next update cycle
_updateScenesOnNextCycle = _updateScenesOnNextCycle || [];
if (_updateScenesOnNextCycle.indexOf(Scene) == -1) {
_updateScenesOnNextCycle.push(Scene);
}
_updateScenesOnNextCycle = sortScenes(_updateScenesOnNextCycle); // sort
debounceUpdate();
}
}
return Controller;
};
/**
* Updates the controller params and calls updateScene on every scene, that is attached to the controller.
* See `Controller.updateScene()` for more information about what this means.
* In most cases you will not need this function, as it is called constantly, whenever ScrollMagic detects a state change event, like resize or scroll.
* The only application for this method is when ScrollMagic fails to detect these events.
* One application is with some external scroll libraries (like iScroll) that move an internal container to a negative offset instead of actually scrolling. In this case the update on the controller needs to be called whenever the child container's position changes.
* For this case there will also be the need to provide a custom function to calculate the correct scroll position. See `Controller.scrollPos()` for details.
* @public
* @example
* // update the controller on next cycle (saves performance due to elimination of redundant updates)
* controller.update();
*
* // update the controller immediately
* controller.update(true);
*
* @param {boolean} [immediately=false] - If `true` the update will be instant, if `false` it will wait until next update cycle (better performance)
* @return {Controller} Parent object for chaining.
*/
this.update = function (immediately) {
onChange({
type: "resize"
}); // will update size and set _updateScenesOnNextCycle to true
if (immediately) {
updateScenes();
}
return Controller;
};
/**
* Scroll to a numeric scroll offset, a DOM element, the start of a scene or provide an alternate method for scrolling.
* For vertical controllers it will change the top scroll offset and for horizontal applications it will change the left offset.
* @public
*
* @since 1.1.0
* @example
* // scroll to an offset of 100
* controller.scrollTo(100);
*
* // scroll to a DOM element
* controller.scrollTo("#anchor");
*
* // scroll to the beginning of a scene
* var scene = new ScrollMagic.Scene({offset: 200});
* controller.scrollTo(scene);
*
* // define a new scroll position modification function (jQuery animate instead of jump)
* controller.scrollTo(function (newScrollPos) {
* $("html, body").animate({scrollTop: newScrollPos});
* });
* controller.scrollTo(100); // call as usual, but the new function will be used instead
*
* // define a new scroll function with an additional parameter
* controller.scrollTo(function (newScrollPos, message) {
* console.log(message);
* $(this).animate({scrollTop: newScrollPos});
* });
* // call as usual, but supply an extra parameter to the defined custom function
* controller.scrollTo(100, "my message");
*
* // define a new scroll function with an additional parameter containing multiple variables
* controller.scrollTo(function (newScrollPos, options) {
* someGlobalVar = options.a + options.b;
* $(this).animate({scrollTop: newScrollPos});
* });
* // call as usual, but supply an extra parameter containing multiple options
* controller.scrollTo(100, {a: 1, b: 2});
*
* // define a new scroll function with a callback supplied as an additional parameter
* controller.scrollTo(function (newScrollPos, callback) {
* $(this).animate({scrollTop: newScrollPos}, 400, "swing", callback);
* });
* // call as usual, but supply an extra parameter, which is used as a callback in the previously defined custom scroll function
* controller.scrollTo(100, function() {
* console.log("scroll has finished.");
* });
*
* @param {mixed} scrollTarget - The supplied argument can be one of these types:
* 1. `number` -> The container will scroll to this new scroll offset.
* 2. `string` or `object` -> Can be a selector or a DOM object.
* The container will scroll to the position of this element.
* 3. `ScrollMagic Scene` -> The container will scroll to the start of this scene.
* 4. `function` -> This function will be used for future scroll position modifications.
* This provides a way for you to change the behaviour of scrolling and adding new behaviour like animation. The function receives the new scroll position as a parameter and a reference to the container element using `this`.
* It may also optionally receive an optional additional parameter (see below)
* _**NOTE:**
* All other options will still work as expected, using the new function to scroll._
* @param {mixed} [additionalParameter] - If a custom scroll function was defined (see above 4.), you may want to supply additional parameters to it, when calling it. You can do this using this parameter – see examples for details. Please note, that this parameter will have no effect, if you use the default scrolling function.
* @returns {Controller} Parent object for chaining.
*/
this.scrollTo = function (scrollTarget, additionalParameter) {
if (_util.type.Number(scrollTarget)) {
// excecute
setScrollPos.call(_options.container, scrollTarget, additionalParameter);
} else if (scrollTarget instanceof ScrollMagic.Scene) {
// scroll to scene
if (scrollTarget.controller() === Controller) {
// check if the controller is associated with this scene
Controller.scrollTo(scrollTarget.scrollOffset(), additionalParameter);
} else {
log(2, "scrollTo(): The supplied scene does not belong to this controller. Scroll cancelled.", scrollTarget);
}
} else if (_util.type.Function(scrollTarget)) {
// assign new scroll function
setScrollPos = scrollTarget;
} else {
// scroll to element
var elem = _util.get.elements(scrollTarget)[0];
if (elem) {
// if parent is pin spacer, use spacer position instead so correct start position is returned for pinned elements.
while (elem.parentNode.hasAttribute(PIN_SPACER_ATTRIBUTE)) {
elem = elem.parentNode;
}
var param = _options.vertical ? "top" : "left",
// which param is of interest ?
containerOffset = _util.get.offset(_options.container),
// container position is needed because element offset is returned in relation to document, not in relation to container.
elementOffset = _util.get.offset(elem);
if (!_isDocument) {
// container is not the document root, so substract scroll Position to get correct trigger element position relative to scrollcontent
containerOffset[param] -= Controller.scrollPos();
}
Controller.scrollTo(elementOffset[param] - containerOffset[param], additionalParameter);
} else {
log(2, "scrollTo(): The supplied argument is invalid. Scroll cancelled.", scrollTarget);
}
}
return Controller;
};
/**
* **Get** the current scrollPosition or **Set** a new method to calculate it.
* -> **GET**:
* When used as a getter this function will return the current scroll position.
* To get a cached value use Controller.info("scrollPos"), which will be updated in the update cycle.
* For vertical controllers it will return the top scroll offset and for horizontal applications it will return the left offset.
*
* -> **SET**:
* When used as a setter this method prodes a way to permanently overwrite the controller's scroll position calculation.
* A typical usecase is when the scroll position is not reflected by the containers scrollTop or scrollLeft values, but for example by the inner offset of a child container.
* Moving a child container inside a parent is a commonly used method for several scrolling frameworks, including iScroll.
* By providing an alternate calculation function you can make sure ScrollMagic receives the correct scroll position.
* Please also bear in mind that your function should return y values for vertical scrolls an x for horizontals.
*
* To change the current scroll position please use `Controller.scrollTo()`.
* @public
*
* @example
* // get the current scroll Position
* var scrollPos = controller.scrollPos();
*
* // set a new scroll position calculation method
* controller.scrollPos(function () {
* return this.info("vertical") ? -mychildcontainer.y : -mychildcontainer.x
* });
*
* @param {function} [scrollPosMethod] - The function to be used for the scroll position calculation of the container.
* @returns {(number|Controller)} Current scroll position or parent object for chaining.
*/
this.scrollPos = function (scrollPosMethod) {
if (!arguments.length) {
// get
return getScrollPos.call(Controller);
} else {
// set
if (_util.type.Function(scrollPosMethod)) {
getScrollPos = scrollPosMethod;
} else {
log(2, "Provided value for method 'scrollPos' is not a function. To change the current scroll position use 'scrollTo()'.");
}
}
return Controller;
};
/**
* **Get** all infos or one in particular about the controller.
* @public
* @example
* // returns the current scroll position (number)
* var scrollPos = controller.info("scrollPos");
*
* // returns all infos as an object
* var infos = controller.info();
*
* @param {string} [about] - If passed only this info will be returned instead of an object containing all.
Valid options are:
** `"size"` => the current viewport size of the container
** `"vertical"` => true if vertical scrolling, otherwise false
** `"scrollPos"` => the current scroll position
** `"scrollDirection"` => the last known direction of the scroll
** `"container"` => the container element
** `"isDocument"` => true if container element is the document.
* @returns {(mixed|object)} The requested info(s).
*/
this.info = function (about) {
var values = {
size: _viewPortSize,
// contains height or width (in regard to orientation);
vertical: _options.vertical,
scrollPos: _scrollPos,
scrollDirection: _scrollDirection,
container: _options.container,
isDocument: _isDocument
};
if (!arguments.length) {
// get all as an object
return values;
} else if (values[about] !== undefined) {
return values[about];
} else {
log(1, "ERROR: option \"" + about + "\" is not available");
return;
}
};
/**
* **Get** or **Set** the current loglevel option value.
* @public
*
* @example
* // get the current value
* var loglevel = controller.loglevel();
*
* // set a new value
* controller.loglevel(3);
*
* @param {number} [newLoglevel] - The new loglevel setting of the Controller. `[0-3]`
* @returns {(number|Controller)} Current loglevel or parent object for chaining.
*/
this.loglevel = function (newLoglevel) {
if (!arguments.length) {
// get
return _options.loglevel;
} else if (_options.loglevel != newLoglevel) {
// set
_options.loglevel = newLoglevel;
}
return Controller;
};
/**
* **Get** or **Set** the current enabled state of the controller.
* This can be used to disable all Scenes connected to the controller without destroying or removing them.
* @public
*
* @example
* // get the current value
* var enabled = controller.enabled();
*
* // disable the controller
* controller.enabled(false);
*
* @param {boolean} [newState] - The new enabled state of the controller `true` or `false`.
* @returns {(boolean|Controller)} Current enabled state or parent object for chaining.
*/
this.enabled = function (newState) {
if (!arguments.length) {
// get
return _enabled;
} else if (_enabled != newState) {
// set
_enabled = !!newState;
Controller.updateScene(_sceneObjects, true);
}
return Controller;
};
/**
* Destroy the Controller, all Scenes and everything.
* @public
*
* @example
* // without resetting the scenes
* controller = controller.destroy();
*
* // with scene reset
* controller = controller.destroy(true);
*
* @param {boolean} [resetScenes=false] - If `true` the pins and tweens (if existent) of all scenes will be reset.
* @returns {null} Null to unset handler variables.
*/
this.destroy = function (resetScenes) {
window.clearTimeout(_refreshTimeout);
var i = _sceneObjects.length;
while (i--) {
_sceneObjects[i].destroy(resetScenes);
}
_options.container.removeEventListener("resize", onChange);
_options.container.removeEventListener("scroll", onChange);
_util.cAF(_updateTimeout);
log(3, "destroyed " + NAMESPACE + " (reset: " + (resetScenes ? "true" : "false") + ")");
return null;
}; // INIT
construct();
return Controller;
}; // store pagewide controller options
var CONTROLLER_OPTIONS = {
defaults: {
container: window,
vertical: true,
globalSceneOptions: {},
loglevel: 2,
refreshInterval: 100
}
};
/*
* method used to add an option to ScrollMagic Scenes.
*/
ScrollMagic.Controller.addOption = function (name, defaultValue) {
CONTROLLER_OPTIONS.defaults[name] = defaultValue;
}; // instance extension function for plugins
ScrollMagic.Controller.extend = function (extension) {
var oldClass = this;
ScrollMagic.Controller = function () {
oldClass.apply(this, arguments);
this.$super = _util.extend({}, this); // copy parent state
return extension.apply(this, arguments) || this;
};
_util.extend(ScrollMagic.Controller, oldClass); // copy properties
ScrollMagic.Controller.prototype = oldClass.prototype; // copy prototype
ScrollMagic.Controller.prototype.constructor = ScrollMagic.Controller; // restore constructor
};
/**
* A Scene defines where the controller should react and how.
*
* @class
*
* @example
* // create a standard scene and add it to a controller
* new ScrollMagic.Scene()
* .addTo(controller);
*
* // create a scene with custom options and assign a handler to it.
* var scene = new ScrollMagic.Scene({
* duration: 100,
* offset: 200,
* triggerHook: "onEnter",
* reverse: false
* });
*
* @param {object} [options] - Options for the Scene. The options can be updated at any time.
Instead of setting the options for each scene individually you can also set them globally in the controller as the controllers `globalSceneOptions` option. The object accepts the same properties as the ones below.
When a scene is added to the controller the options defined using the Scene constructor will be overwritten by those set in `globalSceneOptions`.
* @param {(number|string|function)} [options.duration=0] - The duration of the scene.
Please see `Scene.duration()` for details.
* @param {number} [options.offset=0] - Offset Value for the Trigger Position. If no triggerElement is defined this will be the scroll distance from the start of the page, after which the scene will start.
* @param {(string|object)} [options.triggerElement=null] - Selector or DOM object that defines the start of the scene. If undefined the scene will start right at the start of the page (unless an offset is set).
* @param {(number|string)} [options.triggerHook="onCenter"] - Can be a number between 0 and 1 defining the position of the trigger Hook in relation to the viewport.
Can also be defined using a string:
** `"onEnter"` => `1`
** `"onCenter"` => `0.5`
** `"onLeave"` => `0`
* @param {boolean} [options.reverse=true] - Should the scene reverse, when scrolling up?
* @param {number} [options.loglevel=2] - Loglevel for debugging. Note that logging is disabled in the minified version of ScrollMagic.
** `0` => silent
** `1` => errors
** `2` => errors, warnings
** `3` => errors, warnings, debuginfo
*
*/
ScrollMagic.Scene = function (options) {
/*
* ----------------------------------------------------------------
* settings
* ----------------------------------------------------------------
*/
var NAMESPACE = 'ScrollMagic.Scene',
SCENE_STATE_BEFORE = 'BEFORE',
SCENE_STATE_DURING = 'DURING',
SCENE_STATE_AFTER = 'AFTER',
DEFAULT_OPTIONS = SCENE_OPTIONS.defaults;
/*
* ----------------------------------------------------------------
* private vars
* ----------------------------------------------------------------
*/
var Scene = this,
_options = _util.extend({}, DEFAULT_OPTIONS, options),
_state = SCENE_STATE_BEFORE,
_progress = 0,
_scrollOffset = {
start: 0,
end: 0
},
// reflects the controllers's scroll position for the start and end of the scene respectively
_triggerPos = 0,
_enabled = true,
_durationUpdateMethod,
_controller;
/**
* Internal constructor function of the ScrollMagic Scene
* @private
*/
var construct = function construct() {
for (var key in _options) {
// check supplied options
if (!DEFAULT_OPTIONS.hasOwnProperty(key)) {
log(2, "WARNING: Unknown option \"" + key + "\"");
delete _options[key];
}
} // add getters/setters for all possible options
for (var optionName in DEFAULT_OPTIONS) {
addSceneOption(optionName);
} // validate all options
validateOption();
};
/*
* ----------------------------------------------------------------
* Event Management
* ----------------------------------------------------------------
*/
var _listeners = {};
/**
* Scene start event.
* Fires whenever the scroll position its the starting point of the scene.
* It will also fire when scrolling back up going over the start position of the scene. If you want something to happen only when scrolling down/right, use the scrollDirection parameter passed to the callback.
*
* For details on this event and the order in which it is fired, please review the {@link Scene.progress} method.
*
* @event ScrollMagic.Scene#start
*
* @example
* scene.on("start", function (event) {
* console.log("Hit start point of scene.");
* });
*
* @property {object} event - The event Object passed to each callback
* @property {string} event.type - The name of the event
* @property {Scene} event.target - The Scene object that triggered this event
* @property {number} event.progress - Reflects the current progress of the scene
* @property {string} event.state - The current state of the scene `"BEFORE"` or `"DURING"`
* @property {string} event.scrollDirection - Indicates which way we are scrolling `"PAUSED"`, `"FORWARD"` or `"REVERSE"`
*/
/**
* Scene end event.
* Fires whenever the scroll position its the ending point of the scene.
* It will also fire when scrolling back up from after the scene and going over its end position. If you want something to happen only when scrolling down/right, use the scrollDirection parameter passed to the callback.
*
* For details on this event and the order in which it is fired, please review the {@link Scene.progress} method.
*
* @event ScrollMagic.Scene#end
*
* @example
* scene.on("end", function (event) {
* console.log("Hit end point of scene.");
* });
*
* @property {object} event - The event Object passed to each callback
* @property {string} event.type - The name of the event
* @property {Scene} event.target - The Scene object that triggered this event
* @property {number} event.progress - Reflects the current progress of the scene
* @property {string} event.state - The current state of the scene `"DURING"` or `"AFTER"`
* @property {string} event.scrollDirection - Indicates which way we are scrolling `"PAUSED"`, `"FORWARD"` or `"REVERSE"`
*/
/**
* Scene enter event.
* Fires whenever the scene enters the "DURING" state.
* Keep in mind that it doesn't matter if the scene plays forward or backward: This event always fires when the scene enters its active scroll timeframe, regardless of the scroll-direction.
*
* For details on this event and the order in which it is fired, please review the {@link Scene.progress} method.
*
* @event ScrollMagic.Scene#enter
*
* @example
* scene.on("enter", function (event) {
* console.log("Scene entered.");
* });
*
* @property {object} event - The event Object passed to each callback
* @property {string} event.type - The name of the event
* @property {Scene} event.target - The Scene object that triggered this event
* @property {number} event.progress - Reflects the current progress of the scene
* @property {string} event.state - The current state of the scene - always `"DURING"`
* @property {string} event.scrollDirection - Indicates which way we are scrolling `"PAUSED"`, `"FORWARD"` or `"REVERSE"`
*/
/**
* Scene leave event.
* Fires whenever the scene's state goes from "DURING" to either "BEFORE" or "AFTER".
* Keep in mind that it doesn't matter if the scene plays forward or backward: This event always fires when the scene leaves its active scroll timeframe, regardless of the scroll-direction.
*
* For details on this event and the order in which it is fired, please review the {@link Scene.progress} method.
*
* @event ScrollMagic.Scene#leave
*
* @example
* scene.on("leave", function (event) {
* console.log("Scene left.");
* });
*
* @property {object} event - The event Object passed to each callback
* @property {string} event.type - The name of the event
* @property {Scene} event.target - The Scene object that triggered this event
* @property {number} event.progress - Reflects the current progress of the scene
* @property {string} event.state - The current state of the scene `"BEFORE"` or `"AFTER"`
* @property {string} event.scrollDirection - Indicates which way we are scrolling `"PAUSED"`, `"FORWARD"` or `"REVERSE"`
*/
/**
* Scene update event.
* Fires whenever the scene is updated (but not necessarily changes the progress).
*
* @event ScrollMagic.Scene#update
*
* @example
* scene.on("update", function (event) {
* console.log("Scene updated.");
* });
*
* @property {object} event - The event Object passed to each callback
* @property {string} event.type - The name of the event
* @property {Scene} event.target - The Scene object that triggered this event
* @property {number} event.startPos - The starting position of the scene (in relation to the conainer)
* @property {number} event.endPos - The ending position of the scene (in relation to the conainer)
* @property {number} event.scrollPos - The current scroll position of the container
*/
/**
* Scene progress event.
* Fires whenever the progress of the scene changes.
*
* For details on this event and the order in which it is fired, please review the {@link Scene.progress} method.
*
* @event ScrollMagic.Scene#progress
*
* @example
* scene.on("progress", function (event) {
* console.log("Scene progress changed to " + event.progress);
* });
*
* @property {object} event - The event Object passed to each callback
* @property {string} event.type - The name of the event
* @property {Scene} event.target - The Scene object that triggered this event
* @property {number} event.progress - Reflects the current progress of the scene
* @property {string} event.state - The current state of the scene `"BEFORE"`, `"DURING"` or `"AFTER"`
* @property {string} event.scrollDirection - Indicates which way we are scrolling `"PAUSED"`, `"FORWARD"` or `"REVERSE"`
*/
/**
* Scene change event.
* Fires whenvever a property of the scene is changed.
*
* @event ScrollMagic.Scene#change
*
* @example
* scene.on("change", function (event) {
* console.log("Scene Property \"" + event.what + "\" changed to " + event.newval);
* });
*
* @property {object} event - The event Object passed to each callback
* @property {string} event.type - The name of the event
* @property {Scene} event.target - The Scene object that triggered this event
* @property {string} event.what - Indicates what value has been changed
* @property {mixed} event.newval - The new value of the changed property
*/
/**
* Scene shift event.
* Fires whenvever the start or end **scroll offset** of the scene change.
* This happens explicitely, when one of these values change: `offset`, `duration` or `triggerHook`.
* It will fire implicitly when the `triggerElement` changes, if the new element has a different position (most cases).
* It will also fire implicitly when the size of the container changes and the triggerHook is anything other than `onLeave`.
*
* @event ScrollMagic.Scene#shift
* @since 1.1.0
*
* @example
* scene.on("shift", function (event) {
* console.log("Scene moved, because the " + event.reason + " has changed.)");
* });
*
* @property {object} event - The event Object passed to each callback
* @property {string} event.type - The name of the event
* @property {Scene} event.target - The Scene object that triggered this event
* @property {string} event.reason - Indicates why the scene has shifted
*/
/**
* Scene destroy event.
* Fires whenvever the scene is destroyed.
* This can be used to tidy up custom behaviour used in events.
*
* @event ScrollMagic.Scene#destroy
* @since 1.1.0
*
* @example
* scene.on("enter", function (event) {
* // add custom action
* $("#my-elem").left("200");
* })
* .on("destroy", function (event) {
* // reset my element to start position
* if (event.reset) {
* $("#my-elem").left("0");
* }
* });
*
* @property {object} event - The event Object passed to each callback
* @property {string} event.type - The name of the event
* @property {Scene} event.target - The Scene object that triggered this event
* @property {boolean} event.reset - Indicates if the destroy method was called with reset `true` or `false`.
*/
/**
* Scene add event.
* Fires when the scene is added to a controller.
* This is mostly used by plugins to know that change might be due.
*
* @event ScrollMagic.Scene#add
* @since 2.0.0
*
* @example
* scene.on("add", function (event) {
* console.log('Scene was added to a new controller.');
* });
*
* @property {object} event - The event Object passed to each callback
* @property {string} event.type - The name of the event
* @property {Scene} event.target - The Scene object that triggered this event
* @property {boolean} event.controller - The controller object the scene was added to.
*/
/**
* Scene remove event.
* Fires when the scene is removed from a controller.
* This is mostly used by plugins to know that change might be due.
*
* @event ScrollMagic.Scene#remove
* @since 2.0.0
*
* @example
* scene.on("remove", function (event) {
* console.log('Scene was removed from its controller.');
* });
*
* @property {object} event - The event Object passed to each callback
* @property {string} event.type - The name of the event
* @property {Scene} event.target - The Scene object that triggered this event
*/
/**
* Add one ore more event listener.
* The callback function will be fired at the respective event, and an object containing relevant data will be passed to the callback.
* @method ScrollMagic.Scene#on
*
* @example
* function callback (event) {
* console.log("Event fired! (" + event.type + ")");
* }
* // add listeners
* scene.on("change update progress start end enter leave", callback);
*
* @param {string} names - The name or names of the event the callback should be attached to.
* @param {function} callback - A function that should be executed, when the event is dispatched. An event object will be passed to the callback.
* @returns {Scene} Parent object for chaining.
*/
this.on = function (names, callback) {
if (_util.type.Function(callback)) {
names = names.trim().split(' ');
names.forEach(function (fullname) {
var nameparts = fullname.split('.'),
eventname = nameparts[0],
namespace = nameparts[1];
if (eventname != "*") {
// disallow wildcards
if (!_listeners[eventname]) {
_listeners[eventname] = [];
}
_listeners[eventname].push({
namespace: namespace || '',
callback: callback
});
}
});
} else {
log(1, "ERROR when calling '.on()': Supplied callback for '" + names + "' is not a valid function!");
}
return Scene;
};
/**
* Remove one or more event listener.
* @method ScrollMagic.Scene#off
*
* @example
* function callback (event) {
* console.log("Event fired! (" + event.type + ")");
* }
* // add listeners
* scene.on("change update", callback);
* // remove listeners
* scene.off("change update", callback);
*
* @param {string} names - The name or names of the event that should be removed.
* @param {function} [callback] - A specific callback function that should be removed. If none is passed all callbacks to the event listener will be removed.
* @returns {Scene} Parent object for chaining.
*/
this.off = function (names, callback) {
if (!names) {
log(1, "ERROR: Invalid event name supplied.");
return Scene;
}
names = names.trim().split(' ');
names.forEach(function (fullname, key) {
var nameparts = fullname.split('.'),
eventname = nameparts[0],
namespace = nameparts[1] || '',
removeList = eventname === '*' ? Object.keys(_listeners) : [eventname];
removeList.forEach(function (remove) {
var list = _listeners[remove] || [],
i = list.length;
while (i--) {
var listener = list[i];
if (listener && (namespace === listener.namespace || namespace === '*') && (!callback || callback == listener.callback)) {
list.splice(i, 1);
}
}
if (!list.length) {
delete _listeners[remove];
}
});
});
return Scene;
};
/**
* Trigger an event.
* @method ScrollMagic.Scene#trigger
*
* @example
* this.trigger("change");
*
* @param {string} name - The name of the event that should be triggered.
* @param {object} [vars] - An object containing info that should be passed to the callback.
* @returns {Scene} Parent object for chaining.
*/
this.trigger = function (name, vars) {
if (name) {
var nameparts = name.trim().split('.'),
eventname = nameparts[0],
namespace = nameparts[1],
listeners = _listeners[eventname];
log(3, 'event fired:', eventname, vars ? "->" : '', vars || '');
if (listeners) {
listeners.forEach(function (listener, key) {
if (!namespace || namespace === listener.namespace) {
listener.callback.call(Scene, new ScrollMagic.Event(eventname, listener.namespace, Scene, vars));
}
});
}
} else {
log(1, "ERROR: Invalid event name supplied.");
}
return Scene;
}; // set event listeners
Scene.on("change.internal", function (e) {
if (e.what !== "loglevel" && e.what !== "tweenChanges") {
// no need for a scene update scene with these options...
if (e.what === "triggerElement") {
updateTriggerElementPosition();
} else if (e.what === "reverse") {
// the only property left that may have an impact on the current scene state. Everything else is handled by the shift event.
Scene.update();
}
}
}).on("shift.internal", function (e) {
updateScrollOffset();
Scene.update(); // update scene to reflect new position
});
/**
* Send a debug message to the console.
* @private
* but provided publicly with _log for plugins
*
* @param {number} loglevel - The loglevel required to initiate output for the message.
* @param {...mixed} output - One or more variables that should be passed to the console.
*/
var log = this._log = function (loglevel, output) {
if (_options.loglevel >= loglevel) {
Array.prototype.splice.call(arguments, 1, 0, "(" + NAMESPACE + ") ->");
_util.log.apply(window, arguments);
}
};
/**
* Add the scene to a controller.
* This is the equivalent to `Controller.addScene(scene)`.
* @method ScrollMagic.Scene#addTo
*
* @example
* // add a scene to a ScrollMagic Controller
* scene.addTo(controller);
*
* @param {ScrollMagic.Controller} controller - The controller to which the scene should be added.
* @returns {Scene} Parent object for chaining.
*/
this.addTo = function (controller) {
if (!(controller instanceof ScrollMagic.Controller)) {
log(1, "ERROR: supplied argument of 'addTo()' is not a valid ScrollMagic Controller");
} else if (_controller != controller) {
// new controller
if (_controller) {
// was associated to a different controller before, so remove it...
_controller.removeScene(Scene);
}
_controller = controller;
validateOption();
updateDuration(true);
updateTriggerElementPosition(true);
updateScrollOffset();
_controller.info("container").addEventListener('resize', onContainerResize);
controller.addScene(Scene);
Scene.trigger("add", {
controller: _controller
});
log(3, "added " + NAMESPACE + " to controller");
Scene.update();
}
return Scene;
};
/**
* **Get** or **Set** the current enabled state of the scene.
* This can be used to disable this scene without removing or destroying it.
* @method ScrollMagic.Scene#enabled
*
* @example
* // get the current value
* var enabled = scene.enabled();
*
* // disable the scene
* scene.enabled(false);
*
* @param {boolean} [newState] - The new enabled state of the scene `true` or `false`.
* @returns {(boolean|Scene)} Current enabled state or parent object for chaining.
*/
this.enabled = function (newState) {
if (!arguments.length) {
// get
return _enabled;
} else if (_enabled != newState) {
// set
_enabled = !!newState;
Scene.update(true);
}
return Scene;
};
/**
* Remove the scene from the controller.
* This is the equivalent to `Controller.removeScene(scene)`.
* The scene will not be updated anymore until you readd it to a controller.
* To remove the pin or the tween you need to call removeTween() or removePin() respectively.
* @method ScrollMagic.Scene#remove
* @example
* // remove the scene from its controller
* scene.remove();
*
* @returns {Scene} Parent object for chaining.
*/
this.remove = function () {
if (_controller) {
_controller.info("container").removeEventListener('resize', onContainerResize);
var tmpParent = _controller;
_controller = undefined;
tmpParent.removeScene(Scene);
Scene.trigger("remove");
log(3, "removed " + NAMESPACE + " from controller");
}
return Scene;
};
/**
* Destroy the scene and everything.
* @method ScrollMagic.Scene#destroy
* @example
* // destroy the scene without resetting the pin and tween to their initial positions
* scene = scene.destroy();
*
* // destroy the scene and reset the pin and tween
* scene = scene.destroy(true);
*
* @param {boolean} [reset=false] - If `true` the pin and tween (if existent) will be reset.
* @returns {null} Null to unset handler variables.
*/
this.destroy = function (reset) {
Scene.trigger("destroy", {
reset: reset
});
Scene.remove();
Scene.off("*.*");
log(3, "destroyed " + NAMESPACE + " (reset: " + (reset ? "true" : "false") + ")");
return null;
};
/**
* Updates the Scene to reflect the current state.
* This is the equivalent to `Controller.updateScene(scene, immediately)`.
* The update method calculates the scene's start and end position (based on the trigger element, trigger hook, duration and offset) and checks it against the current scroll position of the container.
* It then updates the current scene state accordingly (or does nothing, if the state is already correct) – Pins will be set to their correct position and tweens will be updated to their correct progress.
* This means an update doesn't necessarily result in a progress change. The `progress` event will be fired if the progress has indeed changed between this update and the last.
* _**NOTE:** This method gets called constantly whenever ScrollMagic detects a change. The only application for you is if you change something outside of the realm of ScrollMagic, like moving the trigger or changing tween parameters._
* @method ScrollMagic.Scene#update
* @example
* // update the scene on next tick
* scene.update();
*
* // update the scene immediately
* scene.update(true);
*
* @fires Scene.update
*
* @param {boolean} [immediately=false] - If `true` the update will be instant, if `false` it will wait until next update cycle (better performance).
* @returns {Scene} Parent object for chaining.
*/
this.update = function (immediately) {
if (_controller) {
if (immediately) {
if (_controller.enabled() && _enabled) {
var scrollPos = _controller.info("scrollPos"),
newProgress;
if (_options.duration > 0) {
newProgress = (scrollPos - _scrollOffset.start) / (_scrollOffset.end - _scrollOffset.start);
} else {
newProgress = scrollPos >= _scrollOffset.start ? 1 : 0;
}
Scene.trigger("update", {
startPos: _scrollOffset.start,
endPos: _scrollOffset.end,
scrollPos: scrollPos
});
Scene.progress(newProgress);
} else if (_pin && _state === SCENE_STATE_DURING) {
updatePinState(true); // unpin in position
}
} else {
_controller.updateScene(Scene, false);
}
}
return Scene;
};
/**
* Updates dynamic scene variables like the trigger element position or the duration.
* This method is automatically called in regular intervals from the controller. See {@link ScrollMagic.Controller} option `refreshInterval`.
*
* You can call it to minimize lag, for example when you intentionally change the position of the triggerElement.
* If you don't it will simply be updated in the next refresh interval of the container, which is usually sufficient.
*
* @method ScrollMagic.Scene#refresh
* @since 1.1.0
* @example
* scene = new ScrollMagic.Scene({triggerElement: "#trigger"});
*
* // change the position of the trigger
* $("#trigger").css("top", 500);
* // immediately let the scene know of this change
* scene.refresh();
*
* @fires {@link Scene.shift}, if the trigger element position or the duration changed
* @fires {@link Scene.change}, if the duration changed
*
* @returns {Scene} Parent object for chaining.
*/
this.refresh = function () {
updateDuration();
updateTriggerElementPosition(); // update trigger element position
return Scene;
};
/**
* **Get** or **Set** the scene's progress.
* Usually it shouldn't be necessary to use this as a setter, as it is set automatically by scene.update().
* The order in which the events are fired depends on the duration of the scene:
* 1. Scenes with `duration == 0`:
* Scenes that have no duration by definition have no ending. Thus the `end` event will never be fired.
* When the trigger position of the scene is passed the events are always fired in this order:
* `enter`, `start`, `progress` when scrolling forward
* and
* `progress`, `start`, `leave` when scrolling in reverse
* 2. Scenes with `duration > 0`:
* Scenes with a set duration have a defined start and end point.
* When scrolling past the start position of the scene it will fire these events in this order:
* `enter`, `start`, `progress`
* When continuing to scroll and passing the end point it will fire these events:
* `progress`, `end`, `leave`
* When reversing through the end point these events are fired:
* `enter`, `end`, `progress`
* And when continuing to scroll past the start position in reverse it will fire:
* `progress`, `start`, `leave`
* In between start and end the `progress` event will be called constantly, whenever the progress changes.
*
* In short:
* `enter` events will always trigger **before** the progress update and `leave` envents will trigger **after** the progress update.
* `start` and `end` will always trigger at their respective position.
*
* Please review the event descriptions for details on the events and the event object that is passed to the callback.
*
* @method ScrollMagic.Scene#progress
* @example
* // get the current scene progress
* var progress = scene.progress();
*
* // set new scene progress
* scene.progress(0.3);
*
* @fires {@link Scene.enter}, when used as setter
* @fires {@link Scene.start}, when used as setter
* @fires {@link Scene.progress}, when used as setter
* @fires {@link Scene.end}, when used as setter
* @fires {@link Scene.leave}, when used as setter
*
* @param {number} [progress] - The new progress value of the scene `[0-1]`.
* @returns {number} `get` - Current scene progress.
* @returns {Scene} `set` - Parent object for chaining.
*/
this.progress = function (progress) {
if (!arguments.length) {
// get
return _progress;
} else {
// set
var doUpdate = false,
oldState = _state,
scrollDirection = _controller ? _controller.info("scrollDirection") : 'PAUSED',
reverseOrForward = _options.reverse || progress >= _progress;
if (_options.duration === 0) {
// zero duration scenes
doUpdate = _progress != progress;
_progress = progress < 1 && reverseOrForward ? 0 : 1;
_state = _progress === 0 ? SCENE_STATE_BEFORE : SCENE_STATE_DURING;
} else {
// scenes with start and end
if (progress < 0 && _state !== SCENE_STATE_BEFORE && reverseOrForward) {
// go back to initial state
_progress = 0;
_state = SCENE_STATE_BEFORE;
doUpdate = true;
} else if (progress >= 0 && progress < 1 && reverseOrForward) {
_progress = progress;
_state = SCENE_STATE_DURING;
doUpdate = true;
} else if (progress >= 1 && _state !== SCENE_STATE_AFTER) {
_progress = 1;
_state = SCENE_STATE_AFTER;
doUpdate = true;
} else if (_state === SCENE_STATE_DURING && !reverseOrForward) {
updatePinState(); // in case we scrolled backwards mid-scene and reverse is disabled => update the pin position, so it doesn't move back as well.
}
}
if (doUpdate) {
// fire events
var eventVars = {
progress: _progress,
state: _state,
scrollDirection: scrollDirection
},
stateChanged = _state != oldState;
var trigger = function trigger(eventName) {
// tmp helper to simplify code
Scene.trigger(eventName, eventVars);
};
if (stateChanged) {
// enter events
if (oldState !== SCENE_STATE_DURING) {
trigger("enter");
trigger(oldState === SCENE_STATE_BEFORE ? "start" : "end");
}
}
trigger("progress");
if (stateChanged) {
// leave events
if (_state !== SCENE_STATE_DURING) {
trigger(_state === SCENE_STATE_BEFORE ? "start" : "end");
trigger("leave");
}
}
}
return Scene;
}
};
/**
* Update the start and end scrollOffset of the container.
* The positions reflect what the controller's scroll position will be at the start and end respectively.
* Is called, when:
* - Scene event "change" is called with: offset, triggerHook, duration
* - scroll container event "resize" is called
* - the position of the triggerElement changes
* - the controller changes -> addTo()
* @private
*/
var updateScrollOffset = function updateScrollOffset() {
_scrollOffset = {
start: _triggerPos + _options.offset
};
if (_controller && _options.triggerElement) {
// take away triggerHook portion to get relative to top
_scrollOffset.start -= _controller.info("size") * _options.triggerHook;
}
_scrollOffset.end = _scrollOffset.start + _options.duration;
};
/**
* Updates the duration if set to a dynamic function.
* This method is called when the scene is added to a controller and in regular intervals from the controller through scene.refresh().
*
* @fires {@link Scene.change}, if the duration changed
* @fires {@link Scene.shift}, if the duration changed
*
* @param {boolean} [suppressEvents=false] - If true the shift event will be suppressed.
* @private
*/
var updateDuration = function updateDuration(suppressEvents) {
// update duration
if (_durationUpdateMethod) {
var varname = "duration";
if (changeOption(varname, _durationUpdateMethod.call(Scene)) && !suppressEvents) {
// set
Scene.trigger("change", {
what: varname,
newval: _options[varname]
});
Scene.trigger("shift", {
reason: varname
});
}
}
};
/**
* Updates the position of the triggerElement, if present.
* This method is called ...
* - ... when the triggerElement is changed
* - ... when the scene is added to a (new) controller
* - ... in regular intervals from the controller through scene.refresh().
*
* @fires {@link Scene.shift}, if the position changed
*
* @param {boolean} [suppressEvents=false] - If true the shift event will be suppressed.
* @private
*/
var updateTriggerElementPosition = function updateTriggerElementPosition(suppressEvents) {
var elementPos = 0,
telem = _options.triggerElement;
if (_controller && (telem || _triggerPos > 0)) {
// either an element exists or was removed and the triggerPos is still > 0
if (telem) {
// there currently a triggerElement set
if (telem.parentNode) {
// check if element is still attached to DOM
var controllerInfo = _controller.info(),
containerOffset = _util.get.offset(controllerInfo.container),
// container position is needed because element offset is returned in relation to document, not in relation to container.
param = controllerInfo.vertical ? "top" : "left"; // which param is of interest ?
// if parent is spacer, use spacer position instead so correct start position is returned for pinned elements.
while (telem.parentNode.hasAttribute(PIN_SPACER_ATTRIBUTE)) {
telem = telem.parentNode;
}
var elementOffset = _util.get.offset(telem);
if (!controllerInfo.isDocument) {
// container is not the document root, so substract scroll Position to get correct trigger element position relative to scrollcontent
containerOffset[param] -= _controller.scrollPos();
}
elementPos = elementOffset[param] - containerOffset[param];
} else {
// there was an element, but it was removed from DOM
log(2, "WARNING: triggerElement was removed from DOM and will be reset to", undefined);
Scene.triggerElement(undefined); // unset, so a change event is triggered
}
}
var changed = elementPos != _triggerPos;
_triggerPos = elementPos;
if (changed && !suppressEvents) {
Scene.trigger("shift", {
reason: "triggerElementPosition"
});
}
}
};
/**
* Trigger a shift event, when the container is resized and the triggerHook is > 1.
* @private
*/
var onContainerResize = function onContainerResize(e) {
if (_options.triggerHook > 0) {
Scene.trigger("shift", {
reason: "containerResize"
});
}
};
var _validate = _util.extend(SCENE_OPTIONS.validate, {
// validation for duration handled internally for reference to private var _durationMethod
duration: function duration(val) {
if (_util.type.String(val) && val.match(/^(\.|\d)*\d+%$/)) {
// percentage value
var perc = parseFloat(val) / 100;
val = function val() {
return _controller ? _controller.info("size") * perc : 0;
};
}
if (_util.type.Function(val)) {
// function
_durationUpdateMethod = val;
try {
val = parseFloat(_durationUpdateMethod.call(Scene));
} catch (e) {
val = -1; // will cause error below
}
} // val has to be float
val = parseFloat(val);
if (!_util.type.Number(val) || val < 0) {
if (_durationUpdateMethod) {
_durationUpdateMethod = undefined;
throw ["Invalid return value of supplied function for option \"duration\":", val];
} else {
throw ["Invalid value for option \"duration\":", val];
}
}
return val;
}
});
/**
* Checks the validity of a specific or all options and reset to default if neccessary.
* @private
*/
var validateOption = function validateOption(check) {
check = arguments.length ? [check] : Object.keys(_validate);
check.forEach(function (optionName, key) {
var value;
if (_validate[optionName]) {
// there is a validation method for this option
try {
// validate value
value = _validate[optionName](_options[optionName]);
} catch (e) {
// validation failed -> reset to default
value = DEFAULT_OPTIONS[optionName];
var logMSG = _util.type.String(e) ? [e] : e;
if (_util.type.Array(logMSG)) {
logMSG[0] = "ERROR: " + logMSG[0];
logMSG.unshift(1); // loglevel 1 for error msg
log.apply(this, logMSG);
} else {
log(1, "ERROR: Problem executing validation callback for option '" + optionName + "':", e.message);
}
} finally {
_options[optionName] = value;
}
}
});
};
/**
* Helper used by the setter/getters for scene options
* @private
*/
var changeOption = function changeOption(varname, newval) {
var changed = false,
oldval = _options[varname];
if (_options[varname] != newval) {
_options[varname] = newval;
validateOption(varname); // resets to default if necessary
changed = oldval != _options[varname];
}
return changed;
}; // generate getters/setters for all options
var addSceneOption = function addSceneOption(optionName) {
if (!Scene[optionName]) {
Scene[optionName] = function (newVal) {
if (!arguments.length) {
// get
return _options[optionName];
} else {
if (optionName === "duration") {
// new duration is set, so any previously set function must be unset
_durationUpdateMethod = undefined;
}
if (changeOption(optionName, newVal)) {
// set
Scene.trigger("change", {
what: optionName,
newval: _options[optionName]
});
if (SCENE_OPTIONS.shifts.indexOf(optionName) > -1) {
Scene.trigger("shift", {
reason: optionName
});
}
}
}
return Scene;
};
}
};
/**
* **Get** or **Set** the duration option value.
*
* As a **setter** it accepts three types of parameters:
* 1. `number`: Sets the duration of the scene to exactly this amount of pixels.
* This means the scene will last for exactly this amount of pixels scrolled. Sub-Pixels are also valid.
* A value of `0` means that the scene is 'open end' and no end will be triggered. Pins will never unpin and animations will play independently of scroll progress.
* 2. `string`: Always updates the duration relative to parent scroll container.
* For example `"100%"` will keep the duration always exactly at the inner height of the scroll container.
* When scrolling vertically the width is used for reference respectively.
* 3. `function`: The supplied function will be called to return the scene duration.
* This is useful in setups where the duration depends on other elements who might change size. By supplying a function you can return a value instead of updating potentially multiple scene durations.
* The scene can be referenced inside the callback using `this`.
* _**WARNING:** This is an easy way to kill performance, as the callback will be executed every time `Scene.refresh()` is called, which happens a lot. The interval is defined by the controller (see ScrollMagic.Controller option `refreshInterval`).
* It's recomended to avoid calculations within the function and use cached variables as return values.
* This counts double if you use the same function for multiple scenes._
*
* @method ScrollMagic.Scene#duration
* @example
* // get the current duration value
* var duration = scene.duration();
*
* // set a new duration
* scene.duration(300);
*
* // set duration responsively to container size
* scene.duration("100%");
*
* // use a function to randomize the duration for some reason.
* var durationValueCache;
* function durationCallback () {
* return durationValueCache;
* }
* function updateDuration () {
* durationValueCache = Math.random() * 100;
* }
* updateDuration(); // set to initial value
* scene.duration(durationCallback); // set duration callback
*
* @fires {@link Scene.change}, when used as setter
* @fires {@link Scene.shift}, when used as setter
* @param {(number|string|function)} [newDuration] - The new duration setting for the scene.
* @returns {number} `get` - Current scene duration.
* @returns {Scene} `set` - Parent object for chaining.
*/
/**
* **Get** or **Set** the offset option value.
* @method ScrollMagic.Scene#offset
* @example
* // get the current offset
* var offset = scene.offset();
*
* // set a new offset
* scene.offset(100);
*
* @fires {@link Scene.change}, when used as setter
* @fires {@link Scene.shift}, when used as setter
* @param {number} [newOffset] - The new offset of the scene.
* @returns {number} `get` - Current scene offset.
* @returns {Scene} `set` - Parent object for chaining.
*/
/**
* **Get** or **Set** the triggerElement option value.
* Does **not** fire `Scene.shift`, because changing the trigger Element doesn't necessarily mean the start position changes. This will be determined in `Scene.refresh()`, which is automatically triggered.
* @method ScrollMagic.Scene#triggerElement
* @example
* // get the current triggerElement
* var triggerElement = scene.triggerElement();
*
* // set a new triggerElement using a selector
* scene.triggerElement("#trigger");
* // set a new triggerElement using a DOM object
* scene.triggerElement(document.getElementById("trigger"));
*
* @fires {@link Scene.change}, when used as setter
* @param {(string|object)} [newTriggerElement] - The new trigger element for the scene.
* @returns {(string|object)} `get` - Current triggerElement.
* @returns {Scene} `set` - Parent object for chaining.
*/
/**
* **Get** or **Set** the triggerHook option value.
* @method ScrollMagic.Scene#triggerHook
* @example
* // get the current triggerHook value
* var triggerHook = scene.triggerHook();
*
* // set a new triggerHook using a string
* scene.triggerHook("onLeave");
* // set a new triggerHook using a number
* scene.triggerHook(0.7);
*
* @fires {@link Scene.change}, when used as setter
* @fires {@link Scene.shift}, when used as setter
* @param {(number|string)} [newTriggerHook] - The new triggerHook of the scene. See {@link Scene} parameter description for value options.
* @returns {number} `get` - Current triggerHook (ALWAYS numerical).
* @returns {Scene} `set` - Parent object for chaining.
*/
/**
* **Get** or **Set** the reverse option value.
* @method ScrollMagic.Scene#reverse
* @example
* // get the current reverse option
* var reverse = scene.reverse();
*
* // set new reverse option
* scene.reverse(false);
*
* @fires {@link Scene.change}, when used as setter
* @param {boolean} [newReverse] - The new reverse setting of the scene.
* @returns {boolean} `get` - Current reverse option value.
* @returns {Scene} `set` - Parent object for chaining.
*/
/**
* **Get** or **Set** the loglevel option value.
* @method ScrollMagic.Scene#loglevel
* @example
* // get the current loglevel
* var loglevel = scene.loglevel();
*
* // set new loglevel
* scene.loglevel(3);
*
* @fires {@link Scene.change}, when used as setter
* @param {number} [newLoglevel] - The new loglevel setting of the scene. `[0-3]`
* @returns {number} `get` - Current loglevel.
* @returns {Scene} `set` - Parent object for chaining.
*/
/**
* **Get** the associated controller.
* @method ScrollMagic.Scene#controller
* @example
* // get the controller of a scene
* var controller = scene.controller();
*
* @returns {ScrollMagic.Controller} Parent controller or `undefined`
*/
this.controller = function () {
return _controller;
};
/**
* **Get** the current state.
* @method ScrollMagic.Scene#state
* @example
* // get the current state
* var state = scene.state();
*
* @returns {string} `"BEFORE"`, `"DURING"` or `"AFTER"`
*/
this.state = function () {
return _state;
};
/**
* **Get** the current scroll offset for the start of the scene.
* Mind, that the scrollOffset is related to the size of the container, if `triggerHook` is bigger than `0` (or `"onLeave"`).
* This means, that resizing the container or changing the `triggerHook` will influence the scene's start offset.
* @method ScrollMagic.Scene#scrollOffset
* @example
* // get the current scroll offset for the start and end of the scene.
* var start = scene.scrollOffset();
* var end = scene.scrollOffset() + scene.duration();
* console.log("the scene starts at", start, "and ends at", end);
*
* @returns {number} The scroll offset (of the container) at which the scene will trigger. Y value for vertical and X value for horizontal scrolls.
*/
this.scrollOffset = function () {
return _scrollOffset.start;
};
/**
* **Get** the trigger position of the scene (including the value of the `offset` option).
* @method ScrollMagic.Scene#triggerPosition
* @example
* // get the scene's trigger position
* var triggerPosition = scene.triggerPosition();
*
* @returns {number} Start position of the scene. Top position value for vertical and left position value for horizontal scrolls.
*/
this.triggerPosition = function () {
var pos = _options.offset; // the offset is the basis
if (_controller) {
// get the trigger position
if (_options.triggerElement) {
// Element as trigger
pos += _triggerPos;
} else {
// return the height of the triggerHook to start at the beginning
pos += _controller.info("size") * Scene.triggerHook();
}
}
return pos;
};
var _pin, _pinOptions;
Scene.on("shift.internal", function (e) {
var durationChanged = e.reason === "duration";
if (_state === SCENE_STATE_AFTER && durationChanged || _state === SCENE_STATE_DURING && _options.duration === 0) {
// if [duration changed after a scene (inside scene progress updates pin position)] or [duration is 0, we are in pin phase and some other value changed].
updatePinState();
}
if (durationChanged) {
updatePinDimensions();
}
}).on("progress.internal", function (e) {
updatePinState();
}).on("add.internal", function (e) {
updatePinDimensions();
}).on("destroy.internal", function (e) {
Scene.removePin(e.reset);
});
/**
* Update the pin state.
* @private
*/
var updatePinState = function updatePinState(forceUnpin) {
if (_pin && _controller) {
var containerInfo = _controller.info(),
pinTarget = _pinOptions.spacer.firstChild; // may be pin element or another spacer, if cascading pins
if (!forceUnpin && _state === SCENE_STATE_DURING) {
// during scene or if duration is 0 and we are past the trigger
// pinned state
if (_util.css(pinTarget, "position") != "fixed") {
// change state before updating pin spacer (position changes due to fixed collapsing might occur.)
_util.css(pinTarget, {
"position": "fixed"
}); // update pin spacer
updatePinDimensions();
}
var fixedPos = _util.get.offset(_pinOptions.spacer, true),
// get viewport position of spacer
scrollDistance = _options.reverse || _options.duration === 0 ? containerInfo.scrollPos - _scrollOffset.start // quicker
: Math.round(_progress * _options.duration * 10) / 10; // if no reverse and during pin the position needs to be recalculated using the progress
// add scrollDistance
fixedPos[containerInfo.vertical ? "top" : "left"] += scrollDistance; // set new values
_util.css(_pinOptions.spacer.firstChild, {
top: fixedPos.top,
left: fixedPos.left
});
} else {
// unpinned state
var newCSS = {
position: _pinOptions.inFlow ? "relative" : "absolute",
top: 0,
left: 0
},
change = _util.css(pinTarget, "position") != newCSS.position;
if (!_pinOptions.pushFollowers) {
newCSS[containerInfo.vertical ? "top" : "left"] = _options.duration * _progress;
} else if (_options.duration > 0) {
// only concerns scenes with duration
if (_state === SCENE_STATE_AFTER && parseFloat(_util.css(_pinOptions.spacer, "padding-top")) === 0) {
change = true; // if in after state but havent updated spacer yet (jumped past pin)
} else if (_state === SCENE_STATE_BEFORE && parseFloat(_util.css(_pinOptions.spacer, "padding-bottom")) === 0) {
// before
change = true; // jumped past fixed state upward direction
}
} // set new values
_util.css(pinTarget, newCSS);
if (change) {
// update pin spacer if state changed
updatePinDimensions();
}
}
}
};
/**
* Update the pin spacer and/or element size.
* The size of the spacer needs to be updated whenever the duration of the scene changes, if it is to push down following elements.
* @private
*/
var updatePinDimensions = function updatePinDimensions() {
if (_pin && _controller && _pinOptions.inFlow) {
// no spacerresize, if original position is absolute
var after = _state === SCENE_STATE_AFTER,
before = _state === SCENE_STATE_BEFORE,
during = _state === SCENE_STATE_DURING,
vertical = _controller.info("vertical"),
pinTarget = _pinOptions.spacer.firstChild,
// usually the pined element but can also be another spacer (cascaded pins)
marginCollapse = _util.isMarginCollapseType(_util.css(_pinOptions.spacer, "display")),
css = {}; // set new size
// if relsize: spacer -> pin | else: pin -> spacer
if (_pinOptions.relSize.width || _pinOptions.relSize.autoFullWidth) {
if (during) {
_util.css(_pin, {
"width": _util.get.width(_pinOptions.spacer)
});
} else {
_util.css(_pin, {
"width": "100%"
});
}
} else {
// minwidth is needed for cascaded pins.
css["min-width"] = _util.get.width(vertical ? _pin : pinTarget, true, true);
css.width = during ? css["min-width"] : "auto";
}
if (_pinOptions.relSize.height) {
if (during) {
// the only padding the spacer should ever include is the duration (if pushFollowers = true), so we need to substract that.
_util.css(_pin, {
"height": _util.get.height(_pinOptions.spacer) - (_pinOptions.pushFollowers ? _options.duration : 0)
});
} else {
_util.css(_pin, {
"height": "100%"
});
}
} else {
// margin is only included if it's a cascaded pin to resolve an IE9 bug
css["min-height"] = _util.get.height(vertical ? pinTarget : _pin, true, !marginCollapse); // needed for cascading pins
css.height = during ? css["min-height"] : "auto";
} // add space for duration if pushFollowers is true
if (_pinOptions.pushFollowers) {
css["padding" + (vertical ? "Top" : "Left")] = _options.duration * _progress;
css["padding" + (vertical ? "Bottom" : "Right")] = _options.duration * (1 - _progress);
}
_util.css(_pinOptions.spacer, css);
}
};
/**
* Updates the Pin state (in certain scenarios)
* If the controller container is not the document and we are mid-pin-phase scrolling or resizing the main document can result to wrong pin positions.
* So this function is called on resize and scroll of the document.
* @private
*/
var updatePinInContainer = function updatePinInContainer() {
if (_controller && _pin && _state === SCENE_STATE_DURING && !_controller.info("isDocument")) {
updatePinState();
}
};
/**
* Updates the Pin spacer size state (in certain scenarios)
* If container is resized during pin and relatively sized the size of the pin might need to be updated...
* So this function is called on resize of the container.
* @private
*/
var updateRelativePinSpacer = function updateRelativePinSpacer() {
if (_controller && _pin && // well, duh
_state === SCENE_STATE_DURING && ( // element in pinned state?
// is width or height relatively sized, but not in relation to body? then we need to recalc.
(_pinOptions.relSize.width || _pinOptions.relSize.autoFullWidth) && _util.get.width(window) != _util.get.width(_pinOptions.spacer.parentNode) || _pinOptions.relSize.height && _util.get.height(window) != _util.get.height(_pinOptions.spacer.parentNode))) {
updatePinDimensions();
}
};
/**
* Is called, when the mousewhel is used while over a pinned element inside a div container.
* If the scene is in fixed state scroll events would be counted towards the body. This forwards the event to the scroll container.
* @private
*/
var onMousewheelOverPin = function onMousewheelOverPin(e) {
if (_controller && _pin && _state === SCENE_STATE_DURING && !_controller.info("isDocument")) {
// in pin state
e.preventDefault();
_controller._setScrollPos(_controller.info("scrollPos") - ((e.wheelDelta || e[_controller.info("vertical") ? "wheelDeltaY" : "wheelDeltaX"]) / 3 || -e.detail * 30));
}
};
/**
* Pin an element for the duration of the scene.
* If the scene duration is 0 the element will only be unpinned, if the user scrolls back past the start position.
* Make sure only one pin is applied to an element at the same time.
* An element can be pinned multiple times, but only successively.
* _**NOTE:** The option `pushFollowers` has no effect, when the scene duration is 0._
* @method ScrollMagic.Scene#setPin
* @example
* // pin element and push all following elements down by the amount of the pin duration.
* scene.setPin("#pin");
*
* // pin element and keeping all following elements in their place. The pinned element will move past them.
* scene.setPin("#pin", {pushFollowers: false});
*
* @param {(string|object)} element - A Selector targeting an element or a DOM object that is supposed to be pinned.
* @param {object} [settings] - settings for the pin
* @param {boolean} [settings.pushFollowers=true] - If `true` following elements will be "pushed" down for the duration of the pin, if `false` the pinned element will just scroll past them.
Ignored, when duration is `0`.
* @param {string} [settings.spacerClass="scrollmagic-pin-spacer"] - Classname of the pin spacer element, which is used to replace the element.
*
* @returns {Scene} Parent object for chaining.
*/
this.setPin = function (element, settings) {
var defaultSettings = {
pushFollowers: true,
spacerClass: "scrollmagic-pin-spacer"
};
var pushFollowersActivelySet = settings && settings.hasOwnProperty('pushFollowers');
settings = _util.extend({}, defaultSettings, settings); // validate Element
element = _util.get.elements(element)[0];
if (!element) {
log(1, "ERROR calling method 'setPin()': Invalid pin element supplied.");
return Scene; // cancel
} else if (_util.css(element, "position") === "fixed") {
log(1, "ERROR calling method 'setPin()': Pin does not work with elements that are positioned 'fixed'.");
return Scene; // cancel
}
if (_pin) {
// preexisting pin?
if (_pin === element) {
// same pin we already have -> do nothing
return Scene; // cancel
} else {
// kill old pin
Scene.removePin();
}
}
_pin = element;
var parentDisplay = _pin.parentNode.style.display,
boundsParams = ["top", "left", "bottom", "right", "margin", "marginLeft", "marginRight", "marginTop", "marginBottom"];
_pin.parentNode.style.display = 'none'; // hack start to force css to return stylesheet values instead of calculated px values.
var inFlow = _util.css(_pin, "position") != "absolute",
pinCSS = _util.css(_pin, boundsParams.concat(["display"])),
sizeCSS = _util.css(_pin, ["width", "height"]);
_pin.parentNode.style.display = parentDisplay; // hack end.
if (!inFlow && settings.pushFollowers) {
log(2, "WARNING: If the pinned element is positioned absolutely pushFollowers will be disabled.");
settings.pushFollowers = false;
}
window.setTimeout(function () {
// wait until all finished, because with responsive duration it will only be set after scene is added to controller
if (_pin && _options.duration === 0 && pushFollowersActivelySet && settings.pushFollowers) {
log(2, "WARNING: pushFollowers =", true, "has no effect, when scene duration is 0.");
}
}, 0); // create spacer and insert
var spacer = _pin.parentNode.insertBefore(document.createElement('div'), _pin),
spacerCSS = _util.extend(pinCSS, {
position: inFlow ? "relative" : "absolute",
boxSizing: "content-box",
mozBoxSizing: "content-box",
webkitBoxSizing: "content-box"
});
if (!inFlow) {
// copy size if positioned absolutely, to work for bottom/right positioned elements.
_util.extend(spacerCSS, _util.css(_pin, ["width", "height"]));
}
_util.css(spacer, spacerCSS);
spacer.setAttribute(PIN_SPACER_ATTRIBUTE, "");
_util.addClass(spacer, settings.spacerClass); // set the pin Options
_pinOptions = {
spacer: spacer,
relSize: {
// save if size is defined using % values. if so, handle spacer resize differently...
width: sizeCSS.width.slice(-1) === "%",
height: sizeCSS.height.slice(-1) === "%",
autoFullWidth: sizeCSS.width === "auto" && inFlow && _util.isMarginCollapseType(pinCSS.display)
},
pushFollowers: settings.pushFollowers,
inFlow: inFlow // stores if the element takes up space in the document flow
};
if (!_pin.___origStyle) {
_pin.___origStyle = {};
var pinInlineCSS = _pin.style,
copyStyles = boundsParams.concat(["width", "height", "position", "boxSizing", "mozBoxSizing", "webkitBoxSizing"]);
copyStyles.forEach(function (val) {
_pin.___origStyle[val] = pinInlineCSS[val] || "";
});
} // if relative size, transfer it to spacer and make pin calculate it...
if (_pinOptions.relSize.width) {
_util.css(spacer, {
width: sizeCSS.width
});
}
if (_pinOptions.relSize.height) {
_util.css(spacer, {
height: sizeCSS.height
});
} // now place the pin element inside the spacer
spacer.appendChild(_pin); // and set new css
_util.css(_pin, {
position: inFlow ? "relative" : "absolute",
margin: "auto",
top: "auto",
left: "auto",
bottom: "auto",
right: "auto"
});
if (_pinOptions.relSize.width || _pinOptions.relSize.autoFullWidth) {
_util.css(_pin, {
boxSizing: "border-box",
mozBoxSizing: "border-box",
webkitBoxSizing: "border-box"
});
} // add listener to document to update pin position in case controller is not the document.
window.addEventListener('scroll', updatePinInContainer);
window.addEventListener('resize', updatePinInContainer);
window.addEventListener('resize', updateRelativePinSpacer); // add mousewheel listener to catch scrolls over fixed elements
_pin.addEventListener("mousewheel", onMousewheelOverPin);
_pin.addEventListener("DOMMouseScroll", onMousewheelOverPin);
log(3, "added pin"); // finally update the pin to init
updatePinState();
return Scene;
};
/**
* Remove the pin from the scene.
* @method ScrollMagic.Scene#removePin
* @example
* // remove the pin from the scene without resetting it (the spacer is not removed)
* scene.removePin();
*
* // remove the pin from the scene and reset the pin element to its initial position (spacer is removed)
* scene.removePin(true);
*
* @param {boolean} [reset=false] - If `false` the spacer will not be removed and the element's position will not be reset.
* @returns {Scene} Parent object for chaining.
*/
this.removePin = function (reset) {
if (_pin) {
if (_state === SCENE_STATE_DURING) {
updatePinState(true); // force unpin at position
}
if (reset || !_controller) {
// if there's no controller no progress was made anyway...
var pinTarget = _pinOptions.spacer.firstChild; // usually the pin element, but may be another spacer (cascaded pins)...
if (pinTarget.hasAttribute(PIN_SPACER_ATTRIBUTE)) {
// copy margins to child spacer
var style = _pinOptions.spacer.style,
values = ["margin", "marginLeft", "marginRight", "marginTop", "marginBottom"],
margins = {};
values.forEach(function (val) {
margins[val] = style[val] || "";
});
_util.css(pinTarget, margins);
}
_pinOptions.spacer.parentNode.insertBefore(pinTarget, _pinOptions.spacer);
_pinOptions.spacer.parentNode.removeChild(_pinOptions.spacer);
if (!_pin.parentNode.hasAttribute(PIN_SPACER_ATTRIBUTE)) {
// if it's the last pin for this element -> restore inline styles
// TODO: only correctly set for first pin (when cascading) - how to fix?
_util.css(_pin, _pin.___origStyle);
delete _pin.___origStyle;
}
}
window.removeEventListener('scroll', updatePinInContainer);
window.removeEventListener('resize', updatePinInContainer);
window.removeEventListener('resize', updateRelativePinSpacer);
_pin.removeEventListener("mousewheel", onMousewheelOverPin);
_pin.removeEventListener("DOMMouseScroll", onMousewheelOverPin);
_pin = undefined;
log(3, "removed pin (reset: " + (reset ? "true" : "false") + ")");
}
return Scene;
};
var _cssClasses,
_cssClassElems = [];
Scene.on("destroy.internal", function (e) {
Scene.removeClassToggle(e.reset);
});
/**
* Define a css class modification while the scene is active.
* When the scene triggers the classes will be added to the supplied element and removed, when the scene is over.
* If the scene duration is 0 the classes will only be removed if the user scrolls back past the start position.
* @method ScrollMagic.Scene#setClassToggle
* @example
* // add the class 'myclass' to the element with the id 'my-elem' for the duration of the scene
* scene.setClassToggle("#my-elem", "myclass");
*
* // add multiple classes to multiple elements defined by the selector '.classChange'
* scene.setClassToggle(".classChange", "class1 class2 class3");
*
* @param {(string|object)} element - A Selector targeting one or more elements or a DOM object that is supposed to be modified.
* @param {string} classes - One or more Classnames (separated by space) that should be added to the element during the scene.
*
* @returns {Scene} Parent object for chaining.
*/
this.setClassToggle = function (element, classes) {
var elems = _util.get.elements(element);
if (elems.length === 0 || !_util.type.String(classes)) {
log(1, "ERROR calling method 'setClassToggle()': Invalid " + (elems.length === 0 ? "element" : "classes") + " supplied.");
return Scene;
}
if (_cssClassElems.length > 0) {
// remove old ones
Scene.removeClassToggle();
}
_cssClasses = classes;
_cssClassElems = elems;
Scene.on("enter.internal_class leave.internal_class", function (e) {
var toggle = e.type === "enter" ? _util.addClass : _util.removeClass;
_cssClassElems.forEach(function (elem, key) {
toggle(elem, _cssClasses);
});
});
return Scene;
};
/**
* Remove the class binding from the scene.
* @method ScrollMagic.Scene#removeClassToggle
* @example
* // remove class binding from the scene without reset
* scene.removeClassToggle();
*
* // remove class binding and remove the changes it caused
* scene.removeClassToggle(true);
*
* @param {boolean} [reset=false] - If `false` and the classes are currently active, they will remain on the element. If `true` they will be removed.
* @returns {Scene} Parent object for chaining.
*/
this.removeClassToggle = function (reset) {
if (reset) {
_cssClassElems.forEach(function (elem, key) {
_util.removeClass(elem, _cssClasses);
});
}
Scene.off("start.internal_class end.internal_class");
_cssClasses = undefined;
_cssClassElems = [];
return Scene;
}; // INIT
construct();
return Scene;
}; // store pagewide scene options
var SCENE_OPTIONS = {
defaults: {
duration: 0,
offset: 0,
triggerElement: undefined,
triggerHook: 0.5,
reverse: true,
loglevel: 2
},
validate: {
offset: function offset(val) {
val = parseFloat(val);
if (!_util.type.Number(val)) {
throw ["Invalid value for option \"offset\":", val];
}
return val;
},
triggerElement: function triggerElement(val) {
val = val || undefined;
if (val) {
var elem = _util.get.elements(val)[0];
if (elem && elem.parentNode) {
val = elem;
} else {
throw ["Element defined in option \"triggerElement\" was not found:", val];
}
}
return val;
},
triggerHook: function triggerHook(val) {
var translate = {
"onCenter": 0.5,
"onEnter": 1,
"onLeave": 0
};
if (_util.type.Number(val)) {
val = Math.max(0, Math.min(parseFloat(val), 1)); // make sure its betweeen 0 and 1
} else if (val in translate) {
val = translate[val];
} else {
throw ["Invalid value for option \"triggerHook\": ", val];
}
return val;
},
reverse: function reverse(val) {
return !!val; // force boolean
},
loglevel: function loglevel(val) {
val = parseInt(val);
if (!_util.type.Number(val) || val < 0 || val > 3) {
throw ["Invalid value for option \"loglevel\":", val];
}
return val;
}
},
// holder for validation methods. duration validation is handled in 'getters-setters.js'
shifts: ["duration", "offset", "triggerHook"] // list of options that trigger a `shift` event
};
/*
* method used to add an option to ScrollMagic Scenes.
* TODO: DOC (private for dev)
*/
ScrollMagic.Scene.addOption = function (name, defaultValue, validationCallback, shifts) {
if (!(name in SCENE_OPTIONS.defaults)) {
SCENE_OPTIONS.defaults[name] = defaultValue;
SCENE_OPTIONS.validate[name] = validationCallback;
if (shifts) {
SCENE_OPTIONS.shifts.push(name);
}
} else {
ScrollMagic._util.log(1, "[static] ScrollMagic.Scene -> Cannot add Scene option '" + name + "', because it already exists.");
}
}; // instance extension function for plugins
// TODO: DOC (private for dev)
ScrollMagic.Scene.extend = function (extension) {
var oldClass = this;
ScrollMagic.Scene = function () {
oldClass.apply(this, arguments);
this.$super = _util.extend({}, this); // copy parent state
return extension.apply(this, arguments) || this;
};
_util.extend(ScrollMagic.Scene, oldClass); // copy properties
ScrollMagic.Scene.prototype = oldClass.prototype; // copy prototype
ScrollMagic.Scene.prototype.constructor = ScrollMagic.Scene; // restore constructor
};
/**
* TODO: DOCS (private for dev)
* @class
* @private
*/
ScrollMagic.Event = function (type, namespace, target, vars) {
vars = vars || {};
for (var key in vars) {
this[key] = vars[key];
}
this.type = type;
this.target = this.currentTarget = target;
this.namespace = namespace || '';
this.timeStamp = this.timestamp = Date.now();
return this;
};
/*
* TODO: DOCS (private for dev)
*/
var _util = ScrollMagic._util = function (window) {
var U = {},
i;
/**
* ------------------------------
* internal helpers
* ------------------------------
*/
// parse float and fall back to 0.
var floatval = function floatval(number) {
return parseFloat(number) || 0;
}; // get current style IE safe (otherwise IE would return calculated values for 'auto')
var _getComputedStyle = function _getComputedStyle(elem) {
return elem.currentStyle ? elem.currentStyle : window.getComputedStyle(elem);
}; // get element dimension (width or height)
var _dimension = function _dimension(which, elem, outer, includeMargin) {
elem = elem === document ? window : elem;
if (elem === window) {
includeMargin = false;
} else if (!_type.DomElement(elem)) {
return 0;
}
which = which.charAt(0).toUpperCase() + which.substr(1).toLowerCase();
var dimension = (outer ? elem['offset' + which] || elem['outer' + which] : elem['client' + which] || elem['inner' + which]) || 0;
if (outer && includeMargin) {
var style = _getComputedStyle(elem);
dimension += which === 'Height' ? floatval(style.marginTop) + floatval(style.marginBottom) : floatval(style.marginLeft) + floatval(style.marginRight);
}
return dimension;
}; // converts 'margin-top' into 'marginTop'
var _camelCase = function _camelCase(str) {
return str.replace(/^[^a-z]+([a-z])/g, '$1').replace(/-([a-z])/g, function (g) {
return g[1].toUpperCase();
});
};
/**
* ------------------------------
* external helpers
* ------------------------------
*/
// extend obj – same as jQuery.extend({}, objA, objB)
U.extend = function (obj) {
obj = obj || {};
for (i = 1; i < arguments.length; i++) {
if (!arguments[i]) {
continue;
}
for (var key in arguments[i]) {
if (arguments[i].hasOwnProperty(key)) {
obj[key] = arguments[i][key];
}
}
}
return obj;
}; // check if a css display type results in margin-collapse or not
U.isMarginCollapseType = function (str) {
return ["block", "flex", "list-item", "table", "-webkit-box"].indexOf(str) > -1;
}; // implementation of requestAnimationFrame
// based on https://gist.github.com/paulirish/1579671
var lastTime = 0,
vendors = ['ms', 'moz', 'webkit', 'o'];
var _requestAnimationFrame = window.requestAnimationFrame;
var _cancelAnimationFrame = window.cancelAnimationFrame; // try vendor prefixes if the above doesn't work
for (i = 0; !_requestAnimationFrame && i < vendors.length; ++i) {
_requestAnimationFrame = window[vendors[i] + 'RequestAnimationFrame'];
_cancelAnimationFrame = window[vendors[i] + 'CancelAnimationFrame'] || window[vendors[i] + 'CancelRequestAnimationFrame'];
} // fallbacks
if (!_requestAnimationFrame) {
_requestAnimationFrame = function _requestAnimationFrame(callback) {
var currTime = new Date().getTime(),
timeToCall = Math.max(0, 16 - (currTime - lastTime)),
id = window.setTimeout(function () {
callback(currTime + timeToCall);
}, timeToCall);
lastTime = currTime + timeToCall;
return id;
};
}
if (!_cancelAnimationFrame) {
_cancelAnimationFrame = function _cancelAnimationFrame(id) {
window.clearTimeout(id);
};
}
U.rAF = _requestAnimationFrame.bind(window);
U.cAF = _cancelAnimationFrame.bind(window);
var loglevels = ["error", "warn", "log"],
console = window.console || {};
console.log = console.log || function () {}; // no console log, well - do nothing then...
// make sure methods for all levels exist.
for (i = 0; i < loglevels.length; i++) {
var method = loglevels[i];
if (!console[method]) {
console[method] = console.log; // prefer .log over nothing
}
}
U.log = function (loglevel) {
if (loglevel > loglevels.length || loglevel <= 0) loglevel = loglevels.length;
var now = new Date(),
time = ("0" + now.getHours()).slice(-2) + ":" + ("0" + now.getMinutes()).slice(-2) + ":" + ("0" + now.getSeconds()).slice(-2) + ":" + ("00" + now.getMilliseconds()).slice(-3),
method = loglevels[loglevel - 1],
args = Array.prototype.splice.call(arguments, 1),
func = Function.prototype.bind.call(console[method], console);
args.unshift(time);
func.apply(console, args);
};
/**
* ------------------------------
* type testing
* ------------------------------
*/
var _type = U.type = function (v) {
return Object.prototype.toString.call(v).replace(/^\[object (.+)\]$/, "$1").toLowerCase();
};
_type.String = function (v) {
return _type(v) === 'string';
};
_type.Function = function (v) {
return _type(v) === 'function';
};
_type.Array = function (v) {
return Array.isArray(v);
};
_type.Number = function (v) {
return !_type.Array(v) && v - parseFloat(v) + 1 >= 0;
};
_type.DomElement = function (o) {
return (typeof HTMLElement === "undefined" ? "undefined" : _typeof(HTMLElement)) === "object" || typeof HTMLElement === "function" ? o instanceof HTMLElement || o instanceof SVGElement : //DOM2
o && _typeof(o) === "object" && o !== null && o.nodeType === 1 && typeof o.nodeName === "string";
};
/**
* ------------------------------
* DOM Element info
* ------------------------------
*/
// always returns a list of matching DOM elements, from a selector, a DOM element or an list of elements or even an array of selectors
var _get = U.get = {};
_get.elements = function (selector) {
var arr = [];
if (_type.String(selector)) {
try {
selector = document.querySelectorAll(selector);
} catch (e) {
// invalid selector
return arr;
}
}
if (_type(selector) === 'nodelist' || _type.Array(selector) || selector instanceof NodeList) {
for (var i = 0, ref = arr.length = selector.length; i < ref; i++) {
// list of elements
var elem = selector[i];
arr[i] = _type.DomElement(elem) ? elem : _get.elements(elem); // if not an element, try to resolve recursively
}
} else if (_type.DomElement(selector) || selector === document || selector === window) {
arr = [selector]; // only the element
}
return arr;
}; // get scroll top value
_get.scrollTop = function (elem) {
return elem && typeof elem.scrollTop === 'number' ? elem.scrollTop : window.pageYOffset || 0;
}; // get scroll left value
_get.scrollLeft = function (elem) {
return elem && typeof elem.scrollLeft === 'number' ? elem.scrollLeft : window.pageXOffset || 0;
}; // get element height
_get.width = function (elem, outer, includeMargin) {
return _dimension('width', elem, outer, includeMargin);
}; // get element width
_get.height = function (elem, outer, includeMargin) {
return _dimension('height', elem, outer, includeMargin);
}; // get element position (optionally relative to viewport)
_get.offset = function (elem, relativeToViewport) {
var offset = {
top: 0,
left: 0
};
if (elem && elem.getBoundingClientRect) {
// check if available
var rect = elem.getBoundingClientRect();
offset.top = rect.top;
offset.left = rect.left;
if (!relativeToViewport) {
// clientRect is by default relative to viewport...
offset.top += _get.scrollTop();
offset.left += _get.scrollLeft();
}
}
return offset;
};
/**
* ------------------------------
* DOM Element manipulation
* ------------------------------
*/
U.addClass = function (elem, classname) {
if (classname) {
if (elem.classList) elem.classList.add(classname);else elem.className += ' ' + classname;
}
};
U.removeClass = function (elem, classname) {
if (classname) {
if (elem.classList) elem.classList.remove(classname);else elem.className = elem.className.replace(new RegExp('(^|\\b)' + classname.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
}
}; // if options is string -> returns css value
// if options is array -> returns object with css value pairs
// if options is object -> set new css values
U.css = function (elem, options) {
if (_type.String(options)) {
return _getComputedStyle(elem)[_camelCase(options)];
} else if (_type.Array(options)) {
var obj = {},
style = _getComputedStyle(elem);
options.forEach(function (option, key) {
obj[option] = style[_camelCase(option)];
});
return obj;
} else {
for (var option in options) {
var val = options[option];
if (val == parseFloat(val)) {
// assume pixel for seemingly numerical values
val += 'px';
}
elem.style[_camelCase(option)] = val;
}
}
};
return U;
}(window || {});
ScrollMagic.Scene.prototype.addIndicators = function () {
ScrollMagic._util.log(1, '(ScrollMagic.Scene) -> ERROR calling addIndicators() due to missing Plugin \'debug.addIndicators\'. Please make sure to include plugins/debug.addIndicators.js');
return this;
};
ScrollMagic.Scene.prototype.removeIndicators = function () {
ScrollMagic._util.log(1, '(ScrollMagic.Scene) -> ERROR calling removeIndicators() due to missing Plugin \'debug.addIndicators\'. Please make sure to include plugins/debug.addIndicators.js');
return this;
};
ScrollMagic.Scene.prototype.setTween = function () {
ScrollMagic._util.log(1, '(ScrollMagic.Scene) -> ERROR calling setTween() due to missing Plugin \'animation.gsap\'. Please make sure to include plugins/animation.gsap.js');
return this;
};
ScrollMagic.Scene.prototype.removeTween = function () {
ScrollMagic._util.log(1, '(ScrollMagic.Scene) -> ERROR calling removeTween() due to missing Plugin \'animation.gsap\'. Please make sure to include plugins/animation.gsap.js');
return this;
};
ScrollMagic.Scene.prototype.setVelocity = function () {
ScrollMagic._util.log(1, '(ScrollMagic.Scene) -> ERROR calling setVelocity() due to missing Plugin \'animation.velocity\'. Please make sure to include plugins/animation.velocity.js');
return this;
};
ScrollMagic.Scene.prototype.removeVelocity = function () {
ScrollMagic._util.log(1, '(ScrollMagic.Scene) -> ERROR calling removeVelocity() due to missing Plugin \'animation.velocity\'. Please make sure to include plugins/animation.velocity.js');
return this;
};
return ScrollMagic;
});
/***/ }),
/***/ "./src/js/core/scrollProgress.js":
/*!***************************************!*\
!*** ./src/js/core/scrollProgress.js ***!
\***************************************/
/***/ (function(module, exports, __webpack_require__) {
var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_RESULT__;function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
/* scrollprogress v3.0.2 - 2017 Jeremias Menichelli - MIT License */
(function (global, factory) {
( false ? 0 : _typeof(exports)) === 'object' && "object" !== 'undefined' ? module.exports = factory() : true ? !(__WEBPACK_AMD_DEFINE_FACTORY__ = (factory),
__WEBPACK_AMD_DEFINE_RESULT__ = (typeof __WEBPACK_AMD_DEFINE_FACTORY__ === 'function' ?
(__WEBPACK_AMD_DEFINE_FACTORY__.call(exports, __webpack_require__, exports, module)) :
__WEBPACK_AMD_DEFINE_FACTORY__),
__WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)) : 0;
})(this, function () {
'use strict';
/**
* Fallback noop function
* @method noop
* @returns {undefined}
*/
function noop() {}
/**
* ScrollProgress class constructor
* @constructor ScrollProgress
* @param {Function} handleUpdate method to call on scroll update
* @returns {undefined}
*/
var ScrollProgress = function ScrollProgress(handleUpdate) {
// assign function to call on update
this._handleUpdate = typeof handleUpdate === 'function' ? handleUpdate : noop; // set initial values
this._viewportHeight = this._getViewportHeight();
this._viewportWidth = this._getViewportWidth();
this._progress = this._getProgress(); // trigger initial update function
this._handleUpdate(this._progress.x, this._progress.y); // bind event functions
this._onScroll = this._onScroll.bind(this);
this._onResize = this._onResize.bind(this); // add event listeners
window.addEventListener('scroll', this._onScroll);
window.addEventListener('resize', this._onResize);
};
/**
* Get vertical trajectory of the viewport
* @method _getViewportHeight
* @returns {Number}
*/
ScrollProgress.prototype._getViewportHeight = function () {
return document.body.scrollHeight - window.innerHeight;
};
/**
* Get horizontal trajectory of the viewport
* @method _getViewportWidth
* @returns {Number}
*/
ScrollProgress.prototype._getViewportWidth = function () {
return document.body.scrollWidth - window.innerWidth;
};
/**
* Get scroll progress on both axis
* @method _getProgress
* @returns {Object}
*/
ScrollProgress.prototype._getProgress = function () {
var x = typeof window.scrollX === 'undefined' ? window.pageXOffset : window.scrollX;
var y = typeof window.scrollY === 'undefined' ? window.pageYOffset : window.scrollY;
return {
x: this._viewportWidth === 0 ? 0 : x / this._viewportWidth,
y: this._viewportHeight === 0 ? 0 : y / this._viewportHeight
};
};
/**
* Get scroll progress on both axis
* @method _getProgress
* @returns {undefined}
*/
ScrollProgress.prototype._onScroll = function () {
this._progress = this._getProgress();
this._handleUpdate(this._progress.x, this._progress.y);
};
/**
* Update viewport metrics, recalculate progress and call update callback
* @method _onResize
* @returns {undefined}
*/
ScrollProgress.prototype._onResize = function () {
this._viewportHeight = this._getViewportHeight();
this._viewportWidth = this._getViewportWidth();
this._progress = this._getProgress(); // trigger update function
this._handleUpdate(this._progress.x, this._progress.y);
};
/**
* Trigger update callback
* @method trigger
* @returns {undefined}
*/
ScrollProgress.prototype.trigger = function () {
this._handleUpdate(this._progress.x, this._progress.y);
};
/**
* Destroy scroll observer, remove listeners and update callback
* @method destroy
* @returns {undefined}
*/
ScrollProgress.prototype.destroy = function () {
window.removeEventListener('scroll', this._onScroll);
window.removeEventListener('resize', this._onResize);
this._handleUpdate = null;
};
return ScrollProgress;
});
/***/ }),
/***/ "./src/js/core/setup.js":
/*!******************************!*\
!*** ./src/js/core/setup.js ***!
\******************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "wrap": () => (/* binding */ wrap),
/* harmony export */ "debounce": () => (/* binding */ debounce),
/* harmony export */ "throttle": () => (/* binding */ throttle),
/* harmony export */ "ignSlidePropertyReset": () => (/* binding */ ignSlidePropertyReset),
/* harmony export */ "ignSlideUp": () => (/* binding */ ignSlideUp),
/* harmony export */ "ignSlide": () => (/* binding */ ignSlide),
/* harmony export */ "ignSlideDown": () => (/* binding */ ignSlideDown),
/* harmony export */ "ignSlideToggle": () => (/* binding */ ignSlideToggle)
/* harmony export */ });
/*------- Core Functions --------*/
//wrap function. use in scrollmagic and more
function wrap(el, wrapper) {
if (wrapper === undefined) {
wrapper = document.createElement('div');
}
el.parentNode.insertBefore(wrapper, el);
wrapper.appendChild(el);
return wrapper;
} //debounce to slow down an event that users window size or the like
//debounce will wait till the window is resized and then run
function debounce(func, wait, immediate) {
var timeout;
return function () {
var context = this,
args = arguments;
var later = function later() {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
} //throttle will run every few milliseconds as opposed to every millisecond
function throttle(fn, threshhold, scope) {
threshhold || (threshhold = 250);
var last, deferTimer;
return function () {
var context = scope || this;
var now = +new Date(),
args = arguments;
if (last && now < last + threshhold) {
// hold on to it
clearTimeout(deferTimer);
deferTimer = setTimeout(function () {
last = now;
fn.apply(context, args);
}, threshhold);
} else {
last = now;
fn.apply(context, args);
}
};
} ///slide elements
var ignSlideTimer = Array; //{} //turn into array nad ad a data-sliding wirth a number use that number as index to clear it
//remove inline styling if any found except display
function ignSlidePropertyReset(target, direction) {
if (direction === 'up') {
target.style.display = 'none';
} //clear these properties
target.style.removeProperty('transition-duration');
target.style.removeProperty('transition-property');
target.style.removeProperty('height');
target.style.removeProperty('padding-top');
target.style.removeProperty('padding-bottom');
target.style.removeProperty('margin-top');
target.style.removeProperty('margin-bottom');
target.style.removeProperty('overflow');
target.removeAttribute('slideTimer');
}
function ignSlideUp(target) {
var duration = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : .5;
return ignSlide('up', target, duration);
}
function ignSlide() {
var direction = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'up';
var target = arguments.length > 1 ? arguments[1] : undefined;
var duration = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : .5;
return new Promise(function (resolve, reject) {
// Exit function if no target it falsey, as we depend on the target to run this function
if (!target) return;
if (target.dataset.slideTimer) {
clearTimeout(parseInt(target.dataset.slideTimer));
target.removeAttribute('slide-timer');
}
var slideTimer = setTimeout(function () {
ignSlidePropertyReset(target, direction);
resolve();
}, duration * 1000);
target.dataset.slideTimer = slideTimer + ''; //set transitions and overflow
target.style.transitionProperty = 'height, margin, padding';
target.style.transitionDuration = duration + 's';
if (direction === 'up') {
target.style.overflow = 'hidden'; //no point sliding up if its been set to hidden via css
if (window.getComputedStyle(target).display === 'none') {
return;
} //set height just in case there is none. cannot be nothing or auto
target.style.height = "".concat(target.scrollHeight, "px"); //1 split second after: closing the height from wherever it is currently
setTimeout(function () {
target.style.height = 0; //closing item now
target.style.paddingTop = 0;
target.style.paddingBottom = 0;
target.style.marginBottom = 0;
target.style.marginTop = 0;
}, 100);
} else {
//sliding down
// save original margins, and padding, no the inline ones
var height = window.getComputedStyle(target).height; //might be open... or have a set height
var display = window.getComputedStyle(target).display;
var paddingTop = window.getComputedStyle(target).paddingTop || 0;
var paddingBottom = window.getComputedStyle(target).paddingBottom || 0;
var marginBottom = window.getComputedStyle(target).marginBottom || 0;
var marginTop = window.getComputedStyle(target).marginTop || 0;
target.style.removeProperty('overflow'); //cant animate from auto
if (height === 'auto') {
target.style.height = 0;
} //if its not showing now, we will show from 0 on everything
if (display === 'none') {
display = 'block'; //we will be setting this to show
paddingBottom = paddingTop = marginBottom = marginTop = 0; //animating from 0
target.style.height = 0;
} //display must be set before transitioning below
target.style.display = display; //actual transitions
setTimeout(function () {
//animate properties to open and normal
target.style.height = "".concat(target.scrollHeight, "px"); //also animating the padding and margins
target.style.paddingTop = paddingTop;
target.style.paddingBottom = paddingBottom;
target.style.marginTop = marginTop;
target.style.marginBottom = marginBottom;
}, 0);
}
});
}
/**
*
* @param target
* @param duration
*
* Style element as it should show then set it to display none (or have it get display none from slide up or something else)
*/
function ignSlideDown(target) {
var duration = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : .5;
return ignSlide('down', target, duration);
}
function ignSlideToggle(target) {
var duration = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : .5;
if (window.getComputedStyle(target).display === 'none') {
return ignSlideDown(target, duration);
} else {
return ignSlideUp(target, duration);
}
}
/***/ }),
/***/ "./src/js/core/sidebar.js":
/*!********************************!*\
!*** ./src/js/core/sidebar.js ***!
\********************************/
/***/ (() => {
document.addEventListener('DOMContentLoaded', function () {
//move the header above the article when header-above is found
var headerAbove = document.querySelector('.header-above');
if (headerAbove !== null) {
document.querySelectorAll('.entry-header, .page-header').forEach(function (header) {
headerAbove.parentElement.prepend(header);
header.classList.add('header-moved'); //might be useful for someone
});
} //when a secondary is used, a sidebar is shown, on load we do a few things to smooth the transition of the header
var sidebar = document.querySelector('#secondary');
if (sidebar !== null) {
sidebar.innerHTML = sidebar.innerHTML.trim(); //if moving stuff in and out its good to remove extra space so :empty works
var sidebarTemplate = document.querySelector('.sidebar-template');
sidebarTemplate.classList.add('active');
}
});
/***/ }),
/***/ "./src/js/core/smooth-scroll.js":
/*!**************************************!*\
!*** ./src/js/core/smooth-scroll.js ***!
\**************************************/
/***/ (() => {
var scrollEvent = new Event('afterScroll', {
bubbles: true
}); //bubble allows for delegation on body
/**
* runs when an anchor is clicked or the page loads with an anchor
* the item we are scrolling to can have an offset
* @param element
*/
function scrolltoHash(element) {
if (element) {
var offset = element.dataset.offset || 'start'; //if the offset is a string 'start, center, or end'
if (isNaN(parseInt(offset))) {
element.scrollIntoView({
behavior: 'smooth',
block: offset
});
} else {
//from top scroll with offset
var fromTop = window.pageYOffset + element.getBoundingClientRect().top + parseInt(offset);
window.scroll({
behavior: 'smooth',
top: fromTop
});
} //fire some more events
setTimeout(function () {
element.dispatchEvent(scrollEvent);
}, 500);
}
}
document.addEventListener('DOMContentLoaded', function () {
if (location.hash) {
scrolltoHash(document.querySelector(location.hash));
}
document.body.addEventListener('click', function (e) {
var item = e.target.closest('a[href^="#"]');
if (item) {
var itemHash = item.getAttribute('href');
if (itemHash !== '#' && itemHash !== '#0') {
e.preventDefault();
scrolltoHash(document.querySelector(itemHash));
}
}
});
document.addEventListener('afterScroll', function (e) {//run an event after scroll begins
});
});
/***/ }),
/***/ "./src/js/core/sticky-sidebar.js":
/*!***************************************!*\
!*** ./src/js/core/sticky-sidebar.js ***!
\***************************************/
/***/ (function(module, exports, __webpack_require__) {
var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
(function (global, factory) {
( false ? 0 : _typeof(exports)) === 'object' && "object" !== 'undefined' ? factory(exports) : true ? !(__WEBPACK_AMD_DEFINE_ARRAY__ = [exports], __WEBPACK_AMD_DEFINE_FACTORY__ = (factory),
__WEBPACK_AMD_DEFINE_RESULT__ = (typeof __WEBPACK_AMD_DEFINE_FACTORY__ === 'function' ?
(__WEBPACK_AMD_DEFINE_FACTORY__.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__)) : __WEBPACK_AMD_DEFINE_FACTORY__),
__WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)) : 0;
})(this, function (exports) {
'use strict';
var commonjsGlobal = typeof window !== 'undefined' ? window : typeof __webpack_require__.g !== 'undefined' ? __webpack_require__.g : typeof self !== 'undefined' ? self : {};
function unwrapExports(x) {
return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
}
function createCommonjsModule(fn, module) {
return module = {
exports: {}
}, fn(module, module.exports), module.exports;
}
var stickySidebar = createCommonjsModule(function (module, exports) {
(function (global, factory) {
if (false) {} else {
factory(exports);
}
})(commonjsGlobal, function (exports) {
Object.defineProperty(exports, "__esModule", {
value: true
});
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
var _createClass = function () {
function defineProperties(target, props) {
for (var i = 0; i < props.length; i++) {
var descriptor = props[i];
descriptor.enumerable = descriptor.enumerable || false;
descriptor.configurable = true;
if ("value" in descriptor) descriptor.writable = true;
Object.defineProperty(target, descriptor.key, descriptor);
}
}
return function (Constructor, protoProps, staticProps) {
if (protoProps) defineProperties(Constructor.prototype, protoProps);
if (staticProps) defineProperties(Constructor, staticProps);
return Constructor;
};
}();
/**
* Sticky Sidebar JavaScript Plugin.
* @version 3.3.4
* @author Ahmed Bouhuolia
* @license The MIT License (MIT)
*/
var StickySidebar = function () {
// ---------------------------------
// # Define Constants
// ---------------------------------
//
var EVENT_KEY = '.stickySidebar';
var DEFAULTS = {
/**
* Additional top spacing of the element when it becomes sticky.
* @type {Numeric|Function}
*/
topSpacing: 0,
/**
* Additional bottom spacing of the element when it becomes sticky.
* @type {Numeric|Function}
*/
bottomSpacing: 0,
/**
* Container sidebar selector to know what the beginning and end of sticky element.
* @type {String|False}
*/
containerSelector: false,
/**
* Inner wrapper selector.
* @type {String}
*/
innerWrapperSelector: '.inner-wrapper-sticky',
/**
* The name of CSS class to apply to elements when they have become stuck.
* @type {String|False}
*/
stickyClass: 'is-affixed',
/**
* Detect when sidebar and its container change height so re-calculate their dimensions.
* @type {Boolean}
*/
resizeSensor: true,
/**
* The sidebar returns to its normal position if its width below this value.
* @type {Numeric}
*/
minWidth: false
}; // ---------------------------------
// # Class Definition
// ---------------------------------
//
/**
* Sticky Sidebar Class.
* @public
*/
var StickySidebar = function () {
/**
* Sticky Sidebar Constructor.
* @constructor
* @param {HTMLElement|String} sidebar - The sidebar element or sidebar selector.
* @param {Object} options - The options of sticky sidebar.
*/
function StickySidebar(sidebar) {
var _this = this;
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
_classCallCheck(this, StickySidebar);
this.options = StickySidebar.extend(DEFAULTS, options); // Sidebar element query if there's no one, throw error.
this.sidebar = 'string' === typeof sidebar ? document.querySelector(sidebar) : sidebar;
if ('undefined' === typeof this.sidebar) throw new Error("There is no specific sidebar element.");
this.sidebarInner = false;
this.container = this.sidebar.parentElement; // Current Affix Type of sidebar element.
this.affixedType = 'STATIC';
this.direction = 'down';
this.support = {
transform: false,
transform3d: false
};
this._initialized = false;
this._reStyle = false;
this._breakpoint = false; // Dimensions of sidebar, container and screen viewport.
this.dimensions = {
translateY: 0,
maxTranslateY: 0,
topSpacing: 0,
lastTopSpacing: 0,
bottomSpacing: 0,
lastBottomSpacing: 0,
sidebarHeight: 0,
sidebarWidth: 0,
containerTop: 0,
containerHeight: 0,
viewportHeight: 0,
viewportTop: 0,
lastViewportTop: 0
}; // Bind event handlers for referencability.
['handleEvent'].forEach(function (method) {
_this[method] = _this[method].bind(_this);
}); // Initialize sticky sidebar for first time.
this.initialize();
}
/**
* Initializes the sticky sidebar by adding inner wrapper, define its container,
* min-width breakpoint, calculating dimensions, adding helper classes and inline style.
* @private
*/
_createClass(StickySidebar, [{
key: 'initialize',
value: function initialize() {
var _this2 = this;
this._setSupportFeatures(); // Get sticky sidebar inner wrapper, if not found, will create one.
if (this.options.innerWrapperSelector) {
this.sidebarInner = this.sidebar.querySelector(this.options.innerWrapperSelector);
if (null === this.sidebarInner) this.sidebarInner = false;
}
if (!this.sidebarInner) {
var wrapper = document.createElement('div');
wrapper.setAttribute('class', 'inner-wrapper-sticky');
this.sidebar.appendChild(wrapper);
while (this.sidebar.firstChild != wrapper) {
wrapper.appendChild(this.sidebar.firstChild);
}
this.sidebarInner = this.sidebar.querySelector('.inner-wrapper-sticky');
} // Container wrapper of the sidebar.
if (this.options.containerSelector) {
var containers = document.querySelectorAll(this.options.containerSelector);
containers = Array.prototype.slice.call(containers);
containers.forEach(function (container, item) {
if (!container.contains(_this2.sidebar)) return;
_this2.container = container;
});
if (!containers.length) throw new Error("The container does not contains on the sidebar.");
} // If top/bottom spacing is not function parse value to integer.
if ('function' !== typeof this.options.topSpacing) this.options.topSpacing = parseInt(this.options.topSpacing) || 0;
if ('function' !== typeof this.options.bottomSpacing) this.options.bottomSpacing = parseInt(this.options.bottomSpacing) || 0; // Breakdown sticky sidebar if screen width below `options.minWidth`.
this._widthBreakpoint(); // Calculate dimensions of sidebar, container and viewport.
this.calcDimensions(); // Affix sidebar in proper position.
this.stickyPosition(); // Bind all events.
this.bindEvents(); // Inform other properties the sticky sidebar is initialized.
this._initialized = true;
}
}, {
key: 'bindEvents',
value: function bindEvents() {
window.addEventListener('resize', this, {
passive: true,
capture: false
});
window.addEventListener('scroll', this, {
passive: true,
capture: false
});
this.sidebar.addEventListener('update' + EVENT_KEY, this);
if (this.options.resizeSensor && 'undefined' !== typeof ResizeSensor) {
new ResizeSensor(this.sidebarInner, this.handleEvent);
new ResizeSensor(this.container, this.handleEvent);
}
}
}, {
key: 'handleEvent',
value: function handleEvent(event) {
this.updateSticky(event);
}
}, {
key: 'calcDimensions',
value: function calcDimensions() {
if (this._breakpoint) return;
var dims = this.dimensions; // Container of sticky sidebar dimensions.
dims.containerTop = StickySidebar.offsetRelative(this.container).top;
dims.containerHeight = this.container.clientHeight;
dims.containerBottom = dims.containerTop + dims.containerHeight; // Sidebar dimensions.
dims.sidebarHeight = this.sidebarInner.offsetHeight;
dims.sidebarWidth = this.sidebarInner.offsetWidth; // Screen viewport dimensions.
dims.viewportHeight = window.innerHeight; // Maximum sidebar translate Y.
dims.maxTranslateY = dims.containerHeight - dims.sidebarHeight;
this._calcDimensionsWithScroll();
}
}, {
key: '_calcDimensionsWithScroll',
value: function _calcDimensionsWithScroll() {
var dims = this.dimensions;
dims.sidebarLeft = StickySidebar.offsetRelative(this.sidebar).left;
dims.viewportTop = document.documentElement.scrollTop || document.body.scrollTop;
dims.viewportBottom = dims.viewportTop + dims.viewportHeight;
dims.viewportLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
dims.topSpacing = this.options.topSpacing;
dims.bottomSpacing = this.options.bottomSpacing;
if ('function' === typeof dims.topSpacing) dims.topSpacing = parseInt(dims.topSpacing(this.sidebar)) || 0;
if ('function' === typeof dims.bottomSpacing) dims.bottomSpacing = parseInt(dims.bottomSpacing(this.sidebar)) || 0;
if ('VIEWPORT-TOP' === this.affixedType) {
// Adjust translate Y in the case decrease top spacing value.
if (dims.topSpacing < dims.lastTopSpacing) {
dims.translateY += dims.lastTopSpacing - dims.topSpacing;
this._reStyle = true;
}
} else if ('VIEWPORT-BOTTOM' === this.affixedType) {
// Adjust translate Y in the case decrease bottom spacing value.
if (dims.bottomSpacing < dims.lastBottomSpacing) {
dims.translateY += dims.lastBottomSpacing - dims.bottomSpacing;
this._reStyle = true;
}
}
dims.lastTopSpacing = dims.topSpacing;
dims.lastBottomSpacing = dims.bottomSpacing;
}
}, {
key: 'isSidebarFitsViewport',
value: function isSidebarFitsViewport() {
var dims = this.dimensions;
var offset = this.scrollDirection === 'down' ? dims.lastBottomSpacing : dims.lastTopSpacing;
return this.dimensions.sidebarHeight + offset < this.dimensions.viewportHeight;
}
}, {
key: 'observeScrollDir',
value: function observeScrollDir() {
var dims = this.dimensions;
if (dims.lastViewportTop === dims.viewportTop) return;
var furthest = 'down' === this.direction ? Math.min : Math.max; // If the browser is scrolling not in the same direction.
if (dims.viewportTop === furthest(dims.viewportTop, dims.lastViewportTop)) this.direction = 'down' === this.direction ? 'up' : 'down';
}
}, {
key: 'getAffixType',
value: function getAffixType() {
this._calcDimensionsWithScroll();
var dims = this.dimensions;
var colliderTop = dims.viewportTop + dims.topSpacing;
var affixType = this.affixedType;
if (colliderTop <= dims.containerTop || dims.containerHeight <= dims.sidebarHeight) {
dims.translateY = 0;
affixType = 'STATIC';
} else {
affixType = 'up' === this.direction ? this._getAffixTypeScrollingUp() : this._getAffixTypeScrollingDown();
} // Make sure the translate Y is not bigger than container height.
dims.translateY = Math.max(0, dims.translateY);
dims.translateY = Math.min(dims.containerHeight, dims.translateY);
dims.translateY = Math.round(dims.translateY);
dims.lastViewportTop = dims.viewportTop;
return affixType;
}
}, {
key: '_getAffixTypeScrollingDown',
value: function _getAffixTypeScrollingDown() {
var dims = this.dimensions;
var sidebarBottom = dims.sidebarHeight + dims.containerTop;
var colliderTop = dims.viewportTop + dims.topSpacing;
var colliderBottom = dims.viewportBottom - dims.bottomSpacing;
var affixType = this.affixedType;
if (this.isSidebarFitsViewport()) {
if (dims.sidebarHeight + colliderTop >= dims.containerBottom) {
dims.translateY = dims.containerBottom - sidebarBottom;
affixType = 'CONTAINER-BOTTOM';
} else if (colliderTop >= dims.containerTop) {
dims.translateY = colliderTop - dims.containerTop;
affixType = 'VIEWPORT-TOP';
}
} else {
if (dims.containerBottom <= colliderBottom) {
dims.translateY = dims.containerBottom - sidebarBottom;
affixType = 'CONTAINER-BOTTOM';
} else if (sidebarBottom + dims.translateY <= colliderBottom) {
dims.translateY = colliderBottom - sidebarBottom;
affixType = 'VIEWPORT-BOTTOM';
} else if (dims.containerTop + dims.translateY <= colliderTop && 0 !== dims.translateY && dims.maxTranslateY !== dims.translateY) {
affixType = 'VIEWPORT-UNBOTTOM';
}
}
return affixType;
}
}, {
key: '_getAffixTypeScrollingUp',
value: function _getAffixTypeScrollingUp() {
var dims = this.dimensions;
var sidebarBottom = dims.sidebarHeight + dims.containerTop;
var colliderTop = dims.viewportTop + dims.topSpacing;
var colliderBottom = dims.viewportBottom - dims.bottomSpacing;
var affixType = this.affixedType;
if (colliderTop <= dims.translateY + dims.containerTop) {
dims.translateY = colliderTop - dims.containerTop;
affixType = 'VIEWPORT-TOP';
} else if (dims.containerBottom <= colliderBottom) {
dims.translateY = dims.containerBottom - sidebarBottom;
affixType = 'CONTAINER-BOTTOM';
} else if (!this.isSidebarFitsViewport()) {
if (dims.containerTop <= colliderTop && 0 !== dims.translateY && dims.maxTranslateY !== dims.translateY) {
affixType = 'VIEWPORT-UNBOTTOM';
}
}
return affixType;
}
}, {
key: '_getStyle',
value: function _getStyle(affixType) {
if ('undefined' === typeof affixType) return;
var style = {
inner: {},
outer: {}
};
var dims = this.dimensions;
switch (affixType) {
case 'VIEWPORT-TOP':
style.inner = {
position: 'fixed',
top: dims.topSpacing,
left: dims.sidebarLeft - dims.viewportLeft,
width: dims.sidebarWidth
};
break;
case 'VIEWPORT-BOTTOM':
style.inner = {
position: 'fixed',
top: 'auto',
left: dims.sidebarLeft,
bottom: dims.bottomSpacing,
width: dims.sidebarWidth
};
break;
case 'CONTAINER-BOTTOM':
case 'VIEWPORT-UNBOTTOM':
var translate = this._getTranslate(0, dims.translateY + 'px');
if (translate) style.inner = {
transform: translate
};else style.inner = {
position: 'absolute',
top: dims.translateY,
width: dims.sidebarWidth
};
break;
}
switch (affixType) {
case 'VIEWPORT-TOP':
case 'VIEWPORT-BOTTOM':
case 'VIEWPORT-UNBOTTOM':
case 'CONTAINER-BOTTOM':
style.outer = {
height: dims.sidebarHeight,
position: 'relative'
};
break;
}
style.outer = StickySidebar.extend({
height: '',
position: ''
}, style.outer);
style.inner = StickySidebar.extend({
position: 'relative',
top: '',
left: '',
bottom: '',
width: '',
transform: ''
}, style.inner);
return style;
}
}, {
key: 'stickyPosition',
value: function stickyPosition(force) {
if (this._breakpoint) return;
force = this._reStyle || force || false;
var offsetTop = this.options.topSpacing;
var offsetBottom = this.options.bottomSpacing;
var affixType = this.getAffixType();
var style = this._getStyle(affixType);
if ((this.affixedType != affixType || force) && affixType) {
var affixEvent = 'affix.' + affixType.toLowerCase().replace('viewport-', '') + EVENT_KEY;
StickySidebar.eventTrigger(this.sidebar, affixEvent);
if ('STATIC' === affixType) StickySidebar.removeClass(this.sidebar, this.options.stickyClass);else StickySidebar.addClass(this.sidebar, this.options.stickyClass);
for (var key in style.outer) {
var unit = 'number' === typeof style.outer[key] ? 'px' : '';
this.sidebar.style[key] = style.outer[key] + unit;
}
for (var _key in style.inner) {
var _unit = 'number' === typeof style.inner[_key] ? 'px' : '';
this.sidebarInner.style[_key] = style.inner[_key] + _unit;
}
var affixedEvent = 'affixed.' + affixType.toLowerCase().replace('viewport-', '') + EVENT_KEY;
StickySidebar.eventTrigger(this.sidebar, affixedEvent);
} else {
if (this._initialized) this.sidebarInner.style.left = style.inner.left;
}
this.affixedType = affixType;
}
}, {
key: '_widthBreakpoint',
value: function _widthBreakpoint() {
if (window.innerWidth <= this.options.minWidth) {
this._breakpoint = true;
this.affixedType = 'STATIC';
this.sidebar.removeAttribute('style');
StickySidebar.removeClass(this.sidebar, this.options.stickyClass);
this.sidebarInner.removeAttribute('style');
} else {
this._breakpoint = false;
}
}
}, {
key: 'updateSticky',
value: function updateSticky() {
var _this3 = this;
var event = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
if (this._running) return;
this._running = true;
(function (eventType) {
requestAnimationFrame(function () {
switch (eventType) {
// When browser is scrolling and re-calculate just dimensions
// within scroll.
case 'scroll':
_this3._calcDimensionsWithScroll();
_this3.observeScrollDir();
_this3.stickyPosition();
break;
// When browser is resizing or there's no event, observe width
// breakpoint and re-calculate dimensions.
case 'resize':
default:
_this3._widthBreakpoint();
_this3.calcDimensions();
_this3.stickyPosition(true);
break;
}
_this3._running = false;
});
})(event.type);
}
}, {
key: '_setSupportFeatures',
value: function _setSupportFeatures() {
var support = this.support;
support.transform = StickySidebar.supportTransform();
support.transform3d = StickySidebar.supportTransform(true);
}
}, {
key: '_getTranslate',
value: function _getTranslate() {
var y = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
var x = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
var z = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
if (this.support.transform3d) return 'translate3d(' + y + ', ' + x + ', ' + z + ')';else if (this.support.translate) return 'translate(' + y + ', ' + x + ')';else return false;
}
}, {
key: 'destroy',
value: function destroy() {
window.removeEventListener('resize', this, {
capture: false
});
window.removeEventListener('scroll', this, {
capture: false
});
this.sidebar.classList.remove(this.options.stickyClass);
this.sidebar.style.minHeight = '';
this.sidebar.removeEventListener('update' + EVENT_KEY, this);
var styleReset = {
inner: {},
outer: {}
};
styleReset.inner = {
position: '',
top: '',
left: '',
bottom: '',
width: '',
transform: ''
};
styleReset.outer = {
height: '',
position: ''
};
for (var key in styleReset.outer) {
this.sidebar.style[key] = styleReset.outer[key];
}
for (var _key2 in styleReset.inner) {
this.sidebarInner.style[_key2] = styleReset.inner[_key2];
}
if (this.options.resizeSensor && 'undefined' !== typeof ResizeSensor) {
ResizeSensor.detach(this.sidebarInner, this.handleEvent);
ResizeSensor.detach(this.container, this.handleEvent);
}
}
}], [{
key: 'supportTransform',
value: function supportTransform(transform3d) {
var result = false,
property = transform3d ? 'perspective' : 'transform',
upper = property.charAt(0).toUpperCase() + property.slice(1),
prefixes = ['Webkit', 'Moz', 'O', 'ms'],
support = document.createElement('support'),
style = support.style;
(property + ' ' + prefixes.join(upper + ' ') + upper).split(' ').forEach(function (property, i) {
if (style[property] !== undefined) {
result = property;
return false;
}
});
return result;
}
}, {
key: 'eventTrigger',
value: function eventTrigger(element, eventName, data) {
try {
var event = new CustomEvent(eventName, {
detail: data
});
} catch (e) {
var event = document.createEvent('CustomEvent');
event.initCustomEvent(eventName, true, true, data);
}
element.dispatchEvent(event);
}
}, {
key: 'extend',
value: function extend(defaults, options) {
var results = {};
for (var key in defaults) {
if ('undefined' !== typeof options[key]) results[key] = options[key];else results[key] = defaults[key];
}
return results;
}
}, {
key: 'offsetRelative',
value: function offsetRelative(element) {
var result = {
left: 0,
top: 0
};
do {
var offsetTop = element.offsetTop;
var offsetLeft = element.offsetLeft;
if (!isNaN(offsetTop)) result.top += offsetTop;
if (!isNaN(offsetLeft)) result.left += offsetLeft;
element = 'BODY' === element.tagName ? element.parentElement : element.offsetParent;
} while (element);
return result;
}
}, {
key: 'addClass',
value: function addClass(element, className) {
if (!StickySidebar.hasClass(element, className)) {
if (element.classList) element.classList.add(className);else element.className += ' ' + className;
}
}
}, {
key: 'removeClass',
value: function removeClass(element, className) {
if (StickySidebar.hasClass(element, className)) {
if (element.classList) element.classList.remove(className);else element.className = element.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
}
}
}, {
key: 'hasClass',
value: function hasClass(element, className) {
if (element.classList) return element.classList.contains(className);else return new RegExp('(^| )' + className + '( |$)', 'gi').test(element.className);
}
}, {
key: 'defaults',
get: function get() {
return DEFAULTS;
}
}]);
return StickySidebar;
}();
return StickySidebar;
}();
exports["default"] = StickySidebar; // Global
// -------------------------
window.StickySidebar = StickySidebar;
});
});
var stickySidebar$1 = unwrapExports(stickySidebar);
exports['default'] = stickySidebar$1;
exports.__moduleExports = stickySidebar;
Object.defineProperty(exports, '__esModule', {
value: true
});
});
/***/ }),
/***/ "./node_modules/direction-reveal/src/scripts/direction-reveal-umd.js":
/*!***************************************************************************!*\
!*** ./node_modules/direction-reveal/src/scripts/direction-reveal-umd.js ***!
\***************************************************************************/
/***/ (function(module, exports) {
var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;(function (global, factory) {
if (true) {
!(__WEBPACK_AMD_DEFINE_ARRAY__ = [exports], __WEBPACK_AMD_DEFINE_FACTORY__ = (factory),
__WEBPACK_AMD_DEFINE_RESULT__ = (typeof __WEBPACK_AMD_DEFINE_FACTORY__ === 'function' ?
(__WEBPACK_AMD_DEFINE_FACTORY__.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__)) : __WEBPACK_AMD_DEFINE_FACTORY__),
__WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
} else { var mod; }
})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports) {
"use strict";
Object.defineProperty(_exports, "__esModule", {
value: true
});
_exports["default"] = void 0;
/**
Direction aware content reveals.
@param {Object} object - Container for all options.
@param {string} selector - Container element selector.
@param {string} itemSelector - Item element selector.
@param {string} animationName - Animation CSS class.
@param {string} animationPostfixEnter - Animation CSS class postfix for enter event.
@param {string} animationPostfixLeave - Animation CSS class postfix for leave event.
@param {boolean} enableTouch - Adds touch event to show content on first click then follow link on the second click.
@param {integer} touchThreshold - Touch length must be less than this to trigger reveal which prevents the event triggering if user is scrolling.
*/
var DirectionReveal = function DirectionReveal() {
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
_ref$selector = _ref.selector,
selector = _ref$selector === void 0 ? '.direction-reveal' : _ref$selector,
_ref$itemSelector = _ref.itemSelector,
itemSelector = _ref$itemSelector === void 0 ? '.direction-reveal__card' : _ref$itemSelector,
_ref$animationName = _ref.animationName,
animationName = _ref$animationName === void 0 ? 'swing' : _ref$animationName,
_ref$animationPostfix = _ref.animationPostfixEnter,
animationPostfixEnter = _ref$animationPostfix === void 0 ? 'enter' : _ref$animationPostfix,
_ref$animationPostfix2 = _ref.animationPostfixLeave,
animationPostfixLeave = _ref$animationPostfix2 === void 0 ? 'leave' : _ref$animationPostfix2,
_ref$enableTouch = _ref.enableTouch,
enableTouch = _ref$enableTouch === void 0 ? true : _ref$enableTouch,
_ref$touchThreshold = _ref.touchThreshold,
touchThreshold = _ref$touchThreshold === void 0 ? 250 : _ref$touchThreshold;
var containers = document.querySelectorAll(selector);
var touchStart; // Utilities - https://hackernoon.com/rethinking-javascript-eliminate-the-switch-statement-for-better-code-5c81c044716d
var addEventListenerMulti = function addEventListenerMulti(element, events, fn) {
events.forEach(function (e) {
return element.addEventListener(e, fn);
});
};
var switchCase = function switchCase(cases) {
return function (defaultCase) {
return function (key) {
return key in cases ? cases[key] : defaultCase;
};
};
};
var fireEvent = function fireEvent(item, eventName, eventDetail) {
var event = new CustomEvent(eventName, {
bubbles: true,
detail: eventDetail
});
item.dispatchEvent(event);
}; // Get direction data based on element and pointer positions
var getDirection = function getDirection(e, item) {
// Width and height of current item
var w = item.offsetWidth;
var h = item.offsetHeight;
var position = getPosition(item); // Calculate the x/y value of the pointer entering/exiting, relative to the center of the item.
var x = (e.pageX - position.x - w / 2) * (w > h ? h / w : 1);
var y = (e.pageY - position.y - h / 2) * (h > w ? w / h : 1); // Calculate the angle the pointer entered/exited and convert to clockwise format (top/right/bottom/left = 0/1/2/3). - https://stackoverflow.com/a/3647634
var d = Math.round(Math.atan2(y, x) / 1.57079633 + 5) % 4; // console.table([x, y, w, h, e.pageX, e.pageY, item.offsetLeft, item.offsetTop, position.x, position.y]);
return d;
}; // Gets an elements position - https://www.kirupa.com/html5/get_element_position_using_javascript.htm
var getPosition = function getPosition(el) {
var xPos = 0;
var yPos = 0;
while (el) {
xPos += el.offsetLeft + el.clientLeft;
yPos += el.offsetTop + el.clientTop;
el = el.offsetParent;
}
return {
x: xPos,
y: yPos
};
};
var translateDirection = switchCase({
0: 'top',
1: 'right',
2: 'bottom',
3: 'left'
})('top'); // Updates direction and toggles classes
var updateDirection = function updateDirection(e, action) {
var currentItem = e.currentTarget;
var direction = getDirection(e, currentItem);
var directionString = translateDirection(direction); // Remove current animation classes and adds current action/direction.
var currentCssClasses = currentItem.className.split(' ');
var filteredCssClasses = currentCssClasses.filter(function (cssClass) {
return !cssClass.startsWith(animationName);
}).join(' ');
currentItem.className = filteredCssClasses;
currentItem.classList.add("".concat(animationName, "--").concat(action, "-").concat(directionString));
var eventDetail = {
action: action,
direction: directionString
};
fireEvent(currentItem, 'directionChange', eventDetail);
};
var bindEvents = function bindEvents(containerItem) {
var items = containerItem.querySelectorAll(itemSelector);
items.forEach(function (item) {
addEventListenerMulti(item, ['mouseenter', 'focus'], function (e) {
updateDirection(e, animationPostfixEnter);
});
addEventListenerMulti(item, ['mouseleave', 'blur'], function (e) {
updateDirection(e, animationPostfixLeave);
});
if (enableTouch) {
item.addEventListener('touchstart', function (e) {
touchStart = +new Date();
}, {
passive: true
});
item.addEventListener('touchend', function (e) {
var touchTime = +new Date() - touchStart;
if (touchTime < touchThreshold && !item.className.includes("".concat(animationName, "--").concat(animationPostfixEnter))) {
e.preventDefault();
resetVisible(e, items, updateDirection(e, animationPostfixEnter));
}
});
}
});
};
var resetVisible = function resetVisible(e, items, callback) {
items.forEach(function (item) {
var currentCssClasses = item.className;
if (currentCssClasses.includes("".concat(animationName, "--").concat(animationPostfixEnter)) && item !== e.currentTarget) {
item.className = currentCssClasses.replace("".concat(animationName, "--").concat(animationPostfixEnter), "".concat(animationName, "--").concat(animationPostfixLeave));
}
});
callback;
};
var init = function init() {
if (containers.length) {
containers.forEach(function (containerItem) {
bindEvents(containerItem);
});
} else {
return;
}
}; // Self init
init(); // Reveal API
return {
init: init
};
};
var _default = DirectionReveal;
_exports["default"] = _default;
});
/***/ }),
/***/ "./node_modules/normalize.css/normalize.css":
/*!**************************************************!*\
!*** ./node_modules/normalize.css/normalize.css ***!
\**************************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
"use strict";
__webpack_require__.r(__webpack_exports__);
// extracted by mini-css-extract-plugin
/***/ }),
/***/ "./src/sass/cat.scss":
/*!***************************!*\
!*** ./src/sass/cat.scss ***!
\***************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
"use strict";
__webpack_require__.r(__webpack_exports__);
// extracted by mini-css-extract-plugin
/***/ }),
/***/ "./src/sass/front-end-bunde.scss":
/*!***************************************!*\
!*** ./src/sass/front-end-bunde.scss ***!
\***************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
"use strict";
__webpack_require__.r(__webpack_exports__);
// extracted by mini-css-extract-plugin
/***/ }),
/***/ "./src/sass/insta.scss":
/*!*****************************!*\
!*** ./src/sass/insta.scss ***!
\*****************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
"use strict";
__webpack_require__.r(__webpack_exports__);
// extracted by mini-css-extract-plugin
/***/ }),
/***/ "./src/sass/jBox.scss":
/*!****************************!*\
!*** ./src/sass/jBox.scss ***!
\****************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
"use strict";
__webpack_require__.r(__webpack_exports__);
// extracted by mini-css-extract-plugin
/***/ }),
/***/ "./node_modules/smoothscroll-anchor-polyfill/dist/index.mjs":
/*!******************************************************************!*\
!*** ./node_modules/smoothscroll-anchor-polyfill/dist/index.mjs ***!
\******************************************************************/
/***/ ((__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) => {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "default": () => (/* binding */ defaultExport),
/* harmony export */ "destroy": () => (/* binding */ destroy),
/* harmony export */ "polyfill": () => (/* binding */ polyfill)
/* harmony export */ });
/** @license MIT smoothscroll-anchor-polyfill@1.3.4 (c) 2021 Jonas Kuske */
// @ts-check
/**
* @typedef {Object} GlobalFlag
* @prop {boolean} [__forceSmoothscrollAnchorPolyfill__]
* **DEPRECATED**: use `polyfill({ force: boolean })`
*
* @typedef {typeof globalThis & Window & GlobalFlag} WindowWithFlag
*/
/***/
const isBrowser = typeof window !== 'undefined';
const w = isBrowser &&
/** @type {WindowWithFlag} */
window;
const d = isBrowser && document;
const docEl = isBrowser && d.documentElement;
const mockEl = isBrowser && d.createElement('a');
const hasNativeSupport = () => isBrowser && 'scrollBehavior' in mockEl;
/**
* @param {HTMLElement} el
* @returns {el is HTMLAnchorElement}
*/
const isAnchor = el => /^a$/i.test(el.tagName);
/**
* Check if an element is an anchor pointing to a target on the current page
* @param {HTMLAnchorElement} anchor
*/
const targetsLocalElement = anchor => {
// False if element isn't "a" or href has no #fragment
if (!/#/.test(anchor.href)) return false; // Fix bug in IE9 where anchor.pathname misses leading slash
let pathname =
/** @type {HTMLAnchorElement} */
anchor.pathname;
if (pathname[0] !== '/') pathname = '/' + pathname; // False if target isn't current page
if (anchor.hostname !== location.hostname || pathname !== location.pathname) return false; // False if anchor targets a ?query that is different from the current one
// e.g. /?page=1 → /?page=2#content
if (anchor.search && anchor.search !== location.search) return false;
return true;
};
/**
* @param {HTMLElement} el
* @returns {?HTMLAnchorElement} The found element or null
*/
const getAnchor = el => {
if (isAnchor(el) && targetsLocalElement(el)) return el;
return el.parentElement ? getAnchor(el.parentElement) : null;
};
/**
* Returns the element whose id matches the hash or
* document.body if the hash is "#top" or "" (empty string)
* @param {string} hash
*/
const getScrollTarget = hash => {
if (typeof hash !== 'string') return null;
try {
hash = decodeURIComponent(hash); // "#%F0%9F%91%8D%F0%9F%8F%BB" -> "#👍🏻"
} catch (_unused) {} // Retrieve target if an id is specified in the hash, otherwise use body.
// If hash is "#top" and no target with id "top" was found, also use body
// See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-href
let target = hash ? d.getElementById(hash.slice(1)) : d.body;
if (hash === '#top' && !target) target = d.body;
return target;
};
/**
* Focuses an element, if it's not focused after the first try,
* allow focusing by adjusting tabIndex and retry
* @param {HTMLElement} el
*/
const focusElement = el => {
const focusOptions = {
preventScroll: true
};
el.focus(focusOptions);
if (d.activeElement !== el) {
const prevTabIndex = el.getAttribute('tabindex');
el.setAttribute('tabindex', '-1');
if (getComputedStyle(el).outlineStyle === 'none') {
const prevOutline = el.style.outlineStyle;
el.style.outlineStyle = 'none';
el.addEventListener('blur', function undoOutlineChange() {
el.style.outlineStyle = prevOutline || '';
prevTabIndex != null ? el.setAttribute('tabindex', prevTabIndex) : el.removeAttribute('tabindex');
el.removeEventListener('blur', undoOutlineChange);
});
}
el.focus(focusOptions);
}
}; // Stores the setTimeout id of pending focus changes, allows aborting them
let pendingFocusChange; // Check if browser supports focus without automatic scrolling (preventScroll)
let supportsPreventScroll = false;
if (isBrowser) {
try {
// Define getter for preventScroll to find out if the browser accesses it
const preppedFocusOption = Object.defineProperty({}, 'preventScroll', {
// eslint-disable-next-line getter-return
get() {
supportsPreventScroll = true;
}
}); // Trigger focus – if browser uses preventScroll the const will be set to true
mockEl.focus(preppedFocusOption);
} catch (_unused2) {}
}
/**
* Scrolls to a given element or to the top if the given element
* is document.body, then focuses the element
* @param {HTMLElement} target
*/
const triggerSmoothscroll = target => {
// Clear potential pending focus change triggered by a previous scroll
if (!supportsPreventScroll) clearTimeout(pendingFocusChange); // Use JS scroll APIs to scroll to top (if target is body) or to the element
// This allows polyfills for these APIs to do their smooth scrolling magic
const scrollTop = target === d.body;
if (scrollTop) w.scroll({
top: 0,
left: 0,
behavior: 'smooth'
});else target.scrollIntoView({
behavior: 'smooth',
block: 'start'
}); // If the browser supports preventScroll: immediately focus the target
// Otherwise schedule the focus so the smoothscroll isn't interrupted
if (supportsPreventScroll) focusElement(target);else pendingFocusChange = setTimeout(focusElement.bind(null, target), 450);
};
/**
* Returns true if scroll-behavior: smooth is set and not overwritten
* by a higher-specifity declaration, else returns false
*/
const shouldSmoothscroll = () => {
// Regex to extract the value following the scroll-behavior property name
const extractValue = /scroll-behavior:[\s]*([^;"']+)/;
const docElStyle = getComputedStyle(docEl); // Values to check for set scroll-behavior in order of priority/specificity
const valuesToCheck = [// Priority 1: behavior assigned to style property
// Allows toggling smoothscroll from JS (docEl.style.scrollBehavior = ...)
docEl.style.scrollBehavior, // Priority 2: behavior specified inline in style attribute
(extractValue.exec(docEl.getAttribute('style')) || [])[1], // Priority 3: custom property
// Behaves like regular CSS, e.g. allows using media queries
docElStyle.getPropertyValue('--scroll-behavior'), // Priority 4: behavior specified in fontFamily
// Same use case as priority 3, but supports legacy browsers without CSS vars
(extractValue.exec(docElStyle.fontFamily) || [])[1]]; // Loop over values in specified order, return once a valid value is found
for (var i = 0; i < valuesToCheck.length; i++) {
const value = valuesToCheck[i] && valuesToCheck[i].trim();
if (/^smooth$/.test(value)) return true;
if (/^(initial|inherit|auto|unset)$/.test(value)) return false;
} // No value found? Return false, no set value = no smoothscroll :(
return false;
}; // @ts-check
const defaultExport = {
polyfill,
destroy
};
/**
* Starts the polyfill by attaching the neccessary EventListeners
*
* Bails out if scrollBehavior is natively supported and the force flag
* isn't set on the options argument or globally on window
* @param {PolyfillOptions} [opts] Options for invoking the polyfill
*
* @typedef {Object} PolyfillOptions
* @prop {boolean} [force] Enable despite native support, overrides global flag
*/
function polyfill(opts = {}) {
destroy(); // Remove previous listeners
if (isBrowser) {
const globalFlag = w.__forceSmoothscrollAnchorPolyfill__;
const force = typeof opts.force === 'boolean' ? opts.force : globalFlag; // Abort if smoothscroll has native support and force flag isn't set
if (hasNativeSupport() && !force) return;
d.addEventListener('click', handleClick, false);
d.addEventListener('scroll', trackScrollPositions);
w.addEventListener('hashchange', handleHashChange);
}
return defaultExport;
}
/** Stops the polyfill by removing all EventListeners */
function destroy() {
if (isBrowser) {
d.removeEventListener('click', handleClick, false);
d.removeEventListener('scroll', trackScrollPositions);
w.removeEventListener('hashchange', handleHashChange);
}
return defaultExport;
}
/**
* Checks if the clicked target is an anchor pointing to a local element.
* If so, prevents default behavior and handles the scroll using the
* native JavaScript scroll APIs so smoothscroll-polyfill applies
* @param {MouseEvent} evt
*/
function handleClick(evt) {
const notPrimaryClick = evt.metaKey || evt.ctrlKey || evt.shiftKey || evt.button !== 0;
if (evt.defaultPrevented || notPrimaryClick) return; // scroll-behavior not set to smooth? Bail out, let browser handle it
if (!shouldSmoothscroll()) return; // Check the DOM from the click target upwards if a local anchor was clicked
const anchor = getAnchor(
/** @type {HTMLElement} */
evt.target);
if (!anchor) return; // Find the element targeted by the hash
const target = getScrollTarget(anchor.hash);
if (target) {
// Prevent default browser behavior to avoid a jump to the anchor target
evt.preventDefault(); // Trigger the smooth scroll
triggerSmoothscroll(target); // Append the hash to the URL
if (history.pushState) history.pushState(null, d.title, anchor.href);
}
} // To enable smooth scrolling on hashchange, we need to immediately restore
// the scroll pos after a hashchange changed it, so we track it constantly.
// Some browsers don't trigger a scroll event before the hashchange,
// so to undo, the position from last scroll is the one we need to go back to.
// In others (e.g. IE) the scroll listener is triggered again before the
// hashchange occurs and the last reported position is already the new one
// updated by the hashchange – we need the second last to undo there.
// Because of this we don't track just the last, but the last two positions.
const lastTwoScrollPos = [];
/** Returns the scroll offset towards the top */
const getScrollTop = () => docEl.scrollTop || d.body.scrollTop;
/**
* Tries to undo the automatic, instant scroll caused by a hashchange
* and instead scrolls smoothly to the new hash target
*/
function handleHashChange() {
// scroll-behavior not set to smooth or body not parsed yet? Abort
if (!d.body || !shouldSmoothscroll()) return;
const target = getScrollTarget(location.hash);
if (!target) return; // If the position last reported by the scroll listener is the same as the
// current one caused by a hashchange, go back to second last – else last
const currentPos = getScrollTop();
const top = lastTwoScrollPos[lastTwoScrollPos[1] === currentPos ? 0 : 1]; // @ts-ignore
// Undo the scroll caused by the hashchange...
// Using {behavior: 'instant'} even though it's not in the spec anymore as
// Blink & Gecko support it – once an engine with native support doesn't,
// we need to disable scroll-behavior during scroll reset, then restore
w.scroll({
top,
behavior: 'instant'
}); // ...and instead smoothscroll to the target
triggerSmoothscroll(target);
}
/** Update the last two scroll positions */
function trackScrollPositions() {
if (!d.body) return; // Body not parsed yet? Abort
lastTwoScrollPos[0] = lastTwoScrollPos[1];
lastTwoScrollPos[1] = getScrollTop();
}
polyfill();
/***/ }),
/***/ "./theme.config.json":
/*!***************************!*\
!*** ./theme.config.json ***!
\***************************/
/***/ ((module) => {
"use strict";
module.exports = JSON.parse('{"name":"\'aspace\'","slug":"\'aspace\'","server":"aspace.local","ssl":false,"google_fonts":["Roboto:400,400i,700,700i","Roboto Slab:400,700"],"menu_icon":"","sidebar_icon":"","submenu_arrow_icon":"","comment_icon":"","search_menu_item":false,"dev_admin_bar_color":"#156288","admin_access_capability":"manage_options","load_custom_icons":false,"mobile_menu_type":"app-menu","logo_position":"logo-left","site_top_container":"container","default_acf_header_block":["post","page"]}');
/***/ })
/******/ });
/************************************************************************/
/******/ // The module cache
/******/ var __webpack_module_cache__ = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
/******/ var cachedModule = __webpack_module_cache__[moduleId];
/******/ if (cachedModule !== undefined) {
/******/ return cachedModule.exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = __webpack_module_cache__[moduleId] = {
/******/ // no module.id needed
/******/ // no module.loaded needed
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ __webpack_modules__[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/************************************************************************/
/******/ /* webpack/runtime/compat get default export */
/******/ (() => {
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = (module) => {
/******/ var getter = module && module.__esModule ?
/******/ () => (module['default']) :
/******/ () => (module);
/******/ __webpack_require__.d(getter, { a: getter });
/******/ return getter;
/******/ };
/******/ })();
/******/
/******/ /* webpack/runtime/define property getters */
/******/ (() => {
/******/ // define getter functions for harmony exports
/******/ __webpack_require__.d = (exports, definition) => {
/******/ for(var key in definition) {
/******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
/******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
/******/ }
/******/ }
/******/ };
/******/ })();
/******/
/******/ /* webpack/runtime/global */
/******/ (() => {
/******/ __webpack_require__.g = (function() {
/******/ if (typeof globalThis === 'object') return globalThis;
/******/ try {
/******/ return this || new Function('return this')();
/******/ } catch (e) {
/******/ if (typeof window === 'object') return window;
/******/ }
/******/ })();
/******/ })();
/******/
/******/ /* webpack/runtime/hasOwnProperty shorthand */
/******/ (() => {
/******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
/******/ })();
/******/
/******/ /* webpack/runtime/make namespace object */
/******/ (() => {
/******/ // define __esModule on exports
/******/ __webpack_require__.r = (exports) => {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/ })();
/******/
/************************************************************************/
var __webpack_exports__ = {};
// This entry need to be wrapped in an IIFE because it need to be in strict mode.
(() => {
"use strict";
/*!**********************!*\
!*** ./src/index.js ***!
\**********************/
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var normalize_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! normalize.css */ "./node_modules/normalize.css/normalize.css");
/* harmony import */ var smoothscroll_anchor_polyfill__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! smoothscroll-anchor-polyfill */ "./node_modules/smoothscroll-anchor-polyfill/dist/index.mjs");
/* harmony import */ var direction_reveal__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! direction-reveal */ "./node_modules/direction-reveal/src/scripts/direction-reveal-umd.js");
/* harmony import */ var direction_reveal__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(direction_reveal__WEBPACK_IMPORTED_MODULE_2__);
/* harmony import */ var _sass_front_end_bunde_scss__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./sass/front-end-bunde.scss */ "./src/sass/front-end-bunde.scss");
/* harmony import */ var _sass_jBox_scss__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./sass/jBox.scss */ "./src/sass/jBox.scss");
/* harmony import */ var _sass_insta_scss__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./sass/insta.scss */ "./src/sass/insta.scss");
/* harmony import */ var _sass_cat_scss__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./sass/cat.scss */ "./src/sass/cat.scss");
/* harmony import */ var _js_core_events__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./js/core/events */ "./src/js/core/events.js");
/* harmony import */ var _js_core_objectfitFallback__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./js/core/objectfitFallback */ "./src/js/core/objectfitFallback.js");
/* harmony import */ var _js_core_objectfitFallback__WEBPACK_IMPORTED_MODULE_8___default = /*#__PURE__*/__webpack_require__.n(_js_core_objectfitFallback__WEBPACK_IMPORTED_MODULE_8__);
/* harmony import */ var _js_core_sidebar__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./js/core/sidebar */ "./src/js/core/sidebar.js");
/* harmony import */ var _js_core_sidebar__WEBPACK_IMPORTED_MODULE_9___default = /*#__PURE__*/__webpack_require__.n(_js_core_sidebar__WEBPACK_IMPORTED_MODULE_9__);
/* harmony import */ var _js_core_navigation__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./js/core/navigation */ "./src/js/core/navigation.js");
/* harmony import */ var _js_core_panel_left__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./js/core/panel-left */ "./src/js/core/panel-left.js");
/* harmony import */ var _js_core_panel_left__WEBPACK_IMPORTED_MODULE_11___default = /*#__PURE__*/__webpack_require__.n(_js_core_panel_left__WEBPACK_IMPORTED_MODULE_11__);
/* harmony import */ var _js_core_smooth_scroll__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./js/core/smooth-scroll */ "./src/js/core/smooth-scroll.js");
/* harmony import */ var _js_core_smooth_scroll__WEBPACK_IMPORTED_MODULE_12___default = /*#__PURE__*/__webpack_require__.n(_js_core_smooth_scroll__WEBPACK_IMPORTED_MODULE_12__);
/* harmony import */ var _js_core_scrollMagic__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./js/core/scrollMagic */ "./src/js/core/scrollMagic.js");
/* harmony import */ var _js_core_scrollMagic__WEBPACK_IMPORTED_MODULE_13___default = /*#__PURE__*/__webpack_require__.n(_js_core_scrollMagic__WEBPACK_IMPORTED_MODULE_13__);
/* harmony import */ var _js_core_sticky_sidebar__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ./js/core/sticky-sidebar */ "./src/js/core/sticky-sidebar.js");
/* harmony import */ var _js_core_sticky_sidebar__WEBPACK_IMPORTED_MODULE_14___default = /*#__PURE__*/__webpack_require__.n(_js_core_sticky_sidebar__WEBPACK_IMPORTED_MODULE_14__);
/* harmony import */ var _js_core_scrollProgress__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ./js/core/scrollProgress */ "./src/js/core/scrollProgress.js");
/* harmony import */ var _js_core_scrollProgress__WEBPACK_IMPORTED_MODULE_15___default = /*#__PURE__*/__webpack_require__.n(_js_core_scrollProgress__WEBPACK_IMPORTED_MODULE_15__);
/* harmony import */ var _js_core_direction_reveal__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ./js/core/direction-reveal */ "./src/js/core/direction-reveal.js");
/* harmony import */ var _inc_core_core_js__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ../inc/core/_core.js */ "./inc/core/_core.js");
/* harmony import */ var _inc_core_core_js__WEBPACK_IMPORTED_MODULE_17___default = /*#__PURE__*/__webpack_require__.n(_inc_core_core_js__WEBPACK_IMPORTED_MODULE_17__);
/* harmony import */ var _inc_scrollmagic_scrollmagic_js__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! ../inc/scrollmagic/_scrollmagic.js */ "./inc/scrollmagic/_scrollmagic.js");
/* harmony import */ var _inc_scrollmagic_scrollmagic_js__WEBPACK_IMPORTED_MODULE_18___default = /*#__PURE__*/__webpack_require__.n(_inc_scrollmagic_scrollmagic_js__WEBPACK_IMPORTED_MODULE_18__);
//ADDING SASS
//add your sass files easilt by starting them with an underscore inside the inc or parts folders
// You can also manually add a regular file to the front end bundle so you have access to all scss variables and classes
//adding a separate scss here will work, but you wont have access to scss variables or @use, or @extend
//js from src
/* import "./js/core/lib/application"
import "./js/core/lib/request"
import "./js/core/lib/response"
import "./js/core/lib/utils"
import "./js/core/lib/view" */
//import "./js/core/responsive-iframe"
//add all underscored js files from inc and parts
//import "./parts/global/_browser_update.js";
})();
/******/ })()
;