ukiyojs - npm Package Compare versions

Comparing version 2.0.1 to 2.0.2

dist/ukiyo.min.js

@@ -1,1 +0,1 @@
-!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 p}});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}))},r=function(){var e="undefined"!=typeof Promise&&-1!==Promise.toString().indexOf("[native code]"),t=Element.prototype.closest;return e&&t&&"IntersectionObserver"in window};function n(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 s(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 o(e){for(var t=1;t<arguments.length;t++){var i=null!=arguments[t]?arguments[t]:{};t%2?s(Object(i),!0).forEach((function(t){l(e,t,i[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(i)):s(Object(i)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(i,t))}))}return e}function l(e,t,i){return t in e?Object.defineProperty(e,t,{value:i,enumerable:!0,configurable:!0,writable:!0}):e[t]=i,e}function a(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function h(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 p=function(){function e(t){var n=this,s=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(a(this,e),t&&r()){var l={scale:1.5,speed:1.5,wrapperClass:null,willChange:!1},h=t.getAttribute("data-u-scale"),p=t.getAttribute("data-u-speed"),u=t.getAttribute("data-u-willchange");if(this.element=t,this.wrapper=document.createElement("div"),this.options=o(o({},l),s),null!==h&&(this.options.scale=h),null!==p&&(this.options.speed=p),null!==u&&(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 c=this.element.getAttribute("src");i(c).then((function(e){n._init()}))}else this._init()}}var t,s;return t=e,(s=[{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,"absolute"===r.position&&"0px"!==r.marginRight&&"0px"!==r.marginLeft&&r.marginLeft===r.marginRight&&(this.wrapper.style.margin="auto"),"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 n(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 n(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)?n(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}}])&&h(t.prototype,s),e}();return t.default}()}));
+!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 p}});var i=function(){var e="undefined"!=typeof Promise&&-1!==Promise.toString().indexOf("[native code]"),t=Element.prototype.closest;return e&&t&&"IntersectionObserver"in window},r=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 n(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 s(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 o(e){for(var t=1;t<arguments.length;t++){var i=null!=arguments[t]?arguments[t]:{};t%2?s(Object(i),!0).forEach((function(t){a(e,t,i[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(i)):s(Object(i)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(i,t))}))}return e}function a(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 h(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 p=function(){function e(t){var n=this,s=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(l(this,e),t&&i()){this.element=t,this.wrapper=document.createElement("div");var a={scale:1.5,speed:1.5,wrapperClass:null,willChange:!1};this.options=o(o({},a),s);var h=t.getAttribute("data-u-scale"),p=t.getAttribute("data-u-speed"),u=t.getAttribute("data-u-willchange");if(null!==h&&(this.options.scale=h),null!==p&&(this.options.speed=p),null!==u&&(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 c=this.element.getAttribute("src");r(c).then((function(e){n._init()}))}else this._init()}}var t,s;return t=e,(s=[{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,"absolute"===r.position&&"0px"!==r.marginRight&&"0px"!==r.marginLeft&&r.marginLeft===r.marginRight&&(this.wrapper.style.margin="auto"),"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="100%",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 n(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 n(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)?n(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}}])&&h(t.prototype,s),e}();return t.default}()}));

package.json

 {
   "name": "ukiyojs",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "Simple and lightweight JavaScript library for background parallax with support for picture/img elements.",
@@ -13,5 +13,7 @@ "homepage": "https://yitengjun.github.io/ukiyo-js/",
     "javascript",
+    "parallax",
+    "scroll",
     "background-image",
-    "parallax",
-    "scroll"
+    "background",
+    "parallax-scrolling"
   ],
@@ -18,0 +20,0 @@ "author": "Yiteng Jun <[e-mail]>",

README.md

@@ -30,3 +30,3 @@ <div align="center">
 ```html
-<script src="https://cdn.jsdelivr.net/npm/ukiyojs@2.0.1/dist/ukiyo.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/ukiyojs@2.0.2/dist/ukiyo.min.js"></script>
 ```
@@ -33,0 +33,0 @@

src/index.js

@@ -12,2 +12,5 @@ import { isImageLoaded, browserCheck } from './utils';
 
+    this.element = element;
+    this.wrapper = document.createElement('div');
+
     const defaults = {
@@ -19,2 +22,4 @@ scale: 1.5,
     };
+    this.options = { ...defaults, ...options };
+
     const elementOptionScale = element.getAttribute('data-u-scale');
@@ -24,6 +29,2 @@ const elementOptionSpeed = element.getAttribute('data-u-speed');
 
-    this.element = element;
-    this.wrapper = document.createElement('div');
-
-    this.options = { ...defaults, ...options };
     if (elementOptionScale !== null) this.options.scale = elementOptionScale;
@@ -39,3 +40,2 @@ if (elementOptionSpeed !== null) this.options.speed = elementOptionSpeed;
     this.reset = this.reset.bind(this);
-
     this.isInit = false;
@@ -70,3 +70,2 @@
   _setupElements() {
-    // Set CSS style for the element
     this._setStyles(true);
@@ -104,3 +103,9 @@
 
-    if (elementStyle.position === 'absolute' && elementStyle.marginRight !== '0px' && elementStyle.marginLeft !== '0px' && elementStyle.marginLeft === elementStyle.marginRight) {
+    // When using both margin: auto and position: absolute
+    if (
+      elementStyle.position === 'absolute' &&
+      elementStyle.marginRight !== '0px' &&
+      elementStyle.marginLeft !== '0px' &&
+      elementStyle.marginLeft === elementStyle.marginRight
+    ) {
       this.wrapper.style.margin = 'auto';
@@ -289,3 +294,3 @@ }
   reset() {
-    this.wrapper.style.height = '';
+    this.wrapper.style.height = '100%';
     this.wrapper.style.width = '';
@@ -292,0 +297,0 @@ this.wrapper.style.position = '';

src/utils.js

 /**
+ * Determine if the browser supports it
+ * @return {boolean}
+ */
+const browserCheck = () => {
+  const promise = typeof Promise !== 'undefined' && Promise.toString().indexOf('[native code]') !== -1;
+  const closest = Element.prototype.closest;
+
+  return promise && closest && 'IntersectionObserver' in window;
+};
+
+/**
  * Wait for the images to load
@@ -15,13 +26,2 @@ * @param  {string} src - Image source
 
-/**
- * Determine if the browser supports it
- * @return {boolean}
- */
-const browserCheck = () => {
-  const promise = typeof Promise !== 'undefined' && Promise.toString().indexOf('[native code]') !== -1;
-  const closest = Element.prototype.closest;
-
-  return promise && closest && 'IntersectionObserver' in window;
-};
-
-export { isImageLoaded, browserCheck };
+export { browserCheck, isImageLoaded };

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

27650

increased by0.39%

Lines of code

354

increased by1.43%

No dependency changes