Initial commit: Atomaste website
This commit is contained in:
File diff suppressed because one or more lines are too long
@@ -0,0 +1,80 @@
|
||||
jQuery(document).ready(function($) {
|
||||
if( rb_localize_data.animation ){
|
||||
new WOW().init();
|
||||
}
|
||||
|
||||
var winWidth = $(window).width();
|
||||
|
||||
$(".skills").addClass("active");
|
||||
$(".skills .skill .skill-bar span").each(function() {
|
||||
$(this).animate({
|
||||
"width": $(this).parent().attr("data-bar") + "%"
|
||||
}, 1000);
|
||||
$(this).append('<b>' + $(this).parent().attr("data-bar") + '%</b>');
|
||||
});
|
||||
setTimeout(function() {
|
||||
$(".skills .skill .skill-bar span b").animate({ "opacity": "1" }, 1000);
|
||||
}, 2000);
|
||||
|
||||
$('<button class="submenu-toggle"><i class="fa fa-angle-down"></i></button>').insertAfter($('.mobile-navigation ul .menu-item-has-children > a'));
|
||||
$('.mobile-navigation ul li .submenu-toggle').on( 'click', function() {
|
||||
$(this).next().slideToggle();
|
||||
$(this).toggleClass('active');
|
||||
});
|
||||
|
||||
$('#primary-toggle-button').on( 'click', function() {
|
||||
$('.responsive-menu-holder').slideToggle();
|
||||
$('.site-header .header-t').toggleClass("bg-color");
|
||||
$('#primary-toggle-button').css("display", "none");
|
||||
});
|
||||
|
||||
$('.responsive-menu-holder .mobile-navigation .close-main-nav-toggle').on( 'click', function() {
|
||||
$('.responsive-menu-holder').slideToggle();
|
||||
$('.site-header .header-t').toggleClass("bg-color");
|
||||
$('#primary-toggle-button').css("display", "block");
|
||||
});
|
||||
|
||||
//custom scroll bar
|
||||
if( $('.widget_rrtc_description_widget').length ){
|
||||
$('.description').each(function(){
|
||||
var ps = new PerfectScrollbar($(this)[0]);
|
||||
});
|
||||
}
|
||||
|
||||
if( $('.filter-grid div.element-item').length > 0 ){
|
||||
var origin_left;
|
||||
if( rb_localize_data.rtl == '1' ){
|
||||
origin_left = false;
|
||||
}else{
|
||||
origin_left = true;
|
||||
}
|
||||
|
||||
// init Isotope
|
||||
var $grid = $('.filter-grid').imagesLoaded( function(){
|
||||
|
||||
$grid.isotope({
|
||||
isOriginLeft: origin_left,
|
||||
});
|
||||
|
||||
// filter items on button click
|
||||
$('.filter-button-group').on( 'click', 'button', function() {
|
||||
$('.filter-button-group button').removeClass('is-checked');
|
||||
$(this).addClass('is-checked');
|
||||
var filterValue = $(this).attr('data-filter');
|
||||
$grid.isotope({ filter: filterValue });
|
||||
});
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
//accessible menu in IE
|
||||
var windowWidth = $(window).width();
|
||||
if(windowWidth > 1024){
|
||||
$(".main-navigation ul li a").on( 'focus', function() {
|
||||
$(this).parents("li").addClass("hover");
|
||||
}).on( 'blur', function() {
|
||||
$(this).parents("li").removeClass("hover");
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
@@ -0,0 +1,42 @@
|
||||
/**
|
||||
* File customizer.js.
|
||||
*
|
||||
* Theme Customizer enhancements for a better user experience.
|
||||
*
|
||||
* Contains handlers to make Theme Customizer preview reload changes asynchronously.
|
||||
*/
|
||||
|
||||
( function( $ ) {
|
||||
|
||||
// Site title and description.
|
||||
wp.customize( 'blogname', function( value ) {
|
||||
value.bind( function( to ) {
|
||||
$( '.site-title a' ).text( to );
|
||||
} );
|
||||
} );
|
||||
wp.customize( 'blogdescription', function( value ) {
|
||||
value.bind( function( to ) {
|
||||
$( '.site-description' ).text( to );
|
||||
} );
|
||||
} );
|
||||
|
||||
// Header text color.
|
||||
wp.customize( 'header_textcolor', function( value ) {
|
||||
value.bind( function( to ) {
|
||||
if ( 'blank' === to ) {
|
||||
$( '.site-title, .site-description' ).css( {
|
||||
'clip': 'rect(1px, 1px, 1px, 1px)',
|
||||
'position': 'absolute'
|
||||
} );
|
||||
} else {
|
||||
$( '.site-title, .site-description' ).css( {
|
||||
'clip': 'auto',
|
||||
'position': 'relative'
|
||||
} );
|
||||
$( '.site-title a, .site-description' ).css( {
|
||||
'color': to
|
||||
} );
|
||||
}
|
||||
} );
|
||||
} );
|
||||
} )( jQuery );
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,475 @@
|
||||
var rarabusiness = rarabusiness || {};
|
||||
|
||||
// event "polyfill"
|
||||
rarabusiness.createEvent = function( eventName ) {
|
||||
var event;
|
||||
if ( typeof window.Event === 'function' ) {
|
||||
event = new Event( eventName );
|
||||
} else {
|
||||
event = document.createEvent( 'Event' );
|
||||
event.initEvent( eventName, true, false );
|
||||
}
|
||||
return event;
|
||||
};
|
||||
|
||||
/* -----------------------------------------------------------------------------------------------
|
||||
Cover Modals
|
||||
--------------------------------------------------------------------------------------------------- */
|
||||
|
||||
rarabusiness.coverModals = {
|
||||
|
||||
init: function() {
|
||||
if ( document.querySelector( '.cover-modal' ) ) {
|
||||
// Handle cover modals when they're toggled.
|
||||
this.onToggle();
|
||||
|
||||
// Close on escape key press.
|
||||
this.closeOnEscape();
|
||||
|
||||
// Hide and show modals before and after their animations have played out.
|
||||
this.hideAndShowModals();
|
||||
|
||||
this.keepFocusInModal();
|
||||
}
|
||||
},
|
||||
|
||||
// Handle cover modals when they're toggled.
|
||||
onToggle: function() {
|
||||
document.querySelectorAll( '.cover-modal' ).forEach( function( element ) {
|
||||
element.addEventListener( 'toggled', function( event ) {
|
||||
var modal = event.target,
|
||||
body = document.body;
|
||||
|
||||
if ( modal.classList.contains( 'active' ) ) {
|
||||
body.classList.add( 'showing-modal' );
|
||||
} else {
|
||||
body.classList.remove( 'showing-modal' );
|
||||
body.classList.add( 'hiding-modal' );
|
||||
|
||||
// Remove the hiding class after a delay, when animations have been run.
|
||||
setTimeout( function() {
|
||||
body.classList.remove( 'hiding-modal' );
|
||||
}, 500 );
|
||||
}
|
||||
} );
|
||||
} );
|
||||
},
|
||||
|
||||
// Close modal on escape key press.
|
||||
closeOnEscape: function() {
|
||||
document.addEventListener( 'keydown', function( event ) {
|
||||
if ( event.keyCode === 27 ) {
|
||||
event.preventDefault();
|
||||
document.querySelectorAll( '.cover-modal.active' ).forEach( function( element ) {
|
||||
this.untoggleModal( element );
|
||||
}.bind( this ) );
|
||||
}
|
||||
}.bind( this ) );
|
||||
},
|
||||
|
||||
// Hide and show modals before and after their animations have played out.
|
||||
hideAndShowModals: function() {
|
||||
var _doc = document,
|
||||
_win = window,
|
||||
modals = _doc.querySelectorAll( '.cover-modal' ),
|
||||
htmlStyle = _doc.documentElement.style,
|
||||
adminBar = _doc.querySelector( '#wpadminbar' );
|
||||
|
||||
function getAdminBarHeight( negativeValue ) {
|
||||
var height,
|
||||
currentScroll = _win.pageYOffset;
|
||||
|
||||
if ( adminBar ) {
|
||||
height = currentScroll + adminBar.getBoundingClientRect().height;
|
||||
|
||||
return negativeValue ? -height : height;
|
||||
}
|
||||
|
||||
return currentScroll === 0 ? 0 : -currentScroll;
|
||||
}
|
||||
|
||||
function htmlStyles() {
|
||||
var overflow = _win.innerHeight > _doc.documentElement.getBoundingClientRect().height;
|
||||
|
||||
return {
|
||||
'overflow-y': overflow ? 'hidden' : 'scroll',
|
||||
position: 'fixed',
|
||||
width: '100%',
|
||||
top: getAdminBarHeight( true ) + 'px',
|
||||
left: 0
|
||||
};
|
||||
}
|
||||
|
||||
// Show the modal.
|
||||
modals.forEach( function( modal ) {
|
||||
modal.addEventListener( 'toggle-target-before-inactive', function( event ) {
|
||||
var styles = htmlStyles(),
|
||||
offsetY = _win.pageYOffset,
|
||||
paddingTop = ( Math.abs( getAdminBarHeight() ) - offsetY ) + 'px',
|
||||
mQuery = _win.matchMedia( '(max-width: 600px)' );
|
||||
|
||||
if ( event.target !== modal ) {
|
||||
return;
|
||||
}
|
||||
|
||||
Object.keys( styles ).forEach( function( styleKey ) {
|
||||
htmlStyle.setProperty( styleKey, styles[ styleKey ] );
|
||||
} );
|
||||
|
||||
_win.rarabusiness.scrolled = parseInt( styles.top, 10 );
|
||||
|
||||
if ( adminBar ) {
|
||||
_doc.body.style.setProperty( 'padding-top', paddingTop );
|
||||
|
||||
if ( mQuery.matches ) {
|
||||
if ( offsetY >= getAdminBarHeight() ) {
|
||||
modal.style.setProperty( 'top', 0 );
|
||||
} else {
|
||||
modal.style.setProperty( 'top', ( getAdminBarHeight() - offsetY ) + 'px' );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
modal.classList.add( 'show-modal' );
|
||||
} );
|
||||
|
||||
// Hide the modal after a delay, so animations have time to play out.
|
||||
modal.addEventListener( 'toggle-target-after-inactive', function( event ) {
|
||||
if ( event.target !== modal ) {
|
||||
return;
|
||||
}
|
||||
|
||||
setTimeout( function() {
|
||||
var clickedEl = rarabusiness.toggles.clickedEl;
|
||||
|
||||
modal.classList.remove( 'show-modal' );
|
||||
|
||||
Object.keys( htmlStyles() ).forEach( function( styleKey ) {
|
||||
htmlStyle.removeProperty( styleKey );
|
||||
} );
|
||||
|
||||
if ( adminBar ) {
|
||||
_doc.body.style.removeProperty( 'padding-top' );
|
||||
modal.style.removeProperty( 'top' );
|
||||
}
|
||||
|
||||
if ( clickedEl !== false ) {
|
||||
clickedEl.focus();
|
||||
clickedEl = false;
|
||||
}
|
||||
|
||||
_win.scrollTo( 0, Math.abs( _win.rarabusiness.scrolled + getAdminBarHeight() ) );
|
||||
|
||||
_win.rarabusiness.scrolled = 0;
|
||||
}, 500 );
|
||||
} );
|
||||
} );
|
||||
},
|
||||
|
||||
// Untoggle a modal.
|
||||
untoggleModal: function( modal ) {
|
||||
var modalTargetClass,
|
||||
modalToggle = false;
|
||||
|
||||
// If the modal has specified the string (ID or class) used by toggles to target it, untoggle the toggles with that target string.
|
||||
// The modal-target-string must match the string toggles use to target the modal.
|
||||
if ( modal.dataset.modalTargetString ) {
|
||||
modalTargetClass = modal.dataset.modalTargetString;
|
||||
|
||||
modalToggle = document.querySelector( '*[data-toggle-target="' + modalTargetClass + '"]' );
|
||||
}
|
||||
|
||||
// If a modal toggle exists, trigger it so all of the toggle options are included.
|
||||
if ( modalToggle ) {
|
||||
modalToggle.click();
|
||||
|
||||
// If one doesn't exist, just hide the modal.
|
||||
} else {
|
||||
modal.classList.remove( 'active' );
|
||||
}
|
||||
},
|
||||
|
||||
keepFocusInModal: function() {
|
||||
var _doc = document;
|
||||
|
||||
_doc.addEventListener( 'keydown', function( event ) {
|
||||
var toggleTarget, modal, selectors, elements, menuType, bottomMenu, activeEl, lastEl, firstEl, tabKey, shiftKey,
|
||||
clickedEl = rarabusiness.toggles.clickedEl;
|
||||
|
||||
if ( clickedEl && _doc.body.classList.contains( 'showing-modal' ) ) {
|
||||
toggleTarget = clickedEl.dataset.toggleTarget;
|
||||
selectors = 'input, a, button';
|
||||
modal = _doc.querySelector( toggleTarget );
|
||||
|
||||
elements = modal.querySelectorAll( selectors );
|
||||
elements = Array.prototype.slice.call( elements );
|
||||
|
||||
if ( '.menu-modal' === toggleTarget ) {
|
||||
menuType = window.matchMedia( '(min-width: 768px)' ).matches;
|
||||
menuType = menuType ? '.expanded-menu' : '.mobile-menu';
|
||||
|
||||
elements = elements.filter( function( element ) {
|
||||
return null !== element.closest( menuType ) && null !== element.offsetParent;
|
||||
} );
|
||||
|
||||
elements.unshift( _doc.querySelector( '.close-nav-toggle' ) );
|
||||
|
||||
bottomMenu = _doc.querySelector( '.menu-bottom > nav' );
|
||||
|
||||
if ( bottomMenu ) {
|
||||
bottomMenu.querySelectorAll( selectors ).forEach( function( element ) {
|
||||
elements.push( element );
|
||||
} );
|
||||
}
|
||||
}
|
||||
|
||||
if ( '.main-menu-modal' === toggleTarget ) {
|
||||
menuType = window.matchMedia( '(min-width: 1025px)' ).matches;
|
||||
menuType = menuType ? '.expanded-menu' : '.mobile-menu';
|
||||
|
||||
elements = elements.filter( function( element ) {
|
||||
return null !== element.closest( menuType ) && null !== element.offsetParent;
|
||||
} );
|
||||
|
||||
elements.unshift( _doc.querySelector( '.close-main-nav-toggle' ) );
|
||||
|
||||
bottomMenu = _doc.querySelector( '.menu-bottom > nav' );
|
||||
|
||||
if ( bottomMenu ) {
|
||||
bottomMenu.querySelectorAll( selectors ).forEach( function( element ) {
|
||||
elements.push( element );
|
||||
} );
|
||||
}
|
||||
}
|
||||
|
||||
lastEl = elements[ elements.length - 1 ];
|
||||
firstEl = elements[0];
|
||||
activeEl = _doc.activeElement;
|
||||
tabKey = event.keyCode === 9;
|
||||
shiftKey = event.shiftKey;
|
||||
|
||||
if ( ! shiftKey && tabKey && lastEl === activeEl ) {
|
||||
event.preventDefault();
|
||||
firstEl.focus();
|
||||
}
|
||||
|
||||
if ( shiftKey && tabKey && firstEl === activeEl ) {
|
||||
event.preventDefault();
|
||||
lastEl.focus();
|
||||
}
|
||||
}
|
||||
} );
|
||||
}
|
||||
|
||||
}; // rarabusiness.coverModals
|
||||
|
||||
rarabusiness.modalMenu = {
|
||||
|
||||
init: function() {
|
||||
// If the current menu item is in a sub level, expand all the levels higher up on load.
|
||||
this.expandLevel();
|
||||
},
|
||||
|
||||
expandLevel: function() {
|
||||
var modalMenus = document.querySelectorAll( '.modal-menu' );
|
||||
|
||||
modalMenus.forEach( function( modalMenu ) {
|
||||
var activeMenuItem = modalMenu.querySelector( '.current-menu-item' );
|
||||
|
||||
if ( activeMenuItem ) {
|
||||
rarabusinessFindParents( activeMenuItem, 'li' ).forEach( function( element ) {
|
||||
var subMenuToggle = element.querySelector( '.submenu-toggle' );
|
||||
if ( subMenuToggle ) {
|
||||
rarabusiness.toggles.performToggle( subMenuToggle, true );
|
||||
}
|
||||
} );
|
||||
}
|
||||
} );
|
||||
},
|
||||
}; // rarabusiness.modalMenu
|
||||
|
||||
rarabusiness.toggles = {
|
||||
|
||||
clickedEl: false,
|
||||
|
||||
init: function() {
|
||||
// Do the toggle.
|
||||
this.toggle();
|
||||
},
|
||||
|
||||
performToggle: function( element, instantly ) {
|
||||
var target, timeOutTime, classToToggle,
|
||||
self = this,
|
||||
_doc = document,
|
||||
// Get our targets.
|
||||
toggle = element,
|
||||
targetString = toggle.dataset.toggleTarget,
|
||||
activeClass = 'active';
|
||||
|
||||
// Elements to focus after modals are closed.
|
||||
if ( ! _doc.querySelectorAll( '.show-modal' ).length ) {
|
||||
self.clickedEl = _doc.activeElement;
|
||||
}
|
||||
|
||||
if ( targetString === 'next' ) {
|
||||
target = toggle.nextSibling;
|
||||
} else {
|
||||
target = _doc.querySelector( targetString );
|
||||
}
|
||||
|
||||
// Trigger events on the toggle targets before they are toggled.
|
||||
if ( target.classList.contains( activeClass ) ) {
|
||||
target.dispatchEvent( rarabusiness.createEvent( 'toggle-target-before-active' ) );
|
||||
} else {
|
||||
target.dispatchEvent( rarabusiness.createEvent( 'toggle-target-before-inactive' ) );
|
||||
}
|
||||
|
||||
// Get the class to toggle, if specified.
|
||||
classToToggle = toggle.dataset.classToToggle ? toggle.dataset.classToToggle : activeClass;
|
||||
|
||||
// For cover modals, set a short timeout duration so the class animations have time to play out.
|
||||
timeOutTime = 0;
|
||||
|
||||
if ( target.classList.contains( 'cover-modal' ) ) {
|
||||
timeOutTime = 10;
|
||||
}
|
||||
|
||||
setTimeout( function() {
|
||||
var focusElement,
|
||||
subMenued = target.classList.contains( 'sub-menu' ),
|
||||
newTarget = subMenued ? toggle.closest( '.menu-item' ).querySelector( '.sub-menu' ) : target,
|
||||
duration = toggle.dataset.toggleDuration;
|
||||
|
||||
// Toggle the target of the clicked toggle.
|
||||
if ( toggle.dataset.toggleType === 'slidetoggle' && ! instantly && duration !== '0' ) {
|
||||
rarabusinessMenuToggle( newTarget, duration );
|
||||
} else {
|
||||
newTarget.classList.toggle( classToToggle );
|
||||
}
|
||||
|
||||
// If the toggle target is 'next', only give the clicked toggle the active class.
|
||||
if ( targetString === 'next' ) {
|
||||
toggle.classList.toggle( activeClass );
|
||||
} else if ( target.classList.contains( 'sub-menu' ) ) {
|
||||
toggle.classList.toggle( activeClass );
|
||||
} else {
|
||||
// If not, toggle all toggles with this toggle target.
|
||||
_doc.querySelector( '*[data-toggle-target="' + targetString + '"]' ).classList.toggle( activeClass );
|
||||
}
|
||||
|
||||
// Toggle aria-expanded on the toggle.
|
||||
rarabusinessToggleAttribute( toggle, 'aria-expanded', 'true', 'false' );
|
||||
|
||||
if ( self.clickedEl && -1 !== toggle.getAttribute( 'class' ).indexOf( 'close-' ) ) {
|
||||
rarabusinessToggleAttribute( self.clickedEl, 'aria-expanded', 'true', 'false' );
|
||||
}
|
||||
|
||||
// Toggle body class.
|
||||
if ( toggle.dataset.toggleBodyClass ) {
|
||||
_doc.body.classList.toggle( toggle.dataset.toggleBodyClass );
|
||||
}
|
||||
|
||||
// Check whether to set focus.
|
||||
if ( toggle.dataset.setFocus ) {
|
||||
focusElement = _doc.querySelector( toggle.dataset.setFocus );
|
||||
|
||||
if ( focusElement ) {
|
||||
if ( target.classList.contains( activeClass ) ) {
|
||||
focusElement.focus();
|
||||
} else {
|
||||
focusElement.blur();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Trigger the toggled event on the toggle target.
|
||||
target.dispatchEvent( rarabusiness.createEvent( 'toggled' ) );
|
||||
|
||||
// Trigger events on the toggle targets after they are toggled.
|
||||
if ( target.classList.contains( activeClass ) ) {
|
||||
target.dispatchEvent( rarabusiness.createEvent( 'toggle-target-after-active' ) );
|
||||
} else {
|
||||
target.dispatchEvent( rarabusiness.createEvent( 'toggle-target-after-inactive' ) );
|
||||
}
|
||||
}, timeOutTime );
|
||||
},
|
||||
|
||||
// Do the toggle.
|
||||
toggle: function() {
|
||||
var self = this;
|
||||
|
||||
document.querySelectorAll( '*[data-toggle-target]' ).forEach( function( element ) {
|
||||
element.addEventListener( 'click', function( event ) {
|
||||
event.preventDefault();
|
||||
self.performToggle( element );
|
||||
} );
|
||||
} );
|
||||
},
|
||||
|
||||
}; // rarabusiness.toggles
|
||||
|
||||
/**
|
||||
* Is the DOM ready?
|
||||
*
|
||||
* This implementation is coming from https://gomakethings.com/a-native-javascript-equivalent-of-jquerys-ready-method/
|
||||
*
|
||||
* @param {Function} fn Callback function to run.
|
||||
*/
|
||||
function rarabusinessDomReady( fn ) {
|
||||
if ( typeof fn !== 'function' ) {
|
||||
return;
|
||||
}
|
||||
|
||||
if ( document.readyState === 'interactive' || document.readyState === 'complete' ) {
|
||||
return fn();
|
||||
}
|
||||
|
||||
document.addEventListener( 'DOMContentLoaded', fn, false );
|
||||
}
|
||||
|
||||
rarabusinessDomReady( function() {
|
||||
rarabusiness.toggles.init(); // Handle toggles.
|
||||
rarabusiness.coverModals.init(); // Handle cover modals.
|
||||
} );
|
||||
|
||||
/* Toggle an attribute ----------------------- */
|
||||
|
||||
function rarabusinessToggleAttribute( element, attribute, trueVal, falseVal ) {
|
||||
if ( trueVal === undefined ) {
|
||||
trueVal = true;
|
||||
}
|
||||
if ( falseVal === undefined ) {
|
||||
falseVal = false;
|
||||
}
|
||||
if ( element.getAttribute( attribute ) !== trueVal ) {
|
||||
element.setAttribute( attribute, trueVal );
|
||||
} else {
|
||||
element.setAttribute( attribute, falseVal );
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Traverses the DOM up to find elements matching the query.
|
||||
*
|
||||
* @param {HTMLElement} target
|
||||
* @param {string} query
|
||||
* @return {NodeList} parents matching query
|
||||
*/
|
||||
function rarabusinessFindParents( target, query ) {
|
||||
var parents = [];
|
||||
|
||||
// Recursively go up the DOM adding matches to the parents array.
|
||||
function traverse( item ) {
|
||||
var parent = item.parentNode;
|
||||
if ( parent instanceof HTMLElement ) {
|
||||
if ( parent.matches( query ) ) {
|
||||
parents.push( parent );
|
||||
}
|
||||
traverse( parent );
|
||||
}
|
||||
}
|
||||
|
||||
traverse( target );
|
||||
|
||||
return parents;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@@ -0,0 +1,536 @@
|
||||
(function (global, factory) {
|
||||
if (typeof define === "function" && define.amd) {
|
||||
define(['module', 'exports'], factory);
|
||||
} else if (typeof exports !== "undefined") {
|
||||
factory(module, exports);
|
||||
} else {
|
||||
var mod = {
|
||||
exports: {}
|
||||
};
|
||||
factory(mod, mod.exports);
|
||||
global.WOW = mod.exports;
|
||||
}
|
||||
})(this, function (module, exports) {
|
||||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
|
||||
var _class, _temp;
|
||||
|
||||
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;
|
||||
};
|
||||
}();
|
||||
|
||||
function isIn(needle, haystack) {
|
||||
return haystack.indexOf(needle) >= 0;
|
||||
}
|
||||
|
||||
function extend(custom, defaults) {
|
||||
for (var key in defaults) {
|
||||
if (custom[key] == null) {
|
||||
var value = defaults[key];
|
||||
custom[key] = value;
|
||||
}
|
||||
}
|
||||
return custom;
|
||||
}
|
||||
|
||||
function isMobile(agent) {
|
||||
return (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(agent)
|
||||
);
|
||||
}
|
||||
|
||||
function createEvent(event) {
|
||||
var bubble = arguments.length <= 1 || arguments[1] === undefined ? false : arguments[1];
|
||||
var cancel = arguments.length <= 2 || arguments[2] === undefined ? false : arguments[2];
|
||||
var detail = arguments.length <= 3 || arguments[3] === undefined ? null : arguments[3];
|
||||
|
||||
var customEvent = void 0;
|
||||
if (document.createEvent != null) {
|
||||
// W3C DOM
|
||||
customEvent = document.createEvent('CustomEvent');
|
||||
customEvent.initCustomEvent(event, bubble, cancel, detail);
|
||||
} else if (document.createEventObject != null) {
|
||||
// IE DOM < 9
|
||||
customEvent = document.createEventObject();
|
||||
customEvent.eventType = event;
|
||||
} else {
|
||||
customEvent.eventName = event;
|
||||
}
|
||||
|
||||
return customEvent;
|
||||
}
|
||||
|
||||
function emitEvent(elem, event) {
|
||||
if (elem.dispatchEvent != null) {
|
||||
// W3C DOM
|
||||
elem.dispatchEvent(event);
|
||||
} else if (event in (elem != null)) {
|
||||
elem[event]();
|
||||
} else if ('on' + event in (elem != null)) {
|
||||
elem['on' + event]();
|
||||
}
|
||||
}
|
||||
|
||||
function addEvent(elem, event, fn) {
|
||||
if (elem.addEventListener != null) {
|
||||
// W3C DOM
|
||||
elem.addEventListener(event, fn, false);
|
||||
} else if (elem.attachEvent != null) {
|
||||
// IE DOM
|
||||
elem.attachEvent('on' + event, fn);
|
||||
} else {
|
||||
// fallback
|
||||
elem[event] = fn;
|
||||
}
|
||||
}
|
||||
|
||||
function removeEvent(elem, event, fn) {
|
||||
if (elem.removeEventListener != null) {
|
||||
// W3C DOM
|
||||
elem.removeEventListener(event, fn, false);
|
||||
} else if (elem.detachEvent != null) {
|
||||
// IE DOM
|
||||
elem.detachEvent('on' + event, fn);
|
||||
} else {
|
||||
// fallback
|
||||
delete elem[event];
|
||||
}
|
||||
}
|
||||
|
||||
function getInnerHeight() {
|
||||
if ('innerHeight' in window) {
|
||||
return window.innerHeight;
|
||||
}
|
||||
|
||||
return document.documentElement.clientHeight;
|
||||
}
|
||||
|
||||
// Minimalistic WeakMap shim, just in case.
|
||||
var WeakMap = window.WeakMap || window.MozWeakMap || function () {
|
||||
function WeakMap() {
|
||||
_classCallCheck(this, WeakMap);
|
||||
|
||||
this.keys = [];
|
||||
this.values = [];
|
||||
}
|
||||
|
||||
_createClass(WeakMap, [{
|
||||
key: 'get',
|
||||
value: function get(key) {
|
||||
for (var i = 0; i < this.keys.length; i++) {
|
||||
var item = this.keys[i];
|
||||
if (item === key) {
|
||||
return this.values[i];
|
||||
}
|
||||
}
|
||||
return undefined;
|
||||
}
|
||||
}, {
|
||||
key: 'set',
|
||||
value: function set(key, value) {
|
||||
for (var i = 0; i < this.keys.length; i++) {
|
||||
var item = this.keys[i];
|
||||
if (item === key) {
|
||||
this.values[i] = value;
|
||||
return this;
|
||||
}
|
||||
}
|
||||
this.keys.push(key);
|
||||
this.values.push(value);
|
||||
return this;
|
||||
}
|
||||
}]);
|
||||
|
||||
return WeakMap;
|
||||
}();
|
||||
|
||||
// Dummy MutationObserver, to avoid raising exceptions.
|
||||
var MutationObserver = window.MutationObserver || window.WebkitMutationObserver || window.MozMutationObserver || (_temp = _class = function () {
|
||||
function MutationObserver() {
|
||||
_classCallCheck(this, MutationObserver);
|
||||
|
||||
if (typeof console !== 'undefined' && console !== null) {
|
||||
console.warn('MutationObserver is not supported by your browser.');
|
||||
console.warn('WOW.js cannot detect dom mutations, please call .sync() after loading new content.');
|
||||
}
|
||||
}
|
||||
|
||||
_createClass(MutationObserver, [{
|
||||
key: 'observe',
|
||||
value: function observe() {}
|
||||
}]);
|
||||
|
||||
return MutationObserver;
|
||||
}(), _class.notSupported = true, _temp);
|
||||
|
||||
// getComputedStyle shim, from http://stackoverflow.com/a/21797294
|
||||
var getComputedStyle = window.getComputedStyle || function getComputedStyle(el) {
|
||||
var getComputedStyleRX = /(\-([a-z]){1})/g;
|
||||
return {
|
||||
getPropertyValue: function getPropertyValue(prop) {
|
||||
if (prop === 'float') {
|
||||
prop = 'styleFloat';
|
||||
}
|
||||
if (getComputedStyleRX.test(prop)) {
|
||||
prop.replace(getComputedStyleRX, function (_, _char) {
|
||||
return _char.toUpperCase();
|
||||
});
|
||||
}
|
||||
var currentStyle = el.currentStyle;
|
||||
|
||||
return (currentStyle != null ? currentStyle[prop] : void 0) || null;
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
var WOW = function () {
|
||||
function WOW() {
|
||||
var options = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];
|
||||
|
||||
_classCallCheck(this, WOW);
|
||||
|
||||
this.defaults = {
|
||||
boxClass: 'wow',
|
||||
animateClass: 'animated',
|
||||
offset: 0,
|
||||
mobile: true,
|
||||
live: true,
|
||||
callback: null,
|
||||
scrollContainer: null,
|
||||
resetAnimation: true
|
||||
};
|
||||
|
||||
this.animate = function animateFactory() {
|
||||
if ('requestAnimationFrame' in window) {
|
||||
return function (callback) {
|
||||
return window.requestAnimationFrame(callback);
|
||||
};
|
||||
}
|
||||
return function (callback) {
|
||||
return callback();
|
||||
};
|
||||
}();
|
||||
|
||||
this.vendors = ['moz', 'webkit'];
|
||||
|
||||
this.start = this.start.bind(this);
|
||||
this.resetAnimation = this.resetAnimation.bind(this);
|
||||
this.scrollHandler = this.scrollHandler.bind(this);
|
||||
this.scrollCallback = this.scrollCallback.bind(this);
|
||||
this.scrolled = true;
|
||||
this.config = extend(options, this.defaults);
|
||||
if (options.scrollContainer != null) {
|
||||
this.config.scrollContainer = document.querySelector(options.scrollContainer);
|
||||
}
|
||||
// Map of elements to animation names:
|
||||
this.animationNameCache = new WeakMap();
|
||||
this.wowEvent = createEvent(this.config.boxClass);
|
||||
}
|
||||
|
||||
_createClass(WOW, [{
|
||||
key: 'init',
|
||||
value: function init() {
|
||||
this.element = window.document.documentElement;
|
||||
if (isIn(document.readyState, ['interactive', 'complete'])) {
|
||||
this.start();
|
||||
} else {
|
||||
addEvent(document, 'DOMContentLoaded', this.start);
|
||||
}
|
||||
this.finished = [];
|
||||
}
|
||||
}, {
|
||||
key: 'start',
|
||||
value: function start() {
|
||||
var _this = this;
|
||||
|
||||
this.stopped = false;
|
||||
this.boxes = [].slice.call(this.element.querySelectorAll('.' + this.config.boxClass));
|
||||
this.all = this.boxes.slice(0);
|
||||
if (this.boxes.length) {
|
||||
if (this.disabled()) {
|
||||
this.resetStyle();
|
||||
} else {
|
||||
for (var i = 0; i < this.boxes.length; i++) {
|
||||
var box = this.boxes[i];
|
||||
this.applyStyle(box, true);
|
||||
}
|
||||
}
|
||||
}
|
||||
if (!this.disabled()) {
|
||||
addEvent(this.config.scrollContainer || window, 'scroll', this.scrollHandler);
|
||||
addEvent(window, 'resize', this.scrollHandler);
|
||||
this.interval = setInterval(this.scrollCallback, 50);
|
||||
}
|
||||
if (this.config.live) {
|
||||
var mut = new MutationObserver(function (records) {
|
||||
for (var j = 0; j < records.length; j++) {
|
||||
var record = records[j];
|
||||
for (var k = 0; k < record.addedNodes.length; k++) {
|
||||
var node = record.addedNodes[k];
|
||||
_this.doSync(node);
|
||||
}
|
||||
}
|
||||
return undefined;
|
||||
});
|
||||
mut.observe(document.body, {
|
||||
childList: true,
|
||||
subtree: true
|
||||
});
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: 'stop',
|
||||
value: function stop() {
|
||||
this.stopped = true;
|
||||
removeEvent(this.config.scrollContainer || window, 'scroll', this.scrollHandler);
|
||||
removeEvent(window, 'resize', this.scrollHandler);
|
||||
if (this.interval != null) {
|
||||
clearInterval(this.interval);
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: 'sync',
|
||||
value: function sync() {
|
||||
if (MutationObserver.notSupported) {
|
||||
this.doSync(this.element);
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: 'doSync',
|
||||
value: function doSync(element) {
|
||||
if (typeof element === 'undefined' || element === null) {
|
||||
element = this.element;
|
||||
}
|
||||
if (element.nodeType !== 1) {
|
||||
return;
|
||||
}
|
||||
element = element.parentNode || element;
|
||||
var iterable = element.querySelectorAll('.' + this.config.boxClass);
|
||||
for (var i = 0; i < iterable.length; i++) {
|
||||
var box = iterable[i];
|
||||
if (!isIn(box, this.all)) {
|
||||
this.boxes.push(box);
|
||||
this.all.push(box);
|
||||
if (this.stopped || this.disabled()) {
|
||||
this.resetStyle();
|
||||
} else {
|
||||
this.applyStyle(box, true);
|
||||
}
|
||||
this.scrolled = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: 'show',
|
||||
value: function show(box) {
|
||||
this.applyStyle(box);
|
||||
box.className = box.className + ' ' + this.config.animateClass;
|
||||
if (this.config.callback != null) {
|
||||
this.config.callback(box);
|
||||
}
|
||||
emitEvent(box, this.wowEvent);
|
||||
|
||||
if (this.config.resetAnimation) {
|
||||
addEvent(box, 'animationend', this.resetAnimation);
|
||||
addEvent(box, 'oanimationend', this.resetAnimation);
|
||||
addEvent(box, 'webkitAnimationEnd', this.resetAnimation);
|
||||
addEvent(box, 'MSAnimationEnd', this.resetAnimation);
|
||||
}
|
||||
|
||||
return box;
|
||||
}
|
||||
}, {
|
||||
key: 'applyStyle',
|
||||
value: function applyStyle(box, hidden) {
|
||||
var _this2 = this;
|
||||
|
||||
var duration = box.getAttribute('data-wow-duration');
|
||||
var delay = box.getAttribute('data-wow-delay');
|
||||
var iteration = box.getAttribute('data-wow-iteration');
|
||||
|
||||
return this.animate(function () {
|
||||
return _this2.customStyle(box, hidden, duration, delay, iteration);
|
||||
});
|
||||
}
|
||||
}, {
|
||||
key: 'resetStyle',
|
||||
value: function resetStyle() {
|
||||
for (var i = 0; i < this.boxes.length; i++) {
|
||||
var box = this.boxes[i];
|
||||
box.style.visibility = 'visible';
|
||||
}
|
||||
return undefined;
|
||||
}
|
||||
}, {
|
||||
key: 'resetAnimation',
|
||||
value: function resetAnimation(event) {
|
||||
if (event.type.toLowerCase().indexOf('animationend') >= 0) {
|
||||
var target = event.target || event.srcElement;
|
||||
target.className = target.className.replace(this.config.animateClass, '').trim();
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: 'customStyle',
|
||||
value: function customStyle(box, hidden, duration, delay, iteration) {
|
||||
if (hidden) {
|
||||
this.cacheAnimationName(box);
|
||||
}
|
||||
box.style.visibility = hidden ? 'hidden' : 'visible';
|
||||
|
||||
if (duration) {
|
||||
this.vendorSet(box.style, { animationDuration: duration });
|
||||
}
|
||||
if (delay) {
|
||||
this.vendorSet(box.style, { animationDelay: delay });
|
||||
}
|
||||
if (iteration) {
|
||||
this.vendorSet(box.style, { animationIterationCount: iteration });
|
||||
}
|
||||
this.vendorSet(box.style, { animationName: hidden ? 'none' : this.cachedAnimationName(box) });
|
||||
|
||||
return box;
|
||||
}
|
||||
}, {
|
||||
key: 'vendorSet',
|
||||
value: function vendorSet(elem, properties) {
|
||||
for (var name in properties) {
|
||||
if (properties.hasOwnProperty(name)) {
|
||||
var value = properties[name];
|
||||
elem['' + name] = value;
|
||||
for (var i = 0; i < this.vendors.length; i++) {
|
||||
var vendor = this.vendors[i];
|
||||
elem['' + vendor + name.charAt(0).toUpperCase() + name.substr(1)] = value;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: 'vendorCSS',
|
||||
value: function vendorCSS(elem, property) {
|
||||
var style = getComputedStyle(elem);
|
||||
var result = style.getPropertyCSSValue(property);
|
||||
for (var i = 0; i < this.vendors.length; i++) {
|
||||
var vendor = this.vendors[i];
|
||||
result = result || style.getPropertyCSSValue('-' + vendor + '-' + property);
|
||||
}
|
||||
return result;
|
||||
}
|
||||
}, {
|
||||
key: 'animationName',
|
||||
value: function animationName(box) {
|
||||
var aName = void 0;
|
||||
try {
|
||||
aName = this.vendorCSS(box, 'animation-name').cssText;
|
||||
} catch (error) {
|
||||
// Opera, fall back to plain property value
|
||||
aName = getComputedStyle(box).getPropertyValue('animation-name');
|
||||
}
|
||||
|
||||
if (aName === 'none') {
|
||||
return ''; // SVG/Firefox, unable to get animation name?
|
||||
}
|
||||
|
||||
return aName;
|
||||
}
|
||||
}, {
|
||||
key: 'cacheAnimationName',
|
||||
value: function cacheAnimationName(box) {
|
||||
// https://bugzilla.mozilla.org/show_bug.cgi?id=921834
|
||||
// box.dataset is not supported for SVG elements in Firefox
|
||||
return this.animationNameCache.set(box, this.animationName(box));
|
||||
}
|
||||
}, {
|
||||
key: 'cachedAnimationName',
|
||||
value: function cachedAnimationName(box) {
|
||||
return this.animationNameCache.get(box);
|
||||
}
|
||||
}, {
|
||||
key: 'scrollHandler',
|
||||
value: function scrollHandler() {
|
||||
this.scrolled = true;
|
||||
}
|
||||
}, {
|
||||
key: 'scrollCallback',
|
||||
value: function scrollCallback() {
|
||||
if (this.scrolled) {
|
||||
this.scrolled = false;
|
||||
var results = [];
|
||||
for (var i = 0; i < this.boxes.length; i++) {
|
||||
var box = this.boxes[i];
|
||||
if (box) {
|
||||
if (this.isVisible(box)) {
|
||||
this.show(box);
|
||||
continue;
|
||||
}
|
||||
results.push(box);
|
||||
}
|
||||
}
|
||||
this.boxes = results;
|
||||
if (!this.boxes.length && !this.config.live) {
|
||||
this.stop();
|
||||
}
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: 'offsetTop',
|
||||
value: function offsetTop(element) {
|
||||
// SVG elements don't have an offsetTop in Firefox.
|
||||
// This will use their nearest parent that has an offsetTop.
|
||||
// Also, using ('offsetTop' of element) causes an exception in Firefox.
|
||||
while (element.offsetTop === undefined) {
|
||||
element = element.parentNode;
|
||||
}
|
||||
var top = element.offsetTop;
|
||||
while (element.offsetParent) {
|
||||
element = element.offsetParent;
|
||||
top += element.offsetTop;
|
||||
}
|
||||
return top;
|
||||
}
|
||||
}, {
|
||||
key: 'isVisible',
|
||||
value: function isVisible(box) {
|
||||
var offset = box.getAttribute('data-wow-offset') || this.config.offset;
|
||||
var viewTop = this.config.scrollContainer && this.config.scrollContainer.scrollTop || window.pageYOffset;
|
||||
var viewBottom = viewTop + Math.min(this.element.clientHeight, getInnerHeight()) - offset;
|
||||
var top = this.offsetTop(box);
|
||||
var bottom = top + box.clientHeight;
|
||||
|
||||
return top <= viewBottom && bottom >= viewTop;
|
||||
}
|
||||
}, {
|
||||
key: 'disabled',
|
||||
value: function disabled() {
|
||||
return !this.config.mobile && isMobile(navigator.userAgent);
|
||||
}
|
||||
}]);
|
||||
|
||||
return WOW;
|
||||
}();
|
||||
|
||||
exports.default = WOW;
|
||||
module.exports = exports['default'];
|
||||
});
|
||||
Reference in New Issue
Block a user