body-state-classes.service.ts
5.33 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
import {Directive, Inject, Injectable} from "ng-forward";
import {AuthEvents} from "../../login/auth-events";
import {AuthService} from "./../../login/auth.service";
import {HtmlUtils} from "../html-utils";
import {INgForwardJQuery} from 'ng-forward/cjs/util/jqlite-extensions';
import {DesignModeService} from './../../admin/layout-edit/designMode.service';
export interface StartParams {
skin?: string;
}
/**
* This is a service which adds classes to the body element
* indicating some app states information as
* eg:
* User Logged:
* - noosfero-user-logged
* Route States:
* - noosfero-route-main
* - noosfero-route-main.profile.info
*
* Show the all content in full mode:
* - full-content
*/
@Injectable()
@Inject("$rootScope", "$document", "$state", AuthService, DesignModeService)
export class BodyStateClassesService {
private started: boolean = false;
private skin: string;
public static get DESIGN_MODE_ON_CLASSNAME(): string { return "noosfero-design-on"; }
public static get USER_LOGGED_CLASSNAME(): string { return "noosfero-user-logged"; }
public static get ROUTE_STATE_CLASSNAME_PREFIX(): string { return "noosfero-route-"; }
public static get CONTENT_WRAPPER_FULL(): string { return "full-content"; }
private bodyElement: ng.IAugmentedJQuery = null;
constructor(
private $rootScope: ng.IRootScopeService,
private $document: ng.IDocumentService,
private $state: ng.ui.IStateService,
private authService: AuthService,
private designModeService: DesignModeService
) {
}
start(config?: StartParams) {
if (!this.started) {
this.setupUserLoggedClassToggle();
this.setupStateClassToggle();
this.setupDesignModeClassToggle();
if (config) {
this.setThemeSkin(config.skin);
}
this.started = true;
}
}
setThemeSkin(skin: string) {
this.getBodyElement().addClass(skin);
}
addContentClass(addClass: boolean, className?: string): BodyStateClassesService {
let fullContentClass: string = className || BodyStateClassesService.CONTENT_WRAPPER_FULL;
let contentWrapper = this.getContentWrapper();
if (contentWrapper) {
if (addClass) {
contentWrapper.addClass(fullContentClass);
} else {
contentWrapper.removeClass(fullContentClass);
}
}
return this;
}
private getStateChangeSuccessHandlerFunction(bodyElement: ng.IAugmentedJQuery): (event: ng.IAngularEvent, toState: ng.ui.IState) => void {
let self = this;
return (event: ng.IAngularEvent, toState: ng.ui.IState) => {
self.switchStateClasses(bodyElement, toState);
};
}
private switchStateClasses(bodyElement: ng.IAugmentedJQuery, state: ng.ui.IState) {
HtmlUtils.removeCssClassByPrefix(bodyElement[0], BodyStateClassesService.ROUTE_STATE_CLASSNAME_PREFIX);
bodyElement.addClass(BodyStateClassesService.ROUTE_STATE_CLASSNAME_PREFIX + state.name);
}
/**
* setup the listeners to the desigModeService to add class on the Body Element
* indicating the user activated the designMode
*/
private setupDesignModeClassToggle() {
this.designModeService.onToggle.subscribe((designOn: boolean) => {
if (designOn) {
this.getBodyElement().addClass(BodyStateClassesService.DESIGN_MODE_ON_CLASSNAME);
} else {
this.getBodyElement().removeClass(BodyStateClassesService.DESIGN_MODE_ON_CLASSNAME);
}
});
}
private setupStateClassToggle() {
let bodyElement = this.getBodyElement();
bodyElement.addClass(BodyStateClassesService.ROUTE_STATE_CLASSNAME_PREFIX + this.$state.current.name);
this.$rootScope.$on("$stateChangeSuccess", this.getStateChangeSuccessHandlerFunction(bodyElement));
}
/**
* Setup the initial state of the user-logged css class
* and adds events handlers to switch this class when the login events happens
*/
private setupUserLoggedClassToggle() {
let bodyElement = this.getBodyElement();
// get initial logged information from the AuthService
// add add the css class when the user is authenticated
if (this.authService.isAuthenticated()) {
bodyElement.addClass(BodyStateClassesService.USER_LOGGED_CLASSNAME);
}
// to switch the css class which indicates user logged in
this.authService.subscribe(AuthEvents[AuthEvents.loginSuccess], () => {
bodyElement.addClass(BodyStateClassesService.USER_LOGGED_CLASSNAME);
});
this.authService.subscribe(AuthEvents[AuthEvents.logoutSuccess], () => {
bodyElement.removeClass(BodyStateClassesService.USER_LOGGED_CLASSNAME);
});
}
/**
* Returns the user 'body' html Element
*/
private getBodyElement(): ng.IAugmentedJQuery {
if (this.bodyElement === null) {
this.bodyElement = angular.element(this.$document.find("body"));
}
return this.bodyElement;
}
private getContentWrapper(selector?: string): INgForwardJQuery {
let doc = <INgForwardJQuery>angular.element(this.$document);
return doc.query(selector || '.content-wrapper');
}
}