login.js 9.83 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({
					url: YohoConfig.mainUrl + '/passport/partner/yoho',
					data: {
						'account': account,
						'password': password
					},
					dataType: 'jsonp',
					jsonp: 'callback',
					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 e = e || window.event;
				var k = e.keyCode || e.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();
			}

			//隐藏第三方登录
			$('.third-login-box').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();
			}
			//显示第三方登录
			$('.third-login-box').show();
			//显示意见反馈页登录按钮
			if ($(".feedback-login").size() > 0) {
				$(".feedback-login").show();
			}

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

		//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);