CocoRoboDesktop/js/UC/U.Img.js

//#region 图片阅览器

Namespace.register("U.Img");

/**
* 图片阅览器
*
* @param  {array} 图片集合
----------[Thm] 小图
----------[Img] 原图
* @param  {number} 访问第几张图
* @param  {object} 属性设置
* @param  {function} 创建回调函数
* @return {object} 图片浏览器对象
*/
U.Img.Create = function (UDE, UI, UME, UCB) {
    U.M.StopBubble(); //取消冒泡
    return (new U.Img.Create.init(UDE, UI, UME, UCB)).Create(); //创建图片浏览器功能区域
}

/**
* 图片阅览器
*
* @param  {array} 图片集合
----------[Thm] 小图
----------[Img] 原图
* @param  {number} 访问第几张图
* @param  {object} 属性设置
* @param  {function} 创建回调函数
* @return {object} 图片浏览器对象
*/
U.Img.Create.init = function (UDE, UI, UME, UCB) {
    /*

    参数说明：Iss  、I: 当前图片显示的位置 UCB:回调函数、 AIMG: 图片集

    */
    this.Iss;
    this.UIOD;
    this.BL;
    this.UIMG;
    this.W;
    this.h;
    this.R = 0;
    this.I = typeof UI == "number" ? UI : 0;
    this.UCB = UCB;
    this.CTF = true;
    this.AIMG = UDE;
    for (var i in UME) {
        if (UME.hasOwnProperty(i)) {
            this[i] = UME[i];
        }
    }
}

