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

make new cards start at more sane starting point

Browse source
This commit is contained in:
ali asaria 2014-09-01 12:29:32 -04:00
parent 1c83ca056c
commit 9844cd3d84
1 changed files with 198 additions and 202 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

130
client/script.js
View file

@ -53,13 +53,13 @@ function blockUI(message)
message: message, message: message,
css: { css: {
border: 'none', border: 'none',
padding: '15px', padding: '15px',
backgroundColor: '#000', backgroundColor: '#000',
'-webkit-border-radius': '10px', '-webkit-border-radius': '10px',
'-moz-border-radius': '10px', '-moz-border-radius': '10px',
opacity: .5, opacity: .5,
color: '#fff', color: '#fff',
fontSize: '20px' fontSize: '20px'
} }
}); });
@ -87,7 +87,7 @@ function getMessage( m )
break; break;
case 'moveCard': case 'moveCard':
moveCard($("#" + data.id), data.position); moveCard($("#" + data.id), data.position);
break; break;
case 'initCards': case 'initCards':
@ -96,7 +96,7 @@ 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':
@ -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}; //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 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/' + colour + '-card.png">\
<div id="content:' + id + '" class="content stickertarget droppable">' + text + '</div>\ <div id="content:' + id + '" class="content stickertarget droppable">' +
text + '</div>\
</div>'; </div>';
var card = $(h); var card = $(h);
card.appendTo('#board'); card.appendTo('#board');
//@TODO //@TODO
@ -197,7 +200,7 @@ function drawNewCard(id, text, x, y, rot, colour, sticker, animationspeed)
return false; return false;
} }
} }
} }
); );
//After a drag: //After a drag:
@ -233,12 +236,16 @@ 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;
var startPosition = $("#create-card").position();
card.css( 'top' , startPosition.top - card.height()*.5 );
card.css('left', startPosition.left - card.width() *.5 );
card.animate({ card.animate({
left: x + "px", left: x + "px",
@ -278,7 +285,7 @@ function drawNewCard(id, text, x, y, rot, colour, sticker, animationspeed)
return(value); return(value);
}, { }, {
type : 'textarea', type : 'textarea',
submit : 'OK', submit : 'OK',
style : 'inherit', style : 'inherit',
cssclass : 'card-edit-form', cssclass : 'card-edit-form',
type : 'textarea', type : 'textarea',
@ -299,10 +306,10 @@ function onCardChange( id, text )
} }
function moveCard(card, position) { function moveCard(card, position) {
card.animate({ card.animate({
left: position.left+"px", left: position.left+"px",
top: position.top+"px" top: position.top+"px"
}, 500); }, 500);
} }
function addSticker ( cardId , stickerId ) function addSticker ( cardId , stickerId )
@ -552,9 +559,9 @@ for (i=0;i<ARRcookies.length;i++)
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);
} }
} }
} }
@ -630,21 +637,21 @@ function resizeBoard (size) {
////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////
function calcCardOffset() { function calcCardOffset() {
var offsets = {}; var offsets = {};
$(".card").each(function() { $(".card").each(function() {
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() )
} }
return false; return false;
} }
}); });
}); });
return offsets; return offsets;
} }
@ -652,7 +659,7 @@ function calcCardOffset() {
//doSync is false if you don't want to synchronize //doSync is false if you don't want to synchronize
//with all the other users who are in this room //with all the other users who are in this room
function adjustCard(offsets, doSync) { function adjustCard(offsets, doSync) {
$(".card").each(function() { $(".card").each(function() {
var card = $(this); var card = $(this);
var offset = offsets[this.id]; var offset = offsets[this.id];
if(offset) { if(offset) {
@ -705,7 +712,7 @@ $(function() {
createCard( createCard(
'card' + uniqueID, '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, rotation,
randomCardColour()); randomCardColour());
}); });
@ -777,10 +784,10 @@ $(function() {
$("#yourname-input").focus(function() $("#yourname-input").focus(function()
{ {
if ($(this).val() == 'unknown') if ($(this).val() == 'unknown')
{ {
$(this).val(""); $(this).val("");
} }
$(this).addClass('focused'); $(this).addClass('focused');
@ -790,7 +797,7 @@ $(function() {
{ {
if ($(this).val() == "") if ($(this).val() == "")
{ {
$(this).val('unknown'); $(this).val('unknown');
} }
$(this).removeClass('focused'); $(this).removeClass('focused');
@ -804,12 +811,12 @@ $(function() {
$("#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();
} }
}); });
@ -829,18 +836,18 @@ $( ".board-outline" ).resizable( {
//A new scope for precalculating //A new scope for precalculating
(function() { (function() {
var offsets; var offsets;
$(".board-outline").bind("resizestart", function() { $(".board-outline").bind("resizestart", function() {
offsets = calcCardOffset(); offsets = calcCardOffset();
}); });
$(".board-outline").bind("resize", function(event, ui) { $(".board-outline").bind("resize", function(event, ui) {
adjustCard(offsets, false); adjustCard(offsets, false);
}); });
$(".board-outline").bind("resizestop", function(event, ui) { $(".board-outline").bind("resizestop", function(event, ui) {
boardResizeHappened(event, ui); boardResizeHappened(event, ui);
adjustCard(offsets, true); adjustCard(offsets, true);
}); });
})(); })();
@ -864,14 +871,3 @@ window.ondragstart = function() { return false; }
}); });