adminterface 0.0.0 → 0.2.0

data/app/javascript/adminterface/lib/has_many.js

@@ -0,0 +1,122 @@
+/* global Event, adminterface */
+import Sortable from 'sortablejs'
+
+class HasMany {
+  constructor (element) {
+    this.element = element
+    this.events = {
+      removeBefore: new Event('has_many_remove:before'),
+      removeAfter: new Event('has_many_remove:after'),
+      addBefore: new Event('has_many_add:before'),
+      addAfter: new Event('has_many_add:after')
+    }
+    this.options = {
+      list: '.has-many-list',
+      item: 'fieldset.has_many_fields',
+      addLink: 'a.button.has_many_add',
+      removeLink: 'a.button.has_many_remove',
+      destroyInput: 'input[name$="[_destroy]"]'
+    }
+
+    this._bind()
+  }
+
+  _initSortable () {
+    this.sortable = new Sortable(document.querySelector(this.options.list), {
+      handle: '.handle',
+      animation: 150,
+      ghostClass: 'sortable-placeholder',
+      dragClass: 'sortable-drag',
+      onUpdate: () => { this._recomputePosition() }
+    })
+  }
+
+  _recomputePosition () {
+    const inputName = this.element.dataset.sortable
+    const $items = this.element.querySelectorAll(this.options.item)
+    let position = parseInt(this.element.dataset.sortableStart || 0, 10)
+
+    $items.forEach((el) => {
+      const destroyInput = el.querySelector(this.options.destroyInput) || {}
+      const sortableInput = el.querySelector(`input[name$='[${inputName}]']`) || {}
+
+      if (sortableInput) {
+        sortableInput.value = destroyInput.checked ? '' : position++
+      }
+    })
+  }
+
+  _bindDestroyEvent (el) {
+    el.addEventListener('change', (e) => this._recomputePosition())
+  }
+
+  _bindAddEvent (el) {
+    el.addEventListener('click', (e) => {
+      let beforeAdd
+      const el = e.target
+      const parent = this.element
+
+      e.preventDefault()
+      parent.dispatchEvent(beforeAdd = this.events.addBefore, [parent])
+
+      if (!beforeAdd.defaultPrevented) {
+        let index = parent.dataset.hasManyIndex || parent.querySelectorAll(this.options.item).length - 1
+        parent.setAttribute('data-has-many-index', ++index)
+
+        const regex = new RegExp(el.dataset.placeholder, 'g')
+        const html = el.dataset.html.replaceAll(regex, index)
+        const newNode = document.createElement('div')
+        newNode.innerHTML = html
+
+        const fieldset = newNode.firstElementChild
+        const $list = this.element.querySelector(this.options.list)
+
+        $list.appendChild(fieldset)
+        this._bindEvents(fieldset)
+        this._recomputePosition()
+
+        const addAfterEvent = this.events.addAfter
+        addAfterEvent.detail = { fieldset, parent }
+        return parent.dispatchEvent(this.events.addAfter)
+      }
+    })
+  }
+
+  _bindRemoveEvent (el) {
+    el.addEventListener('click', (e) => {
+      const el = e.target
+      const parent = this.element
+      const fieldset = el.closest(this.options.item)
+      const removeBeforeEvent = this.events.removeBefore
+      const removeAfterEvent = this.events.removeAfter
+
+      e.preventDefault()
+      this._recomputePosition()
+
+      removeBeforeEvent.detail = { fieldset, parent }
+      removeAfterEvent.detail = { fieldset, parent }
+      parent.dispatchEvent(removeBeforeEvent)
+      fieldset.remove()
+      return parent.dispatchEvent(removeAfterEvent)
+    })
+  }
+
+  _bindEvents (el) {
+    const $addLinks = el.querySelectorAll(this.options.addLink)
+    const $removeLinks = el.querySelectorAll(this.options.removeLink)
+    const $destroyInputs = el.querySelectorAll(this.options.destroyInput)
+
+    $addLinks.forEach((el) => this._bindAddEvent(el))
+    $removeLinks.forEach((el) => this._bindRemoveEvent(el))
+    $destroyInputs.forEach((el) => this._bindDestroyEvent(el))
+  }
+
+  _bind () {
+    this._bindEvents(this.element)
+    this._initSortable()
+
+    adminterface.addObserver(this.element, this, this.constructor.name, [])
+  }
+}
+
+export default HasMany

