refactor: Simplify detecting disabled state

radial-color-picker · Dec 1, 2018 · b83d1f7 · b83d1f7
1 parent 84a8aa3
commit b83d1f7
Showing 1 changed file with 5 additions and 12 deletions.
diff --git a/src/ColorPicker.vue b/src/ColorPicker.vue
@@ -10,7 +10,7 @@
         </div>
 
         <div class="rcp__rotator"
-             :style="{ 'pointer-events': isDisabled ? 'none' : null }"
+             :style="{ 'pointer-events': isPressed || !isKnobIn ? 'none' : null }"
              @dblclick.self="rotateToMouse"
              ref="rotator">
             <div class="rcp__knob" :class="isKnobIn ? 'in' : 'out'" @transitionend="hidePalette"></div>
@@ -57,7 +57,6 @@
                 isPressed: false,
                 isRippling: false,
                 isDragging: false,
-                isDisabled: false,
             }
         },
         computed: {
@@ -98,7 +97,7 @@
         },
         methods: {
             onScroll(ev) {
-                if (this.isDisabled)
+                if (this.isPressed || !this.isKnobIn)
                     return;
 
                 ev.preventDefault();
@@ -112,7 +111,7 @@
                 this.updateColor(rotator.angle);
             },
             rotate(ev, isIncrementing) {
-                if (this.isDisabled)
+                if (this.isPressed || !this.isKnobIn)
                     return;
 
                 let multiplier = isIncrementing ? 1 : -1;
@@ -135,7 +134,7 @@
                 });
             },
             rotateToMouse(ev) {
-                if (this.isDisabled)
+                if (this.isPressed || !this.isKnobIn)
                     return;
 
                 rotator.setAngleFromEvent(ev);
@@ -146,17 +145,13 @@
                 if (this.isPaletteIn && this.isKnobIn) {
                     this.$emit('select', this.value);
                     this.isRippling = true;
-
-                    if (this.variant !== 'persistent')
-                        this.isDisabled = true;
                 } else {
                     this.isPaletteIn = true;
                 }
             },
             togglePicker() {
                 if (this.variant !== 'persistent') {
                     if (this.isKnobIn) {
-                        this.isDisabled = true;
                         this.isKnobIn = false;
                     } else {
                         this.isKnobIn = true;
@@ -168,9 +163,7 @@
                 this.isPressed = false;
             },
             hidePalette() {
-                if (this.isKnobIn) {
-                    this.isDisabled = false;
-                } else {
+                if (!this.isKnobIn) {
                     this.isPaletteIn = false;
                 }
             },