From 1c746fe35b4d53815d06d382fed1e193d323e5d9 Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Mon, 22 Aug 2011 15:24:32 +0200
Subject: [PATCH] Simple implementation for collapsible content

---
 .../install/files/acp/templates/cacheList.tpl |  24 ++--
 wcfsetup/install/files/js/WCF.js              | 106 ++++++++++++++++++
 2 files changed, 123 insertions(+), 7 deletions(-)

diff --git a/wcfsetup/install/files/acp/templates/cacheList.tpl b/wcfsetup/install/files/acp/templates/cacheList.tpl
index a2fa5a0dfc..98294c859d 100644
--- 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 fb341ca6bc..056da0ca4c 100644
--- 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
  */
-- 
2.20.1