freeCodeCamp/views/coursewares/show.jade

extends ../layout-wide
block content
    script(src='/js/lib/codemirror/lib/codemirror.js')
    script(src='/js/lib/codemirror/addon/edit/closebrackets.js')
    script(src='/js/lib/codemirror/addon/edit/matchbrackets.js')
    script(src='/js/lib/codemirror/addon/lint/lint.js')
    script(src='/js/lib/codemirror/addon/lint/javascript-lint.js')
    script(src='//ajax.aspnetcdn.com/ajax/jshint/r07/jshint.js')
    script(src='/js/lib/chai/chai.js')
    link(rel='stylesheet', href='/js/lib/codemirror/lib/codemirror.css')
    link(rel='stylesheet', href='/js/lib/codemirror/addon/lint/lint.css')
    link(rel='stylesheet', href='/js/lib/codemirror/theme/monokai.css')
    link(rel="stylesheet", href="http://fonts.googleapis.com/css?family=Ubuntu+Mono")
    script(src='/js/lib/codemirror/mode/javascript/javascript.js')
    script(src='/js/lib/jailed/jailed.js')
    script(src='/js/lib/bonfire/bonfireInit.js')
    script(src='/js/lib/codemirror/mode/xml/xml.js')
    script(src='/js/lib/codemirror/mode/css/css.js')
    script(src='/js/lib/codemirror/mode/htmlmixed/htmlmixed.js')
    .row
        .col-xs-12.col-sm-12.col-md-3.bonfire-top
            h2.text-center= name
            .well
                .row
                    .col-xs-12
                        .bonfire-instructions
                            p= brief
                            #brief-instructions
                                .text-center
                                    button#more-info.btn.btn-info
                                        span.ion-help-circled
                                        | More information
                            #long-instructions.row.hide
                                .col-xs-12
                            for sentence in details
                                p!= sentence
                                .text-center
                                    button#less-info.btn.btn-info
                                        span.ion-help-circled
                                        | Less information
            #submitButton.btn.btn-primary.btn-big.btn-block Run code (ctrl + enter)
            br
            form.code
                .form-group.codeMirrorView
                    textarea#codeOutput
            br
            #testSuite
            br
            script(type="text/javascript").
                var tests = !{JSON.stringify(tests)};
                var challengeSeed = !{JSON.stringify(challengeSeed)};
                var challengeEntryPoint = !{JSON.stringify(challengeEntryPoint)};
                var passedBonfireHash = !{JSON.stringify(bonfireHash)};
        .col-xs-12.col-sm-12.col-md-5
            #mainEditorPanel
                form.code
                    .form-group.codeMirrorView
                        textarea#codeEditor(autofocus=true)
                script(src='/js/lib/bonfire/bonfireFramework.js')
                    #complete-bonfire-dialog.modal(tabindex='-1')
        .col-xs-12.col-sm-12.col-md-4
            iframe.iphone#preview


        //.modal-dialog.animated.zoomIn.fast-animation
        //    .modal-content
        //        .modal-header.challenge-list-header= compliment
        //        a.close.closing-x(href='#', data-dismiss='modal', aria-hidden='true') ×
        //        .modal-body(ng-controller="pairedWithController")
        //            .text-center
        //        .animated.zoomInDown.delay-half
        //            span.landing-icon.ion-checkmark-circled.text-primary
        //        - if (cc)
        //        form.form-horizontal(novalidate='novalidate', name='completedWithForm')
        //            .form-group.text-center
        //                .col-xs-10.col-xs-offset-1.col-sm-8.col-sm-offset-2.col-md-8.col-md-offset-2.animated.fadeIn
        //                    // extra field to distract password tools like lastpass from injecting css into our username field
        //                    input.form-control(ng-show="false")
        //                    input.form-control#completed-with(name="existingUser", placeholder="If you paired, enter your pair's username here", existing-username='', ng-model="existingUser", autofocus)
        //                .col-xs-10.col-xs-offset-1.col-sm-8.col-sm-offset-2.col-md-8.col-md-offset-2(ng-show="completedWithForm.$error.exists && !completedWithForm.existingUser.$pristine && existingUser.length > 0")
        //                    alert(type='danger')
        //                        span.ion-close-circled
        //                        | Username not found
        //                        a.animated.fadeIn.btn.btn-lg.btn-primary.btn-block.next-bonfire-button(name='_csrf', value=_csrf, aria-hidden='true', ng-disabled='completedWithForm.$invalid && existingUser.length > 0') Take me to my next challenge
        //                            - if (points && points > 2)
        //            a.animated.fadeIn.btn.btn-lg.btn-block.btn-twitter(href="https://twitter.com/intent/tweet?text=I%20just%20#{verb}%20%40FreeCodeCamp%20Bonfire:%20#{name}&url=http%3A%2F%2Ffreecodecamp.com/bonfires/#{dashedName}&hashtags=LearnToCode, JavaScript" target="_blank")
        //                i.fa.fa-twitter  
        //            = phrase
        //        - else
        //        a.animated.fadeIn.btn.btn-lg.signup-btn.btn-block(href='/login') Sign in so you can save your progress
        //            #all-bonfires-dialog.modal(tabindex='-1')
        //.modal-dialog.animated.fadeInUp.fast-animation
        //    .modal-content
        //        .modal-header.challenge-list-header Bonfires
        //            a.close.closing-x(href='#', data-dismiss='modal', aria-hidden='true') ×
        //        .modal-body
        //            include ../partials/bonfires

    //img(src="https://s3.amazonaws.com/freecodecamp/iphone6-frame.png")
    //script(src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js")
    //script(src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js")
    //style(src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css")
    script.
        var delay;
        // Initialize CodeMirror editor with a nice html5 canvas demo.
        var editor = CodeMirror.fromTextArea(document.getElementById('code'), {
            mode: 'text/html'
        });
        editor.on("change", function () {
            clearTimeout(delay);
            delay = setTimeout(updatePreview, 300);
        });
        function updatePreview() {
            var previewFrame = document.getElementById('preview');
            var preview = previewFrame.contentDocument || previewFrame.contentWindow.document;
            preview.open();
            preview.write(editor.getValue());
            preview.close();
        }
        setTimeout(updatePreview, 300);