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

ukiyojs

Package Overview
Dependencies
Maintainers
1
Versions
28
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

ukiyojs - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

253

dist/ukiyo.min.js

@@ -1,1 +0,252 @@

!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.Ukiyo=t():e.Ukiyo=t()}(self,(function(){return function(){"use strict";var e={d:function(t,i){for(var r in i)e.o(i,r)&&!e.o(t,r)&&Object.defineProperty(t,r,{enumerable:!0,get:i[r]})},o:function(e,t){return Object.prototype.hasOwnProperty.call(e,t)}},t={};e.d(t,{default:function(){return h}});var i=function(e){return new Promise((function(t,i){var r=new Image;r.onload=function(){return t(r)},r.onerror=function(e){return i(e)},r.src=e}))};function r(e,t){(null==t||t>e.length)&&(t=e.length);for(var i=0,r=new Array(t);i<t;i++)r[i]=e[i];return r}function n(e,t){var i=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),i.push.apply(i,r)}return i}function s(e){for(var t=1;t<arguments.length;t++){var i=null!=arguments[t]?arguments[t]:{};t%2?n(Object(i),!0).forEach((function(t){o(e,t,i[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(i)):n(Object(i)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(i,t))}))}return e}function o(e,t,i){return t in e?Object.defineProperty(e,t,{value:i,enumerable:!0,configurable:!0,writable:!0}):e[t]=i,e}function l(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){for(var i=0;i<t.length;i++){var r=t[i];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}var h=function(){function e(t){var r=this,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(l(this,e),t){var o={scale:1.5,speed:1.5,wrapperClass:null,willChange:!1},a=t.getAttribute("data-u-scale"),h=t.getAttribute("data-u-speed"),p=t.getAttribute("data-u-willchange");if(this.element=t,this.wrapper=document.createElement("div"),this.options=s(s({},o),n),null!==a&&(this.options.scale=a),null!==h&&(this.options.speed=h),null!==p&&(this.options.willChange=!0),this.isIMGtag="img"===this.element.tagName.toLowerCase(),this.overflow=null,this.observer=null,this.requestId=null,this.timer=null,this.reset=this.reset.bind(this),this.isInit=!1,this.isIMGtag){var u=this.element.getAttribute("src");i(u).then((function(e){r._init()}))}else this._init()}}var t,n;return t=e,(n=[{key:"_init",value:function(){this.isInit||(this._setupElements(),this._observer(),this._addEvent(),this.isInit=!0)}},{key:"_setupElements",value:function(){this._setStyles(!0);var e=this.element.getAttribute("data-u-wrapper-class");if(this.options.wrapperClass||e){var t=e||this.options.wrapperClass;this.wrapper.classList.add(t)}var i=this.element.closest("picture");null!==i?(i.parentNode.insertBefore(this.wrapper,i),this.wrapper.appendChild(i)):(this.element.parentNode.insertBefore(this.wrapper,this.element),this.wrapper.appendChild(this.element))}},{key:"_setStyles",value:function(e){var t=this.element.clientHeight,i=this.element.clientWidth,r=document.defaultView.getComputedStyle(this.element),n="absolute"===r.position;this.overflow=t-t*this.options.scale,"0px"===r.marginTop&&"0px"===r.marginBottom||(this.wrapper.style.marginTop=r.marginTop,this.wrapper.style.marginBottom=r.marginBottom,this.element.style.marginTop="0",this.element.style.marginBottom="0"),"auto"!==r.inset&&(this.wrapper.style.top=r.top,this.wrapper.style.right=r.right,this.wrapper.style.bottom=r.bottom,this.wrapper.style.left=r.left,this.element.style.top="0",this.element.style.right="0",this.element.style.bottom="0",this.element.style.left="0"),"none"!==r.transform&&(this.wrapper.style.transform=r.transform),"auto"!==r.zIndex&&(this.wrapper.style.zIndex=r.zIndex),this.wrapper.style.position=n?"absolute":"relative",e&&(this.wrapper.style.width="100%",this.wrapper.style.overflow="hidden",this.element.style.display="block",this.element.style.overflow="hidden",this.element.style.backfaceVisibility="hidden","0px"!==r.padding&&(this.element.style.padding="0"),this.isIMGtag?this.element.style.objectFit="cover":this.element.style.backgroundPosition="center"),n&&(this.wrapper.style.width=i+"px",this.element.style.width="100%"),"none"!==r.maxHeight&&(this.wrapper.style.maxHeight=r.maxHeight,this.element.style.maxHeight="none"),"0px"!==r.minHeight&&(this.wrapper.style.minHeight=r.minHeight,this.element.style.minHeight="none"),this.wrapper.style.height=t+"px",this.element.style.height=t*this.options.scale+"px"}},{key:"_observer",value:function(){this.observer=new IntersectionObserver(this._observerCallback.bind(this),{root:null,rootMargin:"0px",threshold:0}),this.observer.observe(this.wrapper)}},{key:"_observerCallback",value:function(e){var t=this;e.forEach((function(e){e.isIntersecting?(t.isVisible=!0,t._update()):(t.isVisible=!1,t._cancel())}))}},{key:"_update",value:function(){this._setPosition(),this.requestId=window.requestAnimationFrame(this._update.bind(this))}},{key:"_setPosition",value:function(){this.options.willChange&&"transform"!==this.element.style.willChange&&(this.element.style.willChange="transform"),this.element.style.transform="translate3d(0 , ".concat(this._getTranslate(),"px , 0)")}},{key:"_getTranslate",value:function(){var e=Math.abs(this.overflow),t=this._getProgress()/100,i=this.overflow+e*t*this.options.speed;return Math.round(i)}},{key:"_getProgress",value:function(){var e=window.innerHeight,t=this.wrapper.offsetHeight,i=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0,r=(i+e-(this.wrapper.getBoundingClientRect().top+i))/((e+t)/100);return Math.min(100,Math.max(0,r))}},{key:"_cancel",value:function(){this.requestId&&(this.options.willChange&&(this.element.style.willChange="auto"),window.cancelAnimationFrame(this.requestId))}},{key:"_addEvent",value:function(){navigator.userAgent.match(/(iPhone|iPad|iPod|Android)/)?window.addEventListener("orientationchange",this.resize.bind(this)):window.addEventListener("resize",this.resize.bind(this))}},{key:"resize",value:function(){clearTimeout(this.timer),this.timer=setTimeout(this.reset,450)}},{key:"reset",value:function(){this.wrapper.style.height="",this.wrapper.style.width="",this.wrapper.style.position="",this.element.style.height="",this.element.style.width="","0px"!==this.wrapper.style.margin&&(this.wrapper.style.margin="",this.element.style.margin=""),"auto"!==this.wrapper.style.inset&&(this.wrapper.style.top="",this.wrapper.style.right="",this.wrapper.style.bottom="",this.wrapper.style.left="",this.element.style.top="",this.element.style.right="",this.element.style.bottom="",this.element.style.left=""),"none"!==this.wrapper.style.transform&&(this.wrapper.style.transform="",this.element.style.transform=""),"auto"!==this.wrapper.style.zIndex&&(this.wrapper.style.zIndex=""),this._setStyles(),this._setPosition()}},{key:"destroy",value:function(){var e,t;this._cancel(),this.observer.disconnect(),this.wrapper.removeAttribute("style"),this.element.removeAttribute("style"),(e=this.wrapper).replaceWith.apply(e,function(e){if(Array.isArray(e))return r(e)}(t=this.wrapper.childNodes)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(t)||function(e,t){if(e){if("string"==typeof e)return r(e,t);var i=Object.prototype.toString.call(e).slice(8,-1);return"Object"===i&&e.constructor&&(i=e.constructor.name),"Map"===i||"Set"===i?Array.from(e):"Arguments"===i||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(i)?r(e,t):void 0}}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()),this.isInit=!1}}])&&a(t.prototype,n),e}();return t.default}()}));
/*
* ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
* This devtool is neither made for production nor for readable output files.
* It uses "eval()" calls to create a separate source file in the browser devtools.
* If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
* or disable the default devtool with "devtool: false".
* If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
*/
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory();
else if(typeof define === 'function' && define.amd)
define([], factory);
else if(typeof exports === 'object')
exports["Ukiyo"] = factory();
else
root["Ukiyo"] = factory();
})(self, function() {
return /******/ (function() { // webpackBootstrap
/******/ var __webpack_modules__ = ({
/***/ "./node_modules/@babel/runtime/helpers/esm/arrayLikeToArray.js":
/*!*********************************************************************!*\
!*** ./node_modules/@babel/runtime/helpers/esm/arrayLikeToArray.js ***!
\*********************************************************************/
/***/ (function(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": function() { return /* binding */ _arrayLikeToArray; }\n/* harmony export */ });\nfunction _arrayLikeToArray(arr, len) {\n if (len == null || len > arr.length) len = arr.length;\n\n for (var i = 0, arr2 = new Array(len); i < len; i++) {\n arr2[i] = arr[i];\n }\n\n return arr2;\n}\n\n//# sourceURL=webpack://Ukiyo/./node_modules/@babel/runtime/helpers/esm/arrayLikeToArray.js?");
/***/ }),
/***/ "./node_modules/@babel/runtime/helpers/esm/arrayWithoutHoles.js":
/*!**********************************************************************!*\
!*** ./node_modules/@babel/runtime/helpers/esm/arrayWithoutHoles.js ***!
\**********************************************************************/
/***/ (function(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": function() { return /* binding */ _arrayWithoutHoles; }\n/* harmony export */ });\n/* harmony import */ var _arrayLikeToArray_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./arrayLikeToArray.js */ \"./node_modules/@babel/runtime/helpers/esm/arrayLikeToArray.js\");\n\nfunction _arrayWithoutHoles(arr) {\n if (Array.isArray(arr)) return (0,_arrayLikeToArray_js__WEBPACK_IMPORTED_MODULE_0__.default)(arr);\n}\n\n//# sourceURL=webpack://Ukiyo/./node_modules/@babel/runtime/helpers/esm/arrayWithoutHoles.js?");
/***/ }),
/***/ "./node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js":
/*!*********************************************************************!*\
!*** ./node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js ***!
\*********************************************************************/
/***/ (function(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": function() { return /* binding */ _asyncToGenerator; }\n/* harmony export */ });\nfunction asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {\n try {\n var info = gen[key](arg);\n var value = info.value;\n } catch (error) {\n reject(error);\n return;\n }\n\n if (info.done) {\n resolve(value);\n } else {\n Promise.resolve(value).then(_next, _throw);\n }\n}\n\nfunction _asyncToGenerator(fn) {\n return function () {\n var self = this,\n args = arguments;\n return new Promise(function (resolve, reject) {\n var gen = fn.apply(self, args);\n\n function _next(value) {\n asyncGeneratorStep(gen, resolve, reject, _next, _throw, \"next\", value);\n }\n\n function _throw(err) {\n asyncGeneratorStep(gen, resolve, reject, _next, _throw, \"throw\", err);\n }\n\n _next(undefined);\n });\n };\n}\n\n//# sourceURL=webpack://Ukiyo/./node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js?");
/***/ }),
/***/ "./node_modules/@babel/runtime/helpers/esm/classCallCheck.js":
/*!*******************************************************************!*\
!*** ./node_modules/@babel/runtime/helpers/esm/classCallCheck.js ***!
\*******************************************************************/
/***/ (function(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": function() { return /* binding */ _classCallCheck; }\n/* harmony export */ });\nfunction _classCallCheck(instance, Constructor) {\n if (!(instance instanceof Constructor)) {\n throw new TypeError(\"Cannot call a class as a function\");\n }\n}\n\n//# sourceURL=webpack://Ukiyo/./node_modules/@babel/runtime/helpers/esm/classCallCheck.js?");
/***/ }),
/***/ "./node_modules/@babel/runtime/helpers/esm/createClass.js":
/*!****************************************************************!*\
!*** ./node_modules/@babel/runtime/helpers/esm/createClass.js ***!
\****************************************************************/
/***/ (function(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": function() { return /* binding */ _createClass; }\n/* harmony export */ });\nfunction _defineProperties(target, props) {\n for (var i = 0; i < props.length; i++) {\n var descriptor = props[i];\n descriptor.enumerable = descriptor.enumerable || false;\n descriptor.configurable = true;\n if (\"value\" in descriptor) descriptor.writable = true;\n Object.defineProperty(target, descriptor.key, descriptor);\n }\n}\n\nfunction _createClass(Constructor, protoProps, staticProps) {\n if (protoProps) _defineProperties(Constructor.prototype, protoProps);\n if (staticProps) _defineProperties(Constructor, staticProps);\n Object.defineProperty(Constructor, \"prototype\", {\n writable: false\n });\n return Constructor;\n}\n\n//# sourceURL=webpack://Ukiyo/./node_modules/@babel/runtime/helpers/esm/createClass.js?");
/***/ }),
/***/ "./node_modules/@babel/runtime/helpers/esm/defineProperty.js":
/*!*******************************************************************!*\
!*** ./node_modules/@babel/runtime/helpers/esm/defineProperty.js ***!
\*******************************************************************/
/***/ (function(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": function() { return /* binding */ _defineProperty; }\n/* harmony export */ });\nfunction _defineProperty(obj, key, value) {\n if (key in obj) {\n Object.defineProperty(obj, key, {\n value: value,\n enumerable: true,\n configurable: true,\n writable: true\n });\n } else {\n obj[key] = value;\n }\n\n return obj;\n}\n\n//# sourceURL=webpack://Ukiyo/./node_modules/@babel/runtime/helpers/esm/defineProperty.js?");
/***/ }),
/***/ "./node_modules/@babel/runtime/helpers/esm/iterableToArray.js":
/*!********************************************************************!*\
!*** ./node_modules/@babel/runtime/helpers/esm/iterableToArray.js ***!
\********************************************************************/
/***/ (function(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": function() { return /* binding */ _iterableToArray; }\n/* harmony export */ });\nfunction _iterableToArray(iter) {\n if (typeof Symbol !== \"undefined\" && iter[Symbol.iterator] != null || iter[\"@@iterator\"] != null) return Array.from(iter);\n}\n\n//# sourceURL=webpack://Ukiyo/./node_modules/@babel/runtime/helpers/esm/iterableToArray.js?");
/***/ }),
/***/ "./node_modules/@babel/runtime/helpers/esm/nonIterableSpread.js":
/*!**********************************************************************!*\
!*** ./node_modules/@babel/runtime/helpers/esm/nonIterableSpread.js ***!
\**********************************************************************/
/***/ (function(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": function() { return /* binding */ _nonIterableSpread; }\n/* harmony export */ });\nfunction _nonIterableSpread() {\n throw new TypeError(\"Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\");\n}\n\n//# sourceURL=webpack://Ukiyo/./node_modules/@babel/runtime/helpers/esm/nonIterableSpread.js?");
/***/ }),
/***/ "./node_modules/@babel/runtime/helpers/esm/toConsumableArray.js":
/*!**********************************************************************!*\
!*** ./node_modules/@babel/runtime/helpers/esm/toConsumableArray.js ***!
\**********************************************************************/
/***/ (function(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": function() { return /* binding */ _toConsumableArray; }\n/* harmony export */ });\n/* harmony import */ var _arrayWithoutHoles_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./arrayWithoutHoles.js */ \"./node_modules/@babel/runtime/helpers/esm/arrayWithoutHoles.js\");\n/* harmony import */ var _iterableToArray_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./iterableToArray.js */ \"./node_modules/@babel/runtime/helpers/esm/iterableToArray.js\");\n/* harmony import */ var _unsupportedIterableToArray_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./unsupportedIterableToArray.js */ \"./node_modules/@babel/runtime/helpers/esm/unsupportedIterableToArray.js\");\n/* harmony import */ var _nonIterableSpread_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./nonIterableSpread.js */ \"./node_modules/@babel/runtime/helpers/esm/nonIterableSpread.js\");\n\n\n\n\nfunction _toConsumableArray(arr) {\n return (0,_arrayWithoutHoles_js__WEBPACK_IMPORTED_MODULE_0__.default)(arr) || (0,_iterableToArray_js__WEBPACK_IMPORTED_MODULE_1__.default)(arr) || (0,_unsupportedIterableToArray_js__WEBPACK_IMPORTED_MODULE_2__.default)(arr) || (0,_nonIterableSpread_js__WEBPACK_IMPORTED_MODULE_3__.default)();\n}\n\n//# sourceURL=webpack://Ukiyo/./node_modules/@babel/runtime/helpers/esm/toConsumableArray.js?");
/***/ }),
/***/ "./node_modules/@babel/runtime/helpers/esm/unsupportedIterableToArray.js":
/*!*******************************************************************************!*\
!*** ./node_modules/@babel/runtime/helpers/esm/unsupportedIterableToArray.js ***!
\*******************************************************************************/
/***/ (function(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": function() { return /* binding */ _unsupportedIterableToArray; }\n/* harmony export */ });\n/* harmony import */ var _arrayLikeToArray_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./arrayLikeToArray.js */ \"./node_modules/@babel/runtime/helpers/esm/arrayLikeToArray.js\");\n\nfunction _unsupportedIterableToArray(o, minLen) {\n if (!o) return;\n if (typeof o === \"string\") return (0,_arrayLikeToArray_js__WEBPACK_IMPORTED_MODULE_0__.default)(o, minLen);\n var n = Object.prototype.toString.call(o).slice(8, -1);\n if (n === \"Object\" && o.constructor) n = o.constructor.name;\n if (n === \"Map\" || n === \"Set\") return Array.from(o);\n if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return (0,_arrayLikeToArray_js__WEBPACK_IMPORTED_MODULE_0__.default)(o, minLen);\n}\n\n//# sourceURL=webpack://Ukiyo/./node_modules/@babel/runtime/helpers/esm/unsupportedIterableToArray.js?");
/***/ }),
/***/ "./node_modules/@babel/runtime/regenerator/index.js":
/*!**********************************************************!*\
!*** ./node_modules/@babel/runtime/regenerator/index.js ***!
\**********************************************************/
/***/ (function(module, __unused_webpack_exports, __webpack_require__) {
eval("module.exports = __webpack_require__(/*! regenerator-runtime */ \"./node_modules/regenerator-runtime/runtime.js\");\n\n\n//# sourceURL=webpack://Ukiyo/./node_modules/@babel/runtime/regenerator/index.js?");
/***/ }),
/***/ "./src/index.js":
/*!**********************!*\
!*** ./src/index.js ***!
\**********************/
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": function() { return /* binding */ Ukiyo; }\n/* harmony export */ });\n/* harmony import */ var _babel_runtime_helpers_toConsumableArray__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/toConsumableArray */ \"./node_modules/@babel/runtime/helpers/esm/toConsumableArray.js\");\n/* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @babel/runtime/helpers/defineProperty */ \"./node_modules/@babel/runtime/helpers/esm/defineProperty.js\");\n/* harmony import */ var _babel_runtime_helpers_classCallCheck__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @babel/runtime/helpers/classCallCheck */ \"./node_modules/@babel/runtime/helpers/esm/classCallCheck.js\");\n/* harmony import */ var _babel_runtime_helpers_createClass__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @babel/runtime/helpers/createClass */ \"./node_modules/@babel/runtime/helpers/esm/createClass.js\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./utils */ \"./src/utils.js\");\n\n\n\n\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0,_babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_1__.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\n\n\nvar Ukiyo = /*#__PURE__*/function () {\n /**\n * @constructor\n * @param {HTMLElement} element - Target element\n * @param {object} options - Options of ukiyo.js\n */\n function Ukiyo(element) {\n var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n\n (0,_babel_runtime_helpers_classCallCheck__WEBPACK_IMPORTED_MODULE_2__.default)(this, Ukiyo);\n\n if (!element) return;\n var defaults = {\n scale: 1.5,\n speed: 1.5,\n wrapperClass: null,\n willChange: false\n };\n var elementOptionScale = element.getAttribute('data-u-scale');\n var elementOptionSpeed = element.getAttribute('data-u-speed');\n var elementOptionWillChange = element.getAttribute('data-u-willchange');\n this.element = element;\n this.wrapper = document.createElement('div');\n this.options = _objectSpread(_objectSpread({}, defaults), options);\n if (elementOptionScale !== null) this.options.scale = elementOptionScale;\n if (elementOptionSpeed !== null) this.options.speed = elementOptionSpeed;\n if (elementOptionWillChange !== null) this.options.willChange = true;\n this.isIMGtag = this.element.tagName.toLowerCase() === 'img';\n this.overflow = null;\n this.observer = null;\n this.requestId = null;\n this.timer = null;\n this.reset = this.reset.bind(this);\n this.isInit = false;\n\n if (this.isIMGtag) {\n var path = this.element.getAttribute('src');\n var load = (0,_utils__WEBPACK_IMPORTED_MODULE_4__.isImageLoaded)(path);\n\n this._init();\n } else {\n this._init();\n }\n }\n /**\n * Initialization\n */\n\n\n (0,_babel_runtime_helpers_createClass__WEBPACK_IMPORTED_MODULE_3__.default)(Ukiyo, [{\n key: \"_init\",\n value: function _init() {\n if (this.isInit) return;\n\n this._setupElements();\n\n this._observer();\n\n this._addEvent();\n\n this.isInit = true;\n }\n /**\n * Element and option settings\n */\n\n }, {\n key: \"_setupElements\",\n value: function _setupElements() {\n // Set CSS style for the element\n this._setStyles(true);\n\n var elementOptionWrapperClass = this.element.getAttribute('data-u-wrapper-class');\n\n if (this.options.wrapperClass || elementOptionWrapperClass) {\n var customClass = elementOptionWrapperClass ? elementOptionWrapperClass : this.options.wrapperClass;\n this.wrapper.classList.add(customClass);\n } // Wrapping an element by adding a wrapper element\n\n\n var pictureTag = this.element.closest('picture');\n\n if (pictureTag !== null) {\n pictureTag.parentNode.insertBefore(this.wrapper, pictureTag);\n this.wrapper.appendChild(pictureTag);\n } else {\n this.element.parentNode.insertBefore(this.wrapper, this.element);\n this.wrapper.appendChild(this.element);\n }\n }\n /**\n * Setting CSS styles for an element\n * @param {boolean} init - Enable the default style\n */\n\n }, {\n key: \"_setStyles\",\n value: function _setStyles(init) {\n var elementHeight = this.element.clientHeight;\n var elementWidth = this.element.clientWidth;\n var elementStyle = document.defaultView.getComputedStyle(this.element);\n var isPositionAbsolute = elementStyle.position === 'absolute'; // Difference between the height of the element and the wrapper\n\n this.overflow = elementHeight - elementHeight * this.options.scale;\n\n if (elementStyle.marginTop !== '0px' || elementStyle.marginBottom !== '0px') {\n this.wrapper.style.marginTop = elementStyle.marginTop;\n this.wrapper.style.marginBottom = elementStyle.marginBottom;\n this.element.style.marginTop = '0';\n this.element.style.marginBottom = '0';\n }\n\n if (elementStyle.inset !== 'auto') {\n this.wrapper.style.top = elementStyle.top;\n this.wrapper.style.right = elementStyle.right;\n this.wrapper.style.bottom = elementStyle.bottom;\n this.wrapper.style.left = elementStyle.left;\n this.element.style.top = '0';\n this.element.style.right = '0';\n this.element.style.bottom = '0';\n this.element.style.left = '0';\n }\n\n if (elementStyle.transform !== 'none') this.wrapper.style.transform = elementStyle.transform;\n if (elementStyle.zIndex !== 'auto') this.wrapper.style.zIndex = elementStyle.zIndex;\n\n if (isPositionAbsolute) {\n this.wrapper.style.position = 'absolute';\n } else {\n this.wrapper.style.position = 'relative';\n } // Initial style settings\n\n\n if (init) {\n this.wrapper.style.width = '100%';\n this.wrapper.style.overflow = 'hidden';\n this.element.style.display = 'block';\n this.element.style.overflow = 'hidden';\n this.element.style.backfaceVisibility = 'hidden';\n\n if (elementStyle.padding !== '0px') {\n this.element.style.padding = '0';\n }\n\n if (this.isIMGtag) {\n this.element.style.objectFit = 'cover';\n } else {\n this.element.style.backgroundPosition = 'center';\n }\n }\n\n if (isPositionAbsolute) {\n this.wrapper.style.width = elementWidth + 'px';\n this.element.style.width = '100%';\n }\n\n if (elementStyle.maxHeight !== 'none') {\n this.wrapper.style.maxHeight = elementStyle.maxHeight;\n this.element.style.maxHeight = 'none';\n }\n\n if (elementStyle.minHeight !== '0px') {\n this.wrapper.style.minHeight = elementStyle.minHeight;\n this.element.style.minHeight = 'none';\n }\n\n this.wrapper.style.height = elementHeight + 'px';\n this.element.style.height = elementHeight * this.options.scale + 'px';\n }\n /**\n * Observe the element\n */\n\n }, {\n key: \"_observer\",\n value: function _observer() {\n var options = {\n root: null,\n rootMargin: '0px',\n threshold: 0\n };\n this.observer = new IntersectionObserver(this._observerCallback.bind(this), options);\n this.observer.observe(this.wrapper);\n }\n /**\n * IntersectionObserver callback\n * @param {object} entries - IntersectionObserverEntry\n */\n\n }, {\n key: \"_observerCallback\",\n value: function _observerCallback(entries) {\n var _this = this;\n\n entries.forEach(function (entry) {\n if (entry.isIntersecting) {\n // Is visible\n _this.isVisible = true;\n\n _this._update();\n } else {\n // Is not visible\n _this.isVisible = false;\n\n _this._cancel();\n }\n });\n }\n /**\n * Animate the update of the image position\n */\n\n }, {\n key: \"_update\",\n value: function _update() {\n this._setPosition();\n\n this.requestId = window.requestAnimationFrame(this._update.bind(this));\n }\n /**\n * Set the parallax value to an element\n */\n\n }, {\n key: \"_setPosition\",\n value: function _setPosition() {\n if (this.options.willChange && this.element.style.willChange !== 'transform') {\n this.element.style.willChange = 'transform';\n }\n\n this.element.style.transform = \"translate3d(0 , \".concat(this._getTranslate(), \"px , 0)\");\n }\n /**\n * Calculating the value of parallax\n * @return {number} Parallax value\n */\n\n }, {\n key: \"_getTranslate\",\n value: function _getTranslate() {\n var overflow = Math.abs(this.overflow);\n var progress = this._getProgress() / 100;\n var translateY = this.overflow + overflow * progress * this.options.speed;\n return Math.round(translateY);\n }\n /**\n * Get the percentage of an element's position relative to the viewport\n * @return {number} The percentage of the element's position in the viewport\n */\n\n }, {\n key: \"_getProgress\",\n value: function _getProgress() {\n var viewportHeight = window.innerHeight;\n var elementHeight = this.wrapper.offsetHeight;\n var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;\n var elementOffsetTop = this.wrapper.getBoundingClientRect().top + scrollTop;\n var distance = scrollTop + viewportHeight - elementOffsetTop;\n var percentage = distance / ((viewportHeight + elementHeight) / 100);\n return Math.min(100, Math.max(0, percentage));\n }\n /**\n * Cancel animation\n */\n\n }, {\n key: \"_cancel\",\n value: function _cancel() {\n if (!this.requestId) return;\n if (this.options.willChange) this.element.style.willChange = 'auto';\n window.cancelAnimationFrame(this.requestId);\n }\n /**\n * Add event\n */\n\n }, {\n key: \"_addEvent\",\n value: function _addEvent() {\n // Resize Event\n if (navigator.userAgent.match(/(iPhone|iPad|iPod|Android)/)) {\n window.addEventListener('orientationchange', this.resize.bind(this));\n } else {\n window.addEventListener('resize', this.resize.bind(this));\n }\n }\n /**\n * Resize\n */\n\n }, {\n key: \"resize\",\n value: function resize() {\n clearTimeout(this.timer);\n this.timer = setTimeout(this.reset, 450);\n }\n /**\n * Reset\n */\n\n }, {\n key: \"reset\",\n value: function reset() {\n this.wrapper.style.height = '';\n this.wrapper.style.width = '';\n this.wrapper.style.position = '';\n this.element.style.height = '';\n this.element.style.width = '';\n\n if (this.wrapper.style.margin !== '0px') {\n this.wrapper.style.margin = '';\n this.element.style.margin = '';\n }\n\n if (this.wrapper.style.inset !== 'auto') {\n this.wrapper.style.top = '';\n this.wrapper.style.right = '';\n this.wrapper.style.bottom = '';\n this.wrapper.style.left = '';\n this.element.style.top = '';\n this.element.style.right = '';\n this.element.style.bottom = '';\n this.element.style.left = '';\n }\n\n if (this.wrapper.style.transform !== 'none') {\n this.wrapper.style.transform = '';\n this.element.style.transform = '';\n }\n\n if (this.wrapper.style.zIndex !== 'auto') {\n this.wrapper.style.zIndex = '';\n }\n\n this._setStyles();\n\n this._setPosition();\n }\n /**\n * Destroy instance\n */\n\n }, {\n key: \"destroy\",\n value: function destroy() {\n var _this$wrapper;\n\n this._cancel();\n\n this.observer.disconnect();\n this.wrapper.removeAttribute('style');\n this.element.removeAttribute('style');\n\n (_this$wrapper = this.wrapper).replaceWith.apply(_this$wrapper, (0,_babel_runtime_helpers_toConsumableArray__WEBPACK_IMPORTED_MODULE_0__.default)(this.wrapper.childNodes));\n\n this.isInit = false;\n }\n }]);\n\n return Ukiyo;\n}();\n\n\n\n//# sourceURL=webpack://Ukiyo/./src/index.js?");
/***/ }),
/***/ "./src/utils.js":
/*!**********************!*\
!*** ./src/utils.js ***!
\**********************/
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"isImageLoaded\": function() { return /* binding */ isImageLoaded; }\n/* harmony export */ });\n/* harmony import */ var _babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/asyncToGenerator */ \"./node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js\");\n/* harmony import */ var _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @babel/runtime/regenerator */ \"./node_modules/@babel/runtime/regenerator/index.js\");\n/* harmony import */ var _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_1__);\n\n\n\n/**\n * Wait for the images to load\n * @param {string} src - Image source\n * @return {object} Promise Object\n */\nvar isImageLoaded = /*#__PURE__*/function () {\n var _ref = (0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_0__.default)( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_1___default().mark(function _callee(src) {\n var img;\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_1___default().wrap(function _callee$(_context) {\n while (1) {\n switch (_context.prev = _context.next) {\n case 0:\n img = new Image();\n img.src = src;\n _context.next = 4;\n return img.decode();\n\n case 4:\n return _context.abrupt(\"return\", img);\n\n case 5:\n case \"end\":\n return _context.stop();\n }\n }\n }, _callee);\n }));\n\n return function isImageLoaded(_x) {\n return _ref.apply(this, arguments);\n };\n}();\n\n\n\n//# sourceURL=webpack://Ukiyo/./src/utils.js?");
/***/ }),
/***/ "./node_modules/regenerator-runtime/runtime.js":
/*!*****************************************************!*\
!*** ./node_modules/regenerator-runtime/runtime.js ***!
\*****************************************************/
/***/ (function(module) {
eval("/**\n * Copyright (c) 2014-present, Facebook, Inc.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nvar runtime = (function (exports) {\n \"use strict\";\n\n var Op = Object.prototype;\n var hasOwn = Op.hasOwnProperty;\n var undefined; // More compressible than void 0.\n var $Symbol = typeof Symbol === \"function\" ? Symbol : {};\n var iteratorSymbol = $Symbol.iterator || \"@@iterator\";\n var asyncIteratorSymbol = $Symbol.asyncIterator || \"@@asyncIterator\";\n var toStringTagSymbol = $Symbol.toStringTag || \"@@toStringTag\";\n\n function define(obj, key, value) {\n Object.defineProperty(obj, key, {\n value: value,\n enumerable: true,\n configurable: true,\n writable: true\n });\n return obj[key];\n }\n try {\n // IE 8 has a broken Object.defineProperty that only works on DOM objects.\n define({}, \"\");\n } catch (err) {\n define = function(obj, key, value) {\n return obj[key] = value;\n };\n }\n\n function wrap(innerFn, outerFn, self, tryLocsList) {\n // If outerFn provided and outerFn.prototype is a Generator, then outerFn.prototype instanceof Generator.\n var protoGenerator = outerFn && outerFn.prototype instanceof Generator ? outerFn : Generator;\n var generator = Object.create(protoGenerator.prototype);\n var context = new Context(tryLocsList || []);\n\n // The ._invoke method unifies the implementations of the .next,\n // .throw, and .return methods.\n generator._invoke = makeInvokeMethod(innerFn, self, context);\n\n return generator;\n }\n exports.wrap = wrap;\n\n // Try/catch helper to minimize deoptimizations. Returns a completion\n // record like context.tryEntries[i].completion. This interface could\n // have been (and was previously) designed to take a closure to be\n // invoked without arguments, but in all the cases we care about we\n // already have an existing method we want to call, so there's no need\n // to create a new function object. We can even get away with assuming\n // the method takes exactly one argument, since that happens to be true\n // in every case, so we don't have to touch the arguments object. The\n // only additional allocation required is the completion record, which\n // has a stable shape and so hopefully should be cheap to allocate.\n function tryCatch(fn, obj, arg) {\n try {\n return { type: \"normal\", arg: fn.call(obj, arg) };\n } catch (err) {\n return { type: \"throw\", arg: err };\n }\n }\n\n var GenStateSuspendedStart = \"suspendedStart\";\n var GenStateSuspendedYield = \"suspendedYield\";\n var GenStateExecuting = \"executing\";\n var GenStateCompleted = \"completed\";\n\n // Returning this object from the innerFn has the same effect as\n // breaking out of the dispatch switch statement.\n var ContinueSentinel = {};\n\n // Dummy constructor functions that we use as the .constructor and\n // .constructor.prototype properties for functions that return Generator\n // objects. For full spec compliance, you may wish to configure your\n // minifier not to mangle the names of these two functions.\n function Generator() {}\n function GeneratorFunction() {}\n function GeneratorFunctionPrototype() {}\n\n // This is a polyfill for %IteratorPrototype% for environments that\n // don't natively support it.\n var IteratorPrototype = {};\n IteratorPrototype[iteratorSymbol] = function () {\n return this;\n };\n\n var getProto = Object.getPrototypeOf;\n var NativeIteratorPrototype = getProto && getProto(getProto(values([])));\n if (NativeIteratorPrototype &&\n NativeIteratorPrototype !== Op &&\n hasOwn.call(NativeIteratorPrototype, iteratorSymbol)) {\n // This environment has a native %IteratorPrototype%; use it instead\n // of the polyfill.\n IteratorPrototype = NativeIteratorPrototype;\n }\n\n var Gp = GeneratorFunctionPrototype.prototype =\n Generator.prototype = Object.create(IteratorPrototype);\n GeneratorFunction.prototype = Gp.constructor = GeneratorFunctionPrototype;\n GeneratorFunctionPrototype.constructor = GeneratorFunction;\n GeneratorFunction.displayName = define(\n GeneratorFunctionPrototype,\n toStringTagSymbol,\n \"GeneratorFunction\"\n );\n\n // Helper for defining the .next, .throw, and .return methods of the\n // Iterator interface in terms of a single ._invoke method.\n function defineIteratorMethods(prototype) {\n [\"next\", \"throw\", \"return\"].forEach(function(method) {\n define(prototype, method, function(arg) {\n return this._invoke(method, arg);\n });\n });\n }\n\n exports.isGeneratorFunction = function(genFun) {\n var ctor = typeof genFun === \"function\" && genFun.constructor;\n return ctor\n ? ctor === GeneratorFunction ||\n // For the native GeneratorFunction constructor, the best we can\n // do is to check its .name property.\n (ctor.displayName || ctor.name) === \"GeneratorFunction\"\n : false;\n };\n\n exports.mark = function(genFun) {\n if (Object.setPrototypeOf) {\n Object.setPrototypeOf(genFun, GeneratorFunctionPrototype);\n } else {\n genFun.__proto__ = GeneratorFunctionPrototype;\n define(genFun, toStringTagSymbol, \"GeneratorFunction\");\n }\n genFun.prototype = Object.create(Gp);\n return genFun;\n };\n\n // Within the body of any async function, `await x` is transformed to\n // `yield regeneratorRuntime.awrap(x)`, so that the runtime can test\n // `hasOwn.call(value, \"__await\")` to determine if the yielded value is\n // meant to be awaited.\n exports.awrap = function(arg) {\n return { __await: arg };\n };\n\n function AsyncIterator(generator, PromiseImpl) {\n function invoke(method, arg, resolve, reject) {\n var record = tryCatch(generator[method], generator, arg);\n if (record.type === \"throw\") {\n reject(record.arg);\n } else {\n var result = record.arg;\n var value = result.value;\n if (value &&\n typeof value === \"object\" &&\n hasOwn.call(value, \"__await\")) {\n return PromiseImpl.resolve(value.__await).then(function(value) {\n invoke(\"next\", value, resolve, reject);\n }, function(err) {\n invoke(\"throw\", err, resolve, reject);\n });\n }\n\n return PromiseImpl.resolve(value).then(function(unwrapped) {\n // When a yielded Promise is resolved, its final value becomes\n // the .value of the Promise<{value,done}> result for the\n // current iteration.\n result.value = unwrapped;\n resolve(result);\n }, function(error) {\n // If a rejected Promise was yielded, throw the rejection back\n // into the async generator function so it can be handled there.\n return invoke(\"throw\", error, resolve, reject);\n });\n }\n }\n\n var previousPromise;\n\n function enqueue(method, arg) {\n function callInvokeWithMethodAndArg() {\n return new PromiseImpl(function(resolve, reject) {\n invoke(method, arg, resolve, reject);\n });\n }\n\n return previousPromise =\n // If enqueue has been called before, then we want to wait until\n // all previous Promises have been resolved before calling invoke,\n // so that results are always delivered in the correct order. If\n // enqueue has not been called before, then it is important to\n // call invoke immediately, without waiting on a callback to fire,\n // so that the async generator function has the opportunity to do\n // any necessary setup in a predictable way. This predictability\n // is why the Promise constructor synchronously invokes its\n // executor callback, and why async functions synchronously\n // execute code before the first await. Since we implement simple\n // async functions in terms of async generators, it is especially\n // important to get this right, even though it requires care.\n previousPromise ? previousPromise.then(\n callInvokeWithMethodAndArg,\n // Avoid propagating failures to Promises returned by later\n // invocations of the iterator.\n callInvokeWithMethodAndArg\n ) : callInvokeWithMethodAndArg();\n }\n\n // Define the unified helper method that is used to implement .next,\n // .throw, and .return (see defineIteratorMethods).\n this._invoke = enqueue;\n }\n\n defineIteratorMethods(AsyncIterator.prototype);\n AsyncIterator.prototype[asyncIteratorSymbol] = function () {\n return this;\n };\n exports.AsyncIterator = AsyncIterator;\n\n // Note that simple async functions are implemented on top of\n // AsyncIterator objects; they just return a Promise for the value of\n // the final result produced by the iterator.\n exports.async = function(innerFn, outerFn, self, tryLocsList, PromiseImpl) {\n if (PromiseImpl === void 0) PromiseImpl = Promise;\n\n var iter = new AsyncIterator(\n wrap(innerFn, outerFn, self, tryLocsList),\n PromiseImpl\n );\n\n return exports.isGeneratorFunction(outerFn)\n ? iter // If outerFn is a generator, return the full iterator.\n : iter.next().then(function(result) {\n return result.done ? result.value : iter.next();\n });\n };\n\n function makeInvokeMethod(innerFn, self, context) {\n var state = GenStateSuspendedStart;\n\n return function invoke(method, arg) {\n if (state === GenStateExecuting) {\n throw new Error(\"Generator is already running\");\n }\n\n if (state === GenStateCompleted) {\n if (method === \"throw\") {\n throw arg;\n }\n\n // Be forgiving, per 25.3.3.3.3 of the spec:\n // https://people.mozilla.org/~jorendorff/es6-draft.html#sec-generatorresume\n return doneResult();\n }\n\n context.method = method;\n context.arg = arg;\n\n while (true) {\n var delegate = context.delegate;\n if (delegate) {\n var delegateResult = maybeInvokeDelegate(delegate, context);\n if (delegateResult) {\n if (delegateResult === ContinueSentinel) continue;\n return delegateResult;\n }\n }\n\n if (context.method === \"next\") {\n // Setting context._sent for legacy support of Babel's\n // function.sent implementation.\n context.sent = context._sent = context.arg;\n\n } else if (context.method === \"throw\") {\n if (state === GenStateSuspendedStart) {\n state = GenStateCompleted;\n throw context.arg;\n }\n\n context.dispatchException(context.arg);\n\n } else if (context.method === \"return\") {\n context.abrupt(\"return\", context.arg);\n }\n\n state = GenStateExecuting;\n\n var record = tryCatch(innerFn, self, context);\n if (record.type === \"normal\") {\n // If an exception is thrown from innerFn, we leave state ===\n // GenStateExecuting and loop back for another invocation.\n state = context.done\n ? GenStateCompleted\n : GenStateSuspendedYield;\n\n if (record.arg === ContinueSentinel) {\n continue;\n }\n\n return {\n value: record.arg,\n done: context.done\n };\n\n } else if (record.type === \"throw\") {\n state = GenStateCompleted;\n // Dispatch the exception by looping back around to the\n // context.dispatchException(context.arg) call above.\n context.method = \"throw\";\n context.arg = record.arg;\n }\n }\n };\n }\n\n // Call delegate.iterator[context.method](context.arg) and handle the\n // result, either by returning a { value, done } result from the\n // delegate iterator, or by modifying context.method and context.arg,\n // setting context.delegate to null, and returning the ContinueSentinel.\n function maybeInvokeDelegate(delegate, context) {\n var method = delegate.iterator[context.method];\n if (method === undefined) {\n // A .throw or .return when the delegate iterator has no .throw\n // method always terminates the yield* loop.\n context.delegate = null;\n\n if (context.method === \"throw\") {\n // Note: [\"return\"] must be used for ES3 parsing compatibility.\n if (delegate.iterator[\"return\"]) {\n // If the delegate iterator has a return method, give it a\n // chance to clean up.\n context.method = \"return\";\n context.arg = undefined;\n maybeInvokeDelegate(delegate, context);\n\n if (context.method === \"throw\") {\n // If maybeInvokeDelegate(context) changed context.method from\n // \"return\" to \"throw\", let that override the TypeError below.\n return ContinueSentinel;\n }\n }\n\n context.method = \"throw\";\n context.arg = new TypeError(\n \"The iterator does not provide a 'throw' method\");\n }\n\n return ContinueSentinel;\n }\n\n var record = tryCatch(method, delegate.iterator, context.arg);\n\n if (record.type === \"throw\") {\n context.method = \"throw\";\n context.arg = record.arg;\n context.delegate = null;\n return ContinueSentinel;\n }\n\n var info = record.arg;\n\n if (! info) {\n context.method = \"throw\";\n context.arg = new TypeError(\"iterator result is not an object\");\n context.delegate = null;\n return ContinueSentinel;\n }\n\n if (info.done) {\n // Assign the result of the finished delegate to the temporary\n // variable specified by delegate.resultName (see delegateYield).\n context[delegate.resultName] = info.value;\n\n // Resume execution at the desired location (see delegateYield).\n context.next = delegate.nextLoc;\n\n // If context.method was \"throw\" but the delegate handled the\n // exception, let the outer generator proceed normally. If\n // context.method was \"next\", forget context.arg since it has been\n // \"consumed\" by the delegate iterator. If context.method was\n // \"return\", allow the original .return call to continue in the\n // outer generator.\n if (context.method !== \"return\") {\n context.method = \"next\";\n context.arg = undefined;\n }\n\n } else {\n // Re-yield the result returned by the delegate method.\n return info;\n }\n\n // The delegate iterator is finished, so forget it and continue with\n // the outer generator.\n context.delegate = null;\n return ContinueSentinel;\n }\n\n // Define Generator.prototype.{next,throw,return} in terms of the\n // unified ._invoke helper method.\n defineIteratorMethods(Gp);\n\n define(Gp, toStringTagSymbol, \"Generator\");\n\n // A Generator should always return itself as the iterator object when the\n // @@iterator function is called on it. Some browsers' implementations of the\n // iterator prototype chain incorrectly implement this, causing the Generator\n // object to not be returned from this call. This ensures that doesn't happen.\n // See https://github.com/facebook/regenerator/issues/274 for more details.\n Gp[iteratorSymbol] = function() {\n return this;\n };\n\n Gp.toString = function() {\n return \"[object Generator]\";\n };\n\n function pushTryEntry(locs) {\n var entry = { tryLoc: locs[0] };\n\n if (1 in locs) {\n entry.catchLoc = locs[1];\n }\n\n if (2 in locs) {\n entry.finallyLoc = locs[2];\n entry.afterLoc = locs[3];\n }\n\n this.tryEntries.push(entry);\n }\n\n function resetTryEntry(entry) {\n var record = entry.completion || {};\n record.type = \"normal\";\n delete record.arg;\n entry.completion = record;\n }\n\n function Context(tryLocsList) {\n // The root entry object (effectively a try statement without a catch\n // or a finally block) gives us a place to store values thrown from\n // locations where there is no enclosing try statement.\n this.tryEntries = [{ tryLoc: \"root\" }];\n tryLocsList.forEach(pushTryEntry, this);\n this.reset(true);\n }\n\n exports.keys = function(object) {\n var keys = [];\n for (var key in object) {\n keys.push(key);\n }\n keys.reverse();\n\n // Rather than returning an object with a next method, we keep\n // things simple and return the next function itself.\n return function next() {\n while (keys.length) {\n var key = keys.pop();\n if (key in object) {\n next.value = key;\n next.done = false;\n return next;\n }\n }\n\n // To avoid creating an additional object, we just hang the .value\n // and .done properties off the next function object itself. This\n // also ensures that the minifier will not anonymize the function.\n next.done = true;\n return next;\n };\n };\n\n function values(iterable) {\n if (iterable) {\n var iteratorMethod = iterable[iteratorSymbol];\n if (iteratorMethod) {\n return iteratorMethod.call(iterable);\n }\n\n if (typeof iterable.next === \"function\") {\n return iterable;\n }\n\n if (!isNaN(iterable.length)) {\n var i = -1, next = function next() {\n while (++i < iterable.length) {\n if (hasOwn.call(iterable, i)) {\n next.value = iterable[i];\n next.done = false;\n return next;\n }\n }\n\n next.value = undefined;\n next.done = true;\n\n return next;\n };\n\n return next.next = next;\n }\n }\n\n // Return an iterator with no values.\n return { next: doneResult };\n }\n exports.values = values;\n\n function doneResult() {\n return { value: undefined, done: true };\n }\n\n Context.prototype = {\n constructor: Context,\n\n reset: function(skipTempReset) {\n this.prev = 0;\n this.next = 0;\n // Resetting context._sent for legacy support of Babel's\n // function.sent implementation.\n this.sent = this._sent = undefined;\n this.done = false;\n this.delegate = null;\n\n this.method = \"next\";\n this.arg = undefined;\n\n this.tryEntries.forEach(resetTryEntry);\n\n if (!skipTempReset) {\n for (var name in this) {\n // Not sure about the optimal order of these conditions:\n if (name.charAt(0) === \"t\" &&\n hasOwn.call(this, name) &&\n !isNaN(+name.slice(1))) {\n this[name] = undefined;\n }\n }\n }\n },\n\n stop: function() {\n this.done = true;\n\n var rootEntry = this.tryEntries[0];\n var rootRecord = rootEntry.completion;\n if (rootRecord.type === \"throw\") {\n throw rootRecord.arg;\n }\n\n return this.rval;\n },\n\n dispatchException: function(exception) {\n if (this.done) {\n throw exception;\n }\n\n var context = this;\n function handle(loc, caught) {\n record.type = \"throw\";\n record.arg = exception;\n context.next = loc;\n\n if (caught) {\n // If the dispatched exception was caught by a catch block,\n // then let that catch block handle the exception normally.\n context.method = \"next\";\n context.arg = undefined;\n }\n\n return !! caught;\n }\n\n for (var i = this.tryEntries.length - 1; i >= 0; --i) {\n var entry = this.tryEntries[i];\n var record = entry.completion;\n\n if (entry.tryLoc === \"root\") {\n // Exception thrown outside of any try block that could handle\n // it, so set the completion value of the entire function to\n // throw the exception.\n return handle(\"end\");\n }\n\n if (entry.tryLoc <= this.prev) {\n var hasCatch = hasOwn.call(entry, \"catchLoc\");\n var hasFinally = hasOwn.call(entry, \"finallyLoc\");\n\n if (hasCatch && hasFinally) {\n if (this.prev < entry.catchLoc) {\n return handle(entry.catchLoc, true);\n } else if (this.prev < entry.finallyLoc) {\n return handle(entry.finallyLoc);\n }\n\n } else if (hasCatch) {\n if (this.prev < entry.catchLoc) {\n return handle(entry.catchLoc, true);\n }\n\n } else if (hasFinally) {\n if (this.prev < entry.finallyLoc) {\n return handle(entry.finallyLoc);\n }\n\n } else {\n throw new Error(\"try statement without catch or finally\");\n }\n }\n }\n },\n\n abrupt: function(type, arg) {\n for (var i = this.tryEntries.length - 1; i >= 0; --i) {\n var entry = this.tryEntries[i];\n if (entry.tryLoc <= this.prev &&\n hasOwn.call(entry, \"finallyLoc\") &&\n this.prev < entry.finallyLoc) {\n var finallyEntry = entry;\n break;\n }\n }\n\n if (finallyEntry &&\n (type === \"break\" ||\n type === \"continue\") &&\n finallyEntry.tryLoc <= arg &&\n arg <= finallyEntry.finallyLoc) {\n // Ignore the finally entry if control is not jumping to a\n // location outside the try/catch block.\n finallyEntry = null;\n }\n\n var record = finallyEntry ? finallyEntry.completion : {};\n record.type = type;\n record.arg = arg;\n\n if (finallyEntry) {\n this.method = \"next\";\n this.next = finallyEntry.finallyLoc;\n return ContinueSentinel;\n }\n\n return this.complete(record);\n },\n\n complete: function(record, afterLoc) {\n if (record.type === \"throw\") {\n throw record.arg;\n }\n\n if (record.type === \"break\" ||\n record.type === \"continue\") {\n this.next = record.arg;\n } else if (record.type === \"return\") {\n this.rval = this.arg = record.arg;\n this.method = \"return\";\n this.next = \"end\";\n } else if (record.type === \"normal\" && afterLoc) {\n this.next = afterLoc;\n }\n\n return ContinueSentinel;\n },\n\n finish: function(finallyLoc) {\n for (var i = this.tryEntries.length - 1; i >= 0; --i) {\n var entry = this.tryEntries[i];\n if (entry.finallyLoc === finallyLoc) {\n this.complete(entry.completion, entry.afterLoc);\n resetTryEntry(entry);\n return ContinueSentinel;\n }\n }\n },\n\n \"catch\": function(tryLoc) {\n for (var i = this.tryEntries.length - 1; i >= 0; --i) {\n var entry = this.tryEntries[i];\n if (entry.tryLoc === tryLoc) {\n var record = entry.completion;\n if (record.type === \"throw\") {\n var thrown = record.arg;\n resetTryEntry(entry);\n }\n return thrown;\n }\n }\n\n // The context.catch method must only be called with a location\n // argument that corresponds to a known catch block.\n throw new Error(\"illegal catch attempt\");\n },\n\n delegateYield: function(iterable, resultName, nextLoc) {\n this.delegate = {\n iterator: values(iterable),\n resultName: resultName,\n nextLoc: nextLoc\n };\n\n if (this.method === \"next\") {\n // Deliberately forget the last sent value so that we don't\n // accidentally pass it on to the delegate.\n this.arg = undefined;\n }\n\n return ContinueSentinel;\n }\n };\n\n // Regardless of whether this script is executing as a CommonJS module\n // or not, return the runtime object so that we can declare the variable\n // regeneratorRuntime in the outer scope, which allows this module to be\n // injected easily by `bin/regenerator --include-runtime script.js`.\n return exports;\n\n}(\n // If this script is executing as a CommonJS module, use module.exports\n // as the regeneratorRuntime namespace. Otherwise create a new empty\n // object. Either way, the resulting object will be used to initialize\n // the regeneratorRuntime variable at the top of this file.\n true ? module.exports : 0\n));\n\ntry {\n regeneratorRuntime = runtime;\n} catch (accidentalStrictMode) {\n // This module should not be running in strict mode, so the above\n // assignment should always work unless something is misconfigured. Just\n // in case runtime.js accidentally runs in strict mode, we can escape\n // strict mode using a global Function call. This could conceivably fail\n // if a Content Security Policy forbids using Function, but in that case\n // the proper solution is to fix the accidental strict mode problem. If\n // you've misconfigured your bundler to force strict mode and applied a\n // CSP to forbid Function, and you're not willing to fix either of those\n // problems, please detail your unique predicament in a GitHub issue.\n Function(\"r\", \"regeneratorRuntime = r\")(runtime);\n}\n\n\n//# sourceURL=webpack://Ukiyo/./node_modules/regenerator-runtime/runtime.js?");
/***/ })
/******/ });
/************************************************************************/
/******/ // The module cache
/******/ var __webpack_module_cache__ = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
/******/ var cachedModule = __webpack_module_cache__[moduleId];
/******/ if (cachedModule !== undefined) {
/******/ return cachedModule.exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = __webpack_module_cache__[moduleId] = {
/******/ // no module.id needed
/******/ // no module.loaded needed
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/************************************************************************/
/******/ /* webpack/runtime/compat get default export */
/******/ !function() {
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function() { return module['default']; } :
/******/ function() { return module; };
/******/ __webpack_require__.d(getter, { a: getter });
/******/ return getter;
/******/ };
/******/ }();
/******/
/******/ /* webpack/runtime/define property getters */
/******/ !function() {
/******/ // define getter functions for harmony exports
/******/ __webpack_require__.d = function(exports, definition) {
/******/ for(var key in definition) {
/******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
/******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
/******/ }
/******/ }
/******/ };
/******/ }();
/******/
/******/ /* webpack/runtime/hasOwnProperty shorthand */
/******/ !function() {
/******/ __webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }
/******/ }();
/******/
/******/ /* webpack/runtime/make namespace object */
/******/ !function() {
/******/ // define __esModule on exports
/******/ __webpack_require__.r = function(exports) {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/ }();
/******/
/************************************************************************/
/******/
/******/ // startup
/******/ // Load entry module and return exports
/******/ // This entry module can't be inlined because the eval devtool is used.
/******/ var __webpack_exports__ = __webpack_require__("./src/index.js");
/******/ __webpack_exports__ = __webpack_exports__.default;
/******/
/******/ return __webpack_exports__;
/******/ })()
;
});