data/app/javascript/adminterface/lib/header_toggler.js

@@ -0,0 +1,54 @@
+/* global adminterface */
+import { cookieSet, cookieGet } from './utils'
+
+class HeaderToggler {
+  constructor (element, options) {
+    const defaults = {
+      container: 'body',
+      activeClass: 'header-active',
+      cookieName: 'header-state',
+      cookieExpireSec: 30 * 24 * 60 * 60
+    }
+
+    this.element = element
+    this.options = { ...defaults, ...options }
+
+    this._bind()
+  }
+
+  _add () {
+    const $container = document.querySelector(this.options.container)
+    $container.classList.add(this.options.activeClass)
+    cookieSet(this.options.cookieName, this.options.activeClass, this.options.cookieExpireSec)
+  }
+
+  _remove () {
+    const $container = document.querySelector(this.options.container)
+    $container.classList.remove(this.options.activeClass)
+    cookieSet(this.options.cookieName, null, 0)
+  }
+
+  _bind () {
+    const cookie = cookieGet(this.options.cookieName)
+    const $breakpointHelper = document.querySelector('.breakpoint-up-helper')
+    const $container = document.querySelector(this.options.container)
+    const _self = this
+
+    if (cookie === this.options.activeClass && window.getComputedStyle($breakpointHelper).visibility === 'visible') {
+      this._add()
+    }
+
+    this.element.addEventListener('click', function (e) {
+      e.preventDefault()
+      if ($container.classList.contains(_self.options.activeClass)) {
+        _self._remove()
+      } else {
+        _self._add()
+      }
+    })
+
+    adminterface.addObserver(this.element, this, this.constructor.name)
+  }
+}
+
+export default HeaderToggler

data/app/javascript/adminterface/lib/input.js

@@ -0,0 +1,108 @@
+/* global adminterface */
+import BaseInput from './inputs/base_input'
+import BooleanInput from './inputs/boolean_input'
+import CheckBoxesInput from './inputs/check_boxes_input'
+import ColorInput from './inputs/color_input'
+import CountryInput from './inputs/country_input'
+import DatalistInput from './inputs/datalist_input'
+import DatePickerInput from './inputs/date_picker_input'
+import DateTimePickerInput from './inputs/datetime_picker_input'
+import HiddenInput from './inputs/hidden_input'
+import RadioInput from './inputs/radio_input'
+import SelectInput from './inputs/select_input'
+import StringInput from './inputs/string_input'
+import SwitchInput from './inputs/switch_input'
+import TextInput from './inputs/text_input'
+import TimePickerInput from './inputs/time_picker_input'
+import TimeZoneInput from './inputs/time_zone_input'
+import PasswordInput from './inputs/password_input'
+
+const inputMapping = {
+  boolean: BooleanInput,
+  check_boxes: CheckBoxesInput,
+  color: ColorInput,
+  country: CountryInput,
+  datalist: DatalistInput,
+  date_picker: DatePickerInput,
+  datepicker: DatePickerInput,
+  datetime_picker: DateTimePickerInput,
+  hidden: HiddenInput,
+  number: StringInput,
+  password: PasswordInput,
+  phone: StringInput,
+  radio: RadioInput,
+  select: SelectInput,
+  string: StringInput,
+  switch: SwitchInput,
+  text: TextInput,
+  time_picker: TimePickerInput,
+  time_zone: TimeZoneInput,
+  url: StringInput
+}
+
+class Input {
+  constructor (name, options) {
+    this.name = name
+    this.options = options
+    this.mapping = adminterface.meta.inputs
+  }
+
+  _configs () {
+    if (this._isExplicity()) {
+      return {
+        as: this.options.as,
+        options: this.options
+      }
+    } else if (Array.isArray(this.options)) {
+      return {
+        as: 'select',
+        options: { collection: this.options }
+      }
+    } else {
+      return {
+        as: this.options,
+        options: {}
+      }
+    }
+  }
+
+  _isExplicity () {
+    return (typeof (this.options) === 'object') && this.options.as
+  }
+
+  render () {
+    const configs = this._configs()
+    const as = configs.as
+    const options = configs.options
+    const InputClass = this.mapping[as]
+
+    if (!InputClass) {
+      throw new Error(`Unsupported input type: {${this.name}: ${as}}`)
+    }
+
+    const input = new InputClass(this.name, { ...options, as: as })
+    return input.render()
+  }
+}
+
+export {
+  inputMapping,
+  Input,
+  BaseInput,
+  BooleanInput,
+  CheckBoxesInput,
+  ColorInput,
+  CountryInput,
+  DatalistInput,
+  DatePickerInput,
+  DateTimePickerInput,
+  HiddenInput,
+  RadioInput,
+  SelectInput,
+  StringInput,
+  SwitchInput,
+  TextInput,
+  TimePickerInput,
+  TimeZoneInput,
+  PasswordInput
+}

