JSFiddle - React, Tailwind, and code Playground

by georgedyer

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css">
<script src="https://raw.github.com/brandonaaron/jquery-mousewheel/master/jquery.mousewheel.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<div class="duration"></div>
<br/><br/>
<input class="seconds" type="text" />

CSS

input {
    width: 50px;
    border: 1px solid #eee;
    box-shadow: none;
    outline: none;
    font-size: 16px;
    text-align: center;
}

.control:hover input {
    border: 1px solid #eee;
}

.inc {
    float: left;
    clear: none;
    padding: 10px;
    background-color: #eee;
}

.control {
    background-color: #eee;
}

CoffeeScript

do ($=jQuery)->

    updateUI = ->
        data = @data 'durationInput'
        console.log 'updateUI called', data
        val = parseInt(data.val,10)
        console.log val
        mins = Math.floor (val/60)
        secs = Math.floor val%60
        console.log mins,secs
        @find('.ui-duration-minutes').val mins
        @find('.ui-duration-seconds').val secs
        

    methods =
    
        value: (val)->
            data = @data('durationInput')
            if val = parseInt(val,10)
                data.val = val
                @data 'durationInput', data
                updateUI.call @
                @
            else
                data.val
                
    
        init: (options)->
            @each =>
                @addClass('ui-duration-control').append """
                <span class="ui-duration-segment"><span><input class="ui-duration-minutes" value="0" /></span><span>minutes</span></span>
                <span class="ui-duration-segment">:</span>
                <span class="ui-duration-segment"><span><input class="ui-duration-seconds" value="0" /></span><span>seconds</span></span>
                """
                
                data = {}
                
                data.settings =
                    min: 0
                    max: 300
                    value: 0
                    change: null
            
                $.extend data.settings, options
                
                data.val = data.settings.value
                @data 'durationInput', data
                updateUI.call @
                
                
                @on 'mousewheel', (ev,delta)=>
                    console.log 'mousewheel'
                    data = @data 'durationInput'
                    delta = delta/2
                    if data.settings.min <= data.val+delta <= data.settings.max
                        data.val = Math.floor(data.val + delta) 
                        @data 'durationInput', data
                       ...