UseStudio.CloudFront/js/Main/U.CD.Layout.js

Namespace.register("U.CD.LO"); //注册布局
//此js虽然简单，但要整理一个逻辑还是比较费力，暂时如此了
//太多地方需要做宽高控制了，定义一些全局变量。


/*由于html设计原理的时效性，导致宽高不能auto,用js代码补齐*/
U.CD.LO.SetWH = function () {
    if (!document.body.clientHeight) { location.href = location.hef; } //如果没有客户端信息，则再次刷新本页
    //在项目开始时全部用100%，保证用户能看到全貌，然后在此处最终定义宽高。
    //纵向
    $("#UCD_TOP")[0].style.height = "52px";
    //下部内容,横向
    $("#UCD_TT")[0].style.width = "160px"; //左边工具栏宽度
    $("#UCD_CT")[0].style.width = document.body.offsetWidth - $("#UCD_TT")[0].offsetWidth - $('#UCD_RTree')[0].offsetWidth - 1 + "px"; //右边代码区域宽度
    $("#UCD_Bottom")[0].style.height = $("#UCD_CT")[0].style.height = document.body.offsetHeight - $("#UCD_TOP")[0].offsetHeight + 'px'; //下部内容显示框高度

    $("#UCD_CT_Top_Tab")[0].style.height = "30px"; //中间头部切换栏
    $("#UCD_CT_BT")[0].style.height = "30px"; //中间底部命令行
    $("#UCD_CT_CT")[0].style.height = $("#UCD_CT")[0].offsetHeight - $("#UCD_CT_BT")[0].offsetHeight - $("#UCD_CT_Top_Tab")[0].offsetHeight + 'px';
    //$("#UCD_Bottom")[0].style.width = document.body.offsetWidth + 'px';

    //视图
    $("#UCD_CT_SM_IF")[0].style.height = document.body.offsetHeight + 'px';
    //    $("#UCD_CT_SM_IF")[0].style.width = document.body.offsetWidth + 'px';

    //代码
    $("#UCD_CT_HH_Code")[0].style.height = "40%";
    //$("#UCD_CT_Code").css("width", $("#UCD_CT_HH_Code")[0].offsetWidth - $("#UCD_CT_HH_CT")[0].offsetWidth - 100 + "px");


    /*

    //设置高度，高度无法100%;使用document.body.clientHeight必须CSS放前面？保证html body的值为100%,得不到，需要判断//window.screen.availWidth//document.documentElement.clientWidth //document.documentElement.innerWidth 
    //$("#UCD_Bottom")[0].style.height = document.body.clientHeight -dfghdfhdfgdf
    //中间代码，代码结果窗口高度
    var _ch = $("#UCD_Bottom")[0].clientHeight - $("#UCD_CT_Top_Tab")[0].clientHeight - $("#UCD_CT_BT")[0].clientHeight;
    if (_ch > 0) $("#UCD_CT_CT")[0].style.height = _ch - 4 + "px";
    //代码窗口宽度,有可能小于0，判断一下
    //var _cw = $("#UCD_CT_CT")[0].clientWidth - $("#UCD_CT_IF")[0].clientWidth - 2;
    //if (_cw > 0) $("#UCD_CT_HH_Code")[0].style.width = _cw + "px";
    //工具栏控件区域高度
    // $("#UCD_TT_Z")[0].style.height = $("#UCD_TT")[0].clientHeight - 37 + "px";
    //$("#UCD_TT_Z")[0].style.height = $("#UCD_Bottom")[0].clientHeight - 26 -60 + "px";

    //如果资源窗口没有显示，则扩大代码区域,_tt是左边工具栏宽度 _ct是中间区域宽度 _rt是右边区域宽度 6是分割线宽度
    var _tt = $("#UCD_TT")[0], _ct = $("#UCD_CT")[0], _rt = $("#UCD_RTree")[0], _aw = document.body.clientWidth, _bk = 4;
    //如果资源管理器和工具栏都不可显示，则
    if (_aw != 0) {
    //if (_tt.style.display == "none" && _rt.style.display == "none") { _ct.style.width = _aw - _bk + "px"; }
    //        if (_tt.style.display == "none" && _rt.style.display == "block") { _ct.style.width = _aw - _rt.clientWidth - _bk + "px"; }
    //        if (_tt.style.display == "block" && _rt.style.di8979splay == "none") { _ct.style.width = _aw - _tt.clientWidth - _bk + "px"; }
    //        if (_tt.style.display == "block" && _rt.style.display == "block") { _ct.style.width = _aw - _tt.clientWidth - _rt.clientWidth - _bk + "px"; }
    }

    //结果显示窗口给固定宽高才能有滚动条。
    var _if = $("#UCD_CT_SM_IF")[0], _ifct = $("#UCD_CT_IF")[0];
    _if.width = _if.parentNode.clientWidth + "px"; //必须设置宽度才有效？ //iframe的100%不起作用啊。
    if (_ifct.clientHeight - 20 > 0) { _if.style.height = _ifct.clientHeight - 20 + "px"; }
    */

    /* 暂时去掉：：迭代
    //代码区域宽度等于 包容器减去行号宽度
    var _code = $("#UCD_CT_Code")[0], _hh = $("#UCD_CT_HH_CT")[0], _rq = $("#UCD_CT_HH_Code")[0]
    _code.style.width = _rq.clientWidth - _hh.clientWidth + "px";
    */

}