data/app/javascript/adminterface/lib/inputs/base/groupish.js

@@ -0,0 +1,55 @@
+class Groupish {
+  constructor (options) {
+    this.type = options.as
+    this.options = options
+    this.prepend = options.prepend
+    this.append = options.append
+    this.isGroupable = this._isGroupable()
+    this.isGrouped = this._isGrouped()
+  }
+
+  groupWrapping (html) {
+    const prependHTML = this.prepend || ''
+    const appendHTML = this.append || ''
+
+    if (this.isGrouped) {
+      return `
+        <div class="input-group">
+          ${prependHTML}
+          ${html}
+          ${appendHTML}
+        </div>
+      `
+    } else {
+      return html
+    }
+  }
+
+  _groupableTypes () {
+    return [
+      'string',
+      'number',
+      'url',
+      'phone',
+      'password',
+      'color',
+      'datalist',
+      'select',
+      'country',
+      'time_zone',
+      'date_picker',
+      'datepicker',
+      'datetime_picker'
+    ]
+  }
+
+  _isGrouped () {
+    return !!this.prepend || !!this.append
+  }
+
+  _isGroupable () {
+    return this._groupableTypes().includes(this.type)
+  }
+}
+
+export default Groupish

data/app/javascript/adminterface/lib/inputs/base/pluginish.js

@@ -0,0 +1,63 @@
+/* global adminterface */
+import { toSnakeCase, getObjectValue } from '../../utils'
+
+class Config {
+  constructor (configs, options) {
+    this.name = configs.name
+    this.configs = configs
+    this.options = options[toSnakeCase(this.name)]
+  }
+
+  attributes () {
+    if (!this._enabled()) return {}
+
+    let results
+
+    if (typeof (this.options) === 'object') {
+      results = this.options
+    } else {
+      results = this._defaults()
+    }
+
+    return { [`data-aa-${this.name}`]: results }
+  }
+
+  _defaults () {
+    return this.configs.options || {}
+  }
+
+  _enabled () {
+    return (
+      (!(this.options === false) && this.configs.default === true) ||
+        (this.options && this.options === true)
+    )
+  }
+}
+
+class Pluginish {
+  constructor (options) {
+    this.options = options
+    this.as = options.as
+    this.plugins = this._plugins()
+  }
+
+  enabled (name) {
+    return getObjectValue(this.plugins, `data-aa-${name}`)
+  }
+
+  _plugins () {
+    return Object.assign({}, ...this._configs())
+  }
+
+  _configs () {
+    const plugins = getObjectValue(adminterface, `meta.components.inputs.${this.as}.js`)
+
+    if (plugins) {
+      return plugins.map((plugin) => (new Config(plugin, this.options)).attributes())
+    } else {
+      return []
+    }
+  }
+}
+
+export default Pluginish

