jQuery.telligent.evolution.ui.components.poll
UI Component which handles presentation of poll behavior for content. Transforms the output from $core_v2_ui.Poll()
, which is a <span class="ui-poll"></span>
stub. Overrides can be provided at the theme level to present polls differently.
Options
Data made available to instances of the component:
- 'pollid': (string) Poll Id Guid
- 'reportUrl': (string) Url to view vote report
Example
A barebones UI component override which would result in rendering a read-only message of 'Poll Id = ' for a given call to $core_v2_ui.Poll()
.
$.telligent.evolution.ui.components.poll = {
setup: function() {
},
add: function(elm, options) {
$(elm).html('PollId = ' + options.PollId);
}
}
Default Implementation
For reference purposes or as the basis for an override:
define('component.poll', ['module.ui'], function (ui, $, global, undef) {
var voteButton = 'Vote',
expiredText = 'Voting Ends: {0}',
viewResults = 'View Results',
alreadyExpiredText = 'Voting Ended: {0}',
voteMessage = 'Your vote was received, check back when the poll expires to view the result.',
voteCountText = 'Total Votes : {0}',
votedOnText = 'You voted for \'{0}\'.',
userVoteReportText = 'User Vote Report',
renderUi = function (elm, poll, config) {
var expiredDateTime = $.telligent.evolution.parseDate(poll.ExpiredDate);
if (poll.ExpiredDate == null || (new Date()) < expiredDateTime) {
var votingPageUI = renderPoll(elm, poll, config);
elm.append(votingPageUI);
}
else {
$.telligent.evolution.get({
url: $.telligent.evolution.site.getBaseUrl() + 'api.ashx/v2/poll/' + poll.Id + '/summary.json',
success: function (data) {
var resultPageUI = renderResults(elm, poll, data.VoteSummary, config);
elm.html(resultPageUI);
}
});
}
},
renderResults = function (elm, poll, voteSummary, config) {
var ui = $('<div></div>').addClass('polling-results');
var totalVotes = 0;
var pollArea = $('<div></div>').addClass('CommonPollArea');
var content = $('<div class="CommonPollContent"></div>');
var pollResultsArea = $('<div class="PollResultsArea"></div>');
var pollOptionsArea = $('<ul class="CommonPollAnswerList"><ul>');
pollArea.append($('<h4></h4>').addClass("CommonPollQuestion").html(poll.Question));
if (poll.Description)
content.append($("<div></div>").addClass("CommonPollDescription").html(poll.Description));
$.each(voteSummary.VoteCount, function (index, option) {
totalVotes = totalVotes + voteSummary.VoteCount[index];
});
$.each(poll.Options, function (index, option) {
if (voteSummary.VoteCount[index] == 0) {
pollOptionsArea.append($('<li><div class="CommonPollAnswer">' + option.Option + ' (0%)</div><div class="CommonPollResultGraph"><img src="/cfs-file/__key/system/images/poll_a_start.gif" class="poll-graph-start" height="19"><img src="/cfs-file/__key/system/images/poll_none_mid.gif" class="poll-graph-none" height="19" width="257"><img src="/cfs-file/__key/system/images/poll_none_end.gif" class="poll-graph-none-end" height="19"></div><li>'));
}
else {
var percent = Math.round(voteSummary.VoteCount[index] * (100 / totalVotes));
var used = Math.round((250 / 100) * percent);
var empty = 250 - used;
pollOptionsArea.append($('<li><div class="CommonPollAnswer">' + option.Option + ' (' + percent + '%)</div><div class="CommonPollResultGraph"><img src="/cfs-file/__key/system/images/poll_a_start.gif" class="poll-graph-start" height="19"><img src="/cfs-file/__key/system/images/poll_a_mid.gif" class="poll-graph" height="19" width="' + used + '"><img src="/cfs-file/__key/system/images/poll_a_end.gif" class="poll-graph-end" height="19"><img src="/cfs-file/__key/system/images/poll_none_mid.gif" class="poll-graph-none" height="19" width="' + empty + '"><img src="/cfs-file/__key/system/images/poll_none_end.gif" class="poll-graph-none-end" height="19"></div></li>'));
}
});
pollResultsArea.append(pollOptionsArea);
$.telligent.evolution.get({
url: $.telligent.evolution.site.getBaseUrl() + 'api.ashx/v2/poll/' + poll.Id + '/vote.json',
success: function (data) {
if (data.Errors == null) {
if (data.OptionId) {
var optionValue = null;
$.each(poll.Options, function (index, option) {
if (option.OptionId == data.OptionId) {
optionValue = option.Option;
}
});
if (optionValue)
pollResultsArea.append($('<div></div>').attr('id', 'votedOn').html(votedOnText.replace('{0}', optionValue)));
}
}
else {
alert(data.Errors);
}
}
});
content.append(pollResultsArea);
var pollFooter = $('<div class="CommonPollFooter"></div>');
var pollFooterList = $('<ul class="CommonPollFooterList"></ul>');
pollFooterList.append($('<li></li>').addClass('voteCount').html(voteCountText.replace('{0}', totalVotes)));
pollFooter.append(pollFooterList);
pollArea.append(content);
pollArea.append(pollFooter);
ui.append(pollArea);
if (poll.ExpiredDate != null) {
var expiredDateTime = $.telligent.evolution.parseDate(poll.ExpiredDate);
var expireText = new Date() > expiredDateTime ? alreadyExpiredText : expiredText;
var expiredDateTag = $('<li></li>').addClass('expiresDate');
pollFooterList.append(expiredDateTag);
$.telligent.evolution.language.formatDate(expiredDateTime, function (date) {
expiredDateTag.html(expireText.replace('{0}', date));
});
}
if (config.reporturl) {
var reportLink = $('<li></li>')
.html($('<a></a>').attr('href', config.reporturl).html(userVoteReportText));
pollFooterList.append(reportLink);
}
return ui;
},
renderPoll = function (elm, poll, config) {
var pollId = poll.Id;
var ui = $('<div></div>').addClass('pollWrapper').css('visibility', 'none');
var anonymousUser = $.telligent.evolution.user.accessing.isSystemAccount;
var pollArea = $('<div></div>').addClass('CommonPollArea');
var content = $('<div class="CommonPollContent"></div>');
var pollVoteArea = $('<div class="PollVoteArea"></div>');
var pollOptionsArea = $('<ul class="CommonPollAnswerList"><ul>');
pollArea.append($('<h4></h4>').addClass("CommonPollQuestion").html(poll.Question));
if (poll.Description)
content.append($("<div></div>").addClass("CommonPollDescription").html(poll.Description));
$.each(poll.Options, function (index, option) {
var t1 = $('<div></div>').addClass('content-scrollable-wrapper').attr('style', "max-width: 100%;overflow: auto;max-height: none");
var t2 = $('<table></table>').attr('border', '0').attr('cellpadding', '0').attr('cellspacing', '0');
var t3 = $('<tbody></tbody>');
var t4 = $('<tr></tr>');
var radioButton = $('<td></td>').html($('<input type="radio" />').val(option.OptionId).attr('name', poll.Id).addClass("options-" + poll.Id).attr('id', poll.Id + '-' + option.OptionId));
var pollOptions = $('<td></td>').addClass('CommonPollAnswer').html(option.Option);
pollOptionsArea.append($('<li></li>').after().html(t1.append(t2.append(t3.append(t4)))));
if (anonymousUser == false) {
t4.append(radioButton);
t4.append(pollOptions);
}
else {
t4.append(pollOptions);
}
});
pollVoteArea.append(pollOptionsArea);
content.append(pollVoteArea);
var pollFooter = $('<div class="CommonPollFooter"></div>');
var pollFooterList = $('<ul class="CommonPollFooterList"></ul>');
if (anonymousUser == false) {
pollVoteArea.append($('<input type="button"></input>').addClass('internal-link voteButton').val(voteButton));
}
$.telligent.evolution.get({
url: $.telligent.evolution.site.getBaseUrl() + 'api.ashx/v2/poll/' + poll.Id + '/vote.json',
success: function (data) {
if (data.Errors == null) {
$('#' + poll.Id + '-' + data.OptionId).attr('checked', 'checked');
}
else {
alert(data.Errors);
}
if (poll.ShowResultsBeforeVote || (poll.ShowResultsBeforeExpiration && data.OptionId)) {
pollFooterList.append($('<li></li>').after().html('<a href="javascript:void(0)" class="internal-link viewResults">' + viewResults + '</a>'));
addResultsHandler(elm, poll, config);
var viewCountLi = $('<li></li>').addClass('voteCount');
pollFooterList.append(viewCountLi);
$.telligent.evolution.get({
url: $.telligent.evolution.site.getBaseUrl() + 'api.ashx/v2/poll/' + poll.Id + '/summary.json',
success: function (data) {
if (data.Errors == null) {
var totalVotes = 0;
$.each(data.VoteSummary.VoteCount, function (index, option) {
totalVotes = totalVotes + data.VoteSummary.VoteCount[index];
});
viewCountLi.html(voteCountText.replace('{0}', totalVotes));
} else {
alert(data.Errors);
}
}
});
}
if (poll.ExpiredDate != null) {
var expiredDateTime = $.telligent.evolution.parseDate(poll.ExpiredDate);
var expiresDateLi = $('<li></li>').addClass('expiresDate');
pollFooterList.append(expiresDateLi);
$.telligent.evolution.language.formatDate(expiredDateTime, function (date) {
expiresDateLi.html(expiredText.replace('{0}', date));
});
}
if (config.reporturl) {
var reportLink = $('<li></li>')
.html($('<a></a>').attr('href', config.reporturl).html(userVoteReportText));
pollFooterList.append(reportLink);
}
}
});
pollFooter.append(pollFooterList);
pollArea.append(content);
pollArea.append(pollFooter);
ui.append(pollArea);
return ui;
},
addResultsHandler = function (elm, poll, config) {
$('.viewResults', elm).on('click', function () {
$.telligent.evolution.get({
url: $.telligent.evolution.site.getBaseUrl() + 'api.ashx/v2/poll/' + poll.Id + '/summary.json',
success: function (data) {
if (data.Errors == null) {
var summary = renderResults(elm, poll, data.VoteSummary, config);
elm.html(summary);
} else {
alert(data.Errors);
}
}
});
});
},
addVoteHandler = function (elm, poll, config) {
$('.voteButton', elm).on('click', function () {
var selected = $('.options-' + poll.Id + ':checked');
var selectedVal = selected.val();
$.telligent.evolution.post({
url: $.telligent.evolution.site.getBaseUrl() + 'api.ashx/v2/' + 'poll/' + poll.Id + '/vote.json',
data: { OptionId: selectedVal },
success: function (data) {
$.telligent.evolution.get({
url: $.telligent.evolution.site.getBaseUrl() + 'api.ashx/v2/poll/' + poll.Id + '/summary.json',
success: function (data) {
if (data.Errors == null) {
var summary = renderResults(elm, poll, data.VoteSummary, config);
elm.html(summary);
} else {
alert(data.Errors);
}
},
error: function (data) {
$.telligent.evolution.notifications.show(voteMessage,
{
type: 'success',
duration: 5000
});
}
});
}
});
});
},
setResources = function (options) {
if (!options)
return;
if (options.voteButton != null) voteButton = options.voteButton;
if (options.expiredText != null) expiredText = options.expiredText;
if (options.viewResults != null) viewResults = options.viewResults;
if (options.alreadyExpiredText != null) alreadyExpiredText = options.alreadyExpiredText;
if (options.voteMessage != null) voteMessage = options.voteMessage;
if (options.voteCountText != null) voteCountText = options.voteCountText;
if (options.votedOnText != null) votedOnText = options.votedOnText;
};
$.telligent.evolution.ui.components.poll = {
setup: function () {
},
add: function (elm, options) {
setResources(options.resources);
var pollId = options.pollid;
var config = {
reporturl: options.reporturl
};
$.telligent.evolution.get({
url: $.telligent.evolution.site.getBaseUrl() + 'api.ashx/v2/poll/' + pollId + '.json',
success: function (data) {
if (data.Errors == null) {
renderUi(elm, data.Poll, config);
addVoteHandler(elm, data.Poll, config);
}
else {
alert(data.Errors);
}
}
});
}
};
return {};
}, jQuery, window);