Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

jarallax

Package Overview
Dependencies
Maintainers
1
Versions
38
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

jarallax - npm Package Compare versions

Comparing version 1.9.3 to 1.10.0

dist/jarallax-element.min.js.map
dist/jarallax-video.min.js.map
dist/jarallax.min.js.map
index.js
src/jarallax-element.esm.js
src/jarallax-video.esm.js
src/jarallax.esm.js

231

dist/jarallax-element.js

@@ -1,11 +0,199 @@

;(function() {
'use strict';
/*!
* Name : Elements Extension for Jarallax
* Version : 1.0.0
* Author : nK http://nkdev.info
* Author : nK <https://nkdev.info>
* GitHub : https://github.com/nk-o/jarallax
*/
(function () {
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, {
/******/ configurable: false,
/******/ enumerable: true,
/******/ get: getter
/******/ });
/******/ }
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 3);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
/* WEBPACK VAR INJECTION */(function(global) {
var win;
if (typeof window !== "undefined") {
win = window;
} else if (typeof global !== "undefined") {
win = global;
} else if (typeof self !== "undefined") {
win = self;
} else {
win = {};
}
module.exports = win;
/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(2)))
/***/ }),
/* 1 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
module.exports = new Promise(function (resolve) {
if (document.readyState === 'interactive' || document.readyState === 'complete') {
resolve();
} else {
document.addEventListener('DOMContentLoaded', function () {
resolve();
}, {
capture: true,
once: true,
passive: true
});
}
});
/***/ }),
/* 2 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
var g;
// This works in non-strict mode
g = function () {
return this;
}();
try {
// This works if eval is allowed (see CSP)
g = g || Function("return this")() || (1, eval)("this");
} catch (e) {
// This works if the window reference is available
if ((typeof window === "undefined" ? "undefined" : _typeof(window)) === "object") g = window;
}
// g can still be undefined, but nothing to do about it...
// We return undefined, instead of nothing here, so it's
// easier to handle this case. if(!global) { ...}
module.exports = g;
/***/ }),
/* 3 */
/***/ (function(module, exports, __webpack_require__) {
module.exports = __webpack_require__(4);
/***/ }),
/* 4 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
var _domLoaded = __webpack_require__(1);
var _domLoaded2 = _interopRequireDefault(_domLoaded);
var _jarallaxElement = __webpack_require__(5);
var _jarallaxElement2 = _interopRequireDefault(_jarallaxElement);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
(0, _jarallaxElement2.default)();
// data-jarallax-element initialization
_domLoaded2.default.then(function () {
if (typeof jarallax !== 'undefined') {
jarallax(document.querySelectorAll('[data-jarallax-element]'));
}
});
/***/ }),
/* 5 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = jarallaxElement;
var _global = __webpack_require__(0);
var _global2 = _interopRequireDefault(_global);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function jarallaxElement() {
var jarallax = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _global2.default.jarallax;
if (typeof jarallax === 'undefined') {

@@ -15,7 +203,2 @@ return;

// init events
function addEventListener(el, eventName, handler) {
el.addEventListener(eventName, handler);
}
var Jarallax = jarallax.constructor;

@@ -38,2 +221,4 @@

self.pureOptions.threshold = self.$item.getAttribute('data-threshold') || '';
switch (key) {

@@ -45,2 +230,7 @@ case 'init':

self.options.speedX = speedArr[1] ? parseFloat(speedArr[1]) : 0;
var thresholdArr = self.pureOptions.threshold.split(' ');
self.options.thresholdY = thresholdArr[0] ? parseFloat(thresholdArr[0]) : null;
self.options.thresholdX = thresholdArr[1] ? parseFloat(thresholdArr[1]) : null;
self.onResize();

@@ -64,6 +254,10 @@ self.onScroll();

var wnd = self.getWindowData();
var centerPercent = (wnd.y + wnd.height / 2 - self.itemData.y) / (wnd.height / 2);
var centerPercent = (wnd.y + wnd.height / 2 - self.itemData.y - self.itemData.height / 2) / (wnd.height / 2);
var moveY = centerPercent * self.options.speedY;
var moveX = centerPercent * self.options.speedX;
self.css(self.$item, { transform: 'translate3d(' + moveX + 'px,' + moveY + 'px,0)' });
var my = moveY;
var mx = moveX;
if (self.options.thresholdY !== null && moveY > self.options.thresholdY) my = 0;
if (self.options.thresholdX !== null && moveX > self.options.thresholdX) mx = 0;
self.css(self.$item, { transform: 'translate3d(' + mx + 'px,' + my + 'px,0)' });
break;

@@ -75,13 +269,10 @@ case 'initImg':

return true;
default:
return def.apply(self, args);
// no default
}
return def.apply(self, args);
};
});
} /* eslint no-case-declarations: "off" */
// data-jarallax-element initialization
addEventListener(window, 'DOMContentLoaded', function () {
jarallax(document.querySelectorAll('[data-jarallax-element]'));
});
})();
}());
/***/ })
/******/ ]);

8

dist/jarallax-element.min.js

@@ -1,7 +0,7 @@

!function(){"use strict";/*!
/*!
* Name : Elements Extension for Jarallax
* Version : 1.0.0
* Author : nK http://nkdev.info
* Author : nK <https://nkdev.info>
* GitHub : https://github.com/nk-o/jarallax
*/
!function(){function e(e,t,a){e.addEventListener(t,a)}if("undefined"!=typeof jarallax){var t=jarallax.constructor;["initImg","canInitParallax","init","destroy","clipContainer","coverImage","isVisible","onScroll","onResize"].forEach(function(e){var a=t.prototype[e];t.prototype[e]=function(){var t=this,i=arguments||[];if("initImg"===e&&null!==t.$item.getAttribute("data-jarallax-element")&&(t.options.type="element",t.pureOptions.speed=t.$item.getAttribute("data-jarallax-element")||t.pureOptions.speed),"element"!==t.options.type)return a.apply(t,i);switch(e){case"init":var n=t.pureOptions.speed.split(" ");t.options.speed=t.pureOptions.speed||0,t.options.speedY=n[0]?parseFloat(n[0]):0,t.options.speedX=n[1]?parseFloat(n[1]):0,t.onResize(),t.onScroll(),t.addToParallaxList();break;case"onResize":var o=t.css(t.$item,"transform");t.css(t.$item,{transform:""});var r=t.$item.getBoundingClientRect();t.itemData={width:r.width,height:r.height,y:r.top+t.getWindowData().y,x:r.left},t.css(t.$item,{transform:o});break;case"onScroll":var s=t.getWindowData(),l=(s.y+s.height/2-t.itemData.y)/(s.height/2),p=l*t.options.speedY,c=l*t.options.speedX;t.css(t.$item,{transform:"translate3d("+c+"px,"+p+"px,0)"});break;case"initImg":case"isVisible":case"clipContainer":case"coverImage":return!0;default:return a.apply(t,i)}}}),e(window,"DOMContentLoaded",function(){jarallax(document.querySelectorAll("[data-jarallax-element]"))})}}()}();
*/!function(o){var n={};function r(t){if(n[t])return n[t].exports;var e=n[t]={i:t,l:!1,exports:{}};return o[t].call(e.exports,e,e.exports,r),e.l=!0,e.exports}r.m=o,r.c=n,r.d=function(t,e,o){r.o(t,e)||Object.defineProperty(t,e,{configurable:!1,enumerable:!0,get:o})},r.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return r.d(e,"a",e),e},r.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},r.p="",r(r.s=3)}([function(o,t,e){"use strict";(function(t){var e;e="undefined"!=typeof window?window:void 0!==t?t:"undefined"!=typeof self?self:{},o.exports=e}).call(t,e(2))},function(t,e,o){"use strict";t.exports=new Promise(function(t){"interactive"===document.readyState||"complete"===document.readyState?t():document.addEventListener("DOMContentLoaded",function(){t()},{capture:!0,once:!0,passive:!0})})},function(t,e,o){"use strict";var n,r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t};n=function(){return this}();try{n=n||Function("return this")()||(0,eval)("this")}catch(t){"object"===("undefined"==typeof window?"undefined":r(window))&&(n=window)}t.exports=n},function(t,e,o){t.exports=o(4)},function(t,e,o){"use strict";var n=r(o(1));function r(t){return t&&t.__esModule?t:{default:t}}(0,r(o(5)).default)(),n.default.then(function(){"undefined"!=typeof jarallax&&jarallax(document.querySelectorAll("[data-jarallax-element]"))})},function(t,e,o){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default=function(){var t=0<arguments.length&&void 0!==arguments[0]?arguments[0]:i.default.jarallax;if(void 0===t)return;var e=t.constructor;["initImg","canInitParallax","init","destroy","clipContainer","coverImage","isVisible","onScroll","onResize"].forEach(function(d){var f=e.prototype[d];e.prototype[d]=function(){var t=this,e=arguments||[];if("initImg"===d&&null!==t.$item.getAttribute("data-jarallax-element")&&(t.options.type="element",t.pureOptions.speed=t.$item.getAttribute("data-jarallax-element")||t.pureOptions.speed),"element"!==t.options.type)return f.apply(t,e);switch(t.pureOptions.threshold=t.$item.getAttribute("data-threshold")||"",d){case"init":var o=t.pureOptions.speed.split(" ");t.options.speed=t.pureOptions.speed||0,t.options.speedY=o[0]?parseFloat(o[0]):0,t.options.speedX=o[1]?parseFloat(o[1]):0;var n=t.pureOptions.threshold.split(" ");t.options.thresholdY=n[0]?parseFloat(n[0]):null,t.options.thresholdX=n[1]?parseFloat(n[1]):null,t.onResize(),t.onScroll(),t.addToParallaxList();break;case"onResize":var r=t.css(t.$item,"transform");t.css(t.$item,{transform:""});var i=t.$item.getBoundingClientRect();t.itemData={width:i.width,height:i.height,y:i.top+t.getWindowData().y,x:i.left},t.css(t.$item,{transform:r});break;case"onScroll":var a=t.getWindowData(),s=(a.y+a.height/2-t.itemData.y-t.itemData.height/2)/(a.height/2),l=s*t.options.speedY,u=s*t.options.speedX,p=l,c=u;null!==t.options.thresholdY&&l>t.options.thresholdY&&(p=0),null!==t.options.thresholdX&&u>t.options.thresholdX&&(c=0),t.css(t.$item,{transform:"translate3d("+c+"px,"+p+"px,0)"});break;case"initImg":case"isVisible":case"clipContainer":case"coverImage":return!0}return f.apply(t,e)}})};var n,r=o(0),i=(n=r)&&n.__esModule?n:{default:n}}]);
//# sourceMappingURL=jarallax-element.min.js.map

778

dist/jarallax-video.js
/*!
* Name : Video Worker (wrapper for Youtube, Vimeo and Local videos)
* Version : 1.9.3
* Name : Video Background Extension for Jarallax
* Version : 1.0.0
* Author : nK <https://nkdev.info>
* GitHub : https://github.com/nk-o/jarallax
*/
;(function() {
'use strict';
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, {
/******/ configurable: false,
/******/ enumerable: true,
/******/ get: getter
/******/ });
/******/ }
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 6);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
/* WEBPACK VAR INJECTION */(function(global) {
var win;
if (typeof window !== "undefined") {
win = window;
} else if (typeof global !== "undefined") {
win = global;
} else if (typeof self !== "undefined") {
win = self;
} else {
win = {};
}
module.exports = win;
/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(2)))
/***/ }),
/* 1 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
module.exports = new Promise(function (resolve) {
if (document.readyState === 'interactive' || document.readyState === 'complete') {
resolve();
} else {
document.addEventListener('DOMContentLoaded', function () {
resolve();
}, {
capture: true,
once: true,
passive: true
});
}
});
/***/ }),
/* 2 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
var g;
// This works in non-strict mode
g = function () {
return this;
}();
try {
// This works if eval is allowed (see CSP)
g = g || Function("return this")() || (1, eval)("this");
} catch (e) {
// This works if the window reference is available
if ((typeof window === "undefined" ? "undefined" : _typeof(window)) === "object") g = window;
}
// g can still be undefined, but nothing to do about it...
// We return undefined, instead of nothing here, so it's
// easier to handle this case. if(!global) { ...}
module.exports = g;
/***/ }),
/* 3 */,
/* 4 */,
/* 5 */,
/* 6 */
/***/ (function(module, exports, __webpack_require__) {
module.exports = __webpack_require__(7);
/***/ }),
/* 7 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
var _domLoaded = __webpack_require__(1);
var _domLoaded2 = _interopRequireDefault(_domLoaded);
var _jarallaxVideo = __webpack_require__(8);
var _jarallaxVideo2 = _interopRequireDefault(_jarallaxVideo);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
(0, _jarallaxVideo2.default)();
// data-jarallax-video initialization
_domLoaded2.default.then(function () {
if (typeof jarallax !== 'undefined') {
jarallax(document.querySelectorAll('[data-jarallax-video]'));
}
});
/***/ }),
/* 8 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = jarallaxVideo;
var _videoWorker = __webpack_require__(9);
var _videoWorker2 = _interopRequireDefault(_videoWorker);
var _global = __webpack_require__(0);
var _global2 = _interopRequireDefault(_global);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function jarallaxVideo() {
var jarallax = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _global2.default.jarallax;
if (typeof jarallax === 'undefined') {
return;
}
var Jarallax = jarallax.constructor;
// append video after init Jarallax
var defInit = Jarallax.prototype.init;
Jarallax.prototype.init = function () {
var self = this;
defInit.apply(self);
if (self.video && !self.options.disableVideo()) {
self.video.getIframe(function (iframe) {
var $parent = iframe.parentNode;
self.css(iframe, {
position: self.image.position,
top: '0px',
left: '0px',
right: '0px',
bottom: '0px',
width: '100%',
height: '100%',
maxWidth: 'none',
maxHeight: 'none',
margin: 0,
zIndex: -1
});
self.$video = iframe;
self.image.$container.appendChild(iframe);
// remove parent iframe element (created by VideoWorker)
$parent.parentNode.removeChild($parent);
});
}
};
// cover video
var defCoverImage = Jarallax.prototype.coverImage;
Jarallax.prototype.coverImage = function () {
var self = this;
var imageData = defCoverImage.apply(self);
var node = self.image.$item ? self.image.$item.nodeName : false;
if (imageData && self.video && node && (node === 'IFRAME' || node === 'VIDEO')) {
var h = imageData.image.height;
var w = h * self.image.width / self.image.height;
var ml = (imageData.container.width - w) / 2;
var mt = imageData.image.marginTop;
if (imageData.container.width > w) {
w = imageData.container.width;
h = w * self.image.height / self.image.width;
ml = 0;
mt += (imageData.image.height - h) / 2;
}
// add video height over than need to hide controls
if (node === 'IFRAME') {
h += 400;
mt -= 200;
}
self.css(self.$video, {
width: w + 'px',
marginLeft: ml + 'px',
height: h + 'px',
marginTop: mt + 'px'
});
}
return imageData;
};
// init video
var defInitImg = Jarallax.prototype.initImg;
Jarallax.prototype.initImg = function () {
var self = this;
var defaultResult = defInitImg.apply(self);
if (!self.options.videoSrc) {
self.options.videoSrc = self.$item.getAttribute('data-jarallax-video') || null;
}
if (self.options.videoSrc) {
self.defaultInitImgResult = defaultResult;
return true;
}
return defaultResult;
};
var defCanInitParallax = Jarallax.prototype.canInitParallax;
Jarallax.prototype.canInitParallax = function () {
var self = this;
var defaultResult = defCanInitParallax.apply(self);
if (!self.options.videoSrc) {
return defaultResult;
}
var video = new _videoWorker2.default(self.options.videoSrc, {
autoplay: true,
loop: true,
showContols: false,
startTime: self.options.videoStartTime || 0,
endTime: self.options.videoEndTime || 0,
mute: self.options.videoVolume ? 0 : 1,
volume: self.options.videoVolume || 0
});
if (video.isValid()) {
// if parallax will not be inited, we can add thumbnail on background.
if (!defaultResult) {
if (!self.defaultInitImgResult) {
video.getImageURL(function (url) {
// save default user styles
var curStyle = self.$item.getAttribute('style');
if (curStyle) {
self.$item.setAttribute('data-jarallax-original-styles', curStyle);
}
// set new background
self.css(self.$item, {
'background-image': 'url("' + url + '")',
'background-position': 'center',
'background-size': 'cover'
});
});
}
// init video
} else {
video.on('ready', function () {
if (self.options.videoPlayOnlyVisible) {
var oldOnScroll = self.onScroll;
self.onScroll = function () {
oldOnScroll.apply(self);
if (self.isVisible()) {
video.play();
} else {
video.pause();
}
};
} else {
video.play();
}
});
video.on('started', function () {
self.image.$default_item = self.image.$item;
self.image.$item = self.$video;
// set video width and height
self.image.width = self.video.videoWidth || 1280;
self.image.height = self.video.videoHeight || 720;
self.options.imgWidth = self.image.width;
self.options.imgHeight = self.image.height;
self.coverImage();
self.clipContainer();
self.onScroll();
// hide image
if (self.image.$default_item) {
self.image.$default_item.style.display = 'none';
}
});
self.video = video;
// set image if not exists
if (!self.defaultInitImgResult) {
if (video.type !== 'local') {
video.getImageURL(function (url) {
self.image.src = url;
self.init();
});
return false;
}
// set empty image on local video if not defined
self.image.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
return true;
}
}
}
return defaultResult;
};
// Destroy video parallax
var defDestroy = Jarallax.prototype.destroy;
Jarallax.prototype.destroy = function () {
var self = this;
if (self.image.$default_item) {
self.image.$item = self.image.$default_item;
delete self.image.$default_item;
}
defDestroy.apply(self);
};
}
/***/ }),
/* 9 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
module.exports = __webpack_require__(10);
/***/ }),
/* 10 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
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; }; }();

@@ -44,7 +466,2 @@

// init events
function addEventListener(el, eventName, handler) {
el.addEventListener(eventName, handler);
}
var ID = 0;

@@ -55,4 +472,4 @@ var YoutubeAPIadded = 0;

var loadingVimeoPlayer = 0;
var loadingYoutubeDeffer = new Deferred();
var loadingVimeoDeffer = new Deferred();
var loadingYoutubeDefer = new Deferred();
var loadingVimeoDefer = new Deferred();

@@ -68,9 +485,9 @@ var VideoWorker = function () {

self.options_default = {
autoplay: 1,
loop: 1,
mute: 1,
volume: 0,
controls: 0,
autoplay: false,
loop: false,
mute: false,
volume: 100,
showContols: true,
// start / end video time in ms
// start / end video time in seconds
startTime: 0,

@@ -141,2 +558,3 @@ endTime: 0

if (match && match[1] && match[2]) {
// eslint-disable-next-line prefer-destructuring
result[match[1] === 'ogv' ? 'ogg' : match[1]] = match[2];

@@ -282,2 +700,85 @@ ready = 1;

}, {
key: 'mute',
value: function mute() {
var self = this;
if (!self.player) {
return;
}
if (self.type === 'youtube' && self.player.mute) {
self.player.mute();
// yt mute
// if (self.options.mute) {
// e.target.mute();
// } else if (self.options.volume) {
// e.target.setVolume(self.options.volume);
// }
}
if (self.type === 'vimeo' && self.player.setVolume) {
self.player.setVolume(0);
// vim mute
// if (self.options.mute) {
// self.player.setVolume(0);
// } else if (self.options.volume) {
// self.player.setVolume(self.options.volume);
// }
}
if (self.type === 'local') {
self.$iframe.muted = true;
// local mute
// if (self.options.mute) {
// self.$iframe.muted = true;
// } else if (self.$iframe.volume) {
// self.$iframe.volume = self.options.volume / 100;
// }
}
}
}, {
key: 'unmute',
value: function unmute() {
var self = this;
if (!self.player) {
return;
}
if (self.type === 'youtube' && self.player.mute) {
self.player.unmute();
}
if (self.type === 'vimeo' && self.player.setVolume) {
self.player.setVolume(self.options.volume);
}
if (self.type === 'local') {
self.$iframe.muted = false;
}
}
}, {
key: 'setVolume',
value: function setVolume() {
var volume = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
var self = this;
if (!self.player || !volume) {
return;
}
if (self.type === 'youtube' && self.player.setVolume) {
self.player.setVolume(volume);
}
if (self.type === 'vimeo' && self.player.setVolume) {
self.player.setVolume(volume);
}
if (self.type === 'local') {
self.$iframe.volume = volume / 100;
}
}
}, {
key: 'getImageURL',

@@ -363,3 +864,3 @@ value: function getImageURL(callback) {

// hide controls
if (!self.options.controls) {
if (!self.options.showContols) {
self.playerOptions.playerVars.iv_load_policy = 3;

@@ -454,3 +955,3 @@ self.playerOptions.playerVars.modestbranding = 1;

// hide controls
if (!self.options.controls) {
if (!self.options.showContols) {
self.playerOptions += '&badge=0&byline=0&portrait=0&title=0';

@@ -572,3 +1073,3 @@ }

var locStarted = void 0;
addEventListener(self.player, 'playing', function (e) {
self.player.addEventListener('playing', function (e) {
if (!locStarted) {

@@ -579,3 +1080,3 @@ self.fire('started', e);

});
addEventListener(self.player, 'timeupdate', function () {
self.player.addEventListener('timeupdate', function () {
// check for end of video and play again or stop

@@ -592,12 +1093,12 @@ if (self.options.endTime) {

});
addEventListener(self.player, 'play', function (e) {
self.player.addEventListener('play', function (e) {
self.fire('play', e);
});
addEventListener(self.player, 'pause', function (e) {
self.player.addEventListener('pause', function (e) {
self.fire('pause', e);
});
addEventListener(self.player, 'ended', function (e) {
self.player.addEventListener('ended', function (e) {
self.fire('end', e);
});
addEventListener(self.player, 'loadedmetadata', function () {
self.player.addEventListener('loadedmetadata', function () {
// get video width and height

@@ -678,3 +1179,3 @@ self.videoWidth = this.videoWidth || 1280;

window.onYouTubeIframeAPIReady = null;
loadingYoutubeDeffer.resolve('done');
loadingYoutubeDefer.resolve('done');
callback();

@@ -685,3 +1186,3 @@ };

} else {
loadingYoutubeDeffer.done(function () {
loadingYoutubeDefer.done(function () {
callback();

@@ -699,3 +1200,3 @@ });

clearInterval(vimeoInterval);
loadingVimeoDeffer.resolve('done');
loadingVimeoDefer.resolve('done');
callback();

@@ -707,3 +1208,3 @@ }

} else {
loadingVimeoDeffer.done(function () {
loadingVimeoDefer.done(function () {
callback();

@@ -724,218 +1225,5 @@ });

window.VideoWorker = VideoWorker;
exports.default = VideoWorker;
/*!
* Name : Video Background Extension for Jarallax
* Version : 1.0.0
* Author : nK http://nkdev.info
* GitHub : https://github.com/nk-o/jarallax
*/
(function () {
if (typeof jarallax === 'undefined') {
return;
}
var Jarallax = jarallax.constructor;
// append video after init Jarallax
var defInit = Jarallax.prototype.init;
Jarallax.prototype.init = function () {
var self = this;
defInit.apply(self);
if (self.video) {
self.video.getIframe(function (iframe) {
var $parent = iframe.parentNode;
self.css(iframe, {
position: self.image.position,
top: '0px',
left: '0px',
right: '0px',
bottom: '0px',
width: '100%',
height: '100%',
maxWidth: 'none',
maxHeight: 'none',
margin: 0,
zIndex: -1
});
self.$video = iframe;
self.image.$container.appendChild(iframe);
// remove parent iframe element (created by VideoWorker)
$parent.parentNode.removeChild($parent);
});
}
};
// cover video
var defCoverImage = Jarallax.prototype.coverImage;
Jarallax.prototype.coverImage = function () {
var self = this;
var imageData = defCoverImage.apply(self);
var node = self.image.$item.nodeName;
if (imageData && self.video && (node === 'IFRAME' || node === 'VIDEO')) {
var h = imageData.image.height;
var w = h * self.image.width / self.image.height;
var ml = (imageData.container.width - w) / 2;
var mt = imageData.image.marginTop;
if (imageData.container.width > w) {
w = imageData.container.width;
h = w * self.image.height / self.image.width;
ml = 0;
mt += (imageData.image.height - h) / 2;
}
// add video height over than need to hide controls
if (node === 'IFRAME') {
h += 400;
mt -= 200;
}
self.css(self.$video, {
width: w + 'px',
marginLeft: ml + 'px',
height: h + 'px',
marginTop: mt + 'px'
});
}
return imageData;
};
// init video
var defInitImg = Jarallax.prototype.initImg;
Jarallax.prototype.initImg = function () {
var self = this;
var defaultResult = defInitImg.apply(self);
if (!self.options.videoSrc) {
self.options.videoSrc = self.$item.getAttribute('data-jarallax-video') || null;
}
if (self.options.videoSrc) {
self.defaultInitImgResult = defaultResult;
return true;
}
return defaultResult;
};
var defCanInitParallax = Jarallax.prototype.canInitParallax;
Jarallax.prototype.canInitParallax = function () {
var self = this;
var defaultResult = defCanInitParallax.apply(self);
if (!self.options.videoSrc) {
return defaultResult;
}
var video = new VideoWorker(self.options.videoSrc, {
startTime: self.options.videoStartTime || 0,
endTime: self.options.videoEndTime || 0,
mute: self.options.videoVolume ? 0 : 1,
volume: self.options.videoVolume || 0
});
if (video.isValid()) {
// if parallax will not be inited, we can add thumbnail on background.
if (!defaultResult) {
if (!self.defaultInitImgResult) {
video.getImageURL(function (url) {
// save default user styles
var curStyle = self.$item.getAttribute('style');
if (curStyle) {
self.$item.setAttribute('data-jarallax-original-styles', curStyle);
}
// set new background
self.css(self.$item, {
'background-image': 'url("' + url + '")',
'background-position': 'center',
'background-size': 'cover'
});
});
}
// init video
} else {
video.on('ready', function () {
if (self.options.videoPlayOnlyVisible) {
var oldOnScroll = self.onScroll;
self.onScroll = function () {
oldOnScroll.apply(self);
if (self.isVisible()) {
video.play();
} else {
video.pause();
}
};
} else {
video.play();
}
});
video.on('started', function () {
self.image.$default_item = self.image.$item;
self.image.$item = self.$video;
// set video width and height
self.image.width = self.video.videoWidth || 1280;
self.image.height = self.video.videoHeight || 720;
self.options.imgWidth = self.image.width;
self.options.imgHeight = self.image.height;
self.coverImage();
self.clipContainer();
self.onScroll();
// hide image
if (self.image.$default_item) {
self.image.$default_item.style.display = 'none';
}
});
self.video = video;
// set image if not exists
if (!self.defaultInitImgResult) {
if (video.type !== 'local') {
video.getImageURL(function (url) {
self.image.src = url;
self.init();
});
return false;
}
// set empty image on local video if not defined
self.image.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
return true;
}
}
}
return defaultResult;
};
// Destroy video parallax
var defDestroy = Jarallax.prototype.destroy;
Jarallax.prototype.destroy = function () {
var self = this;
if (self.image.$default_item) {
self.image.$item = self.image.$default_item;
delete self.image.$default_item;
}
defDestroy.apply(self);
};
// data-jarallax-video initialization
addEventListener(window, 'DOMContentLoaded', function () {
jarallax(document.querySelectorAll('[data-jarallax-video]'));
});
})();
}());
/***/ })
/******/ ]);

