tom-select flexbox options plugin

plugin.js

/**
 * tom-select plugin that wraps each select option in a flexbox to improve layout.
 * made explicitly to use in combination with checkbox_options plugin.
 *
 * required css:
 *
 *   .ts-option-wrapper {
 *     display: flex;
 *     align-items: center;
 *   }
 *
 * options:
 *
 *   you can pass :class and/or :style options to be added to the flexbox container.
 *
 *   new TomSelect(element, { plugins: [ 
 *     {
 *       name: "flexbox_options",
 *       options: { class: 'flexbox', style: 'align-items: start;' }
 *     }
 *   ]})
 *
 * usage:
 *
 *   import flexbox_plugin from "flexbox_plugin"
 *   TomSelect.define("flexbox_options", flexbox_options)
 *   new TomSelect(element, { plugins: [ "checkbox_options", "flexbox_options" ] })
 *
 * Copyright © <[email protected]>
 * 
 * Permission is hereby granted, free of charge, to any person obtaining
 * a copy of this software and associated documentation files
 * (the “Software”), to deal in the Software without restriction,
 * including without limitation the rights to use, copy, modify, merge,
 * publish, distribute, sublicense, and/or sell copies of the Software,
 * and to permit persons to whom the Software is furnished to do so,
 * subject to the following conditions:
 * 
 * The above copyright notice and this permission notice shall be
 * included in all copies or substantial portions of the Software.
 * 
 * THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND,
 * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
 * MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
 * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS
 * BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN
 * ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 */

export default function(options) {
  options.class = options.class || "ts-option-wrapper"

  this.hook('after', 'setupTemplates', () => {
    const renderWithoutFlexbox = this.settings.render.option;
    this.settings.render.option = renderWithFlexbox(renderWithoutFlexbox, options)
  })
}

function renderWithFlexbox(render, options) {
  return (html, escape) => {
    return wrapWithFlexbox(
      render(html, escape),
      { className: options.class, style: options.style }
    )
  }
}

function wrapWithFlexbox(el, props) {
  const children = Array.from(el.childNodes).map((node) => [ 'div', null, [ node ] ])

  const wrapper = createElement('div', props, children)
  el.appendChild(wrapper)

  return el
}

function createElement(name, props, children) {
  const el = document.createElement(name)
  for (const prop in props) { el[prop] = props[prop] }
  children.forEach((child) => {
    const node = (child instanceof Array) ? createElement(...child) : child
    el.appendChild(node)
  })

  return el
}