View file flippant.js-master/lib/flip.js

File size: 1.82Kb
exports.flip = flip

function flip(flipper, content, type, class_name, timeout) {
  var position
    , back
    , style_func
  timeout = timeout || 400
  type = type || "card"

  if (type === "modal") {
    class_name = class_name || "flippant-modal-dark"
    position = "fixed"
    style_func = null_styles
  }

  if (type === "card") {
    class_name = class_name || "flippant-modal-light"
    position = "absolute"
    style_func = card_styles
  }

  back = document.createElement('div')
  document.body.appendChild(back)
  set_styles(back, flipper, position)
  back.innerHTML = content

  flipper.classList.add('flippant')
  back.classList.add('flippant-back')
  back.classList.add(class_name)
  if (position == "absolute") {
    style_func(back)
  } else {
    window.setTimeout(function () {
      style_func(back)
    }, 0)
  }
  window.setTimeout(function () {
    back.classList.add('flipper')
    back.classList.add('flipped')
    flipper.classList.add('flipped')
  }, 0)

  back.addEventListener('close', close)
  back.close = close

  function close() {
    set_styles(back, flipper, position)
    back.classList.remove('flipped')
    back.classList.remove('flipped')
    flipper.classList.remove('flipped')
    window.setTimeout(function () {
      back.classList.remove(class_name)
      document.body.removeChild(back)
    }, timeout)
  }

  return back
}

function set_styles(back, front, position) {
  back.style.position = position
  back.style.top = front.offsetTop + "px"
  back.style.left = front.offsetLeft + "px"
  back.style['min-height'] = front.offsetHeight + "px"
  back.style.width = front.offsetWidth + "px"
  back.style["z-index"] = 9999
}

function null_styles(back) {
  back.style.top = null
  back.style.left = null
  back.style.height = null
  back.style.width = null
}

function card_styles(back) {
  back.style.height = 'auto'
}