loop-modules/directives/brand.directive.js

Shared modules for the Loop product suite.

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);
};
// angular
import { Directive } from '@angular/core';
// app
import { BrandService } from '../services/index';
/**
 * Handles branding an application with style injection
 * Example usage: <div branding></div>
 * @author Sean Perkins <sean@meetmaestro.com>
 * @export
 * @class BrandingDirective
 * @implements {OnInit}
 */
var BrandingDirective = (function () {
    function BrandingDirective(brand) {
        this.brand = brand;
    }
    BrandingDirective.prototype.ngOnInit = function () {
        var _this = this;
        this.brand.setBrand().subscribe(function (color) {
            _this._styles = {
                '.ma-primary-text': {
                    color: color
                },
                '.noUi-connect': {
                    'background-color': color
                },
                '.btn-info.active': {
                    'background-color': color,
                    'border-color': color
                },
                '.text-info': {
                    'color': color
                },
                '.ma-primary-bg': {
                    'background-color': color
                },
                '.ma-primary-border': {
                    'border-color': color
                },
                '.swal2-confirm': {
                    'color': color,
                    'border-color': color
                },
                '.router-link-active:first-child:after': {
                    'border-top': '6px solid ' + color
                },
                '#toast-container .toast::before, #toast-container .toast::after': {
                    'color': color
                }
            };
            var styleTag = document.getElementsByTagName('STYLE')[0];
            styleTag.innerHTML += _this.cssify(_this._styles);
        });
    };
    /**
     * Converts a JS object into a CSS string block
     *
     * @private
     * @param {*} styleObj The style object to convert to css
     * @returns Prettified CSS string for injection into a style tag
     */
    BrandingDirective.prototype.cssify = function (styleObj) {
        var css = [];
        for (var className in styleObj) {
            var styleProperty = Object.keys(styleObj[className])[0];
            var style = className + ' { ' + styleProperty + ': ' + styleObj[className][styleProperty] + '!important; }';
            css.push(style);
        }
        return css.join('');
    };
    return BrandingDirective;
}());
BrandingDirective = __decorate([
    Directive({
        selector: '[branding]',
    }),
    __metadata("design:paramtypes", [BrandService])
], BrandingDirective);
export { BrandingDirective };