Adjust cards when board is resized
This commit is contained in:
Raincole
parent
1a4b9ec745
commit
30ff63f1c6
2 changed files with 81 additions and 21 deletions
|
|
@ -89,10 +89,7 @@ function getMessage( m )
|
|||
break;
|
||||
|
||||
case 'moveCard':
|
||||
$("#" + data.id).animate({
|
||||
left: data.position.left+"px",
|
||||
top: data.position.top+"px"
|
||||
}, 500);
|
||||
moveCard($("#" + data.id), data.position);
|
||||
break;
|
||||
|
||||
case 'initCards':
|
||||
|
|
@ -170,9 +167,11 @@ function drawNewCard(id, text, x, y, rot, colour, sticker, animationspeed)
|
|||
<img class="card-image" src="/images/' + colour + '-card.png">\
|
||||
<div id="content:' + id + '" class="content stickertarget droppable">' + text + '</div>\
|
||||
</div>';
|
||||
$(h).appendTo('#board');
|
||||
|
||||
$( ".card" ).draggable(
|
||||
var card = $(h);
|
||||
card.appendTo('#board');
|
||||
|
||||
card.draggable(
|
||||
{
|
||||
snap: false,
|
||||
snapTolerance: 5,
|
||||
|
|
@ -182,7 +181,8 @@ function drawNewCard(id, text, x, y, rot, colour, sticker, animationspeed)
|
|||
);
|
||||
|
||||
//After a drag:
|
||||
$( "#" + id ).bind( "dragstop", function(event, ui) {
|
||||
card.bind( "dragstop", function(event, ui) {
|
||||
|
||||
var data = {
|
||||
id: this.id,
|
||||
position: ui.position,
|
||||
|
|
@ -192,7 +192,7 @@ function drawNewCard(id, text, x, y, rot, colour, sticker, animationspeed)
|
|||
sendAction('moveCard', data);
|
||||
});
|
||||
|
||||
$( ".droppable" ).droppable(
|
||||
card.droppable(
|
||||
{
|
||||
accept: '.sticker',
|
||||
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);
|
||||
if (typeof(animationspeed) != 'undefined') speed = animationspeed;
|
||||
|
||||
$("#" + id).animate({
|
||||
|
||||
card.animate({
|
||||
left: x + "px",
|
||||
top: y + "px"
|
||||
}, speed);
|
||||
|
||||
$("#" + id).hover(
|
||||
card.hover(
|
||||
function(){
|
||||
$(this).addClass('hover');
|
||||
$(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(){
|
||||
$(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(){
|
||||
$("#" + id).remove();
|
||||
//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',
|
||||
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 )
|
||||
{
|
||||
|
||||
|
|
@ -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() {
|
||||
|
||||
if (boardInitialized == false)
|
||||
|
|
@ -729,12 +781,20 @@ $( ".board-outline" ).resizable( {
|
|||
minHeight: 400 ,
|
||||
maxWidth: 3200,
|
||||
maxHeight: 1800,
|
||||
stop: function(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);
|
||||
});
|
||||
|
||||
|
||||
})();
|
||||
|
||||
});
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue