roar/assets/js/ui/tool.js

var Tool = Model({
  init: function (el) {
    this.el = el
    this.lex = new Lex (el)
    this.name = el.innerHTML
  },
  bind: function(){
    var tool = this
    tool.el.addEventListener('mousedown', function(e){
      tool.focus()
    })
    tool.el.addEventListener('contextmenu', function(e){
      tool.context(e)
    })
    if (tool.memorable) {
      // console.log(tool.name, localStorage.getItem("ascii.tools." + tool.name) )
      tool.use( localStorage.getItem("ascii.tools." + tool.name) == "true" )
    }
  },
  use: function(){},
  context: function(e){},
  done: function(){},
  focus: function(){
    // focused && focused.blur()
    current_tool && current_tool.blur()
    current_tool = this
    this.el.classList.add('focused')
    this.use()
    if (is_desktop) { cursor_input.focus() }
  },
  blur: function(){
    current_tool = null
    this.el.classList.remove('focused')
    this.done()
  }
})

var FileTool = Tool.extend({
  focus: function(){
    if (current_filetool === this) {
      this.blur()
      return
    }
    current_filetool && current_filetool.blur()
    current_filetool = this
    this.el.classList.add('focused')
    this.use()
    if (is_desktop) { cursor_input.focus() }
  },
  blur: function(){
    current_filetool = null
    this.el.classList.remove('focused')
    this.done()
  }
})

var RadioItem = Tool.extend({
  init: function(group, el){
    this.group = group
    this.el = el
  },
  focus: function(){
    this.el.classList.add('focused')
  },
  blur: function(){
    this.el.classList.remove('focused')
  },
  bind: function(){
    var control = this
    this.el.addEventListener('mousedown', function(){
      control.group.use(control)
    })
  }
})

var RadioGroup = Tool.extend({
  init: function(el){
    this.el = el
    this.controls = {}
    var names = el.innerHTML.split(' ')
    el.innerHTML = ''
    var group = this
    names.forEach(function(value){
      var el = document.createElement('span')
      el.classList.add('radio','tool')
      var control = new RadioItem(group, el)
      if (value.substr(0,1) === '*') {
        control.value = value = value.substr(1)
        group.use(control)
      }
      control.value = el.innerHTML = value
      group.controls[value] = control
      group.el.appendChild(el)
    })
  },
  use: function(control){
    if (typeof control === 'string') {
      control = this.controls[control]
    }
    this.selected_control && this.selected_control.blur()
    this.value = control.value
    this.selected_control = control
    control.focus()
    control.use()
    if (this.memorable){
      localStorage.setItem("ascii.tools." + this.name, this.value)
    } 
  },
  bind: function(){
    var tool = this
    for (var n in this.controls){
      this.controls[n].bind()
    }
    if (tool.memorable) {
      var value = localStorage.getItem("ascii.tools." + tool.name)
      if (value) tool.use(value)
    }
  }
})

var Checkbox = Tool.extend({
  init: function (el){
    this.__init(el)
    var name = this.name.replace(/^[x_] /,"")
    var state = localStorage.getItem("ascii.tools." + name) == "true" || this.name[0] == "x"
    this.name = name
    this.update(state)
  },
  update: function(state){
    if (state) this.el.innerHTML = "x " + this.name
    else       this.el.innerHTML = "_ " + this.name
    if (this.memorable) { localStorage.setItem("ascii.tools." + this.name, !! state) }
  }
})

var BlurredCheckbox = Checkbox.extend({
  focus: function(){
    this.use()
  },
  blur: function(){
    this.el.classList.remove('focused')
    this.done()
  }
})

var BlurredTool = Tool.extend({
  focus: function(){
    this.use()
  },
  blur: function(){
    this.el.classList.remove('focused')
    this.done()
  }
})

var HiddenCheckbox = BlurredCheckbox.extend({
  on: "o",
  off: ".",
  init: function (el){
    this.el = el
    this.lex = new Lex (el)
    this.name = this.el.id
    var state = localStorage.getItem("ascii.tools." + name) == "true" || this.el.innerHTML[0] == this.on
    this.update(state)
  },
  update: function(state){
    this.el.innerHTML = state ? this.on : this.off
    if (this.memorable) { localStorage.setItem("ascii.tools." + this.name, !! state) }
  }
})