Merge branch 'bzr/golem' of /Users/distler/Sites/code/instiki

public/javascripts/page_helper.js

@@ -136,7 +136,7 @@ function setupSVGedit(path){
     selected = t.value.slice(begin, end);
     after = t.value.slice(end, t.value.length);
     if (selected && selected != '') {
-      if ( selected.match(/^<svg(.|\n)*<\/svg>$/) ) {
+      if ( selected.match(/^<svg(.|\n)*<\/svg>$/) && !selected.match(/<\/svg>(.|\n)/)) {
         SVGeditButton.disabled = false;
         SVGeditButton.value = 'Edit existing SVG graphic';
       } else {

public/svg-edit/editor/svg-editor.css

@@ -53,13 +53,14 @@ body {
 	border: 1px solid #808080;
 	border-top: none;
 	margin-top: 2px;
+	margin-left: 4px;
 }
 
 #svg_editor #stroke_bg, 
 #svg_editor #fill_bg {
 	height: 16px;
 	width: 16px;
-	margin: 2px;
+	margin: 1px;
 }
 
 #svg_editor #fill_color, #svg_editor #stroke_color {
@@ -67,10 +68,14 @@ body {
 	width: 16px;
 	border: 1px solid #808080;
 	cursor: pointer;
-	margin-top: -19px;
+	margin-top: -18px;
 	margin-left: 1px;
 }
 
+#tool_stroke select {
+	margin-top: 0;
+}
+
 #svg_editor div#palette {
 	float: left;
 	width: 6848px;
@@ -82,7 +87,7 @@ body {
 	position:absolute;
 	top: 75px;
 	left: 40px;
-	bottom: 60px;
+	bottom: 62px;
 	right: 14px;
 	background-color: #A0A0A0;
 	border: 1px solid #808080;
@@ -544,9 +549,6 @@ span.zoom_tool {
 	margin-right: 0;
 }
 
-#opacity_dropdown li {
-	width: 140px;
-}
 
 #svg_editor .tool_button, 
 #svg_editor .push_button,
@@ -660,9 +662,10 @@ span.zoom_tool {
 #svg_editor #tools_bottom {
 	position: absolute;
 	left: 40px;
-	right: 2px;
+	right: 0;
-	bottom: 2px;
+	bottom: 0;
-	height: 60px;
+	height: 64px;
+	overflow: visible;
 }
 
 #svg_editor #tools_bottom_1 {
@@ -671,15 +674,75 @@ span.zoom_tool {
 }
 
 #svg_editor #tools_bottom_2 {
-	width: 250px;
+	width: 204px;
+	position: relative;
 	float: left;
 }
 
+#svg_editor #color_tools {
+	display: table;
+	margin-top: 0px;
+	border-spacing: 0 4px;
+	clip: rect(0,0,10px,0);
+}
+
+.color_tool {
+	display: table-row;
+	overflow: hidden;
+	height: 26px;
+	padding: 0 4px;
+}
+
+.color_tool > * {
+	display: table-cell;
+	background: #f0f0f0;
+	padding: 0 5px;
+	vertical-align: middle;
+	height: 26px;
+}
+
+.color_tool > *:first-child {
+	-moz-border-radius-topleft: 4px;
+	-moz-border-radius-bottomleft: 4px;
+	-webkit-border-top-left-radius: 4px;
+	-webkit-border-bottom-left-radius: 4px;
+}
+
+.color_tool > *:last-child {
+	-moz-border-radius-topright: 4px;
+	-moz-border-radius-bottomright: 4px;
+	-webkit-border-top-right-radius: 4px;
+	-webkit-border-bottom-right-radius: 4px;
+
+}
+
+#svg_editor #tool_opacity {
+	position: absolute;
+	top: 4px;
+	right: 2px;
+	background: #f0f0f0;
+	height: 26px;
+	border-radius: 4px;
+	-moz-border-radius: 4px;
+	-webkit-border-radius: 4px;
+	padding: 0 3px;
+}
+
+#tool_opacity .dropdown button {
+	margin-top: 2px;
+}
+
+#opacity_dropdown li {
+	width: 140px;
+}
+
+
 #svg_editor #tools_bottom_3 {
 }
 
 #svg_editor #copyright {
 	text-align: right;