8

package.json
{
"name": "ukiyojs",
"version": "1.0.0",
"version": "1.0.1",
"description": "Simple and lightweight JavaScript library for background parallax with support for picture/img elements.",
"homepage": "https://github.com/yitengjun/ukiyojs",
"homepage": "https://yitengjun.github.io/ukiyo-js/",
"repository": {

@@ -29,2 +29,3 @@ "type": "git",

"@babel/core": "^7.14.6",
"@babel/plugin-transform-runtime": "^7.16.5",
"@babel/preset-env": "^7.14.7",

@@ -62,3 +63,6 @@ "@semantic-release/commit-analyzer": "^9.0.2",

}
},
"dependencies": {
"@babel/runtime": "^7.16.5"
}
}

71

README.md
<div align="center">
<h1>
<img width="125" src="./ukiyo.png" alt="">
<img width="165" src="./ukiyo.png" alt="">
<br>
Ukiyo.js</h1>
Simple and lightweight JavaScript library for background parallax,<br>with support for picture/img elements.
<p>Simple and lightweight JavaScript library for modern background parallax,<br>with support for picture elements and any images.</p>
<p>
<img src="https://img.shields.io/bundlephobia/min/ukiyojs">
<img src="https://img.shields.io/github/license/yitengjun/ukiyojs">
</p>
<p>
<a href="https://yitengjun.github.io/ukiyo-js/" target="_blank">
⛰️<br>
DEMO</a>
</p>
</div>
<br>

