[ticket/10786] Javascript toggle member search panel in memberlist.php

PHPBB3-10786

phpBB/memberlist.php

@@ -1025,7 +1025,7 @@ switch ($mode)
 		// We validate form and field here, only id/class allowed
 		$form = (!preg_match('/^[a-z0-9_-]+$/i', $form)) ? '' : $form;
 		$field = (!preg_match('/^[a-z0-9_-]+$/i', $field)) ? '' : $field;
-		if (($mode == 'searchuser' || sizeof(array_intersect($request->variable_names(phpbb_request_interface::GET), $search_params)) > 0) && ($config['load_search'] || $auth->acl_get('a_')))
+		if ((in_array($mode, array('', 'searchuser')) || sizeof(array_intersect($request->variable_names(phpbb_request_interface::GET), $search_params)) > 0) && ($config['load_search'] || $auth->acl_get('a_')))
 		{
 			$username	= request_var('username', '', true);
 			$email		= strtolower(request_var('email', ''));
@@ -1377,7 +1377,7 @@ switch ($mode)
 		}
 
 		// Some search user specific data
-		if ($mode == 'searchuser' && ($config['load_search'] || $auth->acl_get('a_')))
+		if (in_array($mode, array('', 'searchuser')) && ($config['load_search'] || $auth->acl_get('a_')))
 		{
 			$group_selected = request_var('search_group_id', 0);
 			$s_group_select = '<option value="0"' . ((!$group_selected) ? ' selected="selected"' : '') . '>&nbsp;</option>';
@@ -1447,7 +1447,7 @@ switch ($mode)
 				'S_IP_SEARCH_ALLOWED'	=> ($auth->acl_getf_global('m_info')) ? true : false,
 				'S_EMAIL_SEARCH_ALLOWED'=> ($auth->acl_get('a_user')) ? true : false,
 				'S_IN_SEARCH_POPUP'		=> ($form && $field) ? true : false,
-				'S_SEARCH_USER'			=> true,
+				'S_SEARCH_USER'			=> ($mode == 'searchuser' || ($mode == '' && $submit)) ? true : false,
 				'S_FORM_NAME'			=> $form,
 				'S_FIELD_NAME'			=> $field,
 				'S_SELECT_SINGLE'		=> $select_single,
@@ -1598,7 +1598,7 @@ switch ($mode)
 			'SEARCH_IMG'	=> $user->img('icon_user_search', $user->lang['SEARCH']),
 
 			'U_FIND_MEMBER'			=> ($config['load_search'] || $auth->acl_get('a_')) ? append_sid("{$phpbb_root_path}memberlist.$phpEx", 'mode=searchuser' . (($start) ? "&amp;start=$start" : '') . (!empty($params) ? '&amp;' . implode('&amp;', $params) : '')) : '',
-			'U_HIDE_FIND_MEMBER'	=> ($mode == 'searchuser') ? $u_hide_find_member : '',
+			'U_HIDE_FIND_MEMBER'	=> ($mode == 'searchuser' || ($mode == '' && $submit)) ? $u_hide_find_member : '',
 			'U_SORT_USERNAME'		=> $sort_url . '&amp;sk=a&amp;sd=' . (($sort_key == 'a' && $sort_dir == 'a') ? 'd' : 'a'),
 			'U_SORT_FROM'			=> $sort_url . '&amp;sk=b&amp;sd=' . (($sort_key == 'b' && $sort_dir == 'a') ? 'd' : 'a'),
 			'U_SORT_JOINED'			=> $sort_url . '&amp;sk=c&amp;sd=' . (($sort_key == 'c' && $sort_dir == 'a') ? 'd' : 'a'),

phpBB/styles/prosilver/template/forum_fn.js

@@ -433,6 +433,43 @@ function apply_onkeypress_event()
 	}
 }
 
+/**
+* Toggle a section's visibility status
+*/
+function toggle_section(link, panel_id, expand_text, collapse_text)
+{
+	if (jquery_present)
+	{
+		var panel = jQuery('#' + panel_id);
+		if (panel.is(':visible'))
+		{
+			jQuery(link).text(expand_text);
+			panel.slideUp('fast');
+		}
+		else
+		{
+			jQuery(link).text(collapse_text);
+			panel.slideDown('fast');
+		}
+	}
+	else
+	{
+		var panel = document.getElementById(panel_id);
+		if (panel.style.display == 'none')
+		{
+			link.innerHTML = collapse_text;
+			panel.style.display = '';
+		}
+		else
+		{
+			link.innerHTML = expand_text;
+			panel.style.display = 'none';
+		}
+	}
+
+	return false;
+}
+
 /**
 * Detect JQuery existance. We currently do not deliver it, but some styles do, so why not benefit from it. ;)
 */

phpBB/styles/prosilver/template/memberlist_body.html

@@ -3,13 +3,11 @@
 	<!-- INCLUDE memberlist_search.html -->
 	<form method="post" id="results" action="{S_MODE_ACTION}" onsubmit="insert_marked(this.user); return false">
 
-<!-- ELSEIF S_SEARCH_USER -->
-	<!-- INCLUDE overall_header.html -->
-	<!-- INCLUDE memberlist_search.html -->
-	<form method="post" action="{S_MODE_ACTION}">
-
 <!-- ELSE -->
 	<!-- INCLUDE overall_header.html -->
+	<div class="panel" id="memberlist_search"<!-- IF not S_SEARCH_USER --> style="display: none;"<!-- ENDIF -->>
+	<!-- INCLUDE memberlist_search.html -->
+	</div>
 	<form method="post" action="{S_MODE_ACTION}">
 
 <!-- ENDIF -->
@@ -32,8 +30,7 @@
 
 			<ul class="linklist">
 				<li>
-
+				<!-- IF U_FIND_MEMBER and not S_SEARCH_USER --><a href="{U_FIND_MEMBER}" onclick="return toggle_section(this, 'memberlist_search', '{LA_FIND_USERNAME}', '{LA_HIDE_MEMBER_SEARCH}')">{L_FIND_USERNAME}</a> &bull; <!-- ELSEIF S_SEARCH_USER and U_HIDE_FIND_MEMBER and not S_IN_SEARCH_POPUP --><a href="{U_HIDE_FIND_MEMBER}" onclick="return toggle_section(this, 'memberlist_search', '{LA_FIND_USERNAME}', '{LA_HIDE_MEMBER_SEARCH}')">{L_HIDE_MEMBER_SEARCH}</a> &bull; <!-- ENDIF -->
-				<!-- IF U_FIND_MEMBER and not S_SEARCH_USER --><a href="{U_FIND_MEMBER}">{L_FIND_USERNAME}</a> &bull; <!-- ELSEIF S_SEARCH_USER and U_HIDE_FIND_MEMBER and not S_IN_SEARCH_POPUP --><a href="{U_HIDE_FIND_MEMBER}">{L_HIDE_MEMBER_SEARCH}</a> &bull; <!-- ENDIF -->
 				<strong style="font-size: 0.95em;">
 				<!-- BEGIN first_char -->
 					<a href="{first_char.U_SORT}">{first_char.DESC}</a>&nbsp;

phpBB/styles/prosilver/template/memberlist_search.html

@@ -37,9 +37,8 @@ function insert_single(user)
 }
 // ]]>
 </script>
-<script type="text/javascript" src="{T_SUPER_TEMPLATE_PATH}/forum_fn.js"></script>
 <!-- ENDIF -->
-
+<!-- INCLUDEJS template/forum_fn.js -->
 <h2 class="solo">{L_FIND_USERNAME}</h2>
 
 <form method="post" action="{S_MODE_ACTION}" id="search_memberlist">

phpBB/styles/subsilver2/template/memberlist_body.html

