v1.9.0 actually implement hover uiModifer

cloukit · Mar 27, 2018 · a48fd77 · a48fd77
1 parent 2340289
commit a48fd77
Show file tree

Hide file tree

Showing 3 changed files with 88 additions and 7 deletions.
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "COMMENT": "THIS FILE WILL BE PARSED DURING BUILD. IT IS NOT THE ACTUAL PACKAGE FILE PUSHE TO NPMJS!",
   "name": "@cloukit/toggle",
   "moduleId": "toggle",
-  "version": "1.8.0",
+  "version": "1.9.0",
   "description": "A toggle component that can be used in an Angular Reactive Form for a boolean.",
   "license": "MIT",
   "author": "codelcou.io",

diff --git a/src/components/toggle.component.ts b/src/components/toggle.component.ts
@@ -33,6 +33,8 @@ export const CLOUKIT_TOGGLE_VALUE_ACCESSOR: any = {
   template: `
     <div
       (click)="toggleValue()"
+      (mouseenter)="handleMouseEnter()"
+      (mouseleave)="handleMouseLeave()"
       [ngStyle]="getStyle('wrapper').style"
     >
       <div
@@ -76,6 +78,7 @@ export class CloukitToggleComponent implements ControlValueAccessor, OnChanges {
 
   private themeSelected: CloukitComponentTheme;
   private state = {
+    mouseOver: false,
     internalValue: false,
     isDisabled: false,
     uiModifier: 'base',
@@ -98,7 +101,13 @@ export class CloukitToggleComponent implements ControlValueAccessor, OnChanges {
     if (this.state.isDisabled) {
       this.state.uiModifier = 'disabled';
     } else {
-      this.state.uiModifier = 'base';
+      // Only set hover if not disabled!
+      // Disabled wins over hover as modifier!
+      if (this.state.mouseOver) {
+        this.state.uiModifier = 'hover';
+      } else {
+        this.state.uiModifier = 'base';
+      }
     }
     if (this.state.internalValue) {
       this.state.uiState = 'toggled'
@@ -107,6 +116,16 @@ export class CloukitToggleComponent implements ControlValueAccessor, OnChanges {
     }
   }
 
+  public handleMouseEnter() {
+    this.state.mouseOver = true;
+    this.updateUiModifierAndState();
+  }
+
+  public handleMouseLeave() {
+    this.state.mouseOver = false;
+    this.updateUiModifierAndState();
+  }
+
   public toggleValue() {
     if (!this.state.isDisabled) {
       this.setValue(!this.state.internalValue);

diff --git a/src/components/toggle.theme.ts b/src/components/toggle.theme.ts
@@ -40,6 +40,13 @@ export class CloukitToggleComponentThemeDefault extends CloukitComponentTheme {
         }
       } as CloukitStatefulAndModifierAwareElementThemeStyleDefinition));
 
+    this.createStyle('wrapper', 'untoggled', 'hover',
+      this.merge(this.getStyle('wrapper', 'untoggled', 'base'), {
+        style: {
+          border: '1px solid #333',
+        }
+      } as CloukitStatefulAndModifierAwareElementThemeStyleDefinition));
+
     this.createStyle('circle', 'untoggled', 'base', {
       style: {
         borderRadius: '50%',
@@ -60,6 +67,12 @@ export class CloukitToggleComponentThemeDefault extends CloukitComponentTheme {
         }
       } as CloukitStatefulAndModifierAwareElementThemeStyleDefinition));
 
+    this.createStyle('circle', 'untoggled', 'hover',
+      this.merge(this.getStyle('circle', 'untoggled', 'base'), {
+        style: {
+        }
+      } as CloukitStatefulAndModifierAwareElementThemeStyleDefinition));
+
     this.createStyle('iconLeft', 'untoggled', 'base', {
       style: {
         position: 'absolute',
@@ -89,6 +102,12 @@ export class CloukitToggleComponentThemeDefault extends CloukitComponentTheme {
         }
       } as CloukitStatefulAndModifierAwareElementThemeStyleDefinition));
 
+    this.createStyle('iconLeft', 'untoggled', 'hover',
+      this.merge(this.getStyle('iconLeft', 'untoggled', 'base'), {
+        style: { },
+        icon: { }
+      } as CloukitStatefulAndModifierAwareElementThemeStyleDefinition));
+
     this.createStyle('iconRight', 'untoggled', 'base', {
       style: {
         width: '20px',
@@ -112,6 +131,12 @@ export class CloukitToggleComponentThemeDefault extends CloukitComponentTheme {
         }
       } as CloukitStatefulAndModifierAwareElementThemeStyleDefinition));
 
+    this.createStyle('iconRight', 'untoggled', 'hover',
+      this.merge(this.getStyle('iconRight', 'untoggled', 'base'), {
+        style: {
+        }
+      } as CloukitStatefulAndModifierAwareElementThemeStyleDefinition));
+
     //
     // TOGGLED
     //
@@ -130,6 +155,13 @@ export class CloukitToggleComponentThemeDefault extends CloukitComponentTheme {
         }
       } as CloukitStatefulAndModifierAwareElementThemeStyleDefinition));
 
+    this.createStyle('wrapper', 'toggled', 'hover',
+      this.merge(this.getStyle('wrapper', 'toggled', 'base'), {
+        style: {
+          border: '1px solid #333',
+        }
+      } as CloukitStatefulAndModifierAwareElementThemeStyleDefinition));
+
     this.createStyle('circle', 'toggled', 'base',
       this.merge(this.getStyle('circle', 'untoggled', 'base'), {
         style: {
@@ -144,6 +176,12 @@ export class CloukitToggleComponentThemeDefault extends CloukitComponentTheme {
         }
       } as CloukitStatefulAndModifierAwareElementThemeStyleDefinition));
 
+    this.createStyle('circle', 'toggled', 'hover',
+      this.merge(this.getStyle('circle', 'toggled', 'base'), {
+        style: {
+        }
+      } as CloukitStatefulAndModifierAwareElementThemeStyleDefinition));
+
     this.createStyle('iconLeft', 'toggled', 'base',
       this.merge(this.getStyle('iconLeft', 'untoggled', 'base'), {
         style: {
@@ -162,6 +200,12 @@ export class CloukitToggleComponentThemeDefault extends CloukitComponentTheme {
         }
       } as CloukitStatefulAndModifierAwareElementThemeStyleDefinition));
 
+    this.createStyle('iconLeft', 'toggled', 'hover',
+      this.merge(this.getStyle('iconLeft', 'toggled', 'base'), {
+        style: { },
+        icon: { }
+      } as CloukitStatefulAndModifierAwareElementThemeStyleDefinition));
+
     this.createStyle('iconRight', 'toggled', 'base',
       this.merge(this.getStyle('iconRight', 'untoggled', 'base'), {
         style: {
@@ -174,6 +218,12 @@ export class CloukitToggleComponentThemeDefault extends CloukitComponentTheme {
         style: {
         }
       } as CloukitStatefulAndModifierAwareElementThemeStyleDefinition));
+
+    this.createStyle('iconRight', 'toggled', 'hover',
+      this.merge(this.getStyle('iconRight', 'toggled', 'base'), {
+        style: {
+        }
+      } as CloukitStatefulAndModifierAwareElementThemeStyleDefinition));
   }
 
 }
@@ -193,28 +243,40 @@ export class CloukitToggleComponentThemeCornered extends CloukitToggleComponentT
     const wrapperUntoggledBase = this.getElementTheme('wrapper', 'untoggled', 'base');
     wrapperUntoggledBase.styleDef.style.borderRadius = '1px';
 
-    const circleUntoggledBase = this.getElementTheme('circle', 'untoggled', 'base');
-    circleUntoggledBase.styleDef.style.borderRadius = '1px';
+    const wrapperUntoggledHover = this.getElementTheme('wrapper', 'untoggled', 'hover');
+    wrapperUntoggledHover.styleDef.style.borderRadius = '1px';
 
     const wrapperUntoggledDisabled = this.getElementTheme('wrapper', 'untoggled', 'disabled');
     wrapperUntoggledDisabled.styleDef.style.borderRadius = '1px';
 
-    const circleUntoggledDisabled= this.getElementTheme('circle', 'untoggled', 'disabled');
+    const circleUntoggledBase = this.getElementTheme('circle', 'untoggled', 'base');
+    circleUntoggledBase.styleDef.style.borderRadius = '1px';
+
+    const circleUntoggledDisabled = this.getElementTheme('circle', 'untoggled', 'disabled');
     circleUntoggledDisabled.styleDef.style.borderRadius = '1px';
 
+    const circleUntoggledHover = this.getElementTheme('circle', 'untoggled', 'hover');
+    circleUntoggledHover.styleDef.style.borderRadius = '1px';
+
     //
     // TOGGLED
     //
     const wrapperToggledBase = this.getElementTheme('wrapper', 'toggled', 'base');
     wrapperToggledBase.styleDef.style.borderRadius = '1px';
 
-    const circleToggledBase = this.getElementTheme('circle', 'toggled', 'base');
-    circleToggledBase.styleDef.style.borderRadius = '1px';
+    const wrapperToggledHover = this.getElementTheme('wrapper', 'toggled', 'hover');
+    wrapperToggledHover.styleDef.style.borderRadius = '1px';
 
     const wrapperToggledDisabled = this.getElementTheme('wrapper', 'toggled', 'disabled');
     wrapperToggledDisabled.styleDef.style.borderRadius = '1px';
 
+    const circleToggledBase = this.getElementTheme('circle', 'toggled', 'base');
+    circleToggledBase.styleDef.style.borderRadius = '1px';
+
     const circleToggledDisabled = this.getElementTheme('circle', 'toggled', 'disabled');
     circleToggledDisabled.styleDef.style.borderRadius = '1px';
+
+    const circleToggledHover = this.getElementTheme('circle', 'toggled', 'hover');
+    circleToggledHover.styleDef.style.borderRadius = '1px';
   }
 }