Tiny Resources | Glossary

Live Example

Webflow Project Page (to Clone)

Cloneable

JavaScript

CMS

** Advanced Coding **

Most of the functions on the glossary lobby page are made with JavaScript. This fact makes this clonable a bit more complex for custom changes. Almost any structural change to the glossary CMS items must be accompanied with change in the code.

‍

The first part of the code deals with each item on the list:

We go over each item and find the first letter of the item name.
Then we use this letter to create an anchor by assigning it to the item's ID
Then we add it to a custom attribute (data-letter) that we later read to make group separations.

* Those items are kept hidden to only later show 1 for each group

const item_names = document.querySelectorAll('.glossary-h2');
const letters = [];

item_names.forEach((item, index)=>{
let name = item.innerHTML;
let first_char = name.charAt(0);

item.parentElement.parentElement.querySelector('.letter_anchor').setAttribute("id", first_char);
item.parentElement.parentElement.querySelector('.glossary-hidden-letter').setAttribute("data-letter", first_char);
item.parentElement.parentElement.querySelector('.glossary-hidden-letter').innerHTML = first_char;

if (letters.indexOf(first_char) === -1) {
letters.push(first_char);
}
})

Copy

Next piece of code creates an array of all the ABC letters.

Then we add href attribute to each item on this array, only if it also exists on the previous array of all glossary items.

// Letter Links
const alpha = Array.from(Array(26)).map((e, i) => i + 65);
const alphabet = alpha.map((x) => String.fromCharCode(x));
const links_wrap = document.getElementById('links_wrap');

alphabet.forEach((letter_link, index)=>{
let a = document.createElement("a");
a.innerHTML = letter_link;
a.setAttribute("class", 'term-link');

if (letters.includes(letter_link)) {
a.setAttribute("href", '#' + letter_link);
}

links_wrap.appendChild(a);
})

Copy

Last part of the code is the one that shows the relevant letters for each group and add a seperator right before each item.

* This separator display property is block, which create the seperation

// Show Letter headlines for each group
const elementArray = document.getElementsByClassName("glossary-hidden-letter");
const usedLetters = new Set([]);

for (let i = 0; i < elementArray.length; i++) {
const letter = elementArray[i].getAttribute("data-letter");

if (usedLetters.has(letter) === false) {
usedLetters.add(letter);
createLetterLink(elementArray[i]);
}
}

‍

// Create seperation
function createLetterLink(element) {
element.classList.add('glossary-letter');
var spacer = document.createElement('div');
spacer.classList.add('spacer');
var parent = element.parentNode;
var list = element.parentNode.parentNode;
list.insertBefore(spacer, parent);
}

Copy