CocoRoboDesktop/js/Controls/Basic/Form.js

//#region 窗体

//UI窗体区域
Namespace.register("U.UF.UI") //窗体的命名空间

//#region 窗体

/** 初始化uform窗体,创建一个窗体，调用方式如下
 *       new new U.UF.UI.form(
 *                    "测试内容",
 *                    "中间内容",
 *                    { "style": { "width": "570px", "height": "80%", "maxHeight": "700px"} },
 *           );
 * @param	string	头部标题  必填
 * @param	string|element	中间区域的内容 必填
 * @param	object	窗体的属性 {id :"1", style:{"width":"100px", "height":"100px"}} 选填 有默认的属性，原函数有注释
 * @param	object	窗体功能的属性 { istop: true, isdrag: true, isstretching:true,isenlarge:true,isnarrow:true,isclose:true } 选填 
 * @param	object	头部的属性 {style:{"width":"100px"}} 选填 有默认的属性，原函数有注释
 * @param	object	内容的属性 { style:{"height":"100px"}} 选填 有默认属性，原函数有注释
 * @param	object	关闭、放大、缩小按钮区域的属性设置 { "style":{"left":"100px"}} 选填，有默认属性，原函数有注释
 * @param	element	窗体追加到制定的元素 选填 有默认的属性，原函数有注释
 */
U.UF.UI.form = function (title, content, formattr, formfun, headattr, contentattr, headbottomattr, parentel) {
    var _this = this;
    //所有的窗体中找到是否已经创建的窗体
    if (formattr && U.UF.UI.form.allForm[formattr.id]) {
        var _this = U.UF.UI.form.allForm[formattr.id]; //得到原来的窗体
    }
    //初始化未赋值，用到的变量
    else {
        //设置窗体唯一的识别
        this.id = formattr && formattr.id ? formattr.id : Guid.newGuid();
        //初始化成功后添加到所有窗体管理的对象中,以便于用户查找窗体和管理
        U.UF.UI.form.allForm[this.id] = this;
    }
    _this.form; //窗体
    _this.header; //头部
    _this.middle; //中间区域
    _this.title = title; //窗体的标题
    _this.content = content; //需要插入的元素，包含div和iframe等元素,以前站外应用的功能是靠这个方式去实现的
    _this.formattr = formattr; //窗体的属性
    _this.headattr = headattr; //头部的属性
    _this.contentattr = contentattr; //内容的属性
    _this.headbottomattr = headbottomattr; //头部功能区域整体的属性设置
    //下面是用户功能处理包含是否允许一直置顶、是否允许拖动、是否拉伸、是否允许放大、是否允许缩小、是否允许关闭
    //如果用户没有传入功能处理
    if (formfun == null) {
        formfun = {}; //初始化一个功能处理类 
    }
    _this.istop = null;
    if (formfun.istop != null) { //是否允许一直置顶
        _this.istop = formfun.istop;
    }

    _this.isdrag = true;
    if (formfun.isdrag != null) { //是否允许拖动
        _this.isdrag = formfun.isdrag; //是否允许拖动
    }
    _this.isstretching = true;
    if (formfun.isstretching != null) { //是否拉伸
        _this.isstretching = formfun.isstretching;
    }

    _this.isenlarge = true;
    if (formfun.isenlarge != null) { //是否允许放大
        _this.isenlarge = formfun.isenlarge;
    }

    _this.isnarrow = true;
    if (formfun.isnarrow != null) { //是否允许缩小
        _this.isnarrow = formfun.isnarrow; //是否允许缩小
    }

    _this.isclose = true;
    _this.closecallback = formfun.closecallback; //关闭回调
    if (formfun.isclose != null) { //是否允许关闭
        _this.isclose = formfun.isclose; //是否允许关闭
    }

    _this.parentel = parentel || document.body; //窗体添加到制定的元素处理
    _this.create(); //重新添加处理
    return _this; //返回处理
}

//所有给给创建的窗体管理
U.UF.UI.form.allForm = {};

