Matteo Scandolo | 9d7940c | 2017-01-19 18:28:43 -0800 | [diff] [blame^] | 1 | import * as $ from 'jquery'; |
| 2 | import * as _ from 'lodash'; |
| 3 | |
| 4 | export interface IXosSidePanelService { |
| 5 | open(): void; |
| 6 | close(): void; |
| 7 | injectComponent(componentName: string, attributes?: any, transclude?: string): void; |
| 8 | } |
| 9 | |
| 10 | export class XosSidePanel implements IXosSidePanelService { |
| 11 | static $inject = ['$rootScope', '$compile']; |
| 12 | public sidePanelElName = 'xos-side-panel'; |
| 13 | public sidePanelElClass = '.xos-side-panel'; |
| 14 | public sidePanelEl: JQuery; |
| 15 | |
| 16 | constructor ( |
| 17 | private $rootScope: ng.IRootScopeService, |
| 18 | private $compile: ng.ICompileService |
| 19 | ) { |
| 20 | this.sidePanelEl = $(`${this.sidePanelElName} > ${this.sidePanelElClass}`); |
| 21 | } |
| 22 | |
| 23 | public open() { |
| 24 | $(`${this.sidePanelElName} > ${this.sidePanelElClass}`).addClass('open'); |
| 25 | }; |
| 26 | |
| 27 | public close() { |
| 28 | $(`${this.sidePanelElName} > ${this.sidePanelElClass}`).removeClass('open'); |
| 29 | }; |
| 30 | |
| 31 | public injectComponent(componentName: string, attributes?: any, transclude?: string) { |
| 32 | const componentTagName = this.camelToSnakeCase(componentName); |
| 33 | let scope = this.$rootScope.$new(); |
| 34 | let attr: string = ''; |
| 35 | |
| 36 | // NOTE add a flag to keep the loaded compoenents? |
| 37 | this.removeInjectedComponents(); |
| 38 | |
| 39 | if (angular.isDefined(attributes) && angular.isObject(attributes)) { |
| 40 | attr = this.stringifyAttributes(attributes); |
| 41 | scope = angular.merge(scope, attributes); |
| 42 | } |
| 43 | |
| 44 | const componentTag = `<${componentTagName} ${attr}>${transclude || ''}</${componentTagName}>`; |
| 45 | const element = this.$compile(componentTag)(scope); |
| 46 | this.sidePanelEl.find('#side-panel-container').append(element); |
| 47 | this.open(); |
| 48 | } |
| 49 | |
| 50 | public removeInjectedComponents() { |
| 51 | this.sidePanelEl.find('#side-panel-container').html(''); |
| 52 | } |
| 53 | |
| 54 | private stringifyAttributes(attributes: any): string { |
| 55 | return _.reduce(Object.keys(attributes), (string: string, a: string) => { |
| 56 | string += `${a}="${a}"`; |
| 57 | return string; |
| 58 | }, ''); |
| 59 | } |
| 60 | |
| 61 | private camelToSnakeCase(name: string): string { |
| 62 | return name.split(/(?=[A-Z])/).map(w => w.toLowerCase()).join('-'); |
| 63 | }; |
| 64 | } |