gerrit.onap Code Review - sdc/sdc-workflow-designer.git/blob

   1 import {AfterViewInit, Directive, ElementRef, Input, OnDestroy} from '@angular/core';
   2
   3 import {DomHandler} from '../domhandler';
   4
   5 import {PlxButtonState} from './button-state';
   6
   7 @Directive({selector: '[pxButton]', providers: [DomHandler]})
   8 export class PlxButtonDirective implements AfterViewInit, OnDestroy {
   9   @Input() iconPos: string = 'left';
  10
  11   @Input() cornerStyleClass: string = 'ui-corner-all';
  12
  13   _label: string;
  14
  15   _loadinglabel: string;
  16
  17   _icon: string;
  18
  19   _state: number;
  20
  21   initialized: boolean;
  22
  23   constructor(
  24                 public el: ElementRef, public domHandler: DomHandler) {}
  25
  26   ngAfterViewInit() {
  27         this.domHandler.addMultipleClasses(
  28                 this.el.nativeElement, this.getStyleClass());
  29         if (this.icon) {
  30                 let iconElement = document.createElement('span');
  31                 let iconPosClass = (this.iconPos === 'right') ? 'ui-button-icon-right' :
  32                                                                                                                 'ui-button-icon-left';
  33                 iconElement.className =
  34                         iconPosClass + ' ui-c iconfont plx-icon-' + this.icon;
  35                 this.el.nativeElement.appendChild(iconElement);
  36         }
  37
  38         let iconAnimationElement = document.createElement('span');
  39         iconAnimationElement.className =
  40                 'ui-button-icon-left ui-c iconfont plx-icon-circle-o-notch plx-spin';
  41         iconAnimationElement.style.display = 'none';
  42         this.el.nativeElement.appendChild(iconAnimationElement);
  43
  44         let labelElement = document.createElement('span');
  45         labelElement.className = 'ui-button-text ui-c';
  46         labelElement.appendChild(document.createTextNode(this.label || ''));
  47         this.el.nativeElement.appendChild(labelElement);
  48
  49         if (this.state) {
  50                 let spanElement =
  51                         this.domHandler.findSingle(this.el.nativeElement, '.ui-button-text');
  52                 if (this.state === PlxButtonState.DOING) {
  53                 if (spanElement) {
  54                         spanElement.innerText = this.loadinglabel || 'loading';
  55                 }
  56                 this.el.nativeElement.disabled = true;
  57                 this.setIconELement(true);
  58                 } else {
  59                 spanElement.innerText = this.label || '';
  60                 this.el.nativeElement.disabled = false;
  61                 this.setIconELement(false);
  62                 }
  63         }
  64
  65         this.initialized = true;
  66   }
  67
  68   getStyleClass(): string {
  69         let styleClass =
  70                 'ui-button ui-widget ui-state-default ' + this.cornerStyleClass;
  71         if (this.icon) {
  72                 if (this.label  !== null && this.label  !== undefined) {
  73                 if (this.iconPos === 'left') {
  74                         styleClass = styleClass + ' ui-button-text-icon-left';
  75                 } else {
  76                         styleClass = styleClass + ' ui-button-text-icon-right';
  77                 }
  78                 } else {
  79                 styleClass = styleClass + ' ui-button-icon-only';
  80                 }
  81         } else {
  82                 styleClass = styleClass + ' ui-button-text-only';
  83         }
  84
  85         return styleClass;
  86   }
  87
  88   setIconELement(isShowAnimation: boolean) {
  89         let iconLeftElement = this.domHandler.findSingle(
  90                 this.el.nativeElement, '.ui-button-icon-left.iconfont');
  91         if (iconLeftElement) {
  92                 iconLeftElement.style.display = isShowAnimation ? 'none' : 'inline-block';
  93         }
  94         let iconRightElement = this.domHandler.findSingle(
  95                 this.el.nativeElement, '.ui-button-icon-left.iconfont');
  96         if (iconRightElement) {
  97                 iconRightElement.style.display =
  98                         isShowAnimation ? 'none' : 'inline-block';
  99         }
 100         let iconAnimationElement = this.domHandler.findSingle(
 101                 this.el.nativeElement, '.iconfont.plx-icon-circle-o-notch.plx-spin');
 102         if (iconAnimationElement) {
 103                 iconAnimationElement.style.display =
 104                         isShowAnimation ? 'inline-block' : 'none';
 105         }
 106   }
 107
 108   @Input()
 109   get label(): string {
 110         return this._label;
 111   }
 112
 113   set label(val: string) {
 114         this._label = val;
 115
 116         if (this.initialized) {
 117                 this.domHandler.findSingle(this.el.nativeElement, '.ui-button-text')
 118                         .textContent = this._label;
 119         }
 120   }
 121
 122   @Input()
 123   get loadinglabel(): string {
 124         return this._loadinglabel;
 125   }
 126
 127   set loadinglabel(val: string) {
 128         this._loadinglabel = val;
 129   }
 130
 131   @Input()
 132   get icon(): string {
 133         return this._icon;
 134   }
 135
 136   set icon(val: string) {
 137         this._icon = val;
 138
 139         if (this.initialized) {
 140                 let iconPosClass = (this.iconPos === 'right') ? 'ui-button-icon-right' :
 141                                                                                                                 'ui-button-icon-left';
 142                 this.domHandler.findSingle(this.el.nativeElement, '.iconfont').className =
 143                         iconPosClass + ' ui-c iconfont plx-icon-' + this.icon;
 144         }
 145   }
 146
 147   @Input()
 148   get state(): number {
 149         return this._state;
 150   }
 151
 152   set state(val: number) {
 153         this._state = val;
 154         if (this.initialized) {
 155                 let spanElement =
 156                         this.domHandler.findSingle(this.el.nativeElement, '.ui-button-text');
 157                 if (this.state === PlxButtonState.DOING) {
 158                 if (spanElement) {
 159                         spanElement.innerText = this.loadinglabel || 'loading';
 160                 }
 161                 this.el.nativeElement.disabled = true;
 162                 this.setIconELement(true);
 163                 } else {
 164                 spanElement.innerText = this.label || '';
 165                 this.el.nativeElement.disabled = false;
 166                 this.setIconELement(false);
 167                 }
 168         }
 169   }
 170
 171   ngOnDestroy() {
 172         while (this.el.nativeElement.hasChildNodes()) {
 173                 this.el.nativeElement.removeChild(this.el.nativeElement.lastChild);
 174         }
 175
 176         this.initialized = false;
 177   }
 178 }