+	padding-right: .3em;
 }
 
 #svg_source_editor {

public/svg-edit/editor/svg-editor.html

@@ -164,24 +164,6 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
 			</label>
 -->
 		</div>
-		<div class="toolset" id="tool_opacity">
-			<label>
-				<span id="group_opacityLabel">opac:</span>
-				<input id="group_opacity" title="Change selected item opacity" size="3" value="100" type="text"/>
-			</label>
-			<div id="opacity_dropdown" class="dropdown">
-				<button></button>
-				<ul>
-					<li class="special"><div id="opac_slider"></div></li>
-					<li>100% (no transparency)</li>
-					<li>0%</li>
-					<li>25%</li>
-					<li>50%</li>
-					<li>75%</li>
-					<li>100%</li>
-				</ul>
-			</div>
-		</div>
 
 		<label id="tool_angle">
 			<span id="angleLabel">angle:</span>
@@ -425,19 +407,31 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
 	</div>
 
 	<div id="tools_bottom_2">
-		<table>
+		<div id="color_tools">
-		<tr>
+			<div class="color_tool" id="tool_fill">
-			<td id="fill_tool_bottom" class="label">fill:</td>
+				<label>
-			<td><div id="fill_bg"></div><div id="fill_color" class="color_block"  title="Change fill color"></div></td>
+					fill:
-			<td colspan="3"><div id="fill_opacity" class="label">100%</div></td>
+				</label>
-		</tr><tr>
+				<div class="color_block">
-			<td id="stroke_tool_bottom" class="label">stroke:</td>
+					<div id="fill_bg"></div>
-			<td><div id="stroke_bg"></div><div id="stroke_color" class="color_block" title="Change stroke color"></div></td>
+					<div id="fill_color" class="color_block"  title="Change fill color"></div>
-			<td><div id="stroke_opacity" class="label">100 %</div></td>
+				</div>
-			<td>
+			</div>
+		
+			<div class="color_tool" id="tool_stroke">
+				<label>
+					stroke:
+				</label>
+				<div class="color_block">
+					<div id="stroke_bg"></div>
+					<div id="stroke_color" class="color_block" title="Change stroke color"></div>
+				</div>
+				
+				<label>
 					<input id="stroke_width" title="Change stroke width by 1, shift-click to change by 0.1" size="2" value="2" type="text" data-attr="Stroke Width"/>
-			</td>
+				</label>
-			<td>
+				
+				<label>
 				<select id="stroke_style" title="Change stroke dash style">
 					<option selected="selected" value="none">&mdash;</option>
 					<option value="2,2">...</option>
@@ -445,9 +439,29 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
 					<option value="5,2,2,2">- .</option>
 					<option value="5,2,2,2,2,2">- ..</option>
 				</select>
-			</td>
+				</label>
-		</tr>
+			</div>
-		</table>
+		</div>
+	
+		<div class="toolset" id="tool_opacity">
+			<label>
+				<span id="group_opacityLabel">opac:</span>
+				<input id="group_opacity" title="Change selected item opacity" size="3" value="100" type="text"/>
+			</label>
+			<div id="opacity_dropdown" class="dropdown">
+				<button></button>
+				<ul>
+					<li>100% (no transparency)</li>
+					<li>0%</li>
+					<li>25%</li>
+					<li>50%</li>
+					<li>75%</li>
+					<li>100%</li>
+					<li class="special"><div id="opac_slider"></div></li>
+				</ul>
+			</div>
+		</div>
+
 	</div>
 
 	<div id="tools_bottom_3">

