fiddle-like-style-guide

by amindunited

HTML

<script type="text/x-handlebars" data-template-name="application">
    <h1>Application</h1>
    <nav>
        <li>{{#link-to 'modules'}}Modules{{/link-to}}</li>
    </nav>
    {{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="modules">
    <h2>Elements</h2>
    {{log content.all}}
    {{cloaked-collection cloakView="module" content=content.all tagName="ul"}}
</script>
<script type="text/x-handlebars" data-template-name="module">
    <h3>hmmmm {{title}}</h3>
    <div class="codeWrap">
        {{#each file in code.html}}
            <li>{{file.name}}</li>
        {{/each}}
        
        {{#each file in code.css}}
            <li>{{file.name}}</li>
        {{/each}}
        
        {{#each file in code.js}}
            <li>{{file.name}}</li>
        {{/each}}
    </div>
    <div class="resultWrap">
        <iframe>
            
            
        </iframe>
    </div>
</script>

<!-- 
JS LIBS
-->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-mockjax/1.5.3/jquery.mockjax.min.js"></script>

<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ember.js/1.7.0/ember.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ember-data.js/1.0.0-beta.8/ember-data.min.js"></script>
<script src="https://rawgithub.com/eviltrout/ember-cloaking/master/ember-cloaking.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.1.3/ace.js"></script>

CSS

.module {
    width: 100%;
    border: solid 10px #ededed;
    border-radius: 10px
}

JavaScript

App = Em.Application.create();

App.Router.map(function(){
    this.resource('modules', {path: '/modules'}, function(){
        
    });
});

App.Modules = Em.Object.create({
    all: [{title:'one'}, {title:'two'}, {title:'three'},
        {
        title: 'Grid',
        vendor: [{
            "jquery": "2.0.3",
            "jquery": "//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"
        }],
        code: {
            js: [{
                name: 'index.js',
                content: 'console.log("Aww...ya!");'
                
            }],
            css: [{
                name: 'index.css',
                content: 'body{ background-color: red;}'
            
            }],
            html: [{
                name: 'index.html',
                content: '<h1>Body top</h1>'
            }]
        }
        }, {title:'done'}]
});
App.ModulesController = Em.Controller.extend({
    content: App.Modules
});
App.ModuleView = Em.View.extend({
    templateName: 'module',
    didInsertElement: function() {
        var ifrm = this.$('iframe')[0];
        ifrm = (ifrm.contentWindow) ? ifrm.contentWindow :
            (ifrm.contentDocument.document) ? ifrm.contentDocument.document :
            ifrm.contentDocument;

        ifrm.document.open();
        ifrm.document.close();
        
        console.log("my css is ", this.get('parentView.content.code'));
        
        var css = this.buildCSS();
        $("head", ifrm.document).html($(css));

        var body = this.buildBody();
        $("body", ifrm.document).html(body);
        
        var js = this.buildJS();
        $("body", ifrm.document).append($(js));        

    },
    buildCSS: function(){
        console.log("in build css: ", this.get('parentView.content.code.css')); 
        var result = '';
        var csses = this.get('parentView.content.code.css');
        if (!csses) {
            return;
        } 
        csses.forEach(function(obj, index, arr){
            result +=...