From: Jason Woofenden <jason@jasonwoof.com>
Date: Mon, 25 May 2015 01:49:18 +0000 (-0400)
Subject: clean up tool button handling and appearance
X-Git-Url: https://jasonwoof.com/gitweb/?p=crayon_mockup.git;a=commitdiff_plain;h=804571d5567f5c6b9ec21c4e1db9fcc40aaf6823

clean up tool button handling and appearance
---

diff --git a/.git-ftp-include b/.git-ftp-include
index 3d4c4c2..9568e94 100644
--- a/.git-ftp-include
+++ b/.git-ftp-include
@@ -1 +1,2 @@
 auto.js:auto.coffee
+style.css:style.styl
diff --git a/.gitignore b/.gitignore
index 31c8cde..5e5f776 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1,2 @@
 /auto.js
+/style.css
diff --git a/Makefile b/Makefile
index cc4e070..907e445 100644
--- a/Makefile
+++ b/Makefile
@@ -1,9 +1,12 @@
-objects= auto.js
+objects= auto.js style.css
 
 all: $(objects)
 
 clean:
 	rm -f $(objects)
 
+style.css: styl.styl
+	stylus -c -p $< > $@
+
 %.js: %.coffee
 	coffee -c $<
diff --git a/auto.coffee b/auto.coffee
index a929f5e..480fbbe 100644
--- a/auto.coffee
+++ b/auto.coffee
@@ -5,6 +5,7 @@ height = 500
 # globals
 $svg = null # jquery object for svg element
 svg = null # dom object for svg element
+$tool_options = null # jquery object for tool options line
 selection = null
 svg_ns = 'http://www.w3.org/2000/svg'
 cur_tool = null
@@ -53,8 +54,8 @@ class TutorialTool extends Tool
 class DrawTool extends Tool
 	constructor: (toolbar) ->
 		super 'draw'
-		@stop_button = $ '<span class="button" title="keyboard shortcut: space">stop line</span>'
-		@stop_close_button = $ '<span class="button" title="keyboard shortcut: O">stop line, close loop</span>'
+		@stop_button = $ '<span class="button" title="keyboard shortcut: space">finish line</span>'
+		@stop_close_button = $ '<span class="button" title="keyboard shortcut: O">close (loop)</span>'
 		@cancel_button = $ '<span class="button" title="keyboard shortcut: Esc">cancel line</span>'
 		toolbar.append @stop_button
 		toolbar.append @stop_close_button
@@ -75,25 +76,24 @@ class DrawTool extends Tool
 		if @[button]
 			return @[button]()
 	cancel_drawing: ->
-		if selection?
-			console.log selection.element
+		if selection?.drawing?
 			svg.removeChild selection.element
 		selection = null
 		return false
 	stop_drawing: ->
-		if selection?
+		if selection?.drawing?
 			update_path selection
 		selection = null
 		return false
 	stop_close_drawing: ->
-		if selection?
+		if selection?.drawing?
 			update_path selection, close: true
 		selection = null
 		return false
 	mousemove: (x, y) ->
 		mouse.x = x
 		mouse.y = y
-		if selection?
+		if selection?.drawing?
 			update_path selection, to_mouse: true
 	keydown: (keycode) ->
 		switch keycode
@@ -104,27 +104,19 @@ class DrawTool extends Tool
 			when 27
 				return @cancel_drawing()
 	disable: ->
+		@stop_drawing()
 		if selection?.drawing?
 			delete selection.drawing
-		@stop_button.remove()
-		@stop_close_button.remove()
-		@cancel_button.remove()
 
 class EditTool extends Tool
 	constructor: (toolbar) ->
 		super 'draw'
-		@oops = $ "<span>Oops, this tool isn't implemented yet</span>"
-		toolbar.append @oops
-	disable: ->
-		@oops.remove()
+		toolbar.append $ "<span>Oops, this tool isn't implemented yet</span>"
 
 class DeleteTool extends Tool
 	constructor: (toolbar) ->
 		super 'draw'
-		@oops = $ "<span>Oops, this tool isn't implemented yet</span>"
-		toolbar.append @oops
-	disable: ->
-		@oops.remove()
+		toolbar.append $ "<span>Oops, this tool isn't implemented yet</span>"
 
 update_path = (path, flags) ->
 	d = ''
@@ -138,38 +130,38 @@ update_path = (path, flags) ->
 		d += " z"
 	path.element.setAttribute "d", d
 
