change spacing
This commit is contained in:
ali asaria
parent
29bca82aa9
commit
557703e0d8
1 changed files with 541 additions and 581 deletions
218
client/script.js
218
client/script.js
|
|
@ -9,8 +9,7 @@ var socket = io.connect();
|
|||
|
||||
//an action has happened, send it to the
|
||||
//server
|
||||
function sendAction(a, d)
|
||||
{
|
||||
function sendAction(a, d) {
|
||||
//console.log('--> ' + a);
|
||||
|
||||
var message = {
|
||||
|
|
@ -40,13 +39,11 @@ socket.on('message', function(data){
|
|||
getMessage(data);
|
||||
});
|
||||
|
||||
function unblockUI()
|
||||
{
|
||||
function unblockUI() {
|
||||
$.unblockUI();
|
||||
}
|
||||
|
||||
function blockUI(message)
|
||||
{
|
||||
function blockUI(message) {
|
||||
message = message || 'Waiting...';
|
||||
|
||||
$.blockUI({
|
||||
|
|
@ -66,16 +63,14 @@ function blockUI(message)
|
|||
}
|
||||
|
||||
//respond to an action event
|
||||
function getMessage( m )
|
||||
{
|
||||
function getMessage(m) {
|
||||
var message = m; //JSON.parse(m);
|
||||
var action = message.action;
|
||||
var data = message.data;
|
||||
|
||||
//console.log('<-- ' + action);
|
||||
|
||||
switch (action)
|
||||
{
|
||||
switch (action) {
|
||||
case 'roomAccept':
|
||||
//okay we're accepted, then request initialization
|
||||
//(this is a bit of unnessary back and forth but that's okay for now)
|
||||
|
|
@ -96,12 +91,15 @@ function getMessage( m )
|
|||
|
||||
case 'createCard':
|
||||
//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;
|
||||
|
||||
case 'deleteCard':
|
||||
$("#" + data.id).fadeOut(500,
|
||||
function() {$(this).remove();}
|
||||
function() {
|
||||
$(this).remove();
|
||||
}
|
||||
);
|
||||
break;
|
||||
|
||||
|
|
@ -158,16 +156,18 @@ $(document).bind('keyup', function(event) {
|
|||
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};
|
||||
|
||||
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 class="card-image" src="/images/' + colour + '-card.png">\
|
||||
<div id="content:' + id + '" class="content stickertarget droppable">' +
|
||||
<img class="card-image" src="/images/' +
|
||||
colour + '-card.png">\
|
||||
<div id="content:' + id +
|
||||
'" class="content stickertarget droppable">' +
|
||||
text + '</div><span class="filler"></span>\
|
||||
</div>';
|
||||
|
||||
|
|
@ -185,8 +185,7 @@ function drawNewCard(id, text, x, y, rot, colour, sticker, animationspeed)
|
|||
// $(this).focus();
|
||||
// } );
|
||||
|
||||
card.draggable(
|
||||
{
|
||||
card.draggable({
|
||||
snap: false,
|
||||
snapTolerance: 5,
|
||||
containment: [0, 0, 2000, 2000],
|
||||
|
|
@ -200,8 +199,7 @@ function drawNewCard(id, text, x, y, rot, colour, sticker, animationspeed)
|
|||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
//After a drag:
|
||||
card.bind("dragstop", function(event, ui) {
|
||||
|
|
@ -219,8 +217,7 @@ function drawNewCard(id, text, x, y, rot, colour, sticker, animationspeed)
|
|||
sendAction('moveCard', data);
|
||||
});
|
||||
|
||||
card.children(".droppable").droppable(
|
||||
{
|
||||
card.children(".droppable").droppable({
|
||||
accept: '.sticker',
|
||||
drop: function(event, ui) {
|
||||
var stickerId = ui.draggable.attr("id");
|
||||
|
|
@ -228,7 +225,10 @@ function drawNewCard(id, text, x, y, rot, colour, sticker, animationspeed)
|
|||
|
||||
addSticker(cardId, stickerId);
|
||||
|
||||
var data = { cardId: cardId, stickerId: stickerId };
|
||||
var data = {
|
||||
cardId: cardId,
|
||||
stickerId: stickerId
|
||||
};
|
||||
sendAction('addSticker', data);
|
||||
|
||||
//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');
|
||||
},
|
||||
hoverClass: 'card-hover-draggable'
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
var speed = Math.floor(Math.random() * 1000);
|
||||
if (typeof(animationspeed) != 'undefined') speed = animationspeed;
|
||||
|
|
@ -276,7 +275,9 @@ function drawNewCard(id, text, x, y, rot, colour, sticker, animationspeed)
|
|||
function() {
|
||||
$("#" + id).remove();
|
||||
//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 )
|
||||
{
|
||||
sendAction('editCard', { id: id, value: text });
|
||||
function onCardChange(id, text) {
|
||||
sendAction('editCard', {
|
||||
id: id,
|
||||
value: text
|
||||
});
|
||||
}
|
||||
|
||||
function moveCard(card, position) {
|
||||
|
|
@ -311,29 +314,25 @@ function moveCard(card, position) {
|
|||
}, 500);
|
||||
}
|
||||
|
||||
function addSticker ( cardId , stickerId )
|
||||
{
|
||||
function addSticker(cardId, stickerId) {
|
||||
|
||||
stickerContainer = $('#' + cardId + ' .filler');
|
||||
|
||||
if (stickerId === "nosticker")
|
||||
{
|
||||
if (stickerId === "nosticker") {
|
||||
stickerContainer.html("");
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
if ( Array.isArray( stickerId ) )
|
||||
{
|
||||
for (var i in stickerId)
|
||||
{
|
||||
stickerContainer.prepend('<img src="images/stickers/' + stickerId[i] + '.png">');
|
||||
if (Array.isArray(stickerId)) {
|
||||
for (var i in stickerId) {
|
||||
stickerContainer.prepend('<img src="images/stickers/' + stickerId[i] +
|
||||
'.png">');
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
} else {
|
||||
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
|
||||
//----------------------------------
|
||||
function createCard( id, text, x, y, rot, colour )
|
||||
{
|
||||
function createCard(id, text, x, y, rot, colour) {
|
||||
drawNewCard(id, text, x, y, rot, colour, null);
|
||||
|
||||
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 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
|
||||
$('.card').remove();
|
||||
|
||||
cards = cardArray;
|
||||
|
||||
for (var i in cardArray)
|
||||
{
|
||||
for (var i in cardArray) {
|
||||
card = cardArray[i];
|
||||
|
||||
drawNewCard(
|
||||
|
|
@ -402,15 +397,15 @@ function initCards( cardArray )
|
|||
// cols
|
||||
//----------------------------------
|
||||
|
||||
function drawNewColumn (columnName)
|
||||
{
|
||||
function drawNewColumn(columnName) {
|
||||
var cls = "col";
|
||||
if (totalcolumns === 0)
|
||||
{
|
||||
if (totalcolumns === 0) {
|
||||
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) {
|
||||
onColumnChange(this.id, value);
|
||||
|
|
@ -432,8 +427,7 @@ function drawNewColumn (columnName)
|
|||
totalcolumns++;
|
||||
}
|
||||
|
||||
function onColumnChange( id, text )
|
||||
{
|
||||
function onColumnChange(id, text) {
|
||||
var names = Array();
|
||||
|
||||
//console.log(id + " " + text );
|
||||
|
|
@ -444,12 +438,9 @@ function onColumnChange( id, text )
|
|||
//get ID of current column we are traversing over
|
||||
var thisID = $(this).children("h2").attr('id');
|
||||
|
||||
if (id == thisID)
|
||||
{
|
||||
if (id == thisID) {
|
||||
names.push(text);
|
||||
}
|
||||
else
|
||||
{
|
||||
} else {
|
||||
names.push($(this).text());
|
||||
}
|
||||
|
||||
|
|
@ -458,8 +449,7 @@ function onColumnChange( id, text )
|
|||
updateColumns(names);
|
||||
}
|
||||
|
||||
function displayRemoveColumn()
|
||||
{
|
||||
function displayRemoveColumn() {
|
||||
if (totalcolumns <= 0) return false;
|
||||
|
||||
$('.col:last').fadeOut(150,
|
||||
|
|
@ -471,8 +461,7 @@ function displayRemoveColumn()
|
|||
totalcolumns--;
|
||||
}
|
||||
|
||||
function createColumn( name )
|
||||
{
|
||||
function createColumn(name) {
|
||||
if (totalcolumns >= 8) return false;
|
||||
|
||||
drawNewColumn(name);
|
||||
|
|
@ -485,8 +474,7 @@ function createColumn( name )
|
|||
sendAction(action, data);
|
||||
}
|
||||
|
||||
function deleteColumn()
|
||||
{
|
||||
function deleteColumn() {
|
||||
if (totalcolumns <= 0) return false;
|
||||
|
||||
displayRemoveColumn();
|
||||
|
|
@ -499,8 +487,7 @@ function deleteColumn()
|
|||
sendAction(action, data);
|
||||
}
|
||||
|
||||
function updateColumns( c )
|
||||
{
|
||||
function updateColumns(c) {
|
||||
columns = c;
|
||||
|
||||
var action = "updateColumns";
|
||||
|
|
@ -510,21 +497,18 @@ function updateColumns( c )
|
|||
sendAction(action, data);
|
||||
}
|
||||
|
||||
function deleteColumns( next )
|
||||
{
|
||||
function deleteColumns(next) {
|
||||
//delete all existing columns:
|
||||
$('.col').fadeOut('slow', next());
|
||||
}
|
||||
|
||||
function initColumns( columnArray )
|
||||
{
|
||||
function initColumns(columnArray) {
|
||||
totalcolumns = 0;
|
||||
columns = columnArray;
|
||||
|
||||
$('.col').remove();
|
||||
|
||||
for (var i in columnArray)
|
||||
{
|
||||
for (var i in columnArray) {
|
||||
column = columnArray[i];
|
||||
|
||||
drawNewColumn(
|
||||
|
|
@ -534,8 +518,7 @@ function initColumns( columnArray )
|
|||
}
|
||||
|
||||
|
||||
function changeThemeTo( theme )
|
||||
{
|
||||
function changeThemeTo(theme) {
|
||||
currentTheme = theme;
|
||||
$("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();
|
||||
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;
|
||||
}
|
||||
|
||||
function getCookie(c_name)
|
||||
{
|
||||
function getCookie(c_name) {
|
||||
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("="));
|
||||
y = ARRcookies[i].substr(ARRcookies[i].indexOf("=") + 1);
|
||||
x = x.replace(/^\s+|\s+$/g, "");
|
||||
if (x==c_name)
|
||||
{
|
||||
if (x == c_name) {
|
||||
return unescape(y);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function setName( name )
|
||||
{
|
||||
function setName(name) {
|
||||
sendAction('setUserName', name);
|
||||
|
||||
setCookie('scrumscrum-username', name, 365);
|
||||
}
|
||||
|
||||
function displayInitialUsers (users)
|
||||
{
|
||||
for (var i in users)
|
||||
{
|
||||
function displayInitialUsers(users) {
|
||||
for (var i in users) {
|
||||
//console.log(users);
|
||||
displayUserJoined(users[i].sid, users[i].user_name);
|
||||
}
|
||||
}
|
||||
|
||||
function displayUserJoined ( sid, user_name )
|
||||
{
|
||||
function displayUserJoined(sid, user_name) {
|
||||
name = '';
|
||||
if (user_name)
|
||||
name = user_name;
|
||||
|
|
@ -599,8 +575,7 @@ function displayUserJoined ( sid, user_name )
|
|||
$('#names-ul').append('<li id="user-' + sid + '">' + name + '</li>');
|
||||
}
|
||||
|
||||
function displayUserLeft ( sid )
|
||||
{
|
||||
function displayUserLeft(sid) {
|
||||
name = '';
|
||||
if (name)
|
||||
name = user_name;
|
||||
|
|
@ -615,8 +590,7 @@ function displayUserLeft ( sid )
|
|||
}
|
||||
|
||||
|
||||
function updateName ( sid, name )
|
||||
{
|
||||
function updateName(sid, name) {
|
||||
var id = '#user-' + sid.toString();
|
||||
|
||||
$('#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;
|
||||
|
||||
sendAction('setBoardSize', newsize);
|
||||
|
|
@ -647,7 +620,8 @@ function calcCardOffset() {
|
|||
var card = $(this);
|
||||
$(".col").each(function(i) {
|
||||
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')] = {
|
||||
col: col,
|
||||
x: ((card.offset().left - col.offset().left) / col.outerWidth())
|
||||
|
|
@ -722,15 +696,11 @@ $(function() {
|
|||
|
||||
|
||||
|
||||
|
||||
// Style changer
|
||||
$("#smallify").click(function() {
|
||||
if (currentTheme == "bigcards")
|
||||
{
|
||||
if (currentTheme == "bigcards") {
|
||||
changeThemeTo('smallcards');
|
||||
}
|
||||
else if (currentTheme == "smallcards")
|
||||
{
|
||||
} else if (currentTheme == "smallcards") {
|
||||
changeThemeTo('bigcards');
|
||||
}
|
||||
/*else if (currentTheme == "nocards")
|
||||
|
|
@ -785,10 +755,8 @@ $(function() {
|
|||
|
||||
|
||||
|
||||
$("#yourname-input").focus(function()
|
||||
{
|
||||
if ($(this).val() == 'unknown')
|
||||
{
|
||||
$("#yourname-input").focus(function() {
|
||||
if ($(this).val() == 'unknown') {
|
||||
$(this).val("");
|
||||
}
|
||||
|
||||
|
|
@ -796,10 +764,8 @@ $(function() {
|
|||
|
||||
});
|
||||
|
||||
$("#yourname-input").blur(function()
|
||||
{
|
||||
if ($(this).val() === "")
|
||||
{
|
||||
$("#yourname-input").blur(function() {
|
||||
if ($(this).val() === "") {
|
||||
$(this).val('unknown');
|
||||
}
|
||||
$(this).removeClass('focused');
|
||||
|
|
@ -812,11 +778,9 @@ $(function() {
|
|||
|
||||
$("#yourname-li").hide();
|
||||
|
||||
$("#yourname-input").keypress(function(e)
|
||||
{
|
||||
$("#yourname-input").keypress(function(e) {
|
||||
code = (e.keyCode ? e.keyCode : e.which);
|
||||
if (code == 10 || code == 13)
|
||||
{
|
||||
if (code == 10 || code == 13) {
|
||||
$(this).blur();
|
||||
}
|
||||
});
|
||||
|
|
@ -855,19 +819,15 @@ $( ".board-outline" ).resizable( {
|
|||
|
||||
|
||||
|
||||
$('#marker').draggable(
|
||||
{
|
||||
$('#marker').draggable({
|
||||
axis: 'x',
|
||||
containment: 'parent'
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
$('#eraser').draggable(
|
||||
{
|
||||
$('#eraser').draggable({
|
||||
axis: 'x',
|
||||
containment: 'parent'
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
//disable image dragging
|
||||
//window.ondragstart = function() { return false; };
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue