chore(refactor): renaming and reorg

SSENSE · Dec 5, 2016 · 07103c8 · 07103c8
1 parent beac969
commit 07103c8
Show file tree

Hide file tree

Showing 6 changed files with 77 additions and 61 deletions.
diff --git a/dist/ScrollMagnetContainer.vue b/dist/ScrollMagnetContainer.vue
@@ -19,7 +19,7 @@
       };
     },
     props: {
-      targetElement: {
+      boundsElementSelector: {
         type: String,
         default: '',
         required: false,
@@ -32,16 +32,17 @@
     mounted() {
       // Assign a target element to the container. This element will be used as a reference
       // for the height of the scrollable area.
-      if (!this.targetElement) {
+      if (!this.boundsElementSelector) {
         // If no prop is provided, use the parent element of <scroll-magnet-container>
         this.target = this.$el.parentElement;
       } else {
         // Find the element by its selector and assign it as the target
-        const $el = document.querySelector(this.targetElement);
+        const $el = document.querySelector(this.boundsElementSelector);
         if ($el) {
           this.target = $el;
         }
       }
+
       this.getElementPosition();
       this.attachMutationObserver();
     },
@@ -58,7 +59,8 @@
       attachScroll() {
         if (typeof window !== 'undefined') {
           window.addEventListener('scroll', () => {
-            this.recalcAttributes();
+            this.getScrollPosition();
+            this.getElementPosition();
           });
         }
       },
@@ -76,7 +78,8 @@
       attachResize() {
         if (typeof window !== 'undefined') {
           window.addEventListener('resize', () => {
-            this.recalcAttributes();
+            this.getScrollPosition();
+            this.getElementPosition({ recalcWidth: true, recalcHeight: true });
           });
         }
       },
@@ -103,7 +106,7 @@
 
             this.mutationObserver = new MutationObserver(() => {
               // When the reference element changes, we must recompute the scroll attributes
-              this.getElementPosition({ recalcHeight: true });
+              this.getElementPosition({ recalcWidth: true, recalcHeight: true });
 
               // The child magnet item listens for changes to this.scrollTop in this component
               // to update itself. this.scrollTop is manually adjusted so that the child updates
@@ -127,26 +130,27 @@
       },
       /**
        * Get the container's dimensions and offset and update data attributes
+       * @param  {object} options Configuration object for options
        */
       getElementPosition(options) {
+        const recalcWidth = (options && options.recalcWidth) || false;
         const recalcHeight = (options && options.recalcHeight) || false;
-        const viewportOffset = this.$el.getBoundingClientRect();
-        const scrollY = this.getScrollY();
 
-        this.offsetTop = viewportOffset.top + scrollY;
-        this.width = this.$el.clientWidth;
+        this.offsetTop = this.$el.getBoundingClientRect().top + this.getScrollY();
+
+        if (!this.width > 0 || recalcWidth) {
+          this.width = (this.$el && this.$el.clientWidth) || 0;
+        }
 
         if (!this.height > 0 || recalcHeight) {
           this.height = (this.target && this.target.clientHeight) || 0;
         }
       },
       /**
-       * Recalculate the scroll container's attributes such as current
-       * scroll position, offsetTop, and height
+       * Recalculate the scroll container's position
        */
-      recalcAttributes() {
+      getScrollPosition() {
         this.scrollTop = this.getScrollY();
-        this.getElementPosition({ recalcHeight: true });
         this.offsetTop = this.$el.getBoundingClientRect().top + this.getScrollY();
       },
       /**

diff --git a/dist/ScrollMagnetItem.vue b/dist/ScrollMagnetItem.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     class="scroll-magnet-item"
-    v-bind:style="`width: ${width}px; top: ${top}`"
+    v-bind:style="`width: ${width > 0 && width}px; top: ${top}`"
     v-bind:class="{ 'is-scrolling': isScrolling, 'is-bottomed': isBottomed }">
     <slot></slot>
   </div>
@@ -29,11 +29,6 @@
     },
     created() {
       this.nearestContainer = this.getNearestMagnetContainer();
-
-      // Listen on changes to the scroll position from the parent and update the magnet's status
-      this.$watch('nearestContainer.scrollTop', () => {
-        this.setMagnetStatus(this.nearestContainer);
-      });
     },
     mounted() {
       // Get and set initial state dependend on DOM attributes
@@ -43,6 +38,16 @@
         this.setMagnetStatus(this.nearestContainer);
         this.setMagnetWidth();
       });
+
+      // Listen on changes to the parent container's width and update the item's width accordingly
+      this.$watch('nearestContainer.width', () => {
+        this.width = this.nearestContainer.width;
+      });
+
+      // Listen on changes to the scroll position from the parent and update the magnet's status
+      this.$watch('nearestContainer.scrollTop', () => {
+        this.setMagnetStatus(this.nearestContainer);
+      });
     },
     methods: {
       /**
@@ -83,15 +88,13 @@
        */
       setMagnetStatus(nearestContainer) {
         this.setMagnetHeight(); // Recheck for any changes in magnet height
-        this.scrollDist = (nearestContainer.scrollTop + this.height);
-        this.scrollEnd = (nearestContainer.offsetTop + (nearestContainer.height - this.offsetTopPad));
-        this.isBottomed = (this.scrollDist >= this.scrollEnd);
-        this.top = (this.isBottomed ? 'initial' : `${this.offsetTopPad}px`);
-        this.isWithinHeight = (this.scrollDist < this.scrollEnd);
-        this.isScrolling = (
-          (nearestContainer.scrollTop + this.offsetTopPad) >= nearestContainer.offsetTop
-          && this.isWithinHeight
-        );
+
+        this.scrollDist = (nearestContainer.scrollTop + this.height); // The distance scrolled within the bounds (Number)
+        this.scrollEnd = (nearestContainer.offsetTop + (nearestContainer.height - this.offsetTopPad)); // The maximum scrollable distance (Number)
+        this.isWithinHeight = (this.scrollDist < this.scrollEnd); // Is the item still within the bounds? (Boolean)
+        this.isScrolling = ((nearestContainer.scrollTop + this.offsetTopPad) >= nearestContainer.offsetTop && this.isWithinHeight); // Is the item currently scrolling? (Boolean)
+        this.isBottomed = (this.scrollDist >= this.scrollEnd); // Should the item stick to the bottom of the bounds? (Boolean)
+        this.top = (this.isBottomed ? 'initial' : `${this.offsetTopPad}px`); // Item's CSS top value (Number)
       },
     },
   };
@@ -100,6 +103,7 @@
 <style scoped>
   .scroll-magnet-item {
     position: relative;
+    width: 100%;
   }
 
   .is-scrolling {