factor out svg element creation

[crayon_mockup.git] / auto.coffee

diff --git a/auto.coffee b/auto.coffee
index ee3d133..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,12 +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
+       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