diff options
Diffstat (limited to 'sdc-workflow-designer-ui/src/app/paletx/core/pxbutton')
4 files changed, 200 insertions, 0 deletions
diff --git a/sdc-workflow-designer-ui/src/app/paletx/core/pxbutton/button-state.ts b/sdc-workflow-designer-ui/src/app/paletx/core/pxbutton/button-state.ts new file mode 100644 index 00000000..2f1f73b2 --- /dev/null +++ b/sdc-workflow-designer-ui/src/app/paletx/core/pxbutton/button-state.ts @@ -0,0 +1,6 @@ +export enum PlxButtonState { + IDLE, + DOING, + SUCCESS, + FAILURE +}
\ No newline at end of file diff --git a/sdc-workflow-designer-ui/src/app/paletx/core/pxbutton/button.directive.ts b/sdc-workflow-designer-ui/src/app/paletx/core/pxbutton/button.directive.ts new file mode 100644 index 00000000..842b9fb4 --- /dev/null +++ b/sdc-workflow-designer-ui/src/app/paletx/core/pxbutton/button.directive.ts @@ -0,0 +1,178 @@ +import {AfterViewInit, Directive, ElementRef, Input, OnDestroy} from '@angular/core'; + +import {DomHandler} from '../domhandler'; + +import {PlxButtonState} from './button-state'; + +@Directive({selector: '[pxButton]', providers: [DomHandler]}) +export class PlxButtonDirective implements AfterViewInit, OnDestroy { + @Input() iconPos: string = 'left'; + + @Input() cornerStyleClass: string = 'ui-corner-all'; + + _label: string; + + _loadinglabel: string; + + _icon: string; + + _state: number; + + initialized: boolean; + + constructor( + public el: ElementRef, public domHandler: DomHandler) {} + + ngAfterViewInit() { + this.domHandler.addMultipleClasses( + this.el.nativeElement, this.getStyleClass()); + if (this.icon) { + let iconElement = document.createElement('span'); + let iconPosClass = (this.iconPos === 'right') ? 'ui-button-icon-right' : + 'ui-button-icon-left'; + iconElement.className = + iconPosClass + ' ui-c iconfont plx-icon-' + this.icon; + this.el.nativeElement.appendChild(iconElement); + } + + let iconAnimationElement = document.createElement('span'); + iconAnimationElement.className = + 'ui-button-icon-left ui-c iconfont plx-icon-circle-o-notch plx-spin'; + iconAnimationElement.style.display = 'none'; + this.el.nativeElement.appendChild(iconAnimationElement); + + let labelElement = document.createElement('span'); + labelElement.className = 'ui-button-text ui-c'; + labelElement.appendChild(document.createTextNode(this.label || '')); + this.el.nativeElement.appendChild(labelElement); + + if (this.state) { + let spanElement = + this.domHandler.findSingle(this.el.nativeElement, '.ui-button-text'); + if (this.state === PlxButtonState.DOING) { + if (spanElement) { + spanElement.innerText = this.loadinglabel || 'loading'; + } + this.el.nativeElement.disabled = true; + this.setIconELement(true); + } else { + spanElement.innerText = this.label || ''; + this.el.nativeElement.disabled = false; + this.setIconELement(false); + } + } + + this.initialized = true; + } + + getStyleClass(): string { + let styleClass = + 'ui-button ui-widget ui-state-default ' + this.cornerStyleClass; + if (this.icon) { + if (this.label !== null && this.label !== undefined) { + if (this.iconPos === 'left') { + styleClass = styleClass + ' ui-button-text-icon-left'; + } else { + styleClass = styleClass + ' ui-button-text-icon-right'; + } + } else { + styleClass = styleClass + ' ui-button-icon-only'; + } + } else { + styleClass = styleClass + ' ui-button-text-only'; + } + + return styleClass; + } + + setIconELement(isShowAnimation: boolean) { + let iconLeftElement = this.domHandler.findSingle( + this.el.nativeElement, '.ui-button-icon-left.iconfont'); + if (iconLeftElement) { + iconLeftElement.style.display = isShowAnimation ? 'none' : 'inline-block'; + } + let iconRightElement = this.domHandler.findSingle( + this.el.nativeElement, '.ui-button-icon-left.iconfont'); + if (iconRightElement) { + iconRightElement.style.display = + isShowAnimation ? 'none' : 'inline-block'; + } + let iconAnimationElement = this.domHandler.findSingle( + this.el.nativeElement, '.iconfont.plx-icon-circle-o-notch.plx-spin'); + if (iconAnimationElement) { + iconAnimationElement.style.display = + isShowAnimation ? 'inline-block' : 'none'; + } + } + + @Input() + get label(): string { + return this._label; + } + + set label(val: string) { + this._label = val; + + if (this.initialized) { + this.domHandler.findSingle(this.el.nativeElement, '.ui-button-text') + .textContent = this._label; + } + } + + @Input() + get loadinglabel(): string { + return this._loadinglabel; + } + + set loadinglabel(val: string) { + this._loadinglabel = val; + } + + @Input() + get icon(): string { + return this._icon; + } + + set icon(val: string) { + this._icon = val; + + if (this.initialized) { + let iconPosClass = (this.iconPos === 'right') ? 'ui-button-icon-right' : + 'ui-button-icon-left'; + this.domHandler.findSingle(this.el.nativeElement, '.iconfont').className = + iconPosClass + ' ui-c iconfont plx-icon-' + this.icon; + } + } + + @Input() + get state(): number { + return this._state; + } + + set state(val: number) { + this._state = val; + if (this.initialized) { + let spanElement = + this.domHandler.findSingle(this.el.nativeElement, '.ui-button-text'); + if (this.state === PlxButtonState.DOING) { + if (spanElement) { + spanElement.innerText = this.loadinglabel || 'loading'; + } + this.el.nativeElement.disabled = true; + this.setIconELement(true); + } else { + spanElement.innerText = this.label || ''; + this.el.nativeElement.disabled = false; + this.setIconELement(false); + } + } + } + + ngOnDestroy() { + while (this.el.nativeElement.hasChildNodes()) { + this.el.nativeElement.removeChild(this.el.nativeElement.lastChild); + } + + this.initialized = false; + } +} diff --git a/sdc-workflow-designer-ui/src/app/paletx/core/pxbutton/button.module.ts b/sdc-workflow-designer-ui/src/app/paletx/core/pxbutton/button.module.ts new file mode 100644 index 00000000..01973295 --- /dev/null +++ b/sdc-workflow-designer-ui/src/app/paletx/core/pxbutton/button.module.ts @@ -0,0 +1,14 @@ +/** + * Created by 10190264 on 2016/12/15. + */ +import {CommonModule} from '@angular/common'; +import {NgModule} from '@angular/core'; +import {PlxButtonDirective} from './button.directive'; + +@NgModule({ + imports: [CommonModule], + exports: [PlxButtonDirective], + declarations: [PlxButtonDirective] +}) +export class PlxButtonModule { +}
\ No newline at end of file diff --git a/sdc-workflow-designer-ui/src/app/paletx/core/pxbutton/index.ts b/sdc-workflow-designer-ui/src/app/paletx/core/pxbutton/index.ts new file mode 100644 index 00000000..f435b247 --- /dev/null +++ b/sdc-workflow-designer-ui/src/app/paletx/core/pxbutton/index.ts @@ -0,0 +1,2 @@ +export * from './button.module'; +export * from './button-state';
\ No newline at end of file |