JSFiddle - React, Tailwind, and code Playground

by skane

HTML

<script src="https://raw.github.com/wycats/handlebars.js/1.0.0-rc.3/dist/handlebars.js"></script>
<script src="https://raw.github.com/emberjs/ember.js/release-builds/ember-1.0.0-rc.1.js"></script>
<script type="text/x-handlebars" data-template-name="slider-buttons">
    <button {{action 'feature' "king" target="view.parentView"}}>King</button>
    <button {{action 'feature' "queen" target="view.parentView"}}>Queen</button>
    <p>Change animation duration w/ textfield</p>
    {{view "Ember.TextField" valueBinding="view.parentView.animationDuration"}}
</script>
<script type="text/x-handlebars" data-template-name="king">
    king
</script>
<script type="text/x-handlebars" data-template-name="queen">
    queen
</script>

CSS

div.royalty {
    border-radius: 5px;
    
}

CoffeeScript

window.App = Ember.Application.create
    LOG_TRANSITIONS: true
  
App.Router.map () ->
    @resource "slider"
    
App.IndexRoute = Em.Route.extend
    redirect: () ->
        @replaceWith "slider"
    
App.RoyaltyView = Em.View.extend
    classNames: ['royalty']
    attributeBindings: ['style']
    bgColor: 'red'
    height: 300
    width: 150
    top: 150
    left: 0
    style: (->
         """position: absolute;
            height: #{@get('height')}px; 
            width: #{@get('width')}px; 
            background-color: #{@get('bgColor')};
            left: #{@get('left')}px;
            top: #{@get('top')}px;"""
    ).property('height', 'width', 'top', 'left', 'bgColor')
    
    prepareToEnter: () ->
        @incrementProperty('left', @get('width'))   
        console.log @get('left')
 
App.FeatureManager = Em.StateManager.extend
    defaultAction: () ->
        console.log "nothing to do here"
    
    initialState: 'queenFeatured'
    
    queenFeatured: Em.State.extend
        feature: (manager, view, royalty) ->
            if royalty is 'king'
                manager.transitionTo "kingFeatured"
                view.initAnimation 'king', 'queen'
            
    kingFeatured: Em.State.extend
        feature: (manager, view, royalty) ->
            if royalty is 'queen'
                manager.transitionTo "queenFeatured"
                view.initAnimation 'queen', 'king'
            
App.SliderView = Em.ContainerView.extend
    featureManager: App.FeatureManager.create()
                
    childViews: ['buttons', 'king', 'queen']
    height: 300
    width: 150
    animationDuration: 200
    frameCounter: 0
    framesPerSecond: 30
    framesTotal: (->
        @get('animationDuration')/1000 * @get('framesPerSecond')                  
    ).property('animationDuration', 'framesPerSecond')
    
    frameInterval: (->
        @get('animationDuration') / @get('framesTotal')
    ).property('framesTotal', 'animationDuration')
    
    animationIncrement:...