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

Adjust cards when board is resized

Browse source
This commit is contained in:
Raincole 2011-06-14 07:42:04 +08:00
parent 1a4b9ec745
commit 30ff63f1c6
2 changed files with 81 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

94
client/script.js
View file

@ -89,10 +89,7 @@ function getMessage( m )
break; break;
case 'moveCard': case 'moveCard':
$("#" + data.id).animate({ moveCard($("#" + data.id), data.position);
left: data.position.left+"px",
top: data.position.top+"px"
}, 500);
break; break;
case 'initCards': case 'initCards':
@ -101,7 +98,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':
@ -170,9 +167,11 @@ function drawNewCard(id, text, x, y, rot, colour, sticker, animationspeed)
<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>';
$(h).appendTo('#board');
$( ".card" ).draggable( var card = $(h);
card.appendTo('#board');
card.draggable(
{ {
snap: false, snap: false,
snapTolerance: 5, snapTolerance: 5,
@ -182,7 +181,8 @@ function drawNewCard(id, text, x, y, rot, colour, sticker, animationspeed)
); );
//After a drag: //After a drag:
$( "#" + id ).bind( "dragstop", function(event, ui) { card.bind( "dragstop", function(event, ui) {
var data = { var data = {
id: this.id, id: this.id,
position: ui.position, position: ui.position,
@ -192,7 +192,7 @@ function drawNewCard(id, text, x, y, rot, colour, sticker, animationspeed)
sendAction('moveCard', data); sendAction('moveCard', data);
}); });
$( ".droppable" ).droppable( card.droppable(
{ {
accept: '.sticker', accept: '.sticker',
drop: function( event, ui ) { drop: function( event, ui ) {
@ -211,12 +211,13 @@ function drawNewCard(id, text, x, y, rot, colour, sticker, animationspeed)
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;
$("#" + id).animate({
card.animate({
left: x + "px", left: x + "px",
top: y + "px" top: y + "px"
}, speed); }, speed);
$("#" + id).hover( card.hover(
function(){ function(){
$(this).addClass('hover'); $(this).addClass('hover');
$(this).children('.card-icon').fadeIn(10); $(this).children('.card-icon').fadeIn(10);
@ -227,7 +228,7 @@ function drawNewCard(id, text, x, y, rot, colour, sticker, animationspeed)
} }
); );
$("#" + id).children('.card-icon').hover( card.children('.card-icon').hover(
function(){ function(){
$(this).addClass('card-icon-hover'); $(this).addClass('card-icon-hover');
}, },
@ -236,7 +237,7 @@ function drawNewCard(id, text, x, y, rot, colour, sticker, animationspeed)
} }
); );
$("#" + id).children('.delete-card-icon').click( card.children('.delete-card-icon').click(
function(){ function(){
$("#" + id).remove(); $("#" + id).remove();
//notify server of delete //notify server of delete
@ -244,7 +245,7 @@ function drawNewCard(id, text, x, y, rot, colour, sticker, animationspeed)
} }
); );
$("#" + id).children('.content').editable( "/edit-card/" + id, card.children('.content').editable( "/edit-card/" + id,
{ {
style : 'inherit', style : 'inherit',
cssclass : 'card-edit-form', cssclass : 'card-edit-form',
@ -274,6 +275,13 @@ function onCardChange( text, result )
} }
function moveCard(card, position) {
card.animate({
left: position.left+"px",
top: position.top+"px"
}, 500);
}
function addSticker ( cardId , stickerId ) function addSticker ( cardId , stickerId )
{ {
@ -593,6 +601,50 @@ 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
}
return false;
}
});
});
return offsets;
}
function adjustCard(offsets) {
$(".card").each(function() {
var card = $(this);
var offset = offsets[this.id];
if(offset) {
var data = {
id: this.id,
position: {
left: offset.col.position().left + offset.x,
top: parseInt(card.css('top').slice(0,-2))
},
oldposition: {
left: parseInt(card.css('left').slice(0,-2)),
top: parseInt(card.css('top').slice(0,-2))
}
}; //use .css() instead of .position() because css' rotate
console.log(data);
moveCard(card, data.position);
sendAction('moveCard', data);
}
});
}
//////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////
$(function() { $(function() {
if (boardInitialized == false) if (boardInitialized == false)
@ -729,12 +781,20 @@ $( ".board-outline" ).resizable( {
minHeight: 400 , minHeight: 400 ,
maxWidth: 3200, maxWidth: 3200,
maxHeight: 1800, maxHeight: 1800,
stop: function(event, ui) {
boardResizeHappened(event, ui);
}
} ); } );
//A new scope for precalculating
(function() {
var offsets;
$(".board-outline").bind("resizestart", function() {
offsets = calcCardOffset();
});
$(".board-outline").bind("resizestop", function(event, ui) {
boardResizeHappened(event, ui);
adjustCard(offsets);
});
})();
}); });