data/app/javascript/adminterface/lib/inputs/base_input.js

@@ -0,0 +1,87 @@
+/* global adminterface */
+import { toHTMLAttrString, toSnakeCase } from '../utils'
+import Pluginish from './base/pluginish'
+import Groupish from './base/groupish'
+
+class BaseInput {
+  constructor (name, options) {
+    this.name = name
+    this.options = options
+    this.wrapper_html_options = this.options.wrapper_html || {}
+    this.label_html_options = this.options.label_html || {}
+    this.input_html_options = this.options.input_html || {}
+    this.label = options.label || name.charAt(0).toUpperCase() + name.slice(1)
+    this.type = toSnakeCase(this.constructor.name.replace(/(Input$)/, ''))
+    this.pluginish = new Pluginish(this.options)
+    this.groupish = new Groupish(this.options)
+  }
+
+  _defaultWrapperHTMLOptions () {
+    const uuid = adminterface.addObserver(null, this, `Input.${this.constructor.name}`)
+    const configs = { class: `mb-3 input ${this.type}` }
+
+    if (uuid) configs['data-observer-id'] = uuid
+    return configs
+  }
+
+  _wrapperHTMLOptions () {
+    return { ...this._defaultWrapperHTMLOptions(), ...this.wrapper_html_options }
+  }
+
+  _defaultLabelHTMLOptions () {
+    return {
+      class: 'form-label',
+      for: `batch-form-${this.name}`
+    }
+  }
+
+  _labelHTMLOptions () {
+    return { ...this._defaultLabelHTMLOptions(), ...this.label_html_options }
+  }
+
+  _defaultInputHTMLOptions () {
+    const options = {
+      class: `form-control ${this.options.as}`,
+      name: this.name,
+      id: `batch-form-${this.name}`
+    }
+
+    return { ...options, ...this.pluginish.plugins }
+  }
+
+  _inputHTMLOptions () {
+    return { ...this._defaultInputHTMLOptions(), ...this.input_html_options }
+  }
+
+  _labelHTML () {
+    return `<label ${toHTMLAttrString(this._labelHTMLOptions())}>${this.label}</label>`
+  }
+
+  _inputHTML () {
+    return `<input ${toHTMLAttrString(this._inputHTMLOptions())}>`
+  }
+
+  _inputWrapping (html) {
+    return `
+      <div ${toHTMLAttrString(this._wrapperHTMLOptions())}>${html}</div>
+    `
+  }
+
+  render () {
+    const input = this._inputHTML()
+    let inputHTML
+
+    if (this.groupish.isGroupable) {
+      inputHTML = this.groupish.groupWrapping(input)
+    } else {
+      inputHTML = input
+    }
+
+    return this._inputWrapping(`
+      ${this._labelHTML()}
+      ${inputHTML}
+    `)
+  }
+}
+
+export default BaseInput

data/app/javascript/adminterface/lib/inputs/boolean_input.js

@@ -0,0 +1,30 @@
+import BaseInput from './base_input'
+
+class BooleanInput extends BaseInput {
+  _defaultLabelHTMLOptions () {
+    const options = {
+      class: 'form-check-label'
+    }
+
+    return { ...super._defaultLabelHTMLOptions(), ...options }
+  }
+
+  _defaultInputHTMLOptions () {
+    const options = {
+      class: `form-check-input ${this.options.as}`,
+      type: 'checkbox'
+    }
+
+    return { ...super._defaultInputHTMLOptions(), ...options }
+  }
+
+  _inputGroup (html) {
+    return `<div class="form-check">${html}</div>`
+  }
+
+  _inputWrapping (html) {
+    return super._inputWrapping(this._inputGroup(html))
+  }
+}
+
+export default BooleanInput

