kf-trombi/directory.js

const $C = (e) => document.createElement(e);
const $G = (e) => document.getElementById(e);

const ordNrRegex = /.*pOrgNr=([0-9]+).*/gm;
const personalIDRegex = /.*pStPersonNr=([0-9]+).*/gm;

function appendLink(nonEmptyGroup) {
  if ($G("kf-trombi_row")) return;

  const inputContainer = $C("span");

  if (nonEmptyGroup) {

    var link = $C("a");
    link.id = "kf-trombi_link";
    link.textContent = "Show trombi";
    link.href="#";
    link.addEventListener("click", toggleTrombi);

    inputContainer.id = "kf-trombi_input_container";
    inputContainer.classList.add("kf-hidden-important");

    const sliderContainer = $C("span");
    sliderContainer.id = "kf-trombi_slider_container";

    var slider = $C("input");
    slider.id = "kf-trombi_columns_slider";
    slider.type = "range";
    slider.value = 5;
    slider.min = 3;
    slider.max = 8;

    var column_nr = $C("span");
    column_nr.id = "kf-trombi_column_nr";
    column_nr.textContent = slider.value;
    var column_label = $C("span");
    column_label.textContent = " columns";

    slider.addEventListener("input", (event) => {
      column_nr.textContent = slider.value;
      const trombi = $G("kf-trombi_trombi");
      trombi.classList.remove( "kf-trombi_trombi_3", "kf-trombi_trombi_4", "kf-trombi_trombi_5", "kf-trombi_trombi_6", "kf-trombi_trombi_7", "kf-trombi_trombi_8" );
      trombi.classList.add(`kf-trombi_trombi_${slider.value}`);
    })

    sliderContainer.append(slider, column_nr, column_label);

    enhanced_checkbox = $C("input");
    enhanced_checkbox.id = "kf-trombi_enhanced_checkbox";
    enhanced_checkbox.type = "checkbox";
    enhanced_checkbox.checked = true;

    var enhance_label = $C("label");
    enhance_label.textContent = " Enhance for printing";
    enhance_label.htmlFor = "kf-trombi_enhanced_checkbox";

    enhanced_checkbox.addEventListener("input", (event) => {
      const trombi = $G("kf-trombi_trombi");
      trombi.classList.toggle('kf-trombi_enhanced');
    })
    inputContainer.append(sliderContainer, enhanced_checkbox, enhance_label);
  } else {
  }

  var tr = $C("div");
  tr.classList.add("kf-button-container");
  tr.append(link, inputContainer);
  tr.id = "kf-trombi_row";

  const nav = $G("actions");
  nav.append(tr);
}

function extractIDs(url) {
  return {
    org: url.replace(ordNrRegex, "$1"),
    perso: url.replace(personalIDRegex, "$1"),
  }
}

function generateCard(student, col) {
  const url = `/kfu_online/wbstudkart.wbShowImage?pOrgNr=${student.ids.org}&pStPersonNr=${student.ids.perso}&pType=U`

  const d = $C("div");
  d.classList.add("kf-trombi_card");

  const img = $C("img");
  img.classList.add("kf-trombi_trombi_img");
  img.src = url;

  const name_div = $C("div");
  name_div.textContent = `${student.firstname} ${student.lastname}`;

  d.append(img, name_div);
  return d;
}

function toggleTrombi() {
  const trombi = $G("kf-trombi_trombi");
  const form = $G("idTNListe");
  const link = $G("kf-trombi_link");
  const inputContainer = $G("kf-trombi_input_container");
  trombi.classList.toggle("kf-hidden-important");
  form.classList.toggle("kf-hidden-important");
  if(inputContainer.classList.toggle("kf-hidden-important")) {
    link.textContent = "Show trombi";
  } else {
    link.textContent = "Hide trombi";
  }
}

function generateTrombi() {
  var trombi = $G("kf-trombi_trombi");
  if (trombi) { trombi.remove(); }
  const slider = $G("kf-trombi_columns_slider");
  trombi = $C("div");
  trombi.id = "kf-trombi_trombi";
  trombi.classList.add("kf-hidden-important");
  trombi.classList.add(`kf-trombi_trombi_${slider.value}`);
  trombi.classList.add("kf-trombi_enhanced");
  const form = $G("idTNListe");

  const table = $G("idTNVWTable");
  const table_head_first_row = table.tHead.rows[0];
  const table_body = table.tBodies[0];

  // check if the page is a waiting list (Warteliste)
  // in which case columns are shifted because of the 'Pos'
  // column.

  const isWaitingList = (table_head_first_row.children[1].textContent.trim() == "Pos");

  const lastnameOffset = 1 + isWaitingList;
  const fistnameOffset = 2 + isWaitingList;
  const studentFileLinkOffset = 1 - isWaitingList;

  const student_list = [];
  for (let row of table_body.children) {
    student_list.push({
      lastname: row.children[lastnameOffset].textContent,
      firstname: row.children[fistnameOffset].textContent,
      ids: extractIDs(row.children[lastnameOffset].children[studentFileLinkOffset].href)
    })
  };

  student_list.forEach((student, idx) => {
    trombi.append(generateCard(student, 1 + idx % 5));
  });

  form.after(trombi);
}

function injectButton() {
  if ($G("kf-trombi_trombi")) {
    $G("idTNListe").classList.remove("kf-hidden-important");
    $G("kf-trombi_trombi").remove();
    $G("kf-trombi_row").remove();
  }

  // only enable on non-empty groups
  const nonEmptyGroup = (document.getElementsByClassName("cNoEntry").length == 0);
  appendLink(nonEmptyGroup);
  if (nonEmptyGroup) {
    generateTrombi();
  }
}

function setup() {
  const observerOptions = {
    childList: true,
    subtree: true,
  };

  const observer = new MutationObserver(logChanges)
  observer.observe(document.body, observerOptions);
}

function logChanges(records, observer) {
  for (const record of records) {
    for (const addedNode of record.addedNodes) {
      if (addedNode.id == "actions") {
        observer.disconnect();
        injectButton();
      }
    }
  }
}

setup();