Skip to content
This repository has been archived by the owner on Sep 4, 2020. It is now read-only.

Commit

Permalink
v1.9.0 actually implement hover uiModifer
Browse files Browse the repository at this point in the history
  • Loading branch information
clouless committed Mar 27, 2018
1 parent 2340289 commit a48fd77
Show file tree
Hide file tree
Showing 3 changed files with 88 additions and 7 deletions.
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
21 changes: 20 additions & 1 deletion src/components/toggle.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,8 @@ export const CLOUKIT_TOGGLE_VALUE_ACCESSOR: any = {
template: `
<div
(click)="toggleValue()"
(mouseenter)="handleMouseEnter()"
(mouseleave)="handleMouseLeave()"
[ngStyle]="getStyle('wrapper').style"
>
<div
Expand Down Expand Up @@ -76,6 +78,7 @@ export class CloukitToggleComponent implements ControlValueAccessor, OnChanges {

private themeSelected: CloukitComponentTheme;
private state = {
mouseOver: false,
internalValue: false,
isDisabled: false,
uiModifier: 'base',
Expand All @@ -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'
Expand All @@ -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);
Expand Down
72 changes: 67 additions & 5 deletions src/components/toggle.theme.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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%',
Expand All @@ -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',
Expand Down Expand Up @@ -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',
Expand All @@ -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
//
Expand All @@ -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: {
Expand All @@ -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: {
Expand All @@ -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: {
Expand All @@ -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));
}

}
Expand All @@ -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';
}
}

0 comments on commit a48fd77

Please sign in to comment.