12

dist/jarallax-video.min.js
/*!
* Name : Video Worker (wrapper for Youtube, Vimeo and Local videos)
* Version : 1.9.3
* Author : nK <https://nkdev.info>
* GitHub : https://github.com/nk-o/jarallax
*/
!function(){"use strict";function e(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function t(){this._done=[],this._fail=[]}function i(e,t,i){e.addEventListener(t,i)}var o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},a=function(){function e(e,t){for(var i=0;i<t.length;i++){var o=t[i];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,i,o){return i&&e(t.prototype,i),o&&e(t,o),t}}();t.prototype={execute:function(e,t){var i=e.length;for(t=Array.prototype.slice.call(t);i--;)e[i].apply(null,t)},resolve:function(){this.execute(this._done,arguments)},reject:function(){this.execute(this._fail,arguments)},done:function(e){this._done.push(e)},fail:function(e){this._fail.push(e)}};var n=0,r=0,p=0,l=0,s=0,u=new t,d=new t,y=function(){function t(i,o){e(this,t);var a=this;a.url=i,a.options_default={autoplay:1,loop:1,mute:1,volume:0,controls:0,startTime:0,endTime:0},a.options=a.extend({},a.options_default,o),a.videoID=a.parseURL(i),a.videoID&&(a.ID=n++,a.loadAPI(),a.init())}return a(t,[{key:"extend",value:function(e){var t=arguments;return e=e||{},Object.keys(arguments).forEach(function(i){t[i]&&Object.keys(t[i]).forEach(function(o){e[o]=t[i][o]})}),e}},{key:"parseURL",value:function(e){function t(e){var t=/.*(?:youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=)([^#\&\?]*).*/,i=e.match(t);return!(!i||11!==i[1].length)&&i[1]}function i(e){var t=/https?:\/\/(?:www\.|player\.)?vimeo.com\/(?:channels\/(?:\w+\/)?|groups\/([^\/]*)\/videos\/|album\/(\d+)\/video\/|video\/|)(\d+)(?:$|\/|\?)/,i=e.match(t);return!(!i||!i[3])&&i[3]}function o(e){var t=e.split(/,(?=mp4\:|webm\:|ogv\:|ogg\:)/),i={},o=0;return t.forEach(function(e){var t=e.match(/^(mp4|webm|ogv|ogg)\:(.*)/);t&&t[1]&&t[2]&&(i["ogv"===t[1]?"ogg":t[1]]=t[2],o=1)}),!!o&&i}var a=t(e),n=i(e),r=o(e);return a?(this.type="youtube",a):n?(this.type="vimeo",n):!!r&&(this.type="local",r)}},{key:"isValid",value:function(){return!!this.videoID}},{key:"on",value:function(e,t){this.userEventsList=this.userEventsList||[],(this.userEventsList[e]||(this.userEventsList[e]=[])).push(t)}},{key:"off",value:function(e,t){var i=this;this.userEventsList&&this.userEventsList[e]&&(t?this.userEventsList[e].forEach(function(o,a){o===t&&(i.userEventsList[e][a]=!1)}):delete this.userEventsList[e])}},{key:"fire",value:function(e){var t=this,i=[].slice.call(arguments,1);this.userEventsList&&"undefined"!=typeof this.userEventsList[e]&&this.userEventsList[e].forEach(function(e){e&&e.apply(t,i)})}},{key:"play",value:function(e){var t=this;t.player&&("youtube"===t.type&&t.player.playVideo&&("undefined"!=typeof e&&t.player.seekTo(e||0),YT.PlayerState.PLAYING!==t.player.getPlayerState()&&t.player.playVideo()),"vimeo"===t.type&&("undefined"!=typeof e&&t.player.setCurrentTime(e),t.player.getPaused().then(function(e){e&&t.player.play()})),"local"===t.type&&("undefined"!=typeof e&&(t.player.currentTime=e),t.player.paused&&t.player.play()))}},{key:"pause",value:function(){var e=this;e.player&&("youtube"===e.type&&e.player.pauseVideo&&YT.PlayerState.PLAYING===e.player.getPlayerState()&&e.player.pauseVideo(),"vimeo"===e.type&&e.player.getPaused().then(function(t){t||e.player.pause()}),"local"===e.type&&(e.player.paused||e.player.pause()))}},{key:"getImageURL",value:function(e){var t=this;if(t.videoImage)return void e(t.videoImage);if("youtube"===t.type){var i=["maxresdefault","sddefault","hqdefault","0"],o=0,a=new Image;a.onload=function(){120!==(this.naturalWidth||this.width)||o===i.length-1?(t.videoImage="https://img.youtube.com/vi/"+t.videoID+"/"+i[o]+".jpg",e(t.videoImage)):(o++,this.src="https://img.youtube.com/vi/"+t.videoID+"/"+i[o]+".jpg")},a.src="https://img.youtube.com/vi/"+t.videoID+"/"+i[o]+".jpg"}if("vimeo"===t.type){var n=new XMLHttpRequest;n.open("GET","https://vimeo.com/api/v2/video/"+t.videoID+".json",!0),n.onreadystatechange=function(){if(4===this.readyState&&this.status>=200&&this.status<400){var i=JSON.parse(this.responseText);t.videoImage=i[0].thumbnail_large,e(t.videoImage)}},n.send(),n=null}}},{key:"getIframe",value:function(e){var t=this;return t.$iframe?void e(t.$iframe):void t.onAPIready(function(){function o(e,t,i){var o=document.createElement("source");o.src=t,o.type=i,e.appendChild(o)}var a=void 0;if(t.$iframe||(a=document.createElement("div"),a.style.display="none"),"youtube"===t.type){t.playerOptions={},t.playerOptions.videoId=t.videoID,t.playerOptions.playerVars={autohide:1,rel:0,autoplay:0,playsinline:1},t.options.controls||(t.playerOptions.playerVars.iv_load_policy=3,t.playerOptions.playerVars.modestbranding=1,t.playerOptions.playerVars.controls=0,t.playerOptions.playerVars.showinfo=0,t.playerOptions.playerVars.disablekb=1);var n=void 0,r=void 0;t.playerOptions.events={onReady:function(e){t.options.mute?e.target.mute():t.options.volume&&e.target.setVolume(t.options.volume),t.options.autoplay&&t.play(t.options.startTime),t.fire("ready",e)},onStateChange:function(e){t.options.loop&&e.data===YT.PlayerState.ENDED&&t.play(t.options.startTime),n||e.data!==YT.PlayerState.PLAYING||(n=1,t.fire("started",e)),e.data===YT.PlayerState.PLAYING&&t.fire("play",e),e.data===YT.PlayerState.PAUSED&&t.fire("pause",e),e.data===YT.PlayerState.ENDED&&t.fire("end",e),t.options.endTime&&(e.data===YT.PlayerState.PLAYING?r=setInterval(function(){t.options.endTime&&t.player.getCurrentTime()>=t.options.endTime&&(t.options.loop?t.play(t.options.startTime):t.pause())},150):clearInterval(r))}};var p=!t.$iframe;if(p){var l=document.createElement("div");l.setAttribute("id",t.playerID),a.appendChild(l),document.body.appendChild(a)}t.player=t.player||new window.YT.Player(t.playerID,t.playerOptions),p&&(t.$iframe=document.getElementById(t.playerID),t.videoWidth=parseInt(t.$iframe.getAttribute("width"),10)||1280,t.videoHeight=parseInt(t.$iframe.getAttribute("height"),10)||720)}if("vimeo"===t.type){t.playerOptions="",t.playerOptions+="player_id="+t.playerID,t.playerOptions+="&autopause=0",t.playerOptions+="&transparent=0",t.options.controls||(t.playerOptions+="&badge=0&byline=0&portrait=0&title=0"),t.playerOptions+="&autoplay="+(t.options.autoplay?"1":"0"),t.playerOptions+="&loop="+(t.options.loop?1:0),t.$iframe||(t.$iframe=document.createElement("iframe"),t.$iframe.setAttribute("id",t.playerID),t.$iframe.setAttribute("src","https://player.vimeo.com/video/"+t.videoID+"?"+t.playerOptions),t.$iframe.setAttribute("frameborder","0"),a.appendChild(t.$iframe),document.body.appendChild(a)),t.player=t.player||new Vimeo.Player(t.$iframe),t.player.getVideoWidth().then(function(e){t.videoWidth=e||1280}),t.player.getVideoHeight().then(function(e){t.videoHeight=e||720}),t.options.startTime&&t.options.autoplay&&t.player.setCurrentTime(t.options.startTime),t.options.mute?t.player.setVolume(0):t.options.volume&&t.player.setVolume(t.options.volume);var s=void 0;t.player.on("timeupdate",function(e){s||t.fire("started",e),s=1,t.options.endTime&&t.options.endTime&&e.seconds>=t.options.endTime&&(t.options.loop?t.play(t.options.startTime):t.pause())}),t.player.on("play",function(e){t.fire("play",e),t.options.startTime&&0===e.seconds&&t.play(t.options.startTime)}),t.player.on("pause",function(e){t.fire("pause",e)}),t.player.on("ended",function(e){t.fire("end",e)}),t.player.on("loaded",function(e){t.fire("ready",e)})}if("local"===t.type){t.$iframe||(t.$iframe=document.createElement("video"),t.options.mute?t.$iframe.muted=!0:t.$iframe.volume&&(t.$iframe.volume=t.options.volume/100),t.options.loop&&(t.$iframe.loop=!0),t.$iframe.setAttribute("playsinline",""),t.$iframe.setAttribute("webkit-playsinline",""),t.$iframe.setAttribute("id",t.playerID),a.appendChild(t.$iframe),document.body.appendChild(a),Object.keys(t.videoID).forEach(function(e){o(t.$iframe,t.videoID[e],"video/"+e)})),t.player=t.player||t.$iframe;var u=void 0;i(t.player,"playing",function(e){u||t.fire("started",e),u=1}),i(t.player,"timeupdate",function(){t.options.endTime&&t.options.endTime&&this.currentTime>=t.options.endTime&&(t.options.loop?t.play(t.options.startTime):t.pause())}),i(t.player,"play",function(e){t.fire("play",e)}),i(t.player,"pause",function(e){t.fire("pause",e)}),i(t.player,"ended",function(e){t.fire("end",e)}),i(t.player,"loadedmetadata",function(){t.videoWidth=this.videoWidth||1280,t.videoHeight=this.videoHeight||720,t.fire("ready"),t.options.autoplay&&t.play(t.options.startTime)})}e(t.$iframe)})}},{key:"init",value:function(){var e=this;e.playerID="VideoWorker-"+e.ID}},{key:"loadAPI",value:function(){var e=this;if(!r||!p){var t="";if("youtube"!==e.type||r||(r=1,t="https://www.youtube.com/iframe_api"),"vimeo"!==e.type||p||(p=1,t="https://player.vimeo.com/api/player.js"),t){var i=document.createElement("script"),o=document.getElementsByTagName("head")[0];i.src=t,o.appendChild(i),o=null,i=null}}}},{key:"onAPIready",value:function(e){var t=this;if("youtube"===t.type&&("undefined"!=typeof YT&&0!==YT.loaded||l?"object"===("undefined"==typeof YT?"undefined":o(YT))&&1===YT.loaded?e():u.done(function(){e()}):(l=1,window.onYouTubeIframeAPIReady=function(){window.onYouTubeIframeAPIReady=null,u.resolve("done"),e()})),"vimeo"===t.type)if("undefined"!=typeof Vimeo||s)"undefined"!=typeof Vimeo?e():d.done(function(){e()});else{s=1;var i=setInterval(function(){"undefined"!=typeof Vimeo&&(clearInterval(i),d.resolve("done"),e())},20)}"local"===t.type&&e()}}]),t}();window.VideoWorker=y,/*!
* Name : Video Background Extension for Jarallax
* Version : 1.0.0
* Author : nK http://nkdev.info
* Author : nK <https://nkdev.info>
* GitHub : https://github.com/nk-o/jarallax
*/
function(){if("undefined"!=typeof jarallax){var e=jarallax.constructor,t=e.prototype.init;e.prototype.init=function(){var e=this;t.apply(e),e.video&&e.video.getIframe(function(t){var i=t.parentNode;e.css(t,{position:e.image.position,top:"0px",left:"0px",right:"0px",bottom:"0px",width:"100%",height:"100%",maxWidth:"none",maxHeight:"none",margin:0,zIndex:-1}),e.$video=t,e.image.$container.appendChild(t),i.parentNode.removeChild(i)})};var o=e.prototype.coverImage;e.prototype.coverImage=function(){var e=this,t=o.apply(e),i=e.image.$item.nodeName;if(t&&e.video&&("IFRAME"===i||"VIDEO"===i)){var a=t.image.height,n=a*e.image.width/e.image.height,r=(t.container.width-n)/2,p=t.image.marginTop;t.container.width>n&&(n=t.container.width,a=n*e.image.height/e.image.width,r=0,p+=(t.image.height-a)/2),"IFRAME"===i&&(a+=400,p-=200),e.css(e.$video,{width:n+"px",marginLeft:r+"px",height:a+"px",marginTop:p+"px"})}return t};var a=e.prototype.initImg;e.prototype.initImg=function(){var e=this,t=a.apply(e);return e.options.videoSrc||(e.options.videoSrc=e.$item.getAttribute("data-jarallax-video")||null),e.options.videoSrc?(e.defaultInitImgResult=t,!0):t};var n=e.prototype.canInitParallax;e.prototype.canInitParallax=function(){var e=this,t=n.apply(e);if(!e.options.videoSrc)return t;var i=new y(e.options.videoSrc,{startTime:e.options.videoStartTime||0,endTime:e.options.videoEndTime||0,mute:e.options.videoVolume?0:1,volume:e.options.videoVolume||0});if(i.isValid())if(t){if(i.on("ready",function(){if(e.options.videoPlayOnlyVisible){var t=e.onScroll;e.onScroll=function(){t.apply(e),e.isVisible()?i.play():i.pause()}}else i.play()}),i.on("started",function(){e.image.$default_item=e.image.$item,e.image.$item=e.$video,e.image.width=e.video.videoWidth||1280,e.image.height=e.video.videoHeight||720,e.options.imgWidth=e.image.width,e.options.imgHeight=e.image.height,e.coverImage(),e.clipContainer(),e.onScroll(),e.image.$default_item&&(e.image.$default_item.style.display="none")}),e.video=i,!e.defaultInitImgResult)return"local"!==i.type?(i.getImageURL(function(t){e.image.src=t,e.init()}),!1):(e.image.src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",!0)}else e.defaultInitImgResult||i.getImageURL(function(t){var i=e.$item.getAttribute("style");i&&e.$item.setAttribute("data-jarallax-original-styles",i),e.css(e.$item,{"background-image":'url("'+t+'")',"background-position":"center","background-size":"cover"})});return t};var r=e.prototype.destroy;e.prototype.destroy=function(){var e=this;e.image.$default_item&&(e.image.$item=e.image.$default_item,delete e.image.$default_item),r.apply(e)},i(window,"DOMContentLoaded",function(){jarallax(document.querySelectorAll("[data-jarallax-video]"))})}}()}();
*/!function(i){var o={};function a(e){if(o[e])return o[e].exports;var t=o[e]={i:e,l:!1,exports:{}};return i[e].call(t.exports,t,t.exports,a),t.l=!0,t.exports}a.m=i,a.c=o,a.d=function(e,t,i){a.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:i})},a.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(t,"a",t),t},a.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},a.p="",a(a.s=6)}([function(i,e,t){"use strict";(function(e){var t;t="undefined"!=typeof window?window:void 0!==e?e:"undefined"!=typeof self?self:{},i.exports=t}).call(e,t(2))},function(e,t,i){"use strict";e.exports=new Promise(function(e){"interactive"===document.readyState||"complete"===document.readyState?e():document.addEventListener("DOMContentLoaded",function(){e()},{capture:!0,once:!0,passive:!0})})},function(e,t,i){"use strict";var o,a="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};o=function(){return this}();try{o=o||Function("return this")()||(0,eval)("this")}catch(e){"object"===("undefined"==typeof window?"undefined":a(window))&&(o=window)}e.exports=o},,,,function(e,t,i){e.exports=i(7)},function(e,t,i){"use strict";var o=a(i(1));function a(e){return e&&e.__esModule?e:{default:e}}(0,a(i(8)).default)(),o.default.then(function(){"undefined"!=typeof jarallax&&jarallax(document.querySelectorAll("[data-jarallax-video]"))})},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:l.default.jarallax;if(void 0===e)return;var t=e.constructor,o=t.prototype.init;t.prototype.init=function(){var i=this;o.apply(i),i.video&&!i.options.disableVideo()&&i.video.getIframe(function(e){var t=e.parentNode;i.css(e,{position:i.image.position,top:"0px",left:"0px",right:"0px",bottom:"0px",width:"100%",height:"100%",maxWidth:"none",maxHeight:"none",margin:0,zIndex:-1}),i.$video=e,i.image.$container.appendChild(e),t.parentNode.removeChild(t)})};var p=t.prototype.coverImage;t.prototype.coverImage=function(){var e=this,t=p.apply(e),i=!!e.image.$item&&e.image.$item.nodeName;if(t&&e.video&&i&&("IFRAME"===i||"VIDEO"===i)){var o=t.image.height,a=o*e.image.width/e.image.height,n=(t.container.width-a)/2,r=t.image.marginTop;t.container.width>a&&(a=t.container.width,o=a*e.image.height/e.image.width,n=0,r+=(t.image.height-o)/2),"IFRAME"===i&&(o+=400,r-=200),e.css(e.$video,{width:a+"px",marginLeft:n+"px",height:o+"px",marginTop:r+"px"})}return t};var i=t.prototype.initImg;t.prototype.initImg=function(){var e=this,t=i.apply(e);return e.options.videoSrc||(e.options.videoSrc=e.$item.getAttribute("data-jarallax-video")||null),e.options.videoSrc?(e.defaultInitImgResult=t,!0):t};var a=t.prototype.canInitParallax;t.prototype.canInitParallax=function(){var i=this,e=a.apply(i);if(!i.options.videoSrc)return e;var t=new r.default(i.options.videoSrc,{autoplay:!0,loop:!0,showContols:!1,startTime:i.options.videoStartTime||0,endTime:i.options.videoEndTime||0,mute:i.options.videoVolume?0:1,volume:i.options.videoVolume||0});if(t.isValid())if(e){if(t.on("ready",function(){if(i.options.videoPlayOnlyVisible){var e=i.onScroll;i.onScroll=function(){e.apply(i),i.isVisible()?t.play():t.pause()}}else t.play()}),t.on("started",function(){i.image.$default_item=i.image.$item,i.image.$item=i.$video,i.image.width=i.video.videoWidth||1280,i.image.height=i.video.videoHeight||720,i.options.imgWidth=i.image.width,i.options.imgHeight=i.image.height,i.coverImage(),i.clipContainer(),i.onScroll(),i.image.$default_item&&(i.image.$default_item.style.display="none")}),i.video=t,!i.defaultInitImgResult)return"local"!==t.type?(t.getImageURL(function(e){i.image.src=e,i.init()}),!1):(i.image.src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",!0)}else i.defaultInitImgResult||t.getImageURL(function(e){var t=i.$item.getAttribute("style");t&&i.$item.setAttribute("data-jarallax-original-styles",t),i.css(i.$item,{"background-image":'url("'+e+'")',"background-position":"center","background-size":"cover"})});return e};var n=t.prototype.destroy;t.prototype.destroy=function(){var e=this;e.image.$default_item&&(e.image.$item=e.image.$default_item,delete e.image.$default_item),n.apply(e)}};var r=o(i(9)),l=o(i(0));function o(e){return e&&e.__esModule?e:{default:e}}},function(e,t,i){"use strict";e.exports=i(10)},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var a="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},n=function(){function o(e,t){for(var i=0;i<t.length;i++){var o=t[i];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(e,t,i){return t&&o(e.prototype,t),i&&o(e,i),e}}();function o(){this._done=[],this._fail=[]}o.prototype={execute:function(e,t){var i=e.length;for(t=Array.prototype.slice.call(t);i--;)e[i].apply(null,t)},resolve:function(){this.execute(this._done,arguments)},reject:function(){this.execute(this._fail,arguments)},done:function(e){this._done.push(e)},fail:function(e){this._fail.push(e)}};var r=0,p=0,l=0,s=0,u=0,d=new o,y=new o,m=function(){function o(e,t){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,o);var i=this;i.url=e,i.options_default={autoplay:!1,loop:!1,mute:!1,volume:100,showContols:!0,startTime:0,endTime:0},i.options=i.extend({},i.options_default,t),i.videoID=i.parseURL(e),i.videoID&&(i.ID=r++,i.loadAPI(),i.init())}return n(o,[{key:"extend",value:function(i){var o=arguments;return i=i||{},Object.keys(arguments).forEach(function(t){o[t]&&Object.keys(o[t]).forEach(function(e){i[e]=o[t][e]})}),i}},{key:"parseURL",value:function(e){var t,i,o,a,n,r=!(!(t=e.match(/.*(?:youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=)([^#\&\?]*).*/))||11!==t[1].length)&&t[1],p=!(!(i=e.match(/https?:\/\/(?:www\.|player\.)?vimeo.com\/(?:channels\/(?:\w+\/)?|groups\/([^\/]*)\/videos\/|album\/(\d+)\/video\/|video\/|)(\d+)(?:$|\/|\?)/))||!i[3])&&i[3],l=(o=e.split(/,(?=mp4\:|webm\:|ogv\:|ogg\:)/),a={},n=0,o.forEach(function(e){var t=e.match(/^(mp4|webm|ogv|ogg)\:(.*)/);t&&t[1]&&t[2]&&(a["ogv"===t[1]?"ogg":t[1]]=t[2],n=1)}),!!n&&a);return r?(this.type="youtube",r):p?(this.type="vimeo",p):!!l&&(this.type="local",l)}},{key:"isValid",value:function(){return!!this.videoID}},{key:"on",value:function(e,t){this.userEventsList=this.userEventsList||[],(this.userEventsList[e]||(this.userEventsList[e]=[])).push(t)}},{key:"off",value:function(i,o){var a=this;this.userEventsList&&this.userEventsList[i]&&(o?this.userEventsList[i].forEach(function(e,t){e===o&&(a.userEventsList[i][t]=!1)}):delete this.userEventsList[i])}},{key:"fire",value:function(e){var t=this,i=[].slice.call(arguments,1);this.userEventsList&&void 0!==this.userEventsList[e]&&this.userEventsList[e].forEach(function(e){e&&e.apply(t,i)})}},{key:"play",value:function(e){var t=this;t.player&&("youtube"===t.type&&t.player.playVideo&&(void 0!==e&&t.player.seekTo(e||0),YT.PlayerState.PLAYING!==t.player.getPlayerState()&&t.player.playVideo()),"vimeo"===t.type&&(void 0!==e&&t.player.setCurrentTime(e),t.player.getPaused().then(function(e){e&&t.player.play()})),"local"===t.type&&(void 0!==e&&(t.player.currentTime=e),t.player.paused&&t.player.play()))}},{key:"pause",value:function(){var t=this;t.player&&("youtube"===t.type&&t.player.pauseVideo&&YT.PlayerState.PLAYING===t.player.getPlayerState()&&t.player.pauseVideo(),"vimeo"===t.type&&t.player.getPaused().then(function(e){e||t.player.pause()}),"local"===t.type&&(t.player.paused||t.player.pause()))}},{key:"mute",value:function(){var e=this;e.player&&("youtube"===e.type&&e.player.mute&&e.player.mute(),"vimeo"===e.type&&e.player.setVolume&&e.player.setVolume(0),"local"===e.type&&(e.$iframe.muted=!0))}},{key:"unmute",value:function(){var e=this;e.player&&("youtube"===e.type&&e.player.mute&&e.player.unmute(),"vimeo"===e.type&&e.player.setVolume&&e.player.setVolume(e.options.volume),"local"===e.type&&(e.$iframe.muted=!1))}},{key:"setVolume",value:function(){var e=0<arguments.length&&void 0!==arguments[0]&&arguments[0],t=this;t.player&&e&&("youtube"===t.type&&t.player.setVolume&&t.player.setVolume(e),"vimeo"===t.type&&t.player.setVolume&&t.player.setVolume(e),"local"===t.type&&(t.$iframe.volume=e/100))}},{key:"getImageURL",value:function(t){var i=this;if(i.videoImage)t(i.videoImage);else{if("youtube"===i.type){var e=["maxresdefault","sddefault","hqdefault","0"],o=0,a=new Image;a.onload=function(){120!==(this.naturalWidth||this.width)||o===e.length-1?(i.videoImage="https://img.youtube.com/vi/"+i.videoID+"/"+e[o]+".jpg",t(i.videoImage)):(o++,this.src="https://img.youtube.com/vi/"+i.videoID+"/"+e[o]+".jpg")},a.src="https://img.youtube.com/vi/"+i.videoID+"/"+e[o]+".jpg"}if("vimeo"===i.type){var n=new XMLHttpRequest;n.open("GET","https://vimeo.com/api/v2/video/"+i.videoID+".json",!0),n.onreadystatechange=function(){if(4===this.readyState&&200<=this.status&&this.status<400){var e=JSON.parse(this.responseText);i.videoImage=e[0].thumbnail_large,t(i.videoImage)}},n.send(),n=null}}}},{key:"getIframe",value:function(p){var l=this;l.$iframe?p(l.$iframe):l.onAPIready(function(){var e=void 0;if(l.$iframe||((e=document.createElement("div")).style.display="none"),"youtube"===l.type){l.playerOptions={},l.playerOptions.videoId=l.videoID,l.playerOptions.playerVars={autohide:1,rel:0,autoplay:0,playsinline:1},l.options.showContols||(l.playerOptions.playerVars.iv_load_policy=3,l.playerOptions.playerVars.modestbranding=1,l.playerOptions.playerVars.controls=0,l.playerOptions.playerVars.showinfo=0,l.playerOptions.playerVars.disablekb=1);var t=void 0,i=void 0;l.playerOptions.events={onReady:function(e){l.options.mute?e.target.mute():l.options.volume&&e.target.setVolume(l.options.volume),l.options.autoplay&&l.play(l.options.startTime),l.fire("ready",e)},onStateChange:function(e){l.options.loop&&e.data===YT.PlayerState.ENDED&&l.play(l.options.startTime),t||e.data!==YT.PlayerState.PLAYING||(t=1,l.fire("started",e)),e.data===YT.PlayerState.PLAYING&&l.fire("play",e),e.data===YT.PlayerState.PAUSED&&l.fire("pause",e),e.data===YT.PlayerState.ENDED&&l.fire("end",e),l.options.endTime&&(e.data===YT.PlayerState.PLAYING?i=setInterval(function(){l.options.endTime&&l.player.getCurrentTime()>=l.options.endTime&&(l.options.loop?l.play(l.options.startTime):l.pause())},150):clearInterval(i))}};var o=!l.$iframe;if(o){var a=document.createElement("div");a.setAttribute("id",l.playerID),e.appendChild(a),document.body.appendChild(e)}l.player=l.player||new window.YT.Player(l.playerID,l.playerOptions),o&&(l.$iframe=document.getElementById(l.playerID),l.videoWidth=parseInt(l.$iframe.getAttribute("width"),10)||1280,l.videoHeight=parseInt(l.$iframe.getAttribute("height"),10)||720)}if("vimeo"===l.type){l.playerOptions="",l.playerOptions+="player_id="+l.playerID,l.playerOptions+="&autopause=0",l.playerOptions+="&transparent=0",l.options.showContols||(l.playerOptions+="&badge=0&byline=0&portrait=0&title=0"),l.playerOptions+="&autoplay="+(l.options.autoplay?"1":"0"),l.playerOptions+="&loop="+(l.options.loop?1:0),l.$iframe||(l.$iframe=document.createElement("iframe"),l.$iframe.setAttribute("id",l.playerID),l.$iframe.setAttribute("src","https://player.vimeo.com/video/"+l.videoID+"?"+l.playerOptions),l.$iframe.setAttribute("frameborder","0"),e.appendChild(l.$iframe),document.body.appendChild(e)),l.player=l.player||new Vimeo.Player(l.$iframe),l.player.getVideoWidth().then(function(e){l.videoWidth=e||1280}),l.player.getVideoHeight().then(function(e){l.videoHeight=e||720}),l.options.startTime&&l.options.autoplay&&l.player.setCurrentTime(l.options.startTime),l.options.mute?l.player.setVolume(0):l.options.volume&&l.player.setVolume(l.options.volume);var n=void 0;l.player.on("timeupdate",function(e){n||l.fire("started",e),n=1,l.options.endTime&&l.options.endTime&&e.seconds>=l.options.endTime&&(l.options.loop?l.play(l.options.startTime):l.pause())}),l.player.on("play",function(e){l.fire("play",e),l.options.startTime&&0===e.seconds&&l.play(l.options.startTime)}),l.player.on("pause",function(e){l.fire("pause",e)}),l.player.on("ended",function(e){l.fire("end",e)}),l.player.on("loaded",function(e){l.fire("ready",e)})}if("local"===l.type){l.$iframe||(l.$iframe=document.createElement("video"),l.options.mute?l.$iframe.muted=!0:l.$iframe.volume&&(l.$iframe.volume=l.options.volume/100),l.options.loop&&(l.$iframe.loop=!0),l.$iframe.setAttribute("playsinline",""),l.$iframe.setAttribute("webkit-playsinline",""),l.$iframe.setAttribute("id",l.playerID),e.appendChild(l.$iframe),document.body.appendChild(e),Object.keys(l.videoID).forEach(function(e){var t,i,o,a;t=l.$iframe,i=l.videoID[e],o="video/"+e,(a=document.createElement("source")).src=i,a.type=o,t.appendChild(a)})),l.player=l.player||l.$iframe;var r=void 0;l.player.addEventListener("playing",function(e){r||l.fire("started",e),r=1}),l.player.addEventListener("timeupdate",function(){l.options.endTime&&l.options.endTime&&this.currentTime>=l.options.endTime&&(l.options.loop?l.play(l.options.startTime):l.pause())}),l.player.addEventListener("play",function(e){l.fire("play",e)}),l.player.addEventListener("pause",function(e){l.fire("pause",e)}),l.player.addEventListener("ended",function(e){l.fire("end",e)}),l.player.addEventListener("loadedmetadata",function(){l.videoWidth=this.videoWidth||1280,l.videoHeight=this.videoHeight||720,l.fire("ready"),l.options.autoplay&&l.play(l.options.startTime)})}p(l.$iframe)})}},{key:"init",value:function(){this.playerID="VideoWorker-"+this.ID}},{key:"loadAPI",value:function(){if(!p||!l){var e="";if("youtube"!==this.type||p||(p=1,e="https://www.youtube.com/iframe_api"),"vimeo"!==this.type||l||(l=1,e="https://player.vimeo.com/api/player.js"),e){var t=document.createElement("script"),i=document.getElementsByTagName("head")[0];t.src=e,i.appendChild(t),t=i=null}}}},{key:"onAPIready",value:function(e){if("youtube"===this.type&&("undefined"!=typeof YT&&0!==YT.loaded||s?"object"===("undefined"==typeof YT?"undefined":a(YT))&&1===YT.loaded?e():d.done(function(){e()}):(s=1,window.onYouTubeIframeAPIReady=function(){window.onYouTubeIframeAPIReady=null,d.resolve("done"),e()})),"vimeo"===this.type)if("undefined"!=typeof Vimeo||u)"undefined"!=typeof Vimeo?e():y.done(function(){e()});else{u=1;var t=setInterval(function(){"undefined"!=typeof Vimeo&&(clearInterval(t),y.resolve("done"),e())},20)}"local"===this.type&&e()}}]),o}();t.default=m}]);
//# sourceMappingURL=jarallax-video.min.js.map

449

dist/jarallax.js
/*!
* Name : Just Another Parallax [Jarallax]
* Version : 1.9.3
* Version : 1.10.0
* Author : nK <https://nkdev.info>
* GitHub : https://github.com/nk-o/jarallax
*/
;(function() {
'use strict';
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, {
/******/ configurable: false,
/******/ enumerable: true,
/******/ get: getter
/******/ });
/******/ }
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 11);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
/* WEBPACK VAR INJECTION */(function(global) {
var win;
if (typeof window !== "undefined") {
win = window;
} else if (typeof global !== "undefined") {
win = global;
} else if (typeof self !== "undefined") {
win = self;
} else {
win = {};
}
module.exports = win;
/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(2)))
/***/ }),
/* 1 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
module.exports = new Promise(function (resolve) {
if (document.readyState === 'interactive' || document.readyState === 'complete') {
resolve();
} else {
document.addEventListener('DOMContentLoaded', function () {
resolve();
}, {
capture: true,
once: true,
passive: true
});
}
});
/***/ }),
/* 2 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
var g;
// This works in non-strict mode
g = function () {
return this;
}();
try {
// This works if eval is allowed (see CSP)
g = g || Function("return this")() || (1, eval)("this");
} catch (e) {
// This works if the window reference is available
if ((typeof window === "undefined" ? "undefined" : _typeof(window)) === "object") g = window;
}
// g can still be undefined, but nothing to do about it...
// We return undefined, instead of nothing here, so it's
// easier to handle this case. if(!global) { ...}
module.exports = g;
/***/ }),
/* 3 */,
/* 4 */,
/* 5 */,
/* 6 */,
/* 7 */,
/* 8 */,
/* 9 */,
/* 10 */,
/* 11 */
/***/ (function(module, exports, __webpack_require__) {
module.exports = __webpack_require__(12);
/***/ }),
/* 12 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
var _domLoaded = __webpack_require__(1);
var _domLoaded2 = _interopRequireDefault(_domLoaded);
var _global = __webpack_require__(0);
var _jarallax = __webpack_require__(13);
var _jarallax2 = _interopRequireDefault(_jarallax);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
// no conflict
var oldPlugin = _global.window.jarallax;
_global.window.jarallax = _jarallax2.default;
_global.window.jarallax.noConflict = function () {
_global.window.jarallax = oldPlugin;
return this;
};
// jQuery support
if (typeof _global.jQuery !== 'undefined') {
var jQueryPlugin = function jQueryPlugin() {
var args = arguments || [];
Array.prototype.unshift.call(args, this);
var res = _jarallax2.default.apply(_global.window, args);
return (typeof res === 'undefined' ? 'undefined' : _typeof(res)) !== 'object' ? res : this;
};
jQueryPlugin.constructor = _jarallax2.default.constructor;
// no conflict
var oldJqPlugin = _global.jQuery.fn.jarallax;
_global.jQuery.fn.jarallax = jQueryPlugin;
_global.jQuery.fn.jarallax.noConflict = function () {
_global.jQuery.fn.jarallax = oldJqPlugin;
return this;
};
}
// data-jarallax initialization
_domLoaded2.default.then(function () {
(0, _jarallax2.default)(document.querySelectorAll('[data-jarallax]'));
});
/***/ }),
/* 13 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
/* WEBPACK VAR INJECTION */(function(global) {
Object.defineProperty(exports, "__esModule", {
value: true
});
var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
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; }; }();

