angular-meteor-tutorials-infrastructure/dist/diffbox.component.js

"use strict";
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
var router_1 = require('@angular/router');
var core_1 = require('@angular/core');
var core_2 = require('@angular/core');
var _ = require('lodash');
var hljs = require('highlight.js');
var rxjs_1 = require('rxjs');
var http_1 = require('@angular/http');
var DiffBoxCode = (function () {
    function DiffBoxCode(compiler, vcRef) {
        this.compiler = compiler;
        this.vcRef = vcRef;
    }
    DiffBoxCode.prototype.ngOnChanges = function () {
        if (!this.diffboxCode || this.diffboxCode === '') {
            return;
        }
        var content = this.diffboxCode.replace(/[{}]/g, function (match) {
            return '<span>{{ \'' + match + '\' }}</span>';
        });
        var DynamicComponent = (function () {
            function DynamicComponent() {
            }
            DynamicComponent = __decorate([
                core_1.Component({
                    selector: 'diffbox-container',
                    template: content
                }), 
                __metadata('design:paramtypes', [])
            ], DynamicComponent);
            return DynamicComponent;
        }());
        var DynamicModule = (function () {
            function DynamicModule() {
            }
            DynamicModule = __decorate([
                core_2.NgModule({
                    imports: [],
                    declarations: [DynamicComponent]
                }), 
                __metadata('design:paramtypes', [])
            ], DynamicModule);
            return DynamicModule;
        }());
        var factories = this.compiler.compileModuleAndAllComponentsSync(DynamicModule);
        var compFactory = factories.componentFactories.find(function (x) { return x.componentType === DynamicComponent; });
        var injector = core_2.ReflectiveInjector.fromResolvedProviders([], this.vcRef.parentInjector);
        this.vcRef.createComponent(compFactory, 0, injector, []);
    };
    __decorate([
        core_1.Input('diffboxCode'), 
        __metadata('design:type', String)
    ], DiffBoxCode.prototype, "diffboxCode", void 0);
    DiffBoxCode = __decorate([
        core_2.Directive({
            selector: '[diffboxCode]'
        }), 
        __metadata('design:paramtypes', [core_2.Compiler, core_2.ViewContainerRef])
    ], DiffBoxCode);
    return DiffBoxCode;
}());
exports.DiffBoxCode = DiffBoxCode;
var DiffBoxComponent = (function () {
    function DiffBoxComponent(route, http) {
        this.route = route;
        this.http = http;
        this.files = [];
    }
    DiffBoxComponent.prototype.ngOnInit = function () {
        var _this = this;
        this.route.data.subscribe(function (data) {
            var tutorialBundle = data.resolveData.tutorial;
            var revision = data.resolveData.gitTagRevision;
            _this.diffDetails = tutorialBundle.steps[_this.step];
            _this.tutorialData = tutorialBundle.tutorial;
            _this.revision = revision;
            if (!_this.diffDetails) {
                throw new Error("Unable to find step " + _this.step + " in you tutorial " + _this.tutorialName + "!");
            }
            _this.files = Object.keys(_this.diffDetails.files);
        });
    };
    DiffBoxComponent.prototype.getFileModification = function (filename) {
        return this.diffDetails.files[filename];
    };
    DiffBoxComponent.prototype.getImproveLink = function (filename) {
        if (this.tutorialData && this.tutorialData.improveCodeUrlResolve) {
            var urlObs = this.tutorialData.improveCodeUrlResolve(this.tutorialData, this.diffDetails, filename, this.step, this.revision, this.http);
            if (urlObs) {
                return urlObs;
            }
        }
        return rxjs_1.Observable.of({
            url: ''
        });
    };
    DiffBoxComponent.prototype.getFileContent = function (filename) {
        var lines = this.getLines(filename);
        var content = '';
        lines.forEach(function (line) {
            content += '<pre class="' + line.cssClass + '">' + line.highlightedContent + '</pre>';
        });
        return content;
    };
    DiffBoxComponent.prototype.buildGitHubLink = function (filename) {
        return "http://github.com/" + this.tutorialData.gitHub + "/commit/" + this.diffDetails.sha;
    };
    DiffBoxComponent.prototype.getLineNumbers = function (filename) {
        var lineRanges = this.getFileModification(filename).map(function (section) {
            return _.range(section.lineNumbers.added.start, section.lineNumbers.added.start + section.lineNumbers.added.lines);
        });
        return lineRanges.reduce(function (prev, curr) {
            if (prev) {
                return prev.concat(' ').concat(curr);
            }
            else {
                return curr;
            }
        }, null);
    };
    DiffBoxComponent.prototype.getLines = function (filename) {
        var _this = this;
        var sectionLines = this.getFileModification(filename).map(function (section) {
            var allLines = section.lines.map(function (line) {
                var highlightedContent = null;
                if (line.content) {
                    var ext = _.last(filename.split('.'));
                    var fileType = ext;
                    if (ext === 'jsx') {
                        fileType = 'js';
                    }
                    else if (ext === 'less') {
                        fileType = 'css';
                    }
                    else if (fileType === 'ts') {
                        fileType = 'typescript';
                    }
                    try {
                        highlightedContent = hljs.highlight(fileType, line.content, true).value;
                    }
                    catch (e) {
                        highlightedContent = line.content;
                    }
                }
                line.highlightedContent = highlightedContent || ' ';
                line.cssClass = 'line-' + line.type;
                return line;
            });
            if (_this.hideRemoved === false) {
                return allLines;
            }
            else {
                return allLines.filter(function (item) { return item.type !== 'removed'; });
            }
        });
        return sectionLines.reduce(function (prev, curr) {
            if (prev) {
                return prev.concat({ highlightedContent: '<span class="hljs-comment">...some lines skipped...</span>' }).concat(curr);
            }
            else {
                return curr;
            }
        }, null);
    };
    __decorate([
        core_1.Input('step'), 
        __metadata('design:type', String)
    ], DiffBoxComponent.prototype, "step", void 0);
    __decorate([
        core_1.Optional(),
        core_1.Input('filename'), 
        __metadata('design:type', String)
    ], DiffBoxComponent.prototype, "optionalFilename", void 0);
    __decorate([
        core_1.Optional(),
        core_1.Input('hideRemoved'), 
        __metadata('design:type', Boolean)
    ], DiffBoxComponent.prototype, "hideRemoved", void 0);
    __decorate([
        core_1.Input('tutorial'), 
        __metadata('design:type', String)
    ], DiffBoxComponent.prototype, "tutorialName", void 0);
    __decorate([
        core_1.ViewChild('htmlContainer'), 
        __metadata('design:type', Object)
    ], DiffBoxComponent.prototype, "htmlContainer", void 0);
    DiffBoxComponent = __decorate([
        core_1.Component({
            selector: 'diffbox',
            template: "\n<div *ngFor=\"let filename of files\">\n  <div class=\"diffbox\" *ngIf=\"getFileContent(filename) !== ''\">\n    <div class=\"title-panel\">\n      <span class=\"step-number\">{{step}}</span> <span class=\"commit-summary\">{{diffDetails.summary}}</span>\n      <a target=\"_blank\" class=\"github-commit-link\" [href]=\"buildGitHubLink(filename)\">{{filename}}</a>\n    </div>\n    <div class=\"code-container\">\n      <div class=\"scroll-container\">\n        <div class=\"line-numbers\">\n          <pre *ngFor=\"let lineNumber of getLineNumbers(filename)\" class=\"line-number\">{{lineNumber}}</pre>\n        </div>\n        <div class=\"line-content\" [diffboxCode]=\"getFileContent(filename)\"></div>\n      </div>\n      <div class=\"improve-code\" *ngIf=\"(getImproveLink(filename) | async)?.url !== ''\">\n        <a [href]=\"(getImproveLink(filename) | async)?.url\">Improve this code</a>\n      </div>\n    </div>\n  </div>\n</div>",
            styles: [
                "\n.diffbox {\n  border: 1px solid #eee;\n  -webkit-text-size-adjust: 100%;\n  margin: 1.5em 0;\n}\n.diffbox .title-panel {\n  padding: 5px 12px;\n  background: #eee;\n  border-bottom: solid 1px #eee;\n  color: #333;\n  overflow: auto;\n  font-size: .875rem;\n}\n.diffbox .title-panel .github-commit-link {\n  float: right;\n  color: black;\n  text-decoration: none;\n  border-bottom: none !important;\n}\n.diffbox .code-container {\n  overflow-x: auto;\n  position: relative;\n  padding: 9px 3px 3px 0;\n  background: #f8f8f8;\n}\n.diffbox .code-container .scroll-container {\n  display: inline-block;\n  min-width: 100%;\n  overflow: hidden;\n}\n.diffbox .code-container:hover > .improve-code {\n  display: block;\n}\n.diffbox .code-container .improve-code {\n  display: none;\n  position: absolute;\n  bottom: 0;\n  right: 0;\n  background: rgba(255, 255, 255, 0.5);\n  padding: 5px;\n  cursor: pointer;\n}\n.diffbox .code-container .line-numbers {\n  text-align: right;\n  -moz-user-select: none;\n  -khtml-user-select: none;\n  -webkit-user-select: none;\n  -o-user-select: none;\n  position: absolute;\n  width: 25px;\n}\n.diffbox .code-container .line-numbers .line-number {\n  color: #aaa;\n  font-style: italic;\n  margin: 0 !important;\n}\n\n"
            ]
        }), 
        __metadata('design:paramtypes', [router_1.ActivatedRoute, http_1.Http])
    ], DiffBoxComponent);
    return DiffBoxComponent;
}());
exports.DiffBoxComponent = DiffBoxComponent;
//# sourceMappingURL=diffbox.component.js.map