ziqim/zhiqim_ui/src/zhiqim_floater.mobile.js

/*
 * 版权所有 (C) 2015 知启蒙(ZHIQIM) 保留所有权利。
 * 
 * 指定登记&发行网站： https://www.zhiqim.com/ 欢迎加盟知启蒙，[编程有你，知启蒙一路随行]。
 *
 * 本文采用《知启蒙登记发行许可证》，除非符合许可证，否则不可使用该文件！
 * 1、您可以免费使用、修改、合并、出版发行和分发，再授权软件、软件副本及衍生软件；
 * 2、您用于商业用途时，必须在原作者指定的登记网站，按原作者要求进行登记；
 * 3、您在使用、修改、合并、出版发行和分发时，必须包含版权声明、许可声明，及保留原作者的著作权、商标和专利等知识产权；
 * 4、您在互联网、移动互联网等大众网络下发行和分发再授权软件、软件副本及衍生软件时，必须在原作者指定的发行网站进行发行和分发；
 * 5、您可以在以下链接获取一个完整的许可证副本。
 * 
 * 许可证链接：http://zhiqim.org/licenses/zhiqim_register_publish_license.htm
 *
 * 除非法律需要或书面同意，软件由原始码方式提供，无任何明示或暗示的保证和条件。详见完整许可证的权限和限制。
 */
  
+(function(Z)
{
/****************************************/
//“操作”弹窗
/****************************************/
Z.Popup = Z.Class.newInstance();

Z.Popup.cache = new Z.HashMap();
Z.Popup.close = function(id, immediate)
{
    id = id?((id.charAt(0)=="#")?id.substring(1):id):id;
    if (!id)
    {//删除全部
        Z.each(Z.Popup.cache.values(), function(zmPopup){
            zmPopup.fadeOut(immediate);
        });
        Z.Popup.cache.clear();
    }
    else
    {//找到id删除
        var zmPopup = Z.Popup.cache.get(id);
        if (zmPopup)
        {
            zmPopup.fadeOut(immediate);
            Z.Popup.cache.remove(id);
        }
    }
};

Z.Popup.get = function(id)
{
    id = id?((id.charAt(0)=="#")?id.substring(1):id):id;
    return Z.Popup.cache.get(id);
};

Z.Popup.prototype =
{
    //start of Z.Popup.prototype
    defaults:
    {//定义
        //基础参数
        target: null,          //指定弹出对象
        start: "left",         //弹窗起始位置：left/top/right/bottom
        overlay: "all",        //覆盖部分：all/part
        overlayRatio: "75",    //覆盖该主轴上的比例
    },

    validate: function()
    {//验证参数是否有误
        if (!this.target)
        {//null，或为空、0
            Z.alert("Z.Popup参数“target”未设置！");
            return false;
        }
        if (Z.T.isString(this.target) || Z.T.isObject(this.target))
        {//字符串类型，或者对象类型
            if (!Z(this.target)[0]) {
                Z.alert("Z.Popup参数“target”设置不正确！");
                return false;
            }
        }
        if (!Z.AR.contains(["left","top","right","bottom"],this.start)){
            this.start = "left";
        }
        if (!Z.AR.contains(["part","all"],this.overlay)){
            this.start = "part";
        }
        return true;
    },
    
    execute: function()
    {//执行
        if (!this.validate()){
            return;
        }
        this.id = Z(this.target).attr("id");
        if (!this.id){
            this.id = "Z_zmPopup_" + Z.Ids.uuid();
            Z(this.target).attr(this.id);
        }
        Z.Popup.cache.put(this.id,this);
        //定义popup
        this.creatPopup();
        //事件绑定
        this.attachEvent();
        //执行弹出
        this.fadeIn();
    },
    
    creatPopup: function()
    {//创建popup盒子
        this.$popup = Z(this.target);
        this.$popup.removeClass("z-overlay-all").removeClass("z-overlay-part")
            .addClass("z-overlay-" + this.overlay);
        this.$popup.removeClass("z-top").removeClass("z-right").removeClass("z-bottom").removeClass("z-left")
            .addClass("z-" + this.start).css("display","none");

        this.$bg = this.$popup.find(".z-popup-bg");
        this.$main = this.$popup.find(".z-popup-main");
        this.$title = this.$popup.find(".z-popup-title");
        this.$sure = this.$popup.find(".z-popup-sure");
        this.$cancel = this.$popup.find(".z-popup-cancel");
        this.$con = this.$popup.find(".z-popup-content");
    },
    
    attachEvent: function()
    {//事件绑定
        this.$bg.on("touchstart",this.fadeOut,this);
        this.$cancel.on("touchstart",this.fadeOut,this);
        if (this.$sure[0]){
            this.$sure[0].$this = this;
            this.$sure.on("touchstart",function(ev){
                this.$this.fadeOut(ev);
            })
        };
        var transitionEndEvent = this.transitionFixed();
        this.$main.on(transitionEndEvent,this.transitionEnd,this);
    },
    
    fadeIn: function()
    {//显示弹窗
        var that = this;
        var req = window.requestAnimationFrame
            || window.webkitRequestAnimationFrame
            || window.mozRequestAnimationFrame
            || window.oRequestAnimationFrame
            || function(fun){window.setTimeout(fun,1000/60)};
        req(function(){
            that.$popup.css("display","block");
            req(function(){
                that.$popup.addClass("z-popup-fadeIn");
                that = null;
            });
        });
    },
    
    fadeOut: function(ev)
    {//隐藏弹窗
        Z.E.forbidden(ev);
        this.$popup.removeClass("z-popup-fadeIn");
        this.$popup.addClass("z-popup-fadeOut");
        Z.Popup.cache.remove(this.id);
        if (Z(this.target).attr("id").indexOf("Z_zmPopup_") > -1){
            Z(this.target).removeAttr("id");
        }
    },
    
    transitionEnd: function(ev)
    {//动画结束，退出动画结束时触发
        if(this.$popup.hasClass("z-popup-fadeOut")){
            this.$popup.css("display","none");
            this.$popup.removeClass("z-popup-fadeOut");
        }
    },
    
    transitionFixed: function()
    {//兼容写法
        var $div = document.createElement('div');
        if ($div.style["transition"] !== undefined ){
            $div = null;
            return "transitionend";
        }
        if ($div.style["OTransition"] !== undefined ){
            $div = null;
            return "oTransitionEnd";
        }
        if ($div.style["WebkitTransition"] !== undefined ){
            $div = null;
            return "webkitTransitionEnd";
        }
    },
    //end of Z.Popup.prototype
}

/****************************************/
//“操作列表”，底部展示/选择按钮
/****************************************/
Z.ActionList = Z.Class.newInstance();

Z.ActionList.cache = new Z.HashMap();
Z.ActionList.close = function(id, immediate)
{
    id = id?((id.charAt(0)=="#")?id.substring(1):id):id;
    if (!id)
    {//删除全部
        Z.each(Z.ActionList.cache.values(), function(actionList){
            actionList.fadeOut(immediate);
        });
        Z.ActionList.cache.clear();
    }
    else
    {//找到id删除
        var actionList = Z.ActionList.cache.get(id);
        if (actionList)
        {
            actionList.fadeOut(immediate);
            Z.ActionList.cache.remove(id);
        }
    }
};

Z.ActionList.get = function(id)
{
    id = id?((id.charAt(0)=="#")?id.substring(1):id):id;
    return Z.ActionList.cache.get(id);
};

Z.ActionList.prototype =
{
    //start of Z.ActionList.prototype
    defaults:
    {//定义
        id: "",          //按钮ID，可选
        html: "",        //内容自定义
        height: .7,      //高度限制
    },
    
    validate: function()
    {//验证参数是否有误
        if (Z.V.isEmpty(this.html)){
            Z.alert('Z.ActionList参数“html”未设置！');
            return false;
        }
        if (!this.id) {
            this.id = "Z_actionList_" + Z.Ids.uuid();
        }
        return true;
    },
    
    execute: function()
    {//执行
        if (!this.validate){
            return;
        }
        Z.ActionList.cache.put(this.id,this);
        //定义popup
        this.creatActionList();
        //事件绑定
        this.attachEvent();
        //执行弹出
        this.fadeIn();
    },
    
    creatActionList: function()
    {//创建popup盒子
        // language=HTML
        var listHtml = '<div class="z-popup z-overlay-part z-bottom"><div class="z-popup-bg"></div><div class="z-popup-main"><div class="z-popup-content"></div></div></div></div>';
        this.$action = Z(listHtml);
        this.$action.appendTo(Z("body"));
        
        //touchend 事件
        Z.ResetTouchEnd.load(this.$action);
        
        //数值按钮
        var $content = this.$action.find(".z-popup-content");
        $content.htmlc(this.html);
        if (this.html.match(/data-role\s*=\s*"z-numInput"/)){
            Z.ZmNumInput.load($content);
        }

        this.$bg = this.$action.find(".z-popup-bg");
        this.$main = this.$action.find(".z-popup-main");
        this.$con = this.$action.find(".z-popup-content");
        
        //计算高度
        var docHeight = parseInt(Z.D.clientHeight());
        var conHeight = docHeight * this.height;
        this.$con.css("height",conHeight)
    },
    
    attachEvent: function()
    {//事件绑定
        this.$bg.on("touchstart",this.fadeOut,this);
        var transitionEndEvent = this.transitionFixed();
        this.$main.on(transitionEndEvent,this.transitionEnd,this);
    },
    
    fadeIn: function()
    {//显示弹窗
        var that = this;
        var req = window.requestAnimationFrame
            || window.webkitRequestAnimationFrame
            || window.mozRequestAnimationFrame
            || window.oRequestAnimationFrame
            || function(fun){window.setTimeout(fun,1000/60)};
        req(function(){
            that.$action[0].style.display = "block";
            req(function(){
                that.$action.addClass("z-popup-fadeIn");
            });
        });
    },
    
    fadeOut: function()
    {//隐藏弹窗
        Z.ActionList.cache.remove(this.id);
        this.$action.removeClass("z-popup-fadeIn");
        this.$action.addClass("z-popup-fadeOut");
    },
    
    transitionEnd: function(ev)
    {//动画结束，退出动画结束时触发
        if(this.$action.hasClass("z-popup-fadeOut")){
            this.$action.remove();
        }
    },
    
    transitionFixed: function()
    {//兼容写法
        var $div = document.createElement('div');
        if ($div.style["transition"] !== undefined ){
            $div = null;
            return "transitionend";
        }
        if ($div.style["OTransition"] !== undefined ){
            $div = null;
            return "oTransitionEnd";
        }
        if ($div.style["WebkitTransition"] !== undefined ){
            $div = null;
            return "webkitTransitionEnd";
        }
    },
    //end of Z.ActionList.prototype
}


//END
})(zhiqim);