//单击左边分割线时，隐藏工具栏窗口？o为传递进来的控件类型
U.CD.LO.HEToolbar = function (o) {
    $("#UCD_TT")[0].style.display = $("#UCD_TT")[0].style.display == "none" ? "block" : "none";
    U.CD.LO.SetWH();
}
//关闭资源管理器影响的布局//关闭资源管理器
U.CD.LO.CloseZY = function () { $("#UCD_RTree")[0].style.display = "none"; U.CD.LO.SetWH(); }
//打开资源管理器
U.CD.LO.OpenZY = function () {
    $("#UCD_RTree")[0].style.display = "block";
    U.CD.LO.SetWH();
}
//打开或者关闭资源管理器，在顶部菜单使用
U.CD.LO.OCZY = function () {
    //   if (U.CD.U.IsUSelf() == false) { U.CD.U.LoginApply(); return; }
    $("#UCD_RTree")[0].style.display = $("#UCD_RTree")[0].style.display == "none" ? "block" : "none";
    //$("#UCD_RTree")[0].style.display = "block";

    U.CD.LO.SetWH();
}

//视图全屏模式，
U.CD.LO.View = function (div) {
    U.CD.LO.A();
    var _a = $(".UCD_CT_BT_Com")
    for (var i = 0; i < _a.length; i++) {
        _a[i].style.background = " -webkit-linear-gradient(#fffffff, #d8d8d8)";
        _a[i].style.color = "#020202";
    }
    var _v = $("#UCD_CT_IF")[0], _c = $("#UCD_CT_HH_CT")[0], _if = $("#UCD_CT_SM_IF")[0]
    _c.style.display = "none";
    _v.style.display = "block"; _v.style.height = "100%";
    for (var i in $('.UCD_CT_BT_Com').length - 2) { $('.UCD_CT_BT_Com').css({ 'background': '-webkit-linear-gradient(#ffffff, #d8d8d8);', 'color': '#000' }) }
    $(div).css({
        'background': '-webkit-linear-gradient(top, rgb(81, 154, 251), rgb(21, 119, 230))',
        'color': '#fff'
    })
    U.CD.LO.SetWH();
    test();
}
//代码模式
U.CD.LO.Code = function (div) {
    U.CD.LO.A();
    var _a = $(".UCD_CT_BT_Com")
    for (var i = 0; i < _a.length; i++) {
        _a[i].style.background = " -webkit-linear-gradient(#ffffff, #d8d8d8)";
        _a[i].style.color = "#020202";
    }
    var _v = $("#UCD_CT_IF")[0], _c = $("#UCD_CT_HH_Code")[0];
    _v.style.display = "none";
    _c.style.display = "block"; _c.style.height = "100%";
    _c = $("#UCD_CT_HH_Code").Child();
    for (var i = 0; i < _c.length; i++) {
        _c[i].style.height = "100%";
    }
    for (var i in $('.UCD_CT_BT_Com').length - 2) { $('.UCD_CT_BT_Com').css({ 'background': '-webkit-linear-gradient(#ffffff, #d8d8d8);', 'color': '#000' }) }
    $(div).css({
        'background': '-webkit-linear-gradient(top, rgb(81, 154, 251), rgb(21, 119, 230))',
        'color': '#fff'
    })
    U.CD.LO.SetWH();
    $("#UCD_CT_HH_Code")[0].style.height = "100%";
    $("#UCD_CT_HH_CT")[0].style.height = "200%";

    test();
}
//拆分模式
U.CD.LO.Split = function (div) {
    U.CD.LO.A();
    var _a = $(".UCD_CT_BT_Com")
    _a.css({
        "-webkit-linear-gradient": "#ffffff, #d8d8d8",
        "color": "#020202"
    });
    $(div).css({
        "-webkit-linear-gradient": "#519afb, #1577e6",
        "color": "white"
    });
    var _v = $("#UCD_CT_IF"), _c = $("#UCD_CT_HH_CT");
    _v.css({
        "height": "60%",
        "display": "block"
    });
    _c.css({
        "height": "40%",
        "display": "block"
    });
    $('#UCD_CT_SM_IF').css({ 'margin-top': '0', 'width': '100%', 'height': '100%', 'border': '0' })
    for (var i in $('.UCD_CT_BT_Com').length - 2) { $('.UCD_CT_BT_Com').css({ 'background': '-webkit-linear-gradient(#ffffff, #d8d8d8);', 'color': '#000' }) }
    $(div).css({
        'background': '-webkit-linear-gradient(top, rgb(81, 154, 251), rgb(21, 119, 230))',
        'color': '#fff'
    })
    test();
}
//手机模式
U.CD.LO.Jude = true;
U.CD.LO.Phone = function (_event) {
    var _a = $(".UCD_CT_BT_Com"), _f = $("#UCD_CT_SM_IF"),
    _Arr = {        //手机模式的种类
        "Galaxy S5": { w: 360, h: 640 },
        "Nexus 5X": { w: 412, h: 732 },
        "Iphone 5": { w: 320, h: 568 },
        "Iphone 6": { w: 375, h: 667 },
        "Iphone 6 Plus": { w: 414, h: 736 }
    }, i;
    $('#UCD_CT_IF')[0].style.display = 'block';
    $("#UCD_CT_IF").css({ textAlign: "center", height: "100%", "border-right": "8px solid#7d7d7d", "min-width": "0px", "width": "40%" });
    $("#UCD_CT_HH_Code").css({ "min-width": "0px", "height": "100%", "width": "calc(100% - 40.9%)" });
    for (var i in $('.UCD_CT_BT_Com').length - 2) { $('.UCD_CT_BT_Com').css({ 'background': '-webkit-linear-gradient(#ffffff, #d8d8d8);', 'color': '#000' }) }
    _a[3].style.background = "-webkit-linear-gradient(#519afb, #1577e6)";
    _a[3].style.color = "white";
    $("#U_CD_LO_Window")[0].style = "display:block;width:65px;background:-webkit-linear-gradient(#ffffff, #d8d8d8);color:#020202";
    $("#U_CD_LO_Window2")[0].style = "display:none;";
    for (i in _Arr) {       //判断是哪一个手机类型 改变样式大小
        if (_event.srcElement.innerText == i) {
            _f.css({
                "width": _Arr[i].w + "px",
                "height": _Arr[i].h + "px",
                "margin": "10% 2% 0 2%"
            });
            document.getElementById('UCD_CT_SM_IF').contentWindow.document.body.style.zoom = 0.6;
            break;
        }
    }
    for (var i = 0; i < 5; i++) { _a[3].children[0].children[1].children[i].style = " background : -webkit-linear-gradient(#ffffff, #2d8d8d8)"; }
    _event.srcElement.style.background = "-webkit-linear-gradient(#519afb, #1577e6)";
    _event.srcElement.style.color = 'white';
    U.CD.LO.Jude = true;
    event.stopPropagation();
}
U.CD.LO.judge = function () {
    if (U.CD.LO.Jude == false && $('.UCD_CT_BT_Com')[3].style.background == '-webkit-linear-gradient(top, rgb(81, 154, 251), rgb(21, 119, 230))') {
        U.CD.LO.Jude = false;
        event.stopPropagation();
    } else {    //取消手机模式
        $('#UCD_CT_SM_IF').css({ "width": "100%", "height": "100%", "margin": "0%" })
        $("#UCD_CT_IF").css({ "width": "100%", "height": "60%" })
        $("#UCD_CT_HH_Code").css({ "width": "100%", "height": "40%" })
        U.CD.LO.Jude = true;
        event.stopPropagation();
    }
    if ($("#UCD_CT_BT div")[3].style.background == "-webkit-linear-gradient(top, rgb(81, 154, 251), rgb(21, 119, 230))" && event.srcElement.innerText.substr(0, 4) == "手机模式") {
        var _a = $(".UCD_CT_BT_Com"), _f = $("#UCD_CT_SM_IF");
        _f.css({
            "width": "100%",
            "height": "100%",
            "border": "0px"
        })
        for (i = 0; i < _a.length; i++) {       //改变按钮样式
            _a[i].style.background = " -webkit-linear-gradient(#ffffff, #d8d8d8)";
            _a[i].style.color = "#020202";
        }
        for (var a = 0; a < $(".UCD_CT_BT_Com_Phone_List")[0].children.length; a++) {
            $(".UCD_CT_BT_Com_Phone_List")[0].children[a].style.background = "#fff";
            $(".UCD_CT_BT_Com_Phone_List")[0].children[a].style.color = "#000"
        }
        document.getElementById('UCD_CT_SM_IF').contentWindow.document.body.style.zoom = 1;

    }
    test();
}


