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

Made Open button icon scale by optimizing file opening code 

git-svn-id: http://svg-edit.googlecode.com/svn/trunk@1198 eee81c28-f429-11dd-99c0-75d572ba1ddd
master
Alexis Deveria 2010-01-12 14:50:10 +00:00
parent 5bd91643bd
commit f51f2ea13f
3 changed files with 35 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
editor/svg-editor.css
View File

@ -442,6 +442,7 @@ span.zoom_tool {
cursor: pointer;
}
/*
div.fileinputs {
position: relative;
}
@ -460,9 +461,11 @@ div.fileinputs svg {
z-index: 2;
cursor: pointer;
}
*/
/* the file input control is placed on top but made invisible */
/* TODO: is moz-opacity really needed? filter? */
/*
input.file {
position: relative;
text-align: right;
@ -470,6 +473,23 @@ input.file {
filter:alpha(opacity: 0);
opacity: 0;
}
*/
#fileinputs {
position: relative;
overflow: hidden;
}
#fileinputs input {
-moz-transform: scale(2.0); /* Not entirely necessary, but keeps it nice and big for OS X*/
height: 100%;
position: absolute;
opacity: 0;
top: -3px;
right: 10px;
margin: 0;
cursor: pointer; /* Sadly doesn't appear to have an effect */
}
#svg_editor .tool_button_current,
#svg_editor .push_button_pressed {

6
editor/svg-editor.html
View File

@ -85,10 +85,8 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
<div id="file_panel">
<div class="push_button" id="tool_clear" title="New Image [N]"></div>
<div id="fileinputs" class="fileinputs push_button" style="display: none">
<div class="fakefile">
<div id="tool_open" title="Open Image [O]" ></div>
</div>
<div id="fileinputs" class="push_button">
<div id="tool_open" title="Open Image [O]" ></div>
</div>
<div class="push_button" id="tool_save" title="Save Image [S]"></div>

40
editor/svg-editor.js
View File

@ -1211,7 +1211,7 @@ function svg_edit_setup() {
var size_num = icon_sizes[size];
// Change icon size
$('.tool_button, .push_button, .tool_button_current, .tool_button_disabled, .tool_flyout_button, #url_notice, #fileinputs, #tool_open')
$('.tool_button, .push_button, .tool_button_current, .tool_button_disabled, .tool_flyout_button, #url_notice, #tool_open')
.find('> svg, > img').each(function() {
this.setAttribute('width',size_num);
this.setAttribute('height',size_num);
@ -2218,33 +2218,19 @@ function svg_edit_setup() {
// svgCanvas.open() will fire the 'opened' handler back here,
// which is file_open here
if (window.FileReader) {
$("#fileinputs").show();
var fi = document.getElementById("fileinputs");
var svgns = "http://www.w3.org/2000/svg";
// we dynamically create an SVG with a foreignObject with a file input
// then we stretch and clip that file input so that it takes up exactly 24x24
// this is all thanks to there being no other way to bring up a file picker :(
// until Mozilla Bug 36619 is fixed, this is the only way I know how to do it
// TODO: fix this for when icon size is changed
var fi_holder = document.createElementNS(svgns, "svg");
fi_holder.setAttribute("viewBox", "0 0 24 24");
fi_holder.setAttribute("className", "svg_icon");
var fo = document.createElementNS(svgns, "foreignObject");
fo.setAttribute("width", "100%");
fo.setAttribute("height", "100%");
fo.setAttribute("transform", "translate(-5,-30) scale(3)");
var input = document.createElementNS("http://www.w3.org/1999/xhtml", "input");
input.setAttribute("type", "file");
input.setAttribute("onchange", "if(this.files.length==1) { \
var reader = new FileReader(); \
reader.onloadend = function(e) {console.log(e.target.result); svgCanvas.open(e.target.result);}; \
reader.readAsText(this.files[0]);}");
input.className = "file";
fo.appendChild(input);
fi_holder.appendChild(fo);
fi.insertBefore(fi_holder, fi.firstChild);
var inp = $('<input type="file">').change(function() {
if(this.files.length==1) {
var reader = new FileReader();
reader.onloadend = function(e) {
console.log(e.target.result);
svgCanvas.open(e.target.result);
};
reader.readAsText(this.files[0]);
}
});
$("#fileinputs").show().prepend(inp);
// This doesn't appear to be necessary...
svgCanvas.setCustomHandlers( {open: fileOpen} );
}