@@ -21,24 +29,35 @@

or via CDN:
``` html
<script src="ukiyo.min.js"></script>
```html
<script src="https://cdn.jsdelivr.net/npm/ukiyojs@1.0.0/dist/ukiyo.min.js"></script>
```
## Usage
Import Ukiyo.js:
```javascript
import Ukiyo from "ukiyojs";
```
## Usage
### HTML
Give the element you want to parallax a cool name to call it in JavaScript.
#### ```<img>``` tag
#### → ```<img>``` element
```html
<img class="ukiyo" src="image.jpg">
```
#### ```<picture>``` tag
#### → ```<picture>``` element
```html
<picture>
<source srcset="img.webp" type="image/webp">
<img class="ukiyo" src="img.png" alt="">
<img class="ukiyo" src="img.png">
<picture>
```
```html
<picture>
<source srcset="~" media="(min-width: 1000px)" />
<source srcset="~" media="(min-width: 700px)" />
<img class="ukiyo" src="~">
</picture>
```
```picture``` tag element is also supported: set the parallax to the ```img``` tag inside the picture tag.
#### Other Element
#### → Other Element
```html

@@ -56,3 +75,3 @@ <div class="ukiyo"></div>

You are now ready to go.
***
> If you want to apply it to more than one element, you need to loop through them as follows:

