my-test123
Version:
A planner front-end for Fabric8.
204 lines • 8.57 kB
JavaScript
import { Component, Input, Output, EventEmitter, HostListener, ViewChild } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { AuthenticationService } from 'ngx-login-client';
import { Broadcaster, Logger } from 'ngx-base';
import { WorkItemService } from '../../services/work-item.service';
/*
* A markdown field control with preview and user defined
* window size.
*/
var MarkdownControlComponent = /** @class */ (function () {
function MarkdownControlComponent(authService, logger, broadcaster, workItemService, route) {
this.authService = authService;
this.logger = logger;
this.broadcaster = broadcaster;
this.workItemService = workItemService;
this.route = route;
// event when the markdown value is updated, emits
// the new text value as the event.
this.onUpdate = new EventEmitter();
this.loggedIn = false;
this.textEditable = false;
this.textViewType = 'preview';
this.renderedText = '';
this.originalMarkdownText = '';
this.markdownText = '';
this.markdownViewExpanded = false;
this.tabBarVisible = false;
this.showMore = false;
this.initHeight = 58;
this.maxHeight = 192;
}
MarkdownControlComponent.prototype.ngOnInit = function () {
var _this = this;
this.loggedIn = this.authService.isLoggedIn();
this.broadcaster.on('logout')
.subscribe(function (message) {
_this.loggedIn = false;
});
};
// called when the parents data binding on markdownValue changes.
MarkdownControlComponent.prototype.ngOnChanges = function (changes) {
this.showMore = false;
var newMarkdownValue = changes['markdownValue'].currentValue;
if (!newMarkdownValue) {
// reset the value
this.renderedText = '';
this.textViewType = 'preview';
}
else {
this.markdownText = newMarkdownValue || '';
this.originalMarkdownText = this.markdownText;
this.showPreview();
}
};
// returns the current value of the field
MarkdownControlComponent.prototype.getText = function () {
if (this.textEditableParaElement)
return this.textEditableParaElement.nativeElement.innerHTML;
else
return '';
};
// switches to the preview tab and shows the rendered preview.
MarkdownControlComponent.prototype.showPreview = function () {
var _this = this;
if (this.textEditable && this.textEditableParaElement) {
// if we're already in the preview, do not save the innerHTML
this.markdownText = this.textEditableParaElement.nativeElement.innerText;
this.textEditable = false;
}
this.workItemService.renderMarkDown(this.markdownText)
.subscribe(function (renderedHtml) {
_this.renderedText = renderedHtml;
_this.textViewType = 'preview';
if (_this.textEditableParaElement)
_this.textEditableParaElement.nativeElement.innerHTML = _this.renderedText;
setTimeout(function () {
if (_this.detailWrapper.nativeElement.clientHeight > _this.maxHeight) {
_this.showMore = true;
}
else {
var cond1 = _this.detailText.nativeElement.clientHeight > _this.detailWrapper.nativeElement.clientHeight;
var cond2 = _this.detailText.nativeElement.clientHeight > _this.initHeight;
_this.showMore = cond1 && cond2;
//console.log('Detail text', this.detailText.nativeElement.clientHeight);
//console.log('Detail wrapper', this.detailWrapper.nativeElement.clientHeight)
}
}, 10);
});
};
// opens the text field and enables editing on markdown tab.
MarkdownControlComponent.prototype.openText = function () {
var _this = this;
if (this.loggedIn) {
this.tabBarVisible = true;
this.textEditable = true;
this.textViewType = 'markdown';
if (this.textEditableParaElement)
this.textEditableParaElement.nativeElement.innerHTML = this.markdownText;
setTimeout(function () {
if (_this.textEditable && _this.textEditableParaElement) {
_this.textEditableParaElement.nativeElement.focus();
}
});
}
};
// disables editing, switches to preview and saves value to parent.
MarkdownControlComponent.prototype.closeText = function () {
if (this.textEditable && this.textEditableParaElement) {
// if we're already in the preview, do not save the innerHTML
this.markdownText = this.textEditableParaElement.nativeElement.innerText;
}
// commit the edited text, becoming the new original value
this.originalMarkdownText = this.markdownText;
// set the field to the rendered text
this.tabBarVisible = false;
this.textEditable = false;
this.showPreview();
// emit save event
this.onUpdate.emit(this.markdownText.trim());
};
// click on the field itself.
MarkdownControlComponent.prototype.onClickMarkdownField = function () {
if (!this.tabBarVisible)
this.openText();
};
// click on the markdown tab.
MarkdownControlComponent.prototype.onClickMarkdownTab = function () {
this.openText();
};
// click on the preview tab.
MarkdownControlComponent.prototype.onClickPreviewTab = function () {
this.showPreview();
};
// called on every edit action on the field.
MarkdownControlComponent.prototype.onTextUpdate = function (newValue) {
// NOP
//this.markdownText = newValue;
};
// enter in the text input.
MarkdownControlComponent.prototype.onKeyEnter = function ($event) {
// NOP
};
// click on the edit icon on the right hand.
MarkdownControlComponent.prototype.onClickEditIcon = function () {
this.openText();
};
// click on the cancel icon.
MarkdownControlComponent.prototype.onClickCancelIcon = function () {
// reset the value to the original value
this.markdownText = this.originalMarkdownText;
if (this.textEditableParaElement)
this.textEditableParaElement.nativeElement.innerText = this.markdownText;
this.closeText();
};
// click on the save icon.
MarkdownControlComponent.prototype.onClickSaveIcon = function () {
this.closeText();
};
// click on the expand button.
MarkdownControlComponent.prototype.toggleMarkdownViewExpanded = function () {
this.markdownViewExpanded = !this.markdownViewExpanded;
};
MarkdownControlComponent.prototype.onKeyEvent = function (event) {
event = (event || window.event);
// for ESC key handling
if (event.keyCode == 27) {
try {
event.preventDefault(); //Non-IE
}
catch (x) {
event.returnValue = false; //IE
}
if (this.textEditable) {
this.closeText();
}
}
};
MarkdownControlComponent.decorators = [
{ type: Component, args: [{
selector: 'markdown-control',
template: require('./markdown-control.component.html'),
styles: [require('./markdown-control.component.css').toString()]
},] },
];
/** @nocollapse */
MarkdownControlComponent.ctorParameters = function () { return [
{ type: AuthenticationService, },
{ type: Logger, },
{ type: Broadcaster, },
{ type: WorkItemService, },
{ type: ActivatedRoute, },
]; };
MarkdownControlComponent.propDecorators = {
'markdownValue': [{ type: Input },],
'onUpdate': [{ type: Output },],
'textEditableParaElement': [{ type: ViewChild, args: ['editTextPara',] },],
'detailText': [{ type: ViewChild, args: ['detailText',] },],
'detailWrapper': [{ type: ViewChild, args: ['detailWrapper',] },],
'onKeyEvent': [{ type: HostListener, args: ['window:keydown', ['$event'],] },],
};
return MarkdownControlComponent;
}());
export { MarkdownControlComponent };
//# sourceMappingURL=markdown-control.component.js.map