You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

177 lines
4.9 KiB
JavaScript

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