login.js 2.96 KB
/**
 * 登录
 * @author: xuqi<qi.xu@yoho.cn>
 * @date: 2015/12/11
 */
var $ = require('yoho.jquery');

var mailPostfix = {
    num: ['qq.com', '163.com', '126.com', 'sina.com', 'gmail.com', 'sohu.com', 'hotmail.com', '139.com', '189.com'],
    other: ['gmail.com', 'qq.com', '163.com', '126.com', 'sina.com', 'sohu.com', 'hotmail.com', '139.com', '189.com']
};

var $account = $('#account');

var $countryCodeHide = $('#country-code-hide'),
    $countryCodeEm = $('#country-code > em'),
    $countryList = $('#country-list');

var $emailAutoComplete = $('#email-autocomplete');

//checkbox status unicode
var checkbox = {
    checked: '&#xe612;',
    unchecked: '&#xe613;'
};

var emailAcTime;

//展开地区列表
$('#country-code').on('click', function() {
    if ($countryList.css('display') === 'none') {
        $countryList.slideDown();
    }
});

//选中地区列表项
$countryList.on('click', 'li', function() {
    var $this = $(this),
        cc = $this.data('cc');

    $countryCodeEm.html($this.html());

    $countryCodeHide.val(cc);

    $countryList.slideUp();
});

//点击其他区域,收起区域列表
$(document).on('click', function(e) {
    if ($(e.target).closest('#country-code').length > 0) {
        return;
    }

    if ($countryList.css('display') === 'block') {
        $countryList.slideUp();
    }
});

//邮箱自动完成
$account.on('keyup', function() {
    var account = $.trim($(this).val()),
        html = '',
        accountMatch,
        matchStr,
        postfix,
        i;

    //输入@时自动补全邮箱后缀
    //此处>0非错误,用于避免输入的第一个字符为@被识别为邮箱
    if (account.indexOf('@') > 0) {
        accountMatch = account.match(/^[0-9]+@(.*)/);
        if (accountMatch) {

            //数字邮箱补全
            postfix = mailPostfix.num;
        } else {
            postfix = mailPostfix.other;
        }

        matchStr = accountMatch[1];
        for (i = 0; i < postfix.length; i++) {
            if (postfix[i].indexOf(matchStr) > -1) {
                html += '<li>' + account.slice(0, account.indexOf('@')) + '@' + postfix[i] + '</li>';
            }
        }

        if (html !== '') {
            $emailAutoComplete.html(html).removeClass('hide');
        } else {

            //隐藏autocomplete
            $emailAutoComplete.html('').addClass('hide');
        }
    }
}).on('blur', function() {
    emailAcTime = setTimeout(function() {
        $emailAutoComplete.addClass('hide');
    }, 200);
});

//邮箱自动完成列表项点击
$emailAutoComplete.on('click', 'li', function() {
    clearTimeout(emailAcTime); //清空默认关闭

    $account.val($(this).text());

    $emailAutoComplete.addClass('hide');
});

//记住登录状态
$('.remeber-me').on('click', function() {
    var $this = $(this);

    $this.toggleClass('checked');

    if ($this.hasClass('checked')) {
        $this.children('i').html(checkbox.checked);
    } else {
        $this.children('i').html(checkbox.unchecked);
    }
});