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

Commit

Permalink
fix onclick bug and move margin transition logic to theme
Browse files Browse the repository at this point in the history
  • Loading branch information
clouless committed Oct 25, 2017
1 parent 27ea95a commit 1a3c8d6
Show file tree
Hide file tree
Showing 5 changed files with 69 additions and 37 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
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/tooltip",
"moduleId": "tooltip",
"version": "1.1.0",
"version": "1.2.0",
"description": "A simple tooltip component",
"license": "MIT",
"author": "codelcou.io",
Expand Down
34 changes: 15 additions & 19 deletions src/components/children/tooltip.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -52,36 +57,27 @@ 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;
}

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) {
console.log(`WARN: requested theme ${this.theme} does not exist. Falling back to default theme for tooltip.`);
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)
}

Expand Down
14 changes: 6 additions & 8 deletions src/components/tooltip.directive.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
//
Expand All @@ -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
//
Expand All @@ -69,13 +69,11 @@ export class CloukitTooltipDirective {
this.dropoutRef = undefined;
}

@HostListener('focusin')
@HostListener('mouseenter')
activate() {
this._doActivate();
}

@HostListener('focusout')
@HostListener('mouseleave')
deactivate() {
this._doDeactivate();
Expand Down
49 changes: 40 additions & 9 deletions src/components/tooltip.theme.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
7 changes: 7 additions & 0 deletions src/demo/demo.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,4 +28,11 @@
cloukitTooltip="delicious german sausage"
cloukitTooltipPlacement="bottom"
>Bratwurst</span>
<br><br>
<span class="label">tooltip on a button:</span>
<button
class="tooltipTrigger"
cloukitTooltip="delicious german sausage"
cloukitTooltipPlacement="bottom"
>Bratwurst</button>
</div>

0 comments on commit 1a3c8d6

Please sign in to comment.