8000 [WebProfilerBundle] Simplified session storage implementation · symfony/symfony@cec05bf · GitHub
[go: up one dir, main page]
Skip to content

Commit cec05bf

Browse files
webmozartwebmozart
committed
[WebProfilerBundle] Simplified session storage implementation
1 parent fff29a3 commit cec05bf

File tree

1 file changed

+68
-61
lines changed
  • src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector

1 file changed

+68
-61
lines changed

‎src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/form.html.twig

Lines changed: 68 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -199,21 +199,36 @@
199199
{% endif %}
200200

201201
<script>
202-
function Toggler(togglerStorage) {
202+
function Toggler(storage) {
203203
"use strict";
204204
205-
var expand = function (button) {
205+
var STORAGE_KEY = 'sf_toggle_data',
206+
207+
states = {},
208+
209+
isCollapsed = function (button) {
210+
return Sfjs.hasClass(button, 'closed');
211+
},
212+
213+
isExpanded = function (button) {
214+
return !isCollapsed(button);
215+
},
216+
217+
expand = function (button) {
206218
var targetId = button.dataset.toggleTargetId,
207219
target = document.getElementById(targetId);
208220
209221
if (!target) {
210222
throw "Toggle target " + targetId + " does not exist";
211223
}
212224
213-
togglerStorage.store(targetId, 'visible');
225+
if (isCollapsed(button)) {
226+
Sfjs.removeClass(button, 'closed');
227+
Sfjs.removeClass(target, 'hidden');
214228
215-
Sfjs.removeClass(button, 'closed');
216-
Sfjs.removeClass(target, 'hidden');
229+
states[targetId] = 1;
230+
storage.setItem(STORAGE_KEY, states);
231+
}
217232
},
218233
219234
collapse = function (button) {
@@ -224,10 +239,13 @@
224239
throw "Toggle target " + targetId + " does not exist";
225240
}
226241
227-
togglerStorage.store(targetId, 'hidden');
242+
if (isExpanded(button)) {
243+
Sfjs.addClass(button, 'closed');
244+
Sfjs.addClass(target, 'hidden');
228245
229-
Sfjs.addClass(button, 'closed');
230-
Sfjs.addClass(target, 'hidden');
246+
states[targetId] = 0;
247+
storage.setItem(STORAGE_KEY, states);
248+
}
231249
},
232250
233251
toggle = function (button) {
@@ -239,16 +257,26 @@
239257
},
240258
241259
initButtons = function (buttons) {
260+
states = storage.getItem(STORAGE_KEY, {});
261+
262+
// must be an object, not an array or anything else
263+
// `typeof` returns "object" also for arrays, so the following
264+
// check must be done
265+
// see http://stackoverflow.com/questions/4775722/check-if-object-is-array
266+
if ('[object Object]' !== Object.prototype.toString.call(states)) {
267+
states = {};
268+
}
269+
242270
for (var i = 0, l = buttons.length; i < l; ++i) {
243-
var toggleTargetId = buttons[i].dataset.toggleTargetId,
244-
toggleTarget = document.getElementById(toggleTargetId);
271+
var targetId = buttons[i].dataset.toggleTargetId,
272+
target = document.getElementById(targetId);
245273
246-
if (!toggleTarget) {
247-
throw "Toggle target " + toggleTargetId + " does not exist";
274+
if (!target) {
275+
throw "Toggle target " + targetId + " does not exist";
248276
}
249277
250278
// correct the initial state of the button
251-
if (Sfjs.hasClass(toggleTarget, 'hidden')) {
279+
if (Sfjs.hasClass(target, 'hidden')) {
252280
Sfjs.addClass(buttons[i], 'closed');
253281
}
254282
@@ -261,6 +289,15 @@
261289
262290
return false;
263291
});
292+
293+
if (states.hasOwnProperty(targetId)) {
294+
// open or collapse based on stored data
295+
if (0 === states[targetId]) {
296+
collapse(buttons[i]);
297+
} else {
298+
expand(buttons[i]);
299+
}
300+
}
264301
}
265302
};
266303
@@ -269,66 +306,38 @@
269306
270307
toggle: toggle,
271308
309+
isExpanded: isExpanded,
310+
311+
isCollapsed: isCollapsed,
312+
272313
expand: expand,
273314
274315
collapse: collapse
275316
};
276317
}
277318
278-
function TogglerStorage(key) {
279-
var key = 'sf_' + (key || 'toggle_data'),
280-
store = function (id, state) {
281-
var toggleData = sessionStorage.getItem(key);
282-
if (!toggleData) {
283-
toggleData = [];
284-
} else {
285-
toggleData = toggleData.split('|');
286-
}
287-
288-
if ('visible' == state) {
289-
toggleData.push(id);
290-
} else {
291-
var index = toggleData.indexOf(id);
292-
if (-1 < index) {
293-
toggleData.splice(index, 1);
294-
}
295-
}
296-
297-
sessionStorage.setItem(key, toggleData.join('|'));
319+
function JsonStorage(storage) {
320+
var setItem = function (key, data) {
321+
storage.setItem(key, JSON.stringify(data));
298322
},
299323
300-
initStorage = function (buttonsSelector) {
301-
var toggleData = sessionStorage.getItem(key);
302-
303-
if (!toggleData) {
304-
return;
305-
}
306-
toggleData = toggleData.split('|');
307-
308-
var buttons = document.getElementsByClassName(buttonsSelector || 'toggle-button');
309-
for (i in toggleData) {
310-
var element = document.getElementById(toggleData[i]);
311-
if (!element) {
312-
continue;
313-
}
314-
315-
if (Sfjs.hasClass(element, 'hidden')) {
316-
for (var i = -1; button = buttons[++i]; ) {
317-
if (button.dataset.toggleTargetId && button.dataset.toggleTargetId == element.getAttribute('id')) {
318-
break;
319-
}
320-
}
324+
getItem = function (key, defaultValue) {
325+
var data = storage.getItem(key);
321326
322-
Sfjs.removeClass(element, 'hidden');
323-
Sfjs.removeClass(button, 'closed');
327+
if (null !== data) {
328+
try {
329+
return JSON.parse(data);
330+
} catch(e) {
324331
}
325332
}
333+
334+
return defaultValue;
326335
};
327336
328337
return {
329-
store: store,
338+
setItem: setItem,
330339
331-
initStorage: initStorage
340+
getItem: getItem
332341
};
333342
}
334343
@@ -396,12 +405,10 @@
396405
}
397406
398407
var tabTarget = new TabView(),
399-
storage = new TogglerStorage(),
400-
toggler = new Toggler(storage);
408+
toggler = new Toggler(new JsonStorage(sessionStorage));
401409
402410
tabTarget.initTabs(document.querySelectorAll('.tree .tree-inner'));
403411
toggler.initButtons(document.querySelectorAll('a.toggle-button'));
404-
storage.initStorage();
405412
</script>
406413
{% endblock %}
407414

0 commit comments

Comments
 (0)
0