component-fiddle

by shaunxcode

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css">
<script src="http://underscorejs.org/underscore-min.js"></script>
<link rel="stylesheet" href="http://codemirror.net/lib/codemirror.css">
<script src="http://codemirror.net/lib/codemirror.js"></script>
<script src="https://raw.github.com/shaunxcode/bling/master/index.js"></script>

SCSS

body {
    background: #efefef;
}

.toolBar {
    h4 { 
        display: inline-block; 
        margin: 0; 
        margin-right: 50px;
    }
    padding: 5px;
    background-color: #333;
    margin-bottom: 10px;
    font-weight: solid;
    color: #fff;
    .btn {
        margin-left: 5px;
    }
}


.toolBox {
    .toolBoxModule {
        background: #fff;
        margin-top: 5px;
        legend {
            margin-bottom: 5px;
        }
        padding: 5px;
        border: 1px solid #999;
        input { width: 140px; }
    }
}

.editor {
    border: 1px solid #999;
    padding: 5px;
    background: #fff;
}

.output {
    border: 1px solid #999;
    padding: 5px;
    background: #fff;
}

CoffeeScript

CompFiddle = 
    init: ->
        self = this
        @toolBar = bling ".toolBar h4, button.run.btn.btn-success, button.save.btn.btn-primary"
            appendTo: "body"
            onCreate: ->
                @h4.text "ComponentFiddle"
                @run.append (bling "i.icon-play.icon-white"), " run"
                @run.on click: ->
                    alert "run!"
                @save.append (bling "i.icon-upload.icon-white"), " save"
        
        bling ".workspace.container-fluid .row-fluid .span2.toolBox, .span5.editor, .span5.output"
            appendTo: "body"
            onCreate: ->
                @toolBox.append bling ".toolBoxModule legend, ul.components, input", ->
                    @legend.text "Components"
                    
                    @input[0].type = "text"
                    
                    @input.attr(placeholder: "Component Name").on keypress: (e) =>
                        if e.charCode is 13
                            cmpName = @input.val()
                            if cmpName.length isnt 0
                                @input.val ""
                                @components.append bling "li.component", -> 
                                    @component.text cmpName

                @toolBox.append bling ".toolBoxModule legend, ul.parts, input", ->
                    @legend.text "Component"

                    @input[0].type = "text"
                    @input.attr(placeholder: "new file")
                    
                    @ul.append bling "li.package, li.component, li.index", ->
                        console.log @
                        @package.text "package.json"
                        @component.text "component.json"
                        @index.text "index.coffee"
                    
                bling "textarea", 
                    appendTo: @editor
                    onCreate: ->
                        self.editor = CodeMirror.fromTextArea @textarea[0],
                    ...