mbirth/LuckyCoinkydink
1
0
Fork 0
Code Issues Pull Requests Activity

Rewrite show/hide functionality as a reusable function

Browse Source 
Introducing serendipity.toggle_collapsible, which

– is a reusable function available via the serendipity namespace
– has arguments to customize the show/hide icon, but also has
  sensible default fallbacks for those arguments
– creates an individual key in localStorage to store the open/
  close state in

The latter also fixes a bug(?) which made show/hide in the entry
editor save the state for entry metadata and advanced options in
the same localStorage key. This could be improved with a fallback
for toggling elements which don't have an id.

References #144
This commit is contained in:
Matthias Mees 2014-05-24 17:21:37 +02:00
parent c6f4da1c04
commit 78b83266e3
1 changed files with 35 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
templates/2k11/admin/serendipity_editor.js.tpl
View File

@ -643,6 +643,29 @@
}
}
serendipity.toggle_collapsible = function(toggler, target, stateClass, stateIcon, stateOpen, stateClosed) {
// argument defaults
stateClass == stateClass || 'additional_info';
stateIcon = stateIcon || '> span';
stateOpen = stateOpen || 'icon-down-dir';
stateClosed = stateClosed || 'icon-right-dir';
var $toggleIcon = $(toggler).find(stateIcon);
var toggleState = $toggleIcon.attr('class');
// This should get a fallback for if toggler does not have an id
var storageKey = 'show_' + $(toggler).attr('id');
if(toggleState == stateOpen) {
$toggleIcon.removeClass(stateOpen).addClass(stateClosed);
localStorage.setItem(storageKey, "false");
} else {
$toggleIcon.removeClass(stateClosed).addClass(stateOpen);
localStorage.setItem(storageKey, "true");
}
$(target).toggleClass(stateClass);
}
}( window.serendipity = window.serendipity || {}, jQuery ));
// Source: https://github.com/yatil/accessifyhtml5.js
@ -952,24 +975,11 @@ $(function() {
});
// Entry metadata
// NOTE: This probably should be rewritten as a general function which
// also works for advanced options (see below); also not sure if
// the localStorage stuff works here (seems to)
if($('#edit_entry_metadata').length > 0) {
$('#toggle_metadata').click(function() {
var $el = $(this);
var $toggleIcon = $el.find('> span');
var $toggleState = $toggleIcon.attr('class');
if($toggleState == 'icon-down-dir') {
$toggleIcon.removeClass('icon-down-dir').addClass('icon-right-dir');
localStorage.show_advanced_options = "false";
} else {
$toggleIcon.removeClass('icon-right-dir').addClass('icon-down-dir');
localStorage.show_advanced_options = "true";
}
$('#meta_data').toggleClass('additional_info');
serendipity.toggle_collapsible($(this), '#meta_data');
});
if (localStorage.show_advanced_options == "true") {
if (localStorage.getItem("show_toggle_metadata") == "true") {
$('#toggle_metadata').click();
}
}
@ -1017,19 +1027,9 @@ $(function() {
// Advanced options
if($('#advanced_options').length > 0) {
$('#toggle_advanced').click(function() {
var $el = $(this);
var $toggleIcon = $el.find('> span');
var $toggleState = $toggleIcon.attr('class');
if($toggleState == 'icon-down-dir') {
$toggleIcon.removeClass('icon-down-dir').addClass('icon-right-dir');
localStorage.show_advanced_options = "false";
} else {
$toggleIcon.removeClass('icon-right-dir').addClass('icon-down-dir');
localStorage.show_advanced_options = "true";
}
$('#adv_opts').toggleClass('additional_info');
serendipity.toggle_collapsible($(this), '#adv_opts');
});
if (localStorage.show_advanced_options == "true") {
if (localStorage.getItem("show_toggle_advanced") == "true") {
$('#toggle_advanced').click();
}
}
@ -1050,14 +1050,8 @@ $(function() {
} else {
var $toggled = $el.data('href');
}
var $toggleIcon = $el.find('> span');
var $toggleState = $toggleIcon.attr('class');
if($toggleState == 'icon-down-dir') {
$toggleIcon.removeClass('icon-down-dir').addClass('icon-right-dir');
} else {
$toggleIcon.removeClass('icon-right-dir').addClass('icon-down-dir');
}
$($toggled).toggleClass('additional_info');
serendipity.toggle_collapsible($el, $toggled);
e.preventDefault();
});
@ -1261,19 +1255,14 @@ $(function() {
$('.toggle_comment_full').click(function(e) {
var $el = $(this);
if ($el.attr('href')) {
var $toggles = $($el.attr('href'));
var $toggled = $($el.attr('href'));
} else {
var $toggles = $($el.data('href'));
}
$toggles.toggleClass('additional_info');
$toggles.prev().toggleClass('additional_info');
var $toggleIcon = $el.find('> span');
var $toggleState = $toggleIcon.attr('class');
if($toggleState == 'icon-down-dir') {
$toggleIcon.removeClass('icon-down-dir').addClass('icon-right-dir');
} else {
$toggleIcon.removeClass('icon-right-dir').addClass('icon-down-dir');
var $toggled = $($el.data('href'));
}
serendipity.toggle_collapsible($el, $toggled);
$toggled.prev().toggleClass('additional_info');
e.preventDefault();
});