factor out svg element creation

diff --git a/auto.coffee b/auto.coffee
index 8a9033e..b8b2256 100644 (file)
--- a/auto.coffee
+++ b/auto.coffee
@@ -204,6 +204,18 @@ update_path = (path, flags) ->
 
 switch_to_tool = (tool_class) ->
 
+# json (compiled to javascript and minified) is ~8% smaller than the resulting xml
+json_to_svg = (json) ->
+       for tag, attrs of json
+               el = document.createElementNS svg_ns, tag
+               for k, v of attrs
+                       if k is 'children'
+                               for child in v
+                                       el.appendChild json_to_svg child
+                       else
+                               el.setAttribute k, v
+       return el
+
 # called automatically on domcontentloaded
 init = ->
        $container = $ '.crayon_mockup'
@@ -211,30 +223,16 @@ init = ->
        $tool_options = $ '<div class="tool_options"></div>'
        $container.append $toolbar
        $container.append $tool_options
-       svg = document.createElementNS svg_ns, 'svg'
-       svg.setAttribute 'width', width
-       svg.setAttribute 'height', height
-       svg.setAttribute 'viewBox', "0 0 #{width} #{height}"
+       svg = json_to_svg svg: width: width, height: height, viewBox: "0 0 #{width} #{height}"
        $svg = $ svg
        $container.append $svg
-       filter = document.createElementNS svg_ns, 'filter'
-       filter.setAttribute 'id', 'crayon'
-       filter.setAttribute 'filterUnits', 'userSpaceOnUse'
-       filter.setAttribute 'x', '-5%'
-       filter.setAttribute 'y', '-5%'
-       filter.setAttribute 'height', '110%'
-       filter.setAttribute 'width', '110%'
-       filter_inner = document.createElementNS svg_ns, 'feTurbulence'
-       filter_inner.setAttribute 'baseFrequency', '.3'
-       filter_inner.setAttribute 'numOctaves', '2'
-       filter_inner.setAttribute 'type', 'fractalNoise'
-       filter.appendChild filter_inner
-       filter_inner = document.createElementNS svg_ns, 'feDisplacementMap'
-       filter_inner.setAttribute 'scale', '6'
-       filter_inner.setAttribute 'xChannelSelector', 'R'
-       filter_inner.setAttribute 'in', 'SourceGraphic'
-       filter.appendChild filter_inner
-       svg.appendChild filter
+       svg.appendChild json_to_svg filter:
+               id: 'crayon', filterUnits: 'userSpaceOnUse'
+               x: '-5%', y: '-5%', height: '110%', width: '110%'
+               children: [
+                       { feTurbulence: baseFrequency: '.3', numOctaves: '2', type: 'fractalNoise' }
+                       { feDisplacementMap: scale: '6', xChannelSelector: 'R', in: 'SourceGraphic' }
+               ]
 
        tool_buttons =
                tutorial: default: true, factory: TutorialTool