U.Img.Create.init.prototype = {
    ET: [], //图片浏览的总和
    /**
    * 图片阅览器
    *
    * @param  {array} 图片集合
    * @param  {number} 访问第几张图
    */
    ImgT: function (UDE, UDID) { //创建图片
        var i, //用于循环
        _UDOD, _UDTD, _UDSD, _UDKD, _UDCD, _UDID, //图片变量
        _UCE = [["放大", "UD_SYJDXB"], ["缩小", "UD_SYJDXS"], ["左转", "UD_SYJDXL"], ["右转", "UD_SYJDXR"]];
        //图片浏览器存在 自己修改替换值
        if ((_UDOD = $("#" + UDID)[0])) { //如果图片存在
            _UDID = $(_UDOD).childg(0)[0];
            _UDID = $(_UDID).Child()[2];
            _UDID = $("img", _UDID);
            $(_UDOD).Center();
            _UDID.length ? (_UDID = _UDID[0], _UDID.src = UDE["Thm"]) : (_UDTD.innerHTML = "",
            _UDCD = $$("div", { "className": "UD_SYJZO" }, _UDTD),
            _UDID = $$("img", { "onerror": U.M.apply(this, [[U.M.ImgError, ["this", 1]]]), "onselectstart": U.M.apply(), "ondragstart": U.M.apply(), "src": U.M.GetImgU(UDE["Thm"]) }, _UDCD));
        }
        //创建新的图片浏览器
        else {
            _UDOD = $$("div", { "className": "UD_SYJ UD_SYJO", id: UDID, "onmousewheel": [[U.M.StopBubble], [this.Wheel, [this]]], "__size__": "false", "onmousedown": [[U.D.DragMouseDown, ["this"]]] });
            _UDTD = $$("div", { "className": "UD_SYJA" }, _UDOD);
            _UDSD = $$("div", { "className": "UD_SYJD", "onmousedown": U.M.StopBubble, "onclick": U.M.StopBubble }, _UDTD);
            _UDSD = $$("div", { "className": "UD_SYJDX" }, _UDSD); _UDSD = $$("div", { "className": "UD_SYJDXS" }, _UDSD);
            for (i = 0; i < _UCE.length; i++) {
                _UDKD = $$("div", { "className": "UD_SYJDXC", "style": i ? {} : { "margin": "0px" }, "title": _UCE[i][0], onclick: U.M.apply(this, [[i > 1 ? this.Rotate : this.Zoom, [i > 1 ? (i - 2) * 2 - 1 : (i ? "Out" : "In"), _UDOD, this]]]) }, _UDSD);
                if (!i) { _UDCD = $$("div", {}, _UDKD); $$("div", { "title": "回到原图", "innerHTML": "&nbsp; 100%", onclick: U.M.apply(this, [[this.Zoom, [100, _UDOD, this]]]) }, _UDKD); } else { _UDCD = _UDKD; }
                $$("div", { "className": "UD_SYI UD_SYJDXO " + _UCE[i][1] }, _UDCD);
                $$("div", { "className": "UD_SYJDXT", "title": "点击" + _UCE[i][0], "innerHTML": _UCE[i][0] }, _UDCD);
            }
            $$("div", { "className": "UD_SYJL UD_SYJLO UD_SYI", "onmousedown": U.M.StopBubble, "onclick": U.M.StopBubble }, _UDTD);
            _UDCD = $$("div", { "className": "UD_SYJZ", "onmousedown": U.M.StopBubble }, _UDTD); $$("div", { "className": "UD_SYJL UD_SYJRO UD_SYI", "onmousedown": U.M.StopBubble, "onclick": U.M.StopBubble }, _UDTD);
            _UDCD = $$("div", { "className": "UD_SYJZO" }, _UDCD); _UDID = $$("img", { "onerror": U.M.apply(this, [[U.M.ImgError, ["this", 1]]]), "onselectstart": U.M.apply(), "ondragstart": U.M.apply(), "src": U.M.GetImgU(UDE["Thm"]) }, _UDCD);
            $$("div", { "className": "UD_SYI UD_SYQC UD_SYQCT", style: { top: "0", right: "0" }, "title": "关闭", "onmousedown": U.M.StopBubble, "onclick": U.M.apply(this, [[this.Close, [null, this]]]) }, _UDOD);
            $(_UDOD).appendTo((this.parent || document.body)).Center();
        }
        //返回窗体、图片元素
        return [(this.UIOD = _UDOD), (this.UIMG = _UDID)];
    },
    //创建图片浏览器
    Create: function () {
        if (this.AIMG) {//如果有传图片
            //AIMG是一个对象，里面包含了需要打开的图片路径
            this.AIMG = this.AIMG.length != null ? this.AIMG : [this.AIMG]; //图片集
            var _UIE = this.AIMG[this.I], //当前图片
            _UDE = (this.UCB ? this.UCB(_UIE) : this.ImgT(_UIE, "Usestudio_Img")); //这里是是否使用默认的图片浏览器创建
            this.R = 0;
            this.Iss = $(this.UIOD).attr("__size__") == "false";
            //异步加载图片
            U.M.imgReady(U.M.GetImgU(_UIE["Img"]), U.M.apply(null, [[this.Ready, [_UDE[0], _UDE[1], this, _UIE]]]), U.M.apply(null, [[this.Load, [_UDE[0], _UDE[1], this, _UIE]]]), U.M.apply(this, [[this.Error, [_UIE["Img"]]]])); //生成图片
            return this;
        }
    },
    /**
    * 删除窗体
    *
    * @param  {element} 图片浏览器窗体
    * @param  {number} 图片浏览器对象
    * @param  {string} 回调参数
    */
    XSI: function (UIOD, UT, UTF) {
        if (UT.CTF) { UT.Close(UIOD, UT, UTF); } //关闭
        UT.CTF = true; //允许关闭
    },
    /**
    * 滚动放大缩小处理
    *
    * @param  {object} 图片浏览器对象
    * @param  {event} 回调参数
    */
    Wheel: function (UT, UE) {
        UE = event || UE;
        var _UWD = UE.wheelDelta ? (UE.wheelDelta / 120) : (-(UE.detail || UE.deltaY) / 3), _UTF = _UWD > 0 ? "In" : "Out"; //判断滚动是放大还是缩小
        UT.Zoom(_UTF, UT.UIOD, UT); //放大缩小
    },
    /**
    * 切换图片的上一张或下一张
    *
    * @param  {number} 上一张的区分
    ----------1 下一张处理
    -----------1 上一张处理
    * @param  {object} 图片浏览器对象
    * @param  {function} 回调参数
    */
    Change: function (UTF, UT, UCB) {
        //获取当前显示第几张图片
        UTF = UT.I + UTF;
        UT.I = UTF = (UTF < 0 || UTF >= UT.AIMG.length) ? ((UTF < 0) ? UT.AIMG.length - 1 : 0) : UTF;

        //设置一张图片的链接
        var _UIID = $(UT.UIMG).addAttrArray({ "src": UT.AIMG[UTF]["Thm"], "style": { "filter": "alpha(opacity=30)",
            "MozOpacity": "0.3", "Khtml-opacity": "0.3", "opacity": "0.3"
        }
        });

        //图片位置大小处理
        UT.PJ("", "", UT.UIOD, UT.UIMG); //位置定位
        UT.Rotate((UT.R = 0), UT.UIOD, UT); //大小位置重置

        //加载图片回调
        U.M.imgReady(UT.AIMG[UTF]["Img"], U.M.apply(null, [[UT.Ready, [UT.UIOD, _UIID[0], UT]]]),
                U.M.apply(null, [[UT.Load, [UT.UIOD, _UIID[0], UT]]]), U.M.apply(this, [[UT.Error]]));
        (UCB) && (U.M.apply(UT, UCB)()); //图片加载处理
    },
    /**
    * 滚动设置
    *
    * @param  {string} 上传成功回调函数
    * @param  {number} 上传成功回调函数
    * @param  {function} 回调参数
    */
    Zoom: function (US, UIOD, UT) {//放大缩小
        //UIOD是整个IMG窗体
        //US用来判断滚轮是向外滚还是向内滚
        var US,
        _UW,
        _UH,
        _UIMG = $(this.UIMG);
        ("Out,In".indexOf(US) > -1) && (US = US == "Out" ? this.BL * 0.8 : this.BL / 0.8);
        UT.W = UT.W || _UIMG[0].width; UT.H = UT.H || _UIMG[0].height;
        this.BL = US = Math.max(Math.min(300, US), 22);
        _UH = parseInt(UT.H * (US / 100)); _UW = parseInt(UT.W * (US / 100));
        _UIMG.addAttrArray({ "style": { "width": _UW + "px", "height": _UH + "px"} });
        UT.PJ(_UW, _UH, UIOD, _UIMG[0]);
        U.D.PopupWindow(UIOD);
    },
    /**
    * 图片定位调整
    *
    * @param  {number} 图片浏览器长
    * @param  {number} 图片浏览器宽
    * @param  {element} 图片浏览器
    * @param  {element} 图片
    */
    PJ: function (UW, UH, UIOD, UIID) {
        var _UDPD = $(UIID).Parent();
        //设置长宽
        _UDPD.style.height = UH ? UH + "px" : "";
        _UDPD.style.width = UW ? UW + "px" : "";
        //图片区中定位
        (!this.Iss) && (UIOD.style.width = _UDPD.style.width);
        (UH) && ($(_UDPD).css("marginTop", ((UH = (($(_UDPD).Parent().offsetHeight - UH) / 2)) > 0 ? UH : 0) + "px"));
    },
    /**
    * 滚动设置
    *
    * @param  {string} 上传成功回调函数
    * @param  {number} 上传成功回调函数
    * @param  {function} 回调参数
    */
    Rotate: function (UV, UIOD, UT) {  //图片角度设置
        //UV是用来判断旋转的角度
        var _UIMG = $(UT.UIMG),
        _UDPD = _UIMG.Parent(),
        _UWH = [_UDPD.offsetWidth, _UDPD.offsetHeight];
        (UV) && (_UWH.reverse());
        UV = UT.R + UV; UV = UV >= 4 ? 0 : UV; UV = UV < 0 ? 3 : UV;
        UT.R = UV; _UWH[2] = UV % 2 ? ((_UWH[(UV - 1) / 2] / 2) + "px") : "center"; //角度 
        _UIMG.addAttrArray({ style: {
            "filter": "Progid:DXImageTransform.Microsoft.BasicImage(Rotation=" + UV + ")",
            "transformOrigin": _UWH[2] + " " + _UWH[2], "WebkitTransform": "rotate(" + UV * 90 + "deg)",
            "MozTransform": "rotate(" + UV * 90 + "deg)",
            "transform": "rotate(" + UV * 90 + "deg)",
            "OTransform": "rotate(" + UV * 90 + "deg)"
        }
        }); //设定值
        UT.PJ(_UWH[0], _UWH[1], UIOD, _UIMG[0]);
        U.D.PopupWindow(UIOD); //图片定位调整 //重新定位  
    },
    /**
    * 浏览点移动
    *
    * @param  {element} 图片窗体
    * @param  {object} 图片浏览器
    */
    MoveScroll: function (UDOD, UT) {//
        UDOD.setCapture(); //聚焦
        document.onmousemove = U.M.apply(UT, [[UT.Move, [UDOD, event.clientX, event.clientY, [UDOD.scrollTop, UDOD.scrollLeft], UT]]]); //移动处理
        document.onmouseup = U.M.apply(UT, [[UT.Up, [UDOD]]]); //释放处理
    },
    /**
    * 滚动设置
    *
    * @param  {element} 图片窗口
    * @param  {number} 窗体left
    * @param  {number} 窗体 top
    * @param  {array} 所在区域滚动条
    ----------[0] top滚动条
    ----------[1] left 滚动条
    * @param  {object} 图片浏览器
    */
    Move: function (UDOD, UX, UY, UTL, UT) {//移动浏览
        UT.CTF = false; //进行了移动 不允许关闭
        $(UDOD).addAttrArray({
            "scrollTop": UTL[0] - (event.clientY - UY),
            "scrollLeft": UTL[1] - (event.clientX - UX)
        }); //滚动范围
    },
    /**
    * 滚动设置
    *
    * @param  {string} 上传成功回调函数
    */
    Up: function (UDOD) {//取消
        UDOD.releaseCapture(); //释放焦点
        document.onmousemove = document.onmouseup = null;
    },
    /**
    * 下载
    *
    * @param  {string} 文件名
    */
    Download: function (FN) {
        FN = FN.replace(US.fs, ""); //获取文件名
        U.Dk.RE.ODL(FN, "1473用户图片.jpg"); //下载
    },
    /**
    * 移除窗口或者隐藏窗口
    *
    * @param  {element} 窗体对象
    * @param  {object} 图片浏览器对象
    * @param  {boolean} 是否移除还是隐藏
    */
    Close: function (UIOD, UT, UTF) {//
        U.D.CloseWindow(UIOD || this.UIOD, UTF ? "remove" : false); //移除窗口
        this.ET.splice(this.ET.indexOf(UT), 1); //删除
    },
    /**
    * 滚动设置
    *
    * @param  {string} 图片窗体
    * @param  {number} 图片区域
    * @param  {function} 图片浏览器对象
    * @param  {object}  图片对象
    ----------[Thm] 图片小图
    ----------[Img] 图片原图
    */
    Ready: function (UIOD, UIID, T, UDE) {//图片获取具体尺寸
        if (UIOD.style.display != "none" && (UDE && UDE["Thm"] == UIID.src || !UDE || !UDE["Thm"])) { //加载范围不在范围
            //图片框大小处理
            $[UIID, UIID.parentNode].addAttrArray({ "style": { "width": this.width + "px", "height": this.height + "px"} });
            T.W = this.width;
            T.H = this.height;
            //设置位置居中
            T.PJ(T.W, T.H, UIOD, UIID);
            U.D.PopupWindow(UIOD);
            return true;
        }
        else { return false; }
    },
    /**
    * 图片缓冲中
    *
    * @param  {element} 图片浏览器窗体
    * @param  {element} 图片元素
    * @param  {object} 回调参数
    * @param  {function} 回调参数
    */
    Load: function (UIOD, UIID, T, UDE) {//
        if (this.src && UIOD.style.display != "none" && (UDE && UDE["Thm"] == UIID.src || !UDE || !UDE["Thm"])) {
            var _UDPD = $(UIID).Parent(),
            _UWH = this.Iss ? [_UDPD.offsetWidth, _UDPD.offsetHeight] : [US.Width, US.Height];
            //缓存的时候设置样式 同时大小变化
            $(UIID).addAttrArray({ "src": this.src, "style": { "MozOpacity": "1", "Khtml-opacity": "1", "opacity": "1", "filter": "alpha(opacity=100)"} });
            T.W = this.width;
            T.H = this.height;
            UIOD = $(UIOD);
            T.Zoom(Math.min(Math.min(T.W, _UWH[0]) / this.width, Math.min(T.H, _UWH[1]) / this.height) * 100, UIOD[0], T); //默认原大小
            UIOD.Center(); //居中弹出
        }
    },
    /**
    * 图片加载失败
    *
    * @param  {string} 上传成功回调函数
    * @param  {number} 上传成功回调函数
    */
    Error: function (URL, ITF) {//
        var UIOD;
        var _UIID = this.UIMG;
        ITF = ITF || 0;
        ITF++; //添加的图片
        if (ITF < 3 && this.TF == 2) { //图片重新加载处理
            U.M.imgReady(URL + "?&n=" + ITF, U.M.apply(null, [[this.Ready, [this.UIOD, _UIID, this]]]),
             U.M.apply(null, [[this.Load, [this.UIOD, _UIID, this]]]), U.M.apply(this, [[this.Error, [URL, ITF]]]));
        }
        else {//加载错误图片
            U.Alert("图片丢失");
            $(_UIID).css({ "width": "auto", "height": "auto" });
            U.M.ImgError(_UIID, (this.TF || 1));
            this.Zoom(100, this.UIOD, this);
            U.D.PopupWindow(this.UIOD)
        }
    }
};

//#endregion