Added option to set background color/image to editor (issue 39)

git-svn-id: http://svg-edit.googlecode.com/svn/trunk@869 eee81c28-f429-11dd-99c0-75d572ba1ddd

editor/svg-editor.css

@@ -261,11 +261,6 @@ body {
 	stroke: none;
 }
 
-/* TODO: fix this */
-div.color_block {
-	background-image: url('images/none.png');
-	display: inline-block;
-}
 
 #svg_editor #selected_panel,
 #svg_editor #multiselected_panel,
@@ -586,11 +581,26 @@ span.zoom_tool {
 	padding-left: 20px;
 }
 
-#svg_docprops_container #tool_docprops_back div {
+#svg_docprops_container div.color_block {
-	text-align: left;
+	float: left;
+	margin: 2px;
 	padding: 20px;
 }
 
+#change_background div.cur_background {
+	border: 2px solid blue;
+	padding: 18px;
+}
+
+#change_background input {
+	color: #888;
+}
+
+#change_background input.cur_background {
+	border: 2px solid blue;
+	color: #000;
+}
+
 #svg_source_editor button, #svg_docprops button {
 	padding: 5px 5px 7px 28px;
 	margin: 5px 20px 0 0;	

editor/svg-editor.html

@@ -367,8 +367,9 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
 
 
 			<fieldset id="change_background">
-				<legend id="svginfo_change_background">Canvas Background</legend>
+				<legend id="svginfo_change_background">Editor Background</legend>
-					<div id="bkgnd_color" class="color_block"  title="Change background color/opacity"></div>
+				<div id="bg_blocks"></div>
+				<label><span id="svginfo_bg_url">URL:</span> <input type="text" id="canvas_bg_url" size="17"></label>
 			</fieldset>
 			
 			<fieldset id="change_resolution">

editor/svg-editor.js

@@ -322,8 +322,6 @@ function svg_edit_setup() {
 	$('#text').focus( function(){ textBeingEntered = true; } );
 	$('#text').blur( function(){ textBeingEntered = false; } );
   
-  
-  
 	// bind the selected event to our function that handles updates to the UI
 	svgCanvas.bind("selected", selectedChanged);
 	svgCanvas.bind("changed", elementChanged);
@@ -336,6 +334,28 @@ function svg_edit_setup() {
 	});
 	$('#palette').append(str);
 	
+	// Set up editor background functionality
+	var color_blocks = ['#FFF','#888','#000','url(data:image/gif;base64,R0lGODlhEAAQAIAAAP%2F%2F%2F9bW1iH5BAAAAAAALAAAAAAQABAAAAIfjG%2Bgq4jM3IFLJgpswNly%2FXkcBpIiVaInlLJr9FZWAQA7)'];
+	var str = '';
+	$.each(color_blocks, function() {
+		str += '<div class="color_block" style="background:' + this + ';"></div>';
+	});
+	$('#bg_blocks').append(str);
+	var blocks = $('#bg_blocks div');
+	var cur_bg = 'cur_background';
+	blocks.each(function() {
+		var blk = $(this);
+		blk.click(function() {
+			blocks.removeClass(cur_bg);
+			$(this).addClass(cur_bg);
+			$('#canvas_bg_url').removeClass(cur_bg);
+		});
+	});
+	$('#canvas_bg_url').focus(function() {
+		blocks.removeClass(cur_bg);
+		$(this).addClass(cur_bg);
+	});
+
 	var pos = $('#tools_rect_show').position();
 	$('#tools_rect').css({'left': pos.left+4, 'top': pos.top+77});
 	pos = $('#tools_ellipse_show').position();
@@ -835,7 +855,24 @@ function svg_edit_setup() {
 		var res = svgCanvas.getResolution();
 		$('#canvas_width').val(res.w);
 		$('#canvas_height').val(res.h);
-		$('#canvas_title').val(svgCanvas.getImageTitle())
+		$('#canvas_title').val(svgCanvas.getImageTitle());
+		
+		// Update background color with current one
+		var blocks = $('#bg_blocks div');
+		var cur_bg = 'cur_background';
+		var canvas_bg = $('#svgcanvas').css('background');
+		var url = canvas_bg.match(/url\("?(.*?)"?\)/);
+		if(url) url = url[1];
+		blocks.each(function() {
+			var blk = $(this);
+			var is_bg = blk.css('background') == canvas_bg;
+			blk.toggleClass(cur_bg, is_bg);
+			if(is_bg) $('#canvas_bg_url').removeClass(cur_bg);
+		});
+		if(!canvas_bg) blocks.eq(0).addClass(cur_bg);
+		if(!$('#bg_blocks .' + cur_bg).length && url) {
+			$('#canvas_bg_url').val(url);
+		}
 		
 		$('#svg_docprops').fadeIn();
 	};
@@ -874,6 +911,19 @@ function svg_edit_setup() {
 			alert('No content to fit to');
 			return false;
 		}
+		
+		// set background
+		var new_bg, bg_url = $('#canvas_bg_url').val();
+		var bg_blk = $('#bg_blocks div.cur_background');
+		if(bg_blk.length) {
+			new_bg = bg_blk.css('background');
+		} else if(bg_url) {
+			new_bg = '#FFF url("' + bg_url + '") no-repeat';
+		} else {
+			new_bg = '#FFF';
+		}
+		$('#svgcanvas').css('background',new_bg);
+		
 		hideDocProperties();
 	};