blade/simplex-chat
1
0
Fork 0
mirror of https://github.com/simplex-chat/simplex-chat.git synced 2024-12-17 17:20:21 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

website: glossary extended (#2574)

Browse Source 
* 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

* website: fix tooltip alignment against multiple terms
fix the issue of aligning tooltip if page has multiple terms against it

* website: close already opened glossary overlay
close the already opened glossary overlay before opening another

* website: add popups for terms inside popups

---------

Co-authored-by: Evgeny Poberezkin <2769109+epoberezkin@users.noreply.github.com>
This commit is contained in:
M Sarmad Qadeer
2023-06-11 12:31:41 +05:00
committed by GitHub
parent 060e7cdf52
commit d585e8f5a7
2 changed files with 56 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/src/js/script.js
+25 -13
View File
@@ -187,6 +187,13 @@ function openOverlay() {
const scrollToEl = document.getElementById(scrollTo)
if (scrollToEl) scrollToEl.scrollIntoView(true)
}
const currentOpenedGlossaryOverlay = document.querySelector('.glossary-overlay.flex')
if (currentOpenedGlossaryOverlay) {
currentOpenedGlossaryOverlay.classList.remove('flex')
currentOpenedGlossaryOverlay.classList.add('hidden')
}
el.classList.remove('hidden')
el.classList.add('flex')
document.body.classList.add('lock-scroll')
@@ -254,15 +261,23 @@ function setupTooltip(glossaryTerm) {
tooltip.style.opacity = '0'
const privateSwiper = glossaryTerm.closest('.private-swiper')
if (privateSwiper) glossaryTerm.closest('.card').classList.remove('hovered')
if (!glossaryTerm.matches(':hover') && !tooltip.matches(':hover')) {
glossaryTerm.classList.remove('active-term')
tooltip.removeEventListener('mouseover', showTooltip)
tooltip.removeEventListener('mouseout', hideTooltip)
}
}
let click = 0
glossaryTerm.addEventListener('mouseover', showTooltip)
glossaryTerm.addEventListener('mouseover', () => {
glossaryTerm.classList.add('active-term')
showTooltip()
tooltip.addEventListener('mouseover', showTooltip)
tooltip.addEventListener('mouseout', hideTooltip)
})
glossaryTerm.addEventListener('mouseout', function (event) {
click = 0
if (event.relatedTarget !== tooltip) {
hideTooltip()
}
hideTooltip()
})
glossaryTerm.addEventListener('click', function (event) {
event.stopPropagation()
@@ -275,25 +290,22 @@ function setupTooltip(glossaryTerm) {
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')
let activeTerm = document.querySelector('.active-term')
if (activeTerm) {
var tooltipId = activeTerm.getAttribute('data-glossary')
var tooltip = document.getElementById(tooltipId)
updateTooltipPosition(glossaryTerm, tooltip)
})
updateTooltipPosition(activeTerm, tooltip)
}
})
const glossaryTerms = document.querySelectorAll('.glossary-term')
glossaryTerms.forEach(setupTooltip)
})
window.addEventListener('hashchange', openOverlay)