Hide menu with tab

desktop/sources/scripts/interface.js

@@ -7,7 +7,7 @@ function Interface (dotgrid) {
   this.el.appendChild(this.menu_el = document.createElement('div'))
   this.menu_el.id = 'menu'
 
-  this.is_visible = true
+  this.isVisible = true
   this.zoom = false
 
   this.install = function (host) {
@@ -142,7 +142,14 @@ function Interface (dotgrid) {
   }
 
   this.toggle = function () {
-    this.is_visible = !this.is_visible
-    this.el.className = this.is_visible ? 'visible' : 'hidden'
+    this.isVisible = !this.isVisible
+    this.el.className = this.isVisible ? 'visible' : 'hidden'
+  }
+
+  document.onkeydown = function (e) {
+    if (e.key === 'Tab') {
+      DOTGRID.interface.toggle()
+      e.preventDefault()
+    }
   }
 }

desktop/sources/scripts/picker.js

@@ -4,16 +4,16 @@ function Picker (dotgrid) {
   this.memory = ''
   this.el = document.createElement('div')
   this.el.id = 'picker'
-  this.is_active = false
+  this.isActive = false
   this.input = document.createElement('input')
   this.input.id = 'picker_input'
 
   this.el.appendChild(this.input)
 
   this.start = function () {
-    if (this.is_active) { return }
+    if (this.isActive) { return }
 
-    this.is_active = true
+    this.isActive = true
 
     this.input.setAttribute('placeholder', `${DOTGRID.tool.style().color.replace('#', '').trim()}`)
     this.input.setAttribute('maxlength', 6)
@@ -26,7 +26,7 @@ function Picker (dotgrid) {
   }
 
   this.update = function () {
-    if (!this.is_active) { return }
+    if (!this.isActive) { return }
     if (!is_color(this.input.value)) { return }
 
     const hex = `#${this.input.value}`
@@ -36,9 +36,9 @@ function Picker (dotgrid) {
   }
 
   this.stop = function () {
-    if (!this.is_active) { return }
+    if (!this.isActive) { return }
 
-    this.is_active = false
+    this.isActive = false
 
     DOTGRID.interface.el.className = ''
     this.input.blur()