From 1a3c8d6ec9c41d6a6aec1fd298d0da8c6c2a1dbc Mon Sep 17 00:00:00 2001 From: clouless Date: Wed, 25 Oct 2017 21:03:48 +0200 Subject: [PATCH] fix onclick bug and move margin transition logic to theme --- package.json | 2 +- src/components/children/tooltip.component.ts | 34 ++++++-------- src/components/tooltip.directive.ts | 14 +++--- src/components/tooltip.theme.ts | 49 ++++++++++++++++---- src/demo/demo.component.html | 7 +++ 5 files changed, 69 insertions(+), 37 deletions(-) diff --git a/package.json b/package.json index afefca5..95d20ee 100644 --- 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/tooltip", "moduleId": "tooltip", - "version": "1.1.0", + "version": "1.2.0", "description": "A simple tooltip component", "license": "MIT", "author": "codelcou.io", diff --git a/src/components/children/tooltip.component.ts b/src/components/children/tooltip.component.ts index fd4a162..0372ef0 100644 --- a/src/components/children/tooltip.component.ts +++ b/src/components/children/tooltip.component.ts @@ -34,16 +34,21 @@ export class CloukitTooltipComponent implements OnInit { public cloukitDropoutPlacement: DropoutPlacement; @Input() - public wrapperMargin: string; + public wrapperReadyModifier: string; @Input() public theme: string; private themeSelected: CloukitComponentTheme; private state = { - uiModifier: 'base', - uiState: 'init', - tooltipTransform: '', + wrapper: { + uiModifier: 'base', + uiState: 'init', + }, + tooltip: { + uiModifier: 'base', + uiState: 'init', + } }; constructor(private themeService: CloukitThemeService) { @@ -52,13 +57,7 @@ export class CloukitTooltipComponent implements OnInit { public getStyle(element: string): CloukitStatefulAndModifierAwareElementThemeStyleDefinition { if (this.themeSelected !== undefined && this.themeSelected !== null) { - const style = this.themeSelected.getStyle(element, this.state.uiState, this.state.uiModifier); - if (element === 'tooltip') { - style.style[ 'transform' ] = this.state.tooltipTransform; - } - if (element === 'wrapper') { - style.style[this.wrapperMargin] = this.state.uiState === 'ready' ? '5px' : '0px'; - } + const style = this.themeSelected.getStyle(element, this.state[element].uiState, this.state[element].uiModifier); return this.themeService.prefixStyle(style); } return { style: {}, icon: {} } as CloukitStatefulAndModifierAwareElementThemeStyleDefinition; @@ -66,12 +65,6 @@ export class CloukitTooltipComponent implements OnInit { ngOnInit() { const self = this; - if (this.cloukitDropoutPlacement === DropoutPlacement.DOWN_CENTER || this.cloukitDropoutPlacement === DropoutPlacement.UP_CENTER ) { - this.state.tooltipTransform = 'translate(-50%, 0)'; - } - if (this.cloukitDropoutPlacement === DropoutPlacement.LEFT_CENTER || this.cloukitDropoutPlacement === DropoutPlacement.RIGHT_CENTER ) { - this.state.tooltipTransform = 'translate(0, -50%)'; - } if (this.theme !== undefined && this.theme !== null) { this.themeSelected = this.themeService.getComponentTheme(this.theme); if (this.themeSelected === null) { @@ -79,9 +72,12 @@ export class CloukitTooltipComponent implements OnInit { this.themeSelected = this.themeService.getComponentTheme('tooltip'); } } - // Transition to ready state once component is created + + // Transition to ready state slightly after component is created setTimeout(() => { - self.state.uiState = 'ready'; + self.state.tooltip.uiState = 'ready'; + self.state.wrapper.uiState = 'ready'; + self.state.wrapper.uiModifier = this.wrapperReadyModifier; }, 10) } diff --git a/src/components/tooltip.directive.ts b/src/components/tooltip.directive.ts index adbaaf0..d48a73d 100644 --- a/src/components/tooltip.directive.ts +++ b/src/components/tooltip.directive.ts @@ -32,18 +32,18 @@ export class CloukitTooltipDirective { // PLACEMENT // let placement: DropoutPlacement; - let wrapperMargin: string; + let wrapperReadyModifier: string; if (this.cloukitDropoutPlacement === undefined || this.cloukitDropoutPlacement === 'bottom') { placement = DropoutPlacement.DOWN_CENTER; - wrapperMargin = 'marginTop'; + wrapperReadyModifier = 'down'; } else if (this.cloukitDropoutPlacement === 'top') { - wrapperMargin = 'marginBottom'; + wrapperReadyModifier = 'up'; placement = DropoutPlacement.UP_CENTER; } else if (this.cloukitDropoutPlacement === 'left') { - wrapperMargin = 'marginRight'; + wrapperReadyModifier = 'left'; placement = DropoutPlacement.LEFT_CENTER; } else if (this.cloukitDropoutPlacement === 'right') { - wrapperMargin = 'marginLeft'; + wrapperReadyModifier = 'right'; placement = DropoutPlacement.RIGHT_CENTER; } // @@ -53,7 +53,7 @@ export class CloukitTooltipDirective { const tooltipRef = this.viewContainerRef.createComponent(componentFactory); tooltipRef.instance.tooltipText = this.cloukitDropout; tooltipRef.instance.cloukitDropoutPlacement = placement; - tooltipRef.instance.wrapperMargin = wrapperMargin; + tooltipRef.instance.wrapperReadyModifier = wrapperReadyModifier; // // REQUEST // @@ -69,13 +69,11 @@ export class CloukitTooltipDirective { this.dropoutRef = undefined; } - @HostListener('focusin') @HostListener('mouseenter') activate() { this._doActivate(); } - @HostListener('focusout') @HostListener('mouseleave') deactivate() { this._doDeactivate(); diff --git a/src/components/tooltip.theme.ts b/src/components/tooltip.theme.ts index 44dd557..914f745 100644 --- a/src/components/tooltip.theme.ts +++ b/src/components/tooltip.theme.ts @@ -16,32 +16,63 @@ export class CloukitTooltipComponentThemeDefault extends CloukitComponentTheme { constructor() { super(); // - // NOTE: A margin-* of 5px will be added for wrapper.ready.base on component creation. - // this cannot be overridden by the theme! Since the placement influences top/bottom/left/right + // WRAPPER // this.createStyle('wrapper', 'init', 'base', { style: { transition: ` - margin-left 200ms linear, - margin-right 200ms linear, - margin-bottom 200ms linear, - margin-top 200ms linear, - opacity 200ms ease-in-out`, + margin-left 300ms linear, + margin-right 300ms linear, + margin-top 300ms linear, + margin-bottom 300ms linear, + opacity 300ms ease-in-out`, opacity: 0, } } as CloukitStatefulAndModifierAwareElementThemeStyleDefinition); - this.createStyle('wrapper', 'ready', 'base', + this.createStyle('wrapper', 'ready', 'left', this.merge(this.getStyle('wrapper', 'init', 'base'), { style: { + marginRight: '5px', + transform: 'translate(0, -50%)', opacity: 1, } } as CloukitStatefulAndModifierAwareElementThemeStyleDefinition)); + this.createStyle('wrapper', 'ready', 'right', + this.merge(this.getStyle('wrapper', 'init', 'base'), { + style: { + marginLeft: '5px', + transform: 'translate(0, -50%)', + opacity: 1, + } + } as CloukitStatefulAndModifierAwareElementThemeStyleDefinition)); + + this.createStyle('wrapper', 'ready', 'up', + this.merge(this.getStyle('wrapper', 'init', 'base'), { + style: { + marginBottom: '5px', + transform: 'translate(-50%, 0)', + opacity: 1, + } + } as CloukitStatefulAndModifierAwareElementThemeStyleDefinition)); + + this.createStyle('wrapper', 'ready', 'down', + this.merge(this.getStyle('wrapper', 'init', 'base'), { + style: { + marginTop: '5px', + transform: 'translate(-50%, 0)', + opacity: 1, + } + } as CloukitStatefulAndModifierAwareElementThemeStyleDefinition)); + + // + // TOOLTIP + // this.createStyle('tooltip', 'init', 'base', { style: { backgroundColor: '#333', - padding: '4px', + padding: '5px 8px 5px 8px', color: '#fff', } } as CloukitStatefulAndModifierAwareElementThemeStyleDefinition); diff --git a/src/demo/demo.component.html b/src/demo/demo.component.html index a50b517..428e530 100644 --- a/src/demo/demo.component.html +++ b/src/demo/demo.component.html @@ -28,4 +28,11 @@ cloukitTooltip="delicious german sausage" cloukitTooltipPlacement="bottom" >Bratwurst +

+ tooltip on a button: +