Rename properties

jperez2511 · Jul 8, 2018 · 16c9fd6 · 16c9fd6
1 parent 9614301
commit 16c9fd6
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 21 deletions.
diff --git a/src/components/ScrollingDocument.vue b/src/components/ScrollingDocument.vue
@@ -7,7 +7,7 @@
     <ScrollingPage
       v-for="page in pages"
       :key="page.pageNumber"
-      v-bind="{page, scrollHeight, scrollTop, focusedPage, enablePageJump}"
+      v-bind="{page, clientHeight, scrollTop, focusedPage, enablePageJump}"
       @page-jump="onPageJump"
       >
       <div
@@ -57,7 +57,7 @@ export default {
     return {
       focusedPage: undefined,
       scrollTop: 0,
-      scrollHeight: 0,
+      clientHeight: 0,
     };
   },
 
@@ -79,7 +79,7 @@ export default {
     updateScrollBounds() {
       const {scrollTop, clientHeight} = this.$el;
       this.scrollTop = scrollTop;
-      this.scrollHeight = clientHeight;
+      this.clientHeight = clientHeight;
     },
   },
 

diff --git a/src/components/ScrollingPage.vue b/src/components/ScrollingPage.vue
@@ -15,7 +15,7 @@ export default {
       type: Number,
       default: 0,
     },
-    scrollHeight: {
+    clientHeight: {
       type: Number,
       default: 0
     },
@@ -27,8 +27,8 @@ export default {
 
   data() {
     return {
-      top: 0,
-      height: 0,
+      elementTop: 0,
+      elementHeight: 0,
     };
   },
 
@@ -38,50 +38,50 @@ export default {
     },
 
     isElementFocused() {
-      const {top, bottom, height, scrollTop, scrollHeight} = this;
-      if (!height) return;
+      const {elementTop, bottom, elementHeight, scrollTop, clientHeight} = this;
+      if (!elementHeight) return;
 
-      const halfHeight = (height / 2);
-      const halfScreen = (scrollHeight / 2);
-      const delta = height >= halfScreen ? halfScreen : halfHeight;
+      const halfHeight = (elementHeight / 2);
+      const halfScreen = (clientHeight / 2);
+      const delta = elementHeight >= halfScreen ? halfScreen : halfHeight;
       const threshold = scrollTop + delta;
 
-      return top < threshold && bottom >= threshold;
+      return elementTop < threshold && bottom >= threshold;
     },
 
     isElementVisible() {
-      const {top, bottom, height, scrollTop, scrollBottom} = this;
-      if (!height) return;
+      const {elementTop, bottom, elementHeight, scrollTop, scrollBottom} = this;
+      if (!elementHeight) return;
 
-      return top < scrollBottom && bottom > scrollTop;
+      return elementTop < scrollBottom && bottom > scrollTop;
     },
 
     bottom() {
-      return this.top + this.height;
+      return this.elementTop + this.elementHeight;
     },
 
     scrollBottom() {
-      return this.scrollTop + this.scrollHeight;
+      return this.scrollTop + this.clientHeight;
     },
   },
 
   methods: {
     jumpToPage() {
       if (!this.enablePageJump || this.isElementFocused || !this.isPageFocused) return;
 
-      this.$emit('page-jump', this.top);
+      this.$emit('page-jump', this.elementTop);
     },
 
     updateElementBounds() {
       const {offsetTop, offsetHeight} = this.$el;
-      this.top = offsetTop;
-      this.height = offsetHeight;
+      this.elementTop = offsetTop;
+      this.elementHeight = offsetHeight;
     },
   },
 
   watch: {
     scrollTop: 'updateElementBounds',
-    scrollHeight: 'updateElementBounds',
+    clientHeight: 'updateElementBounds',
     isPageFocused: 'jumpToPage',
   },