1 | (function() {
|
2 | 'use strict';
|
3 |
|
4 | window.Ractive.controller('pl-grouped-buttons', function(component, data, el, config, done) {
|
5 |
|
6 | var MODES = {
|
7 | DEFAULT: 'default',
|
8 | COMPACT: 'compact'
|
9 | };
|
10 |
|
11 | var GroupedButtons = component({
|
12 | plName: 'pl-grouped-buttons',
|
13 | data: $.extend(true, {
|
14 | mode: MODES.DEFAULT,
|
15 | hidden: true,
|
16 | orientation: 'left',
|
17 | buttons: [],
|
18 | positions: [],
|
19 | compactPositionsTop: [],
|
20 | compactPositions: [],
|
21 | compactButtonPosition: -100,
|
22 | compactOpened: false,
|
23 | compactHeight: 0,
|
24 |
|
25 | action: function(event, component, userBehavior) {
|
26 | if (!component) {
|
27 | return;
|
28 | }
|
29 |
|
30 | var index = parseInt($(component.el).attr('data-index'), 10),
|
31 | button = GroupedButtons.get('buttons[' + index + ']'),
|
32 | component = GroupedButtons.findChild('data-index', index);
|
33 |
|
34 | GroupedButtons.fire('beforeAction', {
|
35 | event: event,
|
36 | button: button,
|
37 | component: component,
|
38 | userBehavior: userBehavior
|
39 | });
|
40 |
|
41 | if (GroupedButtons.get('mode') == MODES.COMPACT && GroupedButtons.get('compactOpened')) {
|
42 | GroupedButtons.fire('compactAction');
|
43 | }
|
44 |
|
45 | if (button && button.action) {
|
46 | button.action(event, component, userBehavior);
|
47 | }
|
48 |
|
49 | GroupedButtons.fire('action', {
|
50 | event: event,
|
51 | button: button,
|
52 | component: component,
|
53 | userBehavior: userBehavior
|
54 | });
|
55 | }
|
56 | }, data),
|
57 |
|
58 | hide: function() {
|
59 | if (GroupedButtons.get('hidden')) {
|
60 | return;
|
61 | }
|
62 |
|
63 | GroupedButtons.set('hidden', true);
|
64 |
|
65 | GroupedButtons.set('compactButtonPosition', -100);
|
66 |
|
67 | _updatePositions();
|
68 | },
|
69 |
|
70 | show: function() {
|
71 | if (!GroupedButtons.get('hidden')) {
|
72 | return;
|
73 | }
|
74 |
|
75 | GroupedButtons.set('hidden', false);
|
76 |
|
77 | if (GroupedButtons.get('mode') == MODES.COMPACT) {
|
78 | GroupedButtons.set('compactButtonPosition', -15);
|
79 | }
|
80 |
|
81 | _updatePositions();
|
82 | },
|
83 |
|
84 | compactMode: function() {
|
85 | if (GroupedButtons.get('mode') == MODES.COMPACT) {
|
86 | return;
|
87 | }
|
88 |
|
89 | GroupedButtons.set('mode', MODES.COMPACT);
|
90 |
|
91 | GroupedButtons.set('compactButtonPosition', -15);
|
92 | },
|
93 |
|
94 | defaultMode: function() {
|
95 | if (GroupedButtons.get('mode') == MODES.DEFAULT) {
|
96 | return;
|
97 | }
|
98 |
|
99 | if (GroupedButtons.get('compactOpened')) {
|
100 | GroupedButtons.fire('compactAction');
|
101 | }
|
102 |
|
103 | GroupedButtons.set('mode', MODES.DEFAULT);
|
104 |
|
105 | GroupedButtons.set('compactButtonPosition', -100);
|
106 | }
|
107 | });
|
108 |
|
109 | GroupedButtons.on('compactAction', function() {
|
110 | var compactOpened = !GroupedButtons.get('compactOpened');
|
111 |
|
112 | GroupedButtons.fire('beforeCompact', {
|
113 | button: GroupedButtons,
|
114 | opened: compactOpened
|
115 | });
|
116 |
|
117 | GroupedButtons.set('compactOpened', compactOpened);
|
118 |
|
119 | _updatePositions(function(args) {
|
120 | if (compactOpened) {
|
121 | GroupedButtons.set('compactHeight', args.compactHeight);
|
122 | }
|
123 |
|
124 | GroupedButtons.fire('compact', {
|
125 | button: GroupedButtons,
|
126 | opened: compactOpened
|
127 | });
|
128 | });
|
129 | });
|
130 |
|
131 | function _registerIndicatorEvents(component) {
|
132 | component.on('showNotification', function(args) {
|
133 | var index = parseInt($(component.el).attr('data-index'), 10);
|
134 |
|
135 | GroupedButtons.once('positionsChanged', function() {
|
136 | GroupedButtons.set('compactPositionsTop[' + index + ']', 0);
|
137 | GroupedButtons.set('compactPositions[' + index + ']', 0);
|
138 |
|
139 | if (GroupedButtons.get('mode') == MODES.COMPACT) {
|
140 | GroupedButtons.set('compactButtonPosition', -100);
|
141 | }
|
142 | });
|
143 |
|
144 | GroupedButtons.set('buttons[' + index + '].width', args.width + 5);
|
145 | });
|
146 |
|
147 | component.on('hideNotification', function() {
|
148 | var index = parseInt($(component.el).attr('data-index'), 10);
|
149 |
|
150 | GroupedButtons.set('buttons[' + index + '].width', 50);
|
151 |
|
152 | if (GroupedButtons.get('mode') == MODES.COMPACT) {
|
153 | GroupedButtons.set('compactButtonPosition', -15);
|
154 | }
|
155 | });
|
156 | }
|
157 |
|
158 | function _updatePositions(callback) {
|
159 | GroupedButtons.require().then(function() {
|
160 | var orientation = GroupedButtons.get('orientation'),
|
161 | buttons = GroupedButtons.get('buttons'),
|
162 | positions = GroupedButtons.get('positions'),
|
163 | compactPositionsTop = GroupedButtons.get('compactPositionsTop'),
|
164 | compactPositions = GroupedButtons.get('compactPositions'),
|
165 | compactOpened = GroupedButtons.get('compactOpened'),
|
166 | hidden = GroupedButtons.get('hidden'),
|
167 | windowWidth = $(window).width(),
|
168 | totalWidth = 0,
|
169 | compactTotalWidth = 20,
|
170 | compactTop = 0,
|
171 | compactHeight = 60;
|
172 |
|
173 | for (var i = buttons.length - 1; i >= 0; i--) {
|
174 | var button = buttons[i],
|
175 | component = GroupedButtons.findChild('data-index', i);
|
176 |
|
177 | if (hidden) {
|
178 | positions[i] = -100;
|
179 | compactPositions[i] = -100;
|
180 | }
|
181 | else {
|
182 | positions[i] = totalWidth - (orientation == 'right' && button.type == 'indicator' ? 5 : 0);
|
183 |
|
184 | if (compactOpened) {
|
185 | compactPositions[i] = compactTotalWidth;
|
186 | }
|
187 | else {
|
188 | compactPositions[i] = -100;
|
189 | }
|
190 | }
|
191 |
|
192 | compactPositionsTop[i] = compactTop;
|
193 |
|
194 | if (!component) {
|
195 | return;
|
196 | }
|
197 |
|
198 | if (!button.isReady) {
|
199 | button.isReady = true;
|
200 | button.width = 50;
|
201 |
|
202 | if (button.type == 'indicator') {
|
203 | _registerIndicatorEvents(component, button, i);
|
204 | }
|
205 |
|
206 | if (button.ready) {
|
207 | button.ready(component);
|
208 | }
|
209 | }
|
210 |
|
211 | totalWidth += button.width || 0;
|
212 | compactTotalWidth += button.width || 0;
|
213 |
|
214 | if (!hidden && compactTotalWidth > windowWidth) {
|
215 | compactHeight += 50;
|
216 | compactTop += 50;
|
217 | compactTotalWidth = 20;
|
218 | compactPositionsTop[i] = compactTop;
|
219 |
|
220 | if (compactOpened) {
|
221 | compactPositions[i] = compactTotalWidth;
|
222 | }
|
223 | }
|
224 | }
|
225 |
|
226 | GroupedButtons.set('positions', positions);
|
227 | GroupedButtons.set('compactPositionsTop', compactPositionsTop);
|
228 | GroupedButtons.set('compactPositions', compactPositions);
|
229 |
|
230 | setTimeout(function() {
|
231 | GroupedButtons.fire('positionsChanged');
|
232 | });
|
233 |
|
234 | if (callback) {
|
235 | callback({
|
236 | compactHeight: compactHeight
|
237 | });
|
238 | }
|
239 | });
|
240 | }
|
241 |
|
242 | GroupedButtons.observe('buttons', function() {
|
243 | _updatePositions();
|
244 | });
|
245 |
|
246 | _updatePositions();
|
247 |
|
248 | done();
|
249 | });
|
250 |
|
251 | })();
|