login.js 10.7 KB
/*  
	登录插件
	author:liuyue
	date:2015-01-07
*/
var $=require("jquery");
//var validate = require("./validate");
var box = require("./box");
var tools = require("yoho-tools");
var tips=require("./tips");

(function(global, undefined) {

	var Login = function(element, options) {
		this.options        = options;
   		this.$element       = $(element);
   		this.init();
	};


	Login.DEFAULTS = {
	};


	Login.prototype = {
		constructor: Login,

		init:function(){
			if($(".login-box").size()<=0){
				this.creatLoginBox();
				this._bindEvent();
			}
			this.initLoginState();
			if($(".cookieList").size()<=0){
				var cookieList = $('<ul class="cookieList"></ul>').appendTo($(".accountwrap"));
			}
			this.cookieAccount();
		},

		creatLoginBox:function(){
			var $loginBox = $('<div class="login-box">'+
					'<h2>登录</h2>'+
					'<div class="input-box">'+
						'<p class="accountwrap"><input class="yoho-account" type="text" placeholder="'+tips.getTips("yohoAccount")+'"></p>'+
						'<p><input class="yoho-pwd" type="password" placeholder="'+tips.getTips("yohoPwd")+'" style="display:none;" /><input class="yoho-pwd-text" type="text" placeholder="'+tips.getTips("yohoPwd")+'" /></p>'+
					'</div>'+
					'<div class="warn">'+tips.getTips("loginError")+'</div>'+
					'<div class="login-btn">'+
						'<a id="login" href="javascript:;">'+tips.getTips("login")+'</a>'+
					'</div>'+
					'<div class="third-login">'+
						'<p>'+tips.getTips("thirdLogin")+'</p>'+
						'<div class="third-btn clearfix">'+
							'<a class="sina" ref="/passport/partner/index/oauth/sina" href="javascript:;"></a>'+
							'<a class="qq" ref="/passport/partner/index/oauth/qq" href="javascript:;"></a>'+
							'<a class="fb" ref="/passport/partner/index/oauth/facebook" href="javascript:;"></a>'+
						'</div>'+
					'</div>'+
					'<div class="close-btn"></div>'+
				'</div>'+
				'<div class="login-shadow"></div>').appendTo("body");
		},

		_bindEvent:function(){
			var that = this;
			//关闭登录框
			$(document).on("click.closeLogin",function(event){
				if($(event.target).is(".publish-btn") || $(event.target).is(".login-box") || $(event.target).parents(".login-box").length>=1 ||$(event.target).is(".yoho")||$(event.target).parents(".yoho").length>=1||$(event.target).is(".side-bar-header")) return;
				that.closeLoginBox();
				event.stopPropagation();

			});
			$(".login-box").on("click.closeLoginBox",".close-btn",function(){
				that.closeLoginBox();
			});

			//输入账号时登录按钮样式变化
			$(".login-box").on("focus",".yoho-account",function(){
				$(".login-box").find("#login").addClass("login");
			});

			//账号密码输入框默认提示
			$('.yoho-account').val(tips.getTips("yohoAccount")).addClass("default-tip");
			$('.yoho-pwd-text').val(tips.getTips("yohoPwd")).addClass("default-tip");
			$('.yoho-account').on("focus",function()
	        {
	            if ($(this).val() == tips.getTips("yohoAccount"))
	            {
	            	$(this).removeClass("default-tip");
	                $(this).val('');
	            }
	        }).on("blur",function() 
	        {
	            if ($(this).val() === '')
	            {
	            	$(this).addClass("default-tip");
	                $(this).val(tips.getTips("yohoAccount"));
	            }
	        });
	        $('.yoho-pwd-text').on("focus",function()
	        {
	            if ($(this).val() === '' || $(this).val() == tips.getTips("yohoPwd"))
	            {
	            	
            		$('.yoho-pwd').val('').show().focus();
            		$(this).hide();
	            	$(this).removeClass("default-tip");
	            }
	        });
	        $('.yoho-pwd').on("blur",function()
	        {
	            if ($(this).val() === '')
	            {
	                $(this).hide();
	                $('.yoho-pwd-text').addClass("default-tip");
	                $('.yoho-pwd-text').val(tips.getTips("yohoPwd")).show();
	            }
	        });

			//登录按钮点击事件
			$(".login-box").on("click.login","#login",function()
	        {   
	        	var $this = $(this);
	        	var account = $('.yoho-account').val();
	        	var password = $('.yoho-pwd').val();
	            $.ajax
	            ({
	                type:'POST',
	                url:YohoConfig.mainUrl+'/passport/partner/yoho',
	                data:{'account':account,'password':password},
	                dataType:'json',
	                success:function(response)
	                {
	                    if (response&&response.status && response.data)
	                    {
	                    	var userName;
				        	var currentUserName=tools.cookie('userName');
				        	var account = $(".yoho-account").val();

				        	if(currentUserName===null||currentUserName===undefined){
				        		tools.cookie('userName',account,{expires:5,path: '/'});
				        	}else{
				        		tools.cookie('userName',currentUserName+","+account,{expires:5,path: '/'});
				        	}
	                    	that.cookieAccount();
	                    	that.setLogin(response.data);
				        	$(".login-box").find(".warn").css({"visibility":"hidden"});
				        	that.closeLoginBox();
				        	$this.comment("publishComment");
	                    }
	                    else if (response&&response.message !== '')
	                    {
	                        $(".login-box").find(".warn").css({"visibility":"visible"});
	                    }
	                    else
	                    {
	                        $(".login-box").find(".warn").css({"visibility":"visible"});
	                    }
	                }
	              
	            });
	        });

			//回车执行登录
			$(".login-box").find(".yoho-pwd").keyup(function(e)
            {
                var event = e || window.event;
                var k = event.keyCode || event.which;
                if (k == 13)
                {
                    $('#login').trigger("click.login");
                }
            });

            $(".third-btn").on("click","a",function(){
				var _this = $(this);
                if (!_this.attr('ref')) return;
                window.open(_this.attr('ref'), "","width=760,height=650,top=300,left=300");
                that.closeLoginBox();
                return false;
			});
		},
		//滑出登录框
		loginBoxAnimate:function(){
			if($(".login-status").hasClass("login-success")) return;
			if($(".side-bar-header").hasClass("login-success")) return;
			var height = $(".login-box").outerHeight();
			$(".login-shadow").show();
			$("body").find(".login-box").animate({"top":"50%","margin-top":-height/2},200);
		},
		//隐藏登录框
		closeLoginBox:function(){
			var height = $(".login-box").outerHeight();
			$(".login-box").css({"top":-height,"margin-top":0});
			$(".login-shadow").hide();
		},

		//初始化登录状态
		initLoginState:function()
	    {
	        var state = tools.cookie('yh_state');
	        var syncs = tools.cookie('yh_syncs');

	        if (state && syncs)
	        {
	            var data = $.parseJSON(syncs);
	            if (data && data.nick)
	            {
	                this.setLogin(data);
	            }
	        }
	    },

	    //更新登录信息
	    updateLoginState:function()
	    {
	        this.initLoginState();
	    },

		//登录
		setLogin:function(data){
			var that = this;
			$(".login-status .userimg").find("i").attr("class",data.type);
			$(".login-status .userinfo").find("span").text(data.nick);

			//用户头像
			if (data.headpic)
        	{
        		$(".login-status .userimg").find("img").attr("src",data.headpic);
        	}

        	//手机版
    		if (data.headpic)
        	{
        		$(".user-avatar").find("img").attr("src",data.headpic);
        	}
        	$(".login-username").text(data.nick);
        	$(".side-bar-header").addClass("login-success");
			
			$(".login-status .userinfo").show();
			$(".login-status").addClass("login-success");

			//隐藏匿名
			if($(".login-status .anonymous").size()>0){
				$(".login-status .anonymous").hide();
			}

			//隐藏意见反馈页登录按钮
			if($(".feedback-login").size()>0){
				$(".feedback-login").hide();
			}

			$(".exit-btn").on("click",function(){
				box.confirm(tips.getTips("logout"), function(){
					that.setLogout();
				});
			});
		},

		//登出
		setLogout:function(){
			$(".login-status").removeClass("login-success");
			$(".login-status .userimg").find("img").attr("src",YohoConfig.resUrl+"/assets/images/detail/user-img.png");
			$(".login-status .userinfo").hide();
			$(".login-status .userimg").find("i").attr("class",'');
			$(".comments-list").find(".delete-comment").remove();

			//手机版
			$(".side-bar-header").removeClass("login-success");
			$(".user-avatar").find("img").attr("src",YohoConfig.resUrl+"/assets/images/detail/user-img.png");
			$(".login-username").text("登录");

			//显示匿名
			if($(".login-status .anonymous").size()>0){
				$(".login-status .anonymous").show();
			}

			//显示意见反馈页登录按钮
			if($(".feedback-login").size()>0){
				$(".feedback-login").show();
			}

			$.ajax
	        ({
	            type:'GET',
	            url:YohoConfig.mainUrl+'/passport/partner/logout',
	            dataType:'json'
	        });
		},

		//cookie记入账号
			cookieAccount:function(){
				//cookie
        	var getCookie,
        		arrCookie;
        	getCookie = decodeURIComponent(tools.cookie('userName'));	

	        if(!!tools.cookie('userName'))
	        {
		    	arrCookie = tools.unique(getCookie.split(','));

		    	$(".cookieList").empty();
		    	for (var i=0;i<arrCookie.length;i++) {
		    		$(".cookieList").append($('<li><a href="javascript:;">'+arrCookie[i]+'</a></li>'));
		    	}

				$(".login-box").click(function(e){
		        	if($(e.target).is(".yoho-account")||$(e.target).is(".cookieList")|| $(e.target).closest(".cookieList").size()>0){
		        		$(".cookieList").show();
		        	}else{
		        		$(".cookieList").hide();
		        	}
		        })
		        $(".cookieList").on("click","li",function(){
		        	$(".yoho-account").val($(this).find("a").text()).removeClass("default-tip");
		        	$(".cookieList").hide();
		        	return false;
		        });
		        
	        }
			}
	};


	function Plugin(option, _relatedTarget) {
		return this.each(function() {
			var $this = $(this);
			var data = $this.data('yoho.Login');
			var options = $.extend({}, Login.DEFAULTS, $this.data(), typeof option == 'object' && option);
			// 如果没有初始化,则初始化该对象,并且把该对象绑定到此元素的yoho.PicSilder属性下。
			if (!data) $this.data('yoho.Login', (data = new Login(this, options)));

			// 如果传递的options是一个字符串,则表示调用改对象的原型方法。
			if (typeof option == 'string') data[option](_relatedTarget);
		});
	}


	$.fn.login             = Plugin;
  	$.fn.login.Constructor = Login;

})(this);