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

@@ -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
 ----------------------------------*/

editor/svg-editor.html

@@ -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>

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('<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;

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");