[ticket/10383] AJAXify poll voting

PHPBB3-10383
author: Cesar G <prototech91@gmail.com> 2013-10-06 21:40:21 -0700
committer: Cesar G <prototech91@gmail.com> 2013-10-06 21:48:36 -0700
commit: 637a5a5eea6eaa876d1d69386dd688d0f44efa69 (patch)
tree: 0a6df93dec3106c024bdde0619c539a5354077a3 /phpBB
parent: 2adb8499a904c4d3bcdf47b2a5b65d2b5f34cbdd (diff)
download: forums-637a5a5eea6eaa876d1d69386dd688d0f44efa69.tar
forums-637a5a5eea6eaa876d1d69386dd688d0f44efa69.tar.gz
forums-637a5a5eea6eaa876d1d69386dd688d0f44efa69.tar.bz2
forums-637a5a5eea6eaa876d1d69386dd688d0f44efa69.tar.xz
forums-637a5a5eea6eaa876d1d69386dd688d0f44efa69.zip
3 files changed, 112 insertions, 14 deletions
diff --git a/phpBB/styles/prosilver/template/ajax.js b/phpBB/styles/prosilver/template/ajax.js
index 394aca749b..decbba1d89 100644
--- a/phpBB/styles/prosilver/template/ajax.js
+++ b/phpBB/styles/prosilver/template/ajax.js
@@ -157,7 +157,81 @@ phpbb.addAjaxCallback('zebra', function(res) {
 	}
 });
 
+/**
+ * This callback updates the poll results after voting.
+ */
+phpbb.addAjaxCallback('vote_poll', function(res) {
+	if (typeof res.success !== 'undefined') {
+		var poll = $('.topic_poll');
+		var panel = poll.find('.panel');
+		var results_visible = poll.find('dl:first-child .resultbar').is(':visible');
+
+		// Force the current height to prevent the page from jumping when the content changes
+		panel.height(panel.find('.inner').outerHeight());
+
+		// Remove the View results link
+		if (!results_visible) {
+			poll.find('.poll_view_results').fadeOut(500);
+		}
+
+		if (!res.can_vote) {
+			poll.find('.polls, .poll_max_votes, .poll_vote, .poll_option_select').fadeOut(500, function () {
+				poll.find('.resultbar, .poll_option_percent, .poll_total_votes').show();
+			});
+		} else {
+			// If the user can still vote, simply slide down the results
+			poll.find('.resultbar, .poll_option_percent, .poll_total_votes').slideDown(500);
+		}
+
+		// Update the total votes count
+		poll.find('.poll_total_vote_cnt').html(res.total_votes);
+
+		// Update each option
+		poll.find('[data-poll-option-id]').each(function() {
+			var option = $(this);
+			var option_id = option.attr('data-poll-option-id');
+			var voted = (typeof res.user_votes[option_id] !== 'undefined') ? true : false;
+			var percent = (!res.total_votes) ? 0 : Math.round((res.vote_counts[option_id] / res.total_votes) * 100);
+
+			option.toggleClass('voted', voted);
+
+			// Update the bars
+			var bar = option.find('.resultbar div');
+			var bar_time_lapse = (res.can_vote) ? 500 : 1500;
+			var new_bar_class = (percent == 100) ? 'pollbar5' : 'pollbar' + (Math.floor(percent / 20) + 1);
+
+			setTimeout(function () {
+				bar.animate({width: percent + '%'}, 500).removeClass('pollbar1 pollbar2 pollbar3 pollbar4 pollbar5').addClass(new_bar_class);
+				bar.html(res.vote_counts[option_id]);
+
+				var percent_txt = (!percent) ? res.NO_VOTES : percent + '%';
+				option.find('.poll_option_percent').html(percent_txt);
+			}, bar_time_lapse);
+		});
 
+		if (!res.can_vote) {
+			poll.find('.polls').delay(400).fadeIn(500);
+		}
+
+		// Remove the gap resulting from removing options
+		setTimeout(function() {
+			panel.animate({height: panel.find('.inner').height()}, 500);
+		}, 1500);
+	}
+});
+
+/**
+ * Show poll results when clicking View results link.
+ */
+$('.poll_view_results a').click(function(e) {
+	// Do not follow the link
+	e.preventDefault();
+
+	var poll = $(this).parents('.topic_poll');
+
+	poll.find('.resultbar, .poll_option_percent, .poll_total_votes').slideDown(500);
+	poll.find('.poll_view_results').fadeOut(500);
+});
 
 $('[data-ajax]').each(function() {
 	var $this = $(this),
diff --git a/phpBB/styles/prosilver/template/viewtopic_body.html b/phpBB/styles/prosilver/template/viewtopic_body.html
index e104257e12..61077fd0c4 100644
--- a/phpBB/styles/prosilver/template/viewtopic_body.html
+++ b/phpBB/styles/prosilver/template/viewtopic_body.html
@@ -60,41 +60,39 @@
 <div class="clear"></div>
 
 <!-- IF S_HAS_POLL -->
-	<form method="post" action="{S_POLL_ACTION}">
+	<form method="post" action="{S_POLL_ACTION}" data-ajax="vote_poll" class="topic_poll">
 
 	<div class="panel">
 		<div class="inner">
 
 		<div class="content">
 			<h2>{POLL_QUESTION}</h2>
-			<p class="author">{L_POLL_LENGTH}<!-- IF S_CAN_VOTE and L_POLL_LENGTH --><br /><!-- ENDIF --><!-- IF S_CAN_VOTE -->{L_MAX_VOTES}<!-- ENDIF --></p>
+			<p class="author">{L_POLL_LENGTH}<!-- IF S_CAN_VOTE and L_POLL_LENGTH --><br /><!-- ENDIF --><!-- IF S_CAN_VOTE --><span class="poll_max_votes">{L_MAX_VOTES}</span><!-- ENDIF --></p>
 
 			<fieldset class="polls">
 			<!-- BEGIN poll_option -->
-				<dl class="<!-- IF poll_option.POLL_OPTION_VOTED -->voted<!-- ENDIF -->"<!-- IF poll_option.POLL_OPTION_VOTED --> title="{L_POLL_VOTED_OPTION}"<!-- ENDIF -->>
+				<dl class="<!-- IF poll_option.POLL_OPTION_VOTED -->voted<!-- ENDIF -->"<!-- IF poll_option.POLL_OPTION_VOTED --> title="{L_POLL_VOTED_OPTION}"<!-- ENDIF --> data-poll-option-id="{poll_option.POLL_OPTION_ID}">
 					<dt><!-- IF S_CAN_VOTE --><label for="vote_{poll_option.POLL_OPTION_ID}">{poll_option.POLL_OPTION_CAPTION}</label><!-- ELSE -->{poll_option.POLL_OPTION_CAPTION}<!-- ENDIF --></dt>
-					<!-- IF S_CAN_VOTE --><dd style="width: auto;"><!-- IF S_IS_MULTI_CHOICE --><input type="checkbox" name="vote_id[]" id="vote_{poll_option.POLL_OPTION_ID}" value="{poll_option.POLL_OPTION_ID}"<!-- IF poll_option.POLL_OPTION_VOTED --> checked="checked"<!-- ENDIF --> /><!-- ELSE --><input type="radio" name="vote_id[]" id="vote_{poll_option.POLL_OPTION_ID}" value="{poll_option.POLL_OPTION_ID}"<!-- IF poll_option.POLL_OPTION_VOTED --> checked="checked"<!-- ENDIF --> /><!-- ENDIF --></dd><!-- ENDIF -->
-					<!-- IF S_DISPLAY_RESULTS --><dd class="resultbar"><div class="<!-- IF poll_option.POLL_OPTION_PCT < 20 -->pollbar1<!-- ELSEIF poll_option.POLL_OPTION_PCT < 40 -->pollbar2<!-- ELSEIF poll_option.POLL_OPTION_PCT < 60 -->pollbar3<!-- ELSEIF poll_option.POLL_OPTION_PCT < 80 -->pollbar4<!-- ELSE -->pollbar5<!-- ENDIF -->" style="width:{poll_option.POLL_OPTION_PERCENT};">{poll_option.POLL_OPTION_RESULT}</div></dd>
-					<dd><!-- IF poll_option.POLL_OPTION_RESULT == 0 -->{L_NO_VOTES}<!-- ELSE -->{poll_option.POLL_OPTION_PERCENT}<!-- ENDIF --></dd><!-- ENDIF -->
+					<!-- IF S_CAN_VOTE --><dd style="width: auto;" class="poll_option_select"><!-- IF S_IS_MULTI_CHOICE --><input type="checkbox" name="vote_id[]" id="vote_{poll_option.POLL_OPTION_ID}" value="{poll_option.POLL_OPTION_ID}"<!-- IF poll_option.POLL_OPTION_VOTED --> checked="checked"<!-- ENDIF --> /><!-- ELSE --><input type="radio" name="vote_id[]" id="vote_{poll_option.POLL_OPTION_ID}" value="{poll_option.POLL_OPTION_ID}"<!-- IF poll_option.POLL_OPTION_VOTED --> checked="checked"<!-- ENDIF --> /><!-- ENDIF --></dd><!-- ENDIF -->
+					<dd class="resultbar<!-- IF not S_DISPLAY_RESULTS --> hidden<!-- ENDIF -->"><div class="<!-- IF poll_option.POLL_OPTION_PCT < 20 -->pollbar1<!-- ELSEIF poll_option.POLL_OPTION_PCT < 40 -->pollbar2<!-- ELSEIF poll_option.POLL_OPTION_PCT < 60 -->pollbar3<!-- ELSEIF poll_option.POLL_OPTION_PCT < 80 -->pollbar4<!-- ELSE -->pollbar5<!-- ENDIF -->" style="width:{poll_option.POLL_OPTION_PERCENT};">{poll_option.POLL_OPTION_RESULT}</div></dd>
+					<dd class="poll_option_percent<!-- IF not S_DISPLAY_RESULTS --> hidden<!-- ENDIF -->"><!-- IF poll_option.POLL_OPTION_RESULT == 0 -->{L_NO_VOTES}<!-- ELSE -->{poll_option.POLL_OPTION_PERCENT}<!-- ENDIF --></dd>
 				</dl>
 			<!-- END poll_option -->
 
-			<!-- IF S_DISPLAY_RESULTS -->
-				<dl>
+				<dl class="poll_total_votes<!-- IF not S_DISPLAY_RESULTS --> hidden<!-- ENDIF -->">
 					<dt>&nbsp;</dt>
-					<dd class="resultbar">{L_TOTAL_VOTES}{L_COLON} {TOTAL_VOTES}</dd>
+					<dd class="resultbar">{L_TOTAL_VOTES}{L_COLON} <span class="poll_total_vote_cnt">{TOTAL_VOTES}</span></dd>
 				</dl>
-			<!-- ENDIF -->
 
 			<!-- IF S_CAN_VOTE -->
-				<dl style="border-top: none;">
+				<dl style="border-top: none;" class="poll_vote">
 					<dt>&nbsp;</dt>
 					<dd class="resultbar"><input type="submit" name="update" value="{L_SUBMIT_VOTE}" class="button1" /></dd>
 				</dl>
 			<!-- ENDIF -->
 
 			<!-- IF not S_DISPLAY_RESULTS -->
-				<dl style="border-top: none;">
+				<dl style="border-top: none;" class="poll_view_results">
 					<dt>&nbsp;</dt>
 					<dd class="resultbar"><a href="{U_VIEW_RESULTS}">{L_VIEW_RESULTS}</a></dd>
 				</dl>
diff --git a/phpBB/viewtopic.php b/phpBB/viewtopic.php
index 69a972ed3e..43bf3a27c6 100644
--- a/phpBB/viewtopic.php
+++ b/phpBB/viewtopic.php
@@ -689,10 +689,12 @@ if (!empty($topic_data['poll_start']))
 		ORDER BY o.poll_option_id";
 	$result = $db->sql_query($sql);
 
-	$poll_info = array();
+	$poll_info = $vote_counts = array();
 	while ($row = $db->sql_fetchrow($result))
 	{
 		$poll_info[] = $row;
+		$option_id = (int) $row['poll_option_id'];
+		$vote_counts[$option_id] = (int) $row['poll_option_total'];
 	}
 	$db->sql_freeresult($result);
 
@@ -774,6 +776,8 @@ if (!empty($topic_data['poll_start']))
 					AND topic_id = ' . (int) $topic_id;
 			$db->sql_query($sql);
 
+			$vote_counts[$option]++;
+
 			if ($user->data['is_registered'])
 			{
 				$sql_ary = array(
@@ -798,6 +802,8 @@ if (!empty($topic_data['poll_start']))
 						AND topic_id = ' . (int) $topic_id;
 				$db->sql_query($sql);
 
+				$vote_counts[$option]--;
+
 				if ($user->data['is_registered'])
 				{
 					$sql = 'DELETE FROM ' . POLL_VOTES_TABLE . '
@@ -821,9 +827,29 @@ if (!empty($topic_data['poll_start']))
 		$db->sql_query($sql);
 
 		$redirect_url = append_sid("{$phpbb_root_path}viewtopic.$phpEx", "f=$forum_id&amp;t=$topic_id" . (($start == 0) ? '' : "&amp;start=$start"));
+		$message = $user->lang['VOTE_SUBMITTED'] . '<br /><br />' . sprintf($user->lang['RETURN_TOPIC'], '<a href="' . $redirect_url . '">', '</a>');
+
+		if ($request->is_ajax())
+		{
+			// Filter out invalid options
+			$valid_user_votes = array_intersect(array_keys($vote_counts), $voted_id);
+
+			$data = array(
+				'MESSAGE_TITLE'		=> $user->lang['INFORMATION'],
+				'MESSAGE_TEXT'		=> $message,
+				'NO_VOTES'			=> $user->lang['NO_VOTES'],
+				'success'			=> true,
+				'user_votes'		=> array_flip($valid_user_votes),
+				'vote_counts'		=> $vote_counts,
+				'total_votes'		=> array_sum($vote_counts),
+				'can_vote'			=> !sizeof($valid_user_votes) || ($auth->acl_get('f_votechg', $forum_id) && $topic_data['poll_vote_change']),
+			);
+			$json_response = new \phpbb\json_response();
+			$json_response->send($data);
+		}
 
 		meta_refresh(5, $redirect_url);
-		trigger_error($user->lang['VOTE_SUBMITTED'] . '<br /><br />' . sprintf($user->lang['RETURN_TOPIC'], '<a href="' . $redirect_url . '">', '</a>'));
+		trigger_error($message);
 	}
 
 	$poll_total = 0;
author	Cesar G <prototech91@gmail.com>	2013-10-06 21:40:21 -0700
committer	Cesar G <prototech91@gmail.com>	2013-10-06 21:48:36 -0700
commit	637a5a5eea6eaa876d1d69386dd688d0f44efa69 (patch)
tree	0a6df93dec3106c024bdde0619c539a5354077a3 /phpBB
parent	2adb8499a904c4d3bcdf47b2a5b65d2b5f34cbdd (diff)
download	forums-637a5a5eea6eaa876d1d69386dd688d0f44efa69.tar forums-637a5a5eea6eaa876d1d69386dd688d0f44efa69.tar.gz forums-637a5a5eea6eaa876d1d69386dd688d0f44efa69.tar.bz2 forums-637a5a5eea6eaa876d1d69386dd688d0f44efa69.tar.xz forums-637a5a5eea6eaa876d1d69386dd688d0f44efa69.zip