Some HTML5 audio/video attributes for the Sanitizer

lib/sanitizer.rb

@@ -32,7 +32,8 @@ module Sanitizer
       align alt axis border cellpadding cellspacing char charoff charset
       checked cite class clear cols colspan color compact controls coords datetime
       dir disabled enctype for frame headers height href hreflang hspace id
-      ismap label lang longdesc loop maxlength media method multiple name nohref
+      ismap label lang longdesc loop loopcount loopend loopstart
+      maxlength media method multiple name nohref
       noshade nowrap poster prompt readonly rel rev rows rowspan rules scope
       selected shape size span src start style summary tabindex target title
       type usemap valign value vspace width xml:lang]

public/svg-edit/editor/extensions/ext-eyedropper.js

@@ -16,7 +16,41 @@ svgEditor.addExtension("eyedropper", function(S) {
 			currentStyle = {fillPaint: "red", fillOpacity: 1.0,
 							strokePaint: "black", strokeOpacity: 1.0, 
 							strokeWidth: 5, strokeDashArray: null,
-							opacity: 1.0 };
+							opacity: 1.0,
+							strokeLinecap: 'butt',
+							strokeLinejoin: 'miter',
+							};
+							
+		function getStyle(opts) {
+			// if we are in eyedropper mode, we don't want to disable the eye-dropper tool
+			var mode = svgCanvas.getMode();
+			if (mode == "eyedropper") return;
+
+			var elem = null;
+			var tool = $('#tool_eyedropper');
+			// enable-eye-dropper if one element is selected
+			if (opts.elems.length == 1 && opts.elems[0] && 
+				$.inArray(opts.elems[0].nodeName, ['svg', 'g', 'use']) == -1) 
+			{
+				elem = opts.elems[0];
+				tool.removeClass('disabled');
+				// grab the current style
+				currentStyle.fillPaint = elem.getAttribute("fill") || "black";
+				currentStyle.fillOpacity = elem.getAttribute("fill-opacity") || 1.0;
+				currentStyle.strokePaint = elem.getAttribute("stroke");
+				currentStyle.strokeOpacity = elem.getAttribute("stroke-opacity") || 1.0;
+				currentStyle.strokeWidth = elem.getAttribute("stroke-width");
+				currentStyle.strokeDashArray = elem.getAttribute("stroke-dasharray");
+				currentStyle.strokeLinecap = elem.getAttribute("stroke-linecap");
+				currentStyle.strokeLinejoin = elem.getAttribute("stroke-linejoin");
+				currentStyle.opacity = elem.getAttribute("opacity") || 1.0;
+			}
+			// disable eye-dropper tool
+			else {
+				tool.addClass('disabled');
+			}
+
+		}
 		
 		return {
 			name: "eyedropper",
@@ -33,33 +67,8 @@ svgEditor.addExtension("eyedropper", function(S) {
 			}],
 			
 			// if we have selected an element, grab its paint and enable the eye dropper button
-			selectedChanged: function(opts) {
-				// if we are in eyedropper mode, we don't want to disable the eye-dropper tool
-				var mode = svgCanvas.getMode();
-				if (mode == "eyedropper") return;
-
-				var elem = null;
-				var tool = $('#tool_eyedropper');
-				// enable-eye-dropper if one element is selected
-				if (opts.elems.length == 1 && opts.elems[0] && 
-					$.inArray(opts.elems[0].nodeName, ['svg', 'g', 'use']) == -1) 
-				{
-					elem = opts.elems[0];
-					tool.removeClass('disabled');
-					// grab the current style
-					currentStyle.fillPaint = elem.getAttribute("fill") || "black";
-					currentStyle.fillOpacity = elem.getAttribute("fill-opacity") || 1.0;
-					currentStyle.strokePaint = elem.getAttribute("stroke");
-					currentStyle.strokeOpacity = elem.getAttribute("stroke-opacity") || 1.0;
-					currentStyle.strokeWidth = elem.getAttribute("stroke-width");
-					currentStyle.strokeDashArray = elem.getAttribute("stroke-dasharray");
-					currentStyle.opacity = elem.getAttribute("opacity") || 1.0;
-				}
-				// disable eye-dropper tool
-				else {
-					tool.addClass('disabled');
-				}
-			},
+			selectedChanged: getStyle,
+			elementChanged: getStyle,
 			
 			mouseDown: function(opts) {
 				var mode = svgCanvas.getMode();
@@ -81,6 +90,8 @@ svgEditor.addExtension("eyedropper", function(S) {
 						if (currentStyle.strokeWidth) 		change(target, "stroke-width", currentStyle.strokeWidth);
 						if (currentStyle.strokeDashArray) 	change(target, "stroke-dasharray", currentStyle.strokeDashArray);
 						if (currentStyle.opacity) 			change(target, "opacity", currentStyle.opacity);
+						if (currentStyle.strokeLinecap) 	change(target, "stroke-linecap", currentStyle.strokeLinecap);
+						if (currentStyle.strokeLinejoin) 	change(target, "stroke-linejoin", currentStyle.strokeLinejoin);
 						
 						addToHistory(new ChangeElementCommand(target, changes));
 					}

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

@@ -79,15 +79,18 @@
 }
 
 #svg_editor #color_tools .icon_label {
-	padding-right: 0;
-	height: 26px;
-	min-width: 18px;
+	padding: 3px 19%;
+	width: 28px;
+	height: 100%;
 	cursor: pointer;
+	
 }
 
-#group_opacityLabel, 
-#zoomLabel {
+#svg_editor #group_opacityLabel, 
+#svg_editor #zoomLabel {
 	cursor: pointer;
+	margin-right: 5px;
+	padding-top: 4px
 }
 
 #color_tools .icon_label > * {
@@ -738,9 +741,9 @@ span.zoom_tool {
 .color_tool > * {
 	display: table-cell;
 	background: #f0f0f0;
-	padding: 0 5px;
+	padding: 0 5px 0 0;
 	vertical-align: middle;
-	height: 25px;
+/*	height: 25px;*/
 }
 
 #toggle_stroke_tools {
@@ -841,7 +844,6 @@ span.zoom_tool {
 	-moz-border-radius-bottomright: 4px;
 	-webkit-border-top-right-radius: 4px;
 	-webkit-border-bottom-right-radius: 4px;
-
 }
 
 #svg_editor #tool_opacity {
@@ -897,6 +899,11 @@ span.zoom_tool {
 	z-index: 6;
 }
 
+#bg_blocks {
+	overflow: auto;
+	margin-left: 30px;
+}
+
 #svg_docprops #svg_docprops_container {
 	position: absolute;
 	top: 50px;

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

@@ -461,20 +461,18 @@
 			var togglePathEditMode = function(editmode, elems) {
 				$('#path_node_panel').toggle(editmode);
 				$('#tools_bottom_2,#tools_bottom_3').toggle(!editmode);
-				var size = $('#tool_select > svg, #tool_select > img')[0].getAttribute('width');
 				if(editmode) {
 					// Change select icon
 					$('.tool_button_current').removeClass('tool_button_current').addClass('tool_button');
-					$('#tool_select').addClass('tool_button_current').removeClass('tool_button')
-						.empty().append($.getSvgIcon('select_node'));
+					$('#tool_select').addClass('tool_button_current').removeClass('tool_button');
+					setIcon('#tool_select', 'select_node');
 					multiselected = false;
 					if(elems.length) {
 						selectedElement = elems[0];
 					}
 				} else {
-					$('#tool_select').empty().append($.getSvgIcon('select'));
+					setIcon('#tool_select', 'select');
 				}
-				$.resizeSvgIcons({'#tool_select .svg_icon':size});
 			}
 		
 			// used to make the flyouts stay on the screen longer the very first time
@@ -1162,9 +1160,7 @@
 						$('#tool_node_delete').toggleClass('disabled', !path.canDeleteNodes);
 						
 						// Show open/close button based on selected point
-						$('#tool_openclose_path')
-							.empty()
-							.append($.getSvgIcon(path.closed_subpath ? 'open_path' : 'close_path'));
+						setIcon('#tool_openclose_path', path.closed_subpath ? 'open_path' : 'close_path');
 						
 						if(point) {
 							var seg_type = $('#seg_type');
@@ -2295,6 +2291,17 @@
 				// This should be done in svgcanvas.js for the borderRect fill
 				svgCanvas.setBackground(color, url);
 			}
+			
+			var setIcon = function(elem, icon_id) {
+				var icon = $.getSvgIcon(icon_id).clone();
+				$(elem).empty().append(icon);
+				var size = curPrefs.iconsize;
+				if(size !== 'm') {
+					var icon_sizes = { s:16, m:24, l:32, xl:48}, obj = {};
+					obj[elem + ' .svg_icon'] = icon_sizes[size];
+					$.resizeSvgIcons(obj);
+				}
+			}
 		
 			var setIconSize = Editor.setIconSize = function(size, force) {
 				if(size == curPrefs.size && !force) return;
@@ -2312,7 +2319,8 @@
 				
 				$.resizeSvgIcons({
 					'.flyout_arrow_horiz > svg, .flyout_arrow_horiz > img': size_num / 5,
-					'#logo > svg, #logo > img': size_num * 1.3
+					'#logo > svg, #logo > img': size_num * 1.3,
+					'#tools_bottom .icon_label > *': (size_num === 16 ? 18 : size_num * .75)
 				});
 				if(size != 's') {
 					$.resizeSvgIcons({'#layerbuttons svg, #layerbuttons img': size_num * .6});
@@ -2357,7 +2365,11 @@
 						'height': {s: '58px', l: '98px', xl: '145px'}
 					},
 					"#color_tools": {
-						'border-spacing': {s: '0 1px'}
+						'border-spacing': {s: '0 1px'},
+						'margin-top': {s: '-1px'}
+					},
+					"#color_tools .icon_label": {
+						'width': {l:'43px', xl: '60px'}
 					},
 					".color_tool": {
 						'height': {s: '20px'}
@@ -3452,7 +3464,7 @@
 				updateCanvas(true);
 // 			});
 			
-		//	var revnums = "svg-editor.js ($Rev: 1550 $) ";
+		//	var revnums = "svg-editor.js ($Rev: 1569 $) ";
 		//	revnums += svgCanvas.getVersion();
 		//	$('#copyright')[0].setAttribute("title", revnums);
 		

public/svg-edit/editor/svgcanvas.js

@@ -7604,6 +7604,7 @@ function BatchCommand(text) {
 		}		
 		if (elems.length > 0) {
 			this.changeSelectedAttribute("stroke-width", val, elems);
+			call("changed", selectedElements);
 		}
 	};
 
@@ -7622,6 +7623,7 @@ function BatchCommand(text) {
 		}		
 		if (elems.length > 0) {
 			this.changeSelectedAttribute(attr, val, elems);
+			call("changed", selectedElements);
 		}
 	};
 	
@@ -9036,7 +9038,7 @@ function BatchCommand(text) {
 	// Function: getVersion
 	// Returns a string which describes the revision number of SvgCanvas.
 	this.getVersion = function() {
-		return "svgcanvas.js ($Rev: 1561 $)";
+		return "svgcanvas.js ($Rev: 1569 $)";
 	};
 	
 	this.setUiStrings = function(strs) {