ToolBox.js 7.55 KB
;(function(window){
    var template = '<div class="record-ctrl">'+
                     '<div class="audio-view" style="display: none;">'+
                        '<audio id="audio"></audio>'+
                        '</div>'+
                     '<div class="ctrl-wrap">'+
                        '<div class="tool-item" id="start-recording" data="1" title="开始录制"><img src="" alt="" /></div>'+
                        '<div class="tool-item" id="stop-recording" data="1" title="结束录制"><img src="" alt="" /></div>'+
                        '<div class="tool-item" id="re-recoding" data="1" title="开始录制"><img src="" alt="" /></div>'+
                        '<div class="tool-item" id="audio-play" data="1" title="开始录制"><img src="" alt="" /></div>'+
                     '</div>'+
                     '<div class="recording-time" id="timer" value="">00:00:00</div>'+
                     '<div class="save-wrap">'+
                        '<input type="button" id="upload" class="upload-teach" disabled="disabled" value="保存">'+
                        '<input type="button" id="savecode" class="upload-stud" style="display: none;" disabled="disabled" value="保存">'+
                        '<input type="button" id="cancel" value="关闭">'+
                     '</div>'+
                   '</div>';

    function ToolBox(){
        this.userId = getQuery('languageid');
        this.languageid = getQuery('languageid');
        this.template = template;
        this.init.apply(this, arguments);
    }

    ToolBox.prototype = {
        constructor: ToolBox,
        options: {
            el: "#toolBox",             // 控制条插入位置id
            role: 0,                    // 角色
            startCallback: null,        // 开始录制代码
            stopCallback: null,         // 结束录制
            restartCallback: null,      // 重新录制代码
            playCallback: null,         // 播放代码
            uploadCallback: null,       // 上传音频
            saveCallback: null,         // 上传代码
            cancelCallback: null,       // 关闭 
            compileCallback: null       // 编译
        },
        init: function(options){
            var _this = this;
            _this.options = $.extend(this.options, options);

            var toolBox = this.options.el;
            $(toolBox).html(template)

            $('#start-recording img').attr('src', '../img/ideicon/record.svg');
            $('#stop-recording img').attr('src', '../img/ideicon/stop.svg');
            $('#re-recoding img').attr('src', '../img/ideicon/re-record.svg');
            $('#audio-play img').attr('src', '../img/ideicon/play.svg');

            $('#start-recording').show()

            _this.events();

        },
        events: function(){
            var _this = this;
            $('#start-recording').on('click', function(){ _this.startRecording(); })
            $('#stop-recording').on('click', function(){ _this.stopRecording(); })
            $('#re-recoding').on('click', function(){ _this.restartRecord(); })
            $('#audio-play').on('click', function(){ _this.playCode(); })
            $('#upload').on('click', function(){ _this.uploadAudio(); })
            $('#savecode').on('click', function(){ _this.saveCode(); })
            $('#cancel').on('click', function(){ _this.cancel(); })
        },
        startRecording: function(callback){
            console.log('startRecord');
            $('#start-recording').hide()
            $('#stop-recording').show()
            Hourglass.init()
            var _this = this;
            if (typeof _this.options.startRecordingCallback == 'function') {
                console.log('startRecordingCallback');
                _this.options.startRecordingCallback();
            }
            recordAudio()

        },
        stopRecording: function(){
            console.log('停止录制');
            $('#stop-recording').hide()
            $('#re-recoding').show()
            $('#audio-play').show()
            Hourglass.stopTimer()
            var _this = this;
            _this.readOnly(1)

            if (typeof _this.options.stopCallback == 'function') {
                console.log('stopCallback');
                _this.options.stopCallback();
            }

            recorder.stop();
            recorder.getBlobData();

        },
        restartRecord: function(){
            $('#re-recoding').hide()
            $('#stop-recording').show()
            $('#audio-play').hide()
            console.log('重新录制代码');
            var _this = this;
            $('#recordertab a:first').tab('show');
            // CodingEditer.records = [];
            _this.readOnly(0)
            recordAudio()
        },
        playCode: function(){
            console.log('播放代码');
            $('#audio')[0].play();
            Hourglass.init()
            CodingEditer.playCoding()
        },
        uploadAudio: function(){
            console.log('uploadAudio');
        },
        saveCode: function(){
            console.log('saveCode');
        },
        cancel: function(){
            console.log('cancel');
        },
        /*
         * 修改代码状态
         */
        readOnly: function(){
            // status: 1 禁止修改,0 允许修改
            var treeLinkEditor = Dir.treeLinkEditor;
            
            if (status == 0 && status == 1) {
                for (var i = 0; i < treeLinkEditor.length; i++) {
                    treeLinkEditor[i].CodeMirrorRecord.setOption('readOnly', status);
                    treeLinkEditor[i].CodeMirrorReplay.setOption('readOnly', status);
                }
            }else{
                console.log('status undefind');
            }
        }
    };

    function recordAudio(){
        HZRecorder.get(function(rec) {
            console.log(rec);
            recorder = rec;
            recorder.start();
            CodingEditer.initRecodesValue()

        });
    }

    // 编译结果
    function compileResult(data, value) {
        var runtimeArgus = value || '';
        console.info('compileResult')
        if (value != '') {
            $('#cmprun-tabs a[href="#stdin"]').tab('show');
            $('#stdin input').val(runtimeArgus);
        }else{
            return;
        }

        if (data.status == 200) {

            $('#cmpinfo').html('<p class="text-warning">' + data.compilerInfo.replace(/\n/g, "<br />") + "</p>");        
            $('#stderr').html('<p class="text-danger">' + data.error.replace(/\n/g, "<br />") + "</p>");       
            $('#output').html('<p class="text-success">' + data.content.replace(/\n/g, "<br />") + "</p>");  

            if(data.compilerInfo.length){
                $('#cmprun-tabs a[href="#cmpinfo"]').tab('show');
            }else if(data.error.length){
                $('#cmprun-tabs a[href="#stderr"]').tab('show');
            }else if(data.content.length){
                $('#cmprun-tabs a[href="#output"]').tab('show');
            }

            if(!data.compilerInfo.length){
                $('#cmpinfo').prepend('<p class="alert alert-success"><i class="glyphicon glyphicon-ok-sign"></i> 编译已成功</p>');
            }
        }else if(data.status == 500){
            $('#cmprun-tabs a[href="#stderr"]').tab('show');
            $('#stderr').html('<p class="text-danger">' + data.error.replace(/\n/g, "<br />") + "</p>");
        }else{
            $('#cmpinfo').html('<p class="alert alert-danger"><i class="glyphicon glyphicon-exclamation-sign"></i> 请求失败 </p>');
            $('#cmprun-tabs a[href="#cmpinfo"]').tab('show');
        }
    }

    window.ToolBox = ToolBox;
})(window)