fix some weird focus issues

2 files changed, 30 insertions, 2 deletions

diff --git a/js/tool.js b/js/tool.js
index 81ab43b..2953dbc 100644
--- a/js/tool.js
+++ b/js/tool.js
@@ -9,6 +9,7 @@ var Tool = Model({
   done: function(){},
   focus: function(){
     // focused && focused.blur()
+    console.log("focusing ", this.name)
     current_tool && current_tool.blur()
     current_tool = this
     this.span.classList.add('focused')
@@ -17,6 +18,7 @@ var Tool = Model({
   },
   blur: function(){
     current_tool = null
+    console.log("blurring ", this.name)
     this.span.classList.remove('focused')
     this.done()
   }
@@ -37,15 +39,35 @@ var Checkbox = Tool.extend({
 
 var BlurredCheckbox = Checkbox.extend({
   focus: function(){
+    if (current_tool.name == "shader") {
+      shader.toggle(false)
+      current_tool.blur()
+      current_tool = controls.circle
+    }
     this.use()
     if (this.name != 'shader' && is_desktop) { cursor_input.focus() }
+  },
+  blur: function(){
+    console.log("blurring ", this.name)
+    this.span.classList.remove('focused')
+    this.done()
   }
 })
 
 var BlurredTool = Tool.extend({
   focus: function(){
+    if (current_tool.name == "shader") {
+      shader.toggle(false)
+      current_tool.blur()
+      current_tool = controls.circle
+    }
     this.use()
     if (this.name != 'shader' && is_desktop) { cursor_input.focus() }
+  },
+  blur: function(){
+    console.log("blurring ", this.name)
+    this.span.classList.remove('focused')
+    this.done()
   }
 })
 
diff --git a/js/ui/controls.js b/js/ui/controls.js
index 6a6c005..81a40e0 100644
--- a/js/ui/controls.js
+++ b/js/ui/controls.js
@@ -136,7 +136,7 @@ var controls = (function(){
   
   //
 
-  ShaderTool = Tool.extend({
+  var ShaderTool = Tool.extend({
   	active: false,
     use: function(state){
     	this.active = typeof state == "boolean" ? state : ! this.active
@@ -148,7 +148,11 @@ var controls = (function(){
 				shader_rapper.style.display = "none"
 			}
     },
-  })  
+    done: function(){
+      this.use(false)
+      console.log("shader done")
+    }
+  })
   controls.shader = new ShaderTool (shader_el)
   shader_textarea.value = demo_shader.innerHTML
   shader_textarea.addEventListener("input", function(){
@@ -159,6 +163,8 @@ var controls = (function(){
   controls.animate.use = function(state){
     var state = shader.toggle()
     this.update(state)
+    controls.shader.focus()
+    controls.shader.use(true)
   }
   
   controls.experimental_palette = new HiddenCheckbox (experimental_palette_toggle)