From 383ef4a290103bb645a8f3cef68911b947ca2f65 Mon Sep 17 00:00:00 2001 From: Alexis Deveria Date: Thu, 19 Nov 2009 15:09:21 +0000 Subject: [PATCH] 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-75d572ba1ddd --- editor/svg-editor.css | 60 ++++++++++++++ editor/svg-editor.html | 12 ++- editor/svg-editor.js | 179 ++++++++++++++++++++++++++++------------- editor/svgcanvas.js | 2 +- 4 files changed, 197 insertions(+), 56 deletions(-) diff --git a/editor/svg-editor.css b/editor/svg-editor.css index 8f28e7ae..b7399c3e 100644 --- a/editor/svg-editor.css +++ b/editor/svg-editor.css @@ -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 ----------------------------------*/ diff --git a/editor/svg-editor.html b/editor/svg-editor.html index 435f4cf4..e2aa8d3d 100644 --- a/editor/svg-editor.html +++ b/editor/svg-editor.html @@ -182,7 +182,7 @@ script type="text/javascript" src="locale/locale.min.js"> - +
@@ -438,5 +438,15 @@ script type="text/javascript" src="locale/locale.min.js"> +
+
+
+
+ Test message +
+
+
+
+ diff --git a/editor/svg-editor.js b/editor/svg-editor.js index 66edc47b..81902a3a 100644 --- a/editor/svg-editor.js +++ b/editor/svg-editor.js @@ -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('

'+msg.replace(/\n/g,'

')+'

') + .toggleClass('prompt',(type=='prompt')); + btn_holder.empty(); + + var ok = $('').appendTo(btn_holder); + + if(type != 'alert') { + $('') + .appendTo(btn_holder) + .click(function() { box.hide();callback(false)}); + } + + if(type == 'prompt') { + var input = $('').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; diff --git a/editor/svgcanvas.js b/editor/svgcanvas.js index e9048673..675c0501 100644 --- a/editor/svgcanvas.js +++ b/editor/svgcanvas.js @@ -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");