diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..6e87a00 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,13 @@ +# Editor configuration, see http://editorconfig.org +root = true + +[*] +charset = utf-8 +indent_style = space +indent_size = 2 +insert_final_newline = true +trim_trailing_whitespace = true + +[*.md] +max_line_length = off +trim_trailing_whitespace = false diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..e34b5b7 --- /dev/null +++ b/.gitignore @@ -0,0 +1,13 @@ +.idea +*.iml +node_modules +build +dist +library-build-chain +documentation +src/*.js +src/components/*.js +tsconfig-*.json +yarn.lock +_dist_demo_node_modules +dist-demo diff --git a/LICENSE b/LICENSE index 8864d4a..4b38d92 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ MIT License -Copyright (c) 2017 +Copyright (c) 2017 Bernhard Grünewaldt - codeclou.io Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 229bcbf..270cf55 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,17 @@ +[![](https://cloukit.github.io/assets/images/cloukit-banner-github.svg?v3)](https://cloukit.github.io/) + # tooltip -A simple tooltip component + + +  + +### Usage + +**https://cloukit.github.io/#/component/tooltip** + + +  + +### License + +[MIT](https://github.com/cloukit/legal) © [Bernhard Grünewaldt](https://github.com/clouless) diff --git a/package.json b/package.json new file mode 100644 index 0000000..f667ecd --- /dev/null +++ b/package.json @@ -0,0 +1,32 @@ +{ + "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.0.0", + "description": "A simple tooltip component", + "license": "MIT", + "author": "codelcou.io", + "repository": { + "type": "git", + "url": "https://github.com/cloukit/tooltip.git" + }, + "scripts": { + "build": "node ./node_modules/@cloukit/library-build-chain/build.js", + "build:demo": "node ./node_modules/@cloukit/library-build-chain/build.js --demo --install", + "start:demo": "node ./node_modules/@cloukit/library-build-chain/build.js --demo --run", + "watch": "node ./node_modules/@cloukit/library-build-chain/build.js --watch", + "test": "echo \"ok\"" + }, + "dependencies": { + "@cloukit/dropout": "^1.0.1-alpha.6" + }, + "devDependencies": { + "@cloukit/library-build-chain": "1.7.0" + }, + "peerDependencies": { + "@angular/common": ">=4.0.0", + "@angular/core": ">=4.0.0", + "rxjs": ">=5.0.0", + "zone.js": ">=0.8.0" + } +} diff --git a/src/components/children/tooltip.component.ts b/src/components/children/tooltip.component.ts new file mode 100644 index 0000000..601a6b9 --- /dev/null +++ b/src/components/children/tooltip.component.ts @@ -0,0 +1,27 @@ +/*! + * @license MIT + * Copyright (c) 2017 Bernhard Grünewaldt - codeclou.io + * https://github.com/cloukit/legal + */ +import { Component, Input, ViewChild, TemplateRef } from '@angular/core'; + +@Component({ + selector: 'cloukit-tooltip', + template: ` + +
+ {{tooltipText}} +
+ + `, +}) +export class CloukitTooltipComponent { + + @Input() + public tooltipText: string; + + @ViewChild('tooltip') + public tooltipTemplate: TemplateRef; + +} + diff --git a/src/components/tooltip.directive.ts b/src/components/tooltip.directive.ts new file mode 100644 index 0000000..6dd2128 --- /dev/null +++ b/src/components/tooltip.directive.ts @@ -0,0 +1,57 @@ +/*! + * @license MIT + * Copyright (c) 2017 Bernhard Grünewaldt - codeclou.io + * https://github.com/cloukit/legal + */ +import { + Directive, Input, HostListener, ViewContainerRef, ComponentFactoryResolver, +} from '@angular/core'; +import { DropoutService, DropoutComponentCreationRequest, DropoutComponentRefId, DropoutPlacement } from '@cloukit/dropout'; +import { CloukitTooltipComponent } from './children/tooltip.component'; + +@Directive({ + selector: '[cloukitTooltip]', +}) +export class CloukitTooltipDirective { + + @Input('cloukitTooltip') + cloukitDropout: string; + + @Input('cloukitTooltipPlacement') + cloukitDropoutPlacement: DropoutPlacement = DropoutPlacement.HORIZONTAL_LEFT_BOTTOM; + + private dropoutRef: DropoutComponentRefId; + + constructor(private dropoutService: DropoutService, + private viewContainerRef: ViewContainerRef, + private componentFactoryResolver: ComponentFactoryResolver) { + } + + _doActivate() { + const request = new DropoutComponentCreationRequest(); + const componentFactory = this.componentFactoryResolver.resolveComponentFactory(CloukitTooltipComponent); + const tooltipRef = this.viewContainerRef.createComponent(componentFactory); + tooltipRef.instance.tooltipText = this.cloukitDropout; + request.triggerElement = this.viewContainerRef.element.nativeElement; + request.template = tooltipRef.instance.tooltipTemplate; + request.placement = this.cloukitDropoutPlacement; + this.dropoutRef = this.dropoutService.requestDropoutCreation(request); + } + + _doDeactivate() { + this.dropoutService.destroyComponent(this.dropoutRef); + this.dropoutRef = undefined; + } + + @HostListener('focusin') + @HostListener('mouseenter') + activate() { + this._doActivate(); + } + + @HostListener('focusout') + @HostListener('mouseleave') + deactivate() { + this._doDeactivate(); + } +} diff --git a/src/components/tooltip.module.ts b/src/components/tooltip.module.ts new file mode 100644 index 0000000..bd86647 --- /dev/null +++ b/src/components/tooltip.module.ts @@ -0,0 +1,18 @@ +/*! + * @license MIT + * Copyright (c) 2017 Bernhard Grünewaldt - codeclou.io + * https://github.com/cloukit/legal + */ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { CloukitDropoutModule } from '@cloukit/dropout'; +import { CloukitTooltipDirective } from './tooltip.directive'; +import { CloukitTooltipComponent } from './children/tooltip.component'; + +@NgModule({ + imports: [ CommonModule, CloukitDropoutModule ], + exports: [ CloukitTooltipDirective ], + declarations: [ CloukitTooltipDirective, CloukitTooltipComponent ], + entryComponents: [ CloukitTooltipComponent ], +}) +export class CloukitTooltipModule {} diff --git a/src/demo/README.md b/src/demo/README.md new file mode 100644 index 0000000..93a6d4e --- /dev/null +++ b/src/demo/README.md @@ -0,0 +1,3 @@ +# Library Demo + +See https://github.com/cloukit/library-build-chain/blob/master/LIBRARY_DEMO.md diff --git a/src/demo/demo.component.html b/src/demo/demo.component.html new file mode 100644 index 0000000..27ea302 --- /dev/null +++ b/src/demo/demo.component.html @@ -0,0 +1,10 @@ + +
+ + There is a thing called + Bratwurst + which you should know. Hover the + Bratwurst + to see onmouseover dropout. + +
diff --git a/src/demo/demo.component.ts b/src/demo/demo.component.ts new file mode 100644 index 0000000..adaf84e --- /dev/null +++ b/src/demo/demo.component.ts @@ -0,0 +1,13 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'demo', + templateUrl: './demo.component.html', + styles: [ + '.demo { font-family:sans-serif; }', + '.tooltip { color:#710ECC; cursor: pointer; }', + ], +}) +export class DemoComponent { + +} diff --git a/src/demo/demo.module.ts b/src/demo/demo.module.ts new file mode 100644 index 0000000..5404188 --- /dev/null +++ b/src/demo/demo.module.ts @@ -0,0 +1,15 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { DemoComponent } from './demo.component'; +import { CloukitTooltipModule } from '../index'; +import { CloukitDropoutModule } from '@cloukit/dropout'; + +@NgModule({ + declarations: [ DemoComponent ], + exports: [ DemoComponent ], + imports: [ CommonModule, CloukitTooltipModule, CloukitDropoutModule ], + providers: [ ], + bootstrap: [ ] +}) +export class DemoModule { +} diff --git a/src/index.ts b/src/index.ts new file mode 100644 index 0000000..7c82c08 --- /dev/null +++ b/src/index.ts @@ -0,0 +1 @@ +export * from './components/tooltip.module'; diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..1a27c98 --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,21 @@ +{ + "COMMENT": "ONLY USED FOR EDITOR!", + "compileOnSave": false, + "compilerOptions": { + "outDir": "./build/out-tsc", + "baseUrl": "src", + "sourceMap": true, + "declaration": false, + "moduleResolution": "node", + "emitDecoratorMetadata": true, + "experimentalDecorators": true, + "target": "es5", + "typeRoots": [ + "node_modules/@types" + ], + "lib": [ + "es2016", + "dom" + ] + } +}