Newer
Older
vmk-ui-kit / src / js / components / skeleton.js
/**
 * VMK UI Kit browser skeleton helper.
 *
 * Simple utility to toggle skeleton placeholders.
 */

function show(root = document) {
  root.querySelectorAll(".skeleton").forEach(el => el.classList.remove("is-hidden"));
}

function hide(root = document) {
  root.querySelectorAll(".skeleton").forEach(el => el.classList.add("is-hidden"));
}

function create(options = {}) {
  const el = document.createElement("span");
  el.className = ["skeleton", options.type || "text", options.className].filter(Boolean).join(" ");
  if (options.width) el.style.width = options.width;
  if (options.height) el.style.height = options.height;
  return el;
}

export default {
  show,
  hide,
  create
};