ng-prism/ng2-src-directive/src.directive.js

An Angular2 codeblock highlighting component using Prismjs.

"use strict";
var core_1 = require('@angular/core');
var http_1 = require('@angular/http');
// import { Sourcable } from './sourcable';
var Observable_1 = require('rxjs/Observable');
var Subject_1 = require('rxjs/Subject');
require('rxjs/add/observable/empty');
require('rxjs/add/observable/timer');
require('rxjs/add/operator/map');
require('rxjs/add/operator/filter');
require('rxjs/add/operator/distinctUntilChanged');
require('rxjs/add/operator/debounce');
require('rxjs/add/operator/do');
require('rxjs/add/operator/retry');
require('rxjs/add/operator/catch');
require('rxjs/add/operator/switchMap');
exports.SourceDebounceTime = 300;
var SrcDirective = (function () {
    function SrcDirective(_element, _http, _renderer, _sourceDebounceTime) {
        this.sourceChanged = new Subject_1.Subject();
        this._debounceTime = 300;
        this._firstRequest = true;
        this._element = _element;
        this._http = _http;
        this._renderer = _renderer;
        this._sourceDebounceTime = _sourceDebounceTime;
    }
    Object.defineProperty(SrcDirective.prototype, "src", {
        set: function (source) {
            this._src = source;
            this.sourceChanged.next(source);
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(SrcDirective.prototype, "debounceTime", {
        get: function () {
            return this._debounceTime;
        },
        /**
         * Set the amount of time in ms to wait before processing changes to the src
         * input.
         *
         * This can prevent unnecessary http requests. The default is 300ms.
         */
        set: function (time) {
            var parsed = parseInt(time, 10);
            if (!isNaN(parsed) && parsed >= 0) {
                this._debounceTime = parsed;
            }
        },
        enumerable: true,
        configurable: true
    });
    SrcDirective.prototype.ngOnInit = function () {
        // this.host = this._element as Sourcable;
        this.host = this._element;
        if (this.host === this) {
            this.host = this._element;
        }
        if (this._sourceDebounceTime) {
            this.debounceTime = this._sourceDebounceTime;
        }
        this._handleSourceChanges();
        if (this._src) {
            this.sourceChanged.next(this._src);
        }
    };
    SrcDirective.prototype.ngOnDestroy = function () {
        if (this._subscription) {
            this._subscription.unsubscribe();
        }
    };
    SrcDirective.prototype._handleSourceChanges = function () {
        var _this = this;
        this._subscription = this.sourceChanged
            .do(function (source) {
            if (_this.host.sourceChanged) {
                _this.host.sourceChanged(source);
            }
        })
            .filter(function (source) {
            return _this._emptySources(source);
        })
            .map(function (source) {
            return _this._addExtensionMatches(source);
        })
            .filter(function (req) {
            return _this._nonFiles(req);
        })
            .distinctUntilChanged()
            .do(function (req) {
            if (_this.host.sourceLoading) {
                _this.host.sourceLoading(req.source);
            }
        })
            .debounce(function () { return Observable_1.Observable.timer(_this._firstRequest
            ? 0
            : _this.debounceTime); })
            .do(function () { return _this._firstRequest = false; })
            .switchMap(function (req) {
            return _this._fetchSrc(req);
        })
            .catch(function (error) {
            if (_this.host.sourceError) {
                _this.host.sourceError(error);
            }
            console.error(error);
            return Observable_1.Observable.empty();
        })
            .subscribe(function (res) {
            if (_this.host.sourceReceived) {
                _this.host.sourceReceived(res);
            }
            else {
                _this._renderer.setElementProperty(_this._element.nativeElement, 'innerHTML', res.text());
            }
        }, function (error) {
            if (_this.host.sourceError) {
                _this.host.sourceError(error);
            }
            console.error(error);
        });
    };
    SrcDirective.prototype._emptySources = function (source) {
        return !(source === undefined || source === null || source === '');
    };
    SrcDirective.prototype._addExtensionMatches = function (source) {
        return { source: source, extMatches: source.match(/\.(\w+)$/) };
    };
    SrcDirective.prototype._nonFiles = function (req) {
        if (!req.extMatches) {
            if (req.source && req.source.length > 0) {
                if (this.host.sourceError) {
                    this.host.sourceError({ message: req.source + " is not a file." });
                }
            }
            else {
                if (this.host.sourceError) {
                    this.host.sourceError({ message: "No source file given." });
                }
            }
            return false;
        }
        return true;
    };
    SrcDirective.prototype._fetchSrc = function (req) {
        var _this = this;
        return this._http
            .get(req.source)
            .catch(function (error) {
            if (_this.host.sourceError) {
                _this.host.sourceError({ message: req.source + " not found." });
            }
            return Observable_1.Observable.empty();
        });
    };
    SrcDirective.decorators = [
        { type: core_1.Directive, args: [{ selector: '[src]' },] },
    ];
    /** @nocollapse */
    SrcDirective.ctorParameters = function () { return [
        { type: core_1.ElementRef, },
        { type: http_1.Http, },
        { type: core_1.Renderer, },
        { type: undefined, decorators: [{ type: core_1.Optional }, { type: core_1.Inject, args: [exports.SourceDebounceTime,] },] },
    ]; };
    SrcDirective.propDecorators = {
        'src': [{ type: core_1.Input },],
        'debounceTime': [{ type: core_1.Input },],
    };
    return SrcDirective;
}());
exports.SrcDirective = SrcDirective;