This post its a part of a series about creating an app with node.js and express for Facebook... this time for mobile browsers
Desktop version:
*NOTE: jqm = jquery mobile
To start lets add a feature to the list of friends in the details of a nomination, when the user swipe left or right it will appear two buttons vote or delete, for that lets update "mscript.js", after add the user to the list we add (around line 150):
$('.users li').bind('swiperight swipeleft', swipe);
This will look for swipe function when the user swipe in any direction on any list item, lets add the function in the same filefunction swipe(){
// reference the just swiped list item
var $li = $(this);
// remove all buttons first
$('.aDeleteBtn').remove();
$('.aVoteBtn').remove();
// create buttons and div container
var $deleteBtn = $('<a>Delete</a>').attr({
'class': 'aDeleteBtn ui-btn-up-r',
'href': '#'
});
var $voteBtn = $('<a>Vote</a>').attr({
'class': 'aVoteBtn ui-btn-up-bl',
'href': '#'
});
// insert swipe div into list item
$li.prepend($deleteBtn);
$li.prepend($voteBtn);
$deleteBtn.slideToggle();
$voteBtn.slideToggle();
}
Here we take the li as a reference, first erase the buttons if they exist already, then we create 2 buttons which have 2 clases, 1 for reference only and the other one to give them style and the position, for that lets add them to the css.aDeleteBtn, .aVoteBtn {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
float: right;
height: 15px;
line-height: 15px;
margin: 10px 10px 0 0;
padding: 0.6em;
position: absolute;
right: 0;
top: 0;
z-index: 10;
display: none;
}
.aDeleteBtn{
right: 60px;
}
/* red color buttons */
.ui-btn-up-r { border: 1px solid #953403; background: #2567ab; font-weight: bold; color: #fff; cursor: pointer; text-shadow: 0 -1px 1px #953403; text-decoration: none; background-image: -moz-linear-gradient(top, #ec4a0b, #ad390c); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #ec4a0b),color-stop(1, #ad390c)); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#ec4a0b', EndColorStr='#ad390c')"; }
.ui-btn-up-r a.ui-link-inherit { color: #fff; }
.ui-btn-hover-r { border: 1px solid #953403; background: #f15c22; font-weight: bold; color: #fff; text-shadow: 0 -1px 1px #014D68; background-image: -moz-linear-gradient(top, #f15c22, #f15c22); text-decoration: none; background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f15c22),color-stop(1, #f15c22)); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#f15c22', EndColorStr='#f15c22')"; }
.ui-btn-hover-r a.ui-link-inherit { color: #fff; }
.ui-btn-down-r { border: 1px solid #225377; background: #79ae21; font-weight: bold; color: #fff; text-shadow: 0 -1px 1px #225377; background-image: -moz-linear-gradient(top, #bc770f, #e6590c); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #bc770f),color-stop(1, #e6590c)); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#bc770f', EndColorStr='#e6590c')"; }
.ui-btn-down-r a.ui-link-inherit { color: #fff; }
.ui-btn-up-r, .ui-btn-hover-r, .ui-btn-down-r { font-family: Helvetica, Arial, sans-serif; }
/* blue color buttons */
.ui-btn-up-bl { border: 1px solid #036596; background: #2567ab; font-weight: bold; color: #fff; cursor: pointer; text-shadow: 0 -1px 1px #036596; text-decoration: none; background-image: -moz-linear-gradient(top, #2567ab, #036596); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #2567ab),color-stop(1, #036596)); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#2567ab', EndColorStr='#036596')"; }
.ui-btn-up-bl a.ui-link-inherit { color: #fff; }
.ui-btn-hover-bl { border: 1px solid #036596; background: #2567ab; font-weight: bold; color: #fff; text-shadow: 0 -1px 1px #014D68; background-image: -moz-linear-gradient(top, #2567ab, #2567ab); text-decoration: none; background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #2567ab),color-stop(1, #2567ab)); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#2567ab', EndColorStr='#2567ab')"; }
.ui-btn-hover-bl a.ui-link-inherit { color: #fff; }
.ui-btn-down-bl { border: 1px solid #225377; background: #79ae21; font-weight: bold; color: #fff; text-shadow: 0 -1px 1px #225377; background-image: -moz-linear-gradient(top, #2567ab, #2567ab); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #2567ab),color-stop(1, #2567ab)); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#2567ab', EndColorStr='#2567ab')"; }
.ui-btn-down-bl a.ui-link-inherit { color: #fff; }
.ui-btn-up-bl, .ui-btn-hover-bl, .ui-btn-down-bl { font-family: Helvetica, Arial, sans-serif; }
OK we got the buttons, now lets give them some functionality, lets start with delete adding this to "mscript.js"$('.aDeleteBtn').live('click', function(ev){
ev.preventDefault();
$.mobile.showPageLoadingMsg();
var li = $(this).parents('li');
var details = $('#details');
var nid = details.find('#attd').attr('nid');
var user = {
_id : li.attr("id"),
name : li.attr("name"),
votes : li.find(".count").text()
};
$.post("/nominations/eraseuser", { id: nid, user: user },
function(data) {
if (data){
li.remove();
var usersl = details.find('.users');
usersl.listview('refresh');
}else{
showMsg('dashboard.error', 'dashboard.error_erasing_user');
}
$.mobile.hidePageLoadingMsg();
}
).error(function() { $.mobile.hidePageLoadingMsg();
showMsg('dashboard.error', 'dashboard.error_erasing_user'); });
$('.aVoteBtn').slideToggle();
$('.aDeleteBtn').slideToggle();
});
Here we take the li from where we get called and the details div to get the nomination idWe create the user object with the details and we send it to the server to erase that user and we hide the buttons, after calling the server we erase the user from the list if everything went right or show the error if any
Now, lets see the voting function
$('.aVoteBtn').live('click', function(ev){
$.mobile.showPageLoadingMsg();
ev.preventDefault();
var li = $(this).parents('li');
var id = li.attr('id');
var details = $('#details');
var nid = details.find('#attd').attr('nid');
//var name = $('.details').find('legend').text();
$.post("/nominations/vote", { id: nid, userid: id },
function(data) {
if (data){
var votes = li.find('.count');
votes.html(data);
//updat voted list
}else{
showMsg('dashboard.error', 'dashboard.error_voting');
}
$.mobile.hidePageLoadingMsg();
}
).error(function() {
$.mobile.hidePageLoadingMsg();
showMsg('dashboard.error', 'dashboard.error_voting');
});
$('.aVoteBtn').slideToggle();
$('.aDeleteBtn').slideToggle();
});
Same way as before we got the data from the li and details, post to the server the information and hide the buttons, on return from server, lets update the count of the votes or show if any errorNow we are only missing the "invite" functionality, for this one we are going to recycle the add friends screen, first lets update the template "dashboardm.jade", lets add a class to our invite button to look like this:
a.doinvite(href="#", data-icon="plus", class="ui-btn-right") InviteThen lets add to out page with id "#addf" this button to the footer
a.invite(href="#", data-role="button", data-theme="b") InviteAnd then lets initialize the button hidden in our css
.invite{
display: none;
}
Good now the script, lets update "#adduser" onclick to hide the button$('.invite').hide();
Then we add the listener for the invite button$('.doinvite').live('click', function(){
$.mobile.showPageLoadingMsg();
$('.invite').show();
$.mobile.changePage( "#addf",
{
transition: "pop",
reverse: false,
changeHash: false
});
});
We show our invite button and then the add friends panel.To finish lets add our functionality to the invite button
$('.invite').live('click', function(){
$.mobile.showPageLoadingMsg();
var users = [];
var userp;
$('#lof').find(':checked').each(function(){
users.push({
"_id" : $(this).attr('id'),
"name" : $(this).attr('name'),
"votes" : 0
});
});
var ul = users.length;
if (ul > 0 && ul <= 1){
userp = users[0];
}else{
userp = users;
}
$.post("/invite", { users: userp },
function(data) {
if (data){
history.back();
//showMsg('dashboard.warning', 'dashboard.invited');
}else{
showMsg('dashboard.error', 'dashboard.warning_invited');
}
$.mobile.hidePageLoadingMsg();
}
).error(function() {
$.mobile.hidePageLoadingMsg();
showMsg('dashboard.warning', 'dashboard.warning_invited');
});
});
We take the list of friends selected, send it to the server to invite the friends and show a message in any errorDone!! we have enough functionality...
Next we will see erase me, refresh, update our strings, check for any active session and update the routes for mobile to get our beta version complete
If you can help me out with the bugs or the features
Fork the code
https://github.com/nodejs-mexico/nomi-nation
Greetings
No comments:
Post a Comment