Generate a list of radio buttons

by fxi

HTML

<script src="https://cdn.jsdelivr.net/npm/@fxi/[email protected]/dist/el.umd.min.js"></script>

JavaScript

const el = El.el;





const settings = {
  items: [],
  builder: (content) => {
    return el('div', content)
  },
  listener : (e) =>{
      console.log(e.target.value);
  },
  configForm : {}
};


class elQuickSelect {

  constructor(opt) {
    const qs = this;
    qs.opt = Object.assign({}, settings, opt);
    qs.build();
  }

  build() {
    const qs = this;
    const group = Math.random().toString(32);
    qs.el = el('form',
      qs.opt.configForm,
      qs.opt.items.map((it, i) => {
        const id = `${group}_${i}`;
        let elInput;
        const elItem = el('div',
         {
           style:{display:'block',width:'100%'}
         },
         elInput =  el('input', {
            id: id,
            type: 'radio',
            name: group,
            value: it.value
          }),
          el('label', {
              style : {
                display:'inline-block'
              },
              for: id
            },
            qs.opt.builder(it.content)
          )
        )
        if(i === 0){
         elInput.setAttribute('checked',true);
        }
       
        return elItem;
      })
    )
    qs.el.addEventListener('change',qs.opt.listener);
  }

  destroy() {
   const qs = this;
    qs.el.removeEventListener('change',qs.opt.listener);
    qs.el.remove()
  }

}

/**
* test
*/

const items = '123456789'.split('').map(i=>{
  return {
    value : `test_${i}`,
    content:el('img',{src:'https://placekitten.com/50/50'})
  }
})

const qs= new elQuickSelect({
  items: items,
  builder: (content => {
    return el('div', content)
  }),
  configForm : {
    style : {
       maxHeight : '200px',
       overflowY : 'auto',
       border : '1px solid black'
    }
  }
})

document.body.appendChild(qs.el);