Simple implementation for collapsible content

diff --git a/wcfsetup/install/files/acp/templates/cacheList.tpl b/wcfsetup/install/files/acp/templates/cacheList.tpl
index a2fa5a0dfc54dfca91f08f6a2c61304aa81a6a63..98294c859d57798b56955b17e0cecf631290c7dc 100644 (file)
--- a/wcfsetup/install/files/acp/templates/cacheList.tpl
+++ b/wcfsetup/install/files/acp/templates/cacheList.tpl
@@ -1,5 +1,19 @@
 {include file='header'}
 
+<script type="text/javascript">
+       //<![CDATA[
+       $(function() {
+               {* TODO: Fix icon path *}
+               WCF.Icon.addObject({
+                       'wcf.global.minus': '{@RELATIVE_WCF_DIR}icon/minusS.png',
+                       'wcf.global.plus': '{@RELATIVE_WCF_DIR}icon/plusS.png'
+               });
+
+               WCF.Collapsible.Simple.init();
+       });
+       //]]>
+</script>
+
 <header class="mainHeading">
        <img src="{@RELATIVE_WCF_DIR}icon/cacheL.png" alt="" />
        <hgroup>
@@ -46,14 +60,15 @@
 </div>
 
 {foreach from=$caches key=cache item=files}
+       {counter name=cacheIndex assign=cacheIndex print=false start=0}
        {if $files|count}
                <div class="border boxTitle">
-                       <a onclick="openList('{$cache}')" class="collapsible"><img src="{@RELATIVE_WCF_DIR}icon/minusS.png" id="{$cache}Image" alt="" title="ToDo: Collapsible" class="balloonTooltip" /></a>
+                       <a class="collapsible" data-isOpen="1" data-collapsibleContainer="cache{@$cacheIndex}"><img src="{@RELATIVE_WCF_DIR}icon/minusS.png" alt="" title="ToDo: Collapsible" class="balloonTooltip" /></a>
                        <hgroup>
                                <h1>{$cache} <span class="badge" title="{lang}wcf.acp.cache.data.files.count{/lang}">{#$files|count}</span></h1>
                        </hgroup>
                        
-                       <table id="{$cache}">
+                       <table id="cache{@$cacheIndex}">
                                <thead>
                                        <tr>
                                                <th><p class="emptyHead">{lang}wcf.acp.cache.list.name{/lang}</p></th>
@@ -80,11 +95,6 @@
                        </table>
                        
                </div>
-               <script type="text/javascript">
-                       //<![CDATA[
-                       initList('{$cache}', 0);
-                       //]]>
-               </script>
        {/if}
 {/foreach}
 

diff --git a/wcfsetup/install/files/js/WCF.js b/wcfsetup/install/files/js/WCF.js
index fb341ca6bcc5b5a0f455b32b0889f22388519f3c..056da0ca4c5224bcd0850c716487411e0f19157e 100644 (file)
--- a/wcfsetup/install/files/js/WCF.js
+++ b/wcfsetup/install/files/js/WCF.js
@@ -1510,6 +1510,112 @@ WCF.ToggleOptions.prototype = {
        }
 };
 
+/**
+ * Namespace for all kind of collapsible containers.
+ */
+WCF.Collapsible = {};
+
+/**
+ * Simple implementation for collapsible content, neither does it
+ * store its state nor does it allow AJAX callbacks to fetch content.
+ */
+WCF.Collapsible.Simple = {
+       /**
+        * Initializes collapsibles.
+        */
+       init: function() {
+               $('.collapsible').each($.proxy(function(index, button) {
+                       this._initButton(button);
+               }, this));
+       },
+       
+       /**
+        * Binds an event listener on all buttons triggering the collapsible.
+        * 
+        * @param       object          button
+        */
+       _initButton: function(button) {
+               var $button = $(button);
+               var $isOpen = $button.data('isOpen');
+               
+               if (!$isOpen) {
+                       // hide container on init
+                       $($button.data('collapsibleContainer')).hide();
+               }
+               
+               $button.click($.proxy(this._toggle, this));
+       },
+       
+       /**
+        * Toggles collapsible containers on click.
+        * 
+        * @param       object          event
+        */
+       _toggle: function(event) {
+               var $button = this._findElement($(event.target));
+               if ($button === false) {
+                       return false;
+               }
+               
+               var $isOpen = $button.data('isOpen');
+               var $target = $('#' + $.wcfEscapeID($button.data('collapsibleContainer')));
+               
+               if ($isOpen) {
+                       $target.stop().wcfBlindOut('vertical', $.proxy(function() {
+                               this._toggleImage($button, 'wcf.global.plus');
+                       }, this));
+                       $isOpen = false;
+               }
+               else {
+                       $target.stop().wcfBlindIn('vertical', $.proxy(function() {
+                               this._toggleImage($button, 'wcf.global.minus');
+                       }, this));
+                       $isOpen = true;
+               }
+               
+               $button.data('isOpen', $isOpen);
+               
+               // suppress event
+               event.stopPropagation();
+               return false;
+       },
+       
+       /**
+        * Toggles image of target button.
+        * 
+        * @param       jQuery          button
+        * @param       string          image
+        */
+       _toggleImage: function(button, image) {
+               var $icon = WCF.Icon.get(image);
+               var $image = button.find('img');
+               
+               if ($image.length) {
+                       $image.attr('src', $icon);
+               }
+       },
+       
+       /**
+        * Finds the anchor element (sometimes the image will show up as target).
+        * 
+        * @param       jQuery          element
+        * @return      jQuery
+        */
+       _findElement: function(element) {
+               if (element.getTagName() == 'a') {
+                       return element;
+               }
+               
+               element = $(element.parent('a'));
+               if (element.length == 1) {
+                       return element;
+               }
+               
+               console.debug('[WCF.Collapsible.Simple] Could not find valid parent, aborting.')
+               return false;
+       }
+};
+
 /**
  * Holds userdata of the current user
  */