data/app/javascript/adminterface/lib/inputs/check_boxes_input.js

@@ -0,0 +1,14 @@
+import ChoicesInput from './choices_input'
+
+class CheckBoxesInput extends ChoicesInput {
+  _defaultInputHTMLOptions () {
+    const options = {
+      name: `${this.name}[]`,
+      type: 'checkbox'
+    }
+
+    return { ...super._defaultInputHTMLOptions(), ...options }
+  }
+}
+
+export default CheckBoxesInput

data/app/javascript/adminterface/lib/inputs/choices_input.js

@@ -0,0 +1,96 @@
+import BaseInput from './base_input'
+import { toHTMLAttrString } from '../utils'
+
+class ChoicesInput extends BaseInput {
+  _defaultLegendHTMLOptions () {
+    return {
+      class: 'form-label'
+    }
+  }
+
+  _legendHTMLOptions () {
+    return { ...this._defaultLegendHTMLOptions(), ...this.legend_html_options }
+  }
+
+  _defaultLabelHTMLOptions () {
+    const options = {
+      class: 'form-check-label'
+    }
+
+    return { ...super._defaultLabelHTMLOptions(), ...options }
+  }
+
+  _defaultInputHTMLOptions () {
+    const options = {
+      class: `form-check-input ${this.options.as}`
+    }
+
+    return { ...super._defaultInputHTMLOptions(), ...options }
+  }
+
+  _inputHTMLOptions (value) {
+    return { ...super._inputHTMLOptions(), ...{ value: value, id: `batch-form-${this.name}-${value}` } }
+  }
+
+  _labelHTMLOptions (value) {
+    return { ...super._labelHTMLOptions(), ...{ for: `batch-form-${this.name}-${value}` } }
+  }
+
+  _wrapWith (html) {
+    return `
+      <div class="form-check">${html}</div>
+    `
+  }
+
+  _choices (collection) {
+    return ((() => {
+      const result = []
+
+      collection.forEach(v => {
+        let option
+        if (Array.isArray(v)) {
+          option =
+            this._wrapWith(`
+              ${this._inputHTML(v[1])}
+              ${this._labelHTML(v[0])}
+            `)
+        } else {
+          option =
+            this._wrapWith(`
+              ${this._inputHTML(v)}
+              ${this._labelHTML(v)}
+            `)
+        }
+        result.push(option)
+      })
+
+      return result
+    })()).join('')
+  }
+
+  _inputHTML (value) {
+    return `<input ${toHTMLAttrString(this._inputHTMLOptions(value))}>`
+  }
+
+  _labelHTML (value) {
+    return `<label ${toHTMLAttrString(this._labelHTMLOptions(value))}>${value}</label>`
+  }
+
+  _legendHTML () {
+    return `<label ${toHTMLAttrString(this._legendHTMLOptions())}>${this.label}</label>`
+  }
+
+  _choicesHTML () {
+    const collection = this.options.collection || []
+    return collection.length ? this._choices(collection) : ''
+  }
+
+  render () {
+    return this._inputWrapping(`
+      ${this._legendHTML()}
+      <div class="choices">${this._choicesHTML()}</div>
+    `)
+  }
+}
+
+export default ChoicesInput

data/app/javascript/adminterface/lib/inputs/color_input.js

@@ -0,0 +1,14 @@
+import BaseInput from './base_input'
+
+class ColorInput extends BaseInput {
+  _defaultInputHTMLOptions () {
+    const options = {
+      class: `form-control form-control-color ${this.options.as}`,
+      type: 'color'
+    }
+
+    return { ...super._defaultInputHTMLOptions(), ...options }
+  }
+}
+
+export default ColorInput