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.voices.map(voices).join('')}
      </div>
      `
  }

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

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

  // const action = document.getElementsByClassName("action");
  // for (let i = 0; i < action.length; i++){
  // action[i].innerHTML += "<span class='symbol action-s'>A</span>";
  // }

  // const situation = document.getElementsByClassName("situation");
  //   for (let i = 0; i < situation.length; i++){
  // situation[i].innerHTML += "<span class='symbol situation-s'>S</span>";
  // }

  // const logic = document.getElementsByClassName("logic");
  //   for (let i = 0; i < logic.length; i++){
  // logic[i].innerHTML += "<span class='symbol logic-s'>C</span>";
  // }

  // const proposition = document.getElementsByClassName("proposition");
  //   for (let i = 0; i < proposition.length; i++){
  // proposition[i].innerHTML += "<span class='symbol proposition-s'>T</span>";
  // }

  // const hyperlink = document.getElementsByClassName("hyperlink");
  //   for (let i = 0; i < hyperlink.length; i++){
  // hyperlink[i].innerHTML += "<span class='symbol hyperlink-s'>N</span>";
  // }

  // const process = document.getElementsByClassName("process");
  //   for (let i = 0; i < process.length; i++){
  // process[i].innerHTML += "<span class='symbol process-s'>P</span>";
  // }

  // const language = document.getElementsByClassName("language");
  //   for (let i = 0; i < language.length; i++){
  // language[i].innerHTML += "<span class='symbol language-s'>G</span>";
  // }

  // const agent = document.getElementsByClassName("agent");
  //   for (let i = 0; i < agent.length; i++){
  // agent[i].innerHTML += "<span class='symbol agent-s'>E</span>";
  // }

  // const tool = document.getElementsByClassName("tool");
  //   for (let i = 0; i < tool.length; i++){
  // tool[i].innerHTML += "<span class='symbol tool-s'>T</span>";
  // }

  // const form = document.getElementsByClassName("form");
  //   for (let i = 0; i < form.length; i++){
  // form[i].innerHTML += "<span class='symbol form-s'>Y</span>";
  // }


  



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






///////// filters with buttons ///////////

filterSelection("all")
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");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.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>";
}


//////////// Randomise Font ////////////////

// JavaScript code to pick 
// a random color from array
function pickColor() {

    // Array containing colors
    var colors = [
        '#ff0000', '#00ff00', '#0000ff',
        '#ff3333', '#ffff00', '#ff6600'
    ];

    // selecting random color
    var random_color = colors[Math.floor(
            Math.random() * colors.length)];

    var x = document.getElementById('pick');
    x.style.color = random_color;
} 


//////////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";                 
        }
    }
}