@@ -14,2 +230,14 @@

var _domLoaded = __webpack_require__(1);
var _domLoaded2 = _interopRequireDefault(_domLoaded);
var _rafl = __webpack_require__(14);
var _rafl2 = _interopRequireDefault(_rafl);
var _global = __webpack_require__(0);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

@@ -27,16 +255,3 @@

}();
var ua = navigator.userAgent;
var isAndroid = ua.toLowerCase().indexOf('android') > -1;
var isIOs = /iPad|iPhone|iPod/.test(ua) && !window.MSStream;
// requestAnimationFrame polyfill
var rAF = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function (callback) {
setTimeout(callback, 1000 / 60);
};
// init events
function addEventListener(el, eventName, handler) {
el.addEventListener(eventName, handler);
}
// Window data

@@ -47,6 +262,7 @@ var wndW = void 0;

var forceResizeParallax = false;
var forceScrollParallax = false;
function updateWndVars(e) {
wndW = window.innerWidth || document.documentElement.clientWidth;
wndH = window.innerHeight || document.documentElement.clientHeight;
if ((typeof e === 'undefined' ? 'undefined' : _typeof(e)) === 'object' && (e.type === 'load' || e.type === 'DOMContentLoaded')) {
wndW = _global.window.innerWidth || document.documentElement.clientWidth;
wndH = _global.window.innerHeight || document.documentElement.clientHeight;
if ((typeof e === 'undefined' ? 'undefined' : _typeof(e)) === 'object' && (e.type === 'load' || e.type === 'dom-loaded')) {
forceResizeParallax = true;

@@ -56,6 +272,10 @@ }

updateWndVars();
addEventListener(window, 'resize', updateWndVars);
addEventListener(window, 'orientationchange', updateWndVars);
addEventListener(window, 'load', updateWndVars);
addEventListener(window, 'DOMContentLoaded', updateWndVars);
_global.window.addEventListener('resize', updateWndVars);
_global.window.addEventListener('orientationchange', updateWndVars);
_global.window.addEventListener('load', updateWndVars);
_domLoaded2.default.then(function () {
updateWndVars({
type: 'dom-loaded'
});
});

@@ -73,4 +293,4 @@ // list with all jarallax instances

if (window.pageYOffset !== undefined) {
wndY = window.pageYOffset;
if (_global.window.pageYOffset !== undefined) {
wndY = _global.window.pageYOffset;
} else {

@@ -81,5 +301,6 @@ wndY = (document.documentElement || document.body.parentNode || document.body).scrollTop;

var isResized = forceResizeParallax || !oldPageData || oldPageData.width !== wndW || oldPageData.height !== wndH;
var isScrolled = isResized || !oldPageData || oldPageData.y !== wndY;
var isScrolled = forceScrollParallax || isResized || !oldPageData || oldPageData.y !== wndY;
forceResizeParallax = false;
forceScrollParallax = false;

@@ -103,5 +324,21 @@ if (isResized || isScrolled) {

rAF(updateParallax);
(0, _rafl2.default)(updateParallax);
}
// ResizeObserver
var resizeObserver = global.ResizeObserver ? new global.ResizeObserver(function (entry) {
if (entry && entry.length) {
(0, _rafl2.default)(function () {
entry.forEach(function (item) {
if (item.target && item.target.jarallax) {
if (!forceResizeParallax) {
item.target.jarallax.onResize();
}
forceScrollParallax = true;
}
});
});
}
}) : false;
var instanceID = 0;

@@ -132,4 +369,5 @@

zIndex: -100,
noAndroid: false,
noIos: false,
disableParallax: false,
disableVideo: false,
automaticResize: true, // use ResizeObserver to recalculate position and size of parallax image

@@ -154,2 +392,3 @@ // video

if (deprecatedDataAttribute) {
// eslint-disable-next-line no-console
console.warn('Detected usage of deprecated data-jarallax JSON options, you should use pure data-attribute options. See info here - https://github.com/nk-o/jarallax/issues/53');

@@ -183,2 +422,51 @@ }

// deprecated noAndroid and noIos options
if (self.options.noAndroid || self.options.noIos) {
// eslint-disable-next-line no-console
console.warn('Detected usage of deprecated noAndroid or noIos options, you should use disableParallax option. See info here - https://github.com/nk-o/jarallax/#disable-on-mobile-devices');
// prepare fallback if disableParallax option is not used
if (!self.options.disableParallax) {
if (self.options.noIos && self.options.noAndroid) {
self.options.disableParallax = /iPad|iPhone|iPod|Android/;
} else if (self.options.noIos) {
self.options.disableParallax = /iPad|iPhone|iPod/;
} else if (self.options.noAndroid) {
self.options.disableParallax = /Android/;
}
}
}
// prepare disableParallax callback
if (typeof self.options.disableParallax === 'string') {
self.options.disableParallax = new RegExp(self.options.disableParallax);
}
if (self.options.disableParallax instanceof RegExp) {
var disableParallaxRegexp = self.options.disableParallax;
self.options.disableParallax = function () {
return disableParallaxRegexp.test(navigator.userAgent);
};
}
if (typeof self.options.disableParallax !== 'function') {
self.options.disableParallax = function () {
return false;
};
}
// prepare disableVideo callback
if (typeof self.options.disableVideo === 'string') {
self.options.disableVideo = new RegExp(self.options.disableVideo);
}
if (self.options.disableVideo instanceof RegExp) {
var disableVideoRegexp = self.options.disableVideo;
self.options.disableVideo = function () {
return disableVideoRegexp.test(navigator.userAgent);
};
}
if (typeof self.options.disableVideo !== 'function') {
self.options.disableVideo = function () {
return false;
};
}
// custom element to check if parallax in viewport

@@ -188,3 +476,7 @@ var elementInVP = self.options.elementInViewport;

if (elementInVP && (typeof elementInVP === 'undefined' ? 'undefined' : _typeof(elementInVP)) === 'object' && typeof elementInVP.length !== 'undefined') {
elementInVP = elementInVP[0];
var _elementInVP = elementInVP;
var _elementInVP2 = _slicedToArray(_elementInVP, 1);
elementInVP = _elementInVP2[0];
}

@@ -205,3 +497,3 @@ // check if dom element

// on mobile devices better scrolled with absolute position
position: isAndroid || isIOs ? 'absolute' : 'fixed'
position: /iPad|iPhone|iPod|Android/.test(navigator.userAgent) ? 'absolute' : 'fixed'
};

@@ -221,3 +513,3 @@

if (typeof styles === 'string') {
return window.getComputedStyle(el).getPropertyValue(styles);
return _global.window.getComputedStyle(el).getPropertyValue(styles);
}

@@ -308,3 +600,3 @@

value: function canInitParallax() {
return supportTransform && !(isAndroid && this.options.noAndroid) && !(isIOs && this.options.noIos);
return supportTransform && !this.options.disableParallax();
}

@@ -374,8 +666,10 @@ }, {

self.image.$item = document.createElement('div');
imageStyles = self.extend({
'background-position': self.options.imgPosition,
'background-size': self.options.imgSize,
'background-repeat': self.options.imgRepeat,
'background-image': 'url("' + self.image.src + '")'
}, containerStyles, imageStyles);
if (self.image.src) {
imageStyles = self.extend({
'background-position': self.options.imgPosition,
'background-size': self.options.imgSize,
'background-repeat': self.options.imgRepeat,
'background-image': 'url("' + self.image.src + '")'
}, containerStyles, imageStyles);
}
}

@@ -414,2 +708,7 @@

// ResizeObserver
if (self.options.automaticResize && resizeObserver) {
resizeObserver.observe(self.$item);
}
// call onInit event

@@ -519,5 +818,6 @@ if (self.options.onInit) {

var rect = self.image.$container.getBoundingClientRect();
var width = rect.width;
var height = rect.height;
var width = rect.width,
height = rect.height;
if (!self.$clipStyles) {

@@ -548,2 +848,3 @@ self.$clipStyles = document.createElement('style');

var speed = self.options.speed;
var isScroll = self.options.type === 'scroll' || self.options.type === 'scroll-opacity';

@@ -746,33 +1047,43 @@ var scrollDist = 0;

// no conflict
var oldPlugin = window.jarallax;
window.jarallax = plugin;
window.jarallax.noConflict = function () {
window.jarallax = oldPlugin;
return this;
};
exports.default = plugin;
/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(2)))
// jQuery support
if (typeof jQuery !== 'undefined') {
var jQueryPlugin = function jQueryPlugin() {
var args = arguments || [];
Array.prototype.unshift.call(args, this);
var res = plugin.apply(window, args);
return (typeof res === 'undefined' ? 'undefined' : _typeof(res)) !== 'object' ? res : this;
};
jQueryPlugin.constructor = Jarallax;
/***/ }),
/* 14 */
/***/ (function(module, exports, __webpack_require__) {
// no conflict
var oldJqPlugin = jQuery.fn.jarallax;
jQuery.fn.jarallax = jQueryPlugin;
jQuery.fn.jarallax.noConflict = function () {
jQuery.fn.jarallax = oldJqPlugin;
return this;
};
"use strict";
var global = __webpack_require__(0);
/**
* `requestAnimationFrame()`
*/
var request = global.requestAnimationFrame || global.webkitRequestAnimationFrame || global.mozRequestAnimationFrame || fallback;
var prev = +new Date();
function fallback(fn) {
var curr = +new Date();
var ms = Math.max(0, 16 - (curr - prev));
var req = setTimeout(fn, ms);
return prev = curr, req;
}
// data-jarallax initialization
addEventListener(window, 'DOMContentLoaded', function () {
plugin(document.querySelectorAll('[data-jarallax]'));
});
}());
/**
* `cancelAnimationFrame()`
*/
var cancel = global.cancelAnimationFrame || global.webkitCancelAnimationFrame || global.mozCancelAnimationFrame || clearTimeout;
if (Function.prototype.bind) {
request = request.bind(global);
cancel = cancel.bind(global);
}
exports = module.exports = request;
exports.cancel = cancel;
/***/ })
/******/ ]);

