From: Jason Woofenden <jason@jasonwoof.com>
Date: Tue, 21 Jul 2015 03:36:20 +0000 (-0400)
Subject: factor out svg element creation
X-Git-Url: https://jasonwoof.com/gitweb/?p=crayon_mockup.git;a=commitdiff_plain;h=859e7c640bf3ab834df5c65f75b3b439e7167116;hp=27d85b1648f106d26c0d7acd5550e120f276e189

factor out svg element creation
---

diff --git a/auto.coffee b/auto.coffee
index 8a9033e..b8b2256 100644
--- 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