zcy
/
svgedit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
master
Alexis Deveria 2009-10-22 14:56:09 +00:00
parent 5984c2643c
commit ff41dea34a
3 changed files with 74 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
editor/svg-editor.css
View File

@ -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 {
text-align: left;
#svg_docprops_container div.color_block {
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;

5
editor/svg-editor.html
View File

@ -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>
<div id="bkgnd_color" class="color_block" title="Change background color/opacity"></div>
<legend id="svginfo_change_background">Editor Background</legend>
<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">

56
editor/svg-editor.js
View File

@ -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();
};