U.CD.LO.Window = function () {      //窗口模式

    $('#UCD_CT_SM_IF').css({ "width": "100%", "height": "100%", "margin": "0%" })
    $("#UCD_CT_IF").css({ "width": "100%", "height": "60%" })
    $("#UCD_CT_HH_Code").css({ "width": "100%", "height": "40%" })
    U.CD.LO.Jude = true;
    event.stopPropagation();
    var _a = $(".UCD_CT_BT_Com"), _d = $("#U_CD_LO_Window")[0];
    for (var i = 0; i < _a.length; i++) {
        _a[i].style.background = " -webkit-linear-gradient(#ffffff, #d8d8d8)";
        _a[i].style.color = "#020202";
    }
    document.getElementById('UCD_CT_SM_IF').contentWindow.document.body.style.zoom = "1";
    _d.style = "background:-webkit-linear-gradient(#519afb, #1577e6);color:white;display:none";
    document.getElementById('UCD_CT_SM_IF').style = "width:700px;border:1px solid ";
    $("#U_CD_LO_Window2")[0].style = "display:block;background:-webkit-linear-gradient(#519afb, #1577e6);color:white";

}
//取消窗口模式
test = function () {
    //    document.getElementById('UCD_CT_SM_IF').style = "width:100%;border:0px;";
    //    $("#U_CD_LO_Window")[0].style = "display:block;width:65px;background:-webkit-linear-gradient(#ffffff, #d8d8d8);color:#020202";
    //    $("#U_CD_LO_Window2")[0].style = "display:none;";
    //    document.getElementById('UCD_CT_SM_IF').contentWindow.document.body.style.zoom = "1";
}
//取消对展示框 代码框的更改
U.CD.LO.A = function () {
    $("#UCD_CT_IF").css({ "height": "100%", "min-height": "400px", "width": "100%" });
    $("#UCD_CT_HH_Code").css({ "height": "40%", "min-height": "1100px", "width": "100%" });
    $("#UCD_CT_SM_IF").css({ "width": "", "height": "", "margin": "" });
}