@plangrid/structure/demo.entry.js

CSS structure library

const ssv = require("ssv")
const paint = require("@plangrid/paint")
const structure = require("./")
const handle = {
  paint: paint,
  structure: structure
}
const demo = window.demo = function(libs) {
  const dope = require("dope")
  const ssv = require("ssv")
  const slice = [].slice
  slice.call(dope.queryData(libs)).forEach(function(el) {
    let classes = ssv.split(libs).map(function(lib) {
      return handle[lib].bond(dope.dataset(el, lib) || "")
    }).join(" ")
    classes = ssv.uniq(classes)
    el.setAttribute("class", classes)
  })
}

demo("paint structure")

function facilitate(types, acts) {
  const ssv = require("ssv")
  function handle(element, type) {
    ssv.split(element.dataset[type]).forEach(invoke, element)
  }
  function invoke(method) {
    acts[method].call(this)
  }
  function capture(type) {
    document.addEventListener(type, function(ev) {
      for (let node = ev.target; node; node = node.parentNode) {
        if (node === document) break
        if (node.dataset[type]) handle(node, type)
      }
    }, true)
  }
  types.forEach(capture)
}

function toggleDU(element) {
  const original = element.getAttribute("class")
  let classes = original
  const openUnion = element.dataset.openUnion
  const openDiff = element.dataset.openDiff
  if (!openUnion) throw new Error("Missing openUnion")
  if (!openDiff) throw new Error("Missing openDiff")
  let wasOpen = ssv.all(classes, openUnion)
  if (wasOpen) {
    classes = ssv.union(classes, openDiff)
    classes = ssv.diff(classes, openUnion)
  } else {
    classes = ssv.diff(classes, openDiff)
    classes = ssv.union(classes, openUnion)
  }
  if (original !== classes) {
    element.setAttribute("class", classes)
  }
}

function toggleExpanded(element) {
  const from = element.getAttribute("aria-expanded")
  const to = "open" === from ? "closed" : "open"
  element.setAttribute("aria-expanded", to)
}

facilitate(["click"], {
  toggleDrawerR1: function() {
    const drawer = document.querySelector("[data-demo=DrawerR1]")
    toggleDU(drawer)
    if (drawer.hasAttribute("hidden")) drawer.removeAttribute("hidden")
    else drawer.setAttribute("hidden", "")
  },
  toggleExpanded: function() {
    toggleExpanded(this)
  },
  logThis: function() {
    console.log(this)
  },
  detachThis: function() {
    this.parentNode.removeChild(this)
  },
  fillContentR1: function() {
    let text = ""
    for (let i = 0, l = 100; i < l;) text += i++ + "<br>"
    document.querySelector("[data-demo=ContentR1]").innerHTML = text
  }
})

// expose for use in console
window.paint = paint;
window.structure = structure;