! News fader didn't fade items

Signed-off-by: John Rayes <[email protected]>

Themes/default/BoardIndex.template.php

@@ -46,8 +46,7 @@ function template_main()
 	<script type="text/javascript"><!-- // --><![CDATA[
 
 		// Create a news fader object.
-		var oNewsFader = new smf_NewsFader({
-			sSelf: \'oNewsFader\',
+		var oNewsFader = new smc_NewsFader({
 			sFaderControlId: \'smfFadeScroller\',
 			sItemTemplate: ', JavaScriptEscape('<strong>%1$s</strong>'), ',
 			iFadeDelay: ', empty($settings['newsfader_time']) ? 5000 : $settings['newsfader_time'], '
@@ -353,27 +352,27 @@ function template_info_center()
 		{
 			echo '
 				<span class="birthday">', $context['calendar_only_today'] ? $txt['birthdays'] : $txt['birthdays_upcoming'], '</span> ';
-			
+
 			// Each member in calendar_birthdays has:
-			//		id, name (person), age (if they have one set?), is_last. (last in list?), and is_today (birthday is today?) 
+			//		id, name (person), age (if they have one set?), is_last. (last in list?), and is_today (birthday is today?)
 			foreach ($context['calendar_birthdays'] as $member)
 				echo '
 				<a href="', $scripturl, '?action=profile;u=', $member['id'], '">', $member['is_today'] ? '<strong class="fix_rtl_names">' : '', $member['name'], $member['is_today'] ? '</strong>' : '', isset($member['age']) ? ' (' . $member['age'] . ')' : '', '</a>', $member['is_last'] ? '<br />' : ', ';
 		}
-		
+
 		// Events like community get-togethers.
 		if (!empty($context['calendar_events']))
 		{
 			echo '
 				<span class="event">', $context['calendar_only_today'] ? $txt['events'] : $txt['events_upcoming'], '</span> ';
-			
+
 			// Each event in calendar_events should have:
 			//		title, href, is_last, can_edit (are they allowed?), modify_href, and is_today.
 			foreach ($context['calendar_events'] as $event)
 				echo '
 					', $event['can_edit'] ? '<a href="' . $event['modify_href'] . '" title="' . $txt['calendar_edit'] . '"><img src="' . $settings['images_url'] . '/icons/calendar_modify.png" alt="*" class="centericon" /></a> ' : '', $event['href'] == '' ? '' : '<a href="' . $event['href'] . '">', $event['is_today'] ? '<strong>' . $event['title'] . '</strong>' : $event['title'], $event['href'] == '' ? '' : '</a>', $event['is_last'] ? '<br />' : ', ';
 		}
-		
+
 		echo '
 			</p>';
 	}

Themes/default/scripts/fader.js

@@ -1,76 +1,41 @@
-function smf_NewsFader(oOptions)
+function smc_NewsFader(oOptions)
 {
-	this.opt = oOptions;
-
-	this.oFaderHandle = document.getElementById(this.opt.sFaderControlId);
-
-	// Surround each item with... anything special?
-	this.sItemTemplate = 'sItemTemplate' in this.opt ? this.opt.sItemTemplate : '%1$s';
-
-	// Fade delay (in milliseconds).
-	this.iFadeDelay = 'iFadeDelay' in this.opt ? this.opt.iFadeDelay : 5000;
-
-	// The array that contains all the lines of the news for display.
-	this.aFaderItems = 'aFaderItems' in this.opt ? this.opt.aFaderItems : [];
-
-	// Should we look for fader data, still?
-	this.bReceivedItemsOnConstruction = 'aFaderItems' in this.opt;
-
-	// The current item in smfFadeContent.
-	this.iFadeIndex = -1;
-
-	// Just make sure the page is loaded before calling the init.
-	var fader = this;
-	$(document).ready(function() {fader.init();});
-}
-
-smf_NewsFader.prototype.init = function init()
-{
-	var oForeEl, oForeColor, oBackEl, oBackColor;
-
-	// Did we get our fader items on construction, or should we be gathering them instead?
-	if (!this.bReceivedItemsOnConstruction)
-	{
-		// Get the news from the list in boardindex
-		var oNewsItems = this.oFaderHandle.getElementsByTagName('li');
-
-		// Fill the array that has previously been created
-		for (var i = 0, n = oNewsItems.length; i < n; i ++)
-			this.aFaderItems[i] = oNewsItems[i].innerHTML;
-	}
-
-	// Start the fader!
-	this.fade();
-}
-
-// Main	fading function... called 50 times every second.
-smf_NewsFader.prototype.fade = function fade()
-{
-	if (this.aFaderItems.length <= 1)
-		return;
-
-	var currentText;
-	// Starting out?  Set up the first item.
-	if (this.iFadeIndex == -1)
-	{
-		currentText = this.sItemTemplate.replace('%1$s', this.aFaderItems[0]);
-		this.iFadeIndex = 1;
-	}
-	else
-	{
-		// Go to the next item, or first if we're out of items.
-		currentText = this.sItemTemplate.replace('%1$s', this.aFaderItems[this.iFadeIndex ++]);
-		if (this.iFadeIndex >= this.aFaderItems.length)
-			this.iFadeIndex = 0;
-	}
-
-	$('#' + this.opt.sFaderControlId).each(function() {
-		temp_elem = $(this).clone().css({height: 'auto'}).appendTo('body').html(currentText);
-		final_height = parseInt(temp_elem.height()) + parseInt($(this).css('padding-top').replace(/[^-\d\.]/g, '')) + parseInt($(this).css('padding-bottom').replace(/[^-\d\.]/g, ''));
-		temp_elem.remove();
-		$(this).height($(this).height());
-	}).html(currentText).animate({height: final_height}, 'slow');
-
-	// Keep going.
-	window.setTimeout(this.opt.sSelf + '.fade();', this.iFadeDelay);
+	var
+		aFaderItems = oOptions.aFaderItems || [],
+		iFadeIndex = 0,
+		iFadeDelay = oOptions.iFadeDelay || 5000,
+		iFadeSpeed = oOptions.iFadeSpeed || 650,
+		sItemTemplate = oOptions.sItemTemplate || '%1$s',
+		sControlId = '#' + oOptions.sFaderControlId,
+
+		fadeIn = function ()
+		{
+			iFadeIndex++;
+			if (iFadeIndex >= aFaderItems.length)
+				iFadeIndex = 0;
+
+			$(sControlId + ' li').html(sItemTemplate.replace('%1$s', aFaderItems[iFadeIndex])).fadeTo(iFadeSpeed, 0.99, function () {
+				// Restore ClearType in IE.
+				this.style.filter = '';
+				fadeOut();
+			});
+		},
+
+		fadeOut = function ()
+		{
+			setTimeout(function ()
+			{
+				$(sControlId + ' li').fadeTo(iFadeSpeed, 0, fadeIn);
+			}, iFadeDelay);
+		};
+
+	if (!aFaderItems.length)
+		$(sControlId + ' li').each(function ()
+		{
+			aFaderItems.push($(this).html());
+		});
+
+	$(sControlId).html('<li>' + sItemTemplate.replace('%1$s', aFaderItems[0]) + '</li>').show();
+
+	fadeOut();
 }