ukiyojs - npm Package Compare versions

Comparing version 3.0.1 to 3.0.2

dist/ukiyo.min.js

@@ -1,1 +0,1 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).Ukiyo=e()}(this,(function(){"use strict";var t=function(t,e){var i=this;if(void 0===e&&(e={}),t&&(s="undefined"!=typeof Promise&&-1!==Promise.toString().indexOf("[native code]"),n=Element.prototype.closest,s&&n&&"IntersectionObserver"in window)){var s,n;this.element=t,this.wrapper=document.createElement("div"),this.isIMGtag="img"===t.tagName.toLowerCase(),this.overflow=null,this.timer=null,this.resizeEvent=this.resize.bind(this),this.observer=null,this.requestId=null,this.isInit=!1;this.options=Object.assign({},{scale:1.5,speed:1.5,wrapperClass:null,willChange:!1},e);var r,o=t.getAttribute("data-u-scale"),l=t.getAttribute("data-u-speed"),h=t.getAttribute("data-u-willchange");if(null!==o&&(this.options.scale=o),null!==l&&(this.options.speed=l),null!==h&&(this.options.willChange=!0),this.isIMGtag){var a=this.element.getAttribute("src");(r=a,new Promise((function(t,e){var i=new Image;i.onload=function(){return t(i)},i.onerror=function(t){return e(t)},i.src=r}))).then((function(){i._init()}))}else this._init()}};return t.prototype._init=function(){this.isInit||(this._setupElements(),this._observer(),this._addEvent(),this.isInit=!0)},t.prototype._setupElements=function(){this._setStyles(!0);var t=this.element.getAttribute("data-u-wrapper-class"),e=this.element.closest("picture");if(this.options.wrapperClass||t){var i=t||this.options.wrapperClass;this.wrapper.classList.add(i)}null!==e?(e.parentNode.insertBefore(this.wrapper,e),this.wrapper.appendChild(e)):(this.element.parentNode.insertBefore(this.wrapper,this.element),this.wrapper.appendChild(this.element))},t.prototype._setStyles=function(t){var e=this.element.clientHeight,i=this.element.clientWidth,s=document.defaultView.getComputedStyle(this.element),n="absolute"===s.position;this.overflow=e-e*this.options.scale,"absolute"===s.position&&"0px"!==s.marginRight&&"0px"!==s.marginLeft&&s.marginLeft===s.marginRight&&(this.wrapper.style.margin="auto"),"0px"===s.marginTop&&"0px"===s.marginBottom||(this.wrapper.style.marginTop=s.marginTop,this.wrapper.style.marginBottom=s.marginBottom,this.element.style.marginTop="0",this.element.style.marginBottom="0"),"auto"!==s.inset&&(this.wrapper.style.top=s.top,this.wrapper.style.right=s.right,this.wrapper.style.bottom=s.bottom,this.wrapper.style.left=s.left,this.element.style.top="0",this.element.style.right="0",this.element.style.bottom="0",this.element.style.left="0"),"none"!==s.transform&&(this.wrapper.style.transform=s.transform),"auto"!==s.zIndex&&(this.wrapper.style.zIndex=s.zIndex),this.wrapper.style.position=n?"absolute":"relative",t&&(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"!==s.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"!==s.maxHeight&&(this.wrapper.style.maxHeight=s.maxHeight,this.element.style.maxHeight="none"),"0px"!==s.minHeight&&(this.wrapper.style.minHeight=s.minHeight,this.element.style.minHeight="none"),this.wrapper.style.height=e+"px",this.element.style.height=e*this.options.scale+"px"},t.prototype._observer=function(){this.observer=new IntersectionObserver(this._observerCallback.bind(this),{root:null,rootMargin:"0px",threshold:0}),this.observer.observe(this.wrapper)},t.prototype._observerCallback=function(t){var e=this;t.forEach((function(t){t.isIntersecting?(e.isVisible=!0,e._update()):(e.isVisible=!1,e._cancel())}))},t.prototype._update=function(){this._setPosition(),this.requestId=window.requestAnimationFrame(this._update.bind(this))},t.prototype._setPosition=function(){this.options.willChange&&"transform"!==this.element.style.willChange&&(this.element.style.willChange="transform"),this.element.style.transform="translate3d(0 , "+this._getTranslate()+"px , 0)"},t.prototype._getTranslate=function(){var t=Math.abs(this.overflow),e=this._getProgress()/100,i=this.overflow+t*e*this.options.speed;return Math.round(i)},t.prototype._getProgress=function(){var t=window.innerHeight,e=this.wrapper.offsetHeight,i=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0,s=(i+t-(this.wrapper.getBoundingClientRect().top+i))/((t+e)/100);return Math.min(100,Math.max(0,s))},t.prototype._cancel=function(){this.requestId&&(this.options.willChange&&(this.element.style.willChange="auto"),window.cancelAnimationFrame(this.requestId))},t.prototype._addEvent=function(){navigator.userAgent.match(/(iPhone|iPad|iPod|Android)/)?window.addEventListener("orientationchange",this.resizeEvent):window.addEventListener("resize",this.resizeEvent)},t.prototype.resize=function(){clearTimeout(this.timer),this.timer=setTimeout(this.reset.bind(this),450)},t.prototype.reset=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()},t.prototype.destroy=function(){var t;this._cancel(),this.observer.disconnect(),this.wrapper.removeAttribute("style"),this.element.removeAttribute("style"),(t=this.wrapper).replaceWith.apply(t,this.wrapper.childNodes),window.removeEventListener("resize",this.resizeEvent),window.removeEventListener("orientationchange",this.resizeEvent),this.isInit=!1},t}));
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).Ukiyo=e()}(this,(function(){"use strict";var t=function(t,e){var i=this;if(void 0===e&&(e={}),t&&(s="undefined"!=typeof Promise&&-1!==Promise.toString().indexOf("[native code]"),r=Element.prototype.closest,s&&r&&"IntersectionObserver"in window)){var s,r;this.element=t,this.wrapper=document.createElement("div"),this.isIMGtag="img"===t.tagName.toLowerCase(),this.overflow=null,this.timer=null,this.resizeEvent=this.resize.bind(this),this.observer=null,this.requestId=null,this.isInit=!1;this.options=Object.assign({},{scale:1.5,speed:1.5,wrapperClass:null,willChange:!1},e);var n,o=t.getAttribute("data-u-scale"),l=t.getAttribute("data-u-speed"),a=t.getAttribute("data-u-willchange");if(null!==o&&(this.options.scale=o),null!==l&&(this.options.speed=l),null!==a&&(this.options.willChange=!0),this.isIMGtag){var h=this.element.getAttribute("src");(n=h,new Promise((function(t,e){var i=new Image;i.onload=function(){return t(i)},i.onerror=function(t){return e(t)},i.src=n}))).then((function(){i._init()}))}else this._init()}};return t.prototype._init=function(){this.isInit||(this._setupElements(),this._observer(),this._addEvent(),this.isInit=!0)},t.prototype._setupElements=function(){this._setStyles(!0);var t=this.element.getAttribute("data-u-wrapper-class"),e=this.element.closest("picture");if(this.options.wrapperClass||t){var i=t||this.options.wrapperClass;this.wrapper.classList.add(i)}null!==e?(e.parentNode.insertBefore(this.wrapper,e),this.wrapper.appendChild(e)):(this.element.parentNode.insertBefore(this.wrapper,this.element),this.wrapper.appendChild(this.element))},t.prototype._setStyles=function(t){var e=this.element.clientHeight,i=this.element.clientWidth,s=document.defaultView.getComputedStyle(this.element),r="absolute"===s.position;this.overflow=e-e*this.options.scale,"absolute"===s.position&&"0px"!==s.marginRight&&"0px"!==s.marginLeft&&s.marginLeft===s.marginRight&&(this.wrapper.style.margin="auto"),"0px"===s.marginTop&&"0px"===s.marginBottom||(this.wrapper.style.marginTop=s.marginTop,this.wrapper.style.marginBottom=s.marginBottom,this.element.style.marginTop="0",this.element.style.marginBottom="0"),"auto"!==s.inset&&(this.wrapper.style.top=s.top,this.wrapper.style.right=s.right,this.wrapper.style.bottom=s.bottom,this.wrapper.style.left=s.left,this.element.style.top="0",this.element.style.right="0",this.element.style.bottom="0",this.element.style.left="0"),"none"!==s.transform&&(this.wrapper.style.transform=s.transform),"auto"!==s.zIndex&&(this.wrapper.style.zIndex=s.zIndex),this.wrapper.style.position=r?"absolute":"relative","auto"!==s.gridArea&&"auto / auto / auto / auto"!==s.gridArea&&(this.wrapper.style.gridArea=s.gridArea,this.element.style.gridArea="auto"),t&&(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"!==s.padding&&(this.element.style.padding="0"),this.isIMGtag?this.element.style.objectFit="cover":this.element.style.backgroundPosition="center"),r&&(this.wrapper.style.width=i+"px",this.element.style.width="100%"),"none"!==s.maxHeight&&(this.wrapper.style.maxHeight=s.maxHeight,this.element.style.maxHeight="none"),"0px"!==s.minHeight&&(this.wrapper.style.minHeight=s.minHeight,this.element.style.minHeight="none"),this.wrapper.style.height=e+"px",this.element.style.height=e*this.options.scale+"px"},t.prototype._observer=function(){this.observer=new IntersectionObserver(this._observerCallback.bind(this),{root:null,rootMargin:"0px",threshold:0}),this.observer.observe(this.wrapper)},t.prototype._observerCallback=function(t){var e=this;t.forEach((function(t){t.isIntersecting?(e.isVisible=!0,e._update()):(e.isVisible=!1,e._cancel())}))},t.prototype._update=function(){this._setPosition(),this.requestId=window.requestAnimationFrame(this._update.bind(this))},t.prototype._setPosition=function(){this.options.willChange&&"transform"!==this.element.style.willChange&&(this.element.style.willChange="transform"),this.element.style.transform="translate3d(0 , "+this._getTranslate()+"px , 0)"},t.prototype._getTranslate=function(){var t=Math.abs(this.overflow),e=this._getProgress()/100,i=this.overflow+t*e*this.options.speed;return Math.round(i)},t.prototype._getProgress=function(){var t=window.innerHeight,e=this.wrapper.offsetHeight,i=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0,s=(i+t-(this.wrapper.getBoundingClientRect().top+i))/((t+e)/100);return Math.min(100,Math.max(0,s))},t.prototype._cancel=function(){this.requestId&&(this.options.willChange&&(this.element.style.willChange="auto"),window.cancelAnimationFrame(this.requestId))},t.prototype._addEvent=function(){navigator.userAgent.match(/(iPhone|iPad|iPod|Android)/)?window.addEventListener("orientationchange",this.resizeEvent):window.addEventListener("resize",this.resizeEvent)},t.prototype.resize=function(){clearTimeout(this.timer),this.timer=setTimeout(this.reset.bind(this),450)},t.prototype.reset=function(){this.wrapper.style.width="",this.wrapper.style.position="",this.element.style.width="",this.isIMGtag&&"absolute"===this.wrapper.style.position?this.wrapper.style.height="100%":this.wrapper.style.height="",""===this.wrapper.style.gridArea?this.element.style.height="":this.element.style.height="100%","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()},t.prototype.destroy=function(){var t;this._cancel(),this.observer.disconnect(),this.wrapper.removeAttribute("style"),this.element.removeAttribute("style"),(t=this.wrapper).replaceWith.apply(t,this.wrapper.childNodes),window.removeEventListener("resize",this.resizeEvent),window.removeEventListener("orientationchange",this.resizeEvent),this.isInit=!1},t}));

package.json

 {
   "name": "ukiyojs",
-  "version": "3.0.1",
+  "version": "3.0.2",
   "description": "Modern parallax library for picture elements and any images",
@@ -5,0 +5,0 @@ "homepage": "https://yitengjun.github.io/ukiyo-js/",

README.md

@@ -30,3 +30,3 @@ <div align="center">
 ```html
-<script src="https://cdn.jsdelivr.net/npm/ukiyojs@3.0.1/dist/ukiyo.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/ukiyojs@3.0.2/dist/ukiyo.min.js"></script>
 ```
@@ -90,8 +90,8 @@
 
-| Option       | Type    | Default | Description                                                                            | 
-| ------------ | ------- | ------- | -------------------------------------------------------------------------------------- | 
-| ```scale```        | ```number```  | ```1.5```     | Parallax image scaling factor.                                                          | 
-| ```speed```        | ```number```  | ```1.5```     | Parallax speed.                                                                         | 
-| ```willChange```   | ```boolean``` | ```false```   | If true, the element will be given a ```will-change: transform``` when Parallax is active. | 
-| ```wrapperClass``` | ```string```  | ```null```    | Class name of the automatically generated wrapper element.                              | 
+| Option | Type | Default | Description | 
+| - | - | - | - |
+| ```scale``` | ```number``` | ```1.5``` | Parallax image scaling factor. | 
+| ```speed``` | ```number```  | ```1.5``` | Parallax speed. | 
+| ```willChange``` | ```boolean``` | ```false``` | If true, the element will be given a ```will-change: transform``` when Parallax is active. | 
+| ```wrapperClass``` | ```string```  | ```null``` | Class name of the automatically generated wrapper element. | 
 
@@ -120,8 +120,9 @@ These can be configured with the following JS code:
 ```
-| 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.                                                        | 
+| Attribute | Values | Description |
+| - | - | - |
+| ```data-u-scale``` | ```number``` | ```scale``` option. |
+| ```data-u-speed``` | ```number``` | ```speed``` option. |
+| ```data-u-willchange``` |  | ```willChange``` option. Simply attach it to the element to make it valid. |
+| ```data-u-wrapper-class``` | string | ```wrapperClass``` option. |
+|  |  |  |
 
@@ -128,0 +129,0 @@ > Option names start with ```data-u-*```. Don't forget to prefix the option name with a "**u**", if u do.

src/index.js

@@ -100,4 +100,4 @@ import { isImageLoaded, browserCheck } from './utils';
     const elementWidth = this.element.clientWidth;
-    const elementStyle = document.defaultView.getComputedStyle(this.element);
-    const isPositionAbsolute = elementStyle.position === 'absolute';
+    const style = document.defaultView.getComputedStyle(this.element);
+    const isPositionAbsolute = style.position === 'absolute';
 
@@ -108,14 +108,9 @@ // Difference between the height of the element and the wrapper
     // When using both margin: auto and position: absolute
-    if (
-      elementStyle.position === 'absolute' &&
-      elementStyle.marginRight !== '0px' &&
-      elementStyle.marginLeft !== '0px' &&
-      elementStyle.marginLeft === elementStyle.marginRight
-    ) {
+    if (style.position === 'absolute' && style.marginRight !== '0px' && style.marginLeft !== '0px' && style.marginLeft === style.marginRight) {
       this.wrapper.style.margin = 'auto';
     }
 
-    if (elementStyle.marginTop !== '0px' || elementStyle.marginBottom !== '0px') {
-      this.wrapper.style.marginTop = elementStyle.marginTop;
-      this.wrapper.style.marginBottom = elementStyle.marginBottom;
+    if (style.marginTop !== '0px' || style.marginBottom !== '0px') {
+      this.wrapper.style.marginTop = style.marginTop;
+      this.wrapper.style.marginBottom = style.marginBottom;
       this.element.style.marginTop = '0';
@@ -125,7 +120,7 @@ this.element.style.marginBottom = '0';
 
-    if (elementStyle.inset !== 'auto') {
-      this.wrapper.style.top = elementStyle.top;
-      this.wrapper.style.right = elementStyle.right;
-      this.wrapper.style.bottom = elementStyle.bottom;
-      this.wrapper.style.left = elementStyle.left;
+    if (style.inset !== 'auto') {
+      this.wrapper.style.top = style.top;
+      this.wrapper.style.right = style.right;
+      this.wrapper.style.bottom = style.bottom;
+      this.wrapper.style.left = style.left;
       this.element.style.top = '0';
@@ -137,5 +132,5 @@ this.element.style.right = '0';
 
-    if (elementStyle.transform !== 'none') this.wrapper.style.transform = elementStyle.transform;
+    if (style.transform !== 'none') this.wrapper.style.transform = style.transform;
 
-    if (elementStyle.zIndex !== 'auto') this.wrapper.style.zIndex = elementStyle.zIndex;
+    if (style.zIndex !== 'auto') this.wrapper.style.zIndex = style.zIndex;
 
@@ -148,2 +143,8 @@ if (isPositionAbsolute) {
 
+    const hasGrid = style.gridArea !== 'auto' && style.gridArea !== 'auto / auto / auto / auto';
+    if (hasGrid) {
+      this.wrapper.style.gridArea = style.gridArea;
+      this.element.style.gridArea = 'auto';
+    }
+
     // Initial style settings
@@ -157,3 +158,3 @@ if (init) {
 
-      if (elementStyle.padding !== '0px') {
+      if (style.padding !== '0px') {
         this.element.style.padding = '0';
@@ -173,8 +174,8 @@ }
     }
-    if (elementStyle.maxHeight !== 'none') {
-      this.wrapper.style.maxHeight = elementStyle.maxHeight;
+    if (style.maxHeight !== 'none') {
+      this.wrapper.style.maxHeight = style.maxHeight;
       this.element.style.maxHeight = 'none';
     }
-    if (elementStyle.minHeight !== '0px') {
-      this.wrapper.style.minHeight = elementStyle.minHeight;
+    if (style.minHeight !== '0px') {
+      this.wrapper.style.minHeight = style.minHeight;
       this.element.style.minHeight = 'none';
@@ -301,8 +302,18 @@ }
   reset() {
-    this.wrapper.style.height = '100%';
     this.wrapper.style.width = '';
     this.wrapper.style.position = '';
-    this.element.style.height = '';
     this.element.style.width = '';
 
+    if (this.isIMGtag && this.wrapper.style.position === 'absolute') {
+      this.wrapper.style.height = '100%';
+    } else {
+      this.wrapper.style.height = '';
+    }
+
+    if (this.wrapper.style.gridArea === '') {
+      this.element.style.height = '';
+    } else {
+      this.element.style.height = '100%';
+    }
+
     if (this.wrapper.style.margin !== '0px') {
@@ -309,0 +320,0 @@ this.wrapper.style.margin = '';

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

Lines of code

382

increased by2.41%

Number of lines in readme file

160

increased by0.63%

Worsened metrics

Total package byte prevSize

25281

decreased by-0.58%

No dependency changes