梁美英 / programming · Files

/*
*  by kira 2017-3-7
*/ 
;(function(window){
    // 储存一个树结构和编辑器的对应关系
    var treeLinkEditor  = [],   // 缓存整个目录树结构和代码编辑器的关系
        treeData,               // 缓存目录树返回结果
        mainPath,               // 运行编译时候需要知道当前是哪个文件
        fileList,               // 有值的文件数据结构
        treeObj;                // 获取ztree对象

    var playTreePathData = {"tree": []};

    var isReplayPage = false;

    /*
    * 初始化目录配置
    */
    var setting = {
        view: {
            showLine: false,            // 节点之间的连线
            selectedMulti: false,
            addHoverDom: addHoverDom,
            removeHoverDom: removeHoverDom
        },
        edit: {
            enable: true,               //可编辑
            editNameSelectAll: true,    // 全选
            showRemoveBtn: false,       // 禁止删除
            showRenameBtn: showRenameBtn
        },
        data: {
            simpleData: {
                enable: true
            }
        },
        callback: {
            beforeClick: beforeClick,
            beforeDrag: beforeDrag,
            beforeEditName: beforeEditName,
            beforeRename: beforeRename
        }    
    };

    /*
    * 定义一个目录树对象
    */
    var Dir = {
        treeData: [],       // 缓存目录树返回结果
        treeLinkEditor: [], // 缓存整个目录树结构和代码编辑器的关系
        mainPath: null,     // 运行编译时候需要知道当前是哪个文件
        treeObj: null,
        isReplayPage: false,
        init: function(){
            console.log('=======================');
        },
        initIdePage: function(el, id, isPlayPage, role){
            var _url = "../data/" + id + ".json";
            var _lang = Dir.getLangName(id);

            console.log('=======================');
            console.log('isPlayPage ----- ' + isPlayPage);
            console.log('role ----- ' + role);
            var role = getQuery('role');

            if (isPlayPage == 0) {
                $.ajax({
                    type: "GET",
                    url: _url,
                    dataType: "json",
                    contentType: "application/json",
                    success: function(res) {
                        console.log(res);
                        console.log(_lang);
                        $("title").html(_lang);
                        Dir.treeData = res[_lang];
                        Dir.treeObj = $.fn.zTree.init($(el), setting, Dir.treeData);
                        addTextareaPage(Dir.treeData);
                        CodingEditer.initCodeMirror(treeLinkEditor);
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                        console.log('Ajax langs.json error');
                        console.log(XMLHttpRequest);
                    }
                });
            }else if(isPlayPage == 1){
                var _codeReplayId = getQuery('codeReplayId');
                var _studentReplayId = getQuery('studentReplayId');

                if (role == 0) {
                    playUrl = gxb_api + "/programming/codeReplay/" + _codeReplayId + "/api";
                    getCodeData(playUrl, el)
                } else if (role == 1) {
                    playUrl = gxb_api + "/programming/student/studentReplay/" + _codeReplayId + "/api";
                    getCodeData(playUrl, el)
                }


                // if (role == 0) {
                //     playUrl = gxb_api + "/programming/codeReplay/" + _codeReplayId + "/api";
                // } else if (role == 1) {
                //     playUrl = gxb_api + "/programming/student/studentReplay/" + _codeReplayId + "/api";
                // }
                // $.ajax({
                //     type: "GET",
                //     url: playUrl,
                //     dataType: "json",
                //     contentType: "application/json",
                //     success: function(res) {
                //         console.log(res);
                //         var treeArr = res.programmingFileList;
                //         Dir.treeData = programFileListToTreeJson(treeArr);
                //         Dir.treeObj = $.fn.zTree.init($(el), setting, Dir.treeData);

                //         addTextareaPage(Dir.treeData);
                //         CodingEditer.initCodeMirror(treeLinkEditor);
                //     },
                //     error: function(XMLHttpRequest, textStatus, errorThrown) {
                //         console.log('Ajax langs.json error');
                //         console.log(XMLHttpRequest);
                //     }
                // });

            }
            
        },
        showEdite: function(obj){
            
            var _this = this,
                _file, 
                _CodeMirrorRecordId, 
                _CodeMirrorReplayId,
                _num = 0;

            console.log(treeLinkEditor)
            // 判断是否是初始化选时候调用 showEdite
            if(obj){
                for (var i = 0; i < treeLinkEditor.length; i++) {
                    if(treeLinkEditor[i].name == _this.manageName(obj.treeNode.name)){
                        console.log(_this.manageName(obj.treeNode.name));
                        _num = i;
                    }
                }
                // if(typeof obj.record != 'undefined' && obj.record){
                //     $('#recordertab a:eq(0)').tab('show');
                // }else if(typeof obj.replay != 'undefined'&& obj.replay){
                //     $('#recordertab a:eq(1)').tab('show');
                // }
            }

            _file               = treeLinkEditor[_num].file;
            _CodeMirrorRecordId = treeLinkEditor[_num].CodeMirrorRecordId;
            _CodeMirrorReplayId = treeLinkEditor[_num].CodeMirrorReplayId;
            Dir.mainPath        = treeLinkEditor[_num].filePath; // 更新mainPath值
            
            // 显示代码编辑器
            $('#' + _CodeMirrorRecordId).show().parent().show().siblings().hide().find('.CodeMirror').hide();
            $('#' + _CodeMirrorReplayId).show().parent().show().siblings().hide().find('.CodeMirror').hide();
            

            // 更新目录树选中状态
            _this.selectTreeItem(_file);
        },
        /**
         * 处理name 
         * @Author syantao
         * Created by Keystion on 2017-03-7
         * @param  {[type]} name Class1.java
         * @return {[type]}      Class1
         */
        manageName: function(name){
            if(!name){
                return false;
            }
            return name.split('.')[0];
        },
        /**
         * 返回目录结构路径
         * @Author syantao
         * Created by Keystion on 2017-01-19
         * @param  {[type]} treeNode 点击了哪一个目录
         * TODO treeNode放到一个变量或者隐藏域里面
         */
        // 根据提供的 name 获取 pId , 再根据 pId 获取 夫级 name
        // newName 替换 name 更名需求
        getTreePath: function(name, newName){
            // console.log(treeData);
            var _pid, _folder, _filename;
            var treeData = Dir.treeData;
            for (var i = 0; i < treeData.length; i++) {
                if(treeData[i].name == name){
                    _pid = treeData[i].pId;
                    if(newName){
                        _filename = newName;
                    }else{
                        _filename = treeData[i].name;
                    }
                }
            }
            for (var i = 0; i < treeData.length; i++) {
                if(treeData[i].id == _pid){
                    _folder = treeData[i].name;
                }
            }
            return _folder + '/' + _filename;
        },
        getCurrentEditor: function(id){
            var _id = id || treeLinkEditor[0].CodeMirrorRecordId,
                _name;

            for (var i = 0; i < treeLinkEditor.length; i++) {
                if(treeLinkEditor[i].CodeMirrorRecordId == _id){
                    // console.log(treeLinkEditor[i]);
                    _name = treeLinkEditor[i].name;
                }
            }

            return _name;
        },
        getTreeData: function(name){
            var _arr = [];
            var treeLinkEditor = Dir.treeLinkEditor;
            console.log(treeLinkEditor);
            if(!Dir.isReplayPage){
                // 判断是否是需要返回单文件结果
                if(name){
                    for (var i = 0; i < treeLinkEditor.length; i++) {
                        // if(treeLinkEditor[i].name == name && $.trim(treeLinkEditor[i].CodeMirrorRecord.getValue()) != ''){
                            _arr.push({
                                "path": treeLinkEditor[i].filePath,
                                "content": $.trim(treeLinkEditor[i].CodeMirrorRecord.getValue())
                            })
                        // }
                    }
                }else{
                    for (var i = 0; i < treeLinkEditor.length; i++) {
                        // if($.trim(treeLinkEditor[i].CodeMirrorRecord.getValue()) != ''){
                            _arr.push({
                                "path": treeLinkEditor[i].filePath,
                                "content": $.trim(treeLinkEditor[i].CodeMirrorRecord.getValue())
                            })
                        // }
                    }
                }
            }else{
                // 判断是否是需要返回单文件结果
                if(name){
                    for (var i = 0; i < treeLinkEditor.length; i++) {
                        // if(treeLinkEditor[i].name == name && $.trim(treeLinkEditor[i].CodeMirrorReplay.getValue()) != ''){
                            _arr.push({
                                "path": treeLinkEditor[i].filePath,
                                "content": $.trim(treeLinkEditor[i].CodeMirrorReplay.getValue())
                            })
                        // }
                    }
                }else{
                    for (var i = 0; i < treeLinkEditor.length; i++) {
                        // if($.trim(treeLinkEditor[i].CodeMirrorReplay.getValue()) != ''){
                            _arr.push({
                                "path": treeLinkEditor[i].filePath,
                                "content": $.trim(treeLinkEditor[i].CodeMirrorReplay.getValue())
                            })
                        // }
                    }
                }
            }

            // 
            if(_arr < 1){
                return false;
            }

            return _arr;
        },
        selectTreeItem: function(name){
            var _thisName = name || Dir.treeData[1].name;
            // 处理菜单选中状态
            var node = Dir.treeObj.getNodeByParam("name", _thisName, null);
            
            Dir.treeObj.selectNode(node, false, true);
        },
        // 计算屏幕尺寸，动态渲染
        resizeWindow: function(){
            // var dirWidth = 170;

            // var _programing = $('.programing')

            // var fullScreen = _programing.height();
            // var recordHeight = fullScreen - 60 - 60 - 220;


            // $('.record-wrap').height(recordHeight);

            // $('#ideEditer').height(recordHeight);
            // $('#ideDir').height(recordHeight);
            // $('#folder').height(recordHeight);

            // $('.CodeMirror').height(recordHeight);
            // $('.CodeMirror-lines').height(recordHeight);
            // $('.CodeMirror-gutter').height(recordHeight);
        },
        getLangName: function(langid){
            var langid = parseInt(langid);
            var _langName;
            switch (langid) {
                case 10:
                    _langName = "java";
                    break;
                case 35:
                    _langName = "html";
                    break;
                case 43:
                    _langName = "Objective-C";
                    break;
                case 11:
                    _langName = "C";
                    break;
                case 82:
                    _langName = "C++";
                    break;
                case 29:
                    _langName = "php";
                    break;
                case 4:
                    _langName = "python";
                    break;
                case 40:
                    _langName = "SQL";
                    break;
                case 117:
                    _langName = "R";
                    break;
                default:
                    break;
            }

            return _langName;
        }
    }



    // 当鼠标移动到节点上时，显示用户自定义控件
    function addHoverDom(treeId, treeNode) {
        // 修复第一个文件夹
        if(treeNode.isParent){
            $('a[title="'+ treeNode.name +'"]').find("#" + treeId + "_" + treeNode.id + "_edit").hide();
            return false;
        }

        // 不知道为什么 Dir 最后一项不显示编辑按钮 
        // 只能通过改变参数的值来让它显示编辑按钮
        if(treeNode.isLastNode){
            treeNode.isLastNode = false;
        }
    }

    function removeHoverDom(treeId, treeNode) {
        // console.info('removeHoverDom');
        if(!treeNode.isParent){
            $("#folder_" + treeNode.tId + "_edit").unbind().remove();
        }
    }

    // 
    function showRenameBtn(treeId, treeNode) {
        // console.log(treeNode)
        return !treeNode.isLastNode;
    }

    // 捕获单击节点之前的事件回调函数
    function beforeClick(treeId, treeNode){
        // 判断是否点击了文件夹
        if (treeNode.isParent) {
            return false;
        }
        Dir.treeObj.expandNode(treeNode);

        var check_tree_time = new Date().getTime(); // 获取焦点的时间

        CodingEditer.addRecord(treeNode, check_tree_time);

        // 处理显示目录树对应的编辑器目录
        Dir.showEdite({'treeNode': treeNode});
    }

    // 捕获节点被拖拽之前的事件回调函数
    function beforeDrag(treeId, treeNode){
        return false;
    }

    // 修改名字前验证
    function beforeRename(treeId, treeNode, newName, isCancel){
        console.log(treeNode)

        if (newName.length == 0) {
            renameAlert("文件名名称不能为空.", treeNode);
            return false;
        }else if(newName != treeNode.name){
            for (var i = 0; i < treeLinkEditor.length; i++) {
                if(treeLinkEditor[i].file === treeNode.name){
                    var _temName = treeLinkEditor[i].name;
                    var _name = Dir.manageName(newName);

                    // 缓存值得更新
                    treeLinkEditor[i].name = _name;
                    treeLinkEditor[i].file = newName;
                    treeLinkEditor[i].filePath = Dir.getTreePath(treeNode.name, newName);
                    treeLinkEditor[i].record = _name + 'Record';
                    treeLinkEditor[i].replay = _name + 'Replay';
                    treeLinkEditor[i].CodeMirrorRecordId = treeLinkEditor[i].record + 'CodeMirror';
                    treeLinkEditor[i].CodeMirrorReplayId = treeLinkEditor[i].replay + 'CodeMirror';

                    Dir.mainPath = treeLinkEditor[i].filePath;
                    // 更新DOM相关
                    $('#'+ _temName +'RecordWrap').attr({
                        id: _name +'RecordWrap'
                    });
                    $('#'+ _temName + 'Record').attr({
                        id: _name + 'Record',
                        title: _name
                    });
                    $('#'+ _temName + 'RecordCodeMirror').attr({
                        id: _name + 'RecordCodeMirror'
                    });

                    $('#'+ _temName +'ReplayWrap').attr({
                        id: _name +'ReplayWrap'
                    });
                    $('#'+ _temName + 'Replay').attr({
                        id: _name + 'Replay',
                        title: _name
                    });
                    $('#'+ _temName + 'ReplayCodeMirror').attr({
                        id: _name + 'ReplayCodeMirror'
                    });
                    // treeLinkEditor[i].CodeMirrorRecord.setValue(treeLinkEditor[i].CodeMirrorRecord.getValue() + '\n\n'+ _name);
                }
            }
        }
        return true;
    }


    function beforeEditName(treeId, treeNode){
        Dir.treeObj.selectNode(treeNode);
        setTimeout(function() {
            Dir.treeObj.editName(treeNode);
        }, 0);
        return false;
    }


    // 编辑错误提示
    function renameAlert(str, treeNode){
        setTimeout(function() {
            // var Dir = $.fn.zTree.getZTreeObj("folder");
            // cancelEditName();
            alert(str);
        }, 0);
    }

    // 校验编辑文件名
    function checkEditor(langid){

    }

    function addTextareaPage(treeData){
        var _datalist = treeData || [];
        var recordTemplate = '';
        var replayTemplate = '';
        var obj = []
        if(!_datalist.length){
            return false;
        }

        // 生成 textarea
        for (var i = 0; i < _datalist.length; i++) {
            if(!_datalist[i].isParent){
                var _file = _datalist[i].name;
                var _name = Dir.manageName(_file);
                var defaultValue;
                defaultValue = '';
                treeLinkEditor.push({
                    "name": _name, 
                    "file": _file,
                    "filePath": Dir.getTreePath(_file),
                    "record": _name + 'Record', 
                    "replay": _name + 'Replay'
                });
                // 判断是否是播放页面，如果是则不显示录制区相关dom
                if(!Dir.isReplayPage){
                    recordTemplate += '<div class="coding" id="'+ _name +'RecordWrap"><textarea id="'+ _name + 'Record" title="'+ _name +'" style="display: none;">'+defaultValue+'</textarea></div>'
                }

                replayTemplate += '<div class="coding" id="'+ _name +'ReplayWrap"><textarea id="'+ _name + 'Replay" title="'+ _name +'" style="display: none;"></textarea></div>'
            }
        }
        // 判断是否是播放页面，如果是则不显示录制区相关dom
        if(!Dir.isReplayPage){
            $('#recordzone').append(recordTemplate);
        }
        $('#replayzone').append(replayTemplate);

        Dir.treeLinkEditor = treeLinkEditor;
        
    }



    var isPlayDataError = false;
    function programFileListToTreeJson(arr, lang){
        var playTreeFolder = [], 
            playTreeFile = [];
        var n = 0, 
            m = 0,
            l = 0;
        var datalist = arr;

        if(datalist.length > 10){
            datalist.length = 10;
        }
        for (var i =  0; i < datalist.length; i++) {
            var temArr = datalist[i].path.split('/');
            if(temArr[0] != "undefined" && temArr[1] != "undefined"){
                if(playTreeFolder.length > 0){
                    for (var j = 0; j < playTreeFolder.length; j++) {
                        if(playTreeFolder[j]){
                            if(playTreeFolder[j].name != temArr[0]){
                                playTreeFolder[n] = {"name": temArr[0], "open": true, "isParent": true, "collapse": false };
                            }else{
                                // console.log('playTreeFolder[j] else');
                            }
                        }
                    }
                }else{
                    playTreeFolder[n] = {"name": temArr[0], "open": true, "isParent": true, "collapse": false };
                    n++;
                }

                if(playTreeFile.length > 0){
                    for (var j = 0; j < playTreeFile.length; j++) {
                        if(playTreeFile[j]){
                            if(playTreeFile[j].name != temArr[1]){
                                playTreeFile[m] = {'pName': temArr[0], "name": temArr[1], "type": lang };
                            }else{
                                playTreeFile[m] = {'pName': temArr[0], "name": temArr[1], "type": lang };
                                m++;
                            }
                        }
                    }
                }else{
                    playTreeFile[m] = {'pName': temArr[0], "name": temArr[1], "type": lang };
                    m++;
                }    
            }else{
                isPlayDataError = true;
                return false;
            }
        }
        if(!isPlayDataError){
            for (var i = 0; i < playTreeFolder.length; i++) {
                playTreeFolder[i].pId = 0;
                playTreeFolder[i].id = i+1;
                playTreePathData['tree'].push(playTreeFolder[i]);
            }
            for (var i = 0; i < playTreeFile.length; i++) {
                for (var j = 0; j < playTreeFolder.length; j++) {
                    if(playTreeFile[i].pName == playTreeFolder[j].name){
                        playTreeFile[i].id = (playTreeFolder[j].id.toString() + i.toString()) * 1;
                        playTreeFile[i].pId = playTreeFolder[j].id;
                        playTreePathData.tree.push(playTreeFile[i]);
                    }
                }
            }
            return playTreePathData.tree;
        }else{
            return false;
        }
    }


    // 获取code
    function getCodeData(url, el){
        console.log(url)
        $.ajax({
            type: "get",
            url: url,
            dataType: "json",
            contentType: "application/json",
            success: function(res) {
                console.log(res)
                $('.button.edit').hide();

                setTitle(res.languageid);
                Dir.languageid = res.languageid;
                var coderecords = res.codeRecordList || res.studentRecordList;
                var audioUrl = res.audioUrl;

                var treeArr = res.programmingFileList;
                Dir.treeData = programFileListToTreeJson(treeArr);
                Dir.treeObj = $.fn.zTree.init($(el), setting, Dir.treeData);
                Dir.treeObj.setting.edit.showRenameBtn = false;
                Dir.treeObj.setting.edit.enable = false;

                addTextareaPage(Dir.treeData);
                CodingEditer.initCodeMirror(treeLinkEditor);

                initTrigger(coderecords)

                AudioPlayer(audioUrl)
            },
            error: function(error) {
                console.log(error)
            }
        });
    }

    // 初始化tigger
    function initTrigger(records){
        var records = records
        for (var i = 0, leg = records.length; i < leg; i++) {
            if (!records[i].trigger) records[i].trigger = 0;
            records[i].changeobj = jQuery.parseJSON(records[i].changeobj);
            records[i].treefile = jQuery.parseJSON(records[i].treefile);
        }
        CodingEditer.records = records;
    }

    // 初始化播放音频控制条
    function AudioPlayer(audioUrl){
        var role = getQuery('role');
        if (role == 0) {
            var player = $.AudioPlayer;
            player.init({
                container: '#audioWrap',
                source: "https://gxb-file.oss-cn-beijing.aliyuncs.com" + audioUrl,
                imagePath: '../js/audioPlayer/image',
                debuggers: false,
                allowSeek: false,
                playCallback: function() { // 播放
                    console.log('++++++++');
                    CodingEditer.playCoding();
                },
                pauseCallback: function() { // 暂停
                    CodingEditer.audioTime = parseInt(player.elements.audioDom.currentTime*1000);
                    CodingEditer.pauseCode();
                },
                seekedCallback: function() { // 拖拽
                }, 
                endedCallback: function() { // 结束播放
                    playEnd()
                }
            });
        }else if(role == 1){
            $('.play-code').show();
            
        }
        
    }

    function playEnd(){
        var role = getQuery('role');
        var _chapterId = getQuery('chapterId');
        var _userId = getQuery('userId');
        if (role == 0) {
            $.ajax({
                type: "PUT",
                url: gxb_api + "/programming/learn/chapter/" + _chapterId + "/user/" + _userId,
                success: function(data){
                },
                error: function(data){
                }
            });
        }
    }

    // 设置 title
    function setTitle(languageid){
        var languageName = Dir.getLangName(languageid);
        $("title").html(languageName);
    }


    $(window).resize(function() {
        console.log('重置屏幕')
        Dir.resizeWindow();
    }).load(function() {
        console.log('重置屏幕000000')
        setTimeout(function(){
            Dir.resizeWindow();
        }, 0)
    });

    window.Dir = Dir;
    window.DirSetting = setting;

})(window)