mrflos/memo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

change spacing

Browse source
This commit is contained in:
ali asaria 2014-09-13 02:04:27 -04:00
parent 29bca82aa9
commit 557703e0d8
1 changed files with 541 additions and 581 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

218
client/script.js
View file

@ -9,8 +9,7 @@ var socket = io.connect();
//an action has happened, send it to the //an action has happened, send it to the
//server //server
function sendAction(a, d) function sendAction(a, d) {
{
//console.log('--> ' + a); //console.log('--> ' + a);
var message = { var message = {
@ -40,13 +39,11 @@ socket.on('message', function(data){
getMessage(data); getMessage(data);
}); });
function unblockUI() function unblockUI() {
{
$.unblockUI(); $.unblockUI();
} }
function blockUI(message) function blockUI(message) {
{
message = message || 'Waiting...'; message = message || 'Waiting...';
$.blockUI({ $.blockUI({
@ -66,16 +63,14 @@ function blockUI(message)
} }
//respond to an action event //respond to an action event
function getMessage( m ) function getMessage(m) {
{
var message = m; //JSON.parse(m); var message = m; //JSON.parse(m);
var action = message.action; var action = message.action;
var data = message.data; var data = message.data;
//console.log('<-- ' + action); //console.log('<-- ' + action);
switch (action) switch (action) {
{
case 'roomAccept': case 'roomAccept':
//okay we're accepted, then request initialization //okay we're accepted, then request initialization
//(this is a bit of unnessary back and forth but that's okay for now) //(this is a bit of unnessary back and forth but that's okay for now)
@ -96,12 +91,15 @@ function getMessage( m )
case 'createCard': case 'createCard':
//console.log(data); //console.log(data);
drawNewCard(data.id, data.text, data.x, data.y, data.rot, data.colour, null); drawNewCard(data.id, data.text, data.x, data.y, data.rot, data.colour,
null);
break; break;
case 'deleteCard': case 'deleteCard':
$("#" + data.id).fadeOut(500, $("#" + data.id).fadeOut(500,
function() {$(this).remove();} function() {
$(this).remove();
}
); );
break; break;
@ -158,16 +156,18 @@ $(document).bind('keyup', function(event) {
keyTrap = event.which; keyTrap = event.which;
}); });
function drawNewCard(id, text, x, y, rot, colour, sticker, animationspeed) function drawNewCard(id, text, x, y, rot, colour, sticker, animationspeed) {
{
//cards[id] = {id: id, text: text, x: x, y: y, rot: rot, colour: colour}; //cards[id] = {id: id, text: text, x: x, y: y, rot: rot, colour: colour};
var h = '<div id="' + id + '" class="card ' + colour + var h = '<div id="' + id + '" class="card ' + colour +
' draggable" style="-webkit-transform:rotate(' + rot + 'deg);\ ' draggable" style="-webkit-transform:rotate(' + rot +
'deg);\
">\ ">\
<img src="/images/icons/token/Xion.png" class="card-icon delete-card-icon" />\ <img src="/images/icons/token/Xion.png" class="card-icon delete-card-icon" />\
<img class="card-image" src="/images/' + colour + '-card.png">\ <img class="card-image" src="/images/' +
<div id="content:' + id + '" class="content stickertarget droppable">' + colour + '-card.png">\
<div id="content:' + id +
'" class="content stickertarget droppable">' +
text + '</div><span class="filler"></span>\ text + '</div><span class="filler"></span>\
</div>'; </div>';
@ -185,8 +185,7 @@ function drawNewCard(id, text, x, y, rot, colour, sticker, animationspeed)
// $(this).focus(); // $(this).focus();
// } ); // } );
card.draggable( card.draggable({
{
snap: false, snap: false,
snapTolerance: 5, snapTolerance: 5,
containment: [0, 0, 2000, 2000], containment: [0, 0, 2000, 2000],
@ -200,8 +199,7 @@ function drawNewCard(id, text, x, y, rot, colour, sticker, animationspeed)
return false; return false;
} }
} }
} });
);
//After a drag: //After a drag:
card.bind("dragstop", function(event, ui) { card.bind("dragstop", function(event, ui) {
@ -219,8 +217,7 @@ function drawNewCard(id, text, x, y, rot, colour, sticker, animationspeed)
sendAction('moveCard', data); sendAction('moveCard', data);
}); });
card.children(".droppable").droppable( card.children(".droppable").droppable({
{
accept: '.sticker', accept: '.sticker',
drop: function(event, ui) { drop: function(event, ui) {
var stickerId = ui.draggable.attr("id"); var stickerId = ui.draggable.attr("id");
@ -228,7 +225,10 @@ function drawNewCard(id, text, x, y, rot, colour, sticker, animationspeed)
addSticker(cardId, stickerId); addSticker(cardId, stickerId);
var data = { cardId: cardId, stickerId: stickerId }; var data = {
cardId: cardId,
stickerId: stickerId
};
sendAction('addSticker', data); sendAction('addSticker', data);
//remove hover state to everything on the board to prevent //remove hover state to everything on the board to prevent
@ -236,8 +236,7 @@ function drawNewCard(id, text, x, y, rot, colour, sticker, animationspeed)
$('.card-hover-draggable').removeClass('card-hover-draggable'); $('.card-hover-draggable').removeClass('card-hover-draggable');
}, },
hoverClass: 'card-hover-draggable' hoverClass: 'card-hover-draggable'
} });
);
var speed = Math.floor(Math.random() * 1000); var speed = Math.floor(Math.random() * 1000);
if (typeof(animationspeed) != 'undefined') speed = animationspeed; if (typeof(animationspeed) != 'undefined') speed = animationspeed;
@ -276,7 +275,9 @@ function drawNewCard(id, text, x, y, rot, colour, sticker, animationspeed)
function() { function() {
$("#" + id).remove(); $("#" + id).remove();
//notify server of delete //notify server of delete
sendAction( 'deleteCard' , { 'id': id }); sendAction('deleteCard', {
'id': id
});
} }
); );
@ -299,9 +300,11 @@ function drawNewCard(id, text, x, y, rot, colour, sticker, animationspeed)
} }
function onCardChange( id, text ) function onCardChange(id, text) {
{ sendAction('editCard', {
sendAction('editCard', { id: id, value: text }); id: id,
value: text
});
} }
function moveCard(card, position) { function moveCard(card, position) {
@ -311,29 +314,25 @@ function moveCard(card, position) {
}, 500); }, 500);
} }
function addSticker ( cardId , stickerId ) function addSticker(cardId, stickerId) {
{
stickerContainer = $('#' + cardId + ' .filler'); stickerContainer = $('#' + cardId + ' .filler');
if (stickerId === "nosticker") if (stickerId === "nosticker") {
{
stickerContainer.html(""); stickerContainer.html("");
return; return;
} }
if ( Array.isArray( stickerId ) ) if (Array.isArray(stickerId)) {
{ for (var i in stickerId) {
for (var i in stickerId) stickerContainer.prepend('<img src="images/stickers/' + stickerId[i] +
{ '.png">');
stickerContainer.prepend('<img src="images/stickers/' + stickerId[i] + '.png">');
} }
} } else {
else
{
if (stickerContainer.html().indexOf(stickerId) < 0) if (stickerContainer.html().indexOf(stickerId) < 0)
stickerContainer.prepend('<img src="images/stickers/' + stickerId + '.png">'); stickerContainer.prepend('<img src="images/stickers/' + stickerId +
'.png">');
} }
} }
@ -342,8 +341,7 @@ function addSticker ( cardId , stickerId )
//---------------------------------- //----------------------------------
// cards // cards
//---------------------------------- //----------------------------------
function createCard( id, text, x, y, rot, colour ) function createCard(id, text, x, y, rot, colour) {
{
drawNewCard(id, text, x, y, rot, colour, null); drawNewCard(id, text, x, y, rot, colour, null);
var action = "createCard"; var action = "createCard";
@ -361,8 +359,7 @@ function createCard( id, text, x, y, rot, colour )
} }
function randomCardColour() function randomCardColour() {
{
var colours = ['yellow', 'green', 'blue', 'white']; var colours = ['yellow', 'green', 'blue', 'white'];
var i = Math.floor(Math.random() * colours.length); var i = Math.floor(Math.random() * colours.length);
@ -371,15 +368,13 @@ function randomCardColour()
} }
function initCards( cardArray ) function initCards(cardArray) {
{
//first delete any cards that exist //first delete any cards that exist
$('.card').remove(); $('.card').remove();
cards = cardArray; cards = cardArray;
for (var i in cardArray) for (var i in cardArray) {
{
card = cardArray[i]; card = cardArray[i];
drawNewCard( drawNewCard(
@ -402,15 +397,15 @@ function initCards( cardArray )
// cols // cols
//---------------------------------- //----------------------------------
function drawNewColumn (columnName) function drawNewColumn(columnName) {
{
var cls = "col"; var cls = "col";
if (totalcolumns === 0) if (totalcolumns === 0) {
{
cls = "col first"; cls = "col first";
} }
$('#icon-col').before('<td class="' + cls + '" width="10%" style="display:none"><h2 id="col-' + (totalcolumns+1) + '" class="editable">' + columnName + '</h2></td>'); $('#icon-col').before('<td class="' + cls +
'" width="10%" style="display:none"><h2 id="col-' + (totalcolumns + 1) +
'" class="editable">' + columnName + '</h2></td>');
$('.editable').editable(function(value, settings) { $('.editable').editable(function(value, settings) {
onColumnChange(this.id, value); onColumnChange(this.id, value);
@ -432,8 +427,7 @@ function drawNewColumn (columnName)
totalcolumns++; totalcolumns++;
} }
function onColumnChange( id, text ) function onColumnChange(id, text) {
{
var names = Array(); var names = Array();
//console.log(id + " " + text ); //console.log(id + " " + text );
@ -444,12 +438,9 @@ function onColumnChange( id, text )
//get ID of current column we are traversing over //get ID of current column we are traversing over
var thisID = $(this).children("h2").attr('id'); var thisID = $(this).children("h2").attr('id');
if (id == thisID) if (id == thisID) {
{
names.push(text); names.push(text);
} } else {
else
{
names.push($(this).text()); names.push($(this).text());
} }
@ -458,8 +449,7 @@ function onColumnChange( id, text )
updateColumns(names); updateColumns(names);
} }
function displayRemoveColumn() function displayRemoveColumn() {
{
if (totalcolumns <= 0) return false; if (totalcolumns <= 0) return false;
$('.col:last').fadeOut(150, $('.col:last').fadeOut(150,
@ -471,8 +461,7 @@ function displayRemoveColumn()
totalcolumns--; totalcolumns--;
} }
function createColumn( name ) function createColumn(name) {
{
if (totalcolumns >= 8) return false; if (totalcolumns >= 8) return false;
drawNewColumn(name); drawNewColumn(name);
@ -485,8 +474,7 @@ function createColumn( name )
sendAction(action, data); sendAction(action, data);
} }
function deleteColumn() function deleteColumn() {
{
if (totalcolumns <= 0) return false; if (totalcolumns <= 0) return false;
displayRemoveColumn(); displayRemoveColumn();
@ -499,8 +487,7 @@ function deleteColumn()
sendAction(action, data); sendAction(action, data);
} }
function updateColumns( c ) function updateColumns(c) {
{
columns = c; columns = c;
var action = "updateColumns"; var action = "updateColumns";
@ -510,21 +497,18 @@ function updateColumns( c )
sendAction(action, data); sendAction(action, data);
} }
function deleteColumns( next ) function deleteColumns(next) {
{
//delete all existing columns: //delete all existing columns:
$('.col').fadeOut('slow', next()); $('.col').fadeOut('slow', next());
} }
function initColumns( columnArray ) function initColumns(columnArray) {
{
totalcolumns = 0; totalcolumns = 0;
columns = columnArray; columns = columnArray;
$('.col').remove(); $('.col').remove();
for (var i in columnArray) for (var i in columnArray) {
{
column = columnArray[i]; column = columnArray[i];
drawNewColumn( drawNewColumn(
@ -534,8 +518,7 @@ function initColumns( columnArray )
} }
function changeThemeTo( theme ) function changeThemeTo(theme) {
{
currentTheme = theme; currentTheme = theme;
$("link[title=cardsize]").attr("href", "/css/" + theme + ".css"); $("link[title=cardsize]").attr("href", "/css/" + theme + ".css");
} }
@ -547,48 +530,41 @@ function changeThemeTo( theme )
function setCookie(c_name,value,exdays) function setCookie(c_name, value, exdays) {
{
var exdate = new Date(); var exdate = new Date();
exdate.setDate(exdate.getDate() + exdays); exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays===null) ? "" : "; expires="+exdate.toUTCString()); var c_value = escape(value) + ((exdays === null) ? "" : "; expires=" +
exdate.toUTCString());
document.cookie = c_name + "=" + c_value; document.cookie = c_name + "=" + c_value;
} }
function getCookie(c_name) function getCookie(c_name) {
{
var i, x, y, ARRcookies = document.cookie.split(";"); var i, x, y, ARRcookies = document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++) for (i = 0; i < ARRcookies.length; i++) {
{
x = ARRcookies[i].substr(0, ARRcookies[i].indexOf("=")); x = ARRcookies[i].substr(0, ARRcookies[i].indexOf("="));
y = ARRcookies[i].substr(ARRcookies[i].indexOf("=") + 1); y = ARRcookies[i].substr(ARRcookies[i].indexOf("=") + 1);
x = x.replace(/^\s+|\s+$/g, ""); x = x.replace(/^\s+|\s+$/g, "");
if (x==c_name) if (x == c_name) {
{
return unescape(y); return unescape(y);
} }
} }
} }
function setName( name ) function setName(name) {
{
sendAction('setUserName', name); sendAction('setUserName', name);
setCookie('scrumscrum-username', name, 365); setCookie('scrumscrum-username', name, 365);
} }
function displayInitialUsers (users) function displayInitialUsers(users) {
{ for (var i in users) {
for (var i in users)
{
//console.log(users); //console.log(users);
displayUserJoined(users[i].sid, users[i].user_name); displayUserJoined(users[i].sid, users[i].user_name);
} }
} }
function displayUserJoined ( sid, user_name ) function displayUserJoined(sid, user_name) {
{
name = ''; name = '';
if (user_name) if (user_name)
name = user_name; name = user_name;
@ -599,8 +575,7 @@ function displayUserJoined ( sid, user_name )
$('#names-ul').append('<li id="user-' + sid + '">' + name + '</li>'); $('#names-ul').append('<li id="user-' + sid + '">' + name + '</li>');
} }
function displayUserLeft ( sid ) function displayUserLeft(sid) {
{
name = ''; name = '';
if (name) if (name)
name = user_name; name = user_name;
@ -615,8 +590,7 @@ function displayUserLeft ( sid )
} }
function updateName ( sid, name ) function updateName(sid, name) {
{
var id = '#user-' + sid.toString(); var id = '#user-' + sid.toString();
$('#names-ul').children(id).text(name); $('#names-ul').children(id).text(name);
@ -625,8 +599,7 @@ function updateName ( sid, name )
////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////
////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////
function boardResizeHappened(event, ui) function boardResizeHappened(event, ui) {
{
var newsize = ui.size; var newsize = ui.size;
sendAction('setBoardSize', newsize); sendAction('setBoardSize', newsize);
@ -647,7 +620,8 @@ function calcCardOffset() {
var card = $(this); var card = $(this);
$(".col").each(function(i) { $(".col").each(function(i) {
var col = $(this); var col = $(this);
if(col.offset().left + col.outerWidth() > card.offset().left + card.outerWidth() || i === $(".col").size() - 1) { if (col.offset().left + col.outerWidth() > card.offset().left +
card.outerWidth() || i === $(".col").size() - 1) {
offsets[card.attr('id')] = { offsets[card.attr('id')] = {
col: col, col: col,
x: ((card.offset().left - col.offset().left) / col.outerWidth()) x: ((card.offset().left - col.offset().left) / col.outerWidth())
@ -722,15 +696,11 @@ $(function() {
// Style changer // Style changer
$("#smallify").click(function() { $("#smallify").click(function() {
if (currentTheme == "bigcards") if (currentTheme == "bigcards") {
{
changeThemeTo('smallcards'); changeThemeTo('smallcards');
} } else if (currentTheme == "smallcards") {
else if (currentTheme == "smallcards")
{
changeThemeTo('bigcards'); changeThemeTo('bigcards');
} }
/*else if (currentTheme == "nocards") /*else if (currentTheme == "nocards")
@ -785,10 +755,8 @@ $(function() {
$("#yourname-input").focus(function() $("#yourname-input").focus(function() {
{ if ($(this).val() == 'unknown') {
if ($(this).val() == 'unknown')
{
$(this).val(""); $(this).val("");
} }
@ -796,10 +764,8 @@ $(function() {
}); });
$("#yourname-input").blur(function() $("#yourname-input").blur(function() {
{ if ($(this).val() === "") {
if ($(this).val() === "")
{
$(this).val('unknown'); $(this).val('unknown');
} }
$(this).removeClass('focused'); $(this).removeClass('focused');
@ -812,11 +778,9 @@ $(function() {
$("#yourname-li").hide(); $("#yourname-li").hide();
$("#yourname-input").keypress(function(e) $("#yourname-input").keypress(function(e) {
{
code = (e.keyCode ? e.keyCode : e.which); code = (e.keyCode ? e.keyCode : e.which);
if (code == 10 || code == 13) if (code == 10 || code == 13) {
{
$(this).blur(); $(this).blur();
} }
}); });
@ -855,19 +819,15 @@ $( ".board-outline" ).resizable( {
$('#marker').draggable( $('#marker').draggable({
{
axis: 'x', axis: 'x',
containment: 'parent' containment: 'parent'
} });
);
$('#eraser').draggable( $('#eraser').draggable({
{
axis: 'x', axis: 'x',
containment: 'parent' containment: 'parent'
} });
);
//disable image dragging //disable image dragging
//window.ondragstart = function() { return false; }; //window.ondragstart = function() { return false; };