select.js 1.66 KB
/**
 * 选择框组件
 *
 * @author: shenzm<zhimin.shen@yoho.cn>
 * @date: 2016/07/26
 */

'use strict';

const $ = require('yoho-jquery');
const template = require('components/select.hbs');
const Overlay = require('./overlay');

function Select(items) {
    if (!$.isArray(items) || items.length === 0) {
        return;
    }

    // 初始化参数
    const tpl = template({
        items: items
    });

    // 生成模版
    const elem = $(tpl);
    const del = elem.find('.item-del');

    // 覆盖层
    const overlay = new Overlay({
        onClose: function() {
            elem.removeClass('slide-in');
            elem.hide();
        }
    });

    const hide = function() {
        elem.removeClass('slide-in');
        overlay.hide();
        elem.hide();
    }

    const show = function(cb) {
        if (elem.parent().length === 0) {
            const lis = elem.find('.item-li');

            lis.each(function(index) {
                if ($(this).attr('status') === 'false' || $(this).attr('status') === '') {
                    $(this).click(function(e) {
                        hide();
                        cb(Object.assign({
                            key: e.target.getAttribute('key'),
                            val: e.target.innerText
                        }, items[index]));
                    });
                }
            });
            elem.appendTo('body');
        }

        overlay.show();
        elem.show();
        setTimeout(() => {
            elem.addClass('slide-in');
        }, 200);
    }

    $(del).click(function() {
        hide();
    });

    return {
        show: show,
        hide: hide
    };
}

module.exports = Select;