//窗体的方法
U.UF.UI.form.prototype = {
    /** 初始化uform窗体
     */
    create: function () {
        var i, //用于循环 
            _resizefun,
            _formel, //窗体元素
            _headel, //窗体头部元素
            _contentel, //内容区域的元素
            _contentchildel, //内容区域的
            _stretchingel, //拉伸元素
            _stretchinginfo, //拉伸的信息
            _headbottom, //头部按钮区域
            _enlargeel, //放大按钮
            _mousedown, //
            _formattr = this.formattr || {}, //窗体属性
            _headattr = this.headattr || {}, //头部属性
            _contentattr = this.contentattr || {}, //内容的属性
            _replaceel = U.UF.UI.form.allForm[_formattr.id] ? U.UF.UI.form.allForm[_formattr.id].form : null //得到之前创建的窗体，如果窗体存在，那么下面创建后直接替换
            ;
        //窗体的统一属性设置，默认属性
        if (_formattr.style) {
            _formattr.style.cssText = _formattr.style.cssText || "";
            _formattr.style.cssText = "width: 70%; position: fixed; border: 1px solid #444; background-color: #fff; z-index: 10; border-radius: 1px; overflow: hidden;  -moz-box-shadow:0 0 30px 5px #555; -webkit-box-shadow:0 0 30px 5px #555; box-shadow:0 0 30px 5px #555; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius:5px;" + _formattr.style.cssText;
        } else {
            _formattr.style = {
                cssText: "width: 70%; position: fixed; border: 1px solid #444; background-color: #fff; z-index: 10; border-radius: 1px; overflow: hidden;  -moz-box-shadow:0 0 30px 5px #555; -webkit-box-shadow:0 0 30px 5px #555; box-shadow:0 0 30px 5px #555; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius:5px;"
            };
        }
        _formattr.close = U.UF.C.apply(this, function () { //关闭窗体;
            U.UF.F.closeWindow(this.form); //关闭窗体
        });
        _formattr.usform = "true"; //设置窗体的属性，作为窗体的识别，有助于调用的用户通过js找到所有的窗体
        _formattr.id = _formattr.id || ""; //窗体的id
        _formattr.style = _formattr.style || {}; //窗体的样式
        if (_formattr.onresize) {
            _resizefun = _formattr.onresize;
            _mousedown = _formattr.onmousedown;
            _formattr.onresize = U.UF.C.apply(this, function () { //当窗体大小发生变化的处理
                this.size(); //大小变化处理
                if (_resizefun) {
                    _resizefun(); //大小变化回调
                }
            });
            _formattr.onmousedown = U.UF.C.apply(this, function () {
                //窗体点击置顶的处理
                if (this.istop !== false) {
                    this.top(); //大小变化处理
                }
                if (_mousedown) {
                    _mousedown(); //大小变化回调
                }
            });
        } else if (_formattr.onresize !== false) {
            _formattr.onresize = U.UF.C.apply(this, function () { //当窗体大小发生变化的处理
                this.size(); //大小变化处理
            });
        }
        //创建大窗体，设置窗体属性
        var _formel = $$("div", this.formattr);
        //判断是否允许一直置顶
        if (this.istop === true) {
            _formel.style.zIndex = "9999";
            _formel["__top__"] = "false"; //设置不允许点击切换置顶
        } else if (this.istop === false) {
            _formel["__top__"] = "false"; //设置不允许点击切换置顶
        }
        this.form = _formel; //窗体全局变量设置
        //如果用户设置了false，那么就不加载头部
        if (this.title !== false) {
            //窗体头部属性统一设置
            if (_headattr.style) {
                _headattr.style.cssText = _headattr.style.cssText || "";
                _headattr.style.cssText = "text-indent: 10px; color: White; line-height: inherit; font-size: 14px; height: 30px; line-height: 30px; background-color: #2967A7; overflow: hidden; color: White; font-size: 14px; overflow: hidden; " + _headattr.style.cssText;
            } else {
                _headattr.style = {
                    cssText: "text-indent: 10px; color: White; line-height: inherit; font-size: 14px; height: 30px; line-height: 30px; background-color: #2967A7; overflow: hidden; color: White; font-size: 14px; overflow: hidden; "
                }
            }
            //设置头部有拖拽事件
            if (this.isdrag) { //判断是否允许拖动窗体
                _headattr.onmousedown = function () {
                    U.UF.F.drag(_formel); //拖动事件调用
                };
            }
            //创建头部区域
            _headel = $$("div", _headattr, _formel);
            //如果是字符串的处理
            if (U.UF.C.isString(this.title)) {
                _headel.innerHTML = this.title;
            }
            //如果中间区域是元素的处理
            else if (U.UF.C.isElement(this.title)) {
                _headel.appendChild(this.title); //添加所选元素
            }
            this.header = _headel; //设置中间的全局变量
        }
        //创建中间
        _contentel = $$("div", { "style": { "cssText": "width: 100%; height:100%; position: relative;" } }, _formel);
        //中间的内容
        _contentattr.usbody = "true";
        //窗体头部属性统一设置
        if (_contentattr.style) {
            _contentattr.style.cssText = _contentattr.style.cssText || "";
            //_contentattr.style.cssText = "text-align: left; overflow: auto;" + _contentattr.style.cssText;
            _contentattr.style.cssText = "text-align: left; overflow: hidden;" + _contentattr.style.cssText;
        } else {
            _contentattr.style = {
                cssText: "text-align: left; overflow: auto;"
            };
        }
        //创建中间内容元素
        _contentchildel = $$("div", _contentattr, _contentel);
        //如果是字符串的处理
        if (U.UF.C.isString(this.content)) {
            _contentchildel.innerHTML = this.content;
        }
        //如果中间区域是元素的处理
        else if (U.UF.C.isElement(this.content)) {
            _contentchildel.appendChild(this.content); //添加所选元素
        }
        this.middle = _contentchildel; //中间的内容
        //在头部不存在的情况下，设置中间内容可以拖动
        if (this.title === false && this.isdrag) {
            _contentel.onmousedown = function () {
                U.UF.F.drag(_formel); //拖动事件调用
            };
        }
        //设置拉伸处理
        if (this.isstretching !== false) {
            //创建窗体拉伸
            _stretchingel = $$("div", { style: { "cssText": "display: block;" } }, _formel);
            //拉伸的信息 key代表样式的结尾,value代表拉伸的方向
            _stretchinginfo = {
                "top": "cursor: n-resize; left: 0px; top: 0px; width: 100%; height: 5px;",
                "rightTop": "cursor: ne-resize; right: -2px; top: -2px; width: 12px; height: 12px;",
                "leftTop": "cursor: nw-resize; top: 0px; left: 0px; width: 12px; height: 12px;",
                "left": "cursor: w-resize; left: 0px; top: 0px; width: 5px; height: 100%;",
                "right": "cursor: e-resize; right: 0px; top: 0px; width: 5px; height: 100%;",
                "bottom": "cursor: s-resize; left: 0px; bottom: 0px; width: 100%; height: 5px;",
                "leftBottom": "cursor: sw-resize; left: -2px; bottom: -2px; width: 12px; height: 12px;",
                "rightBottom": "cursor: se-resize; right: -2px; bottom: -2px; width: 12px; height: 12px;"
            }
            //循环创建拉伸条，包含上、下、左、右、上左、下左、上右、下右
            for (i in _stretchinginfo) {
                $$("div", {
                    "style": {
                        "cssText": "position: absolute; overflow: hidden; display: block; z-index: 10;" + _stretchinginfo[i]
                    },
                    "onmousedown": U.UF.C.closure(function (scope, typename) {
                        //拉伸函数的调用
                        U.UF.F.stretching(_formel, typename, U.UF.C.apply(scope, scope.size));
                    }, [this, i])
                }, _stretchingel);
            }
        }

        //头部功能区域
        if (this.title !== false) {
            _headbottom = $$("div", {
                "style": { "cssText": "position: absolute; top: 3px; right: 0px; width: 80px; display: table-cell; vertical-align: middle;" }
            }, _formel);
        }
        if (this.isclose !== false) {
            //关闭窗体的按钮
            $$("div", {
                "style": {
                    "cssText": "background-image:url(../../../img/close.png); _background-image:url(/img/close.png);width: 14px; height: 14px; background-repeat: no-repeat; background-size: 100%; float: right; margin-right: 5px;margin-top:6px; cursor: pointer;"
                },
                "title": "点击关闭",
                "onmousedown": U.UF.EV.stopBubble,
                "onclick": U.UF.C.apply(this, function () {
                    U.UF.F.closeWindow(this.form); //调用窗体关闭函数
                    try {
                        //关闭任务栏处理
                        if (U.MD.D.T.taskbar.close) {
                            U.MD.D.T.taskbar.close({ "forms": _formel });
                            //U.MD.N.urlWrite("", "智慧课堂平台");
                        }
                    } catch (e) { }
                    //回调处理
                    if (U.UF.C.isFunction(this.closecallback)) {
                        this.closecallback();
                    }
                })
            }, _headbottom);
        }

        //是否允许放大
        if (this.isenlarge !== false) {
            //放大按钮
            _enlargeel = $$("div", {
                "style": {
                    "cssText": "background-image:url(../../../img/max.png); _background-image:url(/img/max.png); background-size: 100%; float: right; margin-right: 10px; width: 17px; height: 17px; cursor: pointer;margin-top: 4px;"
                },
                "title": "最大化",
                "onmousedown": U.UF.EV.stopBubble,
                //最大化点击事件处理
                "onclick": function () {
                    U.UF.F.windowZooming(_formel); //调用窗体最大化函数
                }
            }, _headbottom);

            //如果有head头部的处理
            if (_headel) {
                //头部双击放大缩小处理处理
                _headel.ondblclick = U.UF.C.apply(_headel, function () {
                    //判断双击的元素是否在头部导航上，否则如果头部上有其他的按钮什么的双击了，也会触发放大方法
                    if (event.srcElement == this || U.UF.EL.isChild(this, event.srcElement)) {
                        _enlargeel.onclick(); //放大的处理
                    }
                });
            }
        }

        //是否允许最小化
        if (this.isnarrow !== false) {
            //最小化的按钮处理
            $$("div", {
                "style": {
                    "cssText": "background-image:url(../../../img/min.png); _background-image:url(/img/min.png);background-size: 100%; float: right; margin-right: 10px;    margin-top: 3px; width: 20px; height: 20px; cursor: pointer;background-repeat: no-repeat;"
                },
                "title": "最小化",
                "onmousedown": U.UF.EV.stopBubble,
                "onclick": function () {
                    U.UF.F.windowMinimize(_formel); //窗体最小化处理
                }
            }, _headbottom);
        }

        //如果窗体已经创建，那么直接替换
        if (_replaceel && _replaceel.parentNode != null) {
            _replaceel.parentNode.replaceChild(_formel, _replaceel);
        }
        //元素添加到制定的元素中
        else {
            this.parentel.appendChild(_formel);
        }
        //如果没有设置top和left那么居中弹出
        if (_formel.style.top == "" && _formel.style.left == "" && _formel.style.right == "" && _formel.style.bottom == "") {
            //居中置顶弹出
            U.UF.F.windowTopCenter(_formel);
        }
        //否则置顶
        else {
            U.UF.F.topWindow(_formel);
        }
        //初始化的时候默认设置大小
        this.size();
    },
    /** 窗体每一次点击置顶
     */
    top: function () {
        U.UF.F.topWindow(this.form); //点击置顶的处理
    },
    /** 窗体大小处理
     */
    size: function () {
        var _headheight = 0; //head头部的高度
        //如果存在head头部，那么获取head头部处理
        if (this.header) {
            _headheight = this.header.clientHeight;
        }
        //设置窗体content区域大小设置
        if (this.header) {
            this.middle.style.height = this.form.clientHeight - this.header.clientHeight + "px";
        } else {
            this.middle.style.height = this.form.clientHeight + "px";
        }
    }
}

