codepedia2/static/js/source.js

var flag = true;//左侧默认显示

function getCookie(name) {
    var cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        var cookies = document.cookie.split(';');
        for (var i = 0; i < cookies.length; i++) {
            var cookie = jQuery.trim(cookies[i]);
            // Does this cookie string begin with the name we want?
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}
var csrftoken = getCookie('csrftoken');

function show_annotation(file_id, line_num) {
    ev = window.event;
        if(ev==undefined){
        ev=arguments.callee.caller.arguments[0]||window.event;
    }
    var mousePos = mouseCoords(ev)

    $.ajax({
        cache: false,
        type: "POST",
        url: '/operations/show_annotation/',
        data: { 'file_id': file_id, 'line_num': line_num },
        dataType: 'json',
        async: true,
        beforeSend: function (xhr, settings) {
            xhr.setRequestHeader("X-CSRFToken", csrftoken);
        },
        success: function (data) {
            if (data.status === "success") {
				//console.log("linestatus_"+line_num);
                //$("#loadCommentpanel").html(data.html_str);
                //$("#commentPanel").css("top", mousePos.y);
                //$("#commentPanel").css("left", mousePos.x+35);
                //$("#loadCommentpanel").show();
                //console.log(data.html_str);
                $("#ItemcommentPanel").remove()
                var html="<div id='ItemcommentPanel'>"+data.html_str+"</div>"
                $("#linestatus_"+file_id+"_"+line_num).append(html);
            }else{
                alert(data.msg)
            }

        }
    });
}

function close_modify_anno(){
     $("#modification").show();
    $(".modify_anno_div").remove();
    $("#modify_anno_textarea").attr("readonly","readonly")
    
    
    ev = window.event;
    if(ev==undefined){
        ev=arguments.callee.caller.arguments[0]||window.event;
    }
    ev.stopPropagation();
}

//注入html代码
function inject_modifyAnno_html(item,file_id,linenum,anno_id) {
    $("#modification").hide();
    $(".modify_anno_div").remove();
    $("#modify_anno_textarea").removeAttr("readonly");
    $("#modify_anno_textarea").focus()
    
    html_str =  '<div class="modify_anno_div" style="display:block">'+
                    '<a href="javascript:void(0)" onclick="close_modify_anno()" class="btn fr mt10 mb10">取消</a>'+
                    '<a href="javascript:void(0)" onclick="modify_anno('+file_id+','+linenum+','+anno_id+')" class="btn btn-blue fr mt10 mb10 mr10">提交</a>'+
                '</div>';
    $(item).after(html_str)
    ev = window.event;
    if(ev==undefined){
        ev=arguments.callee.caller.arguments[0]||window.event;
    }
    ev.stopPropagation();
}

// FIXME
function modify_anno(file_id,line_num,anno_id){
    // 获取修改后的内容
    var content=$("#modify_anno_textarea").val();
    if (content == null || content == undefined || content.trim() == '') {
        alert("内容不能为空");
        return;
    }
    $.ajax({
        cache: false,
        type: "POST",
        url: '/operations/modify_anno/',
        data: { 'file_id': file_id, 'line_num': line_num,'anno_id':anno_id,'content':content },
        dataType: 'json',
        async: true,
        beforeSend: function (xhr, settings) {
            xhr.setRequestHeader("X-CSRFToken", csrftoken);
        },
        success: function (data) {
            if (data.status === "success") {
                alert(data.msg)
                $("#ItemcommentPanel").remove()
                $("."+file_id+line_num).text(data.anno_content)
                show_annotation(file_id,line_num)
            }else{
                alert(data.msg)
            }
        }
    });
}

// FIXME
function show_issue_question(file_id, line_num, issue_ids) {
    issueid_str=issue_ids.toString()
    ev = window.event;
        if(ev==undefined){
        ev=arguments.callee.caller.arguments[0]||window.event;
    }
    var mousePos = mouseCoords(ev)
    //发送问题id，返回问题内容
    $.ajax({
        cache: false,
        type: "POST",
        url: '/operations/show_issue_question/',
        data: { 'file_id': file_id, 'line_num': line_num, 'issue_ids': issueid_str},
        dataType: 'json',
        async: true,
        beforeSend: function (xhr, settings) {
            xhr.setRequestHeader("X-CSRFToken", csrftoken);
        },
        success: function (data) {
            if(data.status=='success'){
				var html="<div id='ItemquestionPanel'>"+data.html_str+"</div>";
				$("#linestatus_"+file_id+"_"+line_num).append(html);
//                $("#loadQuestionpanel").html(data.html_str);
                if (data.issueAnswers) {
                    //字符串转换成整型数组
                    var dataStrArr = issueid_str.substring(1, issueid_str.length - 1).split(",")
                    var issue_ids = dataStrArr.map(function (data) {
                        return +data;
                    });
                    //
                    issueAnswers = JSON.parse(data.issueAnswers);
                    issueStandardAnswers = JSON.parse(data.issueStandardAnswers);

                    let count = 0;
                    for (let i = 0; i < issue_ids.length; i++) {
                        issue_id = issue_ids[i]

                        if (issue_id == issueAnswers[count].fields.issue) {
                            var radios = document.getElementsByName("issue_" + issue_id)
                            user_answer = issueAnswers[0].fields.content;
                            standard_answer = issueStandardAnswers[0].fields.choice_position;
                            if (user_answer == standard_answer) {
                                radios[user_answer - 1].parentNode.style.color = "green";
                            } else {
                                radios[parseInt(user_answer) - 1].parentNode.style.color = "red";
                                radios[parseInt(standard_answer) - 1].parentNode.style.color = "green";
                            }
                            document.getElementById("submit_onechoice_" + issue_id).style.display = "None";
                            count = count + 1
                        }
                    }
                }
                //$("#questionPanel").css("top", mousePos.y);
                //$("#questionPanel").css("left", mousePos.x - 400);
                //$("#loadQuestionpanel").show();
            }else{
                alert(data.msg)
            }
        }
    });
}

function add_vote(type, id, num) {
    // alert(1111)
}

function submit_onechoice_issue(issue_id) {
    // 获取问题的内容
    var content = $("input[name='issue_" + issue_id + "']:checked").val()
    $.ajax({
        cache: false,
        type: "POST",
        url: '/operations/add_issue_answer/',
        data: { 'content': content, 'issue_id': issue_id },
        dataType: 'json',
        async: true,
        beforeSend: function (xhr, settings) {
            xhr.setRequestHeader("X-CSRFToken", csrftoken);
        },
        success: function (data) {
            if (data.status === 'success') {
                var radios = document.getElementsByName("issue_" + issue_id)
                var choose = parseInt(content) - 1
                if (content == data.standAnswer){
                    radios[choose].parentNode.style.color = "green";
                }else{
                    radios[choose].parentNode.style.color = "red";
                    radios[parseInt(data.standAnswer)-1].parentNode.style.color = "green";
                }
                document.getElementById("submit_onechoice_"+issue_id).style.display="None";
            } else {
                alert(data.msg)
            }
        }
    });
}


function add_comment_action(item, id, type) {
    var content = $("#writetext_" + id).val();
    if (content == "") {
        confirm("请输入评论内容");
        return;
    }
    //发送一个ajax请求
    $.ajax({
        cache: false,
        type: "POST",
        url: '/operations/add_comment/',
        data: { 'object_id': id, 'type': type, "content": content },
        dataType: 'json',
        async: true,
        beforeSend: function (xhr, settings) {
            xhr.setRequestHeader("X-CSRFToken", csrftoken);
        },
        success: function (data) {
            if (data.status === 'success') {
                html_str = data.html_str
                show_new_comment(item, html_str);
            } else {
                alert(data.msg);
            }
        }
    });
	ev = window.event;
    if(ev==undefined){
        ev=arguments.callee.caller.arguments[0]||window.event;
    }
    ev.stopPropagation();
}

//添加评论
function show_new_comment(item, html_str) {
    $(item).parents(".parthalf_comment").after(html_str);

    $(item).parents(".comment-btn").find(".comment-write").addClass("none");
    $(item).parents(".comment-btn").find("#addcom").removeClass("none");
    $(item).siblings(".writetext").val("");
}

function add_question_answer(item,question_id) {
    // 获取回答的内容
    var content = $("#responseInput_" + question_id).val();
    if (content == "") {
        confirm("请输入回答内容");
        return;
    }
    $.ajax({
        cache: false,
        type: "POST",
        url: '/operations/add_question_answer/',
        data: { 'question_id': question_id,"content": content},
        dataType: 'json',
        async: true,
        beforeSend: function (xhr, settings) {
            xhr.setRequestHeader("X-CSRFToken", csrftoken);
        },
        success: function (data) {
            if (data.status === 'success') {
                var username = data.username;
                show_new_question_answer(item, content, username);
            } else {
                alert(data.msg);
            }
        }
    });
}

function show_new_question_answer(item, content, username) {

    var html = '<div class="comments clearfix"><div class="fl"><img src="/static/image/users/default.png" width="45px" height="45px" class="radius" /></div>'
    html += '<div class="fl comments-right">'
    html += '<div class="question-comment">';
    html += '<p><span class="comments-name">' + username+'</span><span class="font-12 color-grey-c">10分钟前</span></p>';
    html += '<div class="comments-content">'+content+'</div>';
    html += '</div></div></div>'

    $(item).parents(".responsePanel").before(html);
    $(item).parent().siblings(".responseInput").val("");
}


function add_annotation(item,file_id, line_num) {
    // 获取当前是注释还是问题
    var selectValue = $(item).siblings(".put-select").find(".active").html().trim();
    var text_context = "#addno-text-" + file_id+"-"+line_num;
    var content = $(text_context).val();
    console.log(content);


    if (content.trim().length == 0) {
        alert("内容不能为空")
        return;
    }
    if (selectValue == "注释") {
        // 向addAnnatation中发请求
        submit_annotation(file_id, line_num, content);
        
    } else {
        submit_question(file_id, line_num, content);
    }
}

function submit_annotation(file_id, line_num, content) {
    $.ajax({
        cache: false,
        type: "POST",
        url: '/operations/add_annotation/',
        data: { 'file_id': file_id, 'linenum': line_num, 'content': content },
        dataType: 'json',
        async: true,
        beforeSend: function (xhr, settings) {
            xhr.setRequestHeader("X-CSRFToken", csrftoken);
        },
        success: function (data) {
            if (data.status == 'success') {
                // 因为可能注释或问题没有值的时候，不会为该代码块添加html代码，所以首先判断
                // 然后将注释数+1
                var codeopration_anno_div = $("#codeopration_anno_"+file_id+"_" + line_num).html()
                var str = '<span id="annonums_' + line_num + '" class="annonums" onclick="show_annotation(' + file_id + ',' + line_num + ')">';
                str +='</span>';
                $("#codeopration_anno_" + +file_id + "_" + line_num).html(str);
                $(".addno-panel").hide();
                $(".source-addno-panel").remove();
                // show_annotation(file_id,line_num);
                //将注释添加到当前行的上一行
                console.log(data.anno_content)
                var contenthtml ='<div class="linenum"></div>'+'<div class="sourcecode">'+'<pre class="mypre newaddmypre hljs-comment ' + file_id+line_num + '">'+data.anno_content+'</pre>'+'</div>'+'<div class="linestatus"></div>';
                var html = '<div class="newcodeline newcodelinebox">'+contenthtml+'</div>';
                var id=file_id+'_'+"L"+line_num;
                console.log(html)
                $("#"+id).before(html);
            }else{
                alert(data.msg)
            }
        }
    });
}



function submit_question(file_id, line_num, content) {
    $.ajax({
        cache: false,
        type: "POST",
        url: '/operations/add_question/',
        data: { 'file_id': file_id, 'linenum': line_num, 'content': content },
        dataType: 'json',
        async: true,
        beforeSend: function (xhr, settings) {
            xhr.setRequestHeader("X-CSRFToken", csrftoken);
        },
        success: function (data) {
            if (data.status == 'success') {
                var codeopration_anno_div = $("#codeopration_question_" + file_id + "_" + line_num).html()
                if (codeopration_anno_div.trim().length == 0) {
                    var str = '<span id="questionums_' + line_num + '" class="questionnums" onclick="show_issue_question(' + file_id + ',' + line_num + ',[])">';
                    str += '</span>'
                    $("#codeopration_question_" + file_id + "_" + line_num).html(str);
                }
                $(".addno-panel").hide();
                $(".source-addno-panel").remove();
                show_issue_question(file_id,line_num,[]);
                // else {
                //     var question_before = $("#questionums_" + line_num).text();
                //     $("#questionums_" + line_num).html(parseInt(question_before) + 1);
                // }
            }else{
                alert(data.msg);
            }


        }
    });
}

function search_symbol(args) {

    ev = window.event
        if(ev==undefined){
        ev=arguments.callee.caller.arguments[0]||window.event;
    }
    var mousePos = mouseCoords(ev)

    $.ajax({
        cache: false,
        type: "POST",
        url: '/operations/show_method_info/',
        data: { 'args': args },
        dataType: 'json',
        async: true,
        beforeSend: function (xhr, settings) {
            xhr.setRequestHeader("X-CSRFToken", csrftoken);
        },
        success: function (data) {
            if (data.status === 'success') {
                // console.log(context);
                $("#search_response").css("top", mousePos.y);
                $("#search_response").css("left", mousePos.x);
                $("#search_response").html(data.html_str);
                $("#search_response").show();
                // ev.stopPropagation();
            }
        }
    });
}


navigation_map = new Map()

function show_navigation() {
    // 首先要获取当前打开的标签页，或者也可以获取当前的路径
    // 获取当前的项目名称
    var file_path=document.getElementsByClassName("filename")[0].innerHTML;
    var project_path=$("#projectName").text()
    if( navigation_map.has(project_path+file_path)){
        content = navigation_map.get(project_path + file_path);
        $("#structure-context").html(content)
        // 加载navigation_tree
        deal_for_navigation_tree()
        return;
    }

    $.ajax({
        cache: false,
        type: "POST",
        url: '/operations/show_navigation/',
        data: { 'project_path': project_path, 'file_path': file_path },
        dataType: 'json',
        async: true,
        beforeSend: function (xhr, settings) {
            xhr.setRequestHeader("X-CSRFToken", csrftoken);
        },

        success: function (data) {
            if (data.status === 'success') {
                var content = "<div id='navigation_tree'>";
                var obj = data.msg;
                var file_id = data.file_id
                for (let i = 0; i < obj.length; i++) {
                    var type = obj[i][0];
                    var str = '';
                    str += "<ul><li>";
                    str += type

                    var items = obj[i][1];
                    for (let j = 0; j < items.length; j++) {
                        var name = items[j][0];
                        var linenum = items[j][1];
                        str += "<ul><li data-jstree='{\"icon\":\"fa fa-file-code-o color-blue\"}'>"
                        str += "<a class='def' href='#"+file_id+"_L" + linenum + "'>" + name + "</a>";
                        str += "</li></ul>"
                    }
                    
                    str += "</li></ul>"
                    content += str;
                }
                content += "</div>"
                // document.getElementById("annotation").style.display="block";
                navigation_map.set(project_path + file_path, content)
                $("#structure-context").html(content);
                // 加载navigation_tree
                deal_for_navigation_tree()
            }
            else {
                navigation_map.set(project_path + file_path, "")
                $("#structure-context").html("")
            }
        }
    });
}


function deal_for_navigation_tree(){
    $("#navigation_tree").jstree()
    $("#navigation_tree").jstree().open_all()
    $("#navigation_tree li").click(function(){
        location.href = $(this).find("a").attr("href");
    });
}
function show_currentLine(linenum) {
    // document.getElementById("code_" + linenum).style.backgroundColor = '#f1efec';
    document.getElementById("addanno_" + linenum).style.visibility = 'visible';
}

function hide_currentLine(linenum) {
    // document.getElementById("code_" + linenum).style.backgroundColor = 'white';
    document.getElementById("addanno_" + linenum).style.visibility = 'hidden';
}

$(function () {

    $("#filelist-content .item").click(function () {
        if ($(this).siblings(".sub-item").length > 0 && $(this).attr("show") == "0") {
            $(this).siblings(".sub-item").show();
            $(this).attr("show", "1");
        } else if ($(this).attr("show") == "1") {
            $(this).siblings(".sub-item").hide();
            $(this).attr("show", "0");
        }
    })

    $(".left-tab li").click(function () {
        // alert("left-tab li")
        $(".left-tab li").removeClass("active");
        $(this).addClass("active");
        $(".left-rightlist").hide();

        $(".left-rightlist").eq($(this).index()).show();

        if (flag == false) {
            $("#right_code").css("width", "80%");
            $(".left").animate({ "width": "20%" }, 1000);
        }

    })

    /*隐藏左侧部分*/
    $(".hideleft").click(function () {
        var wid = $(".left").width();
        $(".left").animate({ "width": "50px" }, 800);
        $(".left-tab li").removeClass("active");
        $("#right_code").width(parseInt($("#right_code").width()) + wid);
        flag = false;
    })


    //滚动codepanel隐藏搜索结果
    $("#right_code").scroll(function () {
        $("#search_response").hide();
    })

    $(".addno-panel").click(function (event) {
        ev =  window.event;
    if(ev==undefined){
        ev=arguments.callee.caller.arguments[0]||window.event;
    }
        ev.stopPropagation();
    })

    $(".addanno").live("click",function (event) {
        $(".addno-panel").hide();
        $(this).siblings(".addno-panel").show();
        $(".addanno").find("i").removeClass("color-dark-57").addClass("color-grey-c");
        $(this).find("i").removeClass("color-grey-c").addClass("color-dark-57");
        ev =  window.event;
        if(ev==undefined){
            ev=arguments.callee.caller.arguments[0]||window.event;
        }
        ev.stopPropagation();
    })

    $("body").click(function (event) {
		//隐藏添加注释或者问题的弹框
        $(".addno-panel").hide();
        $(".source-addno-panel").remove();
        $(".addanno").find("i").removeClass("color-dark-57").addClass("color-grey-c");
		//隐藏评论弹框
		if($(event.target).parents("#ItemcommentPanel").length == 0){
			$("#ItemcommentPanel").hide();
			$("#ItemcommentPanel").remove();
		}
		//隐藏问题弹框
		if($(event.target).parents("#ItemquestionPanel").length == 0){
			$("#ItemquestionPanel").hide();
			$("#ItemquestionPanel").remove();
		}
    })

    $("body").on('click', '.addno-panel', function(e) {
        e.stopPropagation();
    });

    $("#ItemcommentPanel").on('click', '#commentPanel', function (e) {
        e.stopPropagation();
    });

    $("#loadQuestionpanel").on('click', '#questionPanel', function (e) {
        e.stopPropagation();
    });

    //隐藏问题框
    $("#loadQuestionpanel").click(function (event) {
        $("#loadQuestionpanel").hide();
    })
    //点击问题框里的内容，阻止冒泡
    $("#questionPanel").click(function (event) {
        ev =  window.event;
        if(ev==undefined){
            ev=arguments.callee.caller.arguments[0]||window.event;
        }
        ev.stopPropagation();
    })
})
function addcomments(item) {
    $(item).siblings(".comment-write").removeClass("none");
    $(item).addClass("none");
	ev = window.event;
	    if(ev==undefined){
        ev=arguments.callee.caller.arguments[0]||window.event;
    }
    ev.stopPropagation();
}

function cancelcom(item) {
    $(item).parents(".comment-write").siblings("#addcom").removeClass("none");
    $(item).parents(".comment-write").addClass("none");
	ev = window.event;
	    if(ev==undefined){
        ev=arguments.callee.caller.arguments[0]||window.event;
    }
    ev.stopPropagation();
}

//隐藏右侧部分
function colserightpanel() {
    if (flag) {
        $(".codereading").css("width", "80%");
    } else {
        var rightwid = $(".right").width();
        var codewid = $(".codereading").width();
        $(".codereading").css("width", parseInt(codewid) + parseInt(rightwid));
    }
    $(".right").addClass("none");
}

function mouseCoords(ev) {
    if (ev.pageX || ev.pageY) {
        return {
            x: ev.pageX,
            y: ev.pageY
        };
    }
    return {
        x: ev.clientX + document.body.scrollLeft - document.body.clientLeft,
        y: ev.clientY + document.body.scrollTop - document.body.clientTop
    };
}

var tabSet = new Set();
// var issue_map = new Map();
var right_map = new Map();
var tree_nodes = new Map();

function path_predeal(path){
    // path = path.replace('.', '');
    // path = path.replace('/', '_');
    path = path.split('.').join('');
    path = path.split('/').join('_');
    return path;
}

// 打开一个已经存在的标签页
// 注意这个还得将对应的路径更改了
function open_tab(path) {

    var ip=window.location.host;  //端口号
    // console.log(window.location.pathname);  端口号后面的路径
    var projectName= $("#projectName").text();
    var newhtefpath = "/projects/"+projectName+path;
    var stateObject = {};
    if(path==""){
        newhtefpath += "/";
    }
    //修改地址栏中的地址
    history.pushState(stateObject, ip, newhtefpath);

    path_input=path
    path = path_predeal(path)

    $('#jstree').jstree("deselect_all", true);
    $('#jstree').jstree("select_node", tree_nodes[path]);

    var tabcontent = document.getElementsByClassName("codereading");
    for (var i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }

    var tab_items = document.getElementsByClassName("tab_item");
    for (var i = 0; i < tab_items.length; i++) {
        // debugger;
        tab_items[i].className = tab_items[i].className.replace(" active", "");
    }

    document.getElementById("code_" + path).style.display = "block";
    document.getElementById("tab_" + path).style.display = "block";
    document.getElementById("tab_" + path).className += " active";

    document.getElementsByClassName("filename")[0].innerHTML = path_input;

    if(!right_map.has(path)){
        window.setTimeout(function () { $("#right_panel").html(right_map[path]) }, 3000);
    }else{
        $("#right_panel").html(right_map[path]);
    }

    // if(!issue_map.has(path)){
    //     window.setTimeout(function () { $("#hotest_issue").html(issue_map[path]) }, 3000);
    // }else{
    //     $("#hotest_issue").html(issue_map[path]);
    // }
    show_navigation();
}

function generate_codereading_content(lines,self_annos,fileid,annos_count,issues_count,questions_count,issues,language){
    var htmlstr = '<div class="code_file">'
    for(linenum in lines){
        line = lines[linenum]
        // 如果当前行有注释，则先生成注释行
        if(linenum in self_annos){
            htmlstr += generate_codereading_anno_line(fileid,linenum,self_annos)
        }
        // 无论当前行是否有注释，都应该生成代码行
        htmlstr += generate_codereading_line(fileid,linenum,annos_count,issues_count,questions_count,line,issues,language)
    }
    htmlstr += '</div>'
    return htmlstr
}

function generate_codereading_anno_line(file_id,linenum,self_annos){
    var htmlstr = ''
    htmlstr += '<div class="newcodeline newcodelinebox">'
    htmlstr +=      '<div class="sourcecode">'
    htmlstr +=          '<pre class="mypre mypre newmypre hljs-comment '+file_id+linenum+' ">'
    htmlstr +=              self_annos[linenum]
    htmlstr +=          '</pre>'
    htmlstr +=      '</div>'
    htmlstr +=      '<div class="linestatus"></div>'
    htmlstr += '</div>'
    return htmlstr
}

function generate_codereading_line(fileid,linenum,annos_count,issues_count,questions_count,line,issues,language){
    var htmlstr = '<div id="'+fileid+'_L'+linenum+'" class="codeline codelinebox" onmouseover="show_currentLine(\''+fileid+'_'+linenum+'\')" onmouseout="hide_currentLine(\''+fileid+'_'+linenum+'\')">'
    htmlstr += generate_codereading_linenum_and_codeline(linenum,line,language)
    htmlstr += generate_codereading_linestatus(fileid,linenum,annos_count,issues_count,questions_count,issues)
    htmlstr += '</div>'
    return htmlstr
}

function generate_codereading_linenum_and_codeline(linenum,linem,language){
    var htmlstr = '' 
    htmlstr +=  '<div class="linenum">'
    htmlstr +=      linenum.toString()
    htmlstr +=  '</div>'
            
    htmlstr +=  '<div class="sourcecode">'
    htmlstr +=      '<pre class="mypre" style="">'
    htmlstr +=          '<code class="'+language+' mypre">'
    htmlstr +=          line
    htmlstr +=          '</code>'
    htmlstr +=      '</pre>'
    htmlstr +=  '</div>'
    return htmlstr
}

function generate_codereading_linestatus(fileid,linenum,annos_count,issues_count,questions_count,issues){
    var htmlstr = '' 
    
    htmlstr += '<div id="linestatus_'+fileid+'_'+linenum+'" class="linestatus">'
    htmlstr +=      '<span class="codeopration" id="codeopration_anno_'+fileid+'_'+linenum+'">'
    if(linenum in annos_count){
        htmlstr +=      '<span class="annonums" onclick="show_annotation('+fileid+','+linenum+')"></span>'
    } 
    htmlstr +=      '</span>' 
    htmlstr +=      '<span class="codeopration" id="codeopration_question_'+fileid+'_'+linenum+'">'
    if(linenum in questions_count){
        htmlstr +=      '<span  class="questionnums" onclick="show_issue_question('+fileid+','+linenum+',\'[]\')"></span>'
    }
    else if(linenum in issues_count){
        htmlstr +=      '<span  class="questionnums" onclick="show_issue_question('+fileid+','+linenum+',\'['+issues[linenum]+']\')"></span>'
    }
    htmlstr +=      '</span>' 
    htmlstr +=      '<span id="addanno_'+fileid+'_'+linenum+'" class="addanno" onclick="inject_addnoPanel_html(this,'+fileid+','+linenum+')">'
    htmlstr +=          '<img src="/static/image/newadd.png" class="mr3 rightimgcommentblue">'
    htmlstr +=      '</span>'  
    htmlstr += '</div>'
    return htmlstr    
}

// 添加一个新的标签页，
// 如果标签页不存在，则创建一个新的标签页，然后调用open_tab
// 如果标签页已经存在，则打开对应的标签页
// 并调用open_tab
function add_tab(project_id,path,filename) {
    
    var tree_node = $("#jstree").jstree("get_selected");
    var path_before = path
    //需要将path处理一下，因为css样式中/以及.是不行的
    tmp_index = path.indexOf("#");
    if(tmp_index != -1){
        path = path.substring(0,tmp_index)
    }
    var path_input = path;
    path = path_predeal(path)

    if (tabSet.has(path)) {
        open_tab(path_input)
    } else {
        var tab_tag = document.getElementsByClassName("tab_head")[0];
        //添加tab
        /*<li class="tab_item" id="tab_src_net_micode_notes_widget_NoteWidgetProvider">
            <a href="javascript:void(0)" onclick="open_tab('src_net_micode_notes_widget_NoteWidgetProvider')">NoteWidgetProvider.java</a>
            <a href="javascript:void(0)" onclick="close_tab('src_net_micode_notes_widget_NoteWidgetProvider')">&times</a>
        </li> */
        var li_tab_item = document.createElement("li")
        li_tab_item.className = "tab_item";
        li_tab_item.id = "tab_" + path;

        var tag_a1 = document.createElement("a");
        tag_a1.href ="javascript:void(0)";

        // filename也要进行判断
        tmp_index = filename.indexOf("#");
        if(tmp_index != -1){
            filename = filename.substring(0,tmp_index)
        }
        tag_a1.textContent = filename
        tag_a1.onclick = (function () {
            return function () {
                open_tab(path_input);
            }
        })();

        var tag_a2 = document.createElement("a")
        tag_a2.href = "javascript:void(0)";
        tag_a2.textContent = '×'
        tag_a2.onclick = (function () {
            return function () {
                close_tab(path_input);
            }
        })();


        li_tab_item.appendChild(tag_a1)
        li_tab_item.appendChild(tag_a2)
        tab_tag.appendChild(li_tab_item)

        // 添加对应的code-reading的Element
        var div_code = document.getElementsByClassName("code_Area")[0]
        var div_codereading = document.createElement("div")

        div_codereading.id = "code_" + path;
        div_codereading.className = "codereading";
        div_code.appendChild(div_codereading)


        $.ajax({
            cache: false,
            type: "POST",
            url: '/operations/get_codereading_content/',
            data: { 'project_id': project_id, 'path': path_input },
            dataType: 'json',
            async: true,
            beforeSend: function (xhr, settings) {
                xhr.setRequestHeader("X-CSRFToken", csrftoken);
            },

            success: function (data) {
                if (data.status === 'success') {
                    // 获取code-reading的内容，并填充到对应的code-reading的Element

                    if(data.is_dir=="0"){
                        var content = generate_codereading_content(data.lines,data.self_annos,data.fileid,data.annos_count,data.issues_count,data.questions_count,data.issues,data.language)
                        div_codereading.innerHTML = content;
                        hljs.configure({useBR: false});
                        // hljs.highlightBlock(div_codereading)
                        $('#code_'+path+' pre code').each(function(i, block) {
                            hljs.highlightBlock(block);
                          });
                        // .each(function(i, block) {
                        //     hljs.highlightBlock(block);
                        // });
                    }else{
                        var content = data.html_str
                        div_codereading.innerHTML = content;
                    }

                    // 如果包含#
                    // tmp_index = path_before.indexOf("#");
                    // if(tmp_index != -1){
                    //     var hash = path_before.substring(tmp_index)
                    // }
                    // console.log(hash)
                    // location.hash=hash
                }
                else {
                    div_codereading.innerHTML = "";
                }
            }
        });


        open_tab(path_input);

        // 现在Hotest Question 模块先不用了
        // // 填充hotest_question
        // $.ajax({
        //     cache: false,
        //     type: "POST",
        //     url: '/operations/get_hotest_issues/',
        //     data: { 'project_id': project_id, 'path': path_input,"question_num":5 },
        //     dataType: 'json',
        //     async: true,
        //     beforeSend: function (xhr, settings) {
        //         xhr.setRequestHeader("X-CSRFToken", csrftoken);
        //     },
        //     success: function (data) {
        //         if (data.status === 'success') {
        //             issue_map[path] = data.html_str;
        //         }
        //         else {
        //             issue_map[path] = ""
        //         }
        //     }
        // });

        $.ajax({
            cache: false,
            type: "POST",
            url: '/operations/right/',
            data: { 'project_id': project_id, 'path': path_input},
            dataType: 'json',
            async: true,
            beforeSend: function (xhr, settings) {
                xhr.setRequestHeader("X-CSRFToken", csrftoken);
            },
            success: function (data) {
                if (data.status === 'success') {
                    right_map[path] = data.html_str;
                }
                else {
                    right_map[path] = ""
                }
            }
        });
        
        tree_nodes[path]=tree_node
        tabSet.add(path);
    }
}
// 这里也可以更改为item，传入this
function close_tab(path) {
    // 将当前的当前Element的父节点isplay:none
    // 将对应的code-reading区域设置为display:none
    path = path_predeal(path)

    var element = document.getElementById("tab_" + path);
    var previosuElement = element.previousElementSibling;
    var nextElement = element.nextElementSibling;

    document.getElementById("code_" + path).remove()
    element.remove()
    tabSet.delete(path)

    // 如果该标签页有上一个标签，将此标签的上一个标签页打开
    if (previosuElement != undefined) {
        var path = previosuElement.id.substr(4);
        open_tab(path)
        return;
    }
    // 如果该标签页有下一个兄弟标签，将此标签的下一个标签页打开
    if (nextElement != undefined) {
        var path = nextElement.id.substr(4);
        open_tab(path);
        return;
    }
}

// 对应目录级别的addnoPanel
function show_next_addnoPanel(file_id){
    $("#addno-panel-"+file_id).show();
    ev =  window.event;
    if(ev==undefined){
        ev=arguments.callee.caller.arguments[0]||window.event;
    }
    ev.stopPropagation();
}


//注入html代码
function inject_addnoPanel_html(item,file_id,linenum) {
    // console.log(file_id);
    // console.log(linenum);
	$("#ItemcommentPanel").remove();
	$("#ItemquestionPanel").remove();

    html_str =  '<div class="addno-panel source-addno-panel" style="display:block">'+
                    '<div class="trangle-op"></div>'+
                    '<div class="put-content">'+
                        '<p class="put-select clearfix" id="addno-select-'+linenum+'">'+
                        '<span class="active put-selectspanactive" onclick=\'$(this).siblings("span").removeClass("active");$(this).addClass("active");\'>注释</span>'+
                            '<span class="put-selectspanactive" onclick=\'$(this).siblings("span").removeClass("active"); $(this).addClass("active");\'>问题</span>'+
                        '</p>'+
                        '<textarea id="addno-text-'+file_id+'-'+linenum+'" class="put-text" placeholder="输入注释或者问题"> </textarea>'+
                        '<a href="#" onclick="add_annotation(this,'+file_id+','+linenum+')" class="submit fr" id="submit">提交</a>'+
                    '</div>'+
                '</div>';
    $(item).after(html_str)
    ev =  window.event;
    if(ev==undefined){
        ev=arguments.callee.caller.arguments[0]||window.event;
    }
    ev.stopPropagation();
}




function add_dir_annotation(item, file_id, line_num){
    // 获取当前是注释还是问题
    var selectValue = $(item).siblings(".put-select").find(".active").html().trim();
    var text_context = "#addno-text-" + file_id + "-" + line_num;
    var content = $(text_context).val();

    if (content.trim().length == 0) {
        alert("内容不能为空")
        return;
    }
    if (selectValue == "注释") {
        // 向addAnnatation中发请求
        submit_dir_annotation(file_id, line_num, content);
    } else {
        submit_dir_question(file_id, line_num, content);
    }
}

function show_dir_annotation(file_id){
    ev = window.event;
    if(ev==undefined){
        ev=arguments.callee.caller.arguments[0]||window.event;
    }
    var mousePos = mouseCoords(ev);

    $.ajax({
        cache: false,
        type: "POST",
        url: '/operations/show_annotation/',
        data: { 'file_id': file_id, 'line_num': 0 },
        dataType: 'json',
        async: true,
        beforeSend: function (xhr, settings) {
            xhr.setRequestHeader("X-CSRFToken", csrftoken);
        },
        success: function (data) {
            if (data.status === "success") {
                console.log(1111)
				//console.log("linestatus_"+line_num);
                //$("#loadCommentpanel").html(data.html_str);
                //$("#commentPanel").css("top", mousePos.y);
                //$("#commentPanel").css("left", mousePos.x+35);
                //$("#loadCommentpanel").show();
                //console.log(data.html_str);
                $("#ItemcommentPanel").remove()
                var html="<div id='ItemcommentPanel' style='margin-top: 70px;'>"+data.html_str+"</div>"
                $("#dir_anno_"+file_id).append(html);
            }else{
                alert(data.msg)
            }
        }
    });
}

function show_dir_issue_question(file_id){
    ev = window.event;
    if(ev==undefined){
        ev=arguments.callee.caller.arguments[0]||window.event;
    }
    var mousePos = mouseCoords(ev)
    //发送问题id，返回问题内容
    $.ajax({
        cache: false,
        type: "POST",
        url: '/operations/show_issue_question/',
        data: { 'file_id': file_id, 'line_num': 0, 'issue_ids': "[]"},
        dataType: 'json',
        async: true,
        beforeSend: function (xhr, settings) {
            xhr.setRequestHeader("X-CSRFToken", csrftoken);
        },
        success: function (data) {
            if(data.status=='success'){
				var html="<div id='ItemquestionPanel' style='margin-top:70px;'>"+data.html_str+"</div>";
				$("#dir_question_"+file_id).append(html);
//                $("#loadQuestionpanel").html(data.html_str);
                if (data.issueAnswers) {
                    //字符串转换成整型数组
                    var dataStrArr = issueid_str.substring(1, issueid_str.length - 1).split(",")
                    var issue_ids = dataStrArr.map(function (data) {
                        return +data;
                    });
                    //
                    issueAnswers = JSON.parse(data.issueAnswers);
                    issueStandardAnswers = JSON.parse(data.issueStandardAnswers);

                    let count = 0;
                    for (let i = 0; i < issue_ids.length; i++) {
                        issue_id = issue_ids[i]

                        if (issue_id == issueAnswers[count].fields.issue) {
                            var radios = document.getElementsByName("issue_" + issue_id)
                            user_answer = issueAnswers[0].fields.content;
                            standard_answer = issueStandardAnswers[0].fields.choice_position;
                            if (user_answer == standard_answer) {
                                radios[user_answer - 1].parentNode.style.color = "green";
                            } else {
                                radios[parseInt(user_answer) - 1].parentNode.style.color = "red";
                                radios[parseInt(standard_answer) - 1].parentNode.style.color = "green";
                            }
                            document.getElementById("submit_onechoice_" + issue_id).style.display = "None";
                            count = count + 1
                        }
                    }
                }
                //$("#questionPanel").css("top", mousePos.y);
                //$("#questionPanel").css("left", mousePos.x - 400);
                //$("#loadQuestionpanel").show();
            }else{
                alert(data.msg)
            }
        }
    });
}

function submit_dir_annotation(file_id, line_num, content) {

    $.ajax({
        cache: false,
        type: "POST",
        url: '/operations/add_annotation/',
        data: { 'file_id': file_id, 'linenum': line_num, 'content': content },
        dataType: 'json',
        async: true,
        beforeSend: function (xhr, settings) {
            xhr.setRequestHeader("X-CSRFToken", csrftoken);
        },
        success: function (data) {
            if (data.status == 'success') {
                var value = $("#dir_anno_" + file_id).html()
                if (value.trim().length == 0) {
                    $("#dir_anno_" + +file_id).html(1);
                }else{
                    $("#dir_anno_" + +file_id).html(parseInt(value) + 1);
                }
            }
            $(".addno-panel").hide();
            $(".source-addno-panel").remove();
            show_dir_annotation(file_id);
        }
    });
}


function submit_dir_question(file_id, line_num, content) {
    $.ajax({
        cache: false,
        type: "POST",
        url: '/operations/add_question/',
        data: { 'file_id': file_id, 'linenum': line_num, 'content': content },
        dataType: 'json',
        async: true,
        beforeSend: function (xhr, settings) {
            xhr.setRequestHeader("X-CSRFToken", csrftoken);
        },
        success: function (data) {
            if (data.status == 'success') {
                var value = $("#dir_question_" + file_id).html()
                if (value.trim().length == 0) {
                    $("#dir_question_" + +file_id).html(1);
                } else {
                    $("#dir_question_" + +file_id).html(parseInt(value) + 1);
                }
            }
            $(".addno-panel").hide();
            $(".source-addno-panel").remove();
            show_dir_issue_question(file_id);
        }
    });
}

// 这下面5个函数，与上面dir的区别就是：
// 上面的针对文件夹，margin-top是70px的，
// 下面的针对文件，margin-top是140px的，仅此而已
function add_file_annotation(item, file_id, line_num){
    // 获取当前是注释还是问题
    var selectValue = $(item).siblings(".put-select").find(".active").html().trim();
    var text_context = "#addno-text-" + file_id + "-" + line_num;
    var content = $(text_context).val();

    if (content.trim().length == 0) {
        alert("内容不能为空")
        return;
    }
    if (selectValue == "注释") {
        // 向addAnnatation中发请求
        submit_file_annotation(file_id, line_num, content);
    } else {
        submit_file_question(file_id, line_num, content);
    }
}

function show_file_annotation(file_id){
    ev = window.event;
    if(ev==undefined){
        ev=arguments.callee.caller.arguments[0]||window.event;
    }
    var mousePos = mouseCoords(ev);

    $.ajax({
        cache: false,
        type: "POST",
        url: '/operations/show_annotation/',
        data: { 'file_id': file_id, 'line_num': 0 },
        dataType: 'json',
        async: true,
        beforeSend: function (xhr, settings) {
            xhr.setRequestHeader("X-CSRFToken", csrftoken);
        },
        success: function (data) {
            if (data.status === "success") {
                console.log(1111)
                $("#ItemcommentPanel").remove()
                var html="<div id='ItemcommentPanel' style='margin-top: 140px;'>"+data.html_str+"</div>"
                $("#dir_anno_"+file_id).append(html);
            }else{
                alert(data.msg)
            }
        }
    });
}

function show_file_issue_question(file_id){
    ev = window.event;
        if(ev==undefined){
        ev=arguments.callee.caller.arguments[0]||window.event;
    }
    var mousePos = mouseCoords(ev)
    //发送问题id，返回问题内容
    $.ajax({
        cache: false,
        type: "POST",
        url: '/operations/show_issue_question/',
        data: { 'file_id': file_id, 'line_num': 0, 'issue_ids': "[]"},
        dataType: 'json',
        async: true,
        beforeSend: function (xhr, settings) {
            xhr.setRequestHeader("X-CSRFToken", csrftoken);
        },
        success: function (data) {
            if(data.status=='success'){
				var html="<div id='ItemquestionPanel' style='margin-top:140px;'>"+data.html_str+"</div>";
				$("#dir_question_"+file_id).append(html);
//                $("#loadQuestionpanel").html(data.html_str);
                if (data.issueAnswers) {
                    //字符串转换成整型数组
                    var dataStrArr = issueid_str.substring(1, issueid_str.length - 1).split(",")
                    var issue_ids = dataStrArr.map(function (data) {
                        return +data;
                    });
                    //
                    issueAnswers = JSON.parse(data.issueAnswers);
                    issueStandardAnswers = JSON.parse(data.issueStandardAnswers);

                    let count = 0;
                    for (let i = 0; i < issue_ids.length; i++) {
                        issue_id = issue_ids[i]

                        if (issue_id == issueAnswers[count].fields.issue) {
                            var radios = document.getElementsByName("issue_" + issue_id)
                            user_answer = issueAnswers[0].fields.content;
                            standard_answer = issueStandardAnswers[0].fields.choice_position;
                            if (user_answer == standard_answer) {
                                radios[user_answer - 1].parentNode.style.color = "green";
                            } else {
                                radios[parseInt(user_answer) - 1].parentNode.style.color = "red";
                                radios[parseInt(standard_answer) - 1].parentNode.style.color = "green";
                            }
                            document.getElementById("submit_onechoice_" + issue_id).style.display = "None";
                            count = count + 1
                        }
                    }
                }
                //$("#questionPanel").css("top", mousePos.y);
                //$("#questionPanel").css("left", mousePos.x - 400);
                //$("#loadQuestionpanel").show();
            }else{
                alert(data.msg)
            }
        }
    });
}

function submit_file_annotation(file_id, line_num, content) {

    $.ajax({
        cache: false,
        type: "POST",
        url: '/operations/add_annotation/',
        data: { 'file_id': file_id, 'linenum': line_num, 'content': content },
        dataType: 'json',
        async: true,
        beforeSend: function (xhr, settings) {
            xhr.setRequestHeader("X-CSRFToken", csrftoken);
        },
        success: function (data) {
            if (data.status == 'success') {
                $(".addno-panel").hide();
                $(".source-addno-panel").remove();
                show_file_annotation(file_id);
            }else{
                alert(data.msg)
            }
            
        }
    });
}


function submit_file_question(file_id, line_num, content) {
    $.ajax({
        cache: false,
        type: "POST",
        url: '/operations/add_question/',
        data: { 'file_id': file_id, 'linenum': line_num, 'content': content },
        dataType: 'json',
        async: true,
        beforeSend: function (xhr, settings) {
            xhr.setRequestHeader("X-CSRFToken", csrftoken);
        },
        success: function (data) {
            if (data.status == 'success') {
                var value = $("#dir_question_" + file_id).html()
                if (value.trim().length == 0) {
                    $("#dir_question_" + +file_id).html(1);
                } else {
                    $("#dir_question_" + +file_id).html(parseInt(value) + 1);
                }
            }
            $(".addno-panel").hide();
            $(".source-addno-panel").remove();
            show_file_issue_question(file_id);
        }
    });
}



function thumbsAnno(item,anno_id,vote_value) {
    // 获取当前的vote
    vote_tag = $("#annosum_"+anno_id)
    vote_before = parseInt(vote_tag.text())
    $.ajax({
        cache: false,
        type: "POST",
        url: '/operations/add_vote/',
        data: { 'vote_type': "annotation", 'object_id': anno_id, 'vote_value': vote_value },
        dataType: 'json',
        async: true,
        beforeSend: function (xhr, settings) {
            xhr.setRequestHeader("X-CSRFToken", csrftoken);
        },
        success: function (data) {
            if (data.status == 'success') {
                vote_now = vote_before + parseInt( data.value)
                vote_tag.text(vote_now)
                deal_votetag_color(vote_tag,data.msg,vote_value)
                // }
            }else{
                alert(data.msg);
            }
        }
    });
    // 更改当前的vote,默认+1
}

function thumbsComment(item,comment_id,vote_value) {
    // 获取当前的vote
    vote_tag = $("#comment_"+comment_id)
    vote_before = parseInt(vote_tag.text())
    $.ajax({
        cache: false,
        type: "POST",
        url: '/operations/add_vote/',
        data: { 'vote_type': "annotation_comment", 'object_id': comment_id, 'vote_value': vote_value },
        dataType: 'json',
        async: true,
        beforeSend: function (xhr, settings) {
            xhr.setRequestHeader("X-CSRFToken", csrftoken);
        },
        success: function (data) {
            if (data.status == 'success') {
                vote_now = vote_before + parseInt( data.value)
                vote_tag.text(vote_now)
                deal_votetag_color(vote_tag,data.msg,vote_value)
                // }
            }else{
                alert(data.msg);
            }
        }
    });
    // 更改当前的vote,默认+1
}

function deal_votetag_color(vote_tag,msg,vote_value){
    if(msg=='cancel success'){
        // 那么将颜色都变为正常
        vote_tag.parent().prev().children().removeClass("thumbs_active")
        vote_tag.parent().next().children().removeClass("thumbs_active")
    }else{
        //把一个变为正常，另一个变为红色
        if(vote_value==1){
            vote_tag.parent().prev().children().addClass("thumbs_active")
            vote_tag.parent().next().children().removeClass("thumbs_active")
        }else{
            vote_tag.parent().prev().children().removeClass("thumbs_active")
            vote_tag.parent().next().children().addClass("thumbs_active")
        }
    }
}


window.onload = function () {
    url = window.location.href;
    $('#jstree').jstree();
    
    $.ajax({
        cache: false,
        type: "POST",
        url: '/operations/get_addtab_paras/',
        data: { 'url': url },
        dataType: 'json',
        async: true,
        beforeSend: function (xhr, settings) {
            xhr.setRequestHeader("X-CSRFToken", csrftoken);
        },
        success: function (data) {
            if (data.status === 'success') {
                // 展开当前标签对应的节点
                // $('#jstree').jstree("deselect_all", true);
                // $('#jstree').jstree("select_node", "j1_1355554");
                // 第一个标签页对应的id，保存在first_tabs_jstree_id中
                var first_tabs_jstree_id = $("#first_tabs_jstree_id").text()
                //需要将path处理一下，因为css样式中/以及.是不行的
                path_input = data.path
                tmp_index = path_input.indexOf("#");
                if(tmp_index != -1){
                    path_input = path_input.substring(0,tmp_index)
                }
                path_after = path_predeal(path_input)
                // 加入tree_nodes中
                tree_nodes[path_after] = first_tabs_jstree_id
                add_tab(data.project_id, data.path, data.filename)
                // 特殊处理，因为add_tab的逻辑会影响tree_nodes()，所以进行了处理
                tree_nodes[path_after] = first_tabs_jstree_id
            }
        }
    });
}