Html 助手

/*!
 * Html 助手
 * version: 1.0.0-2018.07.25
 * Requires ES6
 * Copyright (c) 2018 Tiac
 * http://www.cnblogs.com/tujia/p/9369027.html
*/

class Html
{
    static merge(){
        let obj = {};
        for(let i in arguments){
            let options = arguments[i];
            for(let key in options){
                if(options[key]) obj[key] = options[key];
            }
        }

        return obj;
    }

    static tag(type, value = '', options={}){
        type = type.toLowerCase();
        let ele = document.createElement(type);
        for(var key in options){
            ele.setAttribute(key, options[key]);
        }
        if(value!='') ele.value = value;

        return ele;
    }

    static a(text, url = '', options = {})
    {
        if (url != '') {
            options['href'] = url;
        }

        let ele = this.tag('a', '', options);
        ele.innerHTML = text;

        return ele;
    }

    static img(src, options = {})
    {
        options = this.merge({'src':src}, options);

        if (options['srcset']!=undefined && typeof(options['srcset'])=='object') {
            let srcset = [];
            for(let key in options['srcset']){
                srcset.push(options['srcset'][key]+' '+key);
            }
            options['srcset'] = srcset.join(',');
        }

        if (options['alt']==undefined) {
            options['alt'] = '';
        }

        return this.tag('img', '', options);
    }

    static label(content, _for = '', options = {})
    {
        options = this.merge({'for':_for}, options);

        let ele = this.tag('label', '', options);
        ele.innerHTML = content;

        return ele;
    }

    static button(content = 'Button', options = {})
    {
        options = this.merge({'type':'button'}, options);

        let ele = this.tag('button', '', options);
        ele.innerHTML = content;

        return ele;
    }

    static submitButton(content = 'Submit', options = {})
    {
        options = this.merge({'type':'submit'}, options);

        let ele = this.tag('button', '', options);
        ele.innerHTML = content;

        return ele;
    }

    static resetButton(content = 'Reset', options = {})
    {
        options = this.merge({'type':'reset'}, options);

        let ele = this.tag('button', '', options);
        ele.innerHTML = content;

        return ele;
    }

    static input(type, name = '', value = '', options = {})
    {
        options = this.merge({
            'type': type,
            'name': name
        }, options);

        return this.tag('input', value, options);
    }

    static buttonInput(label = 'Button', options = {})
    {
        options = this.merge({'type':'button'}, options);

        return this.tag('input', label, options);
    }

    static submitInput(label = 'Submit', options = {})
    {
        options = this.merge({'type':'submit'}, options);

        return this.tag('input', label, options);
    }

    static resetInput(label = 'Reset', options = {})
    {
        options = this.merge({'type':'reset'}, options);
        
        return this.tag('input', label, options);
    }

    static textInput(name = '', value = '', options = {})
    {
        return this.input('text', name, value, options);
    }

    static hiddenInput(name, value = '', options = {})
    {
        return this.input('hidden', name, value, options);
    }

    static passwordInput(name, value = '', options = {})
    {
        return this.input('password', name, value, options);
    }

    static fileInput(name, value = '', options = {})
    {
        return this.input('file', name, value, options);
    }

    static textarea(name, value = '', options = {})
    {
        options = this.merge({'name':name}, options);

        return this.tag('textarea', value, options);
    }

    static radio(name, checked = false, options = {})
    {
        return this.booleanInput('radio', name, checked, options);
    }

    static checkbox(name, checked = false, options = {})
    {
        return this.booleanInput('checkbox', name, checked, options);
    }

    static booleanInput(type, name, checked = false, options = {})
    {
        let label = '';
        let lableOptions = {};
        if(options.label!=undefined){
            label = options.label;
            delete(options.label);
        }
        if(options.lableOptions!=undefined){
            lableOptions = options.lableOptions;
            delete(options.lableOptions);
        }
        let pluginOptions = {};
        if(options.pluginOptions!=undefined){
            pluginOptions = options.pluginOptions;
            delete(options.pluginOptions);
        }

        let ele = this.input(type, name, '', options);
        ele.checked = checked;

        if(typeof($)=='function'){
            window.setTimeout(()=>{
                if(typeof($(ele).iCheck)=='function'){
                    pluginOptions = this.merge({
                        checkboxClass: 'icheckbox_square-blue',
                        radioClass: 'iradio_square-blue',
                        increaseArea: '20%' // optional
                    }, pluginOptions);
                    $(ele).iCheck(pluginOptions);
                }
            }, 500);
        }

        if(label!=''){
            let oLabel = this.label(label, '', lableOptions);
            oLabel.prepend(ele);
            return oLabel;
        }else{
            return ele;
        }
    }

    static dropDownList(name, selection = '', items = {}, options = {})
    {
        let pluginOptions = {};
        if(options.pluginOptions!=undefined){
            pluginOptions = options.pluginOptions;
            delete(options.pluginOptions);
        }

        let ele  = this.tag('select', '', options);
        let opts = '';
        for(let key in items){
            opts += `<option value="${key}">${items[key]}</option>`;
        }
        ele.innerHTML = opts;

        if(options.multiple!=undefined)
        {
            if(typeof(selection)=='object') selection = JSON.stringify(selection);
            selection = selection.replace(/\[(.+)\]/, '$1') + ',';

            ele.querySelectorAll('option').forEach((item, i)=>{
                if(selection.indexOf(item.getAttribute('value')+',')>-1){
                    item.selected = true;
                }
            });
        }
        else
        {
            ele.value = selection;
        }

        if(typeof($)=='function'){
            window.setTimeout(()=>{
                if(typeof($(ele).select2)=='function'){
                    $(ele).select2(pluginOptions);
                }
            }, 500);
        }

        return ele;
    }
}

export default Html;