How to use @pluginjs/utils - 10 common examples

export const unwrap = el => {
  const parentEl = parent(el)
  children(parentEl).forEach(child => {
    insertBefore(child, parentEl)
  })
  parentEl.remove()
  return el
}

export const clearChild = el => {
  children(el).map(remove)
  return el
}

export const parentWith = curry((fn, el) => {
  const parentElement = parent(el)
  // console.log(el, parentElement)
  if (!parentElement || parentElement === document) {
    return false
  }
  if (fn(parentElement)) {
    return parentElement
  }
  return parentWith(fn, parentElement)
})

export const clearData = el => {
  Object.keys(el).map(name => el.removeAttribute(`data-${name}`))
  return el
}

if (typeof props === 'string') {
    if (typeof value !== 'undefined') {
      el[propMap[props] || props] = value
    } else {
      return el[propMap[props] || props]
    }
  } else {
    Object.entries(props).forEach(([key, value]) => {
      el[propMap[key] || key] = value
    })
  }

  return el
}, isElement)

export const removeProp = curry((props, el) => {
  props.split(' ').forEach(prop => {
    prop = propMap[prop] || prop
    delete el[prop]
  })

  return el
})

// --------------
// Manipulation
// --------------
export const clone = curry(el => el.cloneNode(true))

export const detach = curry(el => {
  if (el.parentNode) {
    el.parentNode.removeChild(el)

import { debounce } from '@pluginjs/utils'
import Pj from '@pluginjs/factory'

/* Credit to http://naver.github.io/egjs/ MIT */
let isRotate = false
const latency = 250
const emitter = Pj.emitter
const scroll = debounce(() => {
  if (isRotate) {
    isRotate = false
    return
  }

  emitter.emit('scrollend', {
    top: window.pageYOffset,
    left: window.pageXOffset
  })
}, latency)

const onOrientationchange = () => {
  isRotate = true
}

function attachEvent() {

this.eventName('click'),
        `.${this.classes.ITEM}`,
        ({ target }) => {
          const hasItemClass = hasClass(this.classes.ITEM)
          const $item = hasItemClass(target)
            ? target
            : parentWith(hasItemClass, target)
          this.$selected = $item
          this.close()
          this.trigger(EVENTS.CHANGE, getData('data', $item), this)
        }
      )
    )(this.$panel)

    if (this.options.keyboard) {
      compose(
        bindEvent(this.eventName('blur'), () => {
          this.leave('focus')
          removeEvent(this.eventName('keydown'), this.$element)
        }),
        bindEvent(this.eventName('focus'), () => {
          this.enter('focus')
          bindEvent(
            this.eventName('keydown'),
            e => {
              this.triggerCloseButten()
              if (e.keyCode === 40 && e.which === 40) {
                // down
                this.next()
                e.preventDefault()
              }
              if (e.keyCode === 38 && e.which === 38) {

//   )
        // }
        default: {
          return baseFormat(options)
        }
      }
    }

    // update :: String -> monad
    const update = compose(
      chain(updateMiddleware(options)),
      input
    )

    // getFormattedData :: {} -> String
    const format = compose(
      chain(formatMiddleware(options)),
      Model.of
    )
    this.onChange = event => {
      const data = event.target.value.slice(this.lastValue.length)
      this.data = update(data)
      this.element.value = format(this.data)
    }
    if (this.element.disabled || this.options.disabled) {
      this.disable()
    }
    this.observe()
    this.enter('initialized')
    this.trigger(EVENTS.READY)
  }

constructor(element, options = {}) {
    super(NAMESPACE, element)
    // options
    this.initOptions(DEFAULTS, options)
    if (options.module) {
      this.options.module = options.module
    }
    this.firstClassName = this.element.className
    this.setupI18n()
    // class
    this.initClasses(CLASSES)
    compose(
      attr({ placeholder: this.options.placeholder }),
      addClass(this.classes.NAMESPACE, 'pj-input')
    )(this.element)
    // init global vars
    this.$body = query('body')

    this.module = this.options.module[0]
    this.contrast = true
    this.history = true

    this.data = DATA
    this.color = null
    this.oldColor = null
    this.solidModule = this.options.solidModule

    this.info = {

bindEvent(this.eventName('change'), e => {
        const val = e.target.value
        this.set(this.options.parse.call(this, val))
      }),
      // switch panel
      bindEvent(this.eventName('click'), () => {
        if (this.is('disabled')) {
          return false
        }

        this.openPanel()
        return null
      })
    )(this.element)

    compose(
      // manage event
      bindEvent(this.eventName('click'), `.${this.classes.MANAGE}`, () => {
        this.options.manage()
      }),
      // action event
      bindEvent(this.eventName('click'), `.${this.classes.OK}`, () => {
        if (this.is('disabled')) {
          return false
        }
        // this.oldColor = this.color
        // if (this.oldColor != null) {
        //   if (this.oldColor.indexOf('linear-gradient') > -1) {
        //     this.setGradient(this.oldColor)
        //   } else {
        //     this.setSolid(this.oldColor)
        //   }

createMarker(latlng, opts = {}) {
    const { lat, lng } = latlng

    const coord = { latitude: lat, longitude: lng }

    const options = deepMerge(this.options.markerOptions, opts, coord)

    this.$map.clearMarkers()
    this.$map.addMarker(options, true)

    // set lat&lng fill
    this.setLatLng({ lat, lng })

    this.place = this.$map.markers[0]
    // marker drag event
    this.place.addListener('dragend', () => {
      this.setLatLng(this.place.getPosition())
    })
  }

initialize() {
    wrap(
      `<div class="${this.classes.NAMESPACE}"></div>`,
      addClass(this.classes.INPUT, this.element)
    )

    this.defaultVal = this.initVal()
    this.value = deepMerge(
      {},
      this.defaultVal,
      this.options.parse(this.element.value.replace(/'/g, '"'))
    )
    // init
    this.title = new Title(this)
    this.internal = new Internal(this)
    this.target = new Target(this)
    this.external = new External(this)
    this.type = new Type(this)
    this.input = {}

    this.build()
    this.bind()

    const val = this.element.value

export const lensLimit = curry((length, data) => {
  if (data.length > length) {
    return data.slice(0, length)
  }
  return data
})

const isNumber = data => {
  const result = !isNaN(Number(data.slice(-1)))
  if (!result) {
  }
  return result
}

const getNumberByStrRange = curry((data, min, max) => {
  if (data.length > min + 1) {
    return Number(data.slice(min, max))
  }
  return Number(`${data[min]}0`)
})

export const dateLimit = data => {
  const backspace = data.slice(0, -1)
  const range = getNumberByStrRange(data)
  const mm = range(4, 6)
  const dd = range(6, 8)
  // check isNumber
  if (!isNumber(data)) {
    return backspace
  }