+switch_to_tool = (tool_class) ->
+
 # called automatically on domcontentloaded
 init = ->
+	tool_buttons =
+		draw: button_text: 'draw', factory: DrawTool
+		edit: button_text: 'edit', factory: EditTool
+		delete: button_text: 'delete', factory: DeleteTool
 	$container = $ '.crayon_mockup'
 	$toolbar = $ '<div class="toolbar">Tools: </div>'
-	$draw_tool_button = $ '<span class="button">draw</span>'
-	$edit_tool_button = $ '<span class="button">edit (coming soon)</span>'
-	$delete_tool_button = $ '<span class="button">delete (coming soon)</span>'
-	$toolbar.append $draw_tool_button
-	$toolbar.append $edit_tool_button
-	$toolbar.append $delete_tool_button
-	$draw_tool_button.click ->
-		if cur_tool?
-			cur_tool.disable()
-		cur_tool = new DrawTool $tool_extra
-	$edit_tool_button.click ->
-		if cur_tool?
-			cur_tool.disable()
-		cur_tool = new EditTool $tool_extra
-	$delete_tool_button.click ->
-		if cur_tool?
-			cur_tool.disable()
-		cur_tool = new DeleteTool $tool_extra
-	$tool_extra = $ '<div class="tool_extra"></div>'
+	for k, t of tool_buttons
+		t.element = $ "<span class=\"button\"></span>"
+		t.element.text t.button_text
+		$toolbar.append t.element
+		do (t) ->
+			t.element.click ->
+				if cur_tool?
+					cur_tool.disable()
+					($toolbar.find '.button').removeClass 'disabled'
+				$tool_options.empty()
+				cur_tool = new t.factory $tool_options
+				t.element.addClass 'disabled'
+	$tool_options = $ '<div class="tool_options"></div>'
 	$container.append $toolbar
-	$container.append $tool_extra
+	$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 = $ svg
 	$container.append $svg
-	cur_tool = new TutorialTool $tool_extra
+	cur_tool = new TutorialTool $tool_options
 	$svg.mousedown (e) ->
 		offset = $svg.offset()
 		if cur_tool?
diff --git a/index.html b/index.html
index bc46e2a..69f0a61 100644
--- a/index.html
+++ b/index.html
@@ -4,33 +4,7 @@
 	<title>Crayon Mockup (working title)</title>
 	<script src="/javascript/jquery/jquery.min.js"></script>
 	<script src="auto.js"></script>
-	<style>
-		.crayon_mockup svg {
-			border: 1px dotted #aaa;
-		}
-		.crayon_mockup svg path {
-			fill: none;
-			stroke: #8c8c8c;
-			stroke-width: 2;
-			stroke-linecap: butt;
-			stroke-linejoin: round;
-			stroke-miterlimit: 4;
-			stroke-opacity: 1;
-			stroke-dasharray: none;
-		}
-		.crayon_mockup .button {
-			display: inline-block;
-			border-radius: 4px;
-			background: white;
-			box-shadow: 1px 1px 4px rgba(0,0,0,0.5);
-		}
-		.crayon_mockup .button + .button {
-			margin-left: 14px;
-		}
-		.crayon_mockup .toolbar, .crayon_mockup .tool_extra {
-			padding-bottom: 5px;
-		}
-	</style>
+	<link rel="stylesheet" href="style.css">
 </head>
 <body>
 	<h1>Crayon Mockup (working title)</h1>
diff --git a/styl.styl b/styl.styl
new file mode 100644
index 0000000..b83e8d5
--- /dev/null
+++ b/styl.styl
@@ -0,0 +1,30 @@
+.crayon_mockup
+	svg
+		border: 1px dotted #aaa
+	svg path
+		fill: none
+		stroke: #8c8c8c
+		stroke-width: 2
+		stroke-linecap: butt
+		stroke-linejoin: round
+		stroke-miterlimit: 4
+		stroke-opacity: 1
+		stroke-dasharray: none
+	.button
+		display: inline-block
+		border-radius: 4px
+		background: white
+		box-shadow: 1px 1px 4px rgba(0,0,0,0.5)
+		padding: 1px 2px
+		cursor: pointer
+		&:hover
+			background-color: #f9f9f9
+	.button.disabled
+		color: #777
+		background-color: #f3f3f3
+		cursor: default
+	.button + .button
+		margin-left: 14px
+
+	.toolbar, .tool_options
+		padding-bottom: 5px