loop-modules/directives/brand.directive.ts

Shared modules for the Loop product suite.

// angular
import { Directive, OnInit } 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}
 */
@Directive({
    selector: '[branding]',
})
export class BrandingDirective implements OnInit {

    private _styles: any;

    constructor(private brand: BrandService) {}

    ngOnInit() {
        this.brand.setBrand().subscribe((color: any) => {
             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
                }
            };
            let 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
     */
    private cssify(styleObj: any) {
        let css: Array<string> = [];
        for(let className in styleObj) {
            let styleProperty = Object.keys(styleObj[className])[0];
            let style = className + ' { ' + styleProperty + ': ' + styleObj[className][styleProperty] +'!important; }';
            css.push(style);
        }
        return css.join('');
    }
}