Skip to content

Behaviors Cookbook

Jump to bottom
Hugh A. Cayless edited this page Nov 5, 2020 · 5 revisions

Some useful behavior patterns

Print <h1>, <h2>, etc. for <head>

Looks at the level of the <div> and produces the right HTML header type

"head": function(e) {
  let level = Number.parseInt(e.getAttribute("data-level"));
  let result = document.createElement("h" + (level < 6 ? level : 6));
  for (let n of Array.from(e.childNodes)) {
    result.appendChild(n.cloneNode());
  }
  return result;
}

Turning inline TEI notes into endnotes

"note": function(elt){
  if (!this.noteIndex){
    this["noteIndex"] = 1;
  } else {
    this.noteIndex++;
  }
  let id = "note" + this.noteIndex;
  let link = document.createElement("a");
  link.setAttribute("id", "src" + id);
  link.setAttribute("href", "#" + id);
  link.innerHTML = this.noteIndex;
  let content = document.createElement("sup");
  content.appendChild(link);
  let notes = this.dom.querySelector("ol.notes");
  if (!notes) {
    notes = document.createElement("ol");
    notes.setAttribute("class", "notes");
    this.dom.appendChild(notes);
  }
  let note = document.createElement("li");
  note.id = id;
  note.innerHTML = "<a href=\"#src" + id + "\">^</a> " + elt.innerHTML
  notes.appendChild(note);
  return content;
}

Turn persName tags with @ref attributes into links

(ignore <persName>s without @ref)

"persName": [
  ["[ref]", ["<a href=\"$rw@ref\" target=\"_blank\">","</a>"]]
]

Turn TEI tables into HTML tables

For large and complex TEI tables, styling CETEIcean's output with CSS may not be adequate. The code below will replace the <row> and <cell> elements with their HTML equivalents.

"table": function(elt) {
  let table = document.createElement("table");
  table.innerHTML = elt.innerHTML;
  if (table.firstElementChild.localName == "tei-head") {
    let head = table.firstElementChild;
    head.remove();
    let caption = document.createElement("caption");
    caption.innerHTML = head.innerHTML;
    table.appendChild(caption);
  }
  for (let row of Array.from(table.querySelectorAll("tei-row"))) {
    let tr = document.createElement("tr");
    tr.innerHTML = row.innerHTML;
    for (let attr of Array.from(row.attributes)) {
      tr.setAttribute(attr.name, attr.value);
    }
    row.parentElement.replaceChild(tr, row);
  }
  for (let cell of Array.from(table.querySelectorAll("tei-cell"))) {
    let td = document.createElement("td");
    if (cell.hasAttribute("cols")) {
      td.setAttribute("colspan", cell.getAttribute("cols"));
    }
    td.innerHTML = cell.innerHTML;
    for (let attr of Array.from(cell.attributes)) {
      td.setAttribute(attr.name, attr.value);
    }
    cell.parentElement.replaceChild(td, cell);
  }
  this.hideContent(elt, true);
  elt.appendChild(table);
}
Clone this wiki locally