UiSlider: fix slider in initially hidden components like tabs an… (Jo…

…sephusPaye#489)
mcmillenb · Mar 8, 2020 · 1bbee38 · 1bbee38
1 parent 7422331
commit 1bbee38
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 30 deletions.
diff --git a/.gitignore b/.gitignore
@@ -3,6 +3,7 @@ _deprecated
 _older
 _reminder
 ._reminder
+,idea
 /node_modules
 Thumbs.db
 npm-debug.log
diff --git a/docs-src/pages/UiSlider.vue b/docs-src/pages/UiSlider.vue
@@ -38,7 +38,15 @@
             <h4 class="page__demo-title">Disabled</h4>
             <ui-slider icon="volume_up" v-model="slider6" disabled></ui-slider>
 
-            <ui-button @click="resetSliders">Reset Sliders</ui-button>
+            <h4 class="page__demo-title">In a modal</h4>
+            <ui-button @click="openModal">Open modal</ui-button>
+            <ui-modal ref="modal" title="Slider in a modal">
+                <ui-slider v-model="slider7"></ui-slider>
+            </ui-modal>
+
+            <div class="reset-sliders">
+                <ui-button @click="resetSliders">Reset Sliders</ui-button>
+            </div>
         </div>
 
         <h3 class="page__section-title">API</h3>
@@ -270,6 +278,7 @@ import UiButton from 'src/UiButton.vue';
 import UiSlider from 'src/UiSlider.vue';
 import UiTab from 'src/UiTab.vue';
 import UiTabs from 'src/UiTabs.vue';
+import UiModal from 'src/UiModal.vue';
 
 export default {
     data() {
@@ -279,7 +288,8 @@ export default {
             slider3: 60,
             slider4: 8,
             slider5: 40,
-            slider6: 75
+            slider6: 75,
+            slider7: 6
         };
     },
 
@@ -290,10 +300,16 @@ export default {
             this.slider3 = 60;
             this.slider4 = 7;
             this.slider5 = 40;
+            this.slider6 = 75;
+            this.slider7 = 6;
+        },
+        openModal() {
+            this.$refs.modal.open();
         }
     },
 
     components: {
+        UiModal,
         UiButton,
         UiSlider,
         UiTab,
@@ -314,8 +330,10 @@ export default {
         margin-bottom: rem(8px);
     }
 
-    .ui-button {
-        margin-top: rem(24px);
+    .reset-sliders {
+        .ui-button {
+            margin-top: rem(36px);
+        }
     }
 }
 </style>
diff --git a/src/UiSlider.vue b/src/UiSlider.vue
@@ -67,7 +67,6 @@
 import UiIcon from './UiIcon.vue';
 
 import classlist from './helpers/classlist';
-import RespondsToWindowResize from './mixins/RespondsToWindowResize.js';
 
 export default {
     name: 'ui-slider',
@@ -112,9 +111,6 @@ export default {
             initialValue: this.value,
             isActive: false,
             isDragging: false,
-            thumbSize: 0,
-            trackLength: 0,
-            trackOffset: 0,
             localValue: this.value
         };
     },
@@ -140,9 +136,7 @@ export default {
 
         thumbStyle() {
             return {
-                transform: 'translateX(' + (
-                    (this.relativeValue(this.localValue) * this.trackLength) - (this.thumbSize / 2)
-                ) + 'px)'
+                left: this.relativeValue(this.localValue) * 100 + '%'
             };
         },
 
@@ -263,23 +257,10 @@ export default {
             };
         },
 
-        refreshSize() {
-            this.thumbSize = this.$refs.thumb.offsetWidth;
-            this.trackLength = this.$refs.track.offsetWidth;
-            this.trackOffset = this.getTrackOffset(this.$refs.track);
-        },
-
         initializeSlider() {
             document.addEventListener('touchend', this.onDragStop);
             document.addEventListener('mouseup', this.onDragStop);
             document.addEventListener('click', this.onExternalClick);
-
-            this.$on('window-resize', () => {
-                this.refreshSize();
-                this.isDragging = false;
-            });
-
-            this.refreshSize();
             this.initializeDrag();
         },
 
@@ -316,9 +297,13 @@ export default {
             this.dragUpdate(e);
         },
 
+        getTrackLength() {
+            return this.$refs.track.offsetWidth;
+        },
+
         dragUpdate(e) {
             const position = e.touches ? e.touches[0].pageX : e.pageX;
-            const relativeValue = (position - this.trackOffset) / this.trackLength;
+            const relativeValue = (position - this.getTrackOffset()) / this.getTrackLength();
             const value = this.getEdge(
                 this.moderatedMin + (relativeValue * (this.moderatedMax - this.moderatedMin))
             );
@@ -379,11 +364,7 @@ export default {
 
     components: {
         UiIcon
-    },
-
-    mixins: [
-        RespondsToWindowResize
-    ]
+    }
 };
 </script>
 
@@ -520,6 +501,7 @@ $ui-slider-marker-size                      : rem(36px);
     position: relative;
     width: $ui-track-thumb-size;
     z-index: 1;
+    margin-left: -$ui-track-thumb-size / 2;
 
     // Focus ring
     &::before {