secret
Created

TimeSelect Backbone view widget

  • Download Gist
TimeSelectView.coffee
CoffeeScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119
# view extensions
 
Backbone.View::open = (cont = 'body')->
@$el.appendTo(cont)
@trigger 'open'
@
 
Backbone.View::close = ->
@$el.remove()
@trigger 'close'
@
 
 
# the widget
 
class TimeSelect extends Backbone.View
tagName: 'span'
className: 'timeSelect'
 
initialize: ->
@options.min ?= 0
@options.max ?= 3599
@options.step ?= 1
@options.default ?= 0
@options.tenths ?= false
@options.msFormat ?= true
@on 'open', ->
@secs @options.default
 
 
template: ->
input class:'minutes', value:'00'
if @options.msFormat
text ' m '
else
text ':'
input class:'seconds', value:'00'
if @options.tenths
text '.'
input class:'tenths', value:'0'
if @options.msFormat
text ' s'
 
events:
'click': -> @trigger 'focus'
'keydown .tenths': (e)->
if e.which is 38 then @add(@options.step)
if e.which is 40 then @add(-@options.step)
if e.which is 37 then @$('.seconds').focus()
if e.which is 9 then return true
if 48 <= e.which <= 57 then @digit('t',e.which-48)
'keydown .seconds': (e)->
if e.which is 38 then @add(if @options.step > 1 then @options.step else 1)
if e.which is 40 then @add(if @options.step > 1 then -@options.step else -1)
if e.which is 37 then @$('.minutes').focus()
if e.which is 39 then @$('.tenths')?.focus()
if e.which is 9 then return true
if 48 <= e.which <= 57 then @digit('s',e.which-48)
false
'keydown .minutes': (e)->
if e.which is 38 then @add(60)
if e.which is 40 then @add(-60)
if e.which is 39 then @$('.seconds').focus()
if e.which is 9 then return true
if 48 <= e.which <= 57 then @digit('m',e.which-48)
false
 
add: (s)->
console.log @secs()
newSecs = @secs() + s
console.log newSecs
if (newSecs >=0) then @secs newSecs
 
digit: (mst,d)->
switch mst
when 'm'
newMin = parseInt(@$('.minutes').val() + d) % 100
@secs ((newMin*60) + parseInt(@$('.seconds').val()) + (parseInt(@$('.tenths')?.val())/10) ? 0)
when 's'
newSec = parseInt(@$('.seconds').val() + d) % 100
@secs (parseInt(@$('.minutes').val()*60) + newSec + (parseInt(@$('.tenths')?.val())/10) ? 0)
when 't'
@secs (parseInt(@$('.minutes').val()*60) + parseInt(@$('.seconds').val()) + d/10)
 
secs: (v,silent=false)->
if v?
if @options.min <= v <= @options.max
m = Math.floor(v/60)
s = Math.floor(v-(m*60))
t = Math.round((v - Math.floor(v))*10)
@$('.minutes').val((if m < 10 then '0' else '')+m)
@$('.seconds').val((if s <10 then '0' else '')+s)
@$('.tenths')?.val(t)
if not silent then @trigger 'change', v
@$el.attr('value',Math.floor(v*10) / 10).attr('value-m',m).attr('value-s',s).attr('value-t',t)
else
@secs(@options.min,silent)
@
else
newVal = (parseInt(@$('.minutes').val()) * 60) + parseInt(@$('.seconds').val()) + (parseInt(@$('.tenths')?.val())/10 or 0)
 
render: ->
@$el.html ck.render @template, {options: @options}
 
_th = @
@$('input').focus ->
$(this).addClass('focus')
_th.trigger 'focus'
 
@$('input').blur ->
$(this).removeClass('focus')
 
@$el.bind 'mousewheel', (e)=>
e.stopPropagation()
e.preventDefault()
if e.wheelDelta > 0 then @add(@options.step) else @add(-@options.step)
@

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.