const mkPicker = {
    setForAll: selector => {

        const css = `
        .mkPicker {width: 100%; background: #ccc; height: 300px}
        .hide {display: none}
        `;
        const style = document.createElement('style')
        style.innerText = css;
        document.head.appendChild(style)

        const createPicker = (c, o) => {

        }

        const createInline = (e, o) => {
            const c = document.createElement('div')
            c.className = 'mkPicker'
            e.parentNode.appendChild(c)
            createPicker(c, o)
        }
        const create = e => {
            var o = {}
            try {
                o = JSON.parse(e.dataset.mkPicker)
            } catch (exp) {
                alert('There is [data-mk-picker] with invalid JSON format')
            }
            o.type = o.type || 'popup'
            if(o.colorContainer)
            switch (o.type) {
                case 'inline':
                    createInline(e, o)
                    break;
                case 'popup':
                    break;
                case 'modal':
                    break;
            }
        }

        document.querySelectorAll(selector).forEach(i => {
            create(i)
        });
    }
}
mkPicker.setForAll('[data-mk-picker]')