add options.alternate and options.noActive and support global default options

README.md

@@ -11,15 +11,15 @@ npm i --save-dev vue-scroll-show
 ```js
 import VueScrollShow from 'vue-scroll-show'
 
-Vue.use(VueScrollShow)
+Vue.use(VueScrollShow, defaultOptions)
 ```
 
 #### SSR (Nuxt.js)
 
 ```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 |
+| 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 |

docs/index.html

@@ -54,14 +54,14 @@ <h3>Scroll down</h3>
     <div class='block'>
       <div id='event'>
         <div class='footer'>
-          <span v-scroll-show='{active: "show fadeIn", delay: 500, parentId: "event"}'>Show one from selector</span>
-          <span v-scroll-show='{active: "show fadeIn", delay: 1000, parentId: "event"}'>Show two from selector</span>
+          <span v-scroll-show='{active: "show fadeIn", delay: 500, parentId: "event", alternate: true}'>Show one from selector</span>
+          <span v-scroll-show='{active: "show fadeIn", delay: 1000, parentId: "event", alternate: true}'>Show two from selector</span>
         </div>
       </div>
-      <span v-scroll-show='{active: "show fadeIn"}'>Show three without selector</span>
-      <span v-scroll-show='{active: "show fadeIn", offset: 500}'>Show four with offset 500</span>
+      <span v-scroll-show='{active: "show fadeIn", alternate: true}'>Show three without selector</span>
+      <span v-scroll-show='{active: "show fadeIn", offset: 500, alternate: true}'>Show four with offset 500</span>
     </div>
-    
+
   </div>
 
   <script>
@@ -71,7 +71,7 @@ <h3>Scroll down</h3>
         test: false
       }),
       methods: {
-        
+
       },
       mounted () {
         setTimeout(() => {

src/directive.js

@@ -13,7 +13,18 @@ const getParentById = (el, id) => {
   return parent
 }
 
+const defaultOptions = {
+  noActive: 'no-active',
+  active: 'active',
+  delay: 0,
+  offset: 0,
+  parentId: null,
+  alternate: false
+}
+
 export default {
+  defaultOptions,
+
   // Check item in the display area
   inViewScroll (el, options) {
     const rect = el.getBoundingClientRect()
@@ -22,34 +33,37 @@ export default {
 
   bind (el, binding) {
     // Default schema options
-    let options = {
-      active: 'active',
-      delay: 0,
-      offset: 0,
-      parentId: null
-    }
+    let options = Object.assign({}, defaultOptions)
 
     // Assign default options and element options
     options = Object.assign(options, binding.value)
-    
+
     // Add no-active class to element
-    el.classList.add('no-active')
+    el.classList.add(options.noActive)
 
     el.$onScroll = () => {
       const targetElement = options.parentId ? getParentById(el, options.parentId) : el
 
       if (binding.def.inViewScroll(targetElement, options)) {
         // Delay add class
         setTimeout(() => {
-          const classList = options.active.split(' ')
+          const classList = options.active.trim().split(' ').filter(item => item)
           classList.forEach(val => {
             el.classList.add(val)
           })
-          el.classList.remove('no-active')
+          el.classList.remove(options.noActive)
         }, options.delay)
 
         // Unbinding event
-        binding.def.unbind(el, binding)
+        if (!options.alternate) {
+          binding.def.unbind(el, binding)
+        }
+      } else if (options.alternate && !el.classList.contains(options.noActive)) {
+        const classList = options.active.trim().split(' ').filter(item => item)
+        classList.forEach(val => {
+          el.classList.remove(val)
+        })
+        el.classList.add(options.noActive)
       }
     }
     document.addEventListener('scroll', el.$onScroll)

src/index.js

@@ -1,7 +1,8 @@
 import Directive from './directive.js'
 
 const VueScrollShow = {
-  install (Vue, options) {
+  install (Vue, options = {}) {
+    Object.assign(Directive.defaultOptions, options)
     Vue.directive('scroll-show', Directive)
   }
 }