blob: 4858f63a48219d4a55ea61e1e69f6bd759c5b288 [file] [log] [blame]
Matteo Scandolo9d7940c2017-01-19 18:28:43 -08001import * as $ from 'jquery';
Matteo Scandolo4222a432017-01-23 12:18:40 -08002import {IXosComponentInjectorService} from '../services/helpers/component-injector.helpers';
Matteo Scandolo9d7940c2017-01-19 18:28:43 -08003
4export interface IXosSidePanelService {
5 open(): void;
6 close(): void;
7 injectComponent(componentName: string, attributes?: any, transclude?: string): void;
Matteo Scandolo5053cbe2017-01-31 17:37:56 -08008 removeInjectedComponents(): void;
Max Chufba10852017-08-02 17:07:57 -07009 toggleComponent(componentName: string, attributes?: any, transclude?: string): void;
Matteo Scandolo9d7940c2017-01-19 18:28:43 -080010}
11
12export class XosSidePanel implements IXosSidePanelService {
Matteo Scandolo5053cbe2017-01-31 17:37:56 -080013 static $inject = ['$rootScope', '$compile', '$timeout', 'XosComponentInjector'];
Matteo Scandolo9d7940c2017-01-19 18:28:43 -080014 public sidePanelElName = 'xos-side-panel';
15 public sidePanelElClass = '.xos-side-panel';
16 public sidePanelEl: JQuery;
Matteo Scandolo520a8a12017-03-10 17:31:37 -080017 private hasComponentLoaded: boolean;
Max Chu9cdd9532017-08-02 17:03:54 -070018 private componentToggle = false;
Matteo Scandolo9d7940c2017-01-19 18:28:43 -080019
20 constructor (
21 private $rootScope: ng.IRootScopeService,
Matteo Scandolo4222a432017-01-23 12:18:40 -080022 private $compile: ng.ICompileService,
Matteo Scandolo5053cbe2017-01-31 17:37:56 -080023 private $timeout: ng.ITimeoutService,
Matteo Scandolo4222a432017-01-23 12:18:40 -080024 private XosComponentInjector: IXosComponentInjectorService
Matteo Scandolo9d7940c2017-01-19 18:28:43 -080025 ) {
26 this.sidePanelEl = $(`${this.sidePanelElName} > ${this.sidePanelElClass}`);
27 }
28
29 public open() {
30 $(`${this.sidePanelElName} > ${this.sidePanelElClass}`).addClass('open');
31 };
32
33 public close() {
34 $(`${this.sidePanelElName} > ${this.sidePanelElClass}`).removeClass('open');
35 };
36
37 public injectComponent(componentName: string, attributes?: any, transclude?: string) {
Matteo Scandolo520a8a12017-03-10 17:31:37 -080038 let timeout = 0;
39 if (this.hasComponentLoaded) {
40 this.removeInjectedComponents();
41 timeout = 501; // wait for panel to close and remove component
42 }
43 this.$timeout(() => {
44 this.XosComponentInjector.injectComponent('#side-panel-container', componentName, attributes, transclude, true);
45 this.hasComponentLoaded = true;
46 this.open();
47 }, timeout);
Matteo Scandolo9d7940c2017-01-19 18:28:43 -080048 }
Matteo Scandolo5053cbe2017-01-31 17:37:56 -080049
50 public removeInjectedComponents() {
51 this.close();
52 this.$timeout(() => {
53 this.XosComponentInjector.removeInjectedComponents('#side-panel-container');
Matteo Scandolo520a8a12017-03-10 17:31:37 -080054 this.hasComponentLoaded = false;
Matteo Scandolo5053cbe2017-01-31 17:37:56 -080055 }, 500);
56 }
Max Chu9cdd9532017-08-02 17:03:54 -070057
58 public toggleComponent(componentName: string, attributes?: any, transclude?: string) {
59 this.componentToggle = !this.componentToggle;
60 if (this.componentToggle) {
61 this.XosComponentInjector.injectComponent('#side-panel-container', componentName, attributes, transclude, true);
62 this.open();
63 }
64 else {
65 this.removeInjectedComponents();
66 }
67 }
Matteo Scandolo9d7940c2017-01-19 18:28:43 -080068}