zhaobiaopai/skin/m15dt8blue/js/popup.js

(function(window){
    /**
     * 默认配置
     * contentId {string} - (必选)指定弹出层元素
     * closeId {string} - 指定关闭弹出层的元素
     * shadowId {string} - 指定遮盖层元素
     * contentShowCenter {boolean} - 指定弹出层是否居中显示
     * shadowUseCss {boolean} - 指定遮盖层是否使用外部样式控制
     * beforeShow {func} - 弹出层弹出前执行的函数
     * afterShow {func} - 弹出层弹出后执行的函数
     * beforeHide {func} - 弹出层隐藏前执行的函数
     * afterHide {func} - 弹出层隐藏后执行的函数
     * @private 
     */
    var _defaultConfigs = 
    {
        contentId:'',
        closeId:'',
        shadowId:'',
        contentShowCenter:true,
        shadowUseCss:false,
        isShowShadow:true,
        beforeShow:function(){},
        afterShow:function(){},
        beforeHide:function(){},
        afterHide:function(){}
    };
    
    /**
     * 创建实例
     * @class
     * @constructor
     * @param {Object} cfg - 初始化Tab实例所需的配置参数
     */
    function Popup(cfg){
        var that = this;

        if(cfg){
            for(var p in cfg){
                _defaultConfigs[p] = cfg[p];
            }
        }
        for(var p in _defaultConfigs){
            that[p] = _defaultConfigs[p];
        }
        that._init();
    };
    /**
     * 绑定事件兼容性处理
     * @staticclass
     */
    var EventCompatibility = function()
    {
        var _events = 
        {
            bind:function(sender, eventName, fn, useCapture)
            {
                if (eventName === "mousewheel" && document.mozHidden !== undefined)
                    eventName = "DOMMouseScroll";
                if(sender.addEventListener)
                    sender.addEventListener(eventName, fn, useCapture);
                else
                    sender.attachEvent('on' + eventName, fn);
            },
            unbind:function(sender,eventName,fn,useCapture)
            {
                if (eventName === "mousewheel" && document.mozHidden !== undefined)
                    eventName = "DOMMouseScroll";
                if(sender.removeEventListener)
                    sender.removeEventListener(eventName, fn, useCapture);
                else
                    sender.detachEvent('on' + eventName, fn);
            }
        }
        
        return _events;
    }();
    /**
     * 绑定隐藏事件
     * @function
     * @param {HTMLElement} sender - 指定要绑定隐藏事件的元素
     * @param {json} eventargs - 指定传入的参数，eventargs.target 表示当前的UXPopup对象 
     */
    var BindHideOperater = function(sender, eventargs)
    {
        EventCompatibility.bind(sender, 'click', function()
        {
            eventargs.target.hide();
        }, false);
    };
    /**
     * 判断是否为搜狗手机浏览器，做兼容处理
     * @function
     * @return [boolean]
     */
    var IsSogouMobile = function()
    {
        return navigator.userAgent.indexOf('SogouMobileBrowser') >= 0;
    }
    /**
     * 阻止页面滑动事件
     * @staticclass
     */
    var TouchOperater = function()
    {
        function preventScroll(e)
        {
            e = e || window.event;
            if(e.preventDefault)
            {
                e.preventDefault();
            } else
                e.returnValue = false;
        }
        var _Touch =
        {
            unallowScroll:function()
            {
                //EventCompatibility.bind(document,'scroll', preventScroll, false);
            },
            allowScroll:function()
            {
                //EventCompatibility.unbind(document,'mousewheel', preventScroll, false);
            }
        };
        return _Touch;
    }();
    /**
     * 设置遮罩层透明度
     * @private 
     */
    function setOpacity(obj, opacity)
    {
        if(opacity >= 1)
            opacity = opacity / 100;
        try
        {
            obj.style.opacity = opacity;
        }
        catch(e){ }
        try
        {
            obj.style.filter = 'alpha(opacity=' + (opacity * 100) + ')';
        }catch(e){}
    }
    /**
     * 计算页面高度
     * @private 
     */
    function calcTotalHeight()
    {
        //var wh = window.screen.height,bh = document.body.clientHeight;
        //return ((bh - wh > 0 ? bh : wh) + 'px');
        return (document.body.scrollHeight + 'px');
    }
    /**
     * 计算居中高度
     * @private 
     */
    function calcCurrentHeight(obj)
    {
        var oh = obj.offsetHeight;
        var sh = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
        var ch = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
        
        return ((sh + (ch - oh) / 2) + 'px');
    }
    /**
     * 计算居中宽度
     * @private 
     */
    function calcCurrentWidth(obj)
    {
        var ow = obj.offsetWidth;
        var sh = document.body.scrollLeft;
        var ch = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
        
        return ((sh + (ch - ow) / 2) + 'px');
    }
    /**
     * 内部多元素选择器
     * @private 
     */
    function _$arr(where)
    {
        var arr = document.querySelectorAll(where);
        
        var _op = 
        {
            addEventListener:function(eventName,fn,useCapture)
            {
                for(var i = 0;i < arr.length;i++)
                {
                    EventCompatibility.bind(arr[i], eventName, fn, useCapture);
                }
            },
            removeEventListener:function(eventName,fn,useCapture)
            {
                for(var i = 0;i < arr.length;i++)
                {
                    EventCompatibility.unbind(arr[i], eventName, fn, useCapture);
                }
            }
        };
        
        return _op;
    }
    /**
     * 内部选择器
     * @private 
     */
    function _$(where)
    {
        if(!where || where.length <= 0)
            return;
        
        var arr = document.querySelectorAll(where);
        if(!arr || arr.length <= 0)
            return null;
        // if(arr.length === 1)
            // return arr[0];
        return arr[0];
    }
    Popup.prototype = {
        constructor: Popup,
        isInit:false,
        /**
         * 对组件进行初始化
         * @private 
         */
        _init: function()
        {
            var that = this;
            
            try
            {
                that.content = _$(that.contentId);
                if(that.closeId)
                    BindHideOperater(_$(that.closeId),{target:that});
                that._getShadow();
                that.isInit = true;
            }
            catch(e){ console.log(e); }
        },
        /**
         * 获取遮罩层
         * @private 
         */
        _getShadow:function()
        {
            var that = this;
            if(!that.isShowShadow) return;
            var shadowId = that.shadowId || '#pop_shadow_div';
            var shadow = _$(shadowId);
            if(!shadow)
            {
                shadow = document.createElement('div');
                shadow.id = shadowId.substring(1);
                _$('body').appendChild(shadow);
            }
            BindHideOperater(shadow,{target:that});
            that.shadow = shadow;
        },
        /**
         * 显示遮罩层
         * @private 
         */
        _showShadow:function()
        {
            var that = this;
            if(!that.isShowShadow) return;
            that.shadow.style.display = 'block';
            that.shadow.style.visibility = 'visible';
            if(that.shadowUseCss) return;
            that.shadow.style.position = 'absolute';
            that.shadow.style.left = 0;
            that.shadow.style.top = 0;
            that.shadow.style.width = '100%';
            that.shadow.style.zIndex = '10';
            that.shadow.style.backgroundColor = '#000';
            that.shadow.style.height = calcTotalHeight();
            setOpacity(that.shadow, 50);
        },
        /**
         * 隐藏遮罩层
         * @private 
         */
        _hideShadow:function()
        {
            var that = this;
            if(!that.isShowShadow) return;
            that.shadow.style.display = 'none';
        },
        /**
         * 显示内容层
         * @private 
         */
        _showContent:function()
        {
            var that = this;
            that.content.style.display = 'block';
            that.content.style.visibility = 'visible';
            if(that.contentShowCenter)
            {
                that.content.style.position = 'absolute';
                that.content.style.top = calcCurrentHeight(that.content);
                that.content.style.left = calcCurrentWidth(that.content);
            }
        },
        /**
         * 显示弹出层
         * @public 
         */
        show: function()
        {
            var that = this;
            if(!that.isInit) return;
            if(that.beforeShow)
                that.beforeShow();
            
            TouchOperater.unallowScroll();
            that._showShadow();
            that._showContent();
            
            if(that.afterShow)
                that.afterShow();
        },
        /**
         * 隐藏
         * @public
         */
        hide:function()
        {
            var that = this;
            if(!that.isInit) return;
            if(that.beforeHide)
                that.beforeHide();
            
            TouchOperater.allowScroll();
            that._hideShadow();
            that.content.style.display = 'none';
            
            if(that.afterHide)
                that.afterHide();
        }
    };

    window.UXPopup = Popup;
})(window);
// AMD exports
if(typeof(module) !== 'undefined'){
    module.exports = window.UXPopup;
}else if (typeof define === 'function' && define.amd){
    define([], function () {
        'use strict';
        return window.UXPopup;
    });
}
UX.q.push(function()
{
	//加载主图
	window.UXLazy.load($('.cd_m_info_mainimg').get(0));
});
UX.q.push(function()
{
	$(".cd_m_xstj").slide({ titCell:".cd_m_i_slide ul", mainCell:".cd_m_i_carslide ul", effect:"leftLoop", autoPlay:true, autoPage:true, trigger:"click" });
	
    window.UX.scroll =
	{
		_fn:function(e)
		{
			if(e.preventDefault)
				e.preventDefault();
			else
				e.returnValue = true;
		},
		_fnEx:function(e)
		{
			var delta = (e.originalEvent.wheelDelta) ? e.originalEvent.wheelDelta / 120 : -(e.originalEvent.detail || 0) / 3;
			
			$(e.currentTarget).scrollTop($(e.currentTarget).scrollTop() + (delta * 15 * -1));
			
			if(e.preventDefault)
				e.preventDefault();
			else
				e.returnValue = true;
		},
		eventName: document.mozHidden !== undefined ? "DOMMouseScroll" : "mousewheel",
		run:function()
		{
			$(document).unbind(this.eventName,this._fn);
		},
		pause:function()
		{
			$(document).bind(this.eventName,this._fn);
		},
		addEx:function(id)
		{
			$(id).bind(this.eventName,this._fnEx);
		},
		removeEx:function(id)
		{
			$(id).unbind(this.eventName);
		}
	};
});

	UX.q.push(function() {
		//外观、内饰、发动机切换效果
		$('.cd_m_pop_pictype a').click(function(e) 
        {
			changeType.call(this);
		});	
		/**点击图片切换大图模式 开始**/
		$('.cd_m_pop_pics_left li').click(function()
		{
			var target = $('.cd_m_pop_pictype .cd_m_select');
        
            //判断如果是列表模式，需要先切换为大图模式
            if($('.cd_m_pop_pics').hasClass('cd_m_list'))
            {
                switchShowModel();
            }
            bindSlide(target.attr('attrid'),$(this).index());
		});
		/**点击图片切换大图模式 结束**/
        //车辆实拍顶部 类型选择修改
        $('.cd_m_i_sptit a').click(function(){
            if(this.className === 'cd_m_clsp_sptit_more')
            {
	            position = 'realshot';
                initShow(3);
                return;
            }

            //$('.cd_m_i_sptit .cd_m_select').removeClass('cd_m_select');
            //$(this).addClass('cd_m_select');
            $(document).scrollTop($('#' + $(this).attr('attrid')).offset().top - 180);
        });
		
		function initShow(num)
		{
			var up = new UXPopup({
				contentId:'.cd_m_pop_pics',
				closeId:'.cd_m_pop_pics .cd_m_pop_close',
				beforeShow:function()
				{
					var resizeTimer;
					$(window).bind('resize',function(){
						if (resizeTimer) clearTimeout(resizeTimer);
						resizeTimer = setTimeout(function(){ up._showContent(); }, 500);
					});
					window.UX.scroll.pause();
					window.UX.scroll.addEx('.cd_m_pop_pics_left>div');
					
					//如果图片数量为0，则禁止点击
					$('.cd_m_pop_pictype .cd_m_pop_total').each(function()
					{
						var value = $.trim($(this).text());
						if(value === '0')
						{
							$(this).parent().removeClass('cd_m_select').addClass('cd_m_disable');
						}
					});
					
					if($('.cd_m_pop_pics').hasClass('cd_m_list'))
						switchShowModel();
					
					//去掉图片的选中状态
					$('.cd_m_pop_pics_left .cd_m_select').removeClass('cd_m_select');
					//去掉当前选中类型的选中状态，保证能执行方法
					changeType.call($('.cd_m_pop_pictype a').get(num));
					
					$('.cd_m_pop_pics img[data-manual]').each(function(i,d)
					{
						window.UXLazy.load(d);
					});
					
				},
				beforeHide:function()
				{
					$(window).unbind('resize');
					window.UX.scroll.run();
					window.UX.scroll.removeEx('.cd_m_pop_pics_left>div');
				}
			});
			up.show();
		}
		
		function changeType()
		{
			if($(this).hasClass('cd_m_select') || $(this).hasClass('cd_m_disable')) return;
			$('.cd_m_pop_pictype .cd_m_select').removeClass('cd_m_select');
			$(this).addClass('cd_m_select');
			
			var parent = $('.cd_m_pop_pics'),name = $(this).attr('attrid');
			$('.cd_m_pop_pics_left>div').hide();
			$('.' + name).show();
			//判断如果是大图模式，重新指定slide。
			if(parent.hasClass('cd_m_bigimg'))
			{
				bindSlide(name);
			}
			else
			{
				$('.cd_m_pop_pics_left>div:visible').scrollTop(0);
			}
		}
		
		//查看图片列表弹出框，顶部大图、车辆实拍>查看更多按钮
		$('.cd_m_info_it1').click(function()
		{
			position = 'top';
			initShow(0);
		});
		//点击查看更多进入查看大图更多细节处
		$(".cd_m_clsp .cd_m_i_pzmore").click(function(){
			position = 'realshot';
			initShow(3)
		});
		
        //查看图片列表弹出框，车辆实拍>图片点击
        $('.cd_m_i_imglist img').click(function()
        {
	        position = 'realshot';
            var that = $(this);
            initShow(0);
            setTimeout(function(){
                var img = $('.cd_m_pop_pics_left img[src="' + that.attr('src') + '"]');
                if(!img || !img.parent().parent().parent()) return; 
                var parent = img.parent().parent().parent();
                changeType.call($('.cd_m_pop_pictype a[attrid="' + parent.attr('class') + '"]').get(0));
                img.parent().trigger('click')},50);
        });
        /**图片列表类型自动切换  开始**/
        var bindSlide = function(name, index)
        {
	        $(".cd_m_pop_pics_left>a").unbind('click');
	        $('.cd_m_pop_pictype .pageState').text('');
	        $(".cd_m_pop_pics_left").slide({ mainCell:"." + name + " ul",defaultIndex:index || 0, effect:"fade",trigger:'click',pnLoop:false,startFun:slideStartFun });
        },
        switchImgType = function(that, op, index)
        {
	        $('.cd_m_pop_pictype .cd_m_select').removeClass('cd_m_select');
	        that.addClass('cd_m_select');
	
	        if(that.hasClass('cd_m_disable'))
	        {
		        if(op === 'next') nextClick();
		        else prevClick();
		        return;
	        }
	        var parent = $('.cd_m_pop_pics'),name = that.attr('attrid');
	        $('.cd_m_pop_pics_left>div').hide();
	        $('.' + name).show();
	        //判断如果是大图模式，重新指定slide。
	        if(parent.hasClass('cd_m_bigimg'))
	        {
		        //获取最后一项的索引值
		        index = parseInt(index) - 1;
		        bindSlide(name, index);
	        }
        },
        nextClick = function()
        {
	        var target = $('.cd_m_pop_pictype .cd_m_select');
	        if(target.index() < 3)
	        {
		        switchImgType(target.next(),'next');
	        }
	        else
	        {
		        switchImgType(target.prev().prev().prev(),'next');
	        }
        },
        prevClick = function()
        {
	        var target = $('.cd_m_pop_pictype .cd_m_select'),that,num;
	        if(target.index() === 0) {
		        that = target.next().next().next();
	        } else {
		        that = target.prev();
	        }
	
	        //点击上一张按钮时，获取上一个类型的图片列表长度
	        num = that.children('.cd_m_pop_total').text();
	        //切换类型
	        switchImgType(that, 'prev', num);
        },
        slideStartFun = function(i,c,slider, titCell, mainCell, targetCell, prevCell, nextCell)
        {
	        $(nextCell).unbind('click',nextClick);
	        $(prevCell).unbind('click',prevClick);
	        if((i + 1) === c)
	        {
		        $(nextCell).one('click',nextClick);
	        }
	        if(i === 0)
	        {
		        $(prevCell).one('click',prevClick);
	        }
        };
        /**图片列表类型自动切换  结束**/
		//图片弹出框 列表模式与大图模式切换
        var switchShowModel = function()
        {
	        if($('.cd_m_pop_pics').hasClass('cd_m_bigimg'))
	        {
		        $('.cd_m_pop_pics').removeClass('cd_m_bigimg').addClass('cd_m_list');
		        $('.cd_m_list div ul').removeAttr('style').children().removeAttr('style');
		        var wrap = $('.cd_m_list .tempWrap');
		        if(wrap)
		        {
			        wrap.parent().html(wrap.html());
		        }
		        $('.cd_m_pop_pics_model').children('span').text('大图模式');
	        }
	        else
	        {
		        $('.cd_m_pop_pics').removeClass('cd_m_list').addClass('cd_m_bigimg');
		        $('.cd_m_pop_pics_model').children('span').text('列表模式');
	        }
        }
        //切换模式后，还原为初始状态
		$('.cd_m_pop_pics_model').click(function()
		{
			switchShowModel();
			
			//去掉图片的选中状态
			$('.cd_m_pop_pics_left .cd_m_select').removeClass('cd_m_select');
			//去掉当前选中类型的选中状态，保证能执行方法
			$('.cd_m_pop_pictype a').first().click();
		});
		
		$('.cd_m_pop_pics_left').click(function(e){
			var src = $(e.srcElement);
			if(src.hasClass('next') || src.hasClass('prev'))
			{
                var type = $('.cd_m_pop_pics_left>div:visible').find('li:visible').first().attr('data-type');
                pic_uxl_track(type);
			}
		});
	});