From 7fdbeec80081a058f6cc685c1518ffcae4247c4a Mon Sep 17 00:00:00 2001
From: ali asaria <ali@tulip>
Date: Sun, 17 Aug 2014 20:30:25 -0400
Subject: [PATCH] fix problems with editing cards and columns that were created
 in previous change

---
 client/css/style.css | 24 ++++++++++---
 client/script.js     | 86 ++++++++++++++++++++------------------------
 views/index.jade     |  9 +++--
 views/layout.jade    |  2 ++
 4 files changed, 66 insertions(+), 55 deletions(-)

diff --git a/client/css/style.css b/client/css/style.css
index ea8b2b0..bc4d885 100644
--- a/client/css/style.css
+++ b/client/css/style.css
@@ -165,14 +165,22 @@ h2 {
 	
 .bottom-icon {
 	padding: 5px;
-	opacity: .3;
+	opacity: .4;
 }
 
 .bottom-icon:hover {
 	padding: 5px;
+	opacity: .6;
+}
+
+.faded-icon {
 	opacity: .4;
 }
 
+.faded-icon:hover {
+	opacity: .6;
+}
+
 #add-col {
 	position: absolute; right: 3px; top: 200px; display: none; opacity: .15;
 }
@@ -496,11 +504,17 @@ input:hover {
 	background-color: rgba(128, 128, 256,0.1)
 }
 
+.config {
+	position: fixed;
+	right: 18px;
+	top: 4px;
+}
 
-
-
-
-
+.trash {
+	position: fixed;
+	right: 18px;
+	bottom: 4px;
+}
 
 
 
diff --git a/client/script.js b/client/script.js
index b4d1f8a..3c025a5 100644
--- a/client/script.js
+++ b/client/script.js
@@ -272,19 +272,20 @@ function drawNewCard(id, text, x, y, rot, colour, sticker, animationspeed)
 			sendAction( 'deleteCard' , { 'id': id });
 		}
 	);
-	
-	card.children('.content').editable( "/edit-card/" + id,
-		{
-			style   : 'inherit',
-			cssclass   : 'card-edit-form',
-			type      : 'textarea',
-			placeholder   : 'Double Click to Edit.',
-			onblur: 'submit',
-			xindicator: '<img src="/images/ajax-loader.gif">',
-			event: 'dblclick', //event: 'mouseover'
-			callback: onCardChange
-		}
-	);
+
+	card.children('.content').editable(function(value, settings) { 
+		onCardChange( id, value );
+		return(value);
+	}, { 
+		type    : 'textarea',
+	    submit  : 'OK',
+		style   : 'inherit',
+		cssclass   : 'card-edit-form',
+		type      : 'textarea',
+		placeholder   : 'Double Click to Edit.',
+		onblur: 'submit',
+		event: 'dblclick', //event: 'mouseover'
+	});
 	
 	//add applicable sticker
 	if (sticker != null)
@@ -292,15 +293,9 @@ function drawNewCard(id, text, x, y, rot, colour, sticker, animationspeed)
 }
 
 
-function onCardChange( text, result )
-{
-	var path = result.target;
-	//e.g. /edit-card/card46156244
-	var id = path.slice(11);
-	
+function onCardChange( id, text )
+{	
 	sendAction('editCard', { id: id, value: text });
-	
-	
 }
 
 function moveCard(card, position) {
@@ -395,7 +390,6 @@ function initCards( cardArray )
 // cols
 //----------------------------------
 
-
 function drawNewColumn (columnName)
 {	
 	var cls = "col";
@@ -404,42 +398,42 @@ function drawNewColumn (columnName)
 		cls = "col first";
 	}
 	
-	$('#icon-col').before('<td class="' + cls + '" width="10%" style="display:none"><h2 id="col1" class="editable">' + columnName + '</h2></td>');
-	
-	$('.editable').editable( "/edit-column",
-		{
-			style   : 'inherit',
-			cssclass   : 'card-edit-form',
-			type      : 'textarea',
-			placeholder   : 'New',
-			onblur: 'submit',
-			width: '',
-			height: '',
-			xindicator: '<img src="/images/ajax-loader.gif">',
-			event: 'dblclick', //event: 'mouseover'
-			callback: onColumnChange
-		}
-	);
+	console.log(totalcolumns);
+
+	$('#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) { 
+		onColumnChange( this.id, value );
+		return(value);
+	}, { 
+		style   : 'inherit',
+		cssclass   : 'card-edit-form',
+		type      : 'textarea',
+		placeholder   : 'New',
+		onblur: 'submit',
+		width: '',
+		height: '',
+		xindicator: '<img src="/images/ajax-loader.gif">',
+		event: 'dblclick', //event: 'mouseover'
+	});
 	
 	$('.col:last').fadeIn(1500);
 	
 	totalcolumns ++;
 }
 
-function onColumnChange( text, settings )
+function onColumnChange( id, text )
 {
 	var names = Array();
-	
-	//Get the names of all the columns
+
+	//Get the names of all the columns right from the DOM (ignore what was sent in function)
 	$('.col').each(function() {
 		names.push(
 			$(this).text()
-			);
+		);
 	});
 	
 	updateColumns(names);
-	
-	
 }
 
 function displayRemoveColumn()
@@ -515,13 +509,9 @@ function initColumns( columnArray )
 			column
 		);
 	}
-
-
 }
 
 
-
-
 function changeThemeTo( theme )
 {
 	currentTheme = theme;
diff --git a/views/index.jade b/views/index.jade
index bae2084..1f95b59 100644
--- a/views/index.jade
+++ b/views/index.jade
@@ -4,6 +4,9 @@ block body
 	- if (locals.demo)
 		div.notice-bar this is a demo board. to make a private board, go to <a href="http://scrumblr.ca">scrumblr.ca</a>
 
+	//div.config
+	//	i.fa.fa-cog.fa-lg.faded-icon
+
 	h1 <a href="http://scrumblr.ca">scrumblr</a> by <a href="http://aliasaria.ca">aliasaria</a>
 
 	div.board-outline
@@ -21,8 +24,8 @@ block body
 
 
 	div.buttons
-		image#create-card.bottom-icon(width='24', height='24', src='/images/icons/iconic/raster/black/plus_alt_24x24.png')
-		image#smallify.bottom-icon(width="23",height="23",src="/images/icons/cc/black/png/zoom_icon&24.png")
+		i#create-card.fa.fa-plus-circle.fa-2x.bottom-icon
+		i#smallify.fa.fa-expand.fa-2x.bottom-icon
 
 
 	div.stickers
@@ -64,6 +67,8 @@ block body
 		span.you-text (you)
 		ul#names-ul
 
+	//div.trash
+	//	i.fa.fa-trash-o.fa-lg.faded-icon
 
 	//<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>
 
diff --git a/views/layout.jade b/views/layout.jade
index c63fa9b..2f32709 100644
--- a/views/layout.jade
+++ b/views/layout.jade
@@ -18,6 +18,8 @@ html(lang="en")
 		<script src="/lib/jquery.blockUI.js"></script> 
 
 		<!-- STYLES -->
+		<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
+
 		<link rel="stylesheet" type="text/css" href="/css/style.css" />
 		<link rel="stylesheet" title="cardsize" href="/css/bigcards.css" type="text/css" media="all" />