Merge pull request #1042 from Arantor/release-2.1

The toggler really should use CSS where possible, this allows us to use our sprites.

Themes/default/BoardIndex.template.php

@@ -36,12 +36,12 @@ function template_newsfader()
 			<div id="newsfader">
 				<div class="cat_bar">
 					<h3 class="catbg">
-						<img id="newsupshrink" src="', $settings['images_url'], '/collapse.png" alt="*" title="', $txt['hide'], '" align="bottom" style="display: none;" />
+						<span id="newsupshrink" class="toggle_up floatright" alt="*" title="', $txt['hide'], '" align="bottom" style="display: none;"></span>
 						', $txt['news'], '
 					</h3>
 				</div>
 				<div class="roundframe rfix" id="smfFadeScrollerCont">
-					<ul class="reset" id="smfFadeScroller"', empty($options['collapse_news_fader']) ? '' : ' style="display: none;"', '>
+					<ul class="reset" id="smfFadeScroller">
 						<li>
 							', implode('</li><li>', $context['news_lines']), '
 						</li>
@@ -67,9 +67,7 @@ function template_newsfader()
 					aSwapImages: [
 						{
 							sId: \'newsupshrink\',
-							srcExpanded: smf_images_url + \'/collapse.png\',
 							altExpanded: ', JavaScriptEscape($txt['hide']), ',
-							srcCollapsed: smf_images_url + \'/expand.png\',
 							altCollapsed: ', JavaScriptEscape($txt['show']), '
 						}
 					],
@@ -243,7 +241,7 @@ function template_info_center()
 	<div class="roundframe" id="info_center">
 		<div class="cat_bar">
 			<h3 class="catbg">
-				<img class="icon" id="upshrink_ic" src="', $settings['images_url'], '/collapse.png" alt="*" title="', $txt['hide'], '" style="display: none;" />
+				<span class="toggle_up floatright" id="upshrink_ic" title="', $txt['hide'], '" style="display: none;"></span>
 				<a href="#" id="upshrink_link">', sprintf($txt['info_center_title'], $context['forum_name_html_safe']), '</a>
 			</h3>
 		</div>
@@ -437,9 +435,7 @@ function template_info_center()
 			aSwapImages: [
 				{
 					sId: \'upshrink_ic\',
-					srcExpanded: smf_images_url + \'/collapse.png\',
 					altExpanded: ', JavaScriptEscape($txt['hide']), ',
-					srcCollapsed: smf_images_url + \'/expand.png\',
 					altCollapsed: ', JavaScriptEscape($txt['show']), '
 				}
 			],

Themes/default/ManageNews.template.php

@@ -50,7 +50,7 @@ function template_email_members()
 
 			<div id="advanced_panel_header" class="cat_bar">
 				<h3 class="catbg">
-					<img id="advanced_panel_toggle" class="panel_toggle" style="display: none;" src="', $settings['images_url'], '/expand.png" alt="*" />
+					<span id="advanced_panel_toggle" class="toggle_down floatright" style="display: none;"></span>
 					<a href="#" id="advanced_panel_link" >', $txt['advanced'], '</a>
 				</h3>
 			</div>
@@ -130,9 +130,7 @@ function template_email_members()
 			aSwapImages: [
 				{
 					sId: \'advanced_panel_toggle\',
-					srcExpanded: smf_images_url + \'/collapse.png\',
 					altExpanded: ', JavaScriptEscape($txt['hide']), ',
-					srcCollapsed: smf_images_url + \'/expand.png\',
 					altCollapsed: ', JavaScriptEscape($txt['show']), '
 				}
 			],

Themes/default/ManagePermissions.template.php

@@ -104,7 +104,7 @@ function template_permission_index()
 		echo '
 			<div class="cat_bar">
 				<h3 class="catbg">
-					<img id="permissions_panel_toggle" class="panel_toggle" style="display: none;" src="', $settings['images_url'], '/', empty($context['show_advanced_options']) ? 'collapse' : 'expand', '.png"  alt="*" />
+					<span id="permissions_panel_toggle" class="', empty($context['show_advanced_options']) ? 'toggle_down' : 'toggle_up', ' floatright" style="display: none;"></span>
 					<a href="#" id="permissions_panel_link">', $txt['permissions_advanced_options'], '</a>
 				</h3>
 			</div>
@@ -205,9 +205,7 @@ function template_permission_index()
 			aSwapImages: [
 				{
 					sId: \'permissions_panel_toggle\',
-					srcExpanded: smf_images_url + \'/collapse.png\',
 					altExpanded: ', JavaScriptEscape($txt['hide']), ',
-					srcCollapsed: smf_images_url + \'/expand.png\',
 					altCollapsed: ', JavaScriptEscape($txt['show']), '
 				}
 			],

Themes/default/Packages.template.php

@@ -346,6 +346,7 @@ function template_view_package()
 				echo '
 			aOperationElements[', $key, '] = new smc_Toggle({
 				bToggleEnabled: true,
+				bNoAnimate: true,
 				bCurrentlyCollapsed: ', $operation ? 'false' : 'true', ',
 				aSwappableContainers: [
 					\'operation_', $key, '\'
@@ -608,7 +609,7 @@ function template_browse()
 			<div id="advanced_box" >
 				<div class="cat_bar">
 					<h3 class="catbg">
-						<img id="advanced_panel_toggle" class="panel_toggle" style="display: none;" src="', $settings['images_url'], '/expand.png" alt="*" />
+						<span id="advanced_panel_toggle" class="floatright" style="display: none;"></span>
 						<a href="#" id="advanced_panel_link">', $txt['package_advanced_button'], '</a>
 					</h3>
 				</div>
@@ -651,9 +652,7 @@ function template_browse()
 			aSwapImages: [
 				{
 					sId: \'advanced_panel_toggle\',
-					srcExpanded: smf_images_url + \'/collapse.png\',
 					altExpanded: ', JavaScriptEscape($txt['hide']), ',
-					srcCollapsed: smf_images_url + \'/expand.png\',
 					altCollapsed: ', JavaScriptEscape($txt['show']), '
 				}
 			],
@@ -875,7 +874,7 @@ function template_package_list()
 		{
 			echo '
 					<li>
-						<strong><img id="ps_img_', $i, '" src="', $settings['images_url'], '/collapse.png" alt="*" style="display: none;" /> ', $packageSection['title'], '</strong>';
+						<strong><span id="ps_img_', $i, '" class="toggle_up" alt="*" style="display: none;" /></span> ', $packageSection['title'], '</strong>';
 
 			if (!empty($packageSection['text']))
 				echo '
@@ -915,7 +914,7 @@ function template_package_list()
 				{
 					// 1. Some mod [ Download ].
 					echo '
-							<strong><img id="ps_img_', $i, '_pkg_', $id, '" src="', $settings['images_url'], '/collapse.png" alt="*" style="display: none;" /> ', $package['can_install'] ? '<strong>' . $package['name'] . '</strong> <a href="' . $package['download']['href'] . '">[ ' . $txt['download'] . ' ]</a>': $package['name'];
+							<strong><span id="ps_img_', $i, '_pkg_', $id, '" class="toggle_up" alt="*" style="display: none;"></span> ', $package['can_install'] ? '<strong>' . $package['name'] . '</strong> <a href="' . $package['download']['href'] . '">[ ' . $txt['download'] . ' ]</a>': $package['name'];
 
 					// Mark as installed and current?
 					if ($package['is_installed'] && !$package['is_newer'])
@@ -991,9 +990,7 @@ function template_package_list()
 					aSwapImages: [
 						{
 							sId: \'ps_img_', $section, '\',
-							srcExpanded: smf_images_url + \'/collapse.png\',
 							altExpanded: \'*\',
-							srcCollapsed: smf_images_url + \'/expand.png\',
 							altCollapsed: \'*\'
 						}
 					]
@@ -1012,9 +1009,7 @@ function template_package_list()
 					aSwapImages: [
 						{
 							sId: \'ps_img_', $section, '_pkg_', $id, '\',
-							srcExpanded: smf_images_url + \'/collapse.png\',
 							altExpanded: \'*\',
-							srcCollapsed: smf_images_url + \'/expand.png\',
 							altCollapsed: \'*\'
 						}
 					]

Themes/default/PersonalMessage.template.php

@@ -791,7 +791,7 @@ function template_search()
 			<div class="roundframe">
 				<div class="title_bar">
 					<h4 class="titlebg">
-						<img id="advanced_panel_toggle" class="panel_toggle" style="display: none;" src="', $settings['images_url'], '/collapse.png"  alt="*" /><a href="#" id="advanced_panel_link">', $txt['pm_search_choose_label'], '</a>
+						<span id="advanced_panel_toggle" class="toggle_up floatright" style="display: none;"></span><a href="#" id="advanced_panel_link">', $txt['pm_search_choose_label'], '</a>
 					</h4>
 				</div>
 				<div id="advanced_panel_div">
@@ -827,9 +827,7 @@ function template_search()
 				aSwapImages: [
 					{
 						sId: \'advanced_panel_toggle\',
-						srcExpanded: smf_images_url + \'/collapse.png\',
 						altExpanded: ', JavaScriptEscape($txt['hide']), ',
-						srcCollapsed: smf_images_url + \'/expand.png\',
 						altCollapsed: ', JavaScriptEscape($txt['show']), '
 					}
 				],
@@ -1135,7 +1133,7 @@ function template_send()
 			<br />
 			<div id="postDraftOptionsHeader" class="title_bar">
 				<h4 class="titlebg">
-					<img id="postDraftExpand" class="panel_toggle" style="display: none;" src="', $settings['images_url'], '/collapse.png" alt="-" /> <strong><a href="#" id="postDraftExpandLink">', $txt['draft_load'], '</a></strong>
+					<span id="postDraftExpand" class="toggle_up floatright" style="display: none;"></span> <strong><a href="#" id="postDraftExpandLink">', $txt['draft_load'], '</a></strong>
 				</h4>
 			</div>
 			<div id="postDraftOptions" class="load_drafts padding">
@@ -1271,9 +1269,7 @@ function template_send()
 				aSwapImages: [
 					{
 						sId: \'postDraftExpand\',
-						srcExpanded: smf_images_url + \'/collapse.png\',
 						altExpanded: \'-\',
-						srcCollapsed: smf_images_url + \'/expand.png\',
 						altCollapsed: \'+\'
 					}
 				],

Themes/default/Post.template.php

@@ -381,7 +381,7 @@ function template_main()
 		echo '
 					<div id="postAdditionalOptionsHeader" class="title_bar">
 						<h4 class="titlebg">
-							<img id="postMoreExpand" class="panel_toggle" style="display: none;" src="', $settings['images_url'], '/collapse.png" alt="-" /> <strong><a href="#" id="postMoreExpandLink">', $context['can_post_attachment'] ? $txt['post_additionalopt_attach'] : $txt['post_additionalopt'], '</a></strong>
+							<span id="postMoreExpand" class="toggle_up floatright" style="display: none;"></span> <strong><a href="#" id="postMoreExpandLink">', $context['can_post_attachment'] ? $txt['post_additionalopt_attach'] : $txt['post_additionalopt'], '</a></strong>
 						</h4>
 					</div>
 					<div id="postAdditionalOptions">';
@@ -507,7 +507,7 @@ function template_main()
 		echo '
 					<div id="postDraftOptionsHeader" class="title_bar">
 						<h4 class="titlebg">
-							<img id="postDraftExpand" class="panel_toggle" style="display: none;" src="', $settings['images_url'], '/collapse.png" alt="-" /> <strong><a href="#" id="postDraftExpandLink">', $txt['draft_load'], '</a></strong>
+							<span id="postDraftExpand" class="toggle_up floatright" style="display: none;"></span> <strong><a href="#" id="postDraftExpandLink">', $txt['draft_load'], '</a></strong>
 						</h4>
 					</div>
 					<div id="postDraftOptions">
@@ -771,9 +771,7 @@ function template_main()
 				aSwapImages: [
 					{
 						sId: \'postMoreExpand\',
-						srcExpanded: smf_images_url + \'/collapse.png\',
 						altExpanded: \'-\',
-						srcCollapsed: smf_images_url + \'/expand.png\',
 						altCollapsed: \'+\'
 					}
 				],
@@ -798,9 +796,7 @@ function template_main()
 				aSwapImages: [
 					{
 						sId: \'postDraftExpand\',
-						srcExpanded: smf_images_url + \'/collapse.png\',
 						altExpanded: \'-\',
-						srcCollapsed: smf_images_url + \'/expand.png\',
 						altCollapsed: \'+\'
 					}
 				],

Themes/default/css/index.css

@@ -932,11 +932,6 @@ div.title_barIC h4.titlebg {
 	margin: 0;
 	padding: 6px;
 }
-img#upshrink_ic, img#newsupshrink, img.panel_toggle {
-	float: right;
-	margin: 0;
-	padding: 4px 4px 0 4px;
-}
 #quickReplyExpand {
 	float: right;
 	margin: 2px 2px 0 2px;
@@ -2562,7 +2557,7 @@ ul.post_options li {
 	padding: 5px 10px;
 	margin: 0;
 }
-#postDraftOptions .settings dd:first-child, #postDraftOptions .settings dt:first-child{
+#postDraftOptions .settings dd:first-of-type, #postDraftOptions .settings dt:first-child{
 	border-top: none; /* Some people are OCD, like me. :P */
 }
 #postDraftOptions .settings strong{

Themes/default/css/rtl.css

@@ -284,9 +284,6 @@ form#ic_login ul li {
 #index_common_stats {
 	text-align: left;
 }
-img#upshrink_ic, img#newsupshrink {
-	float: left;
-}
 
 /* Styles for the message (topic) index.
 ---------------------------------------------------- */

Themes/default/scripts/script.js

@@ -882,31 +882,36 @@ smc_Toggle.prototype.init = function ()
 			this.opt.bCurrentlyCollapsed = cookieValue == '1';
 	}
 
-	// If the init state is set to be collapsed, collapse it.
-	if (this.opt.bCurrentlyCollapsed)
-		this.changeState(true, true);
-
 	// Initialize the images to be clickable.
 	if ('aSwapImages' in this.opt)
 	{
 		for (var i = 0, n = this.opt.aSwapImages.length; i < n; i++)
 		{
+			this.opt.aSwapImages[i].isCSS = (typeof this.opt.aSwapImages[i].srcCollapsed == 'undefined');
+			if (this.opt.aSwapImages[i].isCSS)
+			{
+				if (!this.opt.aSwapImages[i].cssCollapsed)
+					this.opt.aSwapImages[i].cssCollapsed = 'toggle_down';
+				if (!this.opt.aSwapImages[i].cssExpanded)
+					this.opt.aSwapImages[i].cssExpanded = 'toggle_up';
+			}
+			else
+			{
+				// Preload the collapsed image.
+				smc_preCacheImage(this.opt.aSwapImages[i].srcCollapsed);
+			}
+
+			// Display the image in case it was hidden.
+			$('#' + this.opt.aSwapImages[i].sId).show();
 			var oImage = document.getElementById(this.opt.aSwapImages[i].sId);
 			if (typeof(oImage) == 'object' && oImage != null)
 			{
-				// Display the image in case it was hidden.
-				if (oImage.style.display == 'none')
-					oImage.style.display = '';
-
 				oImage.instanceRef = this;
 				oImage.onclick = function () {
 					this.instanceRef.toggle();
 					this.blur();
 				}
 				oImage.style.cursor = 'pointer';
-
-				// Preload the collapsed image.
-				smc_preCacheImage(this.opt.aSwapImages[i].srcCollapsed);
 			}
 		}
 	}
@@ -932,6 +937,10 @@ smc_Toggle.prototype.init = function ()
 			}
 		}
 	}
+
+	// If the init state is set to be collapsed, collapse it.
+	if (this.opt.bCurrentlyCollapsed)
+		this.changeState(true, true);
 }
 
 // Collapse or expand the section.
@@ -961,15 +970,22 @@ smc_Toggle.prototype.changeState = function(bCollapse, bInit)
 	{
 		for (var i = 0, n = this.opt.aSwapImages.length; i < n; i++)
 		{
-			var oImage = document.getElementById(this.opt.aSwapImages[i].sId);
-			if (typeof(oImage) == 'object' && oImage != null)
+			if (this.opt.aSwapImages[i].isCSS)
+			{
+				$('#' + this.opt.aSwapImages[i].sId).toggleClass(this.opt.aSwapImages[i].cssCollapsed, bCollapse).toggleClass(this.opt.aSwapImages[i].cssExpanded, !bCollapse).attr('title', bCollapse ? this.opt.aSwapImages[i].altCollapsed : this.opt.aSwapImages[i].altExpanded);
+			}
+			else
 			{
-				// Only (re)load the image if it's changed.
-				var sTargetSource = bCollapse ? this.opt.aSwapImages[i].srcCollapsed : this.opt.aSwapImages[i].srcExpanded;
-				if (oImage.src != sTargetSource)
-					oImage.src = sTargetSource;
+				var oImage = document.getElementById(this.opt.aSwapImages[i].sId);
+				if (typeof(oImage) == 'object' && oImage != null)
+				{
+					// Only (re)load the image if it's changed.
+					var sTargetSource = bCollapse ? this.opt.aSwapImages[i].srcCollapsed : this.opt.aSwapImages[i].srcExpanded;
+					if (oImage.src != sTargetSource)
+						oImage.src = sTargetSource;
 
-				oImage.alt = oImage.title = bCollapse ? this.opt.aSwapImages[i].altCollapsed : this.opt.aSwapImages[i].altExpanded;
+					oImage.alt = oImage.title = bCollapse ? this.opt.aSwapImages[i].altCollapsed : this.opt.aSwapImages[i].altExpanded;
+				}
 			}
 		}
 	}
@@ -994,10 +1010,17 @@ smc_Toggle.prototype.changeState = function(bCollapse, bInit)
 		var oContainer = document.getElementById(this.opt.aSwappableContainers[i]);
 		if (typeof(oContainer) == 'object' && oContainer != null)
 		{
-			if (bCollapse)
-				$(oContainer).slideUp();
+			if (!!this.opt.bNoAnimate)
+			{
+				$(oContainer).toggle(!bCollapse);
+			}
 			else
-				$(oContainer).slideDown();
+			{
+				if (bCollapse)
+					$(oContainer).slideUp();
+				else
+					$(oContainer).slideDown();
+			}
 		}
 	}