diff --git a/README.md b/README.md index e5e39a0..2f70c18 100755 --- a/README.md +++ b/README.md @@ -11,7 +11,7 @@ npm i --save-dev vue-scroll-show ```js import VueScrollShow from 'vue-scroll-show' -Vue.use(VueScrollShow) +Vue.use(VueScrollShow, defaultOptions) ``` #### SSR (Nuxt.js) @@ -19,7 +19,7 @@ Vue.use(VueScrollShow) ```js import VueScrollShow from 'vue-scroll-show/dist/ssr.index' -Vue.use(VueScrollShow) +Vue.use(VueScrollShow, defaultOptions) ``` ## Usage @@ -43,7 +43,9 @@ or with options | Option | Description | | ------ | ------ | +| noActive | Add classes if element not in display area | | active | Add classes if element in display area | | delay | Timeout to add classes to element | | offset | Screen offset to add class to element | -| parentId | Id parent element for starting add classes to directive elements | \ No newline at end of file +| parentId | Id parent element for starting add classes to directive elements | +| alternate | If remove active class and add noActive class if element not in display area | \ No newline at end of file diff --git a/dist/index.js b/dist/index.js index 337ef54..e62b878 100644 --- a/dist/index.js +++ b/dist/index.js @@ -1 +1 @@ -!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports["vue-scroll-show"]=t():e["vue-scroll-show"]=t()}(window,function(){return function(e){var t={};function n(o){if(t[o])return t[o].exports;var r=t[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=e,n.c=t,n.d=function(e,t,o){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:o})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)n.d(o,r,function(t){return e[t]}.bind(null,r));return o},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="/dist/",n(n.s=0)}([function(e,t,n){"use strict";n.r(t);var o={inViewScroll(e,t){const n=e.getBoundingClientRect();return!(n.bottom<0||n.right<0||n.left>window.innerWidth||n.top>window.innerHeight-t.offset)},bind(e,t){let n={active:"active",delay:0,offset:0,parentId:null};n=Object.assign(n,t.value),e.classList.add("no-active"),e.$onScroll=(()=>{const o=n.parentId?((e,t)=>{let n=e;for(;n;){if(null==n||null==n.id){n=e;break}if(n.id===t)break;n=n.parentNode}return n})(e,n.parentId):e;t.def.inViewScroll(o,n)&&(setTimeout(()=>{n.active.split(" ").forEach(t=>{e.classList.add(t)}),e.classList.remove("no-active")},n.delay),t.def.unbind(e,t))}),document.addEventListener("scroll",e.$onScroll)},inserted(e,t){e.$onScroll()},unbind(e,t){document.removeEventListener("scroll",e.$onScroll),delete e.$onScroll}};const r={install(e,t){e.directive("scroll-show",o)}};t.default=r,"undefined"!=typeof window&&window.Vue&&window.Vue.use(r)}])}); \ No newline at end of file +!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports["vue-scroll-show"]=t():e["vue-scroll-show"]=t()}(window,function(){return function(e){var t={};function n(o){if(t[o])return t[o].exports;var r=t[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=e,n.c=t,n.d=function(e,t,o){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:o})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)n.d(o,r,function(t){return e[t]}.bind(null,r));return o},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="/dist/",n(n.s=0)}([function(e,t,n){"use strict";n.r(t);const o={noActive:"no-active",active:"active",delay:0,offset:0,parentId:null,alternate:!1};var r={defaultOptions:o,inViewScroll(e,t){const n=e.getBoundingClientRect();return!(n.bottom<0||n.right<0||n.left>window.innerWidth||n.top>window.innerHeight-t.offset)},bind(e,t){let n=Object.assign({},o);n=Object.assign(n,t.value),e.classList.add(n.noActive),e.$onScroll=(()=>{const o=n.parentId?((e,t)=>{let n=e;for(;n;){if(null==n||null==n.id){n=e;break}if(n.id===t)break;n=n.parentNode}return n})(e,n.parentId):e;t.def.inViewScroll(o,n)?(setTimeout(()=>{n.active.trim().split(" ").filter(e=>e).forEach(t=>{e.classList.add(t)}),e.classList.remove(n.noActive)},n.delay),n.alternate||t.def.unbind(e,t)):n.alternate&&!e.classList.contains(n.noActive)&&(n.active.trim().split(" ").filter(e=>e).forEach(t=>{e.classList.remove(t)}),e.classList.add(n.noActive))}),document.addEventListener("scroll",e.$onScroll)},inserted(e,t){e.$onScroll()},unbind(e,t){document.removeEventListener("scroll",e.$onScroll),delete e.$onScroll}};const i={install(e,t={}){Object.assign(r.defaultOptions,t),e.directive("scroll-show",r)}};t.default=i,"undefined"!=typeof window&&window.Vue&&window.Vue.use(i)}])}); \ No newline at end of file diff --git a/dist/ssr.index.js b/dist/ssr.index.js index 20245a3..49524b5 100644 --- a/dist/ssr.index.js +++ b/dist/ssr.index.js @@ -1 +1 @@ -!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports["vue-scroll-show"]=t():e["vue-scroll-show"]=t()}(global,function(){return function(e){var t={};function n(o){if(t[o])return t[o].exports;var r=t[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=e,n.c=t,n.d=function(e,t,o){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:o})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)n.d(o,r,function(t){return e[t]}.bind(null,r));return o},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="/dist/",n(n.s=0)}([function(e,t,n){"use strict";n.r(t);var o={inViewScroll(e,t){const n=e.getBoundingClientRect();return!(n.bottom<0||n.right<0||n.left>window.innerWidth||n.top>window.innerHeight-t.offset)},bind(e,t){let n={active:"active",delay:0,offset:0,parentId:null};n=Object.assign(n,t.value),e.classList.add("no-active"),e.$onScroll=(()=>{const o=n.parentId?((e,t)=>{let n=e;for(;n;){if(null==n||null==n.id){n=e;break}if(n.id===t)break;n=n.parentNode}return n})(e,n.parentId):e;t.def.inViewScroll(o,n)&&(setTimeout(()=>{n.active.split(" ").forEach(t=>{e.classList.add(t)}),e.classList.remove("no-active")},n.delay),t.def.unbind(e,t))}),document.addEventListener("scroll",e.$onScroll)},inserted(e,t){e.$onScroll()},unbind(e,t){document.removeEventListener("scroll",e.$onScroll),delete e.$onScroll}};const r={install(e,t){e.directive("scroll-show",o)}};t.default=r,"undefined"!=typeof window&&window.Vue&&window.Vue.use(r)}])}); \ No newline at end of file +!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports["vue-scroll-show"]=t():e["vue-scroll-show"]=t()}(global,function(){return function(e){var t={};function n(o){if(t[o])return t[o].exports;var r=t[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=e,n.c=t,n.d=function(e,t,o){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:o})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)n.d(o,r,function(t){return e[t]}.bind(null,r));return o},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="/dist/",n(n.s=0)}([function(e,t,n){"use strict";n.r(t);const o={noActive:"no-active",active:"active",delay:0,offset:0,parentId:null,alternate:!1};var r={defaultOptions:o,inViewScroll(e,t){const n=e.getBoundingClientRect();return!(n.bottom<0||n.right<0||n.left>window.innerWidth||n.top>window.innerHeight-t.offset)},bind(e,t){let n=Object.assign({},o);n=Object.assign(n,t.value),e.classList.add(n.noActive),e.$onScroll=(()=>{const o=n.parentId?((e,t)=>{let n=e;for(;n;){if(null==n||null==n.id){n=e;break}if(n.id===t)break;n=n.parentNode}return n})(e,n.parentId):e;t.def.inViewScroll(o,n)?(setTimeout(()=>{n.active.trim().split(" ").filter(e=>e).forEach(t=>{e.classList.add(t)}),e.classList.remove(n.noActive)},n.delay),n.alternate||t.def.unbind(e,t)):n.alternate&&!e.classList.contains(n.noActive)&&(n.active.trim().split(" ").filter(e=>e).forEach(t=>{e.classList.remove(t)}),e.classList.add(n.noActive))}),document.addEventListener("scroll",e.$onScroll)},inserted(e,t){e.$onScroll()},unbind(e,t){document.removeEventListener("scroll",e.$onScroll),delete e.$onScroll}};const i={install(e,t={}){Object.assign(r.defaultOptions,t),e.directive("scroll-show",r)}};t.default=i,"undefined"!=typeof window&&window.Vue&&window.Vue.use(i)}])}); \ No newline at end of file diff --git a/docs/index.html b/docs/index.html index 768c03a..8e531f2 100644 --- a/docs/index.html +++ b/docs/index.html @@ -54,14 +54,14 @@