From 637a5a5eea6eaa876d1d69386dd688d0f44efa69 Mon Sep 17 00:00:00 2001 From: Cesar G Date: Sun, 6 Oct 2013 21:40:21 -0700 Subject: [ticket/10383] AJAXify poll voting PHPBB3-10383 --- phpBB/styles/prosilver/template/ajax.js | 74 ++++++++++++++++++++++ .../styles/prosilver/template/viewtopic_body.html | 22 +++---- phpBB/viewtopic.php | 30 ++++++++- 3 files changed, 112 insertions(+), 14 deletions(-) (limited to 'phpBB') 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 @@
-
+

{POLL_QUESTION}

-

{L_POLL_LENGTH}
{L_MAX_VOTES}

+

{L_POLL_LENGTH}
{L_MAX_VOTES}

-
title="{L_POLL_VOTED_OPTION}"> +
title="{L_POLL_VOTED_OPTION}" data-poll-option-id="{poll_option.POLL_OPTION_ID}">
{poll_option.POLL_OPTION_CAPTION}
-
checked="checked" /> checked="checked" />
-
{poll_option.POLL_OPTION_RESULT}
-
{L_NO_VOTES}{poll_option.POLL_OPTION_PERCENT}
+
checked="checked" /> checked="checked" />
+
{poll_option.POLL_OPTION_RESULT}
+
{L_NO_VOTES}{poll_option.POLL_OPTION_PERCENT}
- -
+
 
-
{L_TOTAL_VOTES}{L_COLON} {TOTAL_VOTES}
+
{L_TOTAL_VOTES}{L_COLON} {TOTAL_VOTES}
- -
+
 
-
+
 
{L_VIEW_RESULTS}
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&t=$topic_id" . (($start == 0) ? '' : "&start=$start")); + $message = $user->lang['VOTE_SUBMITTED'] . '

' . sprintf($user->lang['RETURN_TOPIC'], '', ''); + + 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'] . '

' . sprintf($user->lang['RETURN_TOPIC'], '', '')); + trigger_error($message); } $poll_total = 0; -- cgit v1.2.1 From 7f312772699c10339a8c50ef7952179da40ef7e7 Mon Sep 17 00:00:00 2001 From: Cesar G Date: Mon, 7 Oct 2013 07:39:50 -0700 Subject: [ticket/10383] Make the content transitions smoother. PHPBB3-10383 --- phpBB/styles/prosilver/template/ajax.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'phpBB') diff --git a/phpBB/styles/prosilver/template/ajax.js b/phpBB/styles/prosilver/template/ajax.js index decbba1d89..39beab4f16 100644 --- a/phpBB/styles/prosilver/template/ajax.js +++ b/phpBB/styles/prosilver/template/ajax.js @@ -171,7 +171,7 @@ phpbb.addAjaxCallback('vote_poll', function(res) { // Remove the View results link if (!results_visible) { - poll.find('.poll_view_results').fadeOut(500); + poll.find('.poll_view_results').hide(500); } if (!res.can_vote) { @@ -180,7 +180,7 @@ phpbb.addAjaxCallback('vote_poll', function(res) { }); } else { // If the user can still vote, simply slide down the results - poll.find('.resultbar, .poll_option_percent, .poll_total_votes').slideDown(500); + poll.find('.resultbar, .poll_option_percent, .poll_total_votes').show(500); } // Update the total votes count @@ -229,8 +229,8 @@ $('.poll_view_results a').click(function(e) { var poll = $(this).parents('.topic_poll'); - poll.find('.resultbar, .poll_option_percent, .poll_total_votes').slideDown(500); - poll.find('.poll_view_results').fadeOut(500); + poll.find('.resultbar, .poll_option_percent, .poll_total_votes').show(500); + poll.find('.poll_view_results').hide(500); }); $('[data-ajax]').each(function() { -- cgit v1.2.1 From 98a1694c7c1022d50c30b7dcd46f9f0fc9f5f7b4 Mon Sep 17 00:00:00 2001 From: Cesar G Date: Mon, 7 Oct 2013 17:55:04 -0700 Subject: [ticket/10383] Update the results without the overlay popup. PHPBB3-10383 --- phpBB/styles/prosilver/template/ajax.js | 33 ++++++++++++++++++++-- .../styles/prosilver/template/viewtopic_body.html | 3 +- phpBB/styles/prosilver/theme/content.css | 6 ++++ phpBB/viewtopic.php | 2 -- 4 files changed, 38 insertions(+), 6 deletions(-) (limited to 'phpBB') diff --git a/phpBB/styles/prosilver/template/ajax.js b/phpBB/styles/prosilver/template/ajax.js index 39beab4f16..28656d47d3 100644 --- a/phpBB/styles/prosilver/template/ajax.js +++ b/phpBB/styles/prosilver/template/ajax.js @@ -166,8 +166,12 @@ phpbb.addAjaxCallback('vote_poll', function(res) { 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()); + // Set min-height to prevent the page from jumping when the content changes + var update_panel_height = function (height) { + var height = (typeof height === 'undefined') ? panel.find('.inner').outerHeight() : height; + panel.css('min-height', height); + }; + update_panel_height(); // Remove the View results link if (!results_visible) { @@ -213,10 +217,33 @@ phpbb.addAjaxCallback('vote_poll', function(res) { poll.find('.polls').delay(400).fadeIn(500); } + // Display "Your vote has been cast." message. Disappears after 5 seconds. + var confirmation_delay = (res.can_vote) ? 300 : 900; + poll.find('.vote-submitted').delay(confirmation_delay).slideDown(200, function() { + if (results_visible) { + update_panel_height(); + } + + $(this).delay(5000).fadeOut(500, function() { + resize_panel(300); + }); + }); + // Remove the gap resulting from removing options setTimeout(function() { - panel.animate({height: panel.find('.inner').height()}, 500); + resize_panel(500); }, 1500); + + var resize_panel = function (time) { + var panel_height = panel.height(); + var inner_height = panel.find('.inner').outerHeight(); + + if (panel_height != inner_height) { + panel.css({'min-height': '', 'height': panel_height}).animate({height: inner_height}, time, function () { + panel.css({'min-height': inner_height, 'height': ''}); + }); + } + }; } }); diff --git a/phpBB/styles/prosilver/template/viewtopic_body.html b/phpBB/styles/prosilver/template/viewtopic_body.html index 61077fd0c4..e678ea8f8c 100644 --- a/phpBB/styles/prosilver/template/viewtopic_body.html +++ b/phpBB/styles/prosilver/template/viewtopic_body.html @@ -60,7 +60,7 @@
- +
@@ -98,6 +98,7 @@
+
diff --git a/phpBB/styles/prosilver/theme/content.css b/phpBB/styles/prosilver/theme/content.css index c56c7f9ef8..60475aea7d 100644 --- a/phpBB/styles/prosilver/theme/content.css +++ b/phpBB/styles/prosilver/theme/content.css @@ -662,6 +662,12 @@ fieldset.polls dd div { border-right: 1px solid transparent; } +.vote-submitted { + font-size: 1.2em; + font-weight: bold; + text-align: center; +} + /* Poster profile block ----------------------------------------*/ .postprofile { diff --git a/phpBB/viewtopic.php b/phpBB/viewtopic.php index 43bf3a27c6..3a7e633c99 100644 --- a/phpBB/viewtopic.php +++ b/phpBB/viewtopic.php @@ -835,8 +835,6 @@ if (!empty($topic_data['poll_start'])) $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), -- cgit v1.2.1