From d9d353a35028ddcaf1ab2ae7fa149e4bf900e2ee Mon Sep 17 00:00:00 2001 From: Jacques Distler Date: Thu, 13 May 2010 00:47:09 -0500 Subject: [PATCH] Some HTML5 audio/video attributes for the Sanitizer --- lib/sanitizer.rb | 3 +- .../editor/extensions/ext-eyedropper.js | 67 +++++++++++-------- public/svg-edit/editor/svg-editor.css | 23 ++++--- public/svg-edit/editor/svg-editor.js | 34 +++++++--- public/svg-edit/editor/svgcanvas.js | 4 +- 5 files changed, 82 insertions(+), 49 deletions(-) diff --git a/lib/sanitizer.rb b/lib/sanitizer.rb index d1c71ed3..d5052b94 100644 --- a/lib/sanitizer.rb +++ b/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] diff --git a/public/svg-edit/editor/extensions/ext-eyedropper.js b/public/svg-edit/editor/extensions/ext-eyedropper.js index 35341c65..257650d7 100644 --- a/public/svg-edit/editor/extensions/ext-eyedropper.js +++ b/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)); } diff --git a/public/svg-edit/editor/svg-editor.css b/public/svg-edit/editor/svg-editor.css index d2da4f40..182b652c 100644 --- a/public/svg-edit/editor/svg-editor.css +++ b/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; diff --git a/public/svg-edit/editor/svg-editor.js b/public/svg-edit/editor/svg-editor.js index 2d5c49e6..f6f9c568 100644 --- a/public/svg-edit/editor/svg-editor.js +++ b/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); diff --git a/public/svg-edit/editor/svgcanvas.js b/public/svg-edit/editor/svgcanvas.js index 92995323..806d52d1 100644 --- a/public/svg-edit/editor/svgcanvas.js +++ b/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) {