website: glossary feature (#2529)

* web: quick fixes in glossary.md

* website: update header tags

* website: add glossary feature

* website: add & style the tooltips & glossary terms

* website: add overlay for glossary definition

* website: add list styling & update links

---------

Co-authored-by: Evgeny Poberezkin <2769109+epoberezkin@users.noreply.github.com>

website/src/js/script.js

@@ -65,6 +65,19 @@ const privateSwiper = new Swiper('.private-swiper', {
             allowTouchMove: true,
         }
     },
+    on: {
+        slideChange: function () {
+            const privateSwiperGlossaryTerms = document.querySelectorAll('.private-swiper .glossary-term');
+            privateSwiperGlossaryTerms.forEach(function (glossaryTerm) {
+                var tooltipId = glossaryTerm.getAttribute('data-glossary');
+                var tooltip = document.getElementById(tooltipId);
+                tooltip.style.visibility = 'hidden';
+                tooltip.style.opacity = '0';
+                const privateSwiper = glossaryTerm.closest('.private-swiper')
+                if (privateSwiper) glossaryTerm.closest('.card').classList.remove('hovered');
+            })
+        }
+    }
 });
 
 const simplexExplainedSwiper = new Swiper(".simplex-explained-swiper", {
@@ -86,6 +99,17 @@ const simplexExplainedSwiper = new Swiper(".simplex-explained-swiper", {
     pagination: {
         el: ".simplex-explained-swiper-pagination",
         clickable: true
+    },
+    on: {
+        slideChange: function () {
+            const explainedSwiperGlossaryTerms = document.querySelectorAll('.simplex-explained-swiper .glossary-term');
+            explainedSwiperGlossaryTerms.forEach(function (glossaryTerm) {
+                var tooltipId = glossaryTerm.getAttribute('data-glossary');
+                var tooltip = document.getElementById(tooltipId);
+                tooltip.style.visibility = 'hidden';
+                tooltip.style.opacity = '0';
+            })
+        }
     }
 });
 
@@ -170,5 +194,106 @@ function openOverlay() {
     }
 }
 
-window.addEventListener('load', openOverlay);
-window.addEventListener('hashchange', openOverlay);
+function updatePointerEventsInPrivateSwiperCards() {
+    var privateSwiperCards = document.querySelectorAll('.private-swiper .card')
+
+    privateSwiperCards.forEach(function (card) {
+        var cardContent = card.querySelector('.card-content')
+
+        function updatePointerEvents() {
+            var cardContentGlossaryTerms = cardContent.querySelectorAll('.glossary-term')
+            cardContentGlossaryTerms.forEach(function (glossaryTerm) {
+                if (cardContent.offsetHeight >= 270) {
+                    glossaryTerm.style.pointerEvents = 'all'
+                } else {
+                    glossaryTerm.style.pointerEvents = 'none'
+                }
+            })
+        }
+        updatePointerEvents()
+
+        cardContent.addEventListener('click', updatePointerEvents)
+        cardContent.addEventListener('mousemove', updatePointerEvents)
+    })
+}
+
+function updateTooltipPosition(glossaryTerm, tooltip) {
+    var glossaryTermOffset = glossaryTerm.getBoundingClientRect()
+    var tooltipOffset = tooltip.getBoundingClientRect()
+
+    if (glossaryTermOffset.top >= tooltipOffset.height) {
+        tooltip.style.top = glossaryTermOffset.top - tooltipOffset.height + 'px'
+    } else {
+        tooltip.style.top = glossaryTermOffset.bottom + 'px'
+    }
+
+    var leftPosition = glossaryTermOffset.left + glossaryTerm.offsetWidth / 2 - tooltip.offsetWidth / 2
+    if (leftPosition < 0) {
+        tooltip.style.left = '0px'
+    } else if (leftPosition + tooltip.offsetWidth > window.innerWidth) {
+        tooltip.style.left = window.innerWidth - tooltip.offsetWidth + 'px'
+    } else {
+        tooltip.style.left = leftPosition + 'px'
+    }
+}
+
+function setupTooltip(glossaryTerm) {
+    var tooltipId = glossaryTerm.getAttribute('data-glossary')
+    var tooltip = document.getElementById(tooltipId)
+
+    function showTooltip() {
+        tooltip.style.visibility = 'visible'
+        tooltip.style.opacity = '1'
+        updateTooltipPosition(glossaryTerm, tooltip)
+        const privateSwiper = glossaryTerm.closest('.private-swiper')
+        if (privateSwiper) glossaryTerm.closest('.card').classList.add('hovered')
+    }
+
+    function hideTooltip() {
+        tooltip.style.visibility = 'hidden'
+        tooltip.style.opacity = '0'
+        const privateSwiper = glossaryTerm.closest('.private-swiper')
+        if (privateSwiper) glossaryTerm.closest('.card').classList.remove('hovered')
+    }
+
+    let click = 0
+    glossaryTerm.addEventListener('mouseover', showTooltip)
+    glossaryTerm.addEventListener('mouseout', function (event) {
+        click = 0
+        if (event.relatedTarget !== tooltip) {
+            hideTooltip()
+        }
+    })
+    glossaryTerm.addEventListener('click', function (event) {
+        event.stopPropagation()
+        if (click == 1) {
+            hideTooltip()
+            click = 0
+        }
+        else {
+            showTooltip()
+            click = 1
+        }
+    })
+
+    tooltip.addEventListener('mouseover', showTooltip)
+    tooltip.addEventListener('mouseout', hideTooltip)
+}
+
+window.addEventListener('load', () => {
+    openOverlay()
+    updatePointerEventsInPrivateSwiperCards()
+
+    const glossaryTerms = document.querySelectorAll('.glossary-term')
+
+    window.addEventListener('scroll', function () {
+        glossaryTerms.forEach(function (glossaryTerm) {
+            var tooltipId = glossaryTerm.getAttribute('data-glossary')
+            var tooltip = document.getElementById(tooltipId)
+            updateTooltipPosition(glossaryTerm, tooltip)
+        })
+    })
+
+    glossaryTerms.forEach(setupTooltip)
+})
+window.addEventListener('hashchange', openOverlay)