ukiyojs
Advanced tools
Comparing version 3.0.0 to 3.0.1
@@ -7,3 +7,6 @@ { | ||
}, | ||
"extends": ["eslint:recommended", "prettier"], | ||
"extends": [ | ||
"eslint:recommended", | ||
"prettier" | ||
], | ||
"parserOptions": { | ||
@@ -10,0 +13,0 @@ "ecmaVersion": "latest", |
@@ -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.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="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 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");if(this.options.wrapperClass||t){var e=t||this.options.wrapperClass;this.wrapper.classList.add(e)}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))},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.resize.bind(this)):window.addEventListener("resize",this.resize.bind(this))},t.prototype.resize=function(){clearTimeout(this.timer),this.timer=setTimeout(this.reset,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),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]"),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})); |
{ | ||
"name": "ukiyojs", | ||
"version": "3.0.0", | ||
"version": "3.0.1", | ||
"description": "Modern parallax library for picture elements and any images", | ||
@@ -5,0 +5,0 @@ "homepage": "https://yitengjun.github.io/ukiyo-js/", |
@@ -8,3 +8,3 @@ <div align="center"> | ||
<p> | ||
<img src="https://img.shields.io/bundlephobia/min/ukiyojs"> | ||
<img src="https://img.shields.io/bundlephobia/min/ukiyojs/3.0.0"> | ||
<img src="https://img.shields.io/github/license/yitengjun/ukiyojs"> | ||
@@ -31,3 +31,3 @@ </p> | ||
```html | ||
<script src="https://cdn.jsdelivr.net/npm/ukiyojs@3.0.0/dist/ukiyo.min.js"></script> | ||
<script src="https://cdn.jsdelivr.net/npm/ukiyojs@3.0.1/dist/ukiyo.min.js"></script> | ||
``` | ||
@@ -34,0 +34,0 @@ |
@@ -16,6 +16,3 @@ import buble from '@rollup/plugin-buble'; | ||
}, | ||
plugins: [ | ||
buble(bubleOptions), | ||
terser() | ||
] | ||
plugins: [buble(bubleOptions), terser()] | ||
}; |
@@ -12,5 +12,17 @@ import { isImageLoaded, browserCheck } from './utils'; | ||
// Parallax properties | ||
this.element = element; | ||
this.wrapper = document.createElement('div'); | ||
this.isIMGtag = element.tagName.toLowerCase() === 'img'; | ||
this.overflow = null; | ||
// Resize properties | ||
this.timer = null; | ||
this.resizeEvent = this.resize.bind(this); | ||
this.observer = null; | ||
this.requestId = null; | ||
this.isInit = false; | ||
// Options | ||
const defaults = { | ||
@@ -22,2 +34,3 @@ scale: 1.5, | ||
}; | ||
this.options = { ...defaults, ...options }; | ||
@@ -33,10 +46,3 @@ | ||
this.isIMGtag = this.element.tagName.toLowerCase() === 'img'; | ||
this.overflow = null; | ||
this.observer = null; | ||
this.requestId = null; | ||
this.timer = null; | ||
this.reset = this.reset.bind(this); | ||
this.isInit = false; | ||
// Init | ||
if (this.isIMGtag) { | ||
@@ -69,5 +75,8 @@ const path = this.element.getAttribute('src'); | ||
_setupElements() { | ||
// Set style | ||
this._setStyles(true); | ||
const elementOptionWrapperClass = this.element.getAttribute('data-u-wrapper-class'); | ||
const pictureTag = this.element.closest('picture'); | ||
if (this.options.wrapperClass || elementOptionWrapperClass) { | ||
@@ -79,3 +88,2 @@ const customClass = elementOptionWrapperClass ? elementOptionWrapperClass : this.options.wrapperClass; | ||
// Wrapping an element by adding a wrapper element | ||
const pictureTag = this.element.closest('picture'); | ||
if (pictureTag !== null) { | ||
@@ -198,7 +206,5 @@ pictureTag.parentNode.insertBefore(this.wrapper, pictureTag); | ||
if (entry.isIntersecting) { | ||
// Is visible | ||
this.isVisible = true; | ||
this._update(); | ||
} else { | ||
// Is not visible | ||
this.isVisible = false; | ||
@@ -276,5 +282,5 @@ this._cancel(); | ||
if (navigator.userAgent.match(/(iPhone|iPad|iPod|Android)/)) { | ||
window.addEventListener('orientationchange', this.resize.bind(this)); | ||
window.addEventListener('orientationchange', this.resizeEvent); | ||
} else { | ||
window.addEventListener('resize', this.resize.bind(this)); | ||
window.addEventListener('resize', this.resizeEvent); | ||
} | ||
@@ -288,3 +294,3 @@ } | ||
clearTimeout(this.timer); | ||
this.timer = setTimeout(this.reset, 450); | ||
this.timer = setTimeout(this.reset.bind(this), 450); | ||
} | ||
@@ -343,4 +349,7 @@ | ||
window.removeEventListener('resize', this.resizeEvent); | ||
window.removeEventListener('orientationchange', this.resizeEvent); | ||
this.isInit = false; | ||
} | ||
} |
25428
373