make new cards start at more sane starting point

client/script.js

@@ -12,31 +12,31 @@ var socket = io.connect();
 function sendAction(a, d)
 {
 	//console.log('--> ' + a);
-	
+
-	var message = { 
+	var message = {
 		action: a,
 		data: d
 	}
-	
+
 	socket.json.send ( message );
 }
 
-socket.on('connect', function(){ 
+socket.on('connect', function(){
 	//console.log('successful socket.io connect');
-	
+
 	//let the path be the room name
 	var path = location.pathname;
-	
+
 	//imediately join the room which will trigger the initializations
 	sendAction('joinRoom', path);
 })
 
-socket.on('disconnect', function(){ 
+socket.on('disconnect', function(){
 	blockUI("Server disconnected. Refresh page to try and reconnect...");
 	//$('.blockOverlay').click($.unblockUI);
 });
 
-socket.on('message', function(data){ 
+socket.on('message', function(data){
 	getMessage(data);
 })
 
@@ -48,21 +48,21 @@ function unblockUI()
 function blockUI(message)
 {
 	message = message || 'Waiting...';
-	
+
-	$.blockUI({ 
+	$.blockUI({
 		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'
 		}
-	}); 
+	});
 }
 
 //respond to an action event
@@ -71,9 +71,9 @@ function getMessage( m )
 	var message = m; //JSON.parse(m);
 	var action = message.action;
 	var data = message.data;
-	
+
 	//console.log('<-- ' + action);
-	
+
 	switch (action)
 	{
 		case 'roomAccept':
@@ -81,76 +81,76 @@ function getMessage( m )
 			//(this is a bit of unnessary back and forth but that's okay for now)
 			sendAction('initializeMe', null);
 			break;
-			
+
 		case 'roomDeny':
 			//this doesn't happen yet
 			break;
-			
+
 		case 'moveCard':
-                        moveCard($("#" + data.id), data.position);
+						moveCard($("#" + data.id), data.position);
 			break;
-			
+
 		case 'initCards':
 			initCards(data);
 			break;
-		
+
 		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':
 			$("#" + data.id).fadeOut(500,
 				function() {$(this).remove();}
 			);
 			break;
-			
+
 		case	'editCard':
 			$("#" + data.id).children('.content:first').text(data.value);
 			break;
-			
+
 		case 'initColumns':
 			initColumns(data);
 			break;
-			
+
 		case 'updateColumns':
 			initColumns(data);
 			break;
-			
+
 		case 'changeTheme':
 			changeThemeTo(data);
 			break;
-		
+
 		case 'join-announce':
 			displayUserJoined(data.sid, data.user_name);
 			break;
-			
+
 		case 'leave-announce':
 			displayUserLeft(data.sid);
 			break;
-			
+
 		case 'initialUsers':
 			displayInitialUsers(data);
 			break;
-			
+
 		case 'nameChangeAnnounce':
 			updateName( message.data.sid, message.data.user_name );
 			break;
-			
+
 		case 'addSticker':
 			addSticker( message.data.cardId, message.data.stickerId );
 			break;
-			
+
 		case 'setBoardSize':
 			resizeBoard( message.data );
 			break;
-			
+
 		default:
 			//unknown message
 			alert('unknown action: ' + JSON.stringify(message));
 			break;
 	}
-	
+
 
 }
 
@@ -161,16 +161,19 @@ $(document).bind('keyup', function(event) {
 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
 	//Draggable has a bug which prevents blur event
 	//http://bugs.jqueryui.com/ticket/4261
@@ -178,12 +181,12 @@ function drawNewCard(id, text, x, y, rot, colour, sticker, animationspeed)
 	//we click on a card
 	//The following doesn't work so we will do the bug
 	//fix recommended in the above bug report
-	// card.click( function() { 
+	// card.click( function() {
 	// 	$(this).focus();
 	// } );
-	
+
 	card.draggable(
-		{ 
+		{
 			snap: false,
 			snapTolerance: 5,
 			containment: [0,0,2000,2000],
@@ -197,7 +200,7 @@ function drawNewCard(id, text, x, y, rot, colour, sticker, animationspeed)
 					return false;
 				}
 			}
-	 	}
+		}
 	);
 
 	//After a drag:
@@ -212,41 +215,45 @@ function drawNewCard(id, text, x, y, rot, colour, sticker, animationspeed)
 			position: ui.position,
 			oldposition: ui.originalPosition,
 		};
-		
+
 		sendAction('moveCard', data);
 	});
-	
+
 	card.children(".droppable").droppable(
-		{ 
+		{
 			accept: '.sticker',
 			drop: function( event, ui ) {
 							var stickerId = ui.draggable.attr("id");
 							var cardId = $(this).parent().attr('id');
-							
+
 							addSticker( cardId, stickerId );
-							
+
 							var data = { cardId: cardId, stickerId: stickerId };
 							sendAction('addSticker', data);
-							
+
 							//remove hover state to everything on the board to prevent
 							//a jquery bug where it gets left around
 							$('.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",
-		top: y + "px" 
+		top: y + "px"
 	}, speed);
-	
+
-	card.hover( 
+	card.hover(
-		function(){ 
+		function(){
 			$(this).addClass('hover');
 			$(this).children('.card-icon').fadeIn(10);
 		},
@@ -255,7 +262,7 @@ function drawNewCard(id, text, x, y, rot, colour, sticker, animationspeed)
 			$(this).children('.card-icon').fadeOut(150);
 		}
 	 );
-	
+
 	card.children('.card-icon').hover(
 		function(){
 			$(this).addClass('card-icon-hover');
@@ -264,7 +271,7 @@ function drawNewCard(id, text, x, y, rot, colour, sticker, animationspeed)
 			$(this).removeClass('card-icon-hover');
 		}
 	);
-	
+
 	card.children('.delete-card-icon').click(
 		function(){
 			$("#" + id).remove();
@@ -273,12 +280,12 @@ function drawNewCard(id, text, x, y, rot, colour, sticker, animationspeed)
 		}
 	);
 
-	card.children('.content').editable(function(value, settings) { 
+	card.children('.content').editable(function(value, settings) {
 		onCardChange( id, value );
 		return(value);
-	}, { 
+	}, {
 		type    : 'textarea',
-	    submit  : 'OK',
+		submit  : 'OK',
 		style   : 'inherit',
 		cssclass   : 'card-edit-form',
 		type      : 'textarea',
@@ -286,7 +293,7 @@ function drawNewCard(id, text, x, y, rot, colour, sticker, animationspeed)
 		onblur: 'submit',
 		event: 'dblclick', //event: 'mouseover'
 	});
-	
+
 	//add applicable sticker
 	if (sticker != null)
 		$("#" + id).children('.content').addClass( sticker );
@@ -294,22 +301,22 @@ function drawNewCard(id, text, x, y, rot, colour, sticker, animationspeed)
 
 
 function onCardChange( id, text )
-{	
+{
 	sendAction('editCard', { id: id, value: text });
 }
 
 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 )
 {
-	
+
 	cardContent = $('#' + cardId).children('.content');
-	
+
 	cardContent.removeClass("sticker-red");
 	cardContent.removeClass("sticker-blue");
 	cardContent.removeClass("sticker-green");
@@ -333,9 +340,9 @@ function addSticker ( cardId , stickerId )
 function createCard( id, text, x, y, rot, colour )
 {
 	drawNewCard(id, text, x, y, rot, colour, null);
-	
+
 	var action = "createCard";
-	
+
 	var data = {
 		id: id,
 		text: text,
@@ -344,17 +351,17 @@ function createCard( id, text, x, y, rot, colour )
 		rot: rot,
 		colour: colour
 	};
-	
+
 	sendAction(action, data);
-	
+
 }
 
 function randomCardColour()
 {
 	var colours = ['yellow', 'green', 'blue', 'white'];
-	
+
 	var i = Math.floor(Math.random() * colours.length);
-	
+
 	return colours[i];
 }
 
@@ -363,13 +370,13 @@ function initCards( cardArray )
 {
 	//first delete any cards that exist
 	$('.card').remove();
-	
+
 	cards = cardArray;
-	
+
 	for (i in cardArray)
 	{
 		card = cardArray[i];
-		
+
 		drawNewCard(
 			card.id,
 			card.text,
@@ -391,19 +398,19 @@ function initCards( cardArray )
 //----------------------------------
 
 function drawNewColumn (columnName)
-{	
+{
 	var cls = "col";
 	if (totalcolumns == 0)
 	{
 		cls = "col first";
 	}
-	
+
 	$('#icon-col').before('<td class="' + cls + '" width="10%" style="display:none"><h2 id="col-' + (totalcolumns+1) + '" class="editable">' + columnName + '</h2></td>');
 
-	$('.editable').editable(function(value, settings) { 
+	$('.editable').editable(function(value, settings) {
 		onColumnChange( this.id, value );
 		return(value);
-	}, { 
+	}, {
 		style   : 'inherit',
 		cssclass   : 'card-edit-form',
 		type      : 'textarea',
@@ -414,9 +421,9 @@ function drawNewColumn (columnName)
 		xindicator: '<img src="/images/ajax-loader.gif">',
 		event: 'dblclick', //event: 'mouseover'
 	});
-	
+
 	$('.col:last').fadeIn(1500);
-	
+
 	totalcolumns ++;
 }
 
@@ -438,63 +445,63 @@ function onColumnChange( id, text )
 		}
 		else
 		{
-			names.push( $(this).text() );	
+			names.push( $(this).text() );
 		}
-		
+
 	});
-	
+
 	updateColumns(names);
 }
 
 function displayRemoveColumn()
 {
 	if (totalcolumns <= 0) return false;
-	
+
 	$('.col:last').fadeOut( 150,
 		function() {
 			$(this).remove();
 		}
 	);
-	
+
 	totalcolumns --;
 }
 
 function createColumn( name )
 {
 	if (totalcolumns >= 8) return false;
-	
+
 	drawNewColumn( name );
 	columns.push(name);
-	
+
 	var action = "updateColumns";
-	
+
 	var data = columns;
-	
+
 	sendAction(action, data);
 }
 
 function deleteColumn()
 {
 	if (totalcolumns <= 0) return false;
-	
+
 	displayRemoveColumn();
 	columns.pop();
-	
+
 	var action = "updateColumns";
-	
+
 	var data = columns;
-	
+
 	sendAction(action, data);
 }
 
 function updateColumns( c )
 {
 	columns = c;
-	
+
 	var action = "updateColumns";
-	
+
 	var data = columns;
-	
+
 	sendAction(action, data);
 }
 
@@ -508,9 +515,9 @@ function initColumns( columnArray )
 {
 	totalcolumns = 0;
 	columns = columnArray;
-	
+
 	$('.col').remove();
-	
+
 	for (i in columnArray)
 	{
 		column = columnArray[i];
@@ -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);
-    }
+	}
   }
 }
 
@@ -562,7 +569,7 @@ for (i=0;i<ARRcookies.length;i++)
 function setName( name )
 {
 	sendAction( 'setUserName', name );
-	
+
 	setCookie('scrumscrum-username', name, 365);
 }
 
@@ -582,8 +589,8 @@ function displayUserJoined ( sid, user_name )
 		name = user_name;
 	else
 		name = sid.substring(0,5);
-		
+
-	
+
 	$('#names-ul').append('<li id="user-' + sid + '">' + name + '</li>')
 }
 
@@ -594,9 +601,9 @@ function displayUserLeft ( sid )
 		name = user_name;
 	else
 		name = sid;
-		
+
 	var id = '#user-' + sid.toString();
-		
+
 	$('#names-ul').children(id).fadeOut( 1000 , function() {
 		$(this).remove();
 	});
@@ -606,7 +613,7 @@ function displayUserLeft ( sid )
 function updateName ( sid, name )
 {
 	var id = '#user-' + sid.toString();
-	
+
 	$('#names-ul').children(id).text( name );
 }
 
@@ -615,13 +622,13 @@ function updateName ( sid, name )
 
 function boardResizeHappened(event, ui)
 {
-	var newsize = ui.size	
+	var newsize = ui.size
 
 	sendAction( 'setBoardSize', newsize);
 }
 
 function resizeBoard (size) {
-	$( ".board-outline" ).animate( { 
+	$( ".board-outline" ).animate( {
 		height: size.height,
 		width: size.width
 	} );
@@ -630,21 +637,21 @@ function resizeBoard (size) {
 //////////////////////////////////////////////////////////
 
 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
 //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) {
@@ -690,11 +697,11 @@ function adjustCard(offsets, doSync) {
 //////////////////////////////////////////////////////////
 
 $(function() {
-	
+
 	if (boardInitialized == false)
 		blockUI('<img src="/images/ajax-loader.gif" width=43 height=11/>');
 
-	//setTimeout($.unblockUI, 2000); 
+	//setTimeout($.unblockUI, 2000);
 
 
 	$( "#create-card" )
@@ -702,17 +709,17 @@ $(function() {
 			var rotation = Math.random() * 10 - 5; //add a bit of random rotation (+/- 10deg)
 			uniqueID = Math.round(Math.random()*99999999); //is this big enough to assure uniqueness?
 			//alert(uniqueID);
-			createCard( 
+			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());
 		});
-		
+
-		
+
-		
+
-		
+
 	// Style changer
 	$("#smallify").click(function(){
 		if (currentTheme == "bigcards")
@@ -727,16 +734,16 @@ $(function() {
 		{
 			currentTheme = "bigcards";
 			$("link[title=cardsize]").attr("href", "css/bigcards.css");
-		}*/		
+		}*/
-		
+
 		sendAction('changeTheme', currentTheme);
-		
+
-	
+
 		return false;
 	});
-		
+
-		
+
-	
+
 	$('#icon-col').hover(
 		function() {
 			$('.col-icon').fadeIn(10);
@@ -745,58 +752,58 @@ $(function() {
 			$('.col-icon').fadeOut(150);
 		}
 	);
-	
+
 	$('#add-col').click(
 		function(){
 			createColumn('New');
 			return false;
 		}
 	);
-	
+
 	$('#delete-col').click(
 		function(){
 			deleteColumn();
 			return false;
 		}
 	);
-	
+
-	
+
-	// $('#cog-button').click( function(){ 
+	// $('#cog-button').click( function(){
-	// 	$('#config-dropdown').fadeToggle(); 
+	// 	$('#config-dropdown').fadeToggle();
 	// } );
-	
+
-	// $('#config-dropdown').hover( 
+	// $('#config-dropdown').hover(
 	// 	function(){ /*$('#config-dropdown').fadeIn()*/ },
-	// 	function(){ $('#config-dropdown').fadeOut() } 
+	// 	function(){ $('#config-dropdown').fadeOut() }
 	// );
-	// 
+	//
-	
+
 	var user_name = getCookie('scrumscrum-username');
-	
+
-	
+
-	
+
 	$("#yourname-input").focus(function()
    {
-       if ($(this).val() == 'unknown')
+	   if ($(this).val() == 'unknown')
-       {
+	   {
 				$(this).val("");
-       }
+	   }
-		
+
 		$(this).addClass('focused');
 
    });
-   
+
    $("#yourname-input").blur(function()
    {
 		if ($(this).val() == "")
 		{
-		    $(this).val('unknown');
+			$(this).val('unknown');
 		}
 		$(this).removeClass('focused');
-		
+
 		setName($(this).val());
    });
-   
+
 	$("#yourname-input").val(user_name);
    $("#yourname-input").blur();
 
@@ -804,22 +811,22 @@ $(function() {
 
 	$("#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();
 		}
-    });
+	});
 
 
 
-$( ".sticker" ).draggable({ 
+$( ".sticker" ).draggable({
 	revert: true,
 	zIndex: 1000
 });
 
 
-$( ".board-outline" ).resizable( { 
+$( ".board-outline" ).resizable( {
 	ghost: false,
 	minWidth: 700,
 	minHeight: 400 ,
@@ -829,18 +836,18 @@ $( ".board-outline" ).resizable( {
 
 //A new scope for precalculating
 (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) {
-                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);
-        });
+		});
 })();
 
 
@@ -860,18 +867,7 @@ $('#eraser').draggable(
 );
 
 //disable image dragging
-window.ondragstart = function() { return false; } 
+window.ondragstart = function() { return false; }
 
 
 });
-
-
-
-
-
-
-
-
-
-
-