From a80190744770dc53aa663ef9673c9c27c100be08 Mon Sep 17 00:00:00 2001
From: Andrius Zidonis <andrius.zidonis@morningstar.com>
Date: Wed, 30 May 2018 09:30:59 +0300
Subject: [PATCH] resolve issue 21 add sticky bottom option

---
 example/app.vue | 28 ++++++++++++++++++++++++----
 src/index.js    | 49 +++++++++++++++++++++++++++++++++++++++----------
 2 files changed, 63 insertions(+), 14 deletions(-)

diff --git a/example/app.vue b/example/app.vue
index 329e637..5d7fe12 100644
--- a/example/app.vue
+++ b/example/app.vue
@@ -9,6 +9,7 @@ export default {
       stickyConfig: {
         zIndex: 80,
         stickyTop: 10,
+        stickyBottom: null,
         disabled: false
       },
       stickyConfigBackup: {},
@@ -36,9 +37,16 @@ export default {
       this.stickyConfig.disabled = true
     },
 
-    update() {
+    updateTop() {
       this.stickyConfig.disabled = false
       this.stickyConfig.stickyTop = Math.ceil((Math.random() * 300) % 100)
+      this.stickyConfig.stickyBottom = null
+    },
+
+    updateBottom() {
+      this.stickyConfig.disabled = false
+      this.stickyConfig.stickyBottom = Math.ceil((Math.random() * 300) % 100)
+      this.stickyConfig.stickyTop = null
     }
   }
 }
@@ -51,22 +59,34 @@ export default {
   <div v-sticky="{ zIndex: 100, stickyTop: 20, className: 'sticky-buttons' }">
     <div>
       <button @click="disable">disable sticky</button>
-      <button @click="update">update sticky top value</button>
+      <button @click="updateTop">update sticky top value</button>
+      <button @click="updateBottom">update sticky bottom value</button>      
     </div>
   </div>
 
   <hr>
 
-  <div v-sticky="stickyConfig">
+  <div v-show="stickyConfig.stickyTop >= 0" v-sticky="stickyConfig">
     <nav>
       <div>
-        {{ msg }}
+        {{ msg }} top
         <pre>{{ stickyConfig }}</pre>
       </div>
     </nav>
   </div>
 
   <p v-for="item in 100" :key="item">{{ item }}</p>
+
+  <div v-show="stickyConfig.stickyBottom >= 0" v-sticky="stickyConfig">
+    <nav>
+      <div>
+        {{ msg }} bottom
+        <pre>{{ stickyConfig }}</pre>
+      </div>
+    </nav>
+  </div>
+
+  <p v-for="item in 'abcde'" :key="item">{{ item }}</p>
 </div>
 </template>
 
diff --git a/src/index.js b/src/index.js
index 2acf5f9..376bd72 100644
--- a/src/index.js
+++ b/src/index.js
@@ -6,9 +6,10 @@ let supportCSSSticky
 const getBindingConfig = binding => {
   const params = binding.value || {}
   let stickyTop = params.stickyTop || 0
+  let stickyBottom = params.stickyBottom || 0
   let zIndex = params.zIndex || 1000
   let disabled = params.disabled
-  return { stickyTop, zIndex, disabled }
+  return { stickyTop, stickyBottom, zIndex, disabled }
 }
 
 const getInitialiConfig = el => {
@@ -31,7 +32,7 @@ export default {
   bind(el, binding) {
     bindingConfig = getBindingConfig(binding)
     initialConfig = getInitialiConfig(el)
-    const { disabled, stickyTop, zIndex } = bindingConfig
+    const { disabled, stickyTop, stickyBottom, zIndex } = bindingConfig
 
     if (disabled) return
 
@@ -45,11 +46,20 @@ export default {
     supportCSSSticky = ~elStyle.position.indexOf('sticky')
 
     if (supportCSSSticky) {
-      elStyle.top = `${stickyTop}px`
+      if (stickyTop >= 0) {
+        elStyle.top = `${stickyTop}px`
+      } else {
+        elStyle.bottom = `${stickyBottom}px`
+      }
+      
       elStyle.zIndex = zIndex
     } else {
       elStyle.position = ''
-      childStyle.cssText = `left: 0; right: 0; top: ${stickyTop}px; z-index: ${zIndex}; ${childStyle.cssText}`
+      if (stickyTop >= 0) {
+        childStyle.cssText = `left: 0; right: 0; top: ${stickyTop}px; bottom: auto; z-index: ${zIndex}; ${childStyle.cssText}`
+      } else {
+        childStyle.cssText = `left: 0; right: 0; top: auto; bottom: ${stickyBottom}px; z-index: ${zIndex}; ${childStyle.cssText}`
+      }
     }
 
     let active = false
@@ -72,10 +82,18 @@ export default {
     }
 
     listenAction = throttle(() => {
-      const offsetTop = el.getBoundingClientRect().top
-      if (offsetTop <= stickyTop) {
-        return sticky()
+      if (stickyTop >= 0) {
+        const offsetTop = el.getBoundingClientRect().top
+        if (offsetTop <= stickyTop) {
+          return sticky()
+        }
+      } else {
+        const offsetBottom = el.getBoundingClientRect().bottom        
+        if (offsetBottom >= window.innerHeight - stickyBottom) {
+          return sticky()
+        }
       }
+      
       reset()
     })
 
@@ -86,14 +104,24 @@ export default {
 
   update(el, binding) {
     bindingConfig = getBindingConfig(binding)
-    const { stickyTop, zIndex } = bindingConfig
+    const { stickyTop, stickyBottom, zIndex } = bindingConfig
 
     let childStyle = el.firstElementChild.style
     if (supportCSSSticky) {
-      el.style.top = `${stickyTop}px`
+      if (stickyTop >= 0) {
+        el.style.top = `${stickyTop}px`
+      } else {
+        el.style.bottom = `${stickyBottom}px`
+      }
       el.style.zIndex = zIndex
     } else {
-      childStyle.top = `${stickyTop}px`
+      if (stickyTop >= 0) {
+        childStyle.top = `${stickyTop}px`
+        childStyle.bottom = ''
+      } else {
+        childStyle.bottom = `${stickyBottom}px`
+        childStyle.top = ''
+      }
       childStyle.zIndex = zIndex
     }
 
@@ -103,6 +131,7 @@ export default {
       } else {
         childStyle.position = ''
         childStyle.top = ''
+        childStyle.bottom = ''
         childStyle.zIndex = initialConfig.zIndex
         unwatch()
       }