diff --git a/.babelrc b/.babelrc index b6238ce..615a425 100644 --- a/.babelrc +++ b/.babelrc @@ -1,10 +1,10 @@ { - "presets": [ - [ - "@babel/preset-env", - { - "useBuiltIns": "entry" - } - ] + "presets": [ + [ + "@babel/preset-env", + { + "useBuiltIns": "entry" + } ] - } + ] +} \ No newline at end of file diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..626cb16 --- /dev/null +++ b/.gitignore @@ -0,0 +1,3 @@ +node_modules +package-lock.json +test \ No newline at end of file diff --git a/.npmignore b/.npmignore new file mode 100644 index 0000000..5d96e0f --- /dev/null +++ b/.npmignore @@ -0,0 +1,3 @@ +node_modules +test +.babelrc \ No newline at end of file diff --git a/.npmrc b/.npmrc new file mode 100644 index 0000000..9cf9495 --- /dev/null +++ b/.npmrc @@ -0,0 +1 @@ +package-lock=false \ No newline at end of file diff --git a/CHANGELOG.md b/CHANGELOG.md index cc56833..37b4d11 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,10 @@ # Changelog -Changelog started on 1.1.6 because the first version was in beta +## 1.2.0 +- No more .min.js or .min.css +- No more prefix `-animation` after the animation name +- Improvement for animations and lazy-attr +- Node module added ## 1.1.9 - BUGS correction diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md new file mode 100644 index 0000000..f9cb6a8 --- /dev/null +++ b/CONTRIBUTING.md @@ -0,0 +1,92 @@ +# Contributing + +When contributing to this repository, please first discuss the change you wish to make via issue, +email, or any other method with the owners of this repository before making a change. + +Please note we have a code of conduct, please follow it in all your interactions with the project. + +## Pull Request Process + +1. Ensure any install or build dependencies are removed before the end of the layer when doing a + build. +2. Update the README.md with details of changes to the interface, this includes new environment + variables, exposed ports, useful file locations and container parameters. +3. Increase the version numbers in any examples files and the README.md to the new version that this + Pull Request would represent. The versioning scheme we use is [SemVer](http://semver.org/). +4. You may merge the Pull Request in once you have the sign-off of two other developers, or if you + do not have permission to do that, you may request the second reviewer to merge it for you. + +## Code of Conduct + +### Our Pledge + +In the interest of fostering an open and welcoming environment, we as +contributors and maintainers pledge to making participation in our project and +our community a harassment-free experience for everyone, regardless of age, body +size, disability, ethnicity, gender identity and expression, level of experience, +nationality, personal appearance, race, religion, or sexual identity and +orientation. + +### Our Standards + +Examples of behavior that contributes to creating a positive environment +include: + +* Using welcoming and inclusive language +* Being respectful of differing viewpoints and experiences +* Gracefully accepting constructive criticism +* Focusing on what is best for the community +* Showing empathy towards other community members + +Examples of unacceptable behavior by participants include: + +* The use of sexualized language or imagery and unwelcome sexual attention or +advances +* Trolling, insulting/derogatory comments, and personal or political attacks +* Public or private harassment +* Publishing others' private information, such as a physical or electronic + address, without explicit permission +* Other conduct which could reasonably be considered inappropriate in a + professional setting + +### Our Responsibilities + +Project maintainers are responsible for clarifying the standards of acceptable +behavior and are expected to take appropriate and fair corrective action in +response to any instances of unacceptable behavior. + +Project maintainers have the right and responsibility to remove, edit, or +reject comments, commits, code, wiki edits, issues, and other contributions +that are not aligned to this Code of Conduct, or to ban temporarily or +permanently any contributor for other behaviors that they deem inappropriate, +threatening, offensive, or harmful. + +### Scope + +This Code of Conduct applies both within project spaces and in public spaces +when an individual is representing the project or its community. Examples of +representing a project or community include using an official project e-mail +address, posting via an official social media account, or acting as an appointed +representative at an online or offline event. Representation of a project may be +further defined and clarified by project maintainers. + +### Enforcement + +Instances of abusive, harassing, or otherwise unacceptable behavior may be +reported by contacting the project team at [INSERT EMAIL ADDRESS]. All +complaints will be reviewed and investigated and will result in a response that +is deemed necessary and appropriate to the circumstances. The project team is +obligated to maintain confidentiality with regard to the reporter of an incident. +Further details of specific enforcement policies may be posted separately. + +Project maintainers who do not follow or enforce the Code of Conduct in good +faith may face temporary or permanent repercussions as determined by other +members of the project's leadership. + +### Attribution + +This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, +available at [http://contributor-covenant.org/version/1/4][version] + +[homepage]: http://contributor-covenant.org +[version]: http://contributor-covenant.org/version/1/4/ \ No newline at end of file diff --git a/README.md b/README.md index 4e0f75d..dc16bd5 100644 --- a/README.md +++ b/README.md @@ -1,22 +1,27 @@ -# 📖 Lazy-attr v1.1.9 +# 📖 Lazy-attr v1.2.0 [![npm](https://img.shields.io/badge/npm-download-green)](https://www.npmjs.com/package/lazy-attr) [![Download](https://img.shields.io/badge/github-download-gree)](https://github.com/yoannchb-pro/Lazy-attr) Create lazy image, iframe, video... Make custom animation on lazy and not lazy element on all browser. You can also use our animations included in the lib ([Demo](https://yoannchb-pro.github.io/Lazy-attr/index.html#toanimate)). All of that just with html attributes. +## Browser supported + +supported browser + ## Example --- ```html - + ``` ## 🎉 Update --- -- BUGS correction -- Better animations -- `lazy-animation-pointer` can now delete the skeleton animation of an element +- No more .min.js or .min.css +- No more prefix `-animation` after the animation name +- Improvement for animations and lazy-attr +- Node module added ## 📚 Documentation & Demo --- @@ -29,17 +34,16 @@ Create lazy image, iframe, video... Make custom animation on lazy and not lazy e - You just need to import the css file and the js file - In browser put it in the \ - In vue.js you can put it in the public.html file -- formats : `lazy-attr.min.js`, `lazy-attr.esm.min.js` and `lazy-attr.cjs.min.js` ### CDN ```html - - + + ``` ### From download ```html - - + + ``` ## Class @@ -93,22 +97,20 @@ Create lazy image, iframe, video... Make custom animation on lazy and not lazy e | version | Get actual version of lazy-attr | | parameters | Get all possible attributes of lazy-attr | | animations | Get all animation prefix | -| getLastVersion(callback) | Get lastversion of lazy-attr | + ## Animations --- ### How -- To make an animation you need to use lazy-animation -- form: prefix-animation - [Demo](https://yoannchb-pro.github.io/Lazy-attr/index.html#toanimate) ### Example ```html - + ``` -### Prefix animations list +### Animations list ```json zoomin zoomout @@ -130,7 +132,7 @@ flip-up ### Create your animation ```css -.my-animation-name{ +.my-name{ opacity: 0; animation: animation-name 1s forwards; } @@ -140,4 +142,17 @@ flip-up opacity: 1; } } +``` + +### Modify velocity for prebuild animations +- Work on scale and slide animations +- By default it's: +```css +:root{ + --slide-start: 33%; + --slide-velocity: 7px; + + --scale-velocity: 0.035; + --scale-start: 0.4; +} ``` \ No newline at end of file diff --git a/assets/browser.png b/assets/browser.png new file mode 100644 index 0000000..71034e4 Binary files /dev/null and b/assets/browser.png differ diff --git a/dist/lazy-attr-animation.css b/dist/lazy-attr-animation.css index 5433967..ff8e92f 100644 --- a/dist/lazy-attr-animation.css +++ b/dist/lazy-attr-animation.css @@ -1,353 +1 @@ -/** -* https://github.com/yoannchb-pro/Lazy-attr -* VERSION: 1.1.8 -*/ - -/*SKELETON*/ -.lazy-skeleton, .lazy-skeleton-corner, .lazy-skeleton-top{ - position: relative; - background-color: rgba(0,0,0,0.15); - overflow: hidden; -} - -.lazy-skeleton::before{ - content: ''; - display: block; - position: absolute; - top: 0; - box-shadow: 0 0 2.5em 2.5em rgba(255,255,255,0.4); - width: 0; - height: 100%; - animation: skeleton-animation 1s linear infinite; -} - -.lazy-skeleton-corner::before{ - content: ''; - display: block; - position: absolute; - bottom: 0; - box-shadow: 0 0 2.5em 2.5em rgba(255,255,255,0.4); - width: 0; - height: 200%; - transform: rotate(45deg); - animation: skeleton-animation-corner 1s linear infinite; -} - -.lazy-skeleton-top::before{ - content: ''; - display: block; - position: absolute; - box-shadow: 0 0 2.5em 2.5em rgba(255,255,255,0.4); - width: 100%; - height: 0; - animation: skeleton-animation-top 1s linear infinite; -} - -@keyframes skeleton-animation{ - 0% { - left: -10em; - } - 100%{ - left: calc(100% + 10em); - } -} - -@keyframes skeleton-animation-top{ - 0% { - bottom: calc(100% + 10em); - } - 100%{ - bottom: -10em; - } -} - -@keyframes skeleton-animation-corner{ - 0% { - bottom: 100%; - left: -10em; - } - 100%{ - bottom: -100%; - left: calc(100% + 10em); - } -} - -/*CLASSES*/ -.slide-bottom-animation, .slide-left-animation, .slide-right-animation, .slide-top-animation, .blur-animation, .corner-top-left-animation, -.corner-top-right-animation, .corner-bottom-left-animation, .corner-bottom-right-animation, .opacity-animation, .zoomin-animation, -.zoomout-animation{ - opacity: 0; -} - -.corner-top-left-animation{ - animation: corner-top-left 1s forwards; -} - -.corner-top-right-animation{ - animation: corner-top-right 1s forwards; -} - -.corner-bottom-left-animation{ - animation: corner-bottom-left 1s forwards; -} - -.corner-bottom-right-animation{ - animation: corner-bottom-right 1s forwards; -} - -.blur-animation{ - filter: blur(7px); - animation: blur 1s forwards; -} - -.flip-animation, .flip-up-animation{ - -webkit-backface-visibility: hidden; - backface-visibility: hidden; - transform-style: preserve-3d; - perspective: 1200px; -} - -.flip-animation{ - transform: rotateY(-180deg); - animation: flip-left 1s forwards; -} - -.flip-up-animation{ - transform: rotateX(-180deg); - animation: flip-up 1s forwards; -} - -.zoomin-animation{ - animation: zoomin 1s forwards; -} - -.zoomout-animation{ - animation: zoomout 1s forwards; -} - -.rotate-animation{ - transform: rotate(0deg); - animation: rotate 1s forwards; -} - -.opacity-animation{ - animation: opacity 1s forwards; -} - -.slide-left-animation{ - animation: slide-left 1s forwards; -} - -.slide-right-animation{ - animation: slide-right 1s forwards; -} - -.slide-top-animation{ - animation: slide-top 1s forwards; -} - -.slide-bottom-animation{ - animation: slide-bottom 1s forwards; -} - -.shake-animation{ - animation: shake 1s; -} - -/*KEYFRAMES*/ -@keyframes corner-top-left{ - 0%{ - transform: translateX(-50%) translateY(-50%); - } - 50%{ - transform: translateX(30px) translateY(30px); - } - 100%{ - opacity: 1; - transform: translateX(0) translateY(0); - } -} - -@keyframes corner-top-right{ - 0%{ - transform: translateX(+50%) translateY(-50%); - } - 50%{ - transform: translateX(-30px) translateY(30px); - } - 100%{ - opacity: 1; - transform: translateX(0) translateY(0); - } -} - -@keyframes corner-bottom-left{ - 0%{ - transform: translateX(-50%) translateY(+50%); - } - 50%{ - transform: translateX(30px) translateY(-30px); - } - 100%{ - opacity: 1; - transform: translateX(0) translateY(0); - } -} - -@keyframes corner-bottom-right{ - 0%{ - transform: translateX(+50%) translateY(+50%); - } - 50%{ - transform: translateX(-30px) translateY(-30px); - } - 100%{ - opacity: 1; - transform: translateX(0) translateY(0); - } -} - -@keyframes flip-left{ - 100%{ - transform: rotateY(0deg); - } -} - -@keyframes flip-up{ - 100%{ - transform: rotateX(0deg); - } -} - -@keyframes blur{ - 100%{ - opacity: 1; - filter: blur(0px); - } -} - -@keyframes slide-left{ - 0%{ - transform: translateX(-50%); - } - 50%{ - transform: translateX(30px); - } - 100%{ - opacity: 1; - transform: translateX(0); - } -} - -@keyframes slide-right{ - 0%{ - transform: translateX(+50%); - } - 50%{ - transform: translateX(-30px); - } - 100%{ - opacity: 1; - transform: translateX(0); - } -} - -@keyframes slide-top{ - 0%{ - transform: translateY(-50%); - } - 50%{ - transform: translateY(30px); - } - 100%{ - opacity: 1; - transform: translateX(0); - } -} - -@keyframes slide-bottom{ - 0%{ - transform: translateY(+50%); - } - 50%{ - transform: translateY(-30px); - } - 100%{ - opacity: 1; - transform: translateY(0); - } -} - -@keyframes zoomout{ - 0%{ - transform: scale(1.5); - } - 50%{ - transform: scale(0.85); - } - 100%{ - opacity: 1; - transform: scale(1.0); - } -} - -@keyframes zoomin{ - 0%{ - transform: scale(0.5); - } - 50%{ - transform: scale(1.15); - } - 100%{ - opacity: 1; - transform: scale(1.0); - } -} - -@keyframes rotate{ - 100%{ - transform: rotate(360deg); - } -} - -@keyframes opacity{ - 100%{ - opacity: 1; - } -} - -@keyframes shake { - 0% { - transform: translate(1px, 1px) rotate(0deg); - } - 10% { - transform: translate(-1px, -2px) rotate(-1deg); - } - 20% { - transform: translate(-3px, 0px) rotate(1deg); - } - 30% { - transform: translate(3px, 2px) rotate(0deg); - } - 40% { - transform: translate(1px, -1px) rotate(1deg); - } - 50% { - transform: translate(-1px, 2px) rotate(-1deg); - } - 60% { - transform: translate(-3px, 1px) rotate(0deg); - } - 70% { - transform: translate(3px, 1px) rotate(-1deg); - } - 80% { - transform: translate(-1px, -1px) rotate(1deg); - } - 90% { - transform: translate(1px, 2px) rotate(0deg); - } - 100% { - transform: translate(1px, -2px) rotate(-1deg); - } -} \ No newline at end of file +:root{--slide-start:45%;--slide-velocity:8px;--scale-velocity:0.035;--scale-start:0.5}.lazy-skeleton,.lazy-skeleton-corner,.lazy-skeleton-top{position:relative;background-color:rgba(0,0,0,.15);overflow:hidden}.lazy-skeleton:before{top:0;height:100%;-webkit-animation:a 1s linear infinite;animation:a 1s linear infinite}.lazy-skeleton-corner:before,.lazy-skeleton:before{content:"";display:block;position:absolute;box-shadow:0 0 2.5em 2.5em hsla(0,0%,100%,.4);width:0}.lazy-skeleton-corner:before{bottom:0;height:200%;-webkit-transform:rotate(45deg);transform:rotate(45deg);-webkit-animation:c 1s linear infinite;animation:c 1s linear infinite}.lazy-skeleton-top:before{content:"";display:block;position:absolute;box-shadow:0 0 2.5em 2.5em hsla(0,0%,100%,.4);width:100%;height:0;-webkit-animation:b 1s linear infinite;animation:b 1s linear infinite}.blur,.corner-bottom-left,.corner-bottom-right,.corner-top-left,.corner-top-right,.opacity,.rotate,.slide-bottom,.slide-left,.slide-right,.slide-top,.zoomin,.zoomout{opacity:0}.corner-top-left{-webkit-animation:d 1s forwards;animation:d 1s forwards}.corner-top-right{-webkit-animation:e 1s forwards;animation:e 1s forwards}.corner-bottom-left{-webkit-animation:f 1s forwards;animation:f 1s forwards}.corner-bottom-right{-webkit-animation:g 1s forwards;animation:g 1s forwards}.blur{-webkit-filter:blur(7px);filter:blur(7px);-webkit-animation:j 1s forwards;animation:j 1s forwards}.flip,.flip-up{-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-perspective:1200px;perspective:1200px}.flip{-webkit-transform:rotateY(-180deg);transform:rotateY(-180deg);-webkit-animation:h 1s forwards;animation:h 1s forwards}.flip-up{-webkit-transform:rotateX(-180deg);transform:rotateX(-180deg);-webkit-animation:i 1s forwards;animation:i 1s forwards}.zoomin{-webkit-animation:p 1s forwards;animation:p 1s forwards}.zoomout{-webkit-animation:o 1s forwards;animation:o 1s forwards}.rotate{-webkit-transform:rotate(0deg);transform:rotate(0deg);-webkit-animation:q 1s forwards;animation:q 1s forwards}.opacity{-webkit-animation:r 1s forwards;animation:r 1s forwards}.slide-left{-webkit-animation:k 1s forwards;animation:k 1s forwards}.slide-right{-webkit-animation:l 1s forwards;animation:l 1s forwards}.slide-top{-webkit-animation:m 1s forwards;animation:m 1s forwards}.slide-bottom{-webkit-animation:n 1s forwards;animation:n 1s forwards}.shake{-webkit-animation:s 1s;animation:s 1s}@-webkit-keyframes a{0%{left:-10em}to{left:calc(100% + 10em)}}@keyframes a{0%{left:-10em}to{left:calc(100% + 10em)}}@-webkit-keyframes b{0%{bottom:calc(100% + 10em)}to{bottom:-10em}}@keyframes b{0%{bottom:calc(100% + 10em)}to{bottom:-10em}}@-webkit-keyframes c{0%{bottom:100%;left:-10em}to{bottom:-100%;left:calc(100% + 10em)}}@keyframes c{0%{bottom:100%;left:-10em}to{bottom:-100%;left:calc(100% + 10em)}}@-webkit-keyframes d{0%{-webkit-transform:translateX(-45%) translateY(-45%);transform:translateX(-45%) translateY(-45%);-webkit-transform:translateX(calc(var(--slide-start) * -1)) translateY(calc(var(--slide-start) * -1));transform:translateX(calc(var(--slide-start) * -1)) translateY(calc(var(--slide-start) * -1))}50%{-webkit-transform:translateX(8px) translateY(8px);transform:translateX(8px) translateY(8px);-webkit-transform:translateX(var(--slide-velocity)) translateY(var(--slide-velocity));transform:translateX(var(--slide-velocity)) translateY(var(--slide-velocity))}to{opacity:1;-webkit-transform:translateX(0) translateY(0);transform:translateX(0) translateY(0)}}@keyframes d{0%{-webkit-transform:translateX(-45%) translateY(-45%);transform:translateX(-45%) translateY(-45%);-webkit-transform:translateX(calc(var(--slide-start) * -1)) translateY(calc(var(--slide-start) * -1));transform:translateX(calc(var(--slide-start) * -1)) translateY(calc(var(--slide-start) * -1))}50%{-webkit-transform:translateX(8px) translateY(8px);transform:translateX(8px) translateY(8px);-webkit-transform:translateX(var(--slide-velocity)) translateY(var(--slide-velocity));transform:translateX(var(--slide-velocity)) translateY(var(--slide-velocity))}to{opacity:1;-webkit-transform:translateX(0) translateY(0);transform:translateX(0) translateY(0)}}@-webkit-keyframes e{0%{-webkit-transform:translateX(45%) translateY(-45%);transform:translateX(45%) translateY(-45%);-webkit-transform:translateX(var(--slide-start)) translateY(calc(var(--slide-start) * -1));transform:translateX(var(--slide-start)) translateY(calc(var(--slide-start) * -1))}50%{-webkit-transform:translateX(-8px) translateY(8px);transform:translateX(-8px) translateY(8px);-webkit-transform:translateX(calc(var(--slide-velocity) * -1)) translateY(var(--slide-velocity));transform:translateX(calc(var(--slide-velocity) * -1)) translateY(var(--slide-velocity))}to{opacity:1;-webkit-transform:translateX(0) translateY(0);transform:translateX(0) translateY(0)}}@keyframes e{0%{-webkit-transform:translateX(45%) translateY(-45%);transform:translateX(45%) translateY(-45%);-webkit-transform:translateX(var(--slide-start)) translateY(calc(var(--slide-start) * -1));transform:translateX(var(--slide-start)) translateY(calc(var(--slide-start) * -1))}50%{-webkit-transform:translateX(-8px) translateY(8px);transform:translateX(-8px) translateY(8px);-webkit-transform:translateX(calc(var(--slide-velocity) * -1)) translateY(var(--slide-velocity));transform:translateX(calc(var(--slide-velocity) * -1)) translateY(var(--slide-velocity))}to{opacity:1;-webkit-transform:translateX(0) translateY(0);transform:translateX(0) translateY(0)}}@-webkit-keyframes f{0%{-webkit-transform:translateX(-45%) translateY(45%);transform:translateX(-45%) translateY(45%);-webkit-transform:translateX(calc(var(--slide-start) * -1)) translateY(var(--slide-start));transform:translateX(calc(var(--slide-start) * -1)) translateY(var(--slide-start))}50%{-webkit-transform:translateX(8px) translateY(-8px);transform:translateX(8px) translateY(-8px);-webkit-transform:translateX(var(--slide-velocity)) translateY(calc(var(--slide-velocity) * -1));transform:translateX(var(--slide-velocity)) translateY(calc(var(--slide-velocity) * -1))}to{opacity:1;-webkit-transform:translateX(0) translateY(0);transform:translateX(0) translateY(0)}}@keyframes f{0%{-webkit-transform:translateX(-45%) translateY(45%);transform:translateX(-45%) translateY(45%);-webkit-transform:translateX(calc(var(--slide-start) * -1)) translateY(var(--slide-start));transform:translateX(calc(var(--slide-start) * -1)) translateY(var(--slide-start))}50%{-webkit-transform:translateX(8px) translateY(-8px);transform:translateX(8px) translateY(-8px);-webkit-transform:translateX(var(--slide-velocity)) translateY(calc(var(--slide-velocity) * -1));transform:translateX(var(--slide-velocity)) translateY(calc(var(--slide-velocity) * -1))}to{opacity:1;-webkit-transform:translateX(0) translateY(0);transform:translateX(0) translateY(0)}}@-webkit-keyframes g{0%{-webkit-transform:translateX(45%) translateY(45%);transform:translateX(45%) translateY(45%);-webkit-transform:translateX(var(--slide-start)) translateY(var(--slide-start));transform:translateX(var(--slide-start)) translateY(var(--slide-start))}50%{-webkit-transform:translateX(-8px) translateY(-8px);transform:translateX(-8px) translateY(-8px);-webkit-transform:translateX(calc(var(--slide-velocity) * -1)) translateY(calc(var(--slide-velocity) * -1));transform:translateX(calc(var(--slide-velocity) * -1)) translateY(calc(var(--slide-velocity) * -1))}to{opacity:1;-webkit-transform:translateX(0) translateY(0);transform:translateX(0) translateY(0)}}@keyframes g{0%{-webkit-transform:translateX(45%) translateY(45%);transform:translateX(45%) translateY(45%);-webkit-transform:translateX(var(--slide-start)) translateY(var(--slide-start));transform:translateX(var(--slide-start)) translateY(var(--slide-start))}50%{-webkit-transform:translateX(-8px) translateY(-8px);transform:translateX(-8px) translateY(-8px);-webkit-transform:translateX(calc(var(--slide-velocity) * -1)) translateY(calc(var(--slide-velocity) * -1));transform:translateX(calc(var(--slide-velocity) * -1)) translateY(calc(var(--slide-velocity) * -1))}to{opacity:1;-webkit-transform:translateX(0) translateY(0);transform:translateX(0) translateY(0)}}@-webkit-keyframes h{to{-webkit-transform:perspective(2500px) rotateY(0deg);transform:perspective(2500px) rotateY(0deg)}}@keyframes h{to{-webkit-transform:perspective(2500px) rotateY(0deg);transform:perspective(2500px) rotateY(0deg)}}@-webkit-keyframes i{to{-webkit-transform:perspective(2500px) rotateX(0deg);transform:perspective(2500px) rotateX(0deg)}}@keyframes i{to{-webkit-transform:perspective(2500px) rotateX(0deg);transform:perspective(2500px) rotateX(0deg)}}@-webkit-keyframes j{to{opacity:1;-webkit-filter:blur(0);filter:blur(0)}}@keyframes j{to{opacity:1;-webkit-filter:blur(0);filter:blur(0)}}@-webkit-keyframes k{0%{-webkit-transform:translateX(-45%);transform:translateX(-45%);-webkit-transform:translateX(calc(var(--slide-start) * -1));transform:translateX(calc(var(--slide-start) * -1))}50%{-webkit-transform:translateX(8px);transform:translateX(8px);-webkit-transform:translateX(var(--slide-velocity));transform:translateX(var(--slide-velocity))}to{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes k{0%{-webkit-transform:translateX(-45%);transform:translateX(-45%);-webkit-transform:translateX(calc(var(--slide-start) * -1));transform:translateX(calc(var(--slide-start) * -1))}50%{-webkit-transform:translateX(8px);transform:translateX(8px);-webkit-transform:translateX(var(--slide-velocity));transform:translateX(var(--slide-velocity))}to{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes l{0%{-webkit-transform:translateX(45%);transform:translateX(45%);-webkit-transform:translateX(var(--slide-start));transform:translateX(var(--slide-start))}50%{-webkit-transform:translateX(-8px);transform:translateX(-8px);-webkit-transform:translateX(calc(var(--slide-velocity) * -1));transform:translateX(calc(var(--slide-velocity) * -1))}to{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes l{0%{-webkit-transform:translateX(45%);transform:translateX(45%);-webkit-transform:translateX(var(--slide-start));transform:translateX(var(--slide-start))}50%{-webkit-transform:translateX(-8px);transform:translateX(-8px);-webkit-transform:translateX(calc(var(--slide-velocity) * -1));transform:translateX(calc(var(--slide-velocity) * -1))}to{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes m{0%{-webkit-transform:translateY(-45%);transform:translateY(-45%);-webkit-transform:translateY(calc(var(--slide-start) * -1));transform:translateY(calc(var(--slide-start) * -1))}50%{-webkit-transform:translateY(8px);transform:translateY(8px);-webkit-transform:translateY(var(--slide-velocity));transform:translateY(var(--slide-velocity))}to{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes m{0%{-webkit-transform:translateY(-45%);transform:translateY(-45%);-webkit-transform:translateY(calc(var(--slide-start) * -1));transform:translateY(calc(var(--slide-start) * -1))}50%{-webkit-transform:translateY(8px);transform:translateY(8px);-webkit-transform:translateY(var(--slide-velocity));transform:translateY(var(--slide-velocity))}to{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes n{0%{-webkit-transform:translateY(45%);transform:translateY(45%);-webkit-transform:translateY(var(--slide-start));transform:translateY(var(--slide-start))}50%{-webkit-transform:translateY(-8px);transform:translateY(-8px);-webkit-transform:translateY(calc(var(--slide-velocity) * -1));transform:translateY(calc(var(--slide-velocity) * -1))}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes n{0%{-webkit-transform:translateY(45%);transform:translateY(45%);-webkit-transform:translateY(var(--slide-start));transform:translateY(var(--slide-start))}50%{-webkit-transform:translateY(-8px);transform:translateY(-8px);-webkit-transform:translateY(calc(var(--slide-velocity) * -1));transform:translateY(calc(var(--slide-velocity) * -1))}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes o{0%{-webkit-transform:scale(1.5);transform:scale(1.5);-webkit-transform:scale(calc(1 + var(--scale-start)));transform:scale(calc(1 + var(--scale-start)))}50%{-webkit-transform:scale(0.965);transform:scale(0.965);-webkit-transform:scale(calc(1 - var(--scale-velocity)));transform:scale(calc(1 - var(--scale-velocity)))}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@keyframes o{0%{-webkit-transform:scale(1.5);transform:scale(1.5);-webkit-transform:scale(calc(1 + var(--scale-start)));transform:scale(calc(1 + var(--scale-start)))}50%{-webkit-transform:scale(0.965);transform:scale(0.965);-webkit-transform:scale(calc(1 - var(--scale-velocity)));transform:scale(calc(1 - var(--scale-velocity)))}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes p{0%{-webkit-transform:scale(.5);transform:scale(.5);-webkit-transform:scale(calc(1 - var(--scale-start)));transform:scale(calc(1 - var(--scale-start)))}50%{-webkit-transform:scale(1.035);transform:scale(1.035);-webkit-transform:scale(calc(1 + var(--scale-velocity)));transform:scale(calc(1 + var(--scale-velocity)))}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@keyframes p{0%{-webkit-transform:scale(.5);transform:scale(.5);-webkit-transform:scale(calc(1 - var(--scale-start)));transform:scale(calc(1 - var(--scale-start)))}50%{-webkit-transform:scale(1.035);transform:scale(1.035);-webkit-transform:scale(calc(1 + var(--scale-velocity)));transform:scale(calc(1 + var(--scale-velocity)))}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes q{to{opacity:1;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes q{to{opacity:1;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@-webkit-keyframes r{to{opacity:1}}@keyframes r{to{opacity:1}}@-webkit-keyframes s{0%{-webkit-transform:translate(1px,1px) rotate(0deg);transform:translate(1px,1px) rotate(0deg)}10%{-webkit-transform:translate(-1px,-2px) rotate(-1deg);transform:translate(-1px,-2px) rotate(-1deg)}20%{-webkit-transform:translate(-3px) rotate(1deg);transform:translate(-3px) rotate(1deg)}30%{-webkit-transform:translate(3px,2px) rotate(0deg);transform:translate(3px,2px) rotate(0deg)}40%{-webkit-transform:translate(1px,-1px) rotate(1deg);transform:translate(1px,-1px) rotate(1deg)}50%{-webkit-transform:translate(-1px,2px) rotate(-1deg);transform:translate(-1px,2px) rotate(-1deg)}60%{-webkit-transform:translate(-3px,1px) rotate(0deg);transform:translate(-3px,1px) rotate(0deg)}70%{-webkit-transform:translate(3px,1px) rotate(-1deg);transform:translate(3px,1px) rotate(-1deg)}80%{-webkit-transform:translate(-1px,-1px) rotate(1deg);transform:translate(-1px,-1px) rotate(1deg)}90%{-webkit-transform:translate(1px,2px) rotate(0deg);transform:translate(1px,2px) rotate(0deg)}to{-webkit-transform:translate(1px,-2px) rotate(-1deg);transform:translate(1px,-2px) rotate(-1deg)}}@keyframes s{0%{-webkit-transform:translate(1px,1px) rotate(0deg);transform:translate(1px,1px) rotate(0deg)}10%{-webkit-transform:translate(-1px,-2px) rotate(-1deg);transform:translate(-1px,-2px) rotate(-1deg)}20%{-webkit-transform:translate(-3px) rotate(1deg);transform:translate(-3px) rotate(1deg)}30%{-webkit-transform:translate(3px,2px) rotate(0deg);transform:translate(3px,2px) rotate(0deg)}40%{-webkit-transform:translate(1px,-1px) rotate(1deg);transform:translate(1px,-1px) rotate(1deg)}50%{-webkit-transform:translate(-1px,2px) rotate(-1deg);transform:translate(-1px,2px) rotate(-1deg)}60%{-webkit-transform:translate(-3px,1px) rotate(0deg);transform:translate(-3px,1px) rotate(0deg)}70%{-webkit-transform:translate(3px,1px) rotate(-1deg);transform:translate(3px,1px) rotate(-1deg)}80%{-webkit-transform:translate(-1px,-1px) rotate(1deg);transform:translate(-1px,-1px) rotate(1deg)}90%{-webkit-transform:translate(1px,2px) rotate(0deg);transform:translate(1px,2px) rotate(0deg)}to{-webkit-transform:translate(1px,-2px) rotate(-1deg);transform:translate(1px,-2px) rotate(-1deg)}} \ No newline at end of file diff --git a/dist/lazy-attr-animation.min.css b/dist/lazy-attr-animation.min.css deleted file mode 100644 index 4ac7507..0000000 --- a/dist/lazy-attr-animation.min.css +++ /dev/null @@ -1 +0,0 @@ -.lazy-skeleton,.lazy-skeleton-corner,.lazy-skeleton-top{position:relative;background-color:rgba(0,0,0,.15);overflow:hidden}.lazy-skeleton::before{content:'';display:block;position:absolute;top:0;-webkit-box-shadow:0 0 2.5em 2.5em rgba(255,255,255,.4);box-shadow:0 0 2.5em 2.5em rgba(255,255,255,.4);width:0;height:100%;-webkit-animation:skeleton-animation 1s linear infinite;animation:skeleton-animation 1s linear infinite}.lazy-skeleton-corner::before{content:'';display:block;position:absolute;bottom:0;-webkit-box-shadow:0 0 2.5em 2.5em rgba(255,255,255,.4);box-shadow:0 0 2.5em 2.5em rgba(255,255,255,.4);width:0;height:200%;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);-webkit-animation:skeleton-animation-corner 1s linear infinite;animation:skeleton-animation-corner 1s linear infinite}.lazy-skeleton-top::before{content:'';display:block;position:absolute;-webkit-box-shadow:0 0 2.5em 2.5em rgba(255,255,255,.4);box-shadow:0 0 2.5em 2.5em rgba(255,255,255,.4);width:100%;height:0;-webkit-animation:skeleton-animation-top 1s linear infinite;animation:skeleton-animation-top 1s linear infinite}@-webkit-keyframes skeleton-animation{0%{left:-10em}100%{left:calc(100% + 10em)}}@keyframes skeleton-animation{0%{left:-10em}100%{left:calc(100% + 10em)}}@-webkit-keyframes skeleton-animation-top{0%{bottom:calc(100% + 10em)}100%{bottom:-10em}}@keyframes skeleton-animation-top{0%{bottom:calc(100% + 10em)}100%{bottom:-10em}}@-webkit-keyframes skeleton-animation-corner{0%{bottom:100%;left:-10em}100%{bottom:-100%;left:calc(100% + 10em)}}@keyframes skeleton-animation-corner{0%{bottom:100%;left:-10em}100%{bottom:-100%;left:calc(100% + 10em)}}.blur-animation,.corner-bottom-left-animation,.corner-bottom-right-animation,.corner-top-left-animation,.corner-top-right-animation,.opacity-animation,.rotate-animation,.slide-bottom-animation,.slide-left-animation,.slide-right-animation,.slide-top-animation,.zoomin-animation,.zoomout-animation{opacity:0}.corner-top-left-animation{-webkit-animation:corner-top-left 1s forwards;animation:corner-top-left 1s forwards}.corner-top-right-animation{-webkit-animation:corner-top-right 1s forwards;animation:corner-top-right 1s forwards}.corner-bottom-left-animation{-webkit-animation:corner-bottom-left 1s forwards;animation:corner-bottom-left 1s forwards}.corner-bottom-right-animation{-webkit-animation:corner-bottom-right 1s forwards;animation:corner-bottom-right 1s forwards}.blur-animation{-webkit-filter:blur(7px);filter:blur(7px);-webkit-animation:blur 1s forwards;animation:blur 1s forwards}.flip-animation,.flip-up-animation{-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-perspective:1200px;perspective:1200px}.flip-animation{-webkit-transform:rotateY(-180deg);transform:rotateY(-180deg);-webkit-animation:flip-left 1s forwards;animation:flip-left 1s forwards}.flip-up-animation{-webkit-transform:rotateX(-180deg);transform:rotateX(-180deg);-webkit-animation:flip-up 1s forwards;animation:flip-up 1s forwards}.zoomin-animation{-webkit-animation:zoomin 1s forwards;animation:zoomin 1s forwards}.zoomout-animation{-webkit-animation:zoomout 1s forwards;animation:zoomout 1s forwards}.rotate-animation{-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);-webkit-animation:rotate 1s forwards;animation:rotate 1s forwards}.opacity-animation{-webkit-animation:opacity 1s forwards;animation:opacity 1s forwards}.slide-left-animation{-webkit-animation:slide-left 1s forwards;animation:slide-left 1s forwards}.slide-right-animation{-webkit-animation:slide-right 1s forwards;animation:slide-right 1s forwards}.slide-top-animation{-webkit-animation:slide-top 1s forwards;animation:slide-top 1s forwards}.slide-bottom-animation{-webkit-animation:slide-bottom 1s forwards;animation:slide-bottom 1s forwards}.shake-animation{-webkit-animation:shake 1s;animation:shake 1s}@-webkit-keyframes corner-top-left{0%{-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%)}50%{-webkit-transform:translateX(30px) translateY(30px);transform:translateX(30px) translateY(30px)}100%{opacity:1;-webkit-transform:translateX(0) translateY(0);transform:translateX(0) translateY(0)}}@keyframes corner-top-left{0%{-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%)}50%{-webkit-transform:translateX(30px) translateY(30px);transform:translateX(30px) translateY(30px)}100%{opacity:1;-webkit-transform:translateX(0) translateY(0);transform:translateX(0) translateY(0)}}@-webkit-keyframes corner-top-right{0%{-webkit-transform:translateX(+50%) translateY(-50%);transform:translateX(+50%) translateY(-50%)}50%{-webkit-transform:translateX(-30px) translateY(30px);transform:translateX(-30px) translateY(30px)}100%{opacity:1;-webkit-transform:translateX(0) translateY(0);transform:translateX(0) translateY(0)}}@keyframes corner-top-right{0%{-webkit-transform:translateX(+50%) translateY(-50%);transform:translateX(+50%) translateY(-50%)}50%{-webkit-transform:translateX(-30px) translateY(30px);transform:translateX(-30px) translateY(30px)}100%{opacity:1;-webkit-transform:translateX(0) translateY(0);transform:translateX(0) translateY(0)}}@-webkit-keyframes corner-bottom-left{0%{-webkit-transform:translateX(-50%) translateY(+50%);transform:translateX(-50%) translateY(+50%)}50%{-webkit-transform:translateX(30px) translateY(-30px);transform:translateX(30px) translateY(-30px)}100%{opacity:1;-webkit-transform:translateX(0) translateY(0);transform:translateX(0) translateY(0)}}@keyframes corner-bottom-left{0%{-webkit-transform:translateX(-50%) translateY(+50%);transform:translateX(-50%) translateY(+50%)}50%{-webkit-transform:translateX(30px) translateY(-30px);transform:translateX(30px) translateY(-30px)}100%{opacity:1;-webkit-transform:translateX(0) translateY(0);transform:translateX(0) translateY(0)}}@-webkit-keyframes corner-bottom-right{0%{-webkit-transform:translateX(+50%) translateY(+50%);transform:translateX(+50%) translateY(+50%)}50%{-webkit-transform:translateX(-30px) translateY(-30px);transform:translateX(-30px) translateY(-30px)}100%{opacity:1;-webkit-transform:translateX(0) translateY(0);transform:translateX(0) translateY(0)}}@keyframes corner-bottom-right{0%{-webkit-transform:translateX(+50%) translateY(+50%);transform:translateX(+50%) translateY(+50%)}50%{-webkit-transform:translateX(-30px) translateY(-30px);transform:translateX(-30px) translateY(-30px)}100%{opacity:1;-webkit-transform:translateX(0) translateY(0);transform:translateX(0) translateY(0)}}@-webkit-keyframes flip-left{100%{-webkit-transform:perspective(2500px) rotateY(0);transform:perspective(2500px) rotateY(0)}}@keyframes flip-left{100%{-webkit-transform:perspective(2500px) rotateY(0);transform:perspective(2500px) rotateY(0)}}@-webkit-keyframes flip-up{100%{-webkit-transform:perspective(2500px) rotateX(0);transform:perspective(2500px) rotateX(0)}}@keyframes flip-up{100%{-webkit-transform:perspective(2500px) rotateX(0);transform:perspective(2500px) rotateX(0)}}@-webkit-keyframes blur{100%{opacity:1;-webkit-filter:blur(0px);filter:blur(0px)}}@keyframes blur{100%{opacity:1;-webkit-filter:blur(0px);filter:blur(0px)}}@-webkit-keyframes slide-left{0%{-webkit-transform:translateX(-50%);transform:translateX(-50%)}50%{-webkit-transform:translateX(30px);transform:translateX(30px)}100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes slide-left{0%{-webkit-transform:translateX(-50%);transform:translateX(-50%)}50%{-webkit-transform:translateX(30px);transform:translateX(30px)}100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes slide-right{0%{-webkit-transform:translateX(+50%);transform:translateX(+50%)}50%{-webkit-transform:translateX(-30px);transform:translateX(-30px)}100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes slide-right{0%{-webkit-transform:translateX(+50%);transform:translateX(+50%)}50%{-webkit-transform:translateX(-30px);transform:translateX(-30px)}100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes slide-top{0%{-webkit-transform:translateY(-50%);transform:translateY(-50%)}50%{-webkit-transform:translateY(30px);transform:translateY(30px)}100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes slide-top{0%{-webkit-transform:translateY(-50%);transform:translateY(-50%)}50%{-webkit-transform:translateY(30px);transform:translateY(30px)}100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes slide-bottom{0%{-webkit-transform:translateY(+50%);transform:translateY(+50%)}50%{-webkit-transform:translateY(-30px);transform:translateY(-30px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes slide-bottom{0%{-webkit-transform:translateY(+50%);transform:translateY(+50%)}50%{-webkit-transform:translateY(-30px);transform:translateY(-30px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes zoomout{0%{-webkit-transform:scale(1.5);transform:scale(1.5)}50%{-webkit-transform:scale(.85);transform:scale(.85)}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@keyframes zoomout{0%{-webkit-transform:scale(1.5);transform:scale(1.5)}50%{-webkit-transform:scale(.85);transform:scale(.85)}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes zoomin{0%{-webkit-transform:scale(.5);transform:scale(.5)}50%{-webkit-transform:scale(1.15);transform:scale(1.15)}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@keyframes zoomin{0%{-webkit-transform:scale(.5);transform:scale(.5)}50%{-webkit-transform:scale(1.15);transform:scale(1.15)}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes rotate{100%{opacity:1;-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotate{100%{opacity:1;-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes opacity{100%{opacity:1}}@keyframes opacity{100%{opacity:1}}@-webkit-keyframes shake{0%{-webkit-transform:translate(1px,1px) rotate(0);transform:translate(1px,1px) rotate(0)}10%{-webkit-transform:translate(-1px,-2px) rotate(-1deg);transform:translate(-1px,-2px) rotate(-1deg)}20%{-webkit-transform:translate(-3px,0) rotate(1deg);transform:translate(-3px,0) rotate(1deg)}30%{-webkit-transform:translate(3px,2px) rotate(0);transform:translate(3px,2px) rotate(0)}40%{-webkit-transform:translate(1px,-1px) rotate(1deg);transform:translate(1px,-1px) rotate(1deg)}50%{-webkit-transform:translate(-1px,2px) rotate(-1deg);transform:translate(-1px,2px) rotate(-1deg)}60%{-webkit-transform:translate(-3px,1px) rotate(0);transform:translate(-3px,1px) rotate(0)}70%{-webkit-transform:translate(3px,1px) rotate(-1deg);transform:translate(3px,1px) rotate(-1deg)}80%{-webkit-transform:translate(-1px,-1px) rotate(1deg);transform:translate(-1px,-1px) rotate(1deg)}90%{-webkit-transform:translate(1px,2px) rotate(0);transform:translate(1px,2px) rotate(0)}100%{-webkit-transform:translate(1px,-2px) rotate(-1deg);transform:translate(1px,-2px) rotate(-1deg)}}@keyframes shake{0%{-webkit-transform:translate(1px,1px) rotate(0);transform:translate(1px,1px) rotate(0)}10%{-webkit-transform:translate(-1px,-2px) rotate(-1deg);transform:translate(-1px,-2px) rotate(-1deg)}20%{-webkit-transform:translate(-3px,0) rotate(1deg);transform:translate(-3px,0) rotate(1deg)}30%{-webkit-transform:translate(3px,2px) rotate(0);transform:translate(3px,2px) rotate(0)}40%{-webkit-transform:translate(1px,-1px) rotate(1deg);transform:translate(1px,-1px) rotate(1deg)}50%{-webkit-transform:translate(-1px,2px) rotate(-1deg);transform:translate(-1px,2px) rotate(-1deg)}60%{-webkit-transform:translate(-3px,1px) rotate(0);transform:translate(-3px,1px) rotate(0)}70%{-webkit-transform:translate(3px,1px) rotate(-1deg);transform:translate(3px,1px) rotate(-1deg)}80%{-webkit-transform:translate(-1px,-1px) rotate(1deg);transform:translate(-1px,-1px) rotate(1deg)}90%{-webkit-transform:translate(1px,2px) rotate(0);transform:translate(1px,2px) rotate(0)}100%{-webkit-transform:translate(1px,-2px) rotate(-1deg);transform:translate(1px,-2px) rotate(-1deg)}} diff --git a/dist/lazy-attr.cjs.js b/dist/lazy-attr.cjs.js index f46cd7e..db81536 100644 --- a/dist/lazy-attr.cjs.js +++ b/dist/lazy-attr.cjs.js @@ -35,15 +35,15 @@ function IntersectionObserverPolyfill(callback, options) { } } - function observe(e) { - if (e) { - this.elements.push(e); + function observe(element) { + if (element) { + this.elements.push(element); } } - function unobserve(e) { - if (e) { - var index = this.elements.indexOf(e); + function unobserve(element) { + if (element) { + var index = this.elements.indexOf(element); if (index != -1) { this.elements.splice(index, 1); @@ -57,146 +57,114 @@ function IntersectionObserverPolyfill(callback, options) { this.initObs(); } -function getUpdateLazyAttr(callback) { - var req = new XMLHttpRequest(); //Ok - - req.onload = function () { - var res = req.responseText; - var p = '[#version]'; - var nv = res.substring(res.indexOf(p) + p.length); - nv = nv.substring(nv.indexOf(p) + p.length); - nv = nv.substring(0, nv.indexOf(p)); - callback({ - error: false, - version: nv - }); - }; //Error - - - req.onerror = function () { - callback({ - error: true, - content: "Error while fetching" - }); - }; - - req.open('GET', window.lazyDatas["updateURL"]); - req.send(); -} - var lazyParameters = ["[lazy-reset]", "[lazy-animation]", "[lazy-animation-time]", "[lazy-animation-delay]", "[lazy-src]", "[lazy-video]", "[lazy-embed]", "[lazy-animation-pointer]", "[lazy-animation-function]", "[lazy-animation-count]", "[lazy-callback]", "[lazy-srcset]", "[lazy-poster]", "[lazy-size-width]", "[lazy-size-height]", "[lazy-background]"]; var lazyAnimations = ["zoomin", "zoomout", "opacity", "slide-left", "slide-right", "slide-bottom", "slide-top", "corner-top-left", "corner-top-right", "corner-bottom-left", "corner-bottom-right", "shake", "rotate", "blur", "flip", "flip-up"]; -function lazyGlobal() { - /** - * Get lhe lastest version - * @param {Function} callback - */ - function getLastVersion(callback) { - getUpdateLazyAttr(callback); - } - /** - * See object intersecting for polyfill - * @param {HTMLElement} element - */ - - - function isIntersecting(element) { - var width = window.innerWidth; - var height = window.innerHeight; - var pos = element.getBoundingClientRect(); +/** +* See object intersecting for polyfill +* @param {HTMLElement} element +*/ +function isIntersecting(element) { + var width = window.innerWidth; + var height = window.innerHeight; + var pos = element.getBoundingClientRect(); + var hIntersect = false; + var vIntersect = false; + var topCondition = pos.top >= 0 && pos.top <= height; + var bottomCondition = pos.bottom >= 0 && pos.bottom <= height; + var leftCondition = pos.left >= 0 && pos.left <= width; + var rightCondition = pos.right >= 0 && pos.right <= width; + if (topCondition || bottomCondition) vIntersect = true; + if (leftCondition || rightCondition) hIntersect = true; + if (hIntersect && vIntersect) return true; + return false; +} +/** +* Return if an element is intersecting without tranform animation +* @param {HTMLElement} el +*/ + + +function isIntersectingWithoutTransform(el) { + var width = window.innerWidth; + var height = window.innerHeight; + + function isElementIntersecting(element) { + var parentRect = element.offsetParent.getBoundingClientRect(); + var left = parentRect.left + element.offsetLeft; + var top = parentRect.top + element.offsetTop; + var bottom = top + element.offsetHeight; + var right = left + element.offsetWidth; var hIntersect = false; var vIntersect = false; - var topCondition = pos.top >= 0 && pos.top <= height; - var bottomCondition = pos.bottom >= 0 && pos.bottom <= height; - var leftCondition = pos.left >= 0 && pos.left <= width; - var rightCondition = pos.right >= 0 && pos.right <= width; + var topCondition = top >= 0 && top <= height; + var bottomCondition = bottom >= 0 && bottom <= height; + var leftCondition = left >= 0 && left <= width; + var rightCondition = right >= 0 && right <= width; if (topCondition || bottomCondition) vIntersect = true; if (leftCondition || rightCondition) hIntersect = true; if (hIntersect && vIntersect) return true; - return false; } - /** - * Return if an element is intersecting without tranform of animation - * @param {HTMLElement} el - */ - - - function isIntersectingWithoutTransform(el) { - var width = window.innerWidth; - var height = window.innerHeight; - - function isElementIntersecting(element) { - var parentRect = element.offsetParent.getBoundingClientRect(); - var left = parentRect.left + element.offsetLeft; - var top = parentRect.top + element.offsetTop; - var bottom = top + element.offsetHeight; - var right = left + element.offsetWidth; - var hIntersect = false; - var vIntersect = false; - var topCondition = top >= 0 && top <= height; - var bottomCondition = bottom >= 0 && bottom <= height; - var leftCondition = left >= 0 && left <= width; - var rightCondition = right >= 0 && right <= width; - if (topCondition || bottomCondition) vIntersect = true; - if (leftCondition || rightCondition) hIntersect = true; - if (hIntersect && vIntersect) return true; - } - - var pointer = el.getAttribute('lazy-animation-pointer'); - return isElementIntersecting(el) || (pointer != null ? isElementIntersecting(document.querySelector(pointer)) : false); - } - /** - * Change animation of lazy block (e for element, a for animation name and r to reload or no the animation) - * @param {HTMLElement} e - * @param {String} a - * @param {Boolean} r - */ + var pointer = el.getAttribute('lazy-animation-pointer'); + return isElementIntersecting(el) || (pointer != null ? isElementIntersecting(document.querySelector(pointer)) : false); +} - function changeAnimation(e, a, r) { - var reset = e.getAttribute('lazy-reset'); - reset = reset != null && reset != undefined ? true : false; - - if (reset) { - var backAnimation = e.getAttribute('lazy-animation'); - - if (backAnimation && a) { - var pointer = e.getAttribute('lazy-animation-pointer'); - - if (pointer) { - //with pointer - document.querySelectorAll(pointer).forEach(function (p) { - p.classList.remove(backAnimation); - }); - } else { - //no pointer - e.classList.remove(backAnimation); - } - - e.removeAttribute('lazy-animation'); +var intersecting = { + isIntersecting: isIntersecting, + isIntersectingWithoutTransform: isIntersectingWithoutTransform +}; + +/** + * Change animation of lazy block (e for element, a for animation name and r to reload or no the animation) + * @param {HTMLElement} e + * @param {String} a + * @param {Boolean} r + */ +function changeAnimation(e, a, r) { + var reset = e.getAttribute('lazy-reset'); + reset = reset != null && reset != undefined ? true : false; + + if (reset) { + var backAnimation = e.getAttribute('lazy-animation'); + + if (backAnimation && a) { + var pointer = e.getAttribute('lazy-animation-pointer'); + + if (pointer) { + //with pointer + document.querySelectorAll(pointer).forEach(function (p) { + p.classList.remove(backAnimation); + }); + } else { + //no pointer + e.classList.remove(backAnimation); } - e.setAttribute('lazy-animation', a); //Reload animation + e.removeAttribute('lazy-animation'); + } - if (r) { - window.lazy()._data["observer"].unobserve(e); + e.setAttribute('lazy-animation', a); //Reload animation - window.lazy()._data["observer"].observe(e); - } - } else { - console.warn('Lazy-attr : Cannot change animation of not lazy-reset element !'); + if (r) { + window.lazy()._data["observer"].unobserve(e); + + window.lazy()._data["observer"].observe(e); } + } else { + console.warn('Lazy-attr : Cannot change animation of not lazy-reset element !'); } +} + +function lazyGlobal() { return { //datas _data: window.lazyDatas, //methods changeAnimation: changeAnimation, - getLastVersion: getLastVersion, - isIntersecting: isIntersecting, - isIntersectingWithoutTransform: isIntersectingWithoutTransform, + isIntersecting: intersecting.isIntersecting, + isIntersectingWithoutTransform: intersecting.isIntersectingWithoutTransform, //search attributes parameters for observer parameters: lazyParameters, //animation list @@ -210,138 +178,130 @@ function lazyGlobal() { //skeletons animations skeletons: ["lazy-skeleton", "lazy-skeleton-corner", "lazy-skeleton-top"], //version - version: "1.1.9", - //version matcher - versionMatcher: "[#version]1.1.9[#version]" + version: "1.2.0" }; } -function lazyMain() { - //Function to display error and info - function displayInfo(msg) { - console.info("[INFO] Lazy-attr : " + msg); - } +/** +* Run or pause animation function +* @param {HTMLElement} element +* @param {String} state +*/ +function animationState(element, state) { + element.style.animationPlayState = state; +} - function displayError(msg) { - console.error("[ERROR] Lazy-attr : " + msg); - } - /** - * Main function - * @param {*} entries - * @param {*} observer - */ +/** +* used to remove useless attributes on not lazy-reset elements t=target and e=pointer +* @param {HTMLElement} parent +* @param {HTMLElement} pointer +*/ - function callback(entries, observer) { - //For each elements in the observer - entries.forEach(function (entry) { - var target = entry.target; //Element target - //Intersecting +function removeUselessAttributes(parent, pointer) { + var nullAttribute = null; //remove animation - if (entry.isIntersecting) { - /** - * Run or pause animation function - * @param {HTMLElement} element - * @param {String} state - */ - var animationState = function animationState(element, state) { - element.style.animationPlayState = state; - element.style.webkitAnimationPlayState = state; - }; + if (window.lazy()._data['originalObserver']) { + var animationName = parent.getAttribute('lazy-animation'); + if (animationName) pointer.classList.remove(animationName); + } //remove size - /** - * used to remove useless attributes on not lazy-reset elements t=target and e=pointer - * @param {HTMLElement} parent - * @param {HTMLElement} pointer - */ - var removeUselessAttributes = function removeUselessAttributes(parent, pointer) { - var nullAttribute = null; //remove animation - if (window.lazy()._data['originalObserver']) { - var animationName = parent.getAttribute('lazy-animation'); - if (animationName) pointer.classList.remove(animationName); - } //remove size + parent.style.minWidth = nullAttribute; + parent.style.minHeight = nullAttribute; //animation running + animationState(pointer, nullAttribute); //animation duration - parent.style.minWidth = nullAttribute; - parent.style.minHeight = nullAttribute; //animation running + parent.style.animationDuration = nullAttribute; //animation delay - animationState(pointer, nullAttribute); //animation duration + parent.style.animationDelay = nullAttribute; //animation count - parent.style.animationDuration = nullAttribute; - parent.style.webkitAnimationDuration = nullAttribute; //animation delay + parent.style.animationIterationCount = nullAttribute; //animation function - parent.style.animationDelay = nullAttribute; - parent.style.webkitAnimationDelay = nullAttribute; //animation count + parent.style.animationTimingFunction = nullAttribute; +} - parent.style.animationIterationCount = nullAttribute; - parent.style.webkitAnimationIterationCount = nullAttribute; //animation function +/** +* Set animation parameters +* @param {HTMLElement} element +* @param {String} animationClass +*/ - parent.style.animationTimingFunction = nullAttribute; - parent.style.webkitAnimationTimingFunction = nullAttribute; - }; - /** - * Set animation parameters - * @param {HTMLElement} element - * @param {String} animationClass - */ +function setAnimation(target, element, animationClass) { + //if(!isAnimationStoped(e)) return; //We wait the end of animation + //Animation duration + var animationTime = target.getAttribute('lazy-animation-time'); + if (animationTime) { + element.style.animationDuration = animationTime + "s"; + } //Animation delay - var setAnimation = function setAnimation(element, animationClass) { - //if(!isAnimationStoped(e)) return; //We wait the end of animation - //Animation duration - var animationTime = target.getAttribute('lazy-animation-time'); - if (animationTime) { - element.style.animationDuration = animationTime + "s"; - element.style.webkitAnimationDuration = animationTime + "s"; - } //Animation delay + var animationDelay = target.getAttribute('lazy-animation-delay'); + if (animationDelay) { + element.style.animationDelay = animationDelay + "s"; + } //Animation count - var animationDelay = target.getAttribute('lazy-animation-delay'); - if (animationDelay) { - element.style.animationDelay = animationDelay + "s"; - element.style.webkitAnimationDelay = animationDelay + "s"; - } //Animation count + var animationCount = target.getAttribute('lazy-animation-count'); + if (animationCount) { + element.style.animationIterationCount = animationCount; + } //Animation function - var animationCount = target.getAttribute('lazy-animation-count'); - if (animationCount) { - element.style.animationIterationCount = animationCount; - element.style.webkitAnimationIterationCount = animationCount; - } //Animation function + var animationFunction = target.getAttribute('lazy-animation-function'); + if (animationFunction) { + element.style.animationTimingFunction = animationFunction; + } //Set animation class - var animationFunction = target.getAttribute('lazy-animation-function'); - if (animationFunction) { - element.style.animationTimingFunction = animationFunction; - element.style.webkitAnimationTimingFunction = animationFunction; - } //Set animation class + element.classList.add(animationClass); + + if (target.getAttribute('lazy-reset') === null) { + //Delete useless attribute + element.addEventListener('animationend', function () { + //remove all useless attributes + removeUselessAttributes(target, element); //Delete lazy-attr attributes + + window.lazy().parameters.forEach(function (param) { + param = param.replace(/(\[|\])/gi, ""); + target.removeAttribute(param); + }); + }); + } else { + //Delete useless attributes on lazy-reset elements + element.addEventListener('animationend', function () { + //remove all useless attributes + removeUselessAttributes(target, element); + }); + } +} +function lazyMain() { + //Function to display error and info + function displayInfo(msg) { + console.info("[INFO] Lazy-attr : " + msg); + } - element.classList.add(animationClass); + function displayError(msg) { + console.error("[ERROR] Lazy-attr : " + msg); + } + /** + * Main function + * @param {*} entries + * @param {*} observer + */ - if (target.getAttribute('lazy-reset') === null) { - //Delete useless attribute - element.addEventListener('animationend', function () { - //remove all useless attributes - removeUselessAttributes(target, element); //Delete lazy-attr attributes + function callback(entries, observer) { + //For each elements in the observer + entries.forEach(function (entry) { + var target = entry.target; //Element target + //Intersecting - window.lazy().parameters.forEach(function (param) { - param = param.replace(/(\[|\])/gi, ""); - target.removeAttribute(param); - }); - }); - } else { - //Delete useless attributes on lazy-reset elements - element.addEventListener('animationend', function () { - //remove all useless attributes - removeUselessAttributes(target, element); - }); - } - }; //Animation class + if (entry.isIntersecting) { + //Animation class var targetAnimation = []; var animationClass = target.getAttribute('lazy-animation'); var pointer = target.getAttribute('lazy-animation-pointer'); @@ -350,7 +310,7 @@ function lazyMain() { var pointers = document.querySelectorAll(pointer); pointers.forEach(function (pointer) { if (animationClass) { - setAnimation(pointer, animationClass); //set animation + setAnimation(target, pointer, animationClass); //set animation animationState(pointer, "paused"); } @@ -359,7 +319,7 @@ function lazyMain() { }); } else { if (animationClass) { - setAnimation(target, animationClass); //set animation + setAnimation(target, target, animationClass); //set animation animationState(target, "paused"); } @@ -451,7 +411,7 @@ function lazyMain() { var poster = target.getAttribute('lazy-poster'); //Permet de mettre un poster à la vidéo if (poster) poster = "url('" + poster + "')";else poster = "#000"; - target.setAttribute("srcdoc", "▶"); + target.setAttribute("srcdoc", "▶"); } else { //IE do not support srcdoc target.setAttribute('src', code); @@ -504,9 +464,7 @@ function lazyMain() { if (window.IntersectionObserver && window.lazy() && window.lazyDatas) { - /** - * Set observer on dom elements - */ + //Set observer on dom elements var getLazyObject = function getLazyObject() { document.body.querySelectorAll(window.lazy().parameters.join(',')).forEach(function (el) { //Get default width and height @@ -530,7 +488,7 @@ function lazyMain() { displayInfo('version ' + window.lazy().version); } else { //Error - displayError('incompatible or verify window.lazy and window.lazyDatas integration'); + displayError('Incompatible or verify window.lazy and window.lazyDatas integration'); } } @@ -545,7 +503,6 @@ if (window.HTMLCollection && !HTMLCollection.prototype.forEach) { window.lazyDatas = { isIE: !!document.documentMode, - updateURL: "https://unpkg.com/lazy-attr@latest/dist/lazy-attr.min.js", originalObserver: true }; //Locked methods //Global methods of lazy diff --git a/dist/lazy-attr.cjs.min.js b/dist/lazy-attr.cjs.min.js deleted file mode 100644 index a63fd9b..0000000 --- a/dist/lazy-attr.cjs.min.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";function IntersectionObserverPolyfill(t,e){this.callback=t,this.elements=[],this.options=e,window.lazyDatas.originalObserver=!1,this.initObs=function(){var e=this;function n(){var n=[];e.elements.forEach((function(t){var e=window.lazy().isIntersecting(t);n.push({target:t,isIntersecting:e})})),t(n,e)}this.listener=n;var i=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame;i?function t(){n(),i(t)}():setInterval(n,100)},this.observe=function(t){t&&this.elements.push(t)},this.unobserve=function(t){if(t){var e=this.elements.indexOf(t);-1!=e&&this.elements.splice(e,1)}},this.initObs()}function getUpdateLazyAttr(t){var e=new XMLHttpRequest;e.onload=function(){var n=e.responseText,i="[#version]",a=n.substring(n.indexOf(i)+i.length);a=(a=a.substring(a.indexOf(i)+i.length)).substring(0,a.indexOf(i)),t({error:!1,version:a})},e.onerror=function(){t({error:!0,content:"Error while fetching"})},e.open("GET",window.lazyDatas.updateURL),e.send()}var lazyParameters=["[lazy-reset]","[lazy-animation]","[lazy-animation-time]","[lazy-animation-delay]","[lazy-src]","[lazy-video]","[lazy-embed]","[lazy-animation-pointer]","[lazy-animation-function]","[lazy-animation-count]","[lazy-callback]","[lazy-srcset]","[lazy-poster]","[lazy-size-width]","[lazy-size-height]","[lazy-background]"],lazyAnimations=["zoomin","zoomout","opacity","slide-left","slide-right","slide-bottom","slide-top","corner-top-left","corner-top-right","corner-bottom-left","corner-bottom-right","shake","rotate","blur","flip","flip-up"];function lazyGlobal(){return{_data:window.lazyDatas,changeAnimation:function(t,e,n){var i=t.getAttribute("lazy-reset");if(i=null!=i&&null!=i){var a=t.getAttribute("lazy-animation");if(a&&e){var o=t.getAttribute("lazy-animation-pointer");o?document.querySelectorAll(o).forEach((function(t){t.classList.remove(a)})):t.classList.remove(a),t.removeAttribute("lazy-animation")}t.setAttribute("lazy-animation",e),n&&(window.lazy()._data.observer.unobserve(t),window.lazy()._data.observer.observe(t))}else console.warn("Lazy-attr : Cannot change animation of not lazy-reset element !")},getLastVersion:function(t){getUpdateLazyAttr(t)},isIntersecting:function(t){var e=window.innerWidth,n=window.innerHeight,i=t.getBoundingClientRect(),a=!1,o=!1,r=i.top>=0&&i.top<=n,s=i.bottom>=0&&i.bottom<=n,l=i.left>=0&&i.left<=e,u=i.right>=0&&i.right<=e;return(r||s)&&(o=!0),(l||u)&&(a=!0),!(!a||!o)},isIntersectingWithoutTransform:function(t){var e=window.innerWidth,n=window.innerHeight;function i(t){var i=t.offsetParent.getBoundingClientRect(),a=i.left+t.offsetLeft,o=i.top+t.offsetTop,r=o+t.offsetHeight,s=a+t.offsetWidth,l=!1,u=!1;if((o>=0&&o<=n||r>=0&&r<=n)&&(u=!0),(a>=0&&a<=e||s>=0&&s<=e)&&(l=!0),l&&u)return!0}var a=t.getAttribute("lazy-animation-pointer");return i(t)||null!=a&&i(document.querySelector(a))},parameters:lazyParameters,animations:lazyAnimations,options:{root:null,rootMargin:"0px",threshold:0},skeletons:["lazy-skeleton","lazy-skeleton-corner","lazy-skeleton-top"],version:"1.1.9",versionMatcher:"[#version]1.1.9[#version]"}}function lazyMain(){function t(t){console.error("[ERROR] Lazy-attr : "+t)}if(window.IntersectionObserver&&window.lazy()&&window.lazyDatas){var e=function(){document.body.querySelectorAll(window.lazy().parameters.join(",")).forEach((function(t){var e=t.getAttribute("lazy-size-width"),i=t.getAttribute("lazy-size-height");e&&(t.style.minWidth=e),i&&(t.style.minHeight=i),n.observe(t)}))},n=new IntersectionObserver((function(e,n){e.forEach((function(e){var i=e.target;if(e.isIntersecting){var a=function(t,e){t.style.animationPlayState=e,t.style.webkitAnimationPlayState=e},o=function(t,e){var n=null;if(window.lazy()._data.originalObserver){var i=t.getAttribute("lazy-animation");i&&e.classList.remove(i)}t.style.minWidth=n,t.style.minHeight=n,a(e,n),t.style.animationDuration=n,t.style.webkitAnimationDuration=n,t.style.animationDelay=n,t.style.webkitAnimationDelay=n,t.style.animationIterationCount=n,t.style.webkitAnimationIterationCount=n,t.style.animationTimingFunction=n,t.style.webkitAnimationTimingFunction=n},r=function(t,e){var n=i.getAttribute("lazy-animation-time");n&&(t.style.animationDuration=n+"s",t.style.webkitAnimationDuration=n+"s");var a=i.getAttribute("lazy-animation-delay");a&&(t.style.animationDelay=a+"s",t.style.webkitAnimationDelay=a+"s");var r=i.getAttribute("lazy-animation-count");r&&(t.style.animationIterationCount=r,t.style.webkitAnimationIterationCount=r);var s=i.getAttribute("lazy-animation-function");s&&(t.style.animationTimingFunction=s,t.style.webkitAnimationTimingFunction=s),t.classList.add(e),null===i.getAttribute("lazy-reset")?t.addEventListener("animationend",(function(){o(i,t),window.lazy().parameters.forEach((function(t){t=t.replace(/(\[|\])/gi,""),i.removeAttribute(t)}))})):t.addEventListener("animationend",(function(){o(i,t)}))},s=[],l=i.getAttribute("lazy-animation"),u=i.getAttribute("lazy-animation-pointer");u?document.querySelectorAll(u).forEach((function(t){l&&(r(t,l),a(t,"paused")),s.push(t)})):(l&&(r(i,l),a(i,"paused")),s.push(i));var c=i.complete&&0!==i.naturalHeight,y=i.readyState>=0,d=function(){var t=i.getAttribute("lazy-callback");t&&window[t](i)},m=function(){s.forEach((function(t){!function(t){-1!=t.classList.toString().indexOf("lazyattr")&&(t.classList.remove("lazyattr"),t.classList.add("lazyloaded"))}(t),a(t,"running"),window.lazy().skeletons.forEach((function(e){return t.classList.remove(e)}))}))};if(c||y||!i.getAttribute("lazy-src")&&!i.getAttribute("lazy-srcset")&&!i.getAttribute("lazy-background"))d(),m();else if(i.getAttribute("lazy-background")){var f=i.getAttribute("lazy-background");if(f){var b=new Image;b.src=f,b.addEventListener("error",(function(){m(),t("cannot load url "+i.src)})),b.addEventListener("load",(function(){i.style.backgroundImage="url('"+b.src+"')",d(),m()}))}}else i.addEventListener("error",(function(){m(),t("cannot load url "+i.src)})),i.addEventListener("load",(function(){d(),m()})),i.addEventListener("loadeddata",d);var z=i.getAttribute("lazy-video");z&&i.setAttribute("poster",z),i.preload="none";var g=i.getAttribute("lazy-embed");if(g)if(window.lazy()._data.isIE)i.setAttribute("src",g);else{var v=i.getAttribute("lazy-poster");v=v?"url('"+v+"')":"#000",i.setAttribute("srcdoc","▶")}var w=i.getAttribute("lazy-src");w&&(i.src=w);var h=i.getAttribute("lazy-srcset");h&&i.setAttribute("srcset",h),i.removeAttribute("lazy-embed"),i.removeAttribute("lazy-poster"),i.removeAttribute("lazy-video"),i.removeAttribute("lazy-src"),i.removeAttribute("lazy-srcset"),i.removeAttribute("lazy-background"),null===i.getAttribute("lazy-reset")&&n.unobserve(i)}else if(null!=i.getAttribute("lazy-reset")&&!window.lazy().isIntersectingWithoutTransform(i)){var p=function(t,e){e&&t.classList.remove(e)},A=i.getAttribute("lazy-animation"),L=i.getAttribute("lazy-animation-pointer");L&&A?document.querySelectorAll(L).forEach((function(t){p(t,A)})):p(i,A)}}))}),window.lazy().options);window.lazyDatas.observer=n,document.addEventListener("DOMNodeInserted",e),e(),i="version "+window.lazy().version,console.info("[INFO] Lazy-attr : "+i)}else t("incompatible or verify window.lazy and window.lazyDatas integration");var i}window.NodeList&&!NodeList.prototype.forEach&&(NodeList.prototype.forEach=Array.prototype.forEach),window.HTMLCollection&&!HTMLCollection.prototype.forEach&&(HTMLCollection.prototype.forEach=Array.prototype.forEach),window.lazyDatas={isIE:!!document.documentMode,updateURL:"https://unpkg.com/lazy-attr@latest/dist/lazy-attr.min.js",originalObserver:!0},window.lazy=lazyGlobal,window.IntersectionObserver||(window.IntersectionObserver=IntersectionObserverPolyfill),window.addEventListener("load",lazyMain); diff --git a/dist/lazy-attr.esm.js b/dist/lazy-attr.esm.js index 46bcb18..43985fc 100644 --- a/dist/lazy-attr.esm.js +++ b/dist/lazy-attr.esm.js @@ -33,15 +33,15 @@ function IntersectionObserverPolyfill(callback, options) { } } - function observe(e) { - if (e) { - this.elements.push(e); + function observe(element) { + if (element) { + this.elements.push(element); } } - function unobserve(e) { - if (e) { - var index = this.elements.indexOf(e); + function unobserve(element) { + if (element) { + var index = this.elements.indexOf(element); if (index != -1) { this.elements.splice(index, 1); @@ -55,146 +55,114 @@ function IntersectionObserverPolyfill(callback, options) { this.initObs(); } -function getUpdateLazyAttr(callback) { - var req = new XMLHttpRequest(); //Ok - - req.onload = function () { - var res = req.responseText; - var p = '[#version]'; - var nv = res.substring(res.indexOf(p) + p.length); - nv = nv.substring(nv.indexOf(p) + p.length); - nv = nv.substring(0, nv.indexOf(p)); - callback({ - error: false, - version: nv - }); - }; //Error - - - req.onerror = function () { - callback({ - error: true, - content: "Error while fetching" - }); - }; - - req.open('GET', window.lazyDatas["updateURL"]); - req.send(); -} - var lazyParameters = ["[lazy-reset]", "[lazy-animation]", "[lazy-animation-time]", "[lazy-animation-delay]", "[lazy-src]", "[lazy-video]", "[lazy-embed]", "[lazy-animation-pointer]", "[lazy-animation-function]", "[lazy-animation-count]", "[lazy-callback]", "[lazy-srcset]", "[lazy-poster]", "[lazy-size-width]", "[lazy-size-height]", "[lazy-background]"]; var lazyAnimations = ["zoomin", "zoomout", "opacity", "slide-left", "slide-right", "slide-bottom", "slide-top", "corner-top-left", "corner-top-right", "corner-bottom-left", "corner-bottom-right", "shake", "rotate", "blur", "flip", "flip-up"]; -function lazyGlobal() { - /** - * Get lhe lastest version - * @param {Function} callback - */ - function getLastVersion(callback) { - getUpdateLazyAttr(callback); - } - /** - * See object intersecting for polyfill - * @param {HTMLElement} element - */ - - - function isIntersecting(element) { - var width = window.innerWidth; - var height = window.innerHeight; - var pos = element.getBoundingClientRect(); +/** +* See object intersecting for polyfill +* @param {HTMLElement} element +*/ +function isIntersecting(element) { + var width = window.innerWidth; + var height = window.innerHeight; + var pos = element.getBoundingClientRect(); + var hIntersect = false; + var vIntersect = false; + var topCondition = pos.top >= 0 && pos.top <= height; + var bottomCondition = pos.bottom >= 0 && pos.bottom <= height; + var leftCondition = pos.left >= 0 && pos.left <= width; + var rightCondition = pos.right >= 0 && pos.right <= width; + if (topCondition || bottomCondition) vIntersect = true; + if (leftCondition || rightCondition) hIntersect = true; + if (hIntersect && vIntersect) return true; + return false; +} +/** +* Return if an element is intersecting without tranform animation +* @param {HTMLElement} el +*/ + + +function isIntersectingWithoutTransform(el) { + var width = window.innerWidth; + var height = window.innerHeight; + + function isElementIntersecting(element) { + var parentRect = element.offsetParent.getBoundingClientRect(); + var left = parentRect.left + element.offsetLeft; + var top = parentRect.top + element.offsetTop; + var bottom = top + element.offsetHeight; + var right = left + element.offsetWidth; var hIntersect = false; var vIntersect = false; - var topCondition = pos.top >= 0 && pos.top <= height; - var bottomCondition = pos.bottom >= 0 && pos.bottom <= height; - var leftCondition = pos.left >= 0 && pos.left <= width; - var rightCondition = pos.right >= 0 && pos.right <= width; + var topCondition = top >= 0 && top <= height; + var bottomCondition = bottom >= 0 && bottom <= height; + var leftCondition = left >= 0 && left <= width; + var rightCondition = right >= 0 && right <= width; if (topCondition || bottomCondition) vIntersect = true; if (leftCondition || rightCondition) hIntersect = true; if (hIntersect && vIntersect) return true; - return false; } - /** - * Return if an element is intersecting without tranform of animation - * @param {HTMLElement} el - */ - - - function isIntersectingWithoutTransform(el) { - var width = window.innerWidth; - var height = window.innerHeight; - - function isElementIntersecting(element) { - var parentRect = element.offsetParent.getBoundingClientRect(); - var left = parentRect.left + element.offsetLeft; - var top = parentRect.top + element.offsetTop; - var bottom = top + element.offsetHeight; - var right = left + element.offsetWidth; - var hIntersect = false; - var vIntersect = false; - var topCondition = top >= 0 && top <= height; - var bottomCondition = bottom >= 0 && bottom <= height; - var leftCondition = left >= 0 && left <= width; - var rightCondition = right >= 0 && right <= width; - if (topCondition || bottomCondition) vIntersect = true; - if (leftCondition || rightCondition) hIntersect = true; - if (hIntersect && vIntersect) return true; - } - - var pointer = el.getAttribute('lazy-animation-pointer'); - return isElementIntersecting(el) || (pointer != null ? isElementIntersecting(document.querySelector(pointer)) : false); - } - /** - * Change animation of lazy block (e for element, a for animation name and r to reload or no the animation) - * @param {HTMLElement} e - * @param {String} a - * @param {Boolean} r - */ + var pointer = el.getAttribute('lazy-animation-pointer'); + return isElementIntersecting(el) || (pointer != null ? isElementIntersecting(document.querySelector(pointer)) : false); +} - function changeAnimation(e, a, r) { - var reset = e.getAttribute('lazy-reset'); - reset = reset != null && reset != undefined ? true : false; - - if (reset) { - var backAnimation = e.getAttribute('lazy-animation'); - - if (backAnimation && a) { - var pointer = e.getAttribute('lazy-animation-pointer'); - - if (pointer) { - //with pointer - document.querySelectorAll(pointer).forEach(function (p) { - p.classList.remove(backAnimation); - }); - } else { - //no pointer - e.classList.remove(backAnimation); - } - - e.removeAttribute('lazy-animation'); +var intersecting = { + isIntersecting: isIntersecting, + isIntersectingWithoutTransform: isIntersectingWithoutTransform +}; + +/** + * Change animation of lazy block (e for element, a for animation name and r to reload or no the animation) + * @param {HTMLElement} e + * @param {String} a + * @param {Boolean} r + */ +function changeAnimation(e, a, r) { + var reset = e.getAttribute('lazy-reset'); + reset = reset != null && reset != undefined ? true : false; + + if (reset) { + var backAnimation = e.getAttribute('lazy-animation'); + + if (backAnimation && a) { + var pointer = e.getAttribute('lazy-animation-pointer'); + + if (pointer) { + //with pointer + document.querySelectorAll(pointer).forEach(function (p) { + p.classList.remove(backAnimation); + }); + } else { + //no pointer + e.classList.remove(backAnimation); } - e.setAttribute('lazy-animation', a); //Reload animation + e.removeAttribute('lazy-animation'); + } - if (r) { - window.lazy()._data["observer"].unobserve(e); + e.setAttribute('lazy-animation', a); //Reload animation - window.lazy()._data["observer"].observe(e); - } - } else { - console.warn('Lazy-attr : Cannot change animation of not lazy-reset element !'); + if (r) { + window.lazy()._data["observer"].unobserve(e); + + window.lazy()._data["observer"].observe(e); } + } else { + console.warn('Lazy-attr : Cannot change animation of not lazy-reset element !'); } +} + +function lazyGlobal() { return { //datas _data: window.lazyDatas, //methods changeAnimation: changeAnimation, - getLastVersion: getLastVersion, - isIntersecting: isIntersecting, - isIntersectingWithoutTransform: isIntersectingWithoutTransform, + isIntersecting: intersecting.isIntersecting, + isIntersectingWithoutTransform: intersecting.isIntersectingWithoutTransform, //search attributes parameters for observer parameters: lazyParameters, //animation list @@ -208,138 +176,130 @@ function lazyGlobal() { //skeletons animations skeletons: ["lazy-skeleton", "lazy-skeleton-corner", "lazy-skeleton-top"], //version - version: "1.1.9", - //version matcher - versionMatcher: "[#version]1.1.9[#version]" + version: "1.2.0" }; } -function lazyMain() { - //Function to display error and info - function displayInfo(msg) { - console.info("[INFO] Lazy-attr : " + msg); - } +/** +* Run or pause animation function +* @param {HTMLElement} element +* @param {String} state +*/ +function animationState(element, state) { + element.style.animationPlayState = state; +} - function displayError(msg) { - console.error("[ERROR] Lazy-attr : " + msg); - } - /** - * Main function - * @param {*} entries - * @param {*} observer - */ +/** +* used to remove useless attributes on not lazy-reset elements t=target and e=pointer +* @param {HTMLElement} parent +* @param {HTMLElement} pointer +*/ - function callback(entries, observer) { - //For each elements in the observer - entries.forEach(function (entry) { - var target = entry.target; //Element target - //Intersecting +function removeUselessAttributes(parent, pointer) { + var nullAttribute = null; //remove animation - if (entry.isIntersecting) { - /** - * Run or pause animation function - * @param {HTMLElement} element - * @param {String} state - */ - var animationState = function animationState(element, state) { - element.style.animationPlayState = state; - element.style.webkitAnimationPlayState = state; - }; + if (window.lazy()._data['originalObserver']) { + var animationName = parent.getAttribute('lazy-animation'); + if (animationName) pointer.classList.remove(animationName); + } //remove size - /** - * used to remove useless attributes on not lazy-reset elements t=target and e=pointer - * @param {HTMLElement} parent - * @param {HTMLElement} pointer - */ - var removeUselessAttributes = function removeUselessAttributes(parent, pointer) { - var nullAttribute = null; //remove animation - if (window.lazy()._data['originalObserver']) { - var animationName = parent.getAttribute('lazy-animation'); - if (animationName) pointer.classList.remove(animationName); - } //remove size + parent.style.minWidth = nullAttribute; + parent.style.minHeight = nullAttribute; //animation running + animationState(pointer, nullAttribute); //animation duration - parent.style.minWidth = nullAttribute; - parent.style.minHeight = nullAttribute; //animation running + parent.style.animationDuration = nullAttribute; //animation delay - animationState(pointer, nullAttribute); //animation duration + parent.style.animationDelay = nullAttribute; //animation count - parent.style.animationDuration = nullAttribute; - parent.style.webkitAnimationDuration = nullAttribute; //animation delay + parent.style.animationIterationCount = nullAttribute; //animation function - parent.style.animationDelay = nullAttribute; - parent.style.webkitAnimationDelay = nullAttribute; //animation count + parent.style.animationTimingFunction = nullAttribute; +} - parent.style.animationIterationCount = nullAttribute; - parent.style.webkitAnimationIterationCount = nullAttribute; //animation function +/** +* Set animation parameters +* @param {HTMLElement} element +* @param {String} animationClass +*/ - parent.style.animationTimingFunction = nullAttribute; - parent.style.webkitAnimationTimingFunction = nullAttribute; - }; - /** - * Set animation parameters - * @param {HTMLElement} element - * @param {String} animationClass - */ +function setAnimation(target, element, animationClass) { + //if(!isAnimationStoped(e)) return; //We wait the end of animation + //Animation duration + var animationTime = target.getAttribute('lazy-animation-time'); + if (animationTime) { + element.style.animationDuration = animationTime + "s"; + } //Animation delay - var setAnimation = function setAnimation(element, animationClass) { - //if(!isAnimationStoped(e)) return; //We wait the end of animation - //Animation duration - var animationTime = target.getAttribute('lazy-animation-time'); - if (animationTime) { - element.style.animationDuration = animationTime + "s"; - element.style.webkitAnimationDuration = animationTime + "s"; - } //Animation delay + var animationDelay = target.getAttribute('lazy-animation-delay'); + if (animationDelay) { + element.style.animationDelay = animationDelay + "s"; + } //Animation count - var animationDelay = target.getAttribute('lazy-animation-delay'); - if (animationDelay) { - element.style.animationDelay = animationDelay + "s"; - element.style.webkitAnimationDelay = animationDelay + "s"; - } //Animation count + var animationCount = target.getAttribute('lazy-animation-count'); + if (animationCount) { + element.style.animationIterationCount = animationCount; + } //Animation function - var animationCount = target.getAttribute('lazy-animation-count'); - if (animationCount) { - element.style.animationIterationCount = animationCount; - element.style.webkitAnimationIterationCount = animationCount; - } //Animation function + var animationFunction = target.getAttribute('lazy-animation-function'); + if (animationFunction) { + element.style.animationTimingFunction = animationFunction; + } //Set animation class - var animationFunction = target.getAttribute('lazy-animation-function'); - if (animationFunction) { - element.style.animationTimingFunction = animationFunction; - element.style.webkitAnimationTimingFunction = animationFunction; - } //Set animation class + element.classList.add(animationClass); + + if (target.getAttribute('lazy-reset') === null) { + //Delete useless attribute + element.addEventListener('animationend', function () { + //remove all useless attributes + removeUselessAttributes(target, element); //Delete lazy-attr attributes + + window.lazy().parameters.forEach(function (param) { + param = param.replace(/(\[|\])/gi, ""); + target.removeAttribute(param); + }); + }); + } else { + //Delete useless attributes on lazy-reset elements + element.addEventListener('animationend', function () { + //remove all useless attributes + removeUselessAttributes(target, element); + }); + } +} +function lazyMain() { + //Function to display error and info + function displayInfo(msg) { + console.info("[INFO] Lazy-attr : " + msg); + } - element.classList.add(animationClass); + function displayError(msg) { + console.error("[ERROR] Lazy-attr : " + msg); + } + /** + * Main function + * @param {*} entries + * @param {*} observer + */ - if (target.getAttribute('lazy-reset') === null) { - //Delete useless attribute - element.addEventListener('animationend', function () { - //remove all useless attributes - removeUselessAttributes(target, element); //Delete lazy-attr attributes + function callback(entries, observer) { + //For each elements in the observer + entries.forEach(function (entry) { + var target = entry.target; //Element target + //Intersecting - window.lazy().parameters.forEach(function (param) { - param = param.replace(/(\[|\])/gi, ""); - target.removeAttribute(param); - }); - }); - } else { - //Delete useless attributes on lazy-reset elements - element.addEventListener('animationend', function () { - //remove all useless attributes - removeUselessAttributes(target, element); - }); - } - }; //Animation class + if (entry.isIntersecting) { + //Animation class var targetAnimation = []; var animationClass = target.getAttribute('lazy-animation'); var pointer = target.getAttribute('lazy-animation-pointer'); @@ -348,7 +308,7 @@ function lazyMain() { var pointers = document.querySelectorAll(pointer); pointers.forEach(function (pointer) { if (animationClass) { - setAnimation(pointer, animationClass); //set animation + setAnimation(target, pointer, animationClass); //set animation animationState(pointer, "paused"); } @@ -357,7 +317,7 @@ function lazyMain() { }); } else { if (animationClass) { - setAnimation(target, animationClass); //set animation + setAnimation(target, target, animationClass); //set animation animationState(target, "paused"); } @@ -449,7 +409,7 @@ function lazyMain() { var poster = target.getAttribute('lazy-poster'); //Permet de mettre un poster à la vidéo if (poster) poster = "url('" + poster + "')";else poster = "#000"; - target.setAttribute("srcdoc", "▶"); + target.setAttribute("srcdoc", "▶"); } else { //IE do not support srcdoc target.setAttribute('src', code); @@ -502,9 +462,7 @@ function lazyMain() { if (window.IntersectionObserver && window.lazy() && window.lazyDatas) { - /** - * Set observer on dom elements - */ + //Set observer on dom elements var getLazyObject = function getLazyObject() { document.body.querySelectorAll(window.lazy().parameters.join(',')).forEach(function (el) { //Get default width and height @@ -528,7 +486,7 @@ function lazyMain() { displayInfo('version ' + window.lazy().version); } else { //Error - displayError('incompatible or verify window.lazy and window.lazyDatas integration'); + displayError('Incompatible or verify window.lazy and window.lazyDatas integration'); } } @@ -543,7 +501,6 @@ if (window.HTMLCollection && !HTMLCollection.prototype.forEach) { window.lazyDatas = { isIE: !!document.documentMode, - updateURL: "https://unpkg.com/lazy-attr@latest/dist/lazy-attr.min.js", originalObserver: true }; //Locked methods //Global methods of lazy diff --git a/dist/lazy-attr.esm.min.js b/dist/lazy-attr.esm.min.js deleted file mode 100644 index 2c77a01..0000000 --- a/dist/lazy-attr.esm.min.js +++ /dev/null @@ -1 +0,0 @@ -function IntersectionObserverPolyfill(t,e){this.callback=t,this.elements=[],this.options=e,window.lazyDatas.originalObserver=!1,this.initObs=function(){var e=this;function n(){var n=[];e.elements.forEach((function(t){var e=window.lazy().isIntersecting(t);n.push({target:t,isIntersecting:e})})),t(n,e)}this.listener=n;var i=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame;i?function t(){n(),i(t)}():setInterval(n,100)},this.observe=function(t){t&&this.elements.push(t)},this.unobserve=function(t){if(t){var e=this.elements.indexOf(t);-1!=e&&this.elements.splice(e,1)}},this.initObs()}function getUpdateLazyAttr(t){var e=new XMLHttpRequest;e.onload=function(){var n=e.responseText,i="[#version]",a=n.substring(n.indexOf(i)+i.length);a=(a=a.substring(a.indexOf(i)+i.length)).substring(0,a.indexOf(i)),t({error:!1,version:a})},e.onerror=function(){t({error:!0,content:"Error while fetching"})},e.open("GET",window.lazyDatas.updateURL),e.send()}var lazyParameters=["[lazy-reset]","[lazy-animation]","[lazy-animation-time]","[lazy-animation-delay]","[lazy-src]","[lazy-video]","[lazy-embed]","[lazy-animation-pointer]","[lazy-animation-function]","[lazy-animation-count]","[lazy-callback]","[lazy-srcset]","[lazy-poster]","[lazy-size-width]","[lazy-size-height]","[lazy-background]"],lazyAnimations=["zoomin","zoomout","opacity","slide-left","slide-right","slide-bottom","slide-top","corner-top-left","corner-top-right","corner-bottom-left","corner-bottom-right","shake","rotate","blur","flip","flip-up"];function lazyGlobal(){return{_data:window.lazyDatas,changeAnimation:function(t,e,n){var i=t.getAttribute("lazy-reset");if(i=null!=i&&null!=i){var a=t.getAttribute("lazy-animation");if(a&&e){var o=t.getAttribute("lazy-animation-pointer");o?document.querySelectorAll(o).forEach((function(t){t.classList.remove(a)})):t.classList.remove(a),t.removeAttribute("lazy-animation")}t.setAttribute("lazy-animation",e),n&&(window.lazy()._data.observer.unobserve(t),window.lazy()._data.observer.observe(t))}else console.warn("Lazy-attr : Cannot change animation of not lazy-reset element !")},getLastVersion:function(t){getUpdateLazyAttr(t)},isIntersecting:function(t){var e=window.innerWidth,n=window.innerHeight,i=t.getBoundingClientRect(),a=!1,o=!1,r=i.top>=0&&i.top<=n,s=i.bottom>=0&&i.bottom<=n,l=i.left>=0&&i.left<=e,u=i.right>=0&&i.right<=e;return(r||s)&&(o=!0),(l||u)&&(a=!0),!(!a||!o)},isIntersectingWithoutTransform:function(t){var e=window.innerWidth,n=window.innerHeight;function i(t){var i=t.offsetParent.getBoundingClientRect(),a=i.left+t.offsetLeft,o=i.top+t.offsetTop,r=o+t.offsetHeight,s=a+t.offsetWidth,l=!1,u=!1;if((o>=0&&o<=n||r>=0&&r<=n)&&(u=!0),(a>=0&&a<=e||s>=0&&s<=e)&&(l=!0),l&&u)return!0}var a=t.getAttribute("lazy-animation-pointer");return i(t)||null!=a&&i(document.querySelector(a))},parameters:lazyParameters,animations:lazyAnimations,options:{root:null,rootMargin:"0px",threshold:0},skeletons:["lazy-skeleton","lazy-skeleton-corner","lazy-skeleton-top"],version:"1.1.9",versionMatcher:"[#version]1.1.9[#version]"}}function lazyMain(){function t(t){console.error("[ERROR] Lazy-attr : "+t)}if(window.IntersectionObserver&&window.lazy()&&window.lazyDatas){var e=function(){document.body.querySelectorAll(window.lazy().parameters.join(",")).forEach((function(t){var e=t.getAttribute("lazy-size-width"),i=t.getAttribute("lazy-size-height");e&&(t.style.minWidth=e),i&&(t.style.minHeight=i),n.observe(t)}))},n=new IntersectionObserver((function(e,n){e.forEach((function(e){var i=e.target;if(e.isIntersecting){var a=function(t,e){t.style.animationPlayState=e,t.style.webkitAnimationPlayState=e},o=function(t,e){var n=null;if(window.lazy()._data.originalObserver){var i=t.getAttribute("lazy-animation");i&&e.classList.remove(i)}t.style.minWidth=n,t.style.minHeight=n,a(e,n),t.style.animationDuration=n,t.style.webkitAnimationDuration=n,t.style.animationDelay=n,t.style.webkitAnimationDelay=n,t.style.animationIterationCount=n,t.style.webkitAnimationIterationCount=n,t.style.animationTimingFunction=n,t.style.webkitAnimationTimingFunction=n},r=function(t,e){var n=i.getAttribute("lazy-animation-time");n&&(t.style.animationDuration=n+"s",t.style.webkitAnimationDuration=n+"s");var a=i.getAttribute("lazy-animation-delay");a&&(t.style.animationDelay=a+"s",t.style.webkitAnimationDelay=a+"s");var r=i.getAttribute("lazy-animation-count");r&&(t.style.animationIterationCount=r,t.style.webkitAnimationIterationCount=r);var s=i.getAttribute("lazy-animation-function");s&&(t.style.animationTimingFunction=s,t.style.webkitAnimationTimingFunction=s),t.classList.add(e),null===i.getAttribute("lazy-reset")?t.addEventListener("animationend",(function(){o(i,t),window.lazy().parameters.forEach((function(t){t=t.replace(/(\[|\])/gi,""),i.removeAttribute(t)}))})):t.addEventListener("animationend",(function(){o(i,t)}))},s=[],l=i.getAttribute("lazy-animation"),u=i.getAttribute("lazy-animation-pointer");u?document.querySelectorAll(u).forEach((function(t){l&&(r(t,l),a(t,"paused")),s.push(t)})):(l&&(r(i,l),a(i,"paused")),s.push(i));var c=i.complete&&0!==i.naturalHeight,y=i.readyState>=0,d=function(){var t=i.getAttribute("lazy-callback");t&&window[t](i)},m=function(){s.forEach((function(t){!function(t){-1!=t.classList.toString().indexOf("lazyattr")&&(t.classList.remove("lazyattr"),t.classList.add("lazyloaded"))}(t),a(t,"running"),window.lazy().skeletons.forEach((function(e){return t.classList.remove(e)}))}))};if(c||y||!i.getAttribute("lazy-src")&&!i.getAttribute("lazy-srcset")&&!i.getAttribute("lazy-background"))d(),m();else if(i.getAttribute("lazy-background")){var f=i.getAttribute("lazy-background");if(f){var b=new Image;b.src=f,b.addEventListener("error",(function(){m(),t("cannot load url "+i.src)})),b.addEventListener("load",(function(){i.style.backgroundImage="url('"+b.src+"')",d(),m()}))}}else i.addEventListener("error",(function(){m(),t("cannot load url "+i.src)})),i.addEventListener("load",(function(){d(),m()})),i.addEventListener("loadeddata",d);var z=i.getAttribute("lazy-video");z&&i.setAttribute("poster",z),i.preload="none";var g=i.getAttribute("lazy-embed");if(g)if(window.lazy()._data.isIE)i.setAttribute("src",g);else{var v=i.getAttribute("lazy-poster");v=v?"url('"+v+"')":"#000",i.setAttribute("srcdoc","▶")}var w=i.getAttribute("lazy-src");w&&(i.src=w);var h=i.getAttribute("lazy-srcset");h&&i.setAttribute("srcset",h),i.removeAttribute("lazy-embed"),i.removeAttribute("lazy-poster"),i.removeAttribute("lazy-video"),i.removeAttribute("lazy-src"),i.removeAttribute("lazy-srcset"),i.removeAttribute("lazy-background"),null===i.getAttribute("lazy-reset")&&n.unobserve(i)}else if(null!=i.getAttribute("lazy-reset")&&!window.lazy().isIntersectingWithoutTransform(i)){var p=function(t,e){e&&t.classList.remove(e)},A=i.getAttribute("lazy-animation"),L=i.getAttribute("lazy-animation-pointer");L&&A?document.querySelectorAll(L).forEach((function(t){p(t,A)})):p(i,A)}}))}),window.lazy().options);window.lazyDatas.observer=n,document.addEventListener("DOMNodeInserted",e),e(),i="version "+window.lazy().version,console.info("[INFO] Lazy-attr : "+i)}else t("incompatible or verify window.lazy and window.lazyDatas integration");var i}window.NodeList&&!NodeList.prototype.forEach&&(NodeList.prototype.forEach=Array.prototype.forEach),window.HTMLCollection&&!HTMLCollection.prototype.forEach&&(HTMLCollection.prototype.forEach=Array.prototype.forEach),window.lazyDatas={isIE:!!document.documentMode,updateURL:"https://unpkg.com/lazy-attr@latest/dist/lazy-attr.min.js",originalObserver:!0},window.lazy=lazyGlobal,window.IntersectionObserver||(window.IntersectionObserver=IntersectionObserverPolyfill),window.addEventListener("load",lazyMain); diff --git a/dist/lazy-attr.js b/dist/lazy-attr.js index 4537352..54971d8 100644 --- a/dist/lazy-attr.js +++ b/dist/lazy-attr.js @@ -1,566 +1 @@ -(function (factory) { - typeof define === 'function' && define.amd ? define(factory) : - factory(); -}((function () { 'use strict'; - - function IntersectionObserverPolyfill(callback, options) { - this.callback = callback; - this.elements = []; - this.options = options; //useless - - window.lazyDatas.originalObserver = false; - - function initObs() { - var obj = this; - - function listener() { - var entries = []; - obj.elements.forEach(function (element) { - var intersect = window.lazy().isIntersecting(element); - entries.push({ - target: element, - isIntersecting: intersect - }); - }); - callback(entries, obj); - } - this.listener = listener; - var requestAnimationFrameSetup = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame; - - if (requestAnimationFrameSetup) { - (function loopDomChangement() { - listener(); - requestAnimationFrameSetup(loopDomChangement); - })(); - } else { - //If not requestAnimationFrame - setInterval(listener, 100); - } - } - - function observe(e) { - if (e) { - this.elements.push(e); - } - } - - function unobserve(e) { - if (e) { - var index = this.elements.indexOf(e); - - if (index != -1) { - this.elements.splice(index, 1); - } - } - } - - this.initObs = initObs; - this.observe = observe; - this.unobserve = unobserve; - this.initObs(); - } - - function getUpdateLazyAttr(callback) { - var req = new XMLHttpRequest(); //Ok - - req.onload = function () { - var res = req.responseText; - var p = '[#version]'; - var nv = res.substring(res.indexOf(p) + p.length); - nv = nv.substring(nv.indexOf(p) + p.length); - nv = nv.substring(0, nv.indexOf(p)); - callback({ - error: false, - version: nv - }); - }; //Error - - - req.onerror = function () { - callback({ - error: true, - content: "Error while fetching" - }); - }; - - req.open('GET', window.lazyDatas["updateURL"]); - req.send(); - } - - var lazyParameters = ["[lazy-reset]", "[lazy-animation]", "[lazy-animation-time]", "[lazy-animation-delay]", "[lazy-src]", "[lazy-video]", "[lazy-embed]", "[lazy-animation-pointer]", "[lazy-animation-function]", "[lazy-animation-count]", "[lazy-callback]", "[lazy-srcset]", "[lazy-poster]", "[lazy-size-width]", "[lazy-size-height]", "[lazy-background]"]; - - var lazyAnimations = ["zoomin", "zoomout", "opacity", "slide-left", "slide-right", "slide-bottom", "slide-top", "corner-top-left", "corner-top-right", "corner-bottom-left", "corner-bottom-right", "shake", "rotate", "blur", "flip", "flip-up"]; - - function lazyGlobal() { - /** - * Get lhe lastest version - * @param {Function} callback - */ - function getLastVersion(callback) { - getUpdateLazyAttr(callback); - } - /** - * See object intersecting for polyfill - * @param {HTMLElement} element - */ - - - function isIntersecting(element) { - var width = window.innerWidth; - var height = window.innerHeight; - var pos = element.getBoundingClientRect(); - var hIntersect = false; - var vIntersect = false; - var topCondition = pos.top >= 0 && pos.top <= height; - var bottomCondition = pos.bottom >= 0 && pos.bottom <= height; - var leftCondition = pos.left >= 0 && pos.left <= width; - var rightCondition = pos.right >= 0 && pos.right <= width; - if (topCondition || bottomCondition) vIntersect = true; - if (leftCondition || rightCondition) hIntersect = true; - if (hIntersect && vIntersect) return true; - return false; - } - /** - * Return if an element is intersecting without tranform of animation - * @param {HTMLElement} el - */ - - - function isIntersectingWithoutTransform(el) { - var width = window.innerWidth; - var height = window.innerHeight; - - function isElementIntersecting(element) { - var parentRect = element.offsetParent.getBoundingClientRect(); - var left = parentRect.left + element.offsetLeft; - var top = parentRect.top + element.offsetTop; - var bottom = top + element.offsetHeight; - var right = left + element.offsetWidth; - var hIntersect = false; - var vIntersect = false; - var topCondition = top >= 0 && top <= height; - var bottomCondition = bottom >= 0 && bottom <= height; - var leftCondition = left >= 0 && left <= width; - var rightCondition = right >= 0 && right <= width; - if (topCondition || bottomCondition) vIntersect = true; - if (leftCondition || rightCondition) hIntersect = true; - if (hIntersect && vIntersect) return true; - } - - var pointer = el.getAttribute('lazy-animation-pointer'); - return isElementIntersecting(el) || (pointer != null ? isElementIntersecting(document.querySelector(pointer)) : false); - } - /** - * Change animation of lazy block (e for element, a for animation name and r to reload or no the animation) - * @param {HTMLElement} e - * @param {String} a - * @param {Boolean} r - */ - - - function changeAnimation(e, a, r) { - var reset = e.getAttribute('lazy-reset'); - reset = reset != null && reset != undefined ? true : false; - - if (reset) { - var backAnimation = e.getAttribute('lazy-animation'); - - if (backAnimation && a) { - var pointer = e.getAttribute('lazy-animation-pointer'); - - if (pointer) { - //with pointer - document.querySelectorAll(pointer).forEach(function (p) { - p.classList.remove(backAnimation); - }); - } else { - //no pointer - e.classList.remove(backAnimation); - } - - e.removeAttribute('lazy-animation'); - } - - e.setAttribute('lazy-animation', a); //Reload animation - - if (r) { - window.lazy()._data["observer"].unobserve(e); - - window.lazy()._data["observer"].observe(e); - } - } else { - console.warn('Lazy-attr : Cannot change animation of not lazy-reset element !'); - } - } - return { - //datas - _data: window.lazyDatas, - //methods - changeAnimation: changeAnimation, - getLastVersion: getLastVersion, - isIntersecting: isIntersecting, - isIntersectingWithoutTransform: isIntersectingWithoutTransform, - //search attributes parameters for observer - parameters: lazyParameters, - //animation list - animations: lazyAnimations, - //options - options: { - root: null, - rootMargin: "0px", - threshold: 0 - }, - //skeletons animations - skeletons: ["lazy-skeleton", "lazy-skeleton-corner", "lazy-skeleton-top"], - //version - version: "1.1.9", - //version matcher - versionMatcher: "[#version]1.1.9[#version]" - }; - } - - function lazyMain() { - //Function to display error and info - function displayInfo(msg) { - console.info("[INFO] Lazy-attr : " + msg); - } - - function displayError(msg) { - console.error("[ERROR] Lazy-attr : " + msg); - } - /** - * Main function - * @param {*} entries - * @param {*} observer - */ - - function callback(entries, observer) { - //For each elements in the observer - entries.forEach(function (entry) { - var target = entry.target; //Element target - //Intersecting - - if (entry.isIntersecting) { - /** - * Run or pause animation function - * @param {HTMLElement} element - * @param {String} state - */ - var animationState = function animationState(element, state) { - element.style.animationPlayState = state; - element.style.webkitAnimationPlayState = state; - }; - - /** - * used to remove useless attributes on not lazy-reset elements t=target and e=pointer - * @param {HTMLElement} parent - * @param {HTMLElement} pointer - */ - var removeUselessAttributes = function removeUselessAttributes(parent, pointer) { - var nullAttribute = null; //remove animation - - if (window.lazy()._data['originalObserver']) { - var animationName = parent.getAttribute('lazy-animation'); - if (animationName) pointer.classList.remove(animationName); - } //remove size - - - parent.style.minWidth = nullAttribute; - parent.style.minHeight = nullAttribute; //animation running - - animationState(pointer, nullAttribute); //animation duration - - parent.style.animationDuration = nullAttribute; - parent.style.webkitAnimationDuration = nullAttribute; //animation delay - - parent.style.animationDelay = nullAttribute; - parent.style.webkitAnimationDelay = nullAttribute; //animation count - - parent.style.animationIterationCount = nullAttribute; - parent.style.webkitAnimationIterationCount = nullAttribute; //animation function - - parent.style.animationTimingFunction = nullAttribute; - parent.style.webkitAnimationTimingFunction = nullAttribute; - }; - /** - * Set animation parameters - * @param {HTMLElement} element - * @param {String} animationClass - */ - - - var setAnimation = function setAnimation(element, animationClass) { - //if(!isAnimationStoped(e)) return; //We wait the end of animation - //Animation duration - var animationTime = target.getAttribute('lazy-animation-time'); - - if (animationTime) { - element.style.animationDuration = animationTime + "s"; - element.style.webkitAnimationDuration = animationTime + "s"; - } //Animation delay - - - var animationDelay = target.getAttribute('lazy-animation-delay'); - - if (animationDelay) { - element.style.animationDelay = animationDelay + "s"; - element.style.webkitAnimationDelay = animationDelay + "s"; - } //Animation count - - - var animationCount = target.getAttribute('lazy-animation-count'); - - if (animationCount) { - element.style.animationIterationCount = animationCount; - element.style.webkitAnimationIterationCount = animationCount; - } //Animation function - - - var animationFunction = target.getAttribute('lazy-animation-function'); - - if (animationFunction) { - element.style.animationTimingFunction = animationFunction; - element.style.webkitAnimationTimingFunction = animationFunction; - } //Set animation class - - - element.classList.add(animationClass); - - if (target.getAttribute('lazy-reset') === null) { - //Delete useless attribute - element.addEventListener('animationend', function () { - //remove all useless attributes - removeUselessAttributes(target, element); //Delete lazy-attr attributes - - window.lazy().parameters.forEach(function (param) { - param = param.replace(/(\[|\])/gi, ""); - target.removeAttribute(param); - }); - }); - } else { - //Delete useless attributes on lazy-reset elements - element.addEventListener('animationend', function () { - //remove all useless attributes - removeUselessAttributes(target, element); - }); - } - }; //Animation class - var targetAnimation = []; - var animationClass = target.getAttribute('lazy-animation'); - var pointer = target.getAttribute('lazy-animation-pointer'); - - if (pointer) { - var pointers = document.querySelectorAll(pointer); - pointers.forEach(function (pointer) { - if (animationClass) { - setAnimation(pointer, animationClass); //set animation - - animationState(pointer, "paused"); - } - - targetAnimation.push(pointer); - }); - } else { - if (animationClass) { - setAnimation(target, animationClass); //set animation - - animationState(target, "paused"); - } - - targetAnimation.push(target); - } //See loaded elements - - - var loadedImg = target.complete && target.naturalHeight !== 0; - var loadedVideo = target.readyState >= 0; //>=3 - - var loaded = loadedImg || loadedVideo; //Call callback function - - var loadedFunction = function loadedFunction() { - var callbackFunction = target.getAttribute('lazy-callback'); - if (callbackFunction) window[callbackFunction](target); - }; //Set class on lazy element - - - var setClassLazy = function setClassLazy(el) { - var haveClass = el.classList.toString().indexOf('lazyattr') != -1; - - if (haveClass) { - el.classList.remove('lazyattr'); - el.classList.add('lazyloaded'); - } - }; - /** - * Start animation function after load element if it is lazy or not - */ - - - var startAnimation = function startAnimation() { - targetAnimation.forEach(function (el) { - setClassLazy(el); - animationState(el, "running"); //remove skeleton animation - - window.lazy().skeletons.forEach(function (className) { - return el.classList.remove(className); - }); - }); - }; - - if (loaded || !target.getAttribute("lazy-src") && !target.getAttribute('lazy-srcset') && !target.getAttribute('lazy-background')) { - loadedFunction(); - startAnimation(); - } else if (target.getAttribute('lazy-background')) { - //Lazy-background - var srcBackground = target.getAttribute('lazy-background'); - - if (srcBackground) { - var cacheImg = new Image(); - cacheImg.src = srcBackground; - cacheImg.addEventListener('error', function () { - startAnimation(); - displayError("cannot load url " + target.src); - }); - cacheImg.addEventListener('load', function () { - target.style.backgroundImage = "url('" + cacheImg.src + "')"; - loadedFunction(); - startAnimation(); - }); - } - } else { - target.addEventListener('error', function () { - startAnimation(); - displayError("cannot load url " + target.src); - }); //callback function - - target.addEventListener('load', function () { - loadedFunction(); //start animation after load - - startAnimation(); - }); //callback function video - - target.addEventListener('loadeddata', loadedFunction); - } //Lazy video - - - var srcPoster = target.getAttribute('lazy-video'); - if (srcPoster) target.setAttribute("poster", srcPoster); - target.preload = "none"; //Lazy iframe - - var code = target.getAttribute('lazy-embed'); - - if (code) { - //If it's not IE - if (!window.lazy()._data['isIE']) { - var poster = target.getAttribute('lazy-poster'); //Permet de mettre un poster à la vidéo - - if (poster) poster = "url('" + poster + "')";else poster = "#000"; - target.setAttribute("srcdoc", "▶"); - } else { - //IE do not support srcdoc - target.setAttribute('src', code); - } - } //Lazy src - - - var srcUrl = target.getAttribute('lazy-src'); - if (srcUrl) target.src = srcUrl; //Lazy srcset - - var srcSet = target.getAttribute('lazy-srcset'); - if (srcSet) target.setAttribute('srcset', srcSet); //Remove useless attributes after load - - target.removeAttribute('lazy-embed'); - target.removeAttribute('lazy-poster'); - target.removeAttribute('lazy-video'); - target.removeAttribute('lazy-src'); - target.removeAttribute('lazy-srcset'); - target.removeAttribute('lazy-background'); - - if (target.getAttribute('lazy-reset') === null) { - //Used to reload animation on scroll - observer.unobserve(target); //Stop observation - } - } else if (target.getAttribute('lazy-reset') != null && !window.lazy().isIntersectingWithoutTransform(target)) { - //Reload animation - //Reset function - var resetAnimation = function resetAnimation(element, animationClass) { - //remove animation - if (animationClass) element.classList.remove(animationClass); - }; //Reset class animation for pointer or target - - - var _animationClass = target.getAttribute('lazy-animation'); - - var havePointer = target.getAttribute('lazy-animation-pointer'); - - if (havePointer && _animationClass) { - var _pointers = document.querySelectorAll(havePointer); - - _pointers.forEach(function (pointer) { - resetAnimation(pointer, _animationClass); - }); - } else { - resetAnimation(target, _animationClass); - } - } - }); - } //Get available - - - if (window.IntersectionObserver && window.lazy() && window.lazyDatas) { - /** - * Set observer on dom elements - */ - var getLazyObject = function getLazyObject() { - document.body.querySelectorAll(window.lazy().parameters.join(',')).forEach(function (el) { - //Get default width and height - var sizeWidth = el.getAttribute('lazy-size-width'); - var sizeHeight = el.getAttribute('lazy-size-height'); //Set default width and height (removed after load) - - if (sizeWidth) el.style.minWidth = sizeWidth; - if (sizeHeight) el.style.minHeight = sizeHeight; //Start observing - - observer.observe(el); - }); - }; - - //Observer - var observer = new IntersectionObserver(callback, window.lazy().options); - window.lazyDatas["observer"] = observer; - document.addEventListener("DOMNodeInserted", getLazyObject); //document.addEventListener("change", getLazyObject); - - getLazyObject(); //Info - - displayInfo('version ' + window.lazy().version); - } else { - //Error - displayError('incompatible or verify window.lazy and window.lazyDatas integration'); - } - } - - if (window.NodeList && !NodeList.prototype.forEach) { - NodeList.prototype.forEach = Array.prototype.forEach; - } - - if (window.HTMLCollection && !HTMLCollection.prototype.forEach) { - HTMLCollection.prototype.forEach = Array.prototype.forEach; - } //Datas - - - window.lazyDatas = { - isIE: !!document.documentMode, - updateURL: "https://unpkg.com/lazy-attr@latest/dist/lazy-attr.min.js", - originalObserver: true - }; //Locked methods - //Global methods of lazy - - window.lazy = lazyGlobal; //Create IntersectionObserver for old version of navigator - - if (!window.IntersectionObserver) { - //Create a prototype of the IntersectionObserver polyfill - window.IntersectionObserver = IntersectionObserverPolyfill; - } //DOM loaded - - - window.addEventListener('load', lazyMain); - -}))); +!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e():"function"==typeof define&&define.amd?define(e):e()}(0,function(){"use strict";var t=["[lazy-reset]","[lazy-animation]","[lazy-animation-time]","[lazy-animation-delay]","[lazy-src]","[lazy-video]","[lazy-embed]","[lazy-animation-pointer]","[lazy-animation-function]","[lazy-animation-count]","[lazy-callback]","[lazy-srcset]","[lazy-poster]","[lazy-size-width]","[lazy-size-height]","[lazy-background]"],e=["zoomin","zoomout","opacity","slide-left","slide-right","slide-bottom","slide-top","corner-top-left","corner-top-right","corner-bottom-left","corner-bottom-right","shake","rotate","blur","flip","flip-up"];var n={isIntersecting:function(t){var e=window.innerWidth,n=window.innerHeight,i=t.getBoundingClientRect(),o=!1,a=!1,r=i.top>=0&&i.top<=n,s=i.bottom>=0&&i.bottom<=n,l=i.left>=0&&i.left<=e,u=i.right>=0&&i.right<=e;return(r||s)&&(a=!0),(l||u)&&(o=!0),!(!o||!a)},isIntersectingWithoutTransform:function(t){var e=window.innerWidth,n=window.innerHeight;function i(t){var i=t.offsetParent.getBoundingClientRect(),o=i.left+t.offsetLeft,a=i.top+t.offsetTop,r=a+t.offsetHeight,s=o+t.offsetWidth,l=!1,u=!1;if((a>=0&&a<=n||r>=0&&r<=n)&&(u=!0),(o>=0&&o<=e||s>=0&&s<=e)&&(l=!0),l&&u)return!0}var o=t.getAttribute("lazy-animation-pointer");return i(t)||null!=o&&i(document.querySelector(o))}};function i(t,e,n){var i=t.getAttribute("lazy-reset");if(i=null!=i&&void 0!=i){var o=t.getAttribute("lazy-animation");if(o&&e){var a=t.getAttribute("lazy-animation-pointer");a?document.querySelectorAll(a).forEach(function(t){t.classList.remove(o)}):t.classList.remove(o),t.removeAttribute("lazy-animation")}t.setAttribute("lazy-animation",e),n&&(window.lazy()._data.observer.unobserve(t),window.lazy()._data.observer.observe(t))}else console.warn("Lazy-attr : Cannot change animation of not lazy-reset element !")}function o(t,e){t.style.animationPlayState=e}function a(t,e){if(window.lazy()._data.originalObserver){var n=t.getAttribute("lazy-animation");n&&e.classList.remove(n)}t.style.minWidth=null,t.style.minHeight=null,o(e,null),t.style.animationDuration=null,t.style.animationDelay=null,t.style.animationIterationCount=null,t.style.animationTimingFunction=null}function r(t,e,n){var i=t.getAttribute("lazy-animation-time");i&&(e.style.animationDuration=i+"s");var o=t.getAttribute("lazy-animation-delay");o&&(e.style.animationDelay=o+"s");var r=t.getAttribute("lazy-animation-count");r&&(e.style.animationIterationCount=r);var s=t.getAttribute("lazy-animation-function");s&&(e.style.animationTimingFunction=s),e.classList.add(n),null===t.getAttribute("lazy-reset")?e.addEventListener("animationend",function(){a(t,e),window.lazy().parameters.forEach(function(e){e=e.replace(/(\[|\])/gi,""),t.removeAttribute(e)})}):e.addEventListener("animationend",function(){a(t,e)})}window.NodeList&&!NodeList.prototype.forEach&&(NodeList.prototype.forEach=Array.prototype.forEach),window.HTMLCollection&&!HTMLCollection.prototype.forEach&&(HTMLCollection.prototype.forEach=Array.prototype.forEach),window.lazyDatas={isIE:!!document.documentMode,originalObserver:!0},window.lazy=function(){return{_data:window.lazyDatas,changeAnimation:i,isIntersecting:n.isIntersecting,isIntersectingWithoutTransform:n.isIntersectingWithoutTransform,parameters:t,animations:e,options:{root:null,rootMargin:"0px",threshold:0},skeletons:["lazy-skeleton","lazy-skeleton-corner","lazy-skeleton-top"],version:"1.2.0"}},window.IntersectionObserver||(window.IntersectionObserver=function(t,e){this.callback=t,this.elements=[],this.options=e,window.lazyDatas.originalObserver=!1,this.initObs=function(){var e=this;function n(){var n=[];e.elements.forEach(function(t){var e=window.lazy().isIntersecting(t);n.push({target:t,isIntersecting:e})}),t(n,e)}this.listener=n;var i=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame;i?function t(){n(),i(t)}():setInterval(n,100)},this.observe=function(t){t&&this.elements.push(t)},this.unobserve=function(t){if(t){var e=this.elements.indexOf(t);-1!=e&&this.elements.splice(e,1)}},this.initObs()}),window.addEventListener("load",function(){function t(t){console.error("[ERROR] Lazy-attr : "+t)}if(window.IntersectionObserver&&window.lazy()&&window.lazyDatas){var e=function(){document.body.querySelectorAll(window.lazy().parameters.join(",")).forEach(function(t){var e=t.getAttribute("lazy-size-width"),i=t.getAttribute("lazy-size-height");e&&(t.style.minWidth=e),i&&(t.style.minHeight=i),n.observe(t)})},n=new IntersectionObserver(function(e,n){e.forEach(function(e){var i=e.target;if(e.isIntersecting){var a=[],s=i.getAttribute("lazy-animation"),l=i.getAttribute("lazy-animation-pointer");l?document.querySelectorAll(l).forEach(function(t){s&&(r(i,t,s),o(t,"paused")),a.push(t)}):(s&&(r(i,i,s),o(i,"paused")),a.push(i));var u=i.complete&&0!==i.naturalHeight,c=i.readyState>=0,d=function(){var t=i.getAttribute("lazy-callback");t&&window[t](i)},y=function(){a.forEach(function(t){!function(t){-1!=t.classList.toString().indexOf("lazyattr")&&(t.classList.remove("lazyattr"),t.classList.add("lazyloaded"))}(t),o(t,"running"),window.lazy().skeletons.forEach(function(e){return t.classList.remove(e)})})};if(u||c||!i.getAttribute("lazy-src")&&!i.getAttribute("lazy-srcset")&&!i.getAttribute("lazy-background"))d(),y();else if(i.getAttribute("lazy-background")){var f=i.getAttribute("lazy-background");if(f){var m=new Image;m.src=f,m.addEventListener("error",function(){y(),t("cannot load url "+i.src)}),m.addEventListener("load",function(){i.style.backgroundImage="url('"+m.src+"')",d(),y()})}}else i.addEventListener("error",function(){y(),t("cannot load url "+i.src)}),i.addEventListener("load",function(){d(),y()}),i.addEventListener("loadeddata",d);var z=i.getAttribute("lazy-video");z&&i.setAttribute("poster",z),i.preload="none";var b=i.getAttribute("lazy-embed");if(b)if(window.lazy()._data.isIE)i.setAttribute("src",b);else{var g=i.getAttribute("lazy-poster");g=g?"url('"+g+"')":"#000",i.setAttribute("srcdoc","▶")}var v=i.getAttribute("lazy-src");v&&(i.src=v);var w=i.getAttribute("lazy-srcset");w&&i.setAttribute("srcset",w),i.removeAttribute("lazy-embed"),i.removeAttribute("lazy-poster"),i.removeAttribute("lazy-video"),i.removeAttribute("lazy-src"),i.removeAttribute("lazy-srcset"),i.removeAttribute("lazy-background"),null===i.getAttribute("lazy-reset")&&n.unobserve(i)}else if(null!=i.getAttribute("lazy-reset")&&!window.lazy().isIntersectingWithoutTransform(i)){var h=function(t,e){e&&t.classList.remove(e)},p=i.getAttribute("lazy-animation"),A=i.getAttribute("lazy-animation-pointer");A&&p?document.querySelectorAll(A).forEach(function(t){h(t,p)}):h(i,p)}})},window.lazy().options);window.lazyDatas.observer=n,document.addEventListener("DOMNodeInserted",e),e(),i="version "+window.lazy().version,console.info("[INFO] Lazy-attr : "+i)}else t("Incompatible or verify window.lazy and window.lazyDatas integration");var i})}); diff --git a/dist/lazy-attr.min.js b/dist/lazy-attr.min.js deleted file mode 100644 index 52a254d..0000000 --- a/dist/lazy-attr.min.js +++ /dev/null @@ -1 +0,0 @@ -!function(t){"function"==typeof define&&define.amd?define(t):t()}((function(){"use strict";var t=["[lazy-reset]","[lazy-animation]","[lazy-animation-time]","[lazy-animation-delay]","[lazy-src]","[lazy-video]","[lazy-embed]","[lazy-animation-pointer]","[lazy-animation-function]","[lazy-animation-count]","[lazy-callback]","[lazy-srcset]","[lazy-poster]","[lazy-size-width]","[lazy-size-height]","[lazy-background]"],e=["zoomin","zoomout","opacity","slide-left","slide-right","slide-bottom","slide-top","corner-top-left","corner-top-right","corner-bottom-left","corner-bottom-right","shake","rotate","blur","flip","flip-up"];window.NodeList&&!NodeList.prototype.forEach&&(NodeList.prototype.forEach=Array.prototype.forEach),window.HTMLCollection&&!HTMLCollection.prototype.forEach&&(HTMLCollection.prototype.forEach=Array.prototype.forEach),window.lazyDatas={isIE:!!document.documentMode,updateURL:"https://unpkg.com/lazy-attr@latest/dist/lazy-attr.min.js",originalObserver:!0},window.lazy=function(){return{_data:window.lazyDatas,changeAnimation:function(t,e,n){var i=t.getAttribute("lazy-reset");if(i=null!=i&&null!=i){var o=t.getAttribute("lazy-animation");if(o&&e){var a=t.getAttribute("lazy-animation-pointer");a?document.querySelectorAll(a).forEach((function(t){t.classList.remove(o)})):t.classList.remove(o),t.removeAttribute("lazy-animation")}t.setAttribute("lazy-animation",e),n&&(window.lazy()._data.observer.unobserve(t),window.lazy()._data.observer.observe(t))}else console.warn("Lazy-attr : Cannot change animation of not lazy-reset element !")},getLastVersion:function(t){!function(t){var e=new XMLHttpRequest;e.onload=function(){var n=e.responseText,i="[#version]",o=n.substring(n.indexOf(i)+i.length);o=(o=o.substring(o.indexOf(i)+i.length)).substring(0,o.indexOf(i)),t({error:!1,version:o})},e.onerror=function(){t({error:!0,content:"Error while fetching"})},e.open("GET",window.lazyDatas.updateURL),e.send()}(t)},isIntersecting:function(t){var e=window.innerWidth,n=window.innerHeight,i=t.getBoundingClientRect(),o=!1,a=!1,r=i.top>=0&&i.top<=n,s=i.bottom>=0&&i.bottom<=n,l=i.left>=0&&i.left<=e,u=i.right>=0&&i.right<=e;return(r||s)&&(a=!0),(l||u)&&(o=!0),!(!o||!a)},isIntersectingWithoutTransform:function(t){var e=window.innerWidth,n=window.innerHeight;function i(t){var i=t.offsetParent.getBoundingClientRect(),o=i.left+t.offsetLeft,a=i.top+t.offsetTop,r=a+t.offsetHeight,s=o+t.offsetWidth,l=!1,u=!1;if((a>=0&&a<=n||r>=0&&r<=n)&&(u=!0),(o>=0&&o<=e||s>=0&&s<=e)&&(l=!0),l&&u)return!0}var o=t.getAttribute("lazy-animation-pointer");return i(t)||null!=o&&i(document.querySelector(o))},parameters:t,animations:e,options:{root:null,rootMargin:"0px",threshold:0},skeletons:["lazy-skeleton","lazy-skeleton-corner","lazy-skeleton-top"],version:"1.1.9",versionMatcher:"[#version]1.1.9[#version]"}},window.IntersectionObserver||(window.IntersectionObserver=function(t,e){this.callback=t,this.elements=[],this.options=e,window.lazyDatas.originalObserver=!1,this.initObs=function(){var e=this;function n(){var n=[];e.elements.forEach((function(t){var e=window.lazy().isIntersecting(t);n.push({target:t,isIntersecting:e})})),t(n,e)}this.listener=n;var i=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame;i?function t(){n(),i(t)}():setInterval(n,100)},this.observe=function(t){t&&this.elements.push(t)},this.unobserve=function(t){if(t){var e=this.elements.indexOf(t);-1!=e&&this.elements.splice(e,1)}},this.initObs()}),window.addEventListener("load",(function(){function t(t){console.error("[ERROR] Lazy-attr : "+t)}if(window.IntersectionObserver&&window.lazy()&&window.lazyDatas){var e=function(){document.body.querySelectorAll(window.lazy().parameters.join(",")).forEach((function(t){var e=t.getAttribute("lazy-size-width"),i=t.getAttribute("lazy-size-height");e&&(t.style.minWidth=e),i&&(t.style.minHeight=i),n.observe(t)}))},n=new IntersectionObserver((function(e,n){e.forEach((function(e){var i=e.target;if(e.isIntersecting){var o=function(t,e){t.style.animationPlayState=e,t.style.webkitAnimationPlayState=e},a=function(t,e){var n=null;if(window.lazy()._data.originalObserver){var i=t.getAttribute("lazy-animation");i&&e.classList.remove(i)}t.style.minWidth=n,t.style.minHeight=n,o(e,n),t.style.animationDuration=n,t.style.webkitAnimationDuration=n,t.style.animationDelay=n,t.style.webkitAnimationDelay=n,t.style.animationIterationCount=n,t.style.webkitAnimationIterationCount=n,t.style.animationTimingFunction=n,t.style.webkitAnimationTimingFunction=n},r=function(t,e){var n=i.getAttribute("lazy-animation-time");n&&(t.style.animationDuration=n+"s",t.style.webkitAnimationDuration=n+"s");var o=i.getAttribute("lazy-animation-delay");o&&(t.style.animationDelay=o+"s",t.style.webkitAnimationDelay=o+"s");var r=i.getAttribute("lazy-animation-count");r&&(t.style.animationIterationCount=r,t.style.webkitAnimationIterationCount=r);var s=i.getAttribute("lazy-animation-function");s&&(t.style.animationTimingFunction=s,t.style.webkitAnimationTimingFunction=s),t.classList.add(e),null===i.getAttribute("lazy-reset")?t.addEventListener("animationend",(function(){a(i,t),window.lazy().parameters.forEach((function(t){t=t.replace(/(\[|\])/gi,""),i.removeAttribute(t)}))})):t.addEventListener("animationend",(function(){a(i,t)}))},s=[],l=i.getAttribute("lazy-animation"),u=i.getAttribute("lazy-animation-pointer");u?document.querySelectorAll(u).forEach((function(t){l&&(r(t,l),o(t,"paused")),s.push(t)})):(l&&(r(i,l),o(i,"paused")),s.push(i));var c=i.complete&&0!==i.naturalHeight,d=i.readyState>=0,y=function(){var t=i.getAttribute("lazy-callback");t&&window[t](i)},m=function(){s.forEach((function(t){!function(t){-1!=t.classList.toString().indexOf("lazyattr")&&(t.classList.remove("lazyattr"),t.classList.add("lazyloaded"))}(t),o(t,"running"),window.lazy().skeletons.forEach((function(e){return t.classList.remove(e)}))}))};if(c||d||!i.getAttribute("lazy-src")&&!i.getAttribute("lazy-srcset")&&!i.getAttribute("lazy-background"))y(),m();else if(i.getAttribute("lazy-background")){var f=i.getAttribute("lazy-background");if(f){var b=new Image;b.src=f,b.addEventListener("error",(function(){m(),t("cannot load url "+i.src)})),b.addEventListener("load",(function(){i.style.backgroundImage="url('"+b.src+"')",y(),m()}))}}else i.addEventListener("error",(function(){m(),t("cannot load url "+i.src)})),i.addEventListener("load",(function(){y(),m()})),i.addEventListener("loadeddata",y);var g=i.getAttribute("lazy-video");g&&i.setAttribute("poster",g),i.preload="none";var z=i.getAttribute("lazy-embed");if(z)if(window.lazy()._data.isIE)i.setAttribute("src",z);else{var w=i.getAttribute("lazy-poster");w=w?"url('"+w+"')":"#000",i.setAttribute("srcdoc","▶")}var v=i.getAttribute("lazy-src");v&&(i.src=v);var h=i.getAttribute("lazy-srcset");h&&i.setAttribute("srcset",h),i.removeAttribute("lazy-embed"),i.removeAttribute("lazy-poster"),i.removeAttribute("lazy-video"),i.removeAttribute("lazy-src"),i.removeAttribute("lazy-srcset"),i.removeAttribute("lazy-background"),null===i.getAttribute("lazy-reset")&&n.unobserve(i)}else if(null!=i.getAttribute("lazy-reset")&&!window.lazy().isIntersectingWithoutTransform(i)){var p=function(t,e){e&&t.classList.remove(e)},A=i.getAttribute("lazy-animation"),L=i.getAttribute("lazy-animation-pointer");L&&A?document.querySelectorAll(L).forEach((function(t){p(t,A)})):p(i,A)}}))}),window.lazy().options);window.lazyDatas.observer=n,document.addEventListener("DOMNodeInserted",e),e(),i="version "+window.lazy().version,console.info("[INFO] Lazy-attr : "+i)}else t("incompatible or verify window.lazy and window.lazyDatas integration");var i}))})); diff --git a/index.html b/index.html index f03f407..af4df68 100644 --- a/index.html +++ b/index.html @@ -16,8 +16,8 @@ Lazy-attr || Lazy page and Animations - - + + @@ -31,7 +31,7 @@
-