6

dist/jarallax.min.js
/*!
* Name : Just Another Parallax [Jarallax]
* Version : 1.9.3
* Version : 1.10.0
* Author : nK <https://nkdev.info>
* GitHub : https://github.com/nk-o/jarallax
*/
!function(){"use strict";function e(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function t(e,t,i){e.addEventListener(t,i)}function i(e){p=window.innerWidth||document.documentElement.clientWidth,d=window.innerHeight||document.documentElement.clientHeight,"object"!==("undefined"==typeof e?"undefined":a(e))||"load"!==e.type&&"DOMContentLoaded"!==e.type||(f=!0)}function n(){if(g.length){u=void 0!==window.pageYOffset?window.pageYOffset:(document.documentElement||document.body.parentNode||document.body).scrollTop;var e=f||!y||y.width!==p||y.height!==d,t=e||!y||y.y!==u;f=!1,(e||t)&&(g.forEach(function(i){e&&i.onResize(),t&&i.onScroll()}),y={width:p,height:d,y:u}),m(n)}}var o=function(){function e(e,t){for(var i=0;i<t.length;i++){var n=t[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,i,n){return i&&e(t.prototype,i),n&&e(t,n),t}}(),a="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},r=function(){for(var e="transform WebkitTransform MozTransform".split(" "),t=document.createElement("div"),i=0;i<e.length;i++)if(t&&void 0!==t.style[e[i]])return e[i];return!1}(),l=navigator.userAgent,s=l.toLowerCase().indexOf("android")>-1,c=/iPad|iPhone|iPod/.test(l)&&!window.MSStream,m=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||function(e){setTimeout(e,1e3/60)},p=void 0,d=void 0,u=void 0,f=!1;i(),t(window,"resize",i),t(window,"orientationchange",i),t(window,"load",i),t(window,"DOMContentLoaded",i);var g=[],y=!1,h=0,v=function(){function t(i,n){e(this,t);var o=this;o.instanceID=h++,o.$item=i,o.defaults={type:"scroll",speed:.5,imgSrc:null,imgElement:".jarallax-img",imgSize:"cover",imgPosition:"50% 50%",imgRepeat:"no-repeat",keepImg:!1,elementInViewport:null,zIndex:-100,noAndroid:!1,noIos:!1,videoSrc:null,videoStartTime:0,videoEndTime:0,videoVolume:0,videoPlayOnlyVisible:!0,onScroll:null,onInit:null,onDestroy:null,onCoverImage:null};var r=o.$item.getAttribute("data-jarallax"),l=JSON.parse(r||"{}");r&&console.warn("Detected usage of deprecated data-jarallax JSON options, you should use pure data-attribute options. See info here - https://github.com/nk-o/jarallax/issues/53");var m=o.$item.dataset||{},p={};Object.keys(m).forEach(function(e){var t=e.substr(0,1).toLowerCase()+e.substr(1);t&&"undefined"!=typeof o.defaults[t]&&(p[t]=m[e])}),o.options=o.extend({},o.defaults,l,p,n),o.pureOptions=o.extend({},o.options),Object.keys(o.options).forEach(function(e){"true"===o.options[e]?o.options[e]=!0:"false"===o.options[e]&&(o.options[e]=!1)}),o.options.speed=Math.min(2,Math.max(-1,parseFloat(o.options.speed)));var d=o.options.elementInViewport;d&&"object"===("undefined"==typeof d?"undefined":a(d))&&"undefined"!=typeof d.length&&(d=d[0]),d instanceof Element||(d=null),o.options.elementInViewport=d,o.image={src:o.options.imgSrc||null,$container:null,useImgTag:!1,position:s||c?"absolute":"fixed"},o.initImg()&&o.canInitParallax()&&o.init()}return o(t,[{key:"css",value:function(e,t){return"string"==typeof t?window.getComputedStyle(e).getPropertyValue(t):(t.transform&&r&&(t[r]=t.transform),Object.keys(t).forEach(function(i){e.style[i]=t[i]}),e)}},{key:"extend",value:function(e){var t=arguments;return e=e||{},Object.keys(arguments).forEach(function(i){t[i]&&Object.keys(t[i]).forEach(function(n){e[n]=t[i][n]})}),e}},{key:"getWindowData",value:function(){return{width:p,height:d,y:u}}},{key:"initImg",value:function(){var e=this,t=e.options.imgElement;return t&&"string"==typeof t&&(t=e.$item.querySelector(t)),t instanceof Element||(t=null),t&&(e.options.keepImg?e.image.$item=t.cloneNode(!0):(e.image.$item=t,e.image.$itemParent=t.parentNode),e.image.useImgTag=!0),!!e.image.$item||(null===e.image.src&&(e.image.src=e.css(e.$item,"background-image").replace(/^url\(['"]?/g,"").replace(/['"]?\)$/g,"")),!(!e.image.src||"none"===e.image.src))}},{key:"canInitParallax",value:function(){return r&&!(s&&this.options.noAndroid)&&!(c&&this.options.noIos)}},{key:"init",value:function(){var e=this,t={position:"absolute",top:0,left:0,width:"100%",height:"100%",overflow:"hidden",pointerEvents:"none"},i={};if(!e.options.keepImg){var n=e.$item.getAttribute("style");if(n&&e.$item.setAttribute("data-jarallax-original-styles",n),e.image.useImgTag){var o=e.image.$item.getAttribute("style");o&&e.image.$item.setAttribute("data-jarallax-original-styles",o)}}if("static"===e.css(e.$item,"position")&&e.css(e.$item,{position:"relative"}),"auto"===e.css(e.$item,"z-index")&&e.css(e.$item,{zIndex:0}),e.image.$container=document.createElement("div"),e.css(e.image.$container,t),e.css(e.image.$container,{"z-index":e.options.zIndex}),e.image.$container.setAttribute("id","jarallax-container-"+e.instanceID),e.$item.appendChild(e.image.$container),e.image.useImgTag?i=e.extend({"object-fit":e.options.imgSize,"object-position":e.options.imgPosition,"font-family":"object-fit: "+e.options.imgSize+"; object-position: "+e.options.imgPosition+";","max-width":"none"},t,i):(e.image.$item=document.createElement("div"),i=e.extend({"background-position":e.options.imgPosition,"background-size":e.options.imgSize,"background-repeat":e.options.imgRepeat,"background-image":'url("'+e.image.src+'")'},t,i)),"opacity"!==e.options.type&&"scale"!==e.options.type&&"scale-opacity"!==e.options.type&&1!==e.options.speed||(e.image.position="absolute"),"fixed"===e.image.position)for(var a=0,r=e.$item;null!==r&&r!==document&&0===a;){var l=e.css(r,"-webkit-transform")||e.css(r,"-moz-transform")||e.css(r,"transform");l&&"none"!==l&&(a=1,e.image.position="absolute"),r=r.parentNode}i.position=e.image.position,e.css(e.image.$item,i),e.image.$container.appendChild(e.image.$item),e.coverImage(),e.clipContainer(),e.onScroll(!0),e.options.onInit&&e.options.onInit.call(e),"none"!==e.css(e.$item,"background-image")&&e.css(e.$item,{"background-image":"none"}),e.addToParallaxList()}},{key:"addToParallaxList",value:function(){g.push(this),1===g.length&&n()}},{key:"removeFromParallaxList",value:function(){var e=this;g.forEach(function(t,i){t.instanceID===e.instanceID&&g.splice(i,1)})}},{key:"destroy",value:function(){var e=this;e.removeFromParallaxList();var t=e.$item.getAttribute("data-jarallax-original-styles");if(e.$item.removeAttribute("data-jarallax-original-styles"),t?e.$item.setAttribute("style",t):e.$item.removeAttribute("style"),e.image.useImgTag){var i=e.image.$item.getAttribute("data-jarallax-original-styles");e.image.$item.removeAttribute("data-jarallax-original-styles"),i?e.image.$item.setAttribute("style",t):e.image.$item.removeAttribute("style"),e.image.$itemParent&&e.image.$itemParent.appendChild(e.image.$item)}e.$clipStyles&&e.$clipStyles.parentNode.removeChild(e.$clipStyles),e.image.$container&&e.image.$container.parentNode.removeChild(e.image.$container),e.options.onDestroy&&e.options.onDestroy.call(e),delete e.$item.jarallax}},{key:"clipContainer",value:function(){if("fixed"===this.image.position){var e=this,t=e.image.$container.getBoundingClientRect(),i=t.width,n=t.height;if(!e.$clipStyles){e.$clipStyles=document.createElement("style"),e.$clipStyles.setAttribute("type","text/css"),e.$clipStyles.setAttribute("id","jarallax-clip-"+e.instanceID);var o=document.head||document.getElementsByTagName("head")[0];o.appendChild(e.$clipStyles)}var a="#jarallax-container-"+e.instanceID+" {\n clip: rect(0 "+i+"px "+n+"px 0);\n clip: rect(0, "+i+"px, "+n+"px, 0);\n }";e.$clipStyles.styleSheet?e.$clipStyles.styleSheet.cssText=a:e.$clipStyles.innerHTML=a}}},{key:"coverImage",value:function(){var e=this,t=e.image.$container.getBoundingClientRect(),i=t.height,n=e.options.speed,o="scroll"===e.options.type||"scroll-opacity"===e.options.type,a=0,r=i,l=0;return o&&(a=n<0?n*Math.max(i,d):n*(i+d),n>1?r=Math.abs(a-d):n<0?r=a/n+Math.abs(a):r+=Math.abs(d-i)*(1-n),a/=2),e.parallaxScrollDistance=a,l=o?(d-r)/2:(i-r)/2,e.css(e.image.$item,{height:r+"px",marginTop:l+"px",left:"fixed"===e.image.position?t.left+"px":"0",width:t.width+"px"}),e.options.onCoverImage&&e.options.onCoverImage.call(e),{image:{height:r,marginTop:l},container:t}}},{key:"isVisible",value:function(){return this.isElementInViewport||!1}},{key:"onScroll",value:function(e){var t=this,i=t.$item.getBoundingClientRect(),n=i.top,o=i.height,a={},r=i;if(t.options.elementInViewport&&(r=t.options.elementInViewport.getBoundingClientRect()),t.isElementInViewport=r.bottom>=0&&r.right>=0&&r.top<=d&&r.left<=p,e||t.isElementInViewport){var l=Math.max(0,n),s=Math.max(0,o+n),c=Math.max(0,-n),m=Math.max(0,n+o-d),u=Math.max(0,o-(n+o-d)),f=Math.max(0,-n+d-o),g=1-2*(d-n)/(d+o),y=1;if(o<d?y=1-(c||m)/o:s<=d?y=s/d:u<=d&&(y=u/d),"opacity"!==t.options.type&&"scale-opacity"!==t.options.type&&"scroll-opacity"!==t.options.type||(a.transform="translate3d(0,0,0)",a.opacity=y),"scale"===t.options.type||"scale-opacity"===t.options.type){var h=1;t.options.speed<0?h-=t.options.speed*y:h+=t.options.speed*(1-y),a.transform="scale("+h+") translate3d(0,0,0)"}if("scroll"===t.options.type||"scroll-opacity"===t.options.type){var v=t.parallaxScrollDistance*g;"absolute"===t.image.position&&(v-=n),a.transform="translate3d(0,"+v+"px,0)"}t.css(t.image.$item,a),t.options.onScroll&&t.options.onScroll.call(t,{section:i,beforeTop:l,beforeTopEnd:s,afterTop:c,beforeBottom:m,beforeBottomEnd:u,afterBottom:f,visiblePercent:y,fromViewportCenter:g})}}},{key:"onResize",value:function(){this.coverImage(),this.clipContainer()}}]),t}(),b=function(e){("object"===("undefined"==typeof HTMLElement?"undefined":a(HTMLElement))?e instanceof HTMLElement:e&&"object"===("undefined"==typeof e?"undefined":a(e))&&null!==e&&1===e.nodeType&&"string"==typeof e.nodeName)&&(e=[e]);var t=arguments[1],i=Array.prototype.slice.call(arguments,2),n=e.length,o=0,r=void 0;for(o;o<n;o++)if("object"===("undefined"==typeof t?"undefined":a(t))||"undefined"==typeof t?e[o].jarallax||(e[o].jarallax=new v(e[o],t)):e[o].jarallax&&(r=e[o].jarallax[t].apply(e[o].jarallax,i)),"undefined"!=typeof r)return r;return e};b.constructor=v;var x=window.jarallax;if(window.jarallax=b,window.jarallax.noConflict=function(){return window.jarallax=x,this},"undefined"!=typeof jQuery){var w=function(){var e=arguments||[];Array.prototype.unshift.call(e,this);var t=b.apply(window,e);return"object"!==("undefined"==typeof t?"undefined":a(t))?t:this};w.constructor=v;var $=jQuery.fn.jarallax;jQuery.fn.jarallax=w,jQuery.fn.jarallax.noConflict=function(){return jQuery.fn.jarallax=$,this}}t(window,"DOMContentLoaded",function(){b(document.querySelectorAll("[data-jarallax]"))})}();
*/!function(o){var n={};function i(e){if(n[e])return n[e].exports;var t=n[e]={i:e,l:!1,exports:{}};return o[e].call(t.exports,t,t.exports,i),t.l=!0,t.exports}i.m=o,i.c=n,i.d=function(e,t,o){i.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:o})},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,"a",t),t},i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.p="",i(i.s=11)}([function(o,e,t){"use strict";(function(e){var t;t="undefined"!=typeof window?window:void 0!==e?e:"undefined"!=typeof self?self:{},o.exports=t}).call(e,t(2))},function(e,t,o){"use strict";e.exports=new Promise(function(e){"interactive"===document.readyState||"complete"===document.readyState?e():document.addEventListener("DOMContentLoaded",function(){e()},{capture:!0,once:!0,passive:!0})})},function(e,t,o){"use strict";var n,i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};n=function(){return this}();try{n=n||Function("return this")()||(0,eval)("this")}catch(e){"object"===("undefined"==typeof window?"undefined":i(window))&&(n=window)}e.exports=n},,,,,,,,,function(e,t,o){e.exports=o(12)},function(e,t,o){"use strict";var n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},i=l(o(1)),a=o(0),r=l(o(13));function l(e){return e&&e.__esModule?e:{default:e}}var s=a.window.jarallax;if(a.window.jarallax=r.default,a.window.jarallax.noConflict=function(){return a.window.jarallax=s,this},void 0!==a.jQuery){var c=function(){var e=arguments||[];Array.prototype.unshift.call(e,this);var t=r.default.apply(a.window,e);return"object"!==(void 0===t?"undefined":n(t))?t:this};c.constructor=r.default.constructor;var u=a.jQuery.fn.jarallax;a.jQuery.fn.jarallax=c,a.jQuery.fn.jarallax.noConflict=function(){return a.jQuery.fn.jarallax=u,this}}i.default.then(function(){(0,r.default)(document.querySelectorAll("[data-jarallax]"))})},function(e,$,j){"use strict";(function(e){Object.defineProperty($,"__esModule",{value:!0});var d=function(e,t){if(Array.isArray(e))return e;if(Symbol.iterator in Object(e))return function(e,t){var o=[],n=!0,i=!1,a=void 0;try{for(var r,l=e[Symbol.iterator]();!(n=(r=l.next()).done)&&(o.push(r.value),!t||o.length!==t);n=!0);}catch(e){i=!0,a=e}finally{try{!n&&l.return&&l.return()}finally{if(i)throw a}}return o}(e,t);throw new TypeError("Invalid attempt to destructure non-iterable instance")},t=function(){function n(e,t){for(var o=0;o<t.length;o++){var n=t[o];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(e,t,o){return t&&n(e.prototype,t),o&&n(e,o),e}}(),p="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},o=a(j(1)),n=a(j(14)),i=j(0);function a(e){return e&&e.__esModule?e:{default:e}}var r=function(){for(var e="transform WebkitTransform MozTransform".split(" "),t=document.createElement("div"),o=0;o<e.length;o++)if(t&&void 0!==t.style[e[o]])return e[o];return!1}(),b=void 0,v=void 0,l=void 0,s=!1,c=!1;function u(e){b=i.window.innerWidth||document.documentElement.clientWidth,v=i.window.innerHeight||document.documentElement.clientHeight,"object"!==(void 0===e?"undefined":p(e))||"load"!==e.type&&"dom-loaded"!==e.type||(s=!0)}u(),i.window.addEventListener("resize",u),i.window.addEventListener("orientationchange",u),i.window.addEventListener("load",u),o.default.then(function(){u({type:"dom-loaded"})});var m=[],f=!1;function y(){if(m.length){l=void 0!==i.window.pageYOffset?i.window.pageYOffset:(document.documentElement||document.body.parentNode||document.body).scrollTop;var t=s||!f||f.width!==b||f.height!==v,o=c||t||!f||f.y!==l;c=s=!1,(t||o)&&(m.forEach(function(e){t&&e.onResize(),o&&e.onScroll()}),f={width:b,height:v,y:l}),(0,n.default)(y)}}var g=!!e.ResizeObserver&&new e.ResizeObserver(function(e){e&&e.length&&(0,n.default)(function(){e.forEach(function(e){e.target&&e.target.jarallax&&(s||e.target.jarallax.onResize(),c=!0)})})}),h=0,x=function(){function u(e,t){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,u);var o=this;o.instanceID=h++,o.$item=e,o.defaults={type:"scroll",speed:.5,imgSrc:null,imgElement:".jarallax-img",imgSize:"cover",imgPosition:"50% 50%",imgRepeat:"no-repeat",keepImg:!1,elementInViewport:null,zIndex:-100,disableParallax:!1,disableVideo:!1,automaticResize:!0,videoSrc:null,videoStartTime:0,videoEndTime:0,videoVolume:0,videoPlayOnlyVisible:!0,onScroll:null,onInit:null,onDestroy:null,onCoverImage:null};var n=o.$item.getAttribute("data-jarallax"),i=JSON.parse(n||"{}");n&&console.warn("Detected usage of deprecated data-jarallax JSON options, you should use pure data-attribute options. See info here - https://github.com/nk-o/jarallax/issues/53");var a=o.$item.dataset||{},r={};if(Object.keys(a).forEach(function(e){var t=e.substr(0,1).toLowerCase()+e.substr(1);t&&void 0!==o.defaults[t]&&(r[t]=a[e])}),o.options=o.extend({},o.defaults,i,r,t),o.pureOptions=o.extend({},o.options),Object.keys(o.options).forEach(function(e){"true"===o.options[e]?o.options[e]=!0:"false"===o.options[e]&&(o.options[e]=!1)}),o.options.speed=Math.min(2,Math.max(-1,parseFloat(o.options.speed))),(o.options.noAndroid||o.options.noIos)&&(console.warn("Detected usage of deprecated noAndroid or noIos options, you should use disableParallax option. See info here - https://github.com/nk-o/jarallax/#disable-on-mobile-devices"),o.options.disableParallax||(o.options.noIos&&o.options.noAndroid?o.options.disableParallax=/iPad|iPhone|iPod|Android/:o.options.noIos?o.options.disableParallax=/iPad|iPhone|iPod/:o.options.noAndroid&&(o.options.disableParallax=/Android/))),"string"==typeof o.options.disableParallax&&(o.options.disableParallax=new RegExp(o.options.disableParallax)),o.options.disableParallax instanceof RegExp){var l=o.options.disableParallax;o.options.disableParallax=function(){return l.test(navigator.userAgent)}}if("function"!=typeof o.options.disableParallax&&(o.options.disableParallax=function(){return!1}),"string"==typeof o.options.disableVideo&&(o.options.disableVideo=new RegExp(o.options.disableVideo)),o.options.disableVideo instanceof RegExp){var s=o.options.disableVideo;o.options.disableVideo=function(){return s.test(navigator.userAgent)}}"function"!=typeof o.options.disableVideo&&(o.options.disableVideo=function(){return!1});var c=o.options.elementInViewport;c&&"object"===(void 0===c?"undefined":p(c))&&void 0!==c.length&&(c=d(c,1)[0]);c instanceof Element||(c=null),o.options.elementInViewport=c,o.image={src:o.options.imgSrc||null,$container:null,useImgTag:!1,position:/iPad|iPhone|iPod|Android/.test(navigator.userAgent)?"absolute":"fixed"},o.initImg()&&o.canInitParallax()&&o.init()}return t(u,[{key:"css",value:function(t,o){return"string"==typeof o?i.window.getComputedStyle(t).getPropertyValue(o):(o.transform&&r&&(o[r]=o.transform),Object.keys(o).forEach(function(e){t.style[e]=o[e]}),t)}},{key:"extend",value:function(o){var n=arguments;return o=o||{},Object.keys(arguments).forEach(function(t){n[t]&&Object.keys(n[t]).forEach(function(e){o[e]=n[t][e]})}),o}},{key:"getWindowData",value:function(){return{width:b,height:v,y:l}}},{key:"initImg",value:function(){var e=this,t=e.options.imgElement;return t&&"string"==typeof t&&(t=e.$item.querySelector(t)),t instanceof Element||(t=null),t&&(e.options.keepImg?e.image.$item=t.cloneNode(!0):(e.image.$item=t,e.image.$itemParent=t.parentNode),e.image.useImgTag=!0),!!e.image.$item||(null===e.image.src&&(e.image.src=e.css(e.$item,"background-image").replace(/^url\(['"]?/g,"").replace(/['"]?\)$/g,"")),!(!e.image.src||"none"===e.image.src))}},{key:"canInitParallax",value:function(){return r&&!this.options.disableParallax()}},{key:"init",value:function(){var e=this,t={position:"absolute",top:0,left:0,width:"100%",height:"100%",overflow:"hidden",pointerEvents:"none"},o={};if(!e.options.keepImg){var n=e.$item.getAttribute("style");if(n&&e.$item.setAttribute("data-jarallax-original-styles",n),e.image.useImgTag){var i=e.image.$item.getAttribute("style");i&&e.image.$item.setAttribute("data-jarallax-original-styles",i)}}if("static"===e.css(e.$item,"position")&&e.css(e.$item,{position:"relative"}),"auto"===e.css(e.$item,"z-index")&&e.css(e.$item,{zIndex:0}),e.image.$container=document.createElement("div"),e.css(e.image.$container,t),e.css(e.image.$container,{"z-index":e.options.zIndex}),e.image.$container.setAttribute("id","jarallax-container-"+e.instanceID),e.$item.appendChild(e.image.$container),e.image.useImgTag?o=e.extend({"object-fit":e.options.imgSize,"object-position":e.options.imgPosition,"font-family":"object-fit: "+e.options.imgSize+"; object-position: "+e.options.imgPosition+";","max-width":"none"},t,o):(e.image.$item=document.createElement("div"),e.image.src&&(o=e.extend({"background-position":e.options.imgPosition,"background-size":e.options.imgSize,"background-repeat":e.options.imgRepeat,"background-image":'url("'+e.image.src+'")'},t,o))),"opacity"!==e.options.type&&"scale"!==e.options.type&&"scale-opacity"!==e.options.type&&1!==e.options.speed||(e.image.position="absolute"),"fixed"===e.image.position)for(var a=0,r=e.$item;null!==r&&r!==document&&0===a;){var l=e.css(r,"-webkit-transform")||e.css(r,"-moz-transform")||e.css(r,"transform");l&&"none"!==l&&(a=1,e.image.position="absolute"),r=r.parentNode}o.position=e.image.position,e.css(e.image.$item,o),e.image.$container.appendChild(e.image.$item),e.coverImage(),e.clipContainer(),e.onScroll(!0),e.options.automaticResize&&g&&g.observe(e.$item),e.options.onInit&&e.options.onInit.call(e),"none"!==e.css(e.$item,"background-image")&&e.css(e.$item,{"background-image":"none"}),e.addToParallaxList()}},{key:"addToParallaxList",value:function(){m.push(this),1===m.length&&y()}},{key:"removeFromParallaxList",value:function(){var o=this;m.forEach(function(e,t){e.instanceID===o.instanceID&&m.splice(t,1)})}},{key:"destroy",value:function(){var e=this;e.removeFromParallaxList();var t=e.$item.getAttribute("data-jarallax-original-styles");if(e.$item.removeAttribute("data-jarallax-original-styles"),t?e.$item.setAttribute("style",t):e.$item.removeAttribute("style"),e.image.useImgTag){var o=e.image.$item.getAttribute("data-jarallax-original-styles");e.image.$item.removeAttribute("data-jarallax-original-styles"),o?e.image.$item.setAttribute("style",t):e.image.$item.removeAttribute("style"),e.image.$itemParent&&e.image.$itemParent.appendChild(e.image.$item)}e.$clipStyles&&e.$clipStyles.parentNode.removeChild(e.$clipStyles),e.image.$container&&e.image.$container.parentNode.removeChild(e.image.$container),e.options.onDestroy&&e.options.onDestroy.call(e),delete e.$item.jarallax}},{key:"clipContainer",value:function(){if("fixed"===this.image.position){var e=this,t=e.image.$container.getBoundingClientRect(),o=t.width,n=t.height;if(!e.$clipStyles)e.$clipStyles=document.createElement("style"),e.$clipStyles.setAttribute("type","text/css"),e.$clipStyles.setAttribute("id","jarallax-clip-"+e.instanceID),(document.head||document.getElementsByTagName("head")[0]).appendChild(e.$clipStyles);var i="#jarallax-container-"+e.instanceID+" {\n clip: rect(0 "+o+"px "+n+"px 0);\n clip: rect(0, "+o+"px, "+n+"px, 0);\n }";e.$clipStyles.styleSheet?e.$clipStyles.styleSheet.cssText=i:e.$clipStyles.innerHTML=i}}},{key:"coverImage",value:function(){var e=this,t=e.image.$container.getBoundingClientRect(),o=t.height,n=e.options.speed,i="scroll"===e.options.type||"scroll-opacity"===e.options.type,a=0,r=o,l=0;return i&&(a=n<0?n*Math.max(o,v):n*(o+v),1<n?r=Math.abs(a-v):n<0?r=a/n+Math.abs(a):r+=Math.abs(v-o)*(1-n),a/=2),e.parallaxScrollDistance=a,l=i?(v-r)/2:(o-r)/2,e.css(e.image.$item,{height:r+"px",marginTop:l+"px",left:"fixed"===e.image.position?t.left+"px":"0",width:t.width+"px"}),e.options.onCoverImage&&e.options.onCoverImage.call(e),{image:{height:r,marginTop:l},container:t}}},{key:"isVisible",value:function(){return this.isElementInViewport||!1}},{key:"onScroll",value:function(e){var t=this,o=t.$item.getBoundingClientRect(),n=o.top,i=o.height,a={},r=o;if(t.options.elementInViewport&&(r=t.options.elementInViewport.getBoundingClientRect()),t.isElementInViewport=0<=r.bottom&&0<=r.right&&r.top<=v&&r.left<=b,e||t.isElementInViewport){var l=Math.max(0,n),s=Math.max(0,i+n),c=Math.max(0,-n),u=Math.max(0,n+i-v),d=Math.max(0,i-(n+i-v)),p=Math.max(0,-n+v-i),m=1-2*(v-n)/(v+i),f=1;if(i<v?f=1-(c||u)/i:s<=v?f=s/v:d<=v&&(f=d/v),"opacity"!==t.options.type&&"scale-opacity"!==t.options.type&&"scroll-opacity"!==t.options.type||(a.transform="translate3d(0,0,0)",a.opacity=f),"scale"===t.options.type||"scale-opacity"===t.options.type){var y=1;t.options.speed<0?y-=t.options.speed*f:y+=t.options.speed*(1-f),a.transform="scale("+y+") translate3d(0,0,0)"}if("scroll"===t.options.type||"scroll-opacity"===t.options.type){var g=t.parallaxScrollDistance*m;"absolute"===t.image.position&&(g-=n),a.transform="translate3d(0,"+g+"px,0)"}t.css(t.image.$item,a),t.options.onScroll&&t.options.onScroll.call(t,{section:o,beforeTop:l,beforeTopEnd:s,afterTop:c,beforeBottom:u,beforeBottomEnd:d,afterBottom:p,visiblePercent:f,fromViewportCenter:m})}}},{key:"onResize",value:function(){this.coverImage(),this.clipContainer()}}]),u}(),w=function(e){("object"===("undefined"==typeof HTMLElement?"undefined":p(HTMLElement))?e instanceof HTMLElement:e&&"object"===(void 0===e?"undefined":p(e))&&null!==e&&1===e.nodeType&&"string"==typeof e.nodeName)&&(e=[e]);for(var t=arguments[1],o=Array.prototype.slice.call(arguments,2),n=e.length,i=0,a=void 0;i<n;i++)if("object"===(void 0===t?"undefined":p(t))||void 0===t?e[i].jarallax||(e[i].jarallax=new x(e[i],t)):e[i].jarallax&&(a=e[i].jarallax[t].apply(e[i].jarallax,o)),void 0!==a)return a;return e};w.constructor=x,$.default=w}).call($,j(2))},function(e,t,o){"use strict";var n=o(0),i=n.requestAnimationFrame||n.webkitRequestAnimationFrame||n.mozRequestAnimationFrame||function(e){var t=+new Date,o=Math.max(0,16-(t-a)),n=setTimeout(e,o);return a=t,n},a=+new Date;var r=n.cancelAnimationFrame||n.webkitCancelAnimationFrame||n.mozCancelAnimationFrame||clearTimeout;Function.prototype.bind&&(i=i.bind(n),r=r.bind(n)),(e.exports=i).cancel=r}]);
//# sourceMappingURL=jarallax.min.js.map

63

package.json
{
"name": "jarallax",
"version": "1.9.3",
"version": "1.10.0",
"description": "Smooth parallax scrolling effect for background images, videos and inline elements. Code in pure JavaScript with NO dependencies + jQuery supported. Youtube, Vimeo and Local Videos parallax supported.",
"license": "WTFPL",
"license": "MIT",
"homepage": "https://github.com/nk-o/jarallax",
"author": "nK <https://nkdev.info>",
"main": "dist/jarallax.min.js",
"main": "index.js",
"files": [

@@ -14,5 +14,9 @@ "src",

"scripts": {
"build": "gulp",
"watch": "gulp watch",
"test": "gulp test"
"dev": "gulp dev",
"build": "gulp build",
"test": "gulp test",
"js-lint": "eslint src/",
"js-lint-fix": "eslint --fix src/",
"precommit": "npm run js-lint",
"prepush": "npm run js-lint"
},

@@ -35,24 +39,39 @@ "repository": {

"devDependencies": {
"babel-preset-env": "^1.6.0",
"@types/jquery": "^3.3.1",
"babel": "^6.23.0",
"del": "^2.2.2",
"eslint": "^4.6.0",
"eslint-config-airbnb": "^15.1.0",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-jsx-a11y": "^5.1.1",
"eslint-plugin-react": "^7.4.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.6.1",
"browser-sync": "^2.23.6",
"del": "^3.0.0",
"eslint": "^4.18.2",
"eslint-config-airbnb": "^16.1.0",
"eslint-plugin-import": "^2.9.0",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-react": "^7.7.0",
"gulp": "^3.9.1",
"gulp-header": "^1.8.9",
"gulp-header": "^2.0.5",
"gulp-if": "^2.0.2",
"gulp-iife": "^0.3.0",
"gulp-load-plugins": "^1.5.0",
"gulp-babel": "^6.1.2",
"gulp-plumber": "^1.2.0",
"gulp-rename": "^1.2.2",
"gulp-uglify": "^2.0.0",
"node-qunit-phantomjs": "^1.5.0",
"qunitjs": "^2.4.0",
"gulp-sequence": "^1.0.0",
"gulp-sourcemaps": "^2.6.4",
"gulp-uglify": "^3.0.0",
"gulp-watch": "^5.0.0",
"husky": "^0.14.3",
"jquery": "^3.3.1",
"json-file": "^0.1.0",
"jquery": "^3.2.1",
"object-fit-images": "^3.2.3"
"node-qunit-phantomjs": "^2.0.0",
"object-fit-images": "^3.2.3",
"qunitjs": "^2.4.1",
"vinyl-named": "^1.1.0",
"webpack-stream": "^4.0.2"
},
"dependencies": {
"dom-loaded": "^1.0.1",
"global": "^4.3.2",
"rafl": "^1.2.2",
"video-worker": "^1.0.1"
}
}
}

119

README.md

@@ -1,3 +0,3 @@

# Just Another Parallax
Smooth parallax scrolling effect for background images, videos and inline elements. Code in pure JavaScript with ***NO dependencies*** + jQuery supported. ***Youtube***, ***Vimeo*** and ***Local Videos*** parallax supported.
## Just Another Parallax
Smooth parallax scrolling effect for background images, videos and inline elements. Code in pure JavaScript with ***NO dependencies*** + jQuery supported. ***YouTube***, ***Vimeo*** and ***Local Videos*** parallax supported.

@@ -21,36 +21,44 @@ ## [Demo](https://free.nkdev.info/jarallax/)

## Install
Include Jarallax plugin. Also include jQuery before jarallax if you want to use it.
## Getting Started
### Download
Download scripts directly from this repository and link it in your HTML file
### Node.js
`npm install jarallax --save`
```javascript
import {
jarallax,
jarallaxElement,
jarallaxVideo
} from 'jarallax';
jarallaxVideo();
jarallaxElement();
```
Note: in this way is not available jQuery and data-attribute automatic initialization. Use javascript call instead ([Example](#b-javascript-way)).
### Browser
```html
<!-- Jarallax -->
<script src="jarallax/jarallax.js"></script>
<script src="jarallax/dist/jarallax.min.js"></script>
<!-- Include it if you want to use Video parallax -->
<script src="jarallax/jarallax-video.js"></script>
<script src="jarallax/dist/jarallax.min.js"></script>
<!-- Include it if you want to parallax any element -->
<script src="jarallax/jarallax-element.js"></script>
<script src="jarallax/dist/jarallax.min.js"></script>
```
### CDN
Link directly from [cdnjs](https://cdnjs.com/)
#### CDN
Link directly from [unpkg](https://unpkg.com/)
```html
<!-- Jarallax -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jarallax/1.9.2/jarallax.min.js"></script>
<script src="https://unpkg.com/jarallax@1.9/dist/jarallax.min.js"></script>
<!-- Include it if you want to use Video parallax -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jarallax/1.9.2/jarallax-video.min.js"></script>
<script src="https://unpkg.com/jarallax@1.9/dist/jarallax-video.min.js"></script>
<!-- Include it if you want to parallax any element -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jarallax/1.9.2/jarallax-element.min.js"></script>
<script src="https://unpkg.com/jarallax@1.9/dist/jarallax-element.min.js"></script>
```
### Package managers
npm: `npm install jarallax -- save`
Bower: `bower install jarallax --save`
## Supported plugins

@@ -147,3 +155,3 @@ You can add these plugins before jarallax initialize.

<!-- Element will be parallaxed on 250 pixels from the screen center by Y axis and on -100 pixels from the screen senter by X axis -->
<!-- Element will be parallaxed on 250 pixels from the screen center by Y axis and on -100 pixels from the screen center by X axis -->
<div data-jarallax-element="250 -100">

@@ -155,3 +163,3 @@ Your content here...

# Options
## Options
Options can be passed in data attributes or in object when you initialize jarallax from script.

@@ -171,5 +179,30 @@

zIndex | number | `-100` | z-index of parallax container.
noAndroid | boolean | `false` | Disable parallax on Android devices.
noIos | boolean | `false` | Disable parallax on iOs devices.
disableParallax | RegExp / function | - | Disable parallax on specific user agents (using regular expression) or with function return value. The image will be set on the background.
disableVideo | RegExp / function | - | Disable video load on specific user agents (using regular expression) or with function return value. The image will be set on the background.
automaticResize | boolean | false | **Experimental!** Automatically recalculate parallax size and position when the size of parallax block changed (dynamic content inside). Uses ResizeObserver, which has a small browsers compatible. Recommended using with polyfill [https://github.com/que-etc/resize-observer-polyfill](https://github.com/que-etc/resize-observer-polyfill).
### Disable on mobile devices
You can disable parallax on mobile devices using regular expression or function in option `disableParallax`.
Example:
```javascript
jarallax(document.querySelectorAll('.jarallax'), {
disableParallax: /iPad|iPhone|iPod|Android/,
disableVideo: /iPad|iPhone|iPod|Android/
});
```
Or using function. Example:
```javascript
jarallax(document.querySelectorAll('.jarallax'), {
disableParallax: function () {
return /iPad|iPhone|iPod|Android/.test(navigator.userAgent);
},
disableVideo: function () {
return /iPad|iPhone|iPod|Android/.test(navigator.userAgent);
}
});
```
### Options For Video (+ supported all default options)

@@ -193,5 +226,6 @@ Required `jarallax/jarallax-video.js` file.

speed | mixed | `0 0` | Parallax distance in pixels. Supported Y and X axis. Example: `100 200`. Also you can use data attribute `data-jarallax-element`.
threshold | mixed | `null null` | Specify threshold for the parallax effect to kick in. For example, if you pass `0 0`, the element will start to move only after it has been scrolled to the middle of the viewport.
# Events
Evenets used the same way as Options.
## Events
Events used the same way as Options.

@@ -205,3 +239,3 @@ Name | Description

## onScroll event
### onScroll event
```javascript

@@ -241,3 +275,3 @@ jarallax(document.querySelectorAll('.jarallax'), {

# Methods
## Methods
Name | Result | Description

@@ -250,4 +284,4 @@ :--- | :----- | :----------

## Call methods example
### A. JavaScript way
### Call methods example
#### A. JavaScript way
```javascript

@@ -257,3 +291,3 @@ jarallax(document.querySelectorAll('.jarallax'), 'destroy');

### B. jQuery way
#### B. jQuery way
```javascript

@@ -264,3 +298,3 @@ $('.jarallax').jarallax('destroy');

# No conflict
## No conflict
If you already have global ***jarallax*** variable or ***jQuery.fn.jarallax***, you can rename plugin.

@@ -277,4 +311,20 @@ ### A. JavaScript way

## For Developers
# Real Usage Examples
### Installation
* Run `npm install` in the command line. Or if you need to update some dependencies, run `npm update`
### Building
* `npm run dev` to run build and start local server with files watcher
* `npm run build` to run build
### Linting
* `npm run js-lint` to show eslint errors
* `npm run js-lint-fix` to automatically fix some of the eslint errors
### Test
* `npm run test` to run unit tests
## Real Usage Examples
* [Khaki](https://demo.nkdev.info/#khaki)

@@ -284,7 +334,4 @@ * [Godlike](https://demo.nkdev.info/#godlike)

# Credits
## Credits
Images https://unsplash.com/
Local Video https://videos.pexels.com/
# License
Copyright (c) 2017 nK Licensed under the WTFPL license.

93

src/jarallax-element.js

@@ -1,88 +0,11 @@

/*!
* Name : Elements Extension for Jarallax
* Version : 1.0.0
* Author : nK http://nkdev.info
* GitHub : https://github.com/nk-o/jarallax
*/
(function () {
if (typeof jarallax === 'undefined') {
return;
}
import domLoaded from 'dom-loaded';
import jarallaxElement from './jarallax-element.esm';
// init events
function addEventListener(el, eventName, handler) {
el.addEventListener(eventName, handler);
}
jarallaxElement();
const Jarallax = jarallax.constructor;
// redefine default methods
[
'initImg',
'canInitParallax',
'init',
'destroy',
'clipContainer',
'coverImage',
'isVisible',
'onScroll',
'onResize',
].forEach((key) => {
const def = Jarallax.prototype[key];
Jarallax.prototype[key] = function () {
const self = this;
const args = arguments || [];
if (key === 'initImg' && self.$item.getAttribute('data-jarallax-element') !== null) {
self.options.type = 'element';
self.pureOptions.speed = self.$item.getAttribute('data-jarallax-element') || self.pureOptions.speed;
}
if (self.options.type !== 'element') {
return def.apply(self, args);
}
switch (key) {
case 'init':
const speedArr = self.pureOptions.speed.split(' ');
self.options.speed = self.pureOptions.speed || 0;
self.options.speedY = speedArr[0] ? parseFloat(speedArr[0]) : 0;
self.options.speedX = speedArr[1] ? parseFloat(speedArr[1]) : 0;
self.onResize();
self.onScroll();
self.addToParallaxList();
break;
case 'onResize':
const defTransform = self.css(self.$item, 'transform');
self.css(self.$item, { transform: '' });
const rect = self.$item.getBoundingClientRect();
self.itemData = {
width: rect.width,
height: rect.height,
y: rect.top + self.getWindowData().y,
x: rect.left,
};
self.css(self.$item, { transform: defTransform });
break;
case 'onScroll':
const wnd = self.getWindowData();
const centerPercent = (wnd.y + wnd.height / 2 - self.itemData.y) / (wnd.height / 2);
const moveY = centerPercent * self.options.speedY;
const moveX = centerPercent * self.options.speedX;
self.css(self.$item, { transform: `translate3d(${moveX}px,${moveY}px,0)` });
break;
case 'initImg':
case 'isVisible':
case 'clipContainer':
case 'coverImage':
return true;
default:
return def.apply(self, args);
}
};
});
// data-jarallax-element initialization
addEventListener(window, 'DOMContentLoaded', () => {
// data-jarallax-element initialization
domLoaded.then(() => {
if (typeof jarallax !== 'undefined') {
jarallax(document.querySelectorAll('[data-jarallax-element]'));
});
}());
}
});

891

src/jarallax-video.js

@@ -0,886 +1,11 @@

import domLoaded from 'dom-loaded';
import jarallaxVideo from './jarallax-video.esm';
// Deferred
// thanks http://stackoverflow.com/questions/18096715/implement-deferred-object-without-using-jquery
function Deferred() {
this._done = [];
this._fail = [];
}
Deferred.prototype = {
execute(list, args) {
let i = list.length;
args = Array.prototype.slice.call(args);
while (i--) {
list[i].apply(null, args);
}
},
resolve() {
this.execute(this._done, arguments);
},
reject() {
this.execute(this._fail, arguments);
},
done(callback) {
this._done.push(callback);
},
fail(callback) {
this._fail.push(callback);
},
};
jarallaxVideo();
// init events
function addEventListener(el, eventName, handler) {
el.addEventListener(eventName, handler);
}
let ID = 0;
let YoutubeAPIadded = 0;
let VimeoAPIadded = 0;
let loadingYoutubePlayer = 0;
let loadingVimeoPlayer = 0;
const loadingYoutubeDeffer = new Deferred();
const loadingVimeoDeffer = new Deferred();
class VideoWorker {
constructor(url, options) {
const self = this;
self.url = url;
self.options_default = {
autoplay: 1,
loop: 1,
mute: 1,
volume: 0,
controls: 0,
// start / end video time in ms
startTime: 0,
endTime: 0,
};
self.options = self.extend({}, self.options_default, options);
// check URL
self.videoID = self.parseURL(url);
// init
if (self.videoID) {
self.ID = ID++;
self.loadAPI();
self.init();
}
// data-jarallax-video initialization
domLoaded.then(() => {
if (typeof jarallax !== 'undefined') {
jarallax(document.querySelectorAll('[data-jarallax-video]'));
}
// Extend like jQuery.extend
extend(out) {
out = out || {};
Object.keys(arguments).forEach((i) => {
if (!arguments[i]) {
return;
}
Object.keys(arguments[i]).forEach((key) => {
out[key] = arguments[i][key];
});
});
return out;
}
parseURL(url) {
// parse youtube ID
function getYoutubeID(ytUrl) {
// eslint-disable-next-line no-useless-escape
const regExp = /.*(?:youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=)([^#\&\?]*).*/;
const match = ytUrl.match(regExp);
return match && match[1].length === 11 ? match[1] : false;
}
// parse vimeo ID
function getVimeoID(vmUrl) {
// eslint-disable-next-line no-useless-escape
const regExp = /https?:\/\/(?:www\.|player\.)?vimeo.com\/(?:channels\/(?:\w+\/)?|groups\/([^\/]*)\/videos\/|album\/(\d+)\/video\/|video\/|)(\d+)(?:$|\/|\?)/;
const match = vmUrl.match(regExp);
return match && match[3] ? match[3] : false;
}
// parse local string
function getLocalVideos(locUrl) {
// eslint-disable-next-line no-useless-escape
const videoFormats = locUrl.split(/,(?=mp4\:|webm\:|ogv\:|ogg\:)/);
const result = {};
let ready = 0;
videoFormats.forEach((val) => {
// eslint-disable-next-line no-useless-escape
const match = val.match(/^(mp4|webm|ogv|ogg)\:(.*)/);
if (match && match[1] && match[2]) {
result[match[1] === 'ogv' ? 'ogg' : match[1]] = match[2];
ready = 1;
}
});
return ready ? result : false;
}
const Youtube = getYoutubeID(url);
const Vimeo = getVimeoID(url);
const Local = getLocalVideos(url);
if (Youtube) {
this.type = 'youtube';
return Youtube;
} else if (Vimeo) {
this.type = 'vimeo';
return Vimeo;
} else if (Local) {
this.type = 'local';
return Local;
}
return false;
}
isValid() {
return !!this.videoID;
}
// events
on(name, callback) {
this.userEventsList = this.userEventsList || [];
// add new callback in events list
(this.userEventsList[name] || (this.userEventsList[name] = [])).push(callback);
}
off(name, callback) {
if (!this.userEventsList || !this.userEventsList[name]) {
return;
}
if (!callback) {
delete this.userEventsList[name];
} else {
this.userEventsList[name].forEach((val, key) => {
if (val === callback) {
this.userEventsList[name][key] = false;
}
});
}
}
fire(name) {
const args = [].slice.call(arguments, 1);
if (this.userEventsList && typeof this.userEventsList[name] !== 'undefined') {
this.userEventsList[name].forEach((val) => {
// call with all arguments
if (val) {
val.apply(this, args);
}
});
}
}
play(start) {
const self = this;
if (!self.player) {
return;
}
if (self.type === 'youtube' && self.player.playVideo) {
if (typeof start !== 'undefined') {
self.player.seekTo(start || 0);
}
if (YT.PlayerState.PLAYING !== self.player.getPlayerState()) {
self.player.playVideo();
}
}
if (self.type === 'vimeo') {
if (typeof start !== 'undefined') {
self.player.setCurrentTime(start);
}
self.player.getPaused().then((paused) => {
if (paused) {
self.player.play();
}
});
}
if (self.type === 'local') {
if (typeof start !== 'undefined') {
self.player.currentTime = start;
}
if (self.player.paused) {
self.player.play();
}
}
}
pause() {
const self = this;
if (!self.player) {
return;
}
if (self.type === 'youtube' && self.player.pauseVideo) {
if (YT.PlayerState.PLAYING === self.player.getPlayerState()) {
self.player.pauseVideo();
}
}
if (self.type === 'vimeo') {
self.player.getPaused().then((paused) => {
if (!paused) {
self.player.pause();
}
});
}
if (self.type === 'local') {
if (!self.player.paused) {
self.player.pause();
}
}
}
getImageURL(callback) {
const self = this;
if (self.videoImage) {
callback(self.videoImage);
return;
}
if (self.type === 'youtube') {
const availableSizes = [
'maxresdefault',
'sddefault',
'hqdefault',
'0',
];
let step = 0;
const tempImg = new Image();
tempImg.onload = function () {
// if no thumbnail, youtube add their own image with width = 120px
if ((this.naturalWidth || this.width) !== 120 || step === availableSizes.length - 1) {
// ok
self.videoImage = `https://img.youtube.com/vi/${self.videoID}/${availableSizes[step]}.jpg`;
callback(self.videoImage);
} else {
// try another size
step++;
this.src = `https://img.youtube.com/vi/${self.videoID}/${availableSizes[step]}.jpg`;
}
};
tempImg.src = `https://img.youtube.com/vi/${self.videoID}/${availableSizes[step]}.jpg`;
}
if (self.type === 'vimeo') {
let request = new XMLHttpRequest();
request.open('GET', `https://vimeo.com/api/v2/video/${self.videoID}.json`, true);
request.onreadystatechange = function () {
if (this.readyState === 4) {
if (this.status >= 200 && this.status < 400) {
// Success!
const response = JSON.parse(this.responseText);
self.videoImage = response[0].thumbnail_large;
callback(self.videoImage);
} else {
// Error :(
}
}
};
request.send();
request = null;
}
}
getIframe(callback) {
const self = this;
// return generated iframe
if (self.$iframe) {
callback(self.$iframe);
return;
}
// generate new iframe
self.onAPIready(() => {
let hiddenDiv;
if (!self.$iframe) {
hiddenDiv = document.createElement('div');
hiddenDiv.style.display = 'none';
}
// Youtube
if (self.type === 'youtube') {
self.playerOptions = {};
self.playerOptions.videoId = self.videoID;
self.playerOptions.playerVars = {
autohide: 1,
rel: 0,
autoplay: 0,
// autoplay enable on mobile devices
playsinline: 1,
};
// hide controls
if (!self.options.controls) {
self.playerOptions.playerVars.iv_load_policy = 3;
self.playerOptions.playerVars.modestbranding = 1;
self.playerOptions.playerVars.controls = 0;
self.playerOptions.playerVars.showinfo = 0;
self.playerOptions.playerVars.disablekb = 1;
}
// events
let ytStarted;
let ytProgressInterval;
self.playerOptions.events = {
onReady(e) {
// mute
if (self.options.mute) {
e.target.mute();
} else if (self.options.volume) {
e.target.setVolume(self.options.volume);
}
// autoplay
if (self.options.autoplay) {
self.play(self.options.startTime);
}
self.fire('ready', e);
},
onStateChange(e) {
// loop
if (self.options.loop && e.data === YT.PlayerState.ENDED) {
self.play(self.options.startTime);
}
if (!ytStarted && e.data === YT.PlayerState.PLAYING) {
ytStarted = 1;
self.fire('started', e);
}
if (e.data === YT.PlayerState.PLAYING) {
self.fire('play', e);
}
if (e.data === YT.PlayerState.PAUSED) {
self.fire('pause', e);
}
if (e.data === YT.PlayerState.ENDED) {
self.fire('end', e);
}
// check for end of video and play again or stop
if (self.options.endTime) {
if (e.data === YT.PlayerState.PLAYING) {
ytProgressInterval = setInterval(() => {
if (self.options.endTime && self.player.getCurrentTime() >= self.options.endTime) {
if (self.options.loop) {
self.play(self.options.startTime);
} else {
self.pause();
}
}
}, 150);
} else {
clearInterval(ytProgressInterval);
}
}
},
};
const firstInit = !self.$iframe;
if (firstInit) {
const div = document.createElement('div');
div.setAttribute('id', self.playerID);
hiddenDiv.appendChild(div);
document.body.appendChild(hiddenDiv);
}
self.player = self.player || new window.YT.Player(self.playerID, self.playerOptions);
if (firstInit) {
self.$iframe = document.getElementById(self.playerID);
// get video width and height
self.videoWidth = parseInt(self.$iframe.getAttribute('width'), 10) || 1280;
self.videoHeight = parseInt(self.$iframe.getAttribute('height'), 10) || 720;
}
}
// Vimeo
if (self.type === 'vimeo') {
self.playerOptions = '';
self.playerOptions += `player_id=${self.playerID}`;
self.playerOptions += '&autopause=0';
self.playerOptions += '&transparent=0';
// hide controls
if (!self.options.controls) {
self.playerOptions += '&badge=0&byline=0&portrait=0&title=0';
}
// autoplay
self.playerOptions += `&autoplay=${self.options.autoplay ? '1' : '0'}`;
// loop
self.playerOptions += `&loop=${self.options.loop ? 1 : 0}`;
if (!self.$iframe) {
self.$iframe = document.createElement('iframe');
self.$iframe.setAttribute('id', self.playerID);
self.$iframe.setAttribute('src', `https://player.vimeo.com/video/${self.videoID}?${self.playerOptions}`);
self.$iframe.setAttribute('frameborder', '0');
hiddenDiv.appendChild(self.$iframe);
document.body.appendChild(hiddenDiv);
}
self.player = self.player || new Vimeo.Player(self.$iframe);
// get video width and height
self.player.getVideoWidth().then((width) => {
self.videoWidth = width || 1280;
});
self.player.getVideoHeight().then((height) => {
self.videoHeight = height || 720;
});
// set current time for autoplay
if (self.options.startTime && self.options.autoplay) {
self.player.setCurrentTime(self.options.startTime);
}
// mute
if (self.options.mute) {
self.player.setVolume(0);
} else if (self.options.volume) {
self.player.setVolume(self.options.volume);
}
let vmStarted;
self.player.on('timeupdate', (e) => {
if (!vmStarted) {
self.fire('started', e);
}
vmStarted = 1;
// check for end of video and play again or stop
if (self.options.endTime) {
if (self.options.endTime && e.seconds >= self.options.endTime) {
if (self.options.loop) {
self.play(self.options.startTime);
} else {
self.pause();
}
}
}
});
self.player.on('play', (e) => {
self.fire('play', e);
// check for the start time and start with it
if (self.options.startTime && e.seconds === 0) {
self.play(self.options.startTime);
}
});
self.player.on('pause', (e) => {
self.fire('pause', e);
});
self.player.on('ended', (e) => {
self.fire('end', e);
});
self.player.on('loaded', (e) => {
self.fire('ready', e);
});
}
// Local
function addSourceToLocal(element, src, type) {
const source = document.createElement('source');
source.src = src;
source.type = type;
element.appendChild(source);
}
if (self.type === 'local') {
if (!self.$iframe) {
self.$iframe = document.createElement('video');
// mute
if (self.options.mute) {
self.$iframe.muted = true;
} else if (self.$iframe.volume) {
self.$iframe.volume = self.options.volume / 100;
}
// loop
if (self.options.loop) {
self.$iframe.loop = true;
}
// autoplay enable on mobile devices
self.$iframe.setAttribute('playsinline', '');
self.$iframe.setAttribute('webkit-playsinline', '');
self.$iframe.setAttribute('id', self.playerID);
hiddenDiv.appendChild(self.$iframe);
document.body.appendChild(hiddenDiv);
Object.keys(self.videoID).forEach((key) => {
addSourceToLocal(self.$iframe, self.videoID[key], `video/${key}`);
});
}
self.player = self.player || self.$iframe;
let locStarted;
addEventListener(self.player, 'playing', (e) => {
if (!locStarted) {
self.fire('started', e);
}
locStarted = 1;
});
addEventListener(self.player, 'timeupdate', function () {
// check for end of video and play again or stop
if (self.options.endTime) {
if (self.options.endTime && this.currentTime >= self.options.endTime) {
if (self.options.loop) {
self.play(self.options.startTime);
} else {
self.pause();
}
}
}
});
addEventListener(self.player, 'play', (e) => {
self.fire('play', e);
});
addEventListener(self.player, 'pause', (e) => {
self.fire('pause', e);
});
addEventListener(self.player, 'ended', (e) => {
self.fire('end', e);
});
addEventListener(self.player, 'loadedmetadata', function () {
// get video width and height
self.videoWidth = this.videoWidth || 1280;
self.videoHeight = this.videoHeight || 720;
self.fire('ready');
// autoplay
if (self.options.autoplay) {
self.play(self.options.startTime);
}
});
}
callback(self.$iframe);
});
}
init() {
const self = this;
self.playerID = `VideoWorker-${self.ID}`;
}
loadAPI() {
const self = this;
if (YoutubeAPIadded && VimeoAPIadded) {
return;
}
let src = '';
// load Youtube API
if (self.type === 'youtube' && !YoutubeAPIadded) {
YoutubeAPIadded = 1;
src = 'https://www.youtube.com/iframe_api';
}
// load Vimeo API
if (self.type === 'vimeo' && !VimeoAPIadded) {
VimeoAPIadded = 1;
src = 'https://player.vimeo.com/api/player.js';
}
if (!src) {
return;
}
// add script in head section
let tag = document.createElement('script');
let head = document.getElementsByTagName('head')[0];
tag.src = src;
head.appendChild(tag);
head = null;
tag = null;
}
onAPIready(callback) {
const self = this;
// Youtube
if (self.type === 'youtube') {
// Listen for global YT player callback
if ((typeof YT === 'undefined' || YT.loaded === 0) && !loadingYoutubePlayer) {
// Prevents Ready event from being called twice
loadingYoutubePlayer = 1;
// Creates deferred so, other players know when to wait.
window.onYouTubeIframeAPIReady = function () {
window.onYouTubeIframeAPIReady = null;
loadingYoutubeDeffer.resolve('done');
callback();
};
} else if (typeof YT === 'object' && YT.loaded === 1) {
callback();
} else {
loadingYoutubeDeffer.done(() => {
callback();
});
}
}
// Vimeo
if (self.type === 'vimeo') {
if (typeof Vimeo === 'undefined' && !loadingVimeoPlayer) {
loadingVimeoPlayer = 1;
const vimeoInterval = setInterval(() => {
if (typeof Vimeo !== 'undefined') {
clearInterval(vimeoInterval);
loadingVimeoDeffer.resolve('done');
callback();
}
}, 20);
} else if (typeof Vimeo !== 'undefined') {
callback();
} else {
loadingVimeoDeffer.done(() => {
callback();
});
}
}
// Local
if (self.type === 'local') {
callback();
}
}
}
window.VideoWorker = VideoWorker;
/*!
* Name : Video Background Extension for Jarallax
* Version : 1.0.0
* Author : nK http://nkdev.info
* GitHub : https://github.com/nk-o/jarallax
*/
(function () {
if (typeof jarallax === 'undefined') {
return;
}
const Jarallax = jarallax.constructor;
// append video after init Jarallax
const defInit = Jarallax.prototype.init;
Jarallax.prototype.init = function () {
const self = this;
defInit.apply(self);
if (self.video) {
self.video.getIframe((iframe) => {
const $parent = iframe.parentNode;
self.css(iframe, {
position: self.image.position,
top: '0px',
left: '0px',
right: '0px',
bottom: '0px',
width: '100%',
height: '100%',
maxWidth: 'none',
maxHeight: 'none',
margin: 0,
zIndex: -1,
});
self.$video = iframe;
self.image.$container.appendChild(iframe);
// remove parent iframe element (created by VideoWorker)
$parent.parentNode.removeChild($parent);
});
}
};
// cover video
const defCoverImage = Jarallax.prototype.coverImage;
Jarallax.prototype.coverImage = function () {
const self = this;
const imageData = defCoverImage.apply(self);
const node = self.image.$item.nodeName;
if (imageData && self.video && (node === 'IFRAME' || node === 'VIDEO')) {
let h = imageData.image.height;
let w = h * self.image.width / self.image.height;
let ml = (imageData.container.width - w) / 2;
let mt = imageData.image.marginTop;
if (imageData.container.width > w) {
w = imageData.container.width;
h = w * self.image.height / self.image.width;
ml = 0;
mt += (imageData.image.height - h) / 2;
}
// add video height over than need to hide controls
if (node === 'IFRAME') {
h += 400;
mt -= 200;
}
self.css(self.$video, {
width: `${w}px`,
marginLeft: `${ml}px`,
height: `${h}px`,
marginTop: `${mt}px`,
});
}
return imageData;
};
// init video
const defInitImg = Jarallax.prototype.initImg;
Jarallax.prototype.initImg = function () {
const self = this;
const defaultResult = defInitImg.apply(self);
if (!self.options.videoSrc) {
self.options.videoSrc = self.$item.getAttribute('data-jarallax-video') || null;
}
if (self.options.videoSrc) {
self.defaultInitImgResult = defaultResult;
return true;
}
return defaultResult;
};
const defCanInitParallax = Jarallax.prototype.canInitParallax;
Jarallax.prototype.canInitParallax = function () {
const self = this;
const defaultResult = defCanInitParallax.apply(self);
if (!self.options.videoSrc) {
return defaultResult;
}
const video = new VideoWorker(self.options.videoSrc, {
startTime: self.options.videoStartTime || 0,
endTime: self.options.videoEndTime || 0,
mute: self.options.videoVolume ? 0 : 1,
volume: self.options.videoVolume || 0,
});
if (video.isValid()) {
// if parallax will not be inited, we can add thumbnail on background.
if (!defaultResult) {
if (!self.defaultInitImgResult) {
video.getImageURL((url) => {
// save default user styles
const curStyle = self.$item.getAttribute('style');
if (curStyle) {
self.$item.setAttribute('data-jarallax-original-styles', curStyle);
}
// set new background
self.css(self.$item, {
'background-image': `url("${url}")`,
'background-position': 'center',
'background-size': 'cover',
});
});
}
// init video
} else {
video.on('ready', () => {
if (self.options.videoPlayOnlyVisible) {
const oldOnScroll = self.onScroll;
self.onScroll = function () {
oldOnScroll.apply(self);
if (self.isVisible()) {
video.play();
} else {
video.pause();
}
};
} else {
video.play();
}
});
video.on('started', () => {
self.image.$default_item = self.image.$item;
self.image.$item = self.$video;
// set video width and height
self.image.width = self.video.videoWidth || 1280;
self.image.height = self.video.videoHeight || 720;
self.options.imgWidth = self.image.width;
self.options.imgHeight = self.image.height;
self.coverImage();
self.clipContainer();
self.onScroll();
// hide image
if (self.image.$default_item) {
self.image.$default_item.style.display = 'none';
}
});
self.video = video;
// set image if not exists
if (!self.defaultInitImgResult) {
if (video.type !== 'local') {
video.getImageURL((url) => {
self.image.src = url;
self.init();
});
return false;
}
// set empty image on local video if not defined
self.image.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
return true;
}
}
}
return defaultResult;
};
// Destroy video parallax
const defDestroy = Jarallax.prototype.destroy;
Jarallax.prototype.destroy = function () {
const self = this;
if (self.image.$default_item) {
self.image.$item = self.image.$default_item;
delete self.image.$default_item;
}
defDestroy.apply(self);
};
// data-jarallax-video initialization
addEventListener(window, 'DOMContentLoaded', () => {
jarallax(document.querySelectorAll('[data-jarallax-video]'));
});
}());
});

700

src/jarallax.js

@@ -0,692 +1,8 @@

import domLoaded from 'dom-loaded';
import { window, jQuery } from 'global';
import jarallax from './jarallax.esm';
const supportTransform = (() => {
const prefixes = 'transform WebkitTransform MozTransform'.split(' ');
const div = document.createElement('div');
for (let i = 0; i < prefixes.length; i++) {
if (div && div.style[prefixes[i]] !== undefined) {
return prefixes[i];
}
}
return false;
})();
const ua = navigator.userAgent;
const isAndroid = ua.toLowerCase().indexOf('android') > -1;
const isIOs = /iPad|iPhone|iPod/.test(ua) && !window.MSStream;
// requestAnimationFrame polyfill
const rAF = window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function (callback) {
setTimeout(callback, 1000 / 60);
};
// init events
function addEventListener(el, eventName, handler) {
el.addEventListener(eventName, handler);
}
// Window data
let wndW;
let wndH;
let wndY;
let forceResizeParallax = false;
function updateWndVars(e) {
wndW = window.innerWidth || document.documentElement.clientWidth;
wndH = window.innerHeight || document.documentElement.clientHeight;
if (typeof e === 'object' && (e.type === 'load' || e.type === 'DOMContentLoaded')) {
forceResizeParallax = true;
}
}
updateWndVars();
addEventListener(window, 'resize', updateWndVars);
addEventListener(window, 'orientationchange', updateWndVars);
addEventListener(window, 'load', updateWndVars);
addEventListener(window, 'DOMContentLoaded', updateWndVars);
// list with all jarallax instances
// need to render all in one scroll/resize event
const jarallaxList = [];
// Animate if changed window size or scrolled page
let oldPageData = false;
function updateParallax() {
if (!jarallaxList.length) {
return;
}
if (window.pageYOffset !== undefined) {
wndY = window.pageYOffset;
} else {
wndY = (document.documentElement || document.body.parentNode || document.body).scrollTop;
}
const isResized = forceResizeParallax || !oldPageData || oldPageData.width !== wndW || oldPageData.height !== wndH;
const isScrolled = isResized || !oldPageData || oldPageData.y !== wndY;
forceResizeParallax = false;
if (isResized || isScrolled) {
jarallaxList.forEach((item) => {
if (isResized) {
item.onResize();
}
if (isScrolled) {
item.onScroll();
}
});
oldPageData = {
width: wndW,
height: wndH,
y: wndY,
};
}
rAF(updateParallax);
}
let instanceID = 0;
// Jarallax class
class Jarallax {
constructor(item, userOptions) {
const self = this;
self.instanceID = instanceID++;
self.$item = item;
self.defaults = {
type: 'scroll', // type of parallax: scroll, scale, opacity, scale-opacity, scroll-opacity
speed: 0.5, // supported value from -1 to 2
imgSrc: null,
imgElement: '.jarallax-img',
imgSize: 'cover',
imgPosition: '50% 50%',
imgRepeat: 'no-repeat', // supported only for background, not for <img> tag
keepImg: false, // keep <img> tag in it's default place
elementInViewport: null,
zIndex: -100,
noAndroid: false,
noIos: false,
// video
videoSrc: null,
videoStartTime: 0,
videoEndTime: 0,
videoVolume: 0,
videoPlayOnlyVisible: true,
// events
onScroll: null, // function(calculations) {}
onInit: null, // function() {}
onDestroy: null, // function() {}
onCoverImage: null, // function() {}
};
// DEPRECATED: old data-options
const deprecatedDataAttribute = self.$item.getAttribute('data-jarallax');
const oldDataOptions = JSON.parse(deprecatedDataAttribute || '{}');
if (deprecatedDataAttribute) {
console.warn('Detected usage of deprecated data-jarallax JSON options, you should use pure data-attribute options. See info here - https://github.com/nk-o/jarallax/issues/53');
}
// prepare data-options
const dataOptions = self.$item.dataset || {};
const pureDataOptions = {};
Object.keys(dataOptions).forEach((key) => {
const loweCaseOption = key.substr(0, 1).toLowerCase() + key.substr(1);
if (loweCaseOption && typeof self.defaults[loweCaseOption] !== 'undefined') {
pureDataOptions[loweCaseOption] = dataOptions[key];
}
});
self.options = self.extend({}, self.defaults, oldDataOptions, pureDataOptions, userOptions);
self.pureOptions = self.extend({}, self.options);
// prepare 'true' and 'false' strings to boolean
Object.keys(self.options).forEach((key) => {
if (self.options[key] === 'true') {
self.options[key] = true;
} else if (self.options[key] === 'false') {
self.options[key] = false;
}
});
// fix speed option [-1.0, 2.0]
self.options.speed = Math.min(2, Math.max(-1, parseFloat(self.options.speed)));
// custom element to check if parallax in viewport
let elementInVP = self.options.elementInViewport;
// get first item from array
if (elementInVP && typeof elementInVP === 'object' && typeof elementInVP.length !== 'undefined') {
elementInVP = elementInVP[0];
}
// check if dom element
if (!(elementInVP instanceof Element)) {
elementInVP = null;
}
self.options.elementInViewport = elementInVP;
self.image = {
src: self.options.imgSrc || null,
$container: null,
useImgTag: false,
// position fixed is needed for the most of browsers because absolute position have glitches
// on MacOS with smooth scroll there is a huge lags with absolute position - https://github.com/nk-o/jarallax/issues/75
// on mobile devices better scrolled with absolute position
position: isAndroid || isIOs ? 'absolute' : 'fixed',
};
if (self.initImg() && self.canInitParallax()) {
self.init();
}
}
// add styles to element
css(el, styles) {
if (typeof styles === 'string') {
return window.getComputedStyle(el).getPropertyValue(styles);
}
// add transform property with vendor prefix
if (styles.transform && supportTransform) {
styles[supportTransform] = styles.transform;
}
Object.keys(styles).forEach((key) => {
el.style[key] = styles[key];
});
return el;
}
// Extend like jQuery.extend
extend(out) {
out = out || {};
Object.keys(arguments).forEach((i) => {
if (!arguments[i]) {
return;
}
Object.keys(arguments[i]).forEach((key) => {
out[key] = arguments[i][key];
});
});
return out;
}
// get window size and scroll position. Useful for extensions
getWindowData() {
return {
width: wndW,
height: wndH,
y: wndY,
};
}
// Jarallax functions
initImg() {
const self = this;
// find image element
let $imgElement = self.options.imgElement;
if ($imgElement && typeof $imgElement === 'string') {
$imgElement = self.$item.querySelector($imgElement);
}
// check if dom element
if (!($imgElement instanceof Element)) {
$imgElement = null;
}
if ($imgElement) {
if (self.options.keepImg) {
self.image.$item = $imgElement.cloneNode(true);
} else {
self.image.$item = $imgElement;
self.image.$itemParent = $imgElement.parentNode;
}
self.image.useImgTag = true;
}
// true if there is img tag
if (self.image.$item) {
return true;
}
// get image src
if (self.image.src === null) {
self.image.src = self.css(self.$item, 'background-image').replace(/^url\(['"]?/g, '').replace(/['"]?\)$/g, '');
}
return !(!self.image.src || self.image.src === 'none');
}
canInitParallax() {
return supportTransform &&
!(isAndroid && this.options.noAndroid) &&
!(isIOs && this.options.noIos);
}
init() {
const self = this;
const containerStyles = {
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
overflow: 'hidden',
pointerEvents: 'none',
};
let imageStyles = {};
if (!self.options.keepImg) {
// save default user styles
const curStyle = self.$item.getAttribute('style');
if (curStyle) {
self.$item.setAttribute('data-jarallax-original-styles', curStyle);
}
if (self.image.useImgTag) {
const curImgStyle = self.image.$item.getAttribute('style');
if (curImgStyle) {
self.image.$item.setAttribute('data-jarallax-original-styles', curImgStyle);
}
}
}
// set relative position and z-index to the parent
if (self.css(self.$item, 'position') === 'static') {
self.css(self.$item, {
position: 'relative',
});
}
if (self.css(self.$item, 'z-index') === 'auto') {
self.css(self.$item, {
zIndex: 0,
});
}
// container for parallax image
self.image.$container = document.createElement('div');
self.css(self.image.$container, containerStyles);
self.css(self.image.$container, {
'z-index': self.options.zIndex,
});
self.image.$container.setAttribute('id', `jarallax-container-${self.instanceID}`);
self.$item.appendChild(self.image.$container);
// use img tag
if (self.image.useImgTag) {
imageStyles = self.extend({
'object-fit': self.options.imgSize,
'object-position': self.options.imgPosition,
// support for plugin https://github.com/bfred-it/object-fit-images
'font-family': `object-fit: ${self.options.imgSize}; object-position: ${self.options.imgPosition};`,
'max-width': 'none',
}, containerStyles, imageStyles);
// use div with background image
} else {
self.image.$item = document.createElement('div');
imageStyles = self.extend({
'background-position': self.options.imgPosition,
'background-size': self.options.imgSize,
'background-repeat': self.options.imgRepeat,
'background-image': `url("${self.image.src}")`,
}, containerStyles, imageStyles);
}
if (self.options.type === 'opacity' || self.options.type === 'scale' || self.options.type === 'scale-opacity' || self.options.speed === 1) {
self.image.position = 'absolute';
}
// check if one of parents have transform style (without this check, scroll transform will be inverted if used parallax with position fixed)
// discussion - https://github.com/nk-o/jarallax/issues/9
if (self.image.position === 'fixed') {
let parentWithTransform = 0;
let $itemParents = self.$item;
while ($itemParents !== null && $itemParents !== document && parentWithTransform === 0) {
const parentTransform = self.css($itemParents, '-webkit-transform') || self.css($itemParents, '-moz-transform') || self.css($itemParents, 'transform');
if (parentTransform && parentTransform !== 'none') {
parentWithTransform = 1;
self.image.position = 'absolute';
}
$itemParents = $itemParents.parentNode;
}
}
// add position to parallax block
imageStyles.position = self.image.position;
// insert parallax image
self.css(self.image.$item, imageStyles);
self.image.$container.appendChild(self.image.$item);
// set initial position and size
self.coverImage();
self.clipContainer();
self.onScroll(true);
// call onInit event
if (self.options.onInit) {
self.options.onInit.call(self);
}
// remove default user background
if (self.css(self.$item, 'background-image') !== 'none') {
self.css(self.$item, {
'background-image': 'none',
});
}
self.addToParallaxList();
}
// add to parallax instances list
addToParallaxList() {
jarallaxList.push(this);
if (jarallaxList.length === 1) {
updateParallax();
}
}
// remove from parallax instances list
removeFromParallaxList() {
const self = this;
jarallaxList.forEach((item, key) => {
if (item.instanceID === self.instanceID) {
jarallaxList.splice(key, 1);
}
});
}
destroy() {
const self = this;
self.removeFromParallaxList();
// return styles on container as before jarallax init
const originalStylesTag = self.$item.getAttribute('data-jarallax-original-styles');
self.$item.removeAttribute('data-jarallax-original-styles');
// null occurs if there is no style tag before jarallax init
if (!originalStylesTag) {
self.$item.removeAttribute('style');
} else {
self.$item.setAttribute('style', originalStylesTag);
}
if (self.image.useImgTag) {
// return styles on img tag as before jarallax init
const originalStylesImgTag = self.image.$item.getAttribute('data-jarallax-original-styles');
self.image.$item.removeAttribute('data-jarallax-original-styles');
// null occurs if there is no style tag before jarallax init
if (!originalStylesImgTag) {
self.image.$item.removeAttribute('style');
} else {
self.image.$item.setAttribute('style', originalStylesTag);
}
// move img tag to its default position
if (self.image.$itemParent) {
self.image.$itemParent.appendChild(self.image.$item);
}
}
// remove additional dom elements
if (self.$clipStyles) {
self.$clipStyles.parentNode.removeChild(self.$clipStyles);
}
if (self.image.$container) {
self.image.$container.parentNode.removeChild(self.image.$container);
}
// call onDestroy event
if (self.options.onDestroy) {
self.options.onDestroy.call(self);
}
// delete jarallax from item
delete self.$item.jarallax;
}
// it will remove some image overlapping
// overlapping occur due to an image position fixed inside absolute position element
clipContainer() {
// needed only when background in fixed position
if (this.image.position !== 'fixed') {
return;
}
const self = this;
const rect = self.image.$container.getBoundingClientRect();
const width = rect.width;
const height = rect.height;
if (!self.$clipStyles) {
self.$clipStyles = document.createElement('style');
self.$clipStyles.setAttribute('type', 'text/css');
self.$clipStyles.setAttribute('id', `jarallax-clip-${self.instanceID}`);
const head = document.head || document.getElementsByTagName('head')[0];
head.appendChild(self.$clipStyles);
}
const styles = `#jarallax-container-${self.instanceID} {
clip: rect(0 ${width}px ${height}px 0);
clip: rect(0, ${width}px, ${height}px, 0);
}`;
// add clip styles inline (this method need for support IE8 and less browsers)
if (self.$clipStyles.styleSheet) {
self.$clipStyles.styleSheet.cssText = styles;
} else {
self.$clipStyles.innerHTML = styles;
}
}
coverImage() {
const self = this;
const rect = self.image.$container.getBoundingClientRect();
const contH = rect.height;
const speed = self.options.speed;
const isScroll = self.options.type === 'scroll' || self.options.type === 'scroll-opacity';
let scrollDist = 0;
let resultH = contH;
let resultMT = 0;
// scroll parallax
if (isScroll) {
// scroll distance and height for image
if (speed < 0) {
scrollDist = speed * Math.max(contH, wndH);
} else {
scrollDist = speed * (contH + wndH);
}
// size for scroll parallax
if (speed > 1) {
resultH = Math.abs(scrollDist - wndH);
} else if (speed < 0) {
resultH = scrollDist / speed + Math.abs(scrollDist);
} else {
resultH += Math.abs(wndH - contH) * (1 - speed);
}
scrollDist /= 2;
}
// store scroll distance
self.parallaxScrollDistance = scrollDist;
// vertical center
if (isScroll) {
resultMT = (wndH - resultH) / 2;
} else {
resultMT = (contH - resultH) / 2;
}
// apply result to item
self.css(self.image.$item, {
height: `${resultH}px`,
marginTop: `${resultMT}px`,
left: self.image.position === 'fixed' ? `${rect.left}px` : '0',
width: `${rect.width}px`,
});
// call onCoverImage event
if (self.options.onCoverImage) {
self.options.onCoverImage.call(self);
}
// return some useful data. Used in the video cover function
return {
image: {
height: resultH,
marginTop: resultMT,
},
container: rect,
};
}
isVisible() {
return this.isElementInViewport || false;
}
onScroll(force) {
const self = this;
const rect = self.$item.getBoundingClientRect();
const contT = rect.top;
const contH = rect.height;
const styles = {};
// check if in viewport
let viewportRect = rect;
if (self.options.elementInViewport) {
viewportRect = self.options.elementInViewport.getBoundingClientRect();
}
self.isElementInViewport =
viewportRect.bottom >= 0 &&
viewportRect.right >= 0 &&
viewportRect.top <= wndH &&
viewportRect.left <= wndW;
// stop calculations if item is not in viewport
if (force ? false : !self.isElementInViewport) {
return;
}
// calculate parallax helping variables
const beforeTop = Math.max(0, contT);
const beforeTopEnd = Math.max(0, contH + contT);
const afterTop = Math.max(0, -contT);
const beforeBottom = Math.max(0, contT + contH - wndH);
const beforeBottomEnd = Math.max(0, contH - (contT + contH - wndH));
const afterBottom = Math.max(0, -contT + wndH - contH);
const fromViewportCenter = 1 - 2 * (wndH - contT) / (wndH + contH);
// calculate on how percent of section is visible
let visiblePercent = 1;
if (contH < wndH) {
visiblePercent = 1 - (afterTop || beforeBottom) / contH;
} else if (beforeTopEnd <= wndH) {
visiblePercent = beforeTopEnd / wndH;
} else if (beforeBottomEnd <= wndH) {
visiblePercent = beforeBottomEnd / wndH;
}
// opacity
if (self.options.type === 'opacity' || self.options.type === 'scale-opacity' || self.options.type === 'scroll-opacity') {
styles.transform = 'translate3d(0,0,0)';
styles.opacity = visiblePercent;
}
// scale
if (self.options.type === 'scale' || self.options.type === 'scale-opacity') {
let scale = 1;
if (self.options.speed < 0) {
scale -= self.options.speed * visiblePercent;
} else {
scale += self.options.speed * (1 - visiblePercent);
}
styles.transform = `scale(${scale}) translate3d(0,0,0)`;
}
// scroll
if (self.options.type === 'scroll' || self.options.type === 'scroll-opacity') {
let positionY = self.parallaxScrollDistance * fromViewportCenter;
// fix if parallax block in absolute position
if (self.image.position === 'absolute') {
positionY -= contT;
}
styles.transform = `translate3d(0,${positionY}px,0)`;
}
self.css(self.image.$item, styles);
// call onScroll event
if (self.options.onScroll) {
self.options.onScroll.call(self, {
section: rect,
beforeTop,
beforeTopEnd,
afterTop,
beforeBottom,
beforeBottomEnd,
afterBottom,
visiblePercent,
fromViewportCenter,
});
}
}
onResize() {
this.coverImage();
this.clipContainer();
}
}
// global definition
const plugin = function (items) {
// check for dom element
// thanks: http://stackoverflow.com/questions/384286/javascript-isdom-how-do-you-check-if-a-javascript-object-is-a-dom-object
if (typeof HTMLElement === 'object' ? items instanceof HTMLElement : items && typeof items === 'object' && items !== null && items.nodeType === 1 && typeof items.nodeName === 'string') {
items = [items];
}
const options = arguments[1];
const args = Array.prototype.slice.call(arguments, 2);
const len = items.length;
let k = 0;
let ret;
for (k; k < len; k++) {
if (typeof options === 'object' || typeof options === 'undefined') {
if (!items[k].jarallax) {
items[k].jarallax = new Jarallax(items[k], options);
}
} else if (items[k].jarallax) {
// eslint-disable-next-line prefer-spread
ret = items[k].jarallax[options].apply(items[k].jarallax, args);
}
if (typeof ret !== 'undefined') {
return ret;
}
}
return items;
};
plugin.constructor = Jarallax;
// no conflict
const oldPlugin = window.jarallax;
window.jarallax = plugin;
window.jarallax = jarallax;
window.jarallax.noConflict = function () {

@@ -702,6 +18,6 @@ window.jarallax = oldPlugin;

Array.prototype.unshift.call(args, this);
const res = plugin.apply(window, args);
const res = jarallax.apply(window, args);
return typeof res !== 'object' ? res : this;
};
jQueryPlugin.constructor = Jarallax;
jQueryPlugin.constructor = jarallax.constructor;

@@ -718,4 +34,4 @@ // no conflict

// data-jarallax initialization
addEventListener(window, 'DOMContentLoaded', () => {
plugin(document.querySelectorAll('[data-jarallax]'));
domLoaded.then(() => {
jarallax(document.querySelectorAll('[data-jarallax]'));
});
LICENSE

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc