antville/antville
antville/antville
1
1
Fork 0
Code Issues 48 Pull requests 15 Projects Releases 9 Wiki Activity Actions 1

Refactored polls for UIKit support

Browse source
This commit is contained in:
Tobi Schäfer 2014-12-17 23:51:00 +01:00
parent 1119059a6d
commit 7e46e020b9
6 changed files with 165 additions and 153 deletions
Download patch file Download diff file Expand all files Collapse all files

37
code/Choice/$Choice.skin
View file

@ -1,32 +1,27 @@
<% #main %> <% #main %>
<tr> <div class='uk-form-row'>
<td valign="top" width="5%"> <label for='<% choice.id %>'>
<input type="radio" id="<% choice.id %>" name="choice" <input type='radio' id='<% choice.id %>' name='choice' value='<% choice.id %>' <% if <% choice.selected %> is true then 'checked='checked'' %> />
value="<% choice.id %>" <% if <% choice.selected %> is true then <% choice.title %>
'checked="checked"' </label>
%> /> </div>
</td>
<td><label for="<% choice.id %>"><% choice.title %></label></td>
</tr>
<% #edit %> <% #edit %>
<div class="choice" style="margin-top: 5px;"> <div class='choice uk-form-row'>
<span class="small"><% gettext Choice %> #<% param.index %>:</span> <div class='uk-form-label'>#<% param.index %></div>
<div> <div>
<input type="text" name="title" class="formText" <input type='text' name='title' class='uk-width-1-1' value='<% choice.title %>' />
value="<% choice.title %>" />
</div> </div>
</div> </div>
<% #result %> <% #result %>
<p> <div class='uk-text-bold'><% choice.title %></div>
<div style="width: <% choice.votes 300 default="1" %>px;" <div style='width: <% choice.votes 300 default=1 %>px;' class='pollResultsBar'></div>
class="pollResultsBar"></div> <div>
<span class="small"><% choice.votes % | format #.#% %> <% choice.votes % | format #.#% %>
<% ngettext "{0} vote" "{0} votes" <% choice.votes %> <% ngettext '{0} vote' '{0} votes' <% choice.votes %> prefix='(' suffix=')' %>
prefix="(" suffix=")" %></span><br /> </div>
<% choice.title %>
</p> </p>
<% #graph %> <% #graph %>
<div style="width:<% param.width %>px;" class="pollResultsBar">&nbsp;</div> <div style='width: <% param.width %>px;' class='pollResultsBar'> </div>

2
code/Choice/Choice.js
View file

@ -57,7 +57,7 @@ Choice.remove = function() {
*/ */
Choice.prototype.constructor = function(title) { Choice.prototype.constructor = function(title) {
HopObject.confirmConstructor.call(this); HopObject.confirmConstructor.call(this);
this.title = title; this.title = stripTags(title || String.EMPTY);
return this; return this;
} }

199
code/Poll/$Poll.skin
View file

@ -1,122 +1,139 @@
<% #header %> <% #header %>
<div class="storyTitle"><% poll.question %></div> <h1><% poll.question | stripTags %></h1>
<div class="small"><% gettext "{0} on {1}" <% poll.creator %> <% poll.created %> %></div> <div class='uk-article-meta'>
<% gettext "Last modified {0} by {1}" <% poll.created text %> <% poll.creator %> %>
</div>
<% #footer %> <% #footer %>
<p class="small"> <div class='uk-margin-top'>
<% poll.link edit <% gettext Edit %> prefix="... " %> <% poll.link edit <% gettext Edit %> class='uk-button uk-button-primary' style='color: #fff;' %>
<% poll.link rotate prefix="... " %> <% poll.link status <% if <% poll.status %> is open then <% gettext Stop %> else <% gettext Run %> %> class='uk-button' %>
<% poll.link delete <% gettext Delete %> prefix="... " %> <% poll.link delete <% gettext Delete %> class='uk-button' %>
</p> </div>
<% #main %> <% #main %>
<% if <% param.header %> is true then <% poll.skin #header suffix="<br />" %> else <% if <% param.header %> is true then
<% poll.question prefix='<div class="pollTitle">' suffix="</div> %> %> <% poll.skin #header %>
<form method="post" action="<% poll.href %>"> else
<table border="0" cellspacing="2" cellpadding="2"> <% poll.question prefix='<div class="pollTitle">' suffix="</div>" %>
<% poll.loop skin="$Choice#main" %> %>
<tr> <form class='uk-margin-top uk-panel uk-panel-box uk-form uk-form-stacked' method="post" action="<% poll.href %>">
<td colspan="2"> <% poll.loop skin="$Choice#main" %>
<br /> <div class='uk-margin-top'>
<button type="submit" name="vote" value="1"><% gettext Vote %></button> <button class='uk-button uk-button-primary' type="submit" id="submit" name="submit" value="1">
<% poll.link result <% gettext "Results" %> %> <% gettext Vote %>
</td> </button>
</tr> <% poll.link result <% gettext "Results" %> class='uk-button uk-button-link' %>
</table> </div>
</form> </form>
<% poll.skin #footer %> <% poll.skin #footer %>
<% #results %> <% #results %>
<% if <% param.header %> is true then <% poll.skin #header %> else <% if <% param.header %> is true then
<% poll.question prefix=<strong> suffix="</strong> %> %> <% poll.skin #header %>
<% poll.loop skin="$Choice#result" %> else
<div class="small"> <% poll.question prefix=<strong> suffix=</strong> %>
<% gettext Total suffix=: %> %>
<% ngettext "{0} vote" "{0} votes" <% poll.votes %> %> <div class='uk-margin-top uk-panel uk-panel-box'>
<% if <% poll.status %> is open then "" else <% poll.loop skin="$Choice#result" %>
<% if <% poll.closed %> is null then "" else <div style='float: left;'>
<% gettext "This poll was closed by {0} on {1}" <strong><% gettext Total suffix=: %></strong>
<% poll.modifier %> <% poll.closed short %> prefix="<br />" %> <% ngettext "{0} vote" "{0} votes" <% poll.votes %> %>
</div>
<div class='uk-text-right'>
<% if <% poll.status %> is open then
<% poll.link main <% gettext 'Add Your Vote' %> class='uk-button uk-button-primary uk-button-mini' style='color: #fff;' %>
else
<% gettext "This poll was closed {0} by {1}" <% poll.closed text %> <% poll.modifier %> %>
%> %>
</div>
<% if <% poll.status %> is open then
%> %>
</div> </div>
<% if <% poll.status %> is open then
<% poll.link main <% gettext "Add Your Vote %> prefix=<p> suffix=</p> %>
%>
<% poll.skin #footer %> <% poll.skin #footer %>
<% #listItem %> <% #listItem %>
<a name="<% poll.id %>" id="<% poll.id %>"></a> <a name="<% poll.id %>" id="<% poll.id %>"></a>
<div class="listSeparator"> </div>
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr> <tr>
<% if <% poll.status %> is closed then <td><% poll.votes %></td>
<% listItemFlag <% gettext closed %> %> <td style='max-width: 200px; overflow: hidden;'>
%> <% poll.question | stripTags | poll.link %>
<td colspan="3" class="small"> </td>
<strong><% gettext Macro suffix=: %></strong> <% poll.macro %> <td><% poll.creator %></td>
<div class="ample"><strong><% gettext Status suffix=: %></strong> <td><% poll.created text %></td>
<% ngettext "{0} vote" "{0} votes" <% poll.votes %> %> <td><% poll.status %></td>
</td> <td>
<% poll.link status <% if <% poll.status %> is open then "<i class='uk-icon-pause'></i>" else "<i class='uk-icon-play'></i>" %> %>
</td>
<td style='white-space: nowrap;' class='uk-text-right'>
<% poll.link edit "<i class='uk-icon-pencil'></i>" %>
<% poll.link delete "<i class='uk-icon-trash-o'></i>" %>
<a href='' class='av-clipboard-copy' data-text='<% gettext 'Please use the copy command.' %>' data-value="<% poll.macro %>"><i class='uk-icon-clipboard'></i></a><span title='' data-uk-tooltip="{pos: 'left'}">
</td>
</tr> </tr>
<tr valign="top">
<td>
<div class="storytitle"><% poll.question %></div>
<div class="storyDate"><% poll.creator link %>,
<% poll.created short %></div>
</td>
<td width="10" nowrap="nowrap"> </td>
<td align="right" class="small">
<% poll.link main <% gettext Vote %> prefix='<div class="nowrap">... ' suffix="</div>" %>
<% poll.link results <% gettext Results %> prefix='<div class="nowrap">... ' suffix="</div>" %>
<% poll.link edit <% gettext Edit %> prefix='<div class="nowrap">... ' suffix="</div>" %>
<% poll.link rotate prefix='<div class="nowrap">... ' suffix="</div>" %>
<% poll.link delete <% gettext Delete %> prefix='<div class="nowrap">... ' suffix="</div>" %>
</td>
</tr>
</table>
<% #edit %> <% #edit %>
<h1>
<% response.title %>
<% poll.link . ' ' class='uk-icon-button uk-icon-link uk-text-middle' %>
</h1>
<form class='uk-form uk-form-stacked' method="post" action="<% response.action %>">
<div class='uk-form-row'>
<div class='uk-form-label'><% gettext Question %></div>
<div class='uk-form-controls'>
<% poll.input question rows=3 class=uk-width-1-1 %>
</div>
</div>
<legend class='uk-margin-top'><% gettext Choices %></legend>
<% poll.input choices %>
<div class="uk-text-small uk-form-row">
<a href='' id="add">
<i class='uk-icon-plus'></i>
<% gettext "Add Choice" %>
</a>
</div>
<fieldset class='uk-margin-top'>
<legend><% gettext Information %></legend>
<div class='uk-form-row uk-grid'>
<div class='uk-width-1-2'>
<div>
<% if <% poll.creator %> is null then '' else
<% gettext 'Created {0} by {1}' <% poll.created text %> <% poll.creator %> %>
%>
</div>
<div>
<% if <% poll.created %> is <% poll.modified %> then '' else
<% gettext 'Last modified {0} by {1}' <% poll.modified text %> <% poll.modifier %> %>
%>
</div>
</div>
<div class='uk-width-1-2 uk-text-right'>
<% poll.macro | link 'javascript:' data-value=<% poll.macro %> data-text=<% gettext "Use keyboard shortcut to copy." %> class='av-clipboard-copy uk-button' %>
</div>
</div>
</fieldset>
<div class='uk-margin-top'>
<button class='uk-button uk-button-primary' type="submit" name="save" value="<% poll.status default=closed %>">
<% gettext Save %>
</button>
<% if <% poll.status %> is open then '' else
<% gettext "Save and Run" prefix="<button class='uk-button uk-button-success' type='submit' name='save' value='open'>" suffix=</button> %>
%>
<% poll.link delete <% gettext Delete %> class='uk-button' %>
<a href='' class='cancel uk-button uk-button-link'><% gettext Cancel %></a>
</div>
</form>
<script type="text/javascript"> <script type="text/javascript">
$(function() { $(function() {
var index = $(".choice").length + 1; var index = $(".choice").length + 1;
$("#add").click(function(event) { $("#add").on('click', function (event) {
event.preventDefault(); event.preventDefault();
var choice = $(".choice:last").clone(); var choice = $(".choice:last").clone();
choice.find(".small").text('<% gettext Choice %> #' + index + ':'); choice.find(".uk-form-label").text('#' + index);
choice.find("input").attr("value", ""); choice.find("input").attr("value", '');
$(".choice:last").after(choice); $(".choice:last").after(choice);
$(".choice:last").find("input").focus(); $(".choice:last").find("input").focus();
index += 1; index += 1;
}); });
}); });
</script> </script>
<p class="storyTitle"><% response.title %></p>
<form method="post" action="<% response.action %>">
<div class="small"><% gettext Question suffix=: %></div>
<div><% poll.input question cols="30" rows="3" class="formTitle" %></div>
<% poll.input choices %>
<div class="small">
<a href="" id="add"><% gettext "Add Choice" %></a>
</div>
<p class="small">
<% if <% poll.created %> then <% gettext "Created by {0} on {1}"
<% poll.creator %> <% poll.created short %> %> %>
<% if <% poll.created %> is <% poll.modified %> then "" else
<% gettext "Last modified by {0} on {1}" <% poll.modifier link %>
<% poll.modified short %> prefix="<br />" %>
%>
</p>
<br />
<div>
<button type="submit" name="save" value="<% poll.status default=closed %>">
<% gettext Save %>
</button>
<% if <% poll.status %> is open then "" else
<% gettext "Save and Run" prefix='<button type="submit"
name="save" value="open"><strong>' suffix=</strong></button> %>
%>
<a href="" class="cancel"><% gettext Cancel %></a>
</div>
</form>

36
code/Poll/Poll.js
View file

@ -93,8 +93,8 @@ Poll.prototype.getPermission = function(action) {
case 'edit': case 'edit':
return Membership.require(Membership.OWNER) || return Membership.require(Membership.OWNER) ||
User.require(User.PRIVILEGED); User.require(User.PRIVILEGED);
case 'rotate':
case 'delete': case 'delete':
case 'status':
return this.creator === session.user || return this.creator === session.user ||
Membership.require(Membership.MANAGER) || Membership.require(Membership.MANAGER) ||
User.require(User.PRIVILEGED); User.require(User.PRIVILEGED);
@ -120,7 +120,7 @@ Poll.prototype.main_action = function() {
res.redirect(this.href('result')); res.redirect(this.href('result'));
return; return;
} }
if (req.postParams.vote) { if (req.postParams.submit) {
try { try {
this.vote(req.postParams); this.vote(req.postParams);
res.message = gettext('Thanks, your vote was registered. You can change your mind until the poll is closed.'); res.message = gettext('Thanks, your vote was registered. You can change your mind until the poll is closed.');
@ -161,19 +161,27 @@ Poll.prototype.edit_action = function() {
try { try {
this.update(req.postParams); this.update(req.postParams);
res.message = gettext('The poll was updated successfully.'); res.message = gettext('The poll was updated successfully.');
res.redirect(this.href()); res.redirect(this.href('edit'));
} catch (ex) { } catch (ex) {
res.message = ex; res.message = ex;
app.log(ex); app.log(ex);
} }
} }
res.data.action = this.href(req.action); res.data.action = this.href(req.action);
res.data.title = gettext('Edit Poll: {0}', this.question); res.data.title = gettext('Edit Poll');
res.data.body = this.renderSkinAsString('$Poll#edit'); res.data.body = this.renderSkinAsString('$Poll#edit');
this.site.renderSkin('Site#page'); this.site.renderSkin('Site#page');
return; return;
} }
Poll.prototype.status_action = function () {
this.status = (this.status === Poll.OPEN ? Poll.CLOSED : Poll.OPEN);
if (this.status === Poll.CLOSED) {
this.closed = new Date();
}
res.redirect(req.data.http_referer);
}
/** /**
* *
* @param {Object} data * @param {Object} data
@ -210,7 +218,7 @@ Poll.prototype.update = function(data) {
this.closed = new Date; this.closed = new Date;
} }
this.status = data.save; this.status = data.save;
this.question = data.question; this.question = stripTags(data.question);
this.touch(); this.touch();
return; return;
} }
@ -222,17 +230,6 @@ Poll.prototype.result_action = function() {
return; return;
} }
Poll.prototype.rotate_action = function() {
if (this.status === Poll.CLOSED) {
this.status = Poll.OPEN;
} else if (this.status === Poll.OPEN) {
this.status = Poll.CLOSED;
this.closed = new Date;
}
this.touch();
return res.redirect(this.href());
}
/** /**
* @returns {String} * @returns {String}
*/ */
@ -256,13 +253,6 @@ Poll.prototype.link_macro = function(param, action, text) {
return; return;
} }
break; break;
case 'rotate':
if (this.status === Poll.OPEN) {
text = gettext('Stop');
} else {
text = this.closed ? gettext('Re-run') : gettext('Run');
}
break;
} }
return HopObject.prototype.link_macro.call(this, param, action, text); return HopObject.prototype.link_macro.call(this, param, action, text);
} }

26
code/Polls/$Polls.skin
View file

@ -1,12 +1,26 @@
<% #main %> <% #main %>
<p class="storyTitle"><% response.title %></p> <h1>
<div class="ample"> <% response.title %>
<% polls.link create <% gettext "Add Poll" %> prefix="... " %> <% polls.link create ' ' class='uk-icon-button uk-icon-plus uk-text-middle' %>
</div> </h1>
...
<% polls.link main <% gettext "By {0}" <% membership.name %> %> %> <% polls.link main <% gettext "By {0}" <% membership.name %> %> %>
<% polls.link running <% gettext Running %> prefix=" | " %> <% polls.link running <% gettext Running %> prefix=" | " %>
<% polls.link all <% gettext All %> prefix=" | " %> <% polls.link all <% gettext All %> prefix=" | " %>
<% response.pager %> <% response.pager %>
<% response.list %> <table class='uk-table uk-table-striped uk-table-hover uk-table-condensed'>
<thead>
<tr>
<td><% image /ant-icon.png %></td>
<td><% gettext Question %></td>
<td><% gettext Author %></td>
<td><% gettext Modified %></td>
<td><% gettext Status %></td>
<td></td>
<td></td>
</tr>
</thead>
<tbody>
<% response.list %>
</tbody>
</table>
<% response.pager %> <% response.pager %>

18
code/Polls/Polls.js
View file

@ -56,10 +56,9 @@ Polls.prototype.getPermission = function(action) {
Polls.prototype.main_action = function() { Polls.prototype.main_action = function() {
var polls = User.getMembership().polls; var polls = User.getMembership().polls;
res.data.list = renderList(polls, '$Poll#listItem', 10, req.queryParams.page); res.data.list = renderList(polls, '$Poll#listItem', 25, req.queryParams.page);
res.data.pager = renderPager(polls, this.href(req.action), res.data.pager = renderPager(polls, this.href(req.action), 25, req.queryParams.page);
10, req.queryParams.page); res.data.title = gettext('Polls by {0}', session.user.name);
res.data.title = gettext('Member Polls');
res.data.body = this.renderSkinAsString('$Polls#main'); res.data.body = this.renderSkinAsString('$Polls#main');
this._parent.renderSkin('Site#page'); this._parent.renderSkin('Site#page');
return; return;
@ -87,10 +86,8 @@ Polls.prototype.create_action = function() {
} }
Polls.prototype.running_action = function() { Polls.prototype.running_action = function() {
res.data.list = renderList(this.running, res.data.list = renderList(this.running, '$Poll#listItem', 25, req.queryParams.page);
'$Poll#listItem', 10, req.queryParams.page); res.data.pager = renderPager(this.running, this.href(req.action), 25, req.queryParams.page);
res.data.pager = renderPager(this.running,
this.href(req.action), 10, req.queryParams.page);
res.data.title = gettext('Running Polls'); res.data.title = gettext('Running Polls');
res.data.body = this.renderSkinAsString('$Polls#main'); res.data.body = this.renderSkinAsString('$Polls#main');
this._parent.renderSkin('Site#page'); this._parent.renderSkin('Site#page');
@ -98,9 +95,8 @@ Polls.prototype.running_action = function() {
} }
Polls.prototype.all_action = function() { Polls.prototype.all_action = function() {
res.data.list = renderList(this, '$Poll#listItem', 10, req.queryParams.page); res.data.list = renderList(this, '$Poll#listItem', 25, req.queryParams.page);
res.data.pager = renderPager(this, res.data.pager = renderPager(this, this.href(), 25, req.queryParams.page);
this.href(), 10, req.queryParams.page);
res.data.title = gettext('All Polls'); res.data.title = gettext('All Polls');
res.data.body = this.renderSkinAsString('$Polls#main'); res.data.body = this.renderSkinAsString('$Polls#main');
this._parent.renderSkin('Site#page'); this._parent.renderSkin('Site#page');