ng-realmark/component/diff3.component.js

Real-time Markdown W/ Markdown three way merge

import { Component, Input, Output, EventEmitter } from '@angular/core';
import { RealMarkService } from '../service/realmark.service';
import { Revision } from '../config';
import { FormControl } from '@angular/forms';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/throttleTime';
import 'rxjs/add/observable/fromEvent';
import 'rxjs/add/operator/distinctUntilChanged';
var Diff3Component = /** @class */ (function () {
    function Diff3Component(realMarkService) {
        this.realMarkService = realMarkService;
        this.merged = new EventEmitter();
        this._showDeleted = false;
        this.showDeletedText = "Show Deleted";
        this._showMarkdown = false;
        this.showMarkdownText = "Hide Markdown";
        this.editorControl = new FormControl();
    }
    /**
     * Changes value of showDeleted and re-evaluate compateMarkdown. Also updates button text.
     */
    Diff3Component.prototype.deletedClick = function () {
        if (this._showDeleted) {
            this._showDeleted = false;
            this.showDeletedText = "Show Deleted";
        }
        else {
            this._showDeleted = true;
            this.showDeletedText = "Hide Deleted";
        }
    };
    /**
     * Changes value of showMarkdown and re-evaluate compateMarkdown. Also updates button text.
     */
    Diff3Component.prototype.markdownClick = function () {
        if (this._showMarkdown) {
            this._showMarkdown = false;
            this.showMarkdownText = "Hide Markdown";
        }
        else {
            this._showMarkdown = true;
            this.showMarkdownText = "Show Markdown";
        }
    };
    /**
     * Compare selection update, change this.compare and re-evaluate compateMarkdown.
     */
    Diff3Component.prototype.changeCompare = function ($event) {
        var selected = $event.target.selectedOptions[0].value;
        if (selected === "live") {
            this._compare = this.live ? this.live.content : "";
        }
        else if (selected === "patch") {
            this._compare = this.patch ? this.patch.content : "";
        }
        else {
            this._compare = this.original ? this.original.content : "";
        }
    };
    /**
     * set element to update and run compareMarkdown().
     */
    Diff3Component.prototype.ngOnInit = function () {
        var _this = this;
        var mergeMarkdown = this.realMarkService.mergeMarkdown(this.patch, this.original, this.live);
        this._content = mergeMarkdown.content;
        this.editor = mergeMarkdown.content;
        this._compare = this.original ? this.original.content : "";
        // only update diff table on right after 1 second of no changes
        this.editorControl.valueChanges
            .debounceTime(1000)
            .distinctUntilChanged()
            .subscribe(function (newValue) {
            _this._content = newValue;
            _this.merged.emit(_this._content);
        }, function (err) {
            console.log(err);
        });
    };
    Diff3Component.decorators = [
        { type: Component, args: [{
                    selector: 'realmark-diff3',
                    template: "\n\n    <header>\n      <p><ng-content></ng-content></p>\n      <button (click)=\"deletedClick()\">{{showDeletedText}}</button>\n      <button *ngIf=\"!codeBlock\" (click)=\"markdownClick()\">{{showMarkdownText}}</button>\n      <div>Compare:\n        <select (change)=\"changeCompare($event)\">\n          <option value=\"original\">Original</option>\n          <option value=\"live\">Live</option>\n          <option value=\"patch\">Patch</option>\n        </select>\n      </div>\n    </header>\n    <div class=\"diff-content\">\n      <textarea name=\"input\" [(ngModel)]=\"editor\" id=\"editor\" [formControl]=\"editorControl\" ></textarea>\n      <realmark-diff [content]=\"_content\" [original]=\"_compare\" [showDeleted]=\"_showDeleted\" [showMarkdown]=\"_showMarkdown\"></realmark-diff>\n    </div>\n  "
                },] },
    ];
    /** @nocollapse */
    Diff3Component.ctorParameters = function () { return [
        { type: RealMarkService }
    ]; };
    Diff3Component.propDecorators = {
        patch: [{ type: Input }],
        original: [{ type: Input }],
        live: [{ type: Input }],
        codeBlock: [{ type: Input }],
        merged: [{ type: Output }]
    };
    return Diff3Component;
}());
export { Diff3Component };
//# sourceMappingURL=diff3.component.js.map