fix onclick bug and move margin transition logic to theme

Author: clouless

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",

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,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)
   }
 

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();

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);

src/demo/demo.component.html

@@ -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>