Replaced modal dialog boxes with HTML ones, fixed issue 335 and other minor image bugs
git-svn-id: http://svg-edit.googlecode.com/svn/trunk@955 eee81c28-f429-11dd-99c0-75d572ba1dddmaster
Alexis Deveria
parent
75dffc0d2f
commit
383ef4a290
|
|
@ -719,6 +719,66 @@ button#tool_docprops_cancel {
|
|||
height:16px;
|
||||
}
|
||||
|
||||
#dialog_box {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#dialog_box_overlay {
|
||||
background: black;
|
||||
opacity: .5;
|
||||
height:100%;
|
||||
left:0;
|
||||
position:absolute;
|
||||
top:0;
|
||||
width:100%;
|
||||
}
|
||||
|
||||
#dialog_content {
|
||||
height: 95px;
|
||||
margin: 10px 10px 5px 10px;
|
||||
background: #DDD;
|
||||
overflow: auto;
|
||||
text-align: left;
|
||||
border: 1px solid #B0B0B0;
|
||||
}
|
||||
|
||||
#dialog_content.prompt {
|
||||
height: 75px;
|
||||
}
|
||||
|
||||
#dialog_content p {
|
||||
margin: 10px;
|
||||
line-height: 1.3em;
|
||||
}
|
||||
|
||||
#dialog_container {
|
||||
position: absolute;
|
||||
font-family: Verdana;
|
||||
text-align: center;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 300px;
|
||||
margin-left: -150px;
|
||||
height: 145px;
|
||||
margin-top: -80px;
|
||||
position:fixed;
|
||||
z-index:50001;
|
||||
background: #CCC;
|
||||
border: 1px outset #777;
|
||||
font-family:Verdana,Helvetica,sans-serif;
|
||||
font-size:0.8em;
|
||||
}
|
||||
|
||||
#dialog_buttons input[type=text] {
|
||||
width: 90%;
|
||||
display: block;
|
||||
margin: 0 0 5px 11px;
|
||||
}
|
||||
|
||||
#dialog_buttons input[type=button] {
|
||||
margin: 0 1em;
|
||||
}
|
||||
|
||||
|
||||
/* Slider
|
||||
----------------------------------*/
|
||||
|
|
|
|||
|
|
@ -182,7 +182,7 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
|
|||
<input id="image_height" class="image_tool attr_changer" title="Change image height" size="3" data-attr="height"/>
|
||||
<label class="image_tool">url:</label>
|
||||
<input id="image_url" class="image_tool" type="text" title="Change URL" size="35"/>
|
||||
<button id="change_image_url" style="display:none;">Change URL</button>
|
||||
<button id="change_image_url" style="display:none;">Change Image</button>
|
||||
<div id="url_notice" title="NOTE: This image cannot be embedded. It will depend on this path to be displayed"></div>
|
||||
</div>
|
||||
|
||||
|
|
@ -438,5 +438,15 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div id="dialog_box">
|
||||
<div id="dialog_box_overlay"></div>
|
||||
<div id="dialog_container">
|
||||
<div id="dialog_content">
|
||||
Test message
|
||||
</div>
|
||||
<div id="dialog_buttons"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -78,6 +78,51 @@ function svg_edit_setup() {
|
|||
img_save:'embed'
|
||||
};
|
||||
|
||||
// This sets up alternative dialog boxes. They mostly work the same way as
|
||||
// their UI counterparts, expect instead of returning the result, a callback
|
||||
// needs to be included that returns the result as its first parameter.
|
||||
// In the future we may want to add additional types of dialog boxes, since
|
||||
// they should be easy to handle this way.
|
||||
var setDialogs = function() {
|
||||
$('#dialog_container').draggable({cancel:'#dialog_content, #dialog_buttons *'});
|
||||
var box = $('#dialog_box'), btn_holder = $('#dialog_buttons');
|
||||
|
||||
var dbox = function(type, msg, callback, defText) {
|
||||
$('#dialog_content').html('<p>'+msg.replace(/\n/g,'</p><p>')+'</p>')
|
||||
.toggleClass('prompt',(type=='prompt'));
|
||||
btn_holder.empty();
|
||||
|
||||
var ok = $('<input type="button" value="OK">').appendTo(btn_holder);
|
||||
|
||||
if(type != 'alert') {
|
||||
$('<input type="button" value="Cancel">')
|
||||
.appendTo(btn_holder)
|
||||
.click(function() { box.hide();callback(false)});
|
||||
}
|
||||
|
||||
if(type == 'prompt') {
|
||||
var input = $('<input type="text">').prependTo(btn_holder);
|
||||
input.val(defText || '');
|
||||
}
|
||||
|
||||
box.show();
|
||||
|
||||
ok.click(function() {
|
||||
box.hide();
|
||||
var resp = (type == 'prompt')?input.val():true;
|
||||
if(callback) callback(resp);
|
||||
}).focus();
|
||||
|
||||
if(type == 'prompt') input.focus();
|
||||
}
|
||||
|
||||
$.alert = function(msg, cb) { dbox('alert', msg, cb);};
|
||||
$.confirm = function(msg, cb) { dbox('confirm', msg, cb);};
|
||||
$.prompt = function(msg, txt, cb) { dbox('prompt', msg, cb, txt);};
|
||||
}
|
||||
|
||||
setDialogs();
|
||||
|
||||
var setSelectMode = function() {
|
||||
$('.tool_button_current').removeClass('tool_button_current').addClass('tool_button');
|
||||
$('#tool_select').addClass('tool_button_current');
|
||||
|
|
@ -267,14 +312,17 @@ function svg_edit_setup() {
|
|||
|
||||
// update the rect inside #fill_color
|
||||
document.getElementById("gradbox_stroke").parentNode.firstChild.setAttribute("fill", strokeColor);
|
||||
|
||||
$('#fill_opacity').html(fillOpacity);
|
||||
$('#stroke_opacity').html(strokeOpacity);
|
||||
$('#stroke_width').val(selectedElement.getAttribute("stroke-width")||1);
|
||||
$('#stroke_style').val(selectedElement.getAttribute("stroke-dasharray")||"none");
|
||||
}
|
||||
|
||||
// All elements including image and group have opacity
|
||||
if(selectedElement != null) {
|
||||
var opac_perc = ((selectedElement.getAttribute("opacity")||1.0)*100);
|
||||
$('#group_opacity').val(opac_perc);
|
||||
$('#opac_slider').slider('option', 'value', opac_perc);
|
||||
$('#stroke_width').val(selectedElement.getAttribute("stroke-width")||1);
|
||||
$('#stroke_style').val(selectedElement.getAttribute("stroke-dasharray")||"none");
|
||||
}
|
||||
|
||||
updateToolButtonState();
|
||||
|
|
@ -496,12 +544,20 @@ function svg_edit_setup() {
|
|||
$('#selLayerNames').change(function(){
|
||||
var destLayer = this.options[this.selectedIndex].value;
|
||||
var confirm_str = uiStrings.QmoveElemsToLayer.replace('%s',destLayer);
|
||||
if (destLayer && (promptMoveLayerOnce || confirm(confirm_str))) {
|
||||
var moveToLayer = function(ok) {
|
||||
if(!ok) return;
|
||||
promptMoveLayerOnce = true;
|
||||
svgCanvas.moveSelectedToLayer(destLayer);
|
||||
svgCanvas.clearSelection();
|
||||
populateLayers();
|
||||
}
|
||||
if (destLayer) {
|
||||
if(promptMoveLayerOnce) {
|
||||
moveToLayer(true);
|
||||
} else {
|
||||
$.confirm(confirm_str, moveToLayer);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$('#font_family').change(function(){
|
||||
|
|
@ -539,7 +595,7 @@ function svg_edit_setup() {
|
|||
} else valid = true;
|
||||
|
||||
if(!valid) {
|
||||
alert(uiStrings.invalidAttrValGiven);
|
||||
$.alert(uiStrings.invalidAttrValGiven);
|
||||
this.value = selectedElement.getAttribute(attr);
|
||||
return false;
|
||||
}
|
||||
|
|
@ -829,13 +885,14 @@ function svg_edit_setup() {
|
|||
}
|
||||
|
||||
var clickClear = function(){
|
||||
if( confirm(uiStrings.QwantToClear) ) {
|
||||
$.confirm(uiStrings.QwantToClear, function(ok) {
|
||||
if(!ok) return;
|
||||
svgCanvas.clear();
|
||||
svgCanvas.setResolution(640, 480);
|
||||
zoomImage();
|
||||
populateLayers();
|
||||
updateContextPanel();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
var clickBold = function(){
|
||||
|
|
@ -988,16 +1045,23 @@ function svg_edit_setup() {
|
|||
var saveSourceEditor = function(){
|
||||
if (!editingsource) return;
|
||||
|
||||
if (!svgCanvas.setSvgString($('#svg_source_textarea').val())) {
|
||||
if( !confirm(uiStrings.QerrorsRevertToSource) ) {
|
||||
return false;
|
||||
}
|
||||
var saveChanges = function() {
|
||||
svgCanvas.clearSelection();
|
||||
hideSourceEditor();
|
||||
zoomImage();
|
||||
populateLayers();
|
||||
setTitle(svgCanvas.getImageTitle());
|
||||
}
|
||||
svgCanvas.clearSelection();
|
||||
hideSourceEditor();
|
||||
zoomImage();
|
||||
populateLayers();
|
||||
setTitle(svgCanvas.getImageTitle());
|
||||
|
||||
if (!svgCanvas.setSvgString($('#svg_source_textarea').val())) {
|
||||
$.confirm(uiStrings.QerrorsRevertToSource, function(ok) {
|
||||
if(!ok) return false;
|
||||
saveChanges();
|
||||
});
|
||||
} else {
|
||||
saveChanges();
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
var setTitle = function(title) {
|
||||
|
|
@ -1019,7 +1083,7 @@ function svg_edit_setup() {
|
|||
x ='fit';
|
||||
}
|
||||
if(!svgCanvas.setResolution(x,y)) {
|
||||
alert(uiStrings.noContentToFitTo);
|
||||
$.alert(uiStrings.noContentToFitTo);
|
||||
return false;
|
||||
}
|
||||
|
||||
|
|
@ -1206,20 +1270,23 @@ function svg_edit_setup() {
|
|||
}
|
||||
|
||||
var cancelOverlays = function() {
|
||||
$('#dialog_box').hide();
|
||||
if (!editingsource && !docprops) return;
|
||||
|
||||
if (editingsource) {
|
||||
var oldString = svgCanvas.getSvgString();
|
||||
if (oldString != $('#svg_source_textarea').val()) {
|
||||
if( !confirm(uiStrings.QignoreSourceChanges) ) {
|
||||
return false;
|
||||
}
|
||||
$.confirm(uiStrings.QignoreSourceChanges, function(ok) {
|
||||
if(ok) hideSourceEditor();
|
||||
});
|
||||
} else {
|
||||
hideSourceEditor();
|
||||
}
|
||||
hideSourceEditor();
|
||||
}
|
||||
else if (docprops) {
|
||||
hideDocProperties();
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
var hideSourceEditor = function(){
|
||||
|
|
@ -1285,17 +1352,19 @@ function svg_edit_setup() {
|
|||
$('#tool_italic').mousedown(clickItalic);
|
||||
|
||||
$('#url_notice').click(function() {
|
||||
alert(this.title);
|
||||
$.alert(this.title);
|
||||
});
|
||||
|
||||
$('#change_image_url').click(promptImgURL);
|
||||
|
||||
function promptImgURL() {
|
||||
var url = prompt(uiStrings.enterNewImgURL, default_img_url);
|
||||
if(url) setImageURL(url);
|
||||
$.prompt(uiStrings.enterNewImgURL, default_img_url, function(url) {
|
||||
if(url) setImageURL(url);
|
||||
});
|
||||
}
|
||||
|
||||
function setImageURL(url) {
|
||||
if(!url) url = default_img_url;
|
||||
svgCanvas.setImageURL(url);
|
||||
$('#image_url').val(url);
|
||||
|
||||
|
|
@ -1439,7 +1508,7 @@ function svg_edit_setup() {
|
|||
});
|
||||
|
||||
$('.attr_changer, #image_url').bind('keydown', {combi:'return', disableInInput: false},
|
||||
function(evt) {console.log('now');$(this).change();evt.preventDefault();}
|
||||
function(evt) {$(this).change();evt.preventDefault();}
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -1637,17 +1706,18 @@ function svg_edit_setup() {
|
|||
j++;
|
||||
uniqName = uiStrings.layer + " " + j;
|
||||
}
|
||||
var newName = prompt(uiStrings.enterUniqueLayerName,uniqName);
|
||||
if (!newName) return;
|
||||
if ($.inArray(newName, curNames) != -1) {
|
||||
alert(uiStrings.dupeLayerName);
|
||||
return;
|
||||
}
|
||||
svgCanvas.createLayer(newName);
|
||||
updateContextPanel();
|
||||
populateLayers();
|
||||
$('#layerlist tr.layer').removeClass("layersel");
|
||||
$('#layerlist tr.layer:first').addClass("layersel");
|
||||
$.prompt(uiStrings.enterUniqueLayerName,uniqName, function(newName) {
|
||||
if (!newName) return;
|
||||
if ($.inArray(newName, curNames) != -1) {
|
||||
$.alert(uiStrings.dupeLayerName);
|
||||
return;
|
||||
}
|
||||
svgCanvas.createLayer(newName);
|
||||
updateContextPanel();
|
||||
populateLayers();
|
||||
$('#layerlist tr.layer').removeClass("layersel");
|
||||
$('#layerlist tr.layer:first').addClass("layersel");
|
||||
});
|
||||
});
|
||||
|
||||
$('#layer_delete').click(function() {
|
||||
|
|
@ -1691,24 +1761,25 @@ function svg_edit_setup() {
|
|||
$('#layer_rename').click(function() {
|
||||
var curIndex = $('#layerlist tr.layersel').prevAll().length;
|
||||
var oldName = $('#layerlist tr.layersel td.layername').text();
|
||||
var newName = prompt(uiStrings.enterNewLayerName,"");
|
||||
if (!newName) return;
|
||||
if (oldName == newName) {
|
||||
alert(uiStrings.layerHasThatName);
|
||||
return;
|
||||
}
|
||||
|
||||
var curNames = new Array(svgCanvas.getNumLayers());
|
||||
for (var i = 0; i < curNames.length; ++i) { curNames[i] = svgCanvas.getLayer(i); }
|
||||
if ($.inArray(newName, curNames) != -1) {
|
||||
alert(uiStrings.layerHasThatName);
|
||||
return;
|
||||
}
|
||||
|
||||
svgCanvas.renameCurrentLayer(newName);
|
||||
populateLayers();
|
||||
$('#layerlist tr.layer').removeClass("layersel");
|
||||
$('#layerlist tr.layer:eq('+curIndex+')').addClass("layersel");
|
||||
$.prompt(uiStrings.enterNewLayerName,"", function(newName) {
|
||||
if (!newName) return;
|
||||
if (oldName == newName) {
|
||||
$.alert(uiStrings.layerHasThatName);
|
||||
return;
|
||||
}
|
||||
|
||||
var curNames = new Array(svgCanvas.getNumLayers());
|
||||
for (var i = 0; i < curNames.length; ++i) { curNames[i] = svgCanvas.getLayer(i); }
|
||||
if ($.inArray(newName, curNames) != -1) {
|
||||
$.alert(uiStrings.layerHasThatName);
|
||||
return;
|
||||
}
|
||||
|
||||
svgCanvas.renameCurrentLayer(newName);
|
||||
populateLayers();
|
||||
$('#layerlist tr.layer').removeClass("layersel");
|
||||
$('#layerlist tr.layer:eq('+curIndex+')').addClass("layersel");
|
||||
});
|
||||
});
|
||||
|
||||
var SIDEPANEL_MAXWIDTH = 300;
|
||||
|
|
|
|||
|
|
@ -3418,7 +3418,7 @@ function BatchCommand(text) {
|
|||
if (selectedElements[1] == null) {
|
||||
// set our current stroke/fill properties to the element's
|
||||
var selected = selectedElements[0];
|
||||
if (selected.tagName != "g") {
|
||||
if (selected.tagName != "g" && selected.tagName != "image") {
|
||||
cur_shape.fill = selected.getAttribute("fill");
|
||||
cur_shape.fill_opacity = selected.getAttribute("fill-opacity");
|
||||
cur_shape.stroke = selected.getAttribute("stroke");
|
||||
|
|
|
|||
Loading…
Reference in New Issue