@@ -92,18 +111,19 @@ ```javascript

### Element Options
These options can be set individually for an element using the ```data-u-*``` attribute:
```html
<img
data-u-scale="2"
data-u-speed="1.7"
data-u-wrapper-class="wrapper-name"
data-u-willchange
data-u-scale="2"
data-u-speed="1.7"
data-u-wrapper-class="wrapper-name"
data-u-willchange
>
```
You can set options directly on the element.
When setting these options for an element, prefix them with **```data-u-```**.
| Option | Description |
| -------------------- | -------------------------------------------------------------------------- |
| ```data-u-scale```="" | ```scale``` option. |
| ```data-u-speed```="" | ```speed``` option. |
| ```data-u-willchange``` | ```willChange``` option. Simply attach it to the element to make it valid. |
| ```data-u-wrapper-class```="" | ```wrapperClass``` option. |
- ```data-u-scale```
- ```data-u-speed```
- ```data-u-willchange``` Simply attach it to the element to make it valid.
- ```data-u-wrapper-class```
> Option names start with ```data-u-```. Don't forget to prefix the option name with a "**u**", if u do.
> Option names start with ```data-u-*```. Don't forget to prefix the option name with a "**u**", if u do.

@@ -135,3 +155,3 @@ ## Methods

To support older browsers such as IE, you will need to use the Intersection Observer API, ```Promise``` and ```closest``` polyfills.
To support older browsers such as IE, you will need to use the Intersection Observer API, ```Promise``` and ```closest()``` polyfills.
If you use ```img``` tag, you will also need to use the ```object-fit``` polyfill.

@@ -142,3 +162,2 @@

## License
MIT License
[MIT License](https://github.com/yitengjun/ukiyojs/blob/main/LICENSE)

6

src/index.js

@@ -41,5 +41,4 @@ import { isImageLoaded } from './utils';

const path = this.element.getAttribute('src');
isImageLoaded(path).then((res) => {
this._init();
});
const load = isImageLoaded(path);
this._init();
} else {

@@ -71,3 +70,2 @@ this._init();

const elementOptionWrapperClass = this.element.getAttribute('data-u-wrapper-class');
if (this.options.wrapperClass || elementOptionWrapperClass) {

@@ -74,0 +72,0 @@ const customClass = elementOptionWrapperClass ? elementOptionWrapperClass : this.options.wrapperClass;

12

src/utils.js

@@ -6,11 +6,9 @@ /**

*/
const isImageLoaded = (src) => {
return new Promise((resolve, reject) => {
const img = new Image();
img.onload = () => resolve(img);
img.onerror = (e) => reject(e);
img.src = src;
});
const isImageLoaded = async (src) => {
const img = new Image();
img.src = src;
await img.decode();
return img;
};
export { isImageLoaded };

35

webpack.config.js

@@ -15,20 +15,21 @@ const path = require('path');

module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: [
{
loader: "babel-loader",
options: {
presets: [
"@babel/preset-env",
],
},
},
],
},
],
rules: [{
test: /\.js$/,
exclude: /node_modules/,
use: [{
loader: "babel-loader",
options: {
presets: [
"@babel/preset-env",
],
plugins: [
[
"@babel/transform-runtime"
]
]
},
}, ],
}, ],
},
target: ["web", "es5"],
target: ["web", "es5"],
};
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