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.

templates/2k11/admin/serendipity_editor.js.tpl

@@ -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');
@@ -736,11 +779,5 @@ function highlightComment(id, checkvalue) {
                 updateOnResize: true
             });
         }
-    });
+    });    
-
-    // MediaDB-Filter-Buttons should react instantly
-    $('input[name="serendipity[filter][fileCategory]"]').on('change', function() {
-        $('#media_library_control').submit();
-    });
-    
 })(jQuery);

templates/2k11/admin/serendipity_plugin_config.fnc.tpl

@@ -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}">
+            <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}
+            {foreach $config_groupkeys AS $config_groupkey}
             {$OUT_STACK[$config_groupkey]}
-        {/foreach}
+            {/foreach}
-        </fieldset>
+            </fieldset>
-        
+        </div>
-        <script>document.getElementById('el{$config_groupkeys@iteration}').style.display = "none";</script>
     {/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"}

templates/2k11/admin/style.css

@@ -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;
 }