public/svg-edit/editor/svg-editor.js

@@ -1232,7 +1232,7 @@ function svg_edit_setup() {
 		if($(this).find('div').length) return;
 		var perc = parseInt($(this).text().split('%')[0]);
 		changeOpacity(false, perc);
-	});
+	}, true);
 	
 	// For slider usage, see: http://jqueryui.com/demos/slider/ 
 	$("#opac_slider").slider({
@@ -1757,11 +1757,20 @@ function svg_edit_setup() {
 			"div#workarea": {
 				'left': {s: '27px', l: '46px', xl: '65px'},
 				'top': {s: '50px', l: '88px', xl: '125px'},
-				'bottom': {s: '51px', l: '68px', xl: '75px'}
+				'bottom': {s: '55px', l: '70px', xl: '77px'}
 			},
 			"#tools_bottom": {
 				'left': {s: '27px', l: '46px', xl: '65px'},
-				'height': {s: '52px', l: '68px', xl: '75px'}
+				'height': {s: '58px', l: '70px', xl: '77px'}
+			},
+			"#color_tools": {
+				'border-spacing': {s: '0 1px'}
+			},
+			".color_tool": {
+				'height': {s: '20px'}
+			},
+			"#tool_opacity": {
+				'top': {s: '1px'}
 			},
 			"#tools_top input, #tools_bottom input": {
 				'margin-top': {s: '2px', l: '4px', xl: '5px'},
@@ -2806,7 +2815,7 @@ function svg_edit_setup() {
 		updateCanvas(true);
 	});
 	
-//	var revnums = "svg-editor.js ($Rev: 1443 $) ";
+//	var revnums = "svg-editor.js ($Rev: 1449 $) ";
 //	revnums += svgCanvas.getVersion();
 //	$('#copyright')[0].setAttribute("title", revnums);
 	return svgCanvas;

public/svg-edit/editor/svgcanvas.js

@@ -99,7 +99,7 @@ var isOpera = !!window.opera,
 	"ellipse": ["class", "clip-path", "clip-rule", "cx", "cy", "fill", "fill-opacity", "fill-rule", "filter", "id", "mask", "opacity", "requiredFeatures", "rx", "ry", "stroke", "stroke-dasharray", "stroke-dashoffset", "stroke-linecap", "stroke-linejoin", "stroke-miterlimit", "stroke-opacity", "stroke-width", "style", "systemLanguage", "transform"],
 	"feGaussianBlur": ["class", "id", "requiredFeatures", "stdDeviation"],
 	"filter": ["class", "filterRes", "filterUnits", "height", "id", "primitiveUnits", "requiredFeatures", "width", "x", "xlink:href", "y"],
-	"foreignObject": ["class", "font-size", "height", "id", "markdown", "opacity", "overflow", "requiredFeatures", "style", "transform", "width", "x", "y"],
+	"foreignObject": ["class", "font-size", "height", "id", "opacity", "requiredFeatures", "style", "transform", "width", "x", "y"],
 	"g": ["class", "clip-path", "clip-rule", "id", "display", "fill", "fill-opacity", "fill-rule", "filter", "mask", "opacity", "requiredFeatures", "stroke", "stroke-dasharray", "stroke-dashoffset", "stroke-linecap", "stroke-linejoin", "stroke-miterlimit", "stroke-opacity", "stroke-width", "style", "systemLanguage", "transform"],
 	"image": ["class", "clip-path", "clip-rule", "filter", "height", "id", "mask", "opacity", "requiredFeatures", "style", "systemLanguage", "transform", "width", "x", "xlink:href", "xlink:title", "y"],
 	"line": ["class", "clip-path", "clip-rule", "fill", "fill-opacity", "fill-rule", "filter", "id", "marker-end", "marker-mid", "marker-start", "mask", "opacity", "requiredFeatures", "stroke", "stroke-dasharray", "stroke-dashoffset", "stroke-linecap", "stroke-linejoin", "stroke-miterlimit", "stroke-opacity", "stroke-width", "style", "systemLanguage", "transform", "x1", "x2", "y1", "y2"],
@@ -114,7 +114,7 @@ var isOpera = !!window.opera,
 	"radialGradient": ["class", "cx", "cy", "fx", "fy", "gradientTransform", "gradientUnits", "id", "r", "requiredFeatures", "spreadMethod", "systemLanguage", "xlink:href"],
 	"rect": ["class", "clip-path", "clip-rule", "fill", "fill-opacity", "fill-rule", "filter", "height", "id", "mask", "opacity", "requiredFeatures", "rx", "ry", "stroke", "stroke-dasharray", "stroke-dashoffset", "stroke-linecap", "stroke-linejoin", "stroke-miterlimit", "stroke-opacity", "stroke-width", "style", "systemLanguage", "transform", "width", "x", "y"],
 	"stop": ["class", "id", "offset", "requiredFeatures", "stop-color", "stop-opacity", "style", "systemLanguage"],
-	"svg": ["class", "clip-path", "clip-rule", "filter", "id", "height", "markdown", "mask", "preserveAspectRatio", "requiredFeatures", "style", "systemLanguage", "viewBox", "width", "x", "xmlns", "xmlns:se", "xmlns:xlink", "y"],
+	"svg": ["class", "clip-path", "clip-rule", "filter", "id", "height", "mask", "preserveAspectRatio", "requiredFeatures", "style", "systemLanguage", "viewBox", "width", "x", "xmlns", "xmlns:se", "xmlns:xlink", "y"],
 	"switch": ["class", "id", "requiredFeatures", "systemLanguage"],
 	"symbol": ["class", "fill", "fill-opacity", "fill-rule", "filter", "font-family", "font-size", "font-style", "font-weight", "id", "opacity", "preserveAspectRatio", "requiredFeatures", "stroke", "stroke-dasharray", "stroke-dashoffset", "stroke-linecap", "stroke-linejoin", "stroke-miterlimit", "stroke-opacity", "stroke-width", "style", "systemLanguage", "transform", "viewBox"],
 	"text": ["class", "clip-path", "clip-rule", "fill", "fill-opacity", "fill-rule", "filter", "font-family", "font-size", "font-style", "font-weight", "id", "mask", "opacity", "requiredFeatures", "stroke", "stroke-dasharray", "stroke-dashoffset", "stroke-linecap", "stroke-linejoin", "stroke-miterlimit", "stroke-opacity", "stroke-width", "style", "systemLanguage", "text-anchor", "transform", "x", "xml:space", "y"],
@@ -1567,7 +1567,8 @@ function BatchCommand(text) {
                         $.inArray(attr.localName, ['width','height','xmlns','x','y','viewBox','id','overflow']) == -1) 
                     {
                         if(!attr.namespaceURI || nsMap[attr.namespaceURI]) {
-                            out.push(' '); out.push(attr.nodeName); out.push("=\"");
+							out.push(' '); 
+							out.push(attr.nodeName); out.push("=\"");
                             out.push(attrVal); out.push("\"");
                         }
                     }
@@ -6515,6 +6516,7 @@ function BatchCommand(text) {
 			selectorManager.requestSelector(elem).resize();
 		});
 		pathActions.zoomChange();
+		runExtensions("zoomChanged", zoomlevel);
 	}
 
 	this.getMode = function() {
@@ -7988,7 +7990,7 @@ function BatchCommand(text) {
 	// Function: getVersion
 	// Returns a string which describes the revision number of SvgCanvas.
 	this.getVersion = function() {
-		return "svgcanvas.js ($Rev: 1443 $)";
+		return "svgcanvas.js ($Rev: 1450 $)";
 	};
 	
 	this.setUiStrings = function(strs) {