Sean Condon | 83fc39f | 2018-04-19 18:56:13 +0100 | [diff] [blame] | 1 | /* |
Sean Condon | 5ca0026 | 2018-09-06 17:55:25 +0100 | [diff] [blame^] | 2 | * Copyright 2018-present Open Networking Foundation |
Sean Condon | 83fc39f | 2018-04-19 18:56:13 +0100 | [diff] [blame] | 3 | * |
| 4 | * Licensed under the Apache License, Version 2.0 (the "License"); |
| 5 | * you may not use this file except in compliance with the License. |
| 6 | * You may obtain a copy of the License at |
| 7 | * |
| 8 | * http://www.apache.org/licenses/LICENSE-2.0 |
| 9 | * |
| 10 | * Unless required by applicable law or agreed to in writing, software |
| 11 | * distributed under the License is distributed on an "AS IS" BASIS, |
| 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| 13 | * See the License for the specific language governing permissions and |
| 14 | * limitations under the License. |
| 15 | */ |
Sean Condon | 28ecc5f | 2018-06-25 12:50:16 +0100 | [diff] [blame] | 16 | import { Component, OnInit, OnChanges, Input } from '@angular/core'; |
Sean Condon | 83fc39f | 2018-04-19 18:56:13 +0100 | [diff] [blame] | 17 | import { IconService, glyphMapping } from '../icon.service'; |
Sean Condon | 5ca0026 | 2018-09-06 17:55:25 +0100 | [diff] [blame^] | 18 | import { LogService } from '../../log.service'; |
Sean Condon | 83fc39f | 2018-04-19 18:56:13 +0100 | [diff] [blame] | 19 | |
| 20 | /** |
| 21 | * Icon Component |
| 22 | * |
| 23 | * Note: This is an alternative to the Icon Directive from ONOS 1.0.0 |
| 24 | * It has been implemented as a Component because it was inadvertently adding |
| 25 | * in a template through d3 DOM manipulations - it's better to make it a Comp |
| 26 | * and build a template the Angular 6 way |
| 27 | * |
| 28 | * Remember: The CSS files applied here only apply to this component |
| 29 | */ |
| 30 | @Component({ |
| 31 | selector: 'onos-icon', |
| 32 | templateUrl: './icon.component.html', |
Sean Condon | 2bd11b7 | 2018-06-15 08:00:48 +0100 | [diff] [blame] | 33 | styleUrls: [ |
| 34 | './icon.component.css', './icon.theme.css', |
| 35 | './glyph.css', './glyph-theme.css', |
| 36 | './tooltip.css', './tooltip-theme.css' |
| 37 | ] |
Sean Condon | 83fc39f | 2018-04-19 18:56:13 +0100 | [diff] [blame] | 38 | }) |
Sean Condon | 28ecc5f | 2018-06-25 12:50:16 +0100 | [diff] [blame] | 39 | export class IconComponent implements OnInit, OnChanges { |
Sean Condon | 83fc39f | 2018-04-19 18:56:13 +0100 | [diff] [blame] | 40 | @Input() iconId: string; |
Sean Condon | 2bd11b7 | 2018-06-15 08:00:48 +0100 | [diff] [blame] | 41 | @Input() iconSize: number = 20; |
| 42 | @Input() toolTip: string = undefined; |
| 43 | @Input() classes: string = undefined; |
| 44 | |
| 45 | // The displayed tooltip - undefined until mouse hovers over, then equals toolTip |
| 46 | toolTipDisp: string = undefined; |
Sean Condon | 83fc39f | 2018-04-19 18:56:13 +0100 | [diff] [blame] | 47 | |
| 48 | constructor( |
| 49 | private is: IconService, |
| 50 | private log: LogService |
| 51 | ) { |
| 52 | // Note: iconId is not available until initialization |
| 53 | this.log.debug('IconComponent constructed'); |
| 54 | } |
| 55 | |
Sean Condon | 28ecc5f | 2018-06-25 12:50:16 +0100 | [diff] [blame] | 56 | /** |
| 57 | * Icons are loaded in to the DOM under iconDefs |
| 58 | * TODO: Change this to use more standard Angular 6 mechanism |
| 59 | */ |
Sean Condon | 83fc39f | 2018-04-19 18:56:13 +0100 | [diff] [blame] | 60 | ngOnInit() { |
| 61 | this.is.loadIconDef(this.iconId); |
Sean Condon | 83fc39f | 2018-04-19 18:56:13 +0100 | [diff] [blame] | 62 | } |
| 63 | |
| 64 | /** |
Sean Condon | 28ecc5f | 2018-06-25 12:50:16 +0100 | [diff] [blame] | 65 | * This is needed in case the iconId changes while icon component |
| 66 | * is displayed on screen. |
| 67 | */ |
| 68 | ngOnChanges() { |
| 69 | this.is.loadIconDef(this.iconId); |
| 70 | } |
| 71 | |
| 72 | /** |
Sean Condon | 83fc39f | 2018-04-19 18:56:13 +0100 | [diff] [blame] | 73 | * Get the corresponding iconTag from the glyphMapping in the iconService |
| 74 | * @returns The iconTag corresponding to the iconId of this instance |
| 75 | */ |
| 76 | iconTag(): string { |
| 77 | return '#' + glyphMapping.get(this.iconId); |
| 78 | } |
| 79 | } |