ukiyojs - npm Package Compare versions

Comparing version 2.0.2 to 2.0.3

.eslintrc.json

@@ -9,4 +9,5 @@ {
   "parserOptions": {
+    "ecmaVersion": "latest",
     "sourceType": "module"
   }
 }

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(){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}()}));
+!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}));

package.json

 {
   "name": "ukiyojs",
-  "version": "2.0.2",
-  "description": "Simple and lightweight JavaScript library for background parallax with support for picture/img elements.",
+  "version": "2.0.3",
+  "description": "Modern parallax library for picture elements and any images",
   "homepage": "https://yitengjun.github.io/ukiyo-js/",
@@ -22,4 +22,4 @@ "repository": {
   "scripts": {
-    "dev": "webpack --mode development --watch",
-    "build": "webpack",
+    "dev": "rollup -c -w",
+    "build": "rollup -c",
     "lint": "eslint  \"./src/**/*.js\" --fix",
@@ -30,4 +30,3 @@ "format": "prettier --write \"./src/**/*.js\"",
   "devDependencies": {
-    "@babel/core": "^7.14.6",
-    "@babel/preset-env": "^7.14.7",
+    "@rollup/plugin-buble": "^0.21.3",
     "@semantic-release/commit-analyzer": "^9.0.2",
@@ -38,9 +37,8 @@ "@semantic-release/git": "^10.0.1",
     "@semantic-release/release-notes-generator": "^10.0.3",
-    "babel-loader": "^8.2.2",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
     "prettier": "^2.4.1",
-    "semantic-release": "^18.0.1",
-    "webpack": "^5.44.0",
-    "webpack-cli": "^4.7.2"
+    "rollup": "^2.70.1",
+    "rollup-plugin-terser": "^7.0.2",
+    "semantic-release": "^18.0.1"
   },
@@ -58,8 +56,3 @@ "release": {
     ]
-  },
-  "config": {
-    "commitizen": {
-      "path": "./node_modules/cz-conventional-changelog"
-    }
   }
 }

README.md

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

src/index.js

@@ -41,3 +41,3 @@ import { isImageLoaded, browserCheck } from './utils';
       const path = this.element.getAttribute('src');
-      isImageLoaded(path).then((res) => {
+      isImageLoaded(path).then(() => {
         this._init();
@@ -44,0 +44,0 @@ });

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

Dev dependency count

12

decreased by-14.29%

Lines of code

365

increased by3.11%

Worsened metrics

Total package byte prevSize

25109

decreased by-9.19%

No dependency changes