@ou-imdt/css/js/dev.js

The IMDT CSS library styles native elements with light, extendable CSS. It is developed for Interactive Media Developers at the Open University.

import md from "../js/remark.js";
import "@ou-imd/imd-resizer"



// Get markdown file and load into main content div
async function updateMainContent({category, doc}) {
  const mainContent = document.getElementById("main-content");
  console.log(123)
  mainContent.replaceChildren();
  if(doc && category) {
    
    const supertest = await import(`../docs/${category}/${doc}.md?raw`);
    const markdown = supertest.default;
    if(!markdown) return;
    const {value} = await md.process(markdown);
    const fragment = document.createRange().createContextualFragment(value);
    mainContent.appendChild(fragment);
  } 
};

function getDocAndCategory(str = window.location.search) {
  const params = new URLSearchParams(str);    
  const category = params.get("cat") ;
  const doc = params.get("doc");
  return {category, doc};

}


// Listen to click event on sidebar
const mainSidebar = document.getElementById("main-sidebar");
mainSidebar.addEventListener("click", (event) => {
  if(event.target.tagName === "A") {
    event.preventDefault();
    const {category, doc} = getDocAndCategory(event.target.href);
    history.pushState({}, doc, event.target.href);
    updateMainContent({category, doc});   
  }
});


// Populate sidebar
function renderList(list, parentEl) {
  list.map(i => {
    const li = document.createElement("li");
    const a = document.createElement("a");
    a.href = `?&cat=${i.category}&doc=${i.doc}`;
    a.innerText = i.doc;
    li.appendChild(a);
    parentEl.appendChild(li);
  });
}

// Native Items
const nativeItemList = document.getElementById("native-items");
const nativeItems = [
  {category: "native", doc: "a"},
  {category: "native", doc: "abbr"},
  {category: "native", doc: "blockquote"},
  {category: "native", doc: "bold-italic-b-strong-em"},
  {category: "native", doc: "button"},
  {category: "native", doc: "figure-caption"},
  {category: "native", doc: "cite"},
  {category: "native", doc: "code"},
  {category: "native", doc: "del"},
  {category: "native", doc: "details"},
  {category: "native", doc: "dfn"},
  {category: "native", doc: "dialog"},
  {category: "native", doc: "fieldset-legend"},
  {category: "native", doc: "forms"},
  {category: "native", doc: "h"},
  {category: "native", doc: "hr"},
  {category: "native", doc: "i"},
  {category: "native", doc: "img"},
  {category: "native", doc: "ins"},
  {category: "native", doc: "kbd"},
  {category: "native", doc: "lists"},
  {category: "native", doc: "mark"},
  {category: "native", doc: "p"},
  {category: "native", doc: "picture"},
  {category: "native", doc: "pre"},
  {category: "native", doc: "q"},
  {category: "native", doc: "s"},
  {category: "native", doc: "samp"},
  {category: "native", doc: "small"},
  {category: "native", doc: "sub"},
  {category: "native", doc: "table"},
  {category: "native", doc: "time"},
  {category: "native", doc: "u"},
  {category: "native", doc: "var"},
  {category: "native", doc: "wbr"},
];

// Utility Items
const utilityItemList = document.getElementById("utility-items");
const utilityItems = [
  {category: "utility", doc: "basic-layout"},
  {category: "utility", doc: "table-layout"},
  {category: "utility", doc: "sr-only"},
  {category: "utility", doc: "imd-palette-semantic"},
  {category: "utility", doc: "imd-palette-accent"},
  {category: "utility", doc: "icon"},
  {category: "utility", doc: "striped"},
  {category: "utility", doc: "text"}
];


const guideItemList = document.getElementById("guide-items");
const guideItems = [
  {category: "guide", doc: "breakpoints"},
  {category: "guide", doc: "feedback-messages"},
  {category: "guide", doc: "css-in-webcomponents"}
];


renderList(guideItems, guideItemList);
renderList(utilityItems, utilityItemList);
renderList(nativeItems, nativeItemList);


// check if doc on load
const {doc, category} = getDocAndCategory();
if(['native', 'utility'].includes(category) && doc)  {
  updateMainContent({category, doc});
} else {
  updateMainContent(getDocAndCategory());
}