tooltip theme

Author: clouless

package.json

@@ -18,7 +18,8 @@
     "test": "echo \"ok\""
   },
   "dependencies": {
-    "@cloukit/dropout": "1.1.0"
+    "@cloukit/dropout": ">=1.1.0",
+    "@cloukit/theme": ">=1.6.1"
   },
   "devDependencies": {
     "@cloukit/library-build-chain": "1.7.1"

src/components/children/tooltip.component.ts

@@ -5,13 +5,19 @@
  */
 import { Component, Input, ViewChild, TemplateRef, OnInit } from '@angular/core';
 import { DropoutPlacement } from '@cloukit/dropout';
+import {
+  CloukitComponentTheme, CloukitStatefulAndModifierAwareElementThemeStyleDefinition,
+  CloukitThemeService,
+} from '@cloukit/theme';
 
 @Component({
   selector: 'cloukit-tooltip',
   template: `
   <ng-template #tooltip>
-    <div [ngStyle]="style">
-      {{tooltipText}}
+    <div [ngStyle]="getStyle('wrapper').style">
+      <div [ngStyle]="getStyle('tooltip').style">
+        {{tooltipText}}
+      </div>
     </div>
   </ng-template>
   `,
@@ -25,23 +31,58 @@ export class CloukitTooltipComponent implements OnInit {
   public tooltipTemplate: TemplateRef<any>;
 
   @Input('cloukitTooltipPlacement')
-  cloukitDropoutPlacement: DropoutPlacement;
+  public cloukitDropoutPlacement: DropoutPlacement;
 
-  public style = {
-    backgroundColor: '#333',
-    padding: '4px',
-    color: '#fff',
-    transform: '',
+  @Input()
+  public wrapperMargin: string;
+
+  @Input()
+  public theme: string;
+
+  private themeSelected: CloukitComponentTheme;
+  private state = {
+    uiModifier: 'base',
+    uiState: 'init',
+    tooltipTransform: '',
   };
 
+  constructor(private themeService: CloukitThemeService) {
+    this.themeSelected = this.themeService.getComponentTheme('tooltip');
+  }
+
+  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';
+      }
+      return this.themeService.prefixStyle(style);
+    }
+    return { style: {}, icon: {} } as CloukitStatefulAndModifierAwareElementThemeStyleDefinition;
+  }
+
   ngOnInit() {
-    console.log('changes');
+    const self = this;
     if (this.cloukitDropoutPlacement === DropoutPlacement.DOWN_CENTER || this.cloukitDropoutPlacement === DropoutPlacement.UP_CENTER ) {
-      this.style.transform = 'translate(-50%, 0)';
+      this.state.tooltipTransform = 'translate(-50%, 0)';
     }
     if (this.cloukitDropoutPlacement === DropoutPlacement.LEFT_CENTER || this.cloukitDropoutPlacement === DropoutPlacement.RIGHT_CENTER ) {
-      this.style.transform = 'translate(0, -50%)';
+      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
+    setTimeout(() => {
+      self.state.uiState = 'ready';
+    }, 10)
   }
 
 }

src/components/tooltip.directive.ts

@@ -32,13 +32,18 @@ export class CloukitTooltipDirective {
     // PLACEMENT
     //
     let placement: DropoutPlacement;
+    let wrapperMargin: string;
     if (this.cloukitDropoutPlacement === undefined || this.cloukitDropoutPlacement === 'bottom') {
       placement = DropoutPlacement.DOWN_CENTER;
+      wrapperMargin = 'marginTop';
     } else if (this.cloukitDropoutPlacement === 'top') {
+      wrapperMargin = 'marginBottom';
       placement = DropoutPlacement.UP_CENTER;
     } else if (this.cloukitDropoutPlacement === 'left') {
+      wrapperMargin = 'marginRight';
       placement = DropoutPlacement.LEFT_CENTER;
     } else if (this.cloukitDropoutPlacement === 'right') {
+      wrapperMargin = 'marginLeft';
       placement = DropoutPlacement.RIGHT_CENTER;
     }
     //
@@ -48,6 +53,7 @@ export class CloukitTooltipDirective {
     const tooltipRef = this.viewContainerRef.createComponent(componentFactory);
     tooltipRef.instance.tooltipText = this.cloukitDropout;
     tooltipRef.instance.cloukitDropoutPlacement = placement;
+    tooltipRef.instance.wrapperMargin = wrapperMargin;
     //
     // REQUEST
     //

src/components/tooltip.module.ts

@@ -5,14 +5,21 @@
  */
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { CloukitDropoutModule } from '@cloukit/dropout';
+import { CloukitThemeService } from '@cloukit/theme';
 import { CloukitTooltipDirective } from './tooltip.directive';
 import { CloukitTooltipComponent } from './children/tooltip.component';
+import { CloukitTooltipComponentThemeDefault } from './tooltip.theme';
 
 @NgModule({
-  imports: [ CommonModule, CloukitDropoutModule ],
+  imports: [ CommonModule ],
   exports: [ CloukitTooltipDirective ],
   declarations: [ CloukitTooltipDirective, CloukitTooltipComponent ],
   entryComponents: [ CloukitTooltipComponent ],
 })
-export class CloukitTooltipModule {}
+export class CloukitTooltipModule {
+  constructor(private themeService: CloukitThemeService) {
+    if (this.themeService.getComponentTheme('tooltip') === null) {
+      this.themeService.registerComponentTheme('tooltip', new CloukitTooltipComponentThemeDefault());
+    }
+  }
+}

src/components/tooltip.theme.ts

@@ -0,0 +1,56 @@
+/*!
+ * @license MIT
+ * Copyright (c) 2017 Bernhard Grünewaldt - codeclou.io
+ * https://github.com/cloukit/legal
+ */
+import {
+  CloukitComponentTheme,
+  CloukitStatefulAndModifierAwareElementThemeStyleDefinition,
+} from '@cloukit/theme';
+
+/**
+ * The default theme
+ */
+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
+    //
+    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`,
+        opacity: 0,
+      }
+    } as CloukitStatefulAndModifierAwareElementThemeStyleDefinition);
+
+    this.createStyle('wrapper', 'ready', 'base',
+      this.merge(this.getStyle('wrapper', 'init', 'base'), {
+        style: {
+          opacity: 1,
+        }
+      } as CloukitStatefulAndModifierAwareElementThemeStyleDefinition));
+
+    this.createStyle('tooltip', 'init', 'base', {
+      style: {
+        backgroundColor: '#333',
+        padding: '4px',
+        color: '#fff',
+      }
+    } as CloukitStatefulAndModifierAwareElementThemeStyleDefinition);
+
+    this.createStyle('tooltip', 'ready', 'base',
+      this.merge(this.getStyle('tooltip', 'init', 'base'), {
+        style: {
+        }
+      } as CloukitStatefulAndModifierAwareElementThemeStyleDefinition));
+  }
+
+}

src/demo/demo.component.html

@@ -4,28 +4,28 @@
   <span class="label">tooltip to the left:</span>
   <span
     class="tooltipTrigger"
-    cloukitTooltip="A very nice sausage"
+    cloukitTooltip="delicious german sausage"
     cloukitTooltipPlacement="left"
   >Bratwurst</span>
   <br><br>
   <span class="label">tooltip to the right:</span>
   <span
     class="tooltipTrigger"
-    cloukitTooltip="A very nice sausage"
+    cloukitTooltip="delicious german sausage"
     cloukitTooltipPlacement="right"
   >Bratwurst</span>
   <br><br>
   <span class="label">tooltip to the top:</span>
   <span
     class="tooltipTrigger"
-    cloukitTooltip="A very nice sausage"
+    cloukitTooltip="delicious german sausage"
     cloukitTooltipPlacement="top"
   >Bratwurst</span>
   <br><br>
   <span class="label">tooltip to the bottom:</span>
   <span
     class="tooltipTrigger"
-    cloukitTooltip="A very nice sausage"
+    cloukitTooltip="delicious german sausage"
     cloukitTooltipPlacement="bottom"
   >Bratwurst</span>
 </div>

src/demo/demo.component.ts

@@ -8,6 +8,4 @@ import { Component } from '@angular/core';
     '.label { display:inline-block; width:250px; }',
   ],
 })
-export class DemoComponent {
-
-}
+export class DemoComponent {}

src/demo/demo.module.ts

@@ -1,15 +1,20 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { DemoComponent } from './demo.component';
-import { CloukitTooltipModule } from '../index';
 import { CloukitDropoutModule } from '@cloukit/dropout';
+import { CloukitThemeModule } from '@cloukit/theme';
+import { CloukitTooltipModule } from '../index';
+import { DemoComponent } from './demo.component';
 
 @NgModule({
   declarations: [ DemoComponent ],
   exports: [ DemoComponent ],
-  imports: [ CommonModule, CloukitTooltipModule, CloukitDropoutModule ],
+  imports: [
+    CommonModule,
+    CloukitThemeModule,
+    CloukitTooltipModule,
+    CloukitDropoutModule,
+  ],
   providers: [ ],
   bootstrap: [ ]
 })
-export class DemoModule {
-}
+export class DemoModule {}