jQuery rewrite of config options show/hide/all.

This will replace showConfig + showConfigAll globally once @onli has
switched the parts which don't use the smartified code base yet. It
also adds a sensible no-js fallback and proper state indicators.
This commit is contained in:
Matthias Mees 2013-06-06 14:27:56 +02:00
parent d4d3515c8a
commit e5addc8965
3 changed files with 64 additions and 27 deletions

View File

@ -662,6 +662,44 @@ function highlightComment(id, checkvalue) {
e.preventDefault();
});
// Collapsible configuration elements
var $hasConfigOpts = $('body').has('#serendipity_config_options');
if($hasConfigOpts.size() > 0) {
$('.show_config_option > span').removeClass('icon-minus-circle').addClass('icon-plus-circle');
var optsCollapsed = true;
$('.show_config_option').click(function(e) {
var $el = $(this);
var $toggled = $el.attr('href');
var $toggleIcon = $el.find('> span');
var $toggleState = $toggleIcon.attr('class');
if($toggleState == 'icon-minus-circle') {
$toggleIcon.removeClass('icon-minus-circle').addClass('icon-plus-circle');
} else {
$toggleIcon.removeClass('icon-plus-circle').addClass('icon-minus-circle');
}
$($toggled).toggleClass('additional_info');
e.preventDefault();
});
$('#show_config_all').click(function(e) {
var $container = $(this).attr('href');
var $toggleIcons = $($container).find('.show_config_option > span');
var $toggleOption = $($container).find('.config_optiongroup');
if(optsCollapsed) {
$toggleIcons.removeClass('icon-plus-circle').addClass('icon-minus-circle');
$toggleOption.removeClass('additional_info');
optsCollapsed = false;
} else {
$toggleIcons.removeClass('icon-minus-circle').addClass('icon-plus-circle');
$toggleOption.addClass('additional_info');
optsCollapsed = true;
}
e.preventDefault();
});
}
// Category icon preview
// NOTE: This is just to replace the old functionality; ideally, this should
// have a working no-js fallback
@ -718,6 +756,11 @@ function highlightComment(id, checkvalue) {
e.preventDefault();
});
// MediaDB-Filter-Buttons should react instantly
$('input[name="serendipity[filter][fileCategory]"]').on('change', function() {
$('#media_library_control').submit();
});
// Clone form submit buttons
$('#sort_entries > .form_buttons').clone().appendTo('#filter_entries');
$('#media_pane_sort > .form_buttons').clone().appendTo('#media_pane_filter');
@ -737,10 +780,4 @@ function highlightComment(id, checkvalue) {
});
}
});
// MediaDB-Filter-Buttons should react instantly
$('input[name="serendipity[filter][fileCategory]"]').on('change', function() {
$('#media_library_control').submit();
});
})(jQuery);

View File

@ -7,32 +7,28 @@
<input name="SAVECONF" type="submit" value="{$CONST.SAVE}">
</div>
{/if}
{if $showTable}
<div id="serendipity_plugin_config" class="configuration_group">
{/if}
{if is_array($config_groups)}
<a id="optionall" class="button_link icon_link standalone" href="#" onClick="showConfigAll({sizeof($config_groups)}); return false" title="{$CONST.TOGGLE_ALL}">{$CONST.TOGGLE_ALL}</a>
<a id="show_config_all" class="button_link" href="#serendipity_config_options">{$CONST.TOGGLE_ALL}</a>
<div id="serendipity_config_options">
{foreach $config_groups AS $config_header => $config_groupkeys}
<h3><a id="optionel{$config_groupkeys@iteration}" href="#el{$config_groupkeys@iteration}" onClick="showConfig('el{$config_groupkeys@iteration}'); return false" title="{$CONST.TOGGLE_OPTION}">{$config_header}</a></h3>
<div class="configuration_group">
<h3><a id="optionel{$config_groupkeys@iteration}" class="show_config_option" href="#el{$config_groupkeys@iteration}" title="{$CONST.TOGGLE_OPTION}"><span class="icon-minus-circle"></span> {$config_header}</a></h3>
<fieldset id="el{$config_groupkeys@iteration}" class="plugin_optiongroup{if $config_groupkeys@last} plugin_optiongroup_last{/if}">
{foreach $config_groupkeys AS $config_groupkey}
<fieldset id="el{$config_groupkeys@iteration}" class="config_optiongroup{if $config_groupkeys@last} config_optiongroup_last{/if} additional_info">
{foreach $config_groupkeys AS $config_groupkey}
{$OUT_STACK[$config_groupkey]}
{/foreach}
</fieldset>
<script>document.getElementById('el{$config_groupkeys@iteration}').style.display = "none";</script>
{/foreach}
</fieldset>
</div>
{/foreach}
{/if} {* foreach config_groups end *}
{foreach $OUT_STACK_REST as $out_stack_config_item}
{$out_stack_config_item}
{/foreach}
{if $showTable}
</div>
{/if}
{* $serendipity_printConfigJS *}{* outsourced to templates/default/admin/admin_scripts.js - see passed vars on top *}
{foreach $OUT_STACK_REST as $out_stack_config_item}
<div class="configuration_group">
{$out_stack_config_item}
</div>
{/foreach}
{if $showSubmit_foot}
<div class="save_conf form_buttons">
{if $postKey == "template"}

View File

@ -1475,6 +1475,10 @@ form > .button_link:first-of-type {
min-width: 11em;
}
.show_config_option {
text-decoration: none;
}
/* FOOTER
----------------------------------------------------------------- */
@ -1545,7 +1549,7 @@ form > .button_link:first-of-type {
text-align: right;
}
.plugin_optiongroup_last {
.config_optiongroup_last {
border-bottom: 1px solid #aaa;
}