From 30ff63f1c6396ef4b4f21d7a0cfeddd16b277718 Mon Sep 17 00:00:00 2001 From: Raincole Date: Tue, 14 Jun 2011 07:42:04 +0800 Subject: [PATCH] Adjust cards when board is resized --- client/script.js | 100 +++++++++++++++++++++++++++++++++++++---------- lib/rooms.js | 2 +- 2 files changed, 81 insertions(+), 21 deletions(-) diff --git a/client/script.js b/client/script.js index 6567bba..82e841c 100644 --- a/client/script.js +++ b/client/script.js @@ -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': @@ -101,7 +98,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': @@ -170,9 +167,11 @@ function drawNewCard(id, text, x, y, rot, colour, sticker, animationspeed) \
' + text + '
\ '; - $(h).appendTo('#board'); + + var card = $(h); + card.appendTo('#board'); - $( ".card" ).draggable( + 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 ) { @@ -210,13 +210,14 @@ 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 ) { @@ -579,8 +587,8 @@ function updateName ( sid, name ) function boardResizeHappened(event, ui) { - var newsize = ui.size - + var newsize = ui.size + sendAction( 'setBoardSize', newsize); } @@ -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,13 +781,21 @@ $( ".board-outline" ).resizable( { minHeight: 400 , maxWidth: 3200, 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); + }); +})(); - }); diff --git a/lib/rooms.js b/lib/rooms.js index d52c5c0..f1b2f29 100644 --- a/lib/rooms.js +++ b/lib/rooms.js @@ -226,4 +226,4 @@ exports.broadcast_to_roommates = function (client, msg) { console.log(' - ' + roommates[i].sessionId); roommates[i].send(msg); } -} \ No newline at end of file +}