make new cards start at more sane starting point
This commit is contained in:
ali asaria
parent
1c83ca056c
commit
9844cd3d84
1 changed files with 198 additions and 202 deletions
130
client/script.js
130
client/script.js
|
|
@ -53,13 +53,13 @@ function blockUI(message)
|
|||
message: message,
|
||||
|
||||
css: {
|
||||
border: 'none',
|
||||
padding: '15px',
|
||||
backgroundColor: '#000',
|
||||
'-webkit-border-radius': '10px',
|
||||
'-moz-border-radius': '10px',
|
||||
opacity: .5,
|
||||
color: '#fff',
|
||||
border: 'none',
|
||||
padding: '15px',
|
||||
backgroundColor: '#000',
|
||||
'-webkit-border-radius': '10px',
|
||||
'-moz-border-radius': '10px',
|
||||
opacity: .5,
|
||||
color: '#fff',
|
||||
fontSize: '20px'
|
||||
}
|
||||
});
|
||||
|
|
@ -87,7 +87,7 @@ function getMessage( m )
|
|||
break;
|
||||
|
||||
case 'moveCard':
|
||||
moveCard($("#" + data.id), data.position);
|
||||
moveCard($("#" + data.id), data.position);
|
||||
break;
|
||||
|
||||
case 'initCards':
|
||||
|
|
@ -96,7 +96,7 @@ 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':
|
||||
|
|
@ -162,13 +162,16 @@ 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);">\
|
||||
var h = '<div id="' + id + '" class="card ' + colour +
|
||||
' 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">' + text + '</div>\
|
||||
<div id="content:' + id + '" class="content stickertarget droppable">' +
|
||||
text + '</div>\
|
||||
</div>';
|
||||
|
||||
var card = $(h);
|
||||
var card = $(h);
|
||||
card.appendTo('#board');
|
||||
|
||||
//@TODO
|
||||
|
|
@ -197,7 +200,7 @@ function drawNewCard(id, text, x, y, rot, colour, sticker, animationspeed)
|
|||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
//After a drag:
|
||||
|
|
@ -233,12 +236,16 @@ 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;
|
||||
|
||||
var startPosition = $("#create-card").position();
|
||||
|
||||
card.css( 'top' , startPosition.top - card.height()*.5 );
|
||||
card.css('left', startPosition.left - card.width() *.5 );
|
||||
|
||||
card.animate({
|
||||
left: x + "px",
|
||||
|
|
@ -278,7 +285,7 @@ function drawNewCard(id, text, x, y, rot, colour, sticker, animationspeed)
|
|||
return(value);
|
||||
}, {
|
||||
type : 'textarea',
|
||||
submit : 'OK',
|
||||
submit : 'OK',
|
||||
style : 'inherit',
|
||||
cssclass : 'card-edit-form',
|
||||
type : 'textarea',
|
||||
|
|
@ -299,10 +306,10 @@ function onCardChange( id, text )
|
|||
}
|
||||
|
||||
function moveCard(card, position) {
|
||||
card.animate({
|
||||
left: position.left+"px",
|
||||
top: position.top+"px"
|
||||
}, 500);
|
||||
card.animate({
|
||||
left: position.left+"px",
|
||||
top: position.top+"px"
|
||||
}, 500);
|
||||
}
|
||||
|
||||
function addSticker ( cardId , stickerId )
|
||||
|
|
@ -552,9 +559,9 @@ for (i=0;i<ARRcookies.length;i++)
|
|||
y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
|
||||
x=x.replace(/^\s+|\s+$/g,"");
|
||||
if (x==c_name)
|
||||
{
|
||||
return unescape(y);
|
||||
}
|
||||
{
|
||||
return unescape(y);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -630,21 +637,21 @@ function resizeBoard (size) {
|
|||
//////////////////////////////////////////////////////////
|
||||
|
||||
function calcCardOffset() {
|
||||
var offsets = {};
|
||||
$(".card").each(function() {
|
||||
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) {
|
||||
offsets[card.attr('id')] = {
|
||||
col: col,
|
||||
x: ( (card.offset().left - col.offset().left) / col.outerWidth() )
|
||||
}
|
||||
return false;
|
||||
}
|
||||
});
|
||||
});
|
||||
return offsets;
|
||||
var offsets = {};
|
||||
$(".card").each(function() {
|
||||
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) {
|
||||
offsets[card.attr('id')] = {
|
||||
col: col,
|
||||
x: ( (card.offset().left - col.offset().left) / col.outerWidth() )
|
||||
}
|
||||
return false;
|
||||
}
|
||||
});
|
||||
});
|
||||
return offsets;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -652,7 +659,7 @@ function calcCardOffset() {
|
|||
//doSync is false if you don't want to synchronize
|
||||
//with all the other users who are in this room
|
||||
function adjustCard(offsets, doSync) {
|
||||
$(".card").each(function() {
|
||||
$(".card").each(function() {
|
||||
var card = $(this);
|
||||
var offset = offsets[this.id];
|
||||
if(offset) {
|
||||
|
|
@ -705,7 +712,7 @@ $(function() {
|
|||
createCard(
|
||||
'card' + uniqueID,
|
||||
'',
|
||||
58, $('div.board-outline').height(),// hack - not a great way to get the new card coordinates, but most consistant ATM
|
||||
58, $('div.board-outline').height(),// hack - not a great way to get the new card coordinates, but most consistant ATM
|
||||
rotation,
|
||||
randomCardColour());
|
||||
});
|
||||
|
|
@ -777,10 +784,10 @@ $(function() {
|
|||
|
||||
$("#yourname-input").focus(function()
|
||||
{
|
||||
if ($(this).val() == 'unknown')
|
||||
{
|
||||
if ($(this).val() == 'unknown')
|
||||
{
|
||||
$(this).val("");
|
||||
}
|
||||
}
|
||||
|
||||
$(this).addClass('focused');
|
||||
|
||||
|
|
@ -790,7 +797,7 @@ $(function() {
|
|||
{
|
||||
if ($(this).val() == "")
|
||||
{
|
||||
$(this).val('unknown');
|
||||
$(this).val('unknown');
|
||||
}
|
||||
$(this).removeClass('focused');
|
||||
|
||||
|
|
@ -804,12 +811,12 @@ $(function() {
|
|||
|
||||
$("#yourname-input").keypress(function(e)
|
||||
{
|
||||
code= (e.keyCode ? e.keyCode : e.which);
|
||||
if (code == 10 || code == 13)
|
||||
code= (e.keyCode ? e.keyCode : e.which);
|
||||
if (code == 10 || code == 13)
|
||||
{
|
||||
$(this).blur();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
|
@ -829,18 +836,18 @@ $( ".board-outline" ).resizable( {
|
|||
|
||||
//A new scope for precalculating
|
||||
(function() {
|
||||
var offsets;
|
||||
var offsets;
|
||||
|
||||
$(".board-outline").bind("resizestart", function() {
|
||||
offsets = calcCardOffset();
|
||||
});
|
||||
$(".board-outline").bind("resizestart", function() {
|
||||
offsets = calcCardOffset();
|
||||
});
|
||||
$(".board-outline").bind("resize", function(event, ui) {
|
||||
adjustCard(offsets, false);
|
||||
});
|
||||
$(".board-outline").bind("resizestop", function(event, ui) {
|
||||
boardResizeHappened(event, ui);
|
||||
adjustCard(offsets, true);
|
||||
});
|
||||
adjustCard(offsets, false);
|
||||
});
|
||||
$(".board-outline").bind("resizestop", function(event, ui) {
|
||||
boardResizeHappened(event, ui);
|
||||
adjustCard(offsets, true);
|
||||
});
|
||||
})();
|
||||
|
||||
|
||||
|
|
@ -864,14 +871,3 @@ window.ondragstart = function() { return false; }
|
|||
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue