Merge remote-tracking branch 'remotes/origin/resize_board'

client/css/style.css

@@ -18,9 +18,9 @@ body {
 	position: relative;
 	background-color: #dcd5d1;
 	
-	height: 450px;
-	width: 980px;
-	border: solid silver 8px;
+	height: 100%;
+	xwidth: 980px;
+	xborder: solid silver 8px;
 	
 	background-image: -webkit-gradient(
 	    linear,
@@ -38,7 +38,8 @@ body {
 }
 
 .board-outline {
-	border: solid #ccc 1px;
+	border: solid #ccc 8px;
+	display: block;
 	width: 996px;
 	height: 466px;
 	
@@ -464,3 +465,48 @@ input:hover {
 .notice-bar a {
 	color: #333;
 }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+/* states and images */
+.ui-icon { width: 16px; height: 16px; background-image: url(images/ui-icons_222222_256x240.png); }
+.ui-widget-content .ui-icon {background-image: url(images/ui-icons_222222_256x240.png); }
+.ui-widget-header .ui-icon {background-image: url(images/ui-icons_222222_256x240.png); }
+.ui-state-default .ui-icon { background-image: url(images/ui-icons_888888_256x240.png); }
+.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {background-image: url(images/ui-icons_454545_256x240.png); }
+.ui-state-active .ui-icon {background-image: url(images/ui-icons_454545_256x240.png); }
+.ui-state-highlight .ui-icon {background-image: url(images/ui-icons_2e83ff_256x240.png); }
+.ui-state-error .ui-icon, .ui-state-error-text .ui-icon {background-image: url(images/ui-icons_cd0a0a_256x240.png); }
+
+
+.ui-resizable { position: relative;}
+.ui-resizable-handle { position: absolute;font-size: 0.1px;z-index: 99999; display: block;}
+.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; }
+.ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0; }
+.ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0; }
+.ui-resizable-e { cursor: e-resize; width: 7px; right: -5px; top: 0; height: 100%; }
+.ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0; height: 100%; }
+.ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px; bottom: 1px; }
+.ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: -5px; bottom: -5px; }
+.ui-resizable-nw { cursor: nw-resize; width: 9px; height: 9px; left: -5px; top: -5px; }
+.ui-resizable-ne { cursor: ne-resize; width: 9px; height: 9px; right: -5px; top: -5px;}
+
+.ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; }
+

client/script.js

@@ -119,6 +119,10 @@ function getMessage( m )
 			addSticker( message.data.cardId, message.data.stickerId );
 			break;
 			
+		case 'setBoardSize':
+			resizeBoard( message.data );
+			break;
+			
 		default:
 			//unknown message
 			alert('unknown action: ' + JSON.stringify(message));
@@ -533,6 +537,23 @@ function updateName ( sid, name )
 	
 	$('#names-ul').children(id).text( name );
 }
+
+//////////////////////////////////////////////////////////
+//////////////////////////////////////////////////////////
+
+function boardResizeHappened(event, ui)
+{
+	var newsize = ui.size
+	
+	sendAction( 'setBoardSize', newsize);
+}
+
+function resizeBoard (size) {
+	$( ".board-outline" ).animate( { 
+		height: size.height,
+		width: size.width
+	} );
+}
 //////////////////////////////////////////////////////////
 //////////////////////////////////////////////////////////
 
@@ -661,21 +682,19 @@ $( ".sticker" ).draggable({
 });
 
 
-	// //After a drag:
-	// $( "#" + id ).bind( "dragstop", function(event, ui) {
-	// 	var data = {
-	// 		id: this.id,
-	// 		position: ui.position,
-	// 		oldposition: ui.originalPosition,
-	// 	};
-	// 
-	// 	sendAction('moveCard', data);
-	// });
+$( ".board-outline" ).resizable( { 
+	ghost: false,
+	minWidth: 700,
+	minHeight: 400 ,
+	maxWidth: 3200,
+	maxHeight: 1800,
+	stop: function(event, ui) { 
+		boardResizeHappened(event, ui);
+	}
+} );
 
 
 	
-
-	
 });
 
 

lib/data/redis.js

@@ -9,9 +9,6 @@ var async = require("async");
 // var MemoryStore = require('connect/middleware/session/memory');
 // var session_store = new MemoryStore();
 
-var   RedisStore = require('connect-redis');
-var   session_store = new RedisStore( );
-
 var REDIS_PREFIX = '#scrumblr#';
 
 //For Redis Debugging
@@ -149,6 +146,17 @@ db.prototype = {
 				redisClient.hset(REDIS_PREFIX + '-room:' + room + '-cards', cardId, JSON.stringify(card));
 			}
 		});
+	},
+	
+	setBoardSize: function(room, size) {
+		redisClient.set(REDIS_PREFIX + '-room:' + room + '-size', JSON.stringify(size));
+	},
+	
+	getBoardSize: function(room, callback) {
+		redisClient.get(REDIS_PREFIX + '-room:' + room + '-size', function (err, res) {
+			callback(JSON.parse(res));
+		});	
 	}
+	
 };
 exports.db = db;

server.js

@@ -287,6 +287,19 @@ function scrub( text ) {
 
 				broadcastToRoom( client, { action: 'addSticker', data: { cardId: cardId, stickerId: stickerId }});
 				break;
+				
+			case 'setBoardSize':
+
+				var size = {};
+				size.width = scrub(message.data.width);;
+				size.height = scrub(message.data.height);
+				
+				getRoom(client, function(room) {
+					db.setBoardSize( room, size );
+				});
+				
+				broadcastToRoom( client, { action: 'setBoardSize', data: size } );
+				break;
 
 			default:
 				console.log('unknown action');
@@ -346,6 +359,18 @@ function initClient ( client )
 				}
 			);
 		});
+		
+		db.getBoardSize( room, function(size) {
+
+			if (size != null) {
+				client.send(
+					{
+						action: 'setBoardSize',
+						data: size
+					}
+				);
+			}
+		});
 
 		roommates_clients = rooms.room_clients(room);
 		roommates = [];

views/index.jade

@@ -60,5 +60,4 @@ div.names
 
 //<div style="width: 980px; height: 450px; border: solid 2px; opacity:.1; margin-top: 100px"> this will be the backlog that only appears on drag or perhaps not at all</div>
 
-
 <script type="text/javascript">	  var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-2069672-4']);  _gaq.push(['_trackPageview']);   (function() {    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);  })(); </script>