/** 窗体大小处理
 */
U.UF.UI.form.windowResize = function () {
    var i,
        _style,
        _bodywidth = US.width, //获取原本在窗体大小没有变化前的width
        _bodyheight = US.height, //获取原本在窗体大小没有变化前的height
        _sizeinfo, //大小信息
        _width, //长度
        _height, //高度
        _formel, //窗体元素
        _forms = U.UF.UI.form.allForm //获取所有的窗体
        ;
    //循环所有的窗体
    for (i in _forms) {
        _formel = _forms[i].form; //获取窗体的处理
        if ($(_formel).css("display") != "none") { //判断窗体是否隐藏
            _style = {}; //设置位置
            _width = U.selectEl(_formel).css("width"); //获取窗体的长
            _height = U.selectEl(_formel).css("height"); //获取窗体的宽

            //计算位置，如果有百分比，则按照百分比的方式进行计算，否则，得到百分比。
            _width = _width.indexOf("%") > -1 ? _width.toInt() / 100 : _formel.offsetWidth / _bodywidth;
            _height = _height.indexOf("%") > -1 ? _height.toInt() / 100 : _formel.offsetWidth / _bodyheight;

            //设置位置,如果没有右对齐，则设置左对齐
            if (_formel.style.right == "" || _formel.style.right == "auto") {
                _style.left = _formel.offsetLeft + (document.body.offsetWidth - _bodywidth) * ((1 - _width) / 2) + "px";
            }
            //如果没有下对齐，则设置上对齐
            if (_formel.style.bottom == "" || _formel.style.bottom == "auto") {
                _style.top = _formel.offsetTop + (document.body.offsetHeight - _bodyheight) * ((1 - _height) / 2) + "px";
            }
            //设置值
            U.selectEl(_formel).addAttrArray({ "style": _style });
        }
    }
}

/** 关闭所有的窗体
 */
U.UF.UI.form.closeWindows = function () {
    var i;
    for (i in U.UF.UI.form.allForm) {
        if (U.UF.UI.form.allForm[i].isclose) {
            U.UF.UI.form.allForm[i].form.close();
        }
    }
}

//#endregion

//#endregion