❤️ Lazy-attr.js

+

❤️ Lazy-attr.js
@@ -58,12 +58,12 @@

❤️ Lazy-attr.js Example of an image which this lazy load and which when scrolling launches the animation even after having already performed once the animation. Just add these attributes in your img. This image will make an animation on his parent - by selecting him with the attribute "lazy-animation-pointer". - lazy-src="https://picsum.photos/300/300?random=1" lazy-srcset="..." lazy-animation="zoomin-animation" lazy-animation-pointer="#pointer" lazy-reset + by selecting him with the attribute "lazy"pointer". + lazy-src="https://picsum.photos/300/300?random=1" lazy-srcset="..." lazy-animation="zoomin" lazy-animation-pointer="#pointer" lazy-reset

- Random image + Random image
@@ -71,13 +71,13 @@

❤️ Lazy-attr.js
Random image + lazy-src="https://picsum.photos/300/300?random=2" lazy-animation="rotate" lazy-animation-time="3">

Example of an image which this lazy load and which when scrolling launches the animation but only once. Then it is no longer taken into account. The animation is infinite in linear mode here. - lazy-animation-function="linear" lazy-animation-count="infinite" lazy-src="https://picsum.photos/300/300?random=2" lazy-animation="rotate-animation" lazy-animation-time="3" + lazy-animation-function="linear" lazy-animation-count="infinite" lazy-src="https://picsum.photos/300/300?random=2" lazy-animation="rotate" lazy-animation-time="3"

