Permeable-Glossary/main.js

/////// Make the website //////


fetch("glossary.json").then(response => response.json()).then(data => glossary = data).then(()=>{

  let [title_bag, properties_bag, words_bag] = glossary;

  function links(link){
    return`
    <a href="${link}">⤴︎</a>
    `
  }

  function voices(voices) {
      return `
      <p>${voices.voice} ${voices.link ? links(voices.link) : ''}</p>
      `
  }
  
  function properties(prop) {
    return `${prop.title}`
  }
  
  function wordBag(words) {
    return `
      ${words.words.map(wordTemplate).join("")}
    `
  }

  function propBag(props) {
    return `
      ${props.properties.map(legendTemplate).join("")}
    `
  }


  function wordTemplate(word) {
      return `
      <div class="word ${word.properties.map(properties).join(" ")}">
        <h1 class="title">${word.title}</h1> ${word.properties.map(symbols).join("")}
        ${word.voices.map(voices).join('')}
      </div>
      `
  }

  function symbols(symbol){
    return `<span class='symbol-word ${symbol.title}-s'>${symbol.symbol}</span>`;
}

  function legendTemplate(prop){
    return `
    <button type="button" id="${prop.title}" class="btn symbol-leg" onmouseover="showsymbol('${prop.title}')" onclick="filterSelection('${prop.title}');activeclass('${prop.title}');">${prop.symbol}<span class="leg_titles" style="color:${prop.color}">:${prop.title}</span></button>
    `
  }
  
  document.getElementById("words").innerHTML = `${words_bag.map(wordBag).join("")}`
  document.getElementById("legend").innerHTML = `<button type="button" class="btn active" onclick="filterSelection('all');activeclass();"> Properties </button> ${properties_bag.map(propBag).join("")}`

}); ///// END OF FETCH!!!!!!



///////// Filters with buttons ///////////


function filterSelection(c) {
  var x, i;
  x = document.getElementsByClassName("word");
  if (c == "all") c = "";
  // Add the "show" class (display:block) to the filtered elements, and remove the "show" class from the elements that are not selected
  for (i = 0; i < x.length; i++) {
    w3RemoveClass(x[i], "show");
    if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
  }
}

////////// Show filtered elements //////////

function w3AddClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    if (arr1.indexOf(arr2[i]) == -1) {
      element.className += " " + arr2[i];
    }
  }
}

////////// Hide elements that are not selected //////

function w3RemoveClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    while (arr1.indexOf(arr2[i]) > -1) {
      arr1.splice(arr1.indexOf(arr2[i]), 1);
    }
  }
  element.className = arr1.join(" ");
}

// Add active class to the current control button (highlight it)
var btnContainer = document.getElementById("legend");
var btns = btnContainer.getElementsByClassName("btn");

function activeclass(btn){
  var btn = document.getElementById(btn)
  var current = document.getElementsByClassName("active");
  current[0].className = current[0].className.replace(" active", "");
  btn.className += " active";
};


/////////////. ADD SNIPPETS TO A DIV ../////////

var snippet = document.getElementsByTagName("strong");
var sptContainer = document.getElementById("sptContainer");

for (var i = 0; i < snippet.length; i++) {
    sptContainer.innerHTML += "<button class='btn snippet'>"+ snippet[i].innerText + "</button>";
}

//////////Search Bar ////////////////////


function search_word() {
    let input = document.getElementById('search').value;
    input=input.toLowerCase();
    let x = document.getElementsByClassName('word');
      
    for (i = 0; i < x.length; i++) { 
        if (!x[i].innerHTML.toLowerCase().includes(input)) {
            x[i].style.display="none";
        }
        else {
            x[i].style.display="show";                 
        }
    }
}

//////// symbols show ////

function showsymbol(btn){
  var btn = document.getElementById(btn);
  var sym = btn.getElementsByClassName("leg_titles");
  console.log(sym)
  sym[0].className += " on";
}


//////// Print button //////

const pagedjs = document.createElement("script");
pagedjs.src = "https://unpkg.com/pagedjs/dist/paged.polyfill.js";
pagedjs.id = "printview";

const printstyle = document.createElement("link");
printstyle.href = "style-print.css";
printstyle.rel = "stylesheet";
printstyle.id = "printstyle";

const interfacestyle = document.createElement("link");
interfacestyle.href = "pagedjs/interface.css";
interfacestyle.rel = "stylesheet";
interfacestyle.id = "interfacestyle";

const printCards = document.getElementById("btn-print");


printCards.addEventListener("click", () => {
	document.getElementsByTagName("head")[0].appendChild(pagedjs);
  document.getElementsByTagName("head")[0].appendChild(interfacestyle);
  document.getElementsByTagName("head")[0].appendChild(printstyle);
});