@@ -4,9 +4,9 @@
 	<!-- INCLUDE overall_header.html -->
 <!-- ENDIF -->
 
-<!-- IF S_SEARCH_USER -->	
+<div class="panel" id="memberlist_search"<!-- IF not S_SEARCH_USER --> style="display: none;"<!-- ENDIF -->>
 	<!-- INCLUDE memberlist_search.html -->	
-<!-- ENDIF -->
+</div>
 
 <!-- IF S_SHOW_GROUP --><!-- INCLUDE memberlist_group.html --><!-- ENDIF -->
 
@@ -21,9 +21,9 @@
 					<!-- END first_char -->
 				</select>&nbsp;<input type="submit" name="char" value="{L_DISPLAY}" class="btnlite" /></td>
 	<!-- IF U_FIND_MEMBER and not S_SEARCH_USER -->
-			<td class="genmed" align="{S_CONTENT_FLOW_END}"><a href="{U_FIND_MEMBER}">{L_FIND_USERNAME}</a></td>
+			<td class="genmed" align="{S_CONTENT_FLOW_END}"><a href="{U_FIND_MEMBER}" onclick="return toggle_section(this, 'memberlist_search', '{LA_FIND_USERNAME}', '{LA_HIDE_MEMBER_SEARCH}')">{L_FIND_USERNAME}</a></td>
 	<!-- ELSEIF S_SEARCH_USER and U_HIDE_FIND_MEMBER and not S_IN_SEARCH_POPUP -->
-			<td class="genmed" align="{S_CONTENT_FLOW_END}"><a href="{U_HIDE_FIND_MEMBER}">{L_HIDE_MEMBER_SEARCH}</a></td>
+			<td class="genmed" align="{S_CONTENT_FLOW_END}"><a href="{U_HIDE_FIND_MEMBER}" onclick="return toggle_section(this, 'memberlist_search', '{LA_FIND_USERNAME}', '{LA_HIDE_MEMBER_SEARCH}')">{L_HIDE_MEMBER_SEARCH}</a></td>
 	<!-- ENDIF -->
 		</tr>
 		</table>

phpBB/styles/subsilver2/template/memberlist_search.html

@@ -1,8 +1,8 @@
 <!-- You should retain this javascript in your own template! -->
 
-<!-- IF S_IN_SEARCH_POPUP -->
 	<script type="text/javascript">
 	// <![CDATA[
+<!-- IF S_IN_SEARCH_POPUP -->
 		function insert_user(user)
 		{
 			opener.document.forms['{S_FORM_NAME}'].{S_FIELD_NAME}.value = ( opener.document.forms['{S_FORM_NAME}'].{S_FIELD_NAME}.value.length && opener.document.forms['{S_FORM_NAME}'].{S_FIELD_NAME}.type == "textarea" ) ? opener.document.forms['{S_FORM_NAME}'].{S_FIELD_NAME}.value + "\n" + user : user;
@@ -60,9 +60,46 @@
 				}
 			}
 		}
+<!-- ENDIF -->
+
+		/**
+		* Toggle a section's visibility status
+		*/
+		function toggle_section(link, panel_id, expand_text, collapse_text)
+		{
+			if (window.jQuery)
+			{
+				var panel = jQuery('#' + panel_id);
+				if (panel.is(':visible'))
+				{
+					jQuery(link).text(expand_text);
+					panel.slideUp('fast');
+				}
+				else
+				{
+					jQuery(link).text(collapse_text);
+					panel.slideDown('fast');
+				}
+			}
+			else
+			{
+				var panel = document.getElementById(panel_id);
+				if (panel.style.display == 'none')
+				{
+					link.innerHTML = collapse_text;
+					panel.style.display = '';
+				}
+				else
+				{
+					link.innerHTML = expand_text;
+					panel.style.display = 'none';
+				}
+			}
+
+			return false;
+		}
 	// ]]>
 	</script>
-<!-- ENDIF -->
 
 <form method="post" action="{S_MODE_ACTION}" name="search">