@@ -88,7 +88,7 @@

❤️ Lazy-attr.js Example of an image which this lazy load and which during scrolling several times. Then it is no longer taken into account. I set a lazyloaded class to change the filter as grayscale. - lazy-src="https://picsum.photos/300/300?random=3" class="lazyattr" lazy-animation="opacity-animation" lazy-reset + lazy-src="https://picsum.photos/300/300?random=3" class="lazyattr" lazy-animation="opacity" lazy-reset .lazyloaded{ filter: grayscale(100%); @@ -98,7 +98,7 @@

❤️ Lazy-attr.js
Random image + lazy-animation="opacity" lazy-reset>
@@ -106,12 +106,12 @@

❤️ Lazy-attr.js
+ lazy-animation="shake">

Example of an embed video which launches during the click and which executes an animation during the scroll. - lazy-embed="https://www.youtube.com/embed/Y8Wp3dafaMQ?autoplay=0" lazy-animation="shake-animation" + lazy-embed="https://www.youtube.com/embed/Y8Wp3dafaMQ?autoplay=0" lazy-animation="shake" lazy-size-width="300px" lazy-size-height="300px"

@@ -124,13 +124,13 @@

❤️ Lazy-attr.js Example of an image which this lazy load and which during scrolling several times. Then it is no longer taken into account. This time, if the animation does not launch with a class but a style. - lazy-reset lazy-animation="from-right-animation" + lazy-reset lazy-animation="from-right" lazy-embed="https://www.youtube.com/embed/Y8Wp3dafaMQ?autoplay=0" lazy-poster="https://img.youtube.com/vi/Y8Wp3dafaMQ/hqdefault.jpg"

-
@@ -140,7 +140,7 @@

❤️ Lazy-attr.js
+ lazy-animation="flip" lazy-animation-pointer="#video-block" type="video/mp4" lazy-callback="loaded">

@@ -167,15 +167,15 @@

❤️ Lazy-attr.js
- Random image + Random image Random image + lazy-animation="zoomin" lazy-reset/> Random image + lazy-animation="zoomin" lazy-reset/> Random image + lazy-animation="zoomin" lazy-reset/> Random image + lazy-animation="zoomin" lazy-reset/>
@@ -214,27 +214,27 @@

❤️ Lazy-attr.js
Random image - Random image - Random image - Random image - Random image - Random image - Random image - Random image - Random image - Random image - Random image + lazy-animation="opacity" lazy-size-width="300px" lazy-size-height="300px"/> + Random image + Random image + Random image + Random image + Random image + Random image + Random image + Random image + Random image + Random image

@@ -266,20 +266,20 @@

❤️ Lazy-attr.js
+ lazy-animation="corner-top-right" lazy-animation-pointer="#card">

Card

You will find below the list of events. You can create your own animation just by replacing with a css class with an animation attribute. To add an animation just do: - lazy-animation="{animation name}-animation" + lazy-animation="{animation name}" @@ -288,7 +288,7 @@

❤️ Lazy-attr.js
-

By yoannchb ©

+

By yoannchb ©

@@ -313,8 +313,8 @@

❤️ Lazy-attr.js<\/script>'); - document.querySelector('#code-link').innerHTML = toCodeHtml('');; + document.querySelector('#code-script').innerHTML = toCodeHtml('