1 | "use strict";
|
2 | var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
3 | var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
4 | if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
5 | 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;
|
6 | return c > 3 && r && Object.defineProperty(target, key, r), r;
|
7 | };
|
8 | var __metadata = (this && this.__metadata) || function (k, v) {
|
9 | if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
|
10 | };
|
11 | var router_1 = require('@angular/router');
|
12 | var core_1 = require('@angular/core');
|
13 | var core_2 = require('@angular/core');
|
14 | var _ = require('lodash');
|
15 | var hljs = require('highlight.js');
|
16 | var rxjs_1 = require('rxjs');
|
17 | var http_1 = require('@angular/http');
|
18 | var DiffBoxCode = (function () {
|
19 | function DiffBoxCode(compiler, vcRef) {
|
20 | this.compiler = compiler;
|
21 | this.vcRef = vcRef;
|
22 | }
|
23 | DiffBoxCode.prototype.ngOnChanges = function () {
|
24 | if (!this.diffboxCode || this.diffboxCode === '') {
|
25 | return;
|
26 | }
|
27 | var content = this.diffboxCode.replace(/[{}]/g, function (match) {
|
28 | return '<span>{{ \'' + match + '\' }}</span>';
|
29 | });
|
30 | var DynamicComponent = (function () {
|
31 | function DynamicComponent() {
|
32 | }
|
33 | DynamicComponent = __decorate([
|
34 | core_1.Component({
|
35 | selector: 'diffbox-container',
|
36 | template: content
|
37 | }),
|
38 | __metadata('design:paramtypes', [])
|
39 | ], DynamicComponent);
|
40 | return DynamicComponent;
|
41 | }());
|
42 | var DynamicModule = (function () {
|
43 | function DynamicModule() {
|
44 | }
|
45 | DynamicModule = __decorate([
|
46 | core_2.NgModule({
|
47 | imports: [],
|
48 | declarations: [DynamicComponent]
|
49 | }),
|
50 | __metadata('design:paramtypes', [])
|
51 | ], DynamicModule);
|
52 | return DynamicModule;
|
53 | }());
|
54 | var factories = this.compiler.compileModuleAndAllComponentsSync(DynamicModule);
|
55 | var compFactory = factories.componentFactories.find(function (x) { return x.componentType === DynamicComponent; });
|
56 | var injector = core_2.ReflectiveInjector.fromResolvedProviders([], this.vcRef.parentInjector);
|
57 | this.vcRef.createComponent(compFactory, 0, injector, []);
|
58 | };
|
59 | __decorate([
|
60 | core_1.Input('diffboxCode'),
|
61 | __metadata('design:type', String)
|
62 | ], DiffBoxCode.prototype, "diffboxCode", void 0);
|
63 | DiffBoxCode = __decorate([
|
64 | core_2.Directive({
|
65 | selector: '[diffboxCode]'
|
66 | }),
|
67 | __metadata('design:paramtypes', [core_2.Compiler, core_2.ViewContainerRef])
|
68 | ], DiffBoxCode);
|
69 | return DiffBoxCode;
|
70 | }());
|
71 | exports.DiffBoxCode = DiffBoxCode;
|
72 | var DiffBoxComponent = (function () {
|
73 | function DiffBoxComponent(route, http) {
|
74 | this.route = route;
|
75 | this.http = http;
|
76 | this.files = [];
|
77 | }
|
78 | DiffBoxComponent.prototype.ngOnInit = function () {
|
79 | var _this = this;
|
80 | this.route.data.subscribe(function (data) {
|
81 | var tutorialBundle = data.resolveData.tutorial;
|
82 | var revision = data.resolveData.gitTagRevision;
|
83 | _this.diffDetails = tutorialBundle.steps[_this.step];
|
84 | _this.tutorialData = tutorialBundle.tutorial;
|
85 | _this.revision = revision;
|
86 | if (!_this.diffDetails) {
|
87 | throw new Error("Unable to find step " + _this.step + " in you tutorial " + _this.tutorialName + "!");
|
88 | }
|
89 | _this.files = Object.keys(_this.diffDetails.files);
|
90 | });
|
91 | };
|
92 | DiffBoxComponent.prototype.getFileModification = function (filename) {
|
93 | return this.diffDetails.files[filename];
|
94 | };
|
95 | DiffBoxComponent.prototype.getImproveLink = function (filename) {
|
96 | if (this.tutorialData && this.tutorialData.improveCodeUrlResolve) {
|
97 | var urlObs = this.tutorialData.improveCodeUrlResolve(this.tutorialData, this.diffDetails, filename, this.step, this.revision, this.http);
|
98 | if (urlObs) {
|
99 | return urlObs;
|
100 | }
|
101 | }
|
102 | return rxjs_1.Observable.of({
|
103 | url: ''
|
104 | });
|
105 | };
|
106 | DiffBoxComponent.prototype.getFileContent = function (filename) {
|
107 | var lines = this.getLines(filename);
|
108 | var content = '';
|
109 | lines.forEach(function (line) {
|
110 | content += '<pre class="' + line.cssClass + '">' + line.highlightedContent + '</pre>';
|
111 | });
|
112 | return content;
|
113 | };
|
114 | DiffBoxComponent.prototype.buildGitHubLink = function (filename) {
|
115 | return "http://github.com/" + this.tutorialData.gitHub + "/commit/" + this.diffDetails.sha;
|
116 | };
|
117 | DiffBoxComponent.prototype.getLineNumbers = function (filename) {
|
118 | var lineRanges = this.getFileModification(filename).map(function (section) {
|
119 | return _.range(section.lineNumbers.added.start, section.lineNumbers.added.start + section.lineNumbers.added.lines);
|
120 | });
|
121 | return lineRanges.reduce(function (prev, curr) {
|
122 | if (prev) {
|
123 | return prev.concat(' ').concat(curr);
|
124 | }
|
125 | else {
|
126 | return curr;
|
127 | }
|
128 | }, null);
|
129 | };
|
130 | DiffBoxComponent.prototype.getLines = function (filename) {
|
131 | var _this = this;
|
132 | var sectionLines = this.getFileModification(filename).map(function (section) {
|
133 | var allLines = section.lines.map(function (line) {
|
134 | var highlightedContent = null;
|
135 | if (line.content) {
|
136 | var ext = _.last(filename.split('.'));
|
137 | var fileType = ext;
|
138 | if (ext === 'jsx') {
|
139 | fileType = 'js';
|
140 | }
|
141 | else if (ext === 'less') {
|
142 | fileType = 'css';
|
143 | }
|
144 | else if (fileType === 'ts') {
|
145 | fileType = 'typescript';
|
146 | }
|
147 | try {
|
148 | highlightedContent = hljs.highlight(fileType, line.content, true).value;
|
149 | }
|
150 | catch (e) {
|
151 | highlightedContent = line.content;
|
152 | }
|
153 | }
|
154 | line.highlightedContent = highlightedContent || ' ';
|
155 | line.cssClass = 'line-' + line.type;
|
156 | return line;
|
157 | });
|
158 | if (_this.hideRemoved === false) {
|
159 | return allLines;
|
160 | }
|
161 | else {
|
162 | return allLines.filter(function (item) { return item.type !== 'removed'; });
|
163 | }
|
164 | });
|
165 | return sectionLines.reduce(function (prev, curr) {
|
166 | if (prev) {
|
167 | return prev.concat({ highlightedContent: '<span class="hljs-comment">...some lines skipped...</span>' }).concat(curr);
|
168 | }
|
169 | else {
|
170 | return curr;
|
171 | }
|
172 | }, null);
|
173 | };
|
174 | __decorate([
|
175 | core_1.Input('step'),
|
176 | __metadata('design:type', String)
|
177 | ], DiffBoxComponent.prototype, "step", void 0);
|
178 | __decorate([
|
179 | core_1.Optional(),
|
180 | core_1.Input('filename'),
|
181 | __metadata('design:type', String)
|
182 | ], DiffBoxComponent.prototype, "optionalFilename", void 0);
|
183 | __decorate([
|
184 | core_1.Optional(),
|
185 | core_1.Input('hideRemoved'),
|
186 | __metadata('design:type', Boolean)
|
187 | ], DiffBoxComponent.prototype, "hideRemoved", void 0);
|
188 | __decorate([
|
189 | core_1.Input('tutorial'),
|
190 | __metadata('design:type', String)
|
191 | ], DiffBoxComponent.prototype, "tutorialName", void 0);
|
192 | __decorate([
|
193 | core_1.ViewChild('htmlContainer'),
|
194 | __metadata('design:type', Object)
|
195 | ], DiffBoxComponent.prototype, "htmlContainer", void 0);
|
196 | DiffBoxComponent = __decorate([
|
197 | core_1.Component({
|
198 | selector: 'diffbox',
|
199 | 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>",
|
200 | styles: [
|
201 | "\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"
|
202 | ]
|
203 | }),
|
204 | __metadata('design:paramtypes', [router_1.ActivatedRoute, http_1.Http])
|
205 | ], DiffBoxComponent);
|
206 | return DiffBoxComponent;
|
207 | }());
|
208 | exports.DiffBoxComponent = DiffBoxComponent;
|
209 |
|
\ | No newline at end of file |