angular.panels/src/angular.panels.js at 860c08a4238ea0b5af32bc887a58049d79503e49 · eu81273/angular.panels · GitHub

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
/*
	@license Angular Panels version 1.0.3
	ⓒ 2015 AHN JAE-HA http://github.com/eu81273
	License: MIT

*/

(function ( angular ) {
	"use strict";

	var module = angular.module( "angular.panels", [] );

	module.constant("panelList", {});
	module.provider("panels", ["panelList", function (panelList) {

		//add panels in config
		this.add = function (panel) {

			//add panel
			if (panel && panel.id) {
				if(!panel.hasOwnProperty('dim')){
					panel.dim = true;
				}
				panelList[panel.id] = panel;

			}

			//for chaining
			return this;
		};

		//factory
		this.$get = ['$parse', function ($parse) {
			//document body selector
			var documentBody = angular.element(document.body);

			//panels factory
			var panelsFactory = {
				//current opened panel's id
				opened: undefined,

				//panel open method
				open: function (id) {
					//add body overflow hiden attribute
					documentBody.addClass('overflow-hidden');
					//close other panels
					panelsFactory.opened && panelsFactory.close(panelsFactory.opened);

					//check panel
					if (id && panelList[id]) {
						var panel = panelList[id];
						var panelElement = panel.element;
						var panelScope = panelElement.scope();
						var openCallbackFunction = $parse(panel.openCallbackFunction)(panelScope);

						//set panel style
						panelElement.attr('style', panelsFactory.style(panel, true));
						//if type of closeAction is function..
						typeof openCallbackFunction == 'function' && openCallbackFunction();

						panelsFactory.dim = panel.dim;
					}

					//open panel
					panelsFactory.opened = id;

				},

				//panel close method
				close: function () {
					//remove body overflow hiden attribute
					documentBody.removeClass('overflow-hidden');

					//check opened panel
					if (panelsFactory.opened && panelList[panelsFactory.opened]) {
						var panel = panelList[panelsFactory.opened];
						var panelElement = panel.element;
						var panelScope = panelElement.scope();
						var closeCallbackFunction = $parse(panel.closeCallbackFunction)(panelScope);

						//remove panel style
						panelElement.attr('style', panelsFactory.style(panel, false));
						//if type of closeAction is function..
						typeof closeCallbackFunction == 'function' && closeCallbackFunction();
					}

					//close panel
					panelsFactory.opened = undefined;
					panelsFactory.dim = undefined;
				},

				//panel style
				style: function (panel, open) {
					switch (panel.position) {
						case "top": case "bottom":
							return panel.position + ":" + (open ? "0;" : "-" + panel.size + ";") + "height:" + panel.size + "";

						case "left": case "right":
							return panel.position + ":" + (open ? "0;" : "-" + panel.size + ";") + "width:" + panel.size + "";
					}
				}
			};

			return panelsFactory;
		}];
	}]);

	//panels directive
	module.directive('panels', ['$http', '$templateCache', '$compile', 'panels', 'panelList', function ($http, $templateCache, $compile, panels, panelList) {

		return {
			//attribute
			restrict: 'A',

			//isolate
			scope: {},

			//shares data between factory and controller
			controller: ['$scope', function ($scope) {
				$scope.panels = panels;
			}],

			link: function ( scope, element, attrs ) {

				//add panel
				angular.forEach(panelList, function(panel, key) {

					//get template
					$http.get(panel.templateUrl, {cache: $templateCache}).success(function (template) {

						//panel template
						var template = '<div style="' + panels.style(panel) + '" class="panels panel-' + panel.position + '" data-ng-class="{open : panels.opened==\'' + panel.id + '\'}"  data-ng-controller="' + panel.controller + '">' + template + '</div>';
						//compile template
						var compiled = $compile(template)(scope);
						//add compiled template
						element.append(compiled);
						//save selector
						panelList[key].element = angular.element(compiled);
					});
				});

				//add dim
				element.append($compile('<div class="dimming" data-ng-class="{open : panels.dim}" data-ng-click="panels.close();"></div>')(scope));
			}
		};
	}]);

})(angular);