Skip to content

Commit 057c2c1

Browse files
aireillyaireilly
committed
fixes footer overlap
1 parent ca42b63 commit 057c2c1

File tree

1 file changed

+100
-68
lines changed

1 file changed

+100
-68
lines changed

‎_templates/_page_openshift.html.erb

Lines changed: 100 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -286,10 +286,10 @@
286286
<!-- remove toc active class when page is loaded -->
287287
<script type="text/javascript">
288288
window.addEventListener('DOMContentLoaded', () => {
289-
toc_items = document.querySelectorAll('#toc a')
289+
var tocItems = $("#toc a");
290290

291-
for (let i = 0; i < toc_items.length; i++) {
292-
toc_items[i].classList.remove("toc-active");
291+
for (let i = 0; i < tocItems.length; i++) {
292+
tocItems[i].classList.remove("toc-active");
293293
}
294294
})
295295
</script>
@@ -329,111 +329,143 @@
329329
<!-- clear and add toc-active to clicked toc link -->
330330
<script type="text/javascript">
331331
$("#toc a").click(function() {
332-
toc_items = document.querySelectorAll('#toc a')
333-
for (let i = 0; i < toc_items.length; i++) {
334-
toc_items[i].classList.remove("toc-active");
332+
var tocItems = $("#toc a");
333+
for (let i = 0; i < tocItems.length; i++) {
334+
tocItems[i].classList.remove("toc-active");
335335
}
336336
this.classList.add("toc-active");
337337
});
338338
</script>
339339

340340
<!-- update active toc class when mouse scrolls -->
341341
<script type="text/javascript">
342-
window.addEventListener("wheel", () => {
343-
344-
const ioConfiguration = {
345-
"rootMargin": "-120px 0px -400px 0px",
346-
"threshold": 0
347-
};
342+
window.addEventListener('DOMContentLoaded', () => {
343+
window.addEventListener("wheel", () => {
344+
345+
const ioConfiguration = {
346+
"rootMargin": "-120px 0px -400px 0px",
347+
"threshold": 0
348+
};
348349

349-
const observer = new IntersectionObserver(setCurrent, ioConfiguration, entries => {
350-
entries.forEach(entry => {
351-
var id = entry.target.getAttribute('id');
352-
//fight with js
353-
document.querySelector(`#toc li a[href="#${id}"]`).classList.remove('toc-active');
350+
const observer = new IntersectionObserver(setCurrent, ioConfiguration, entries => {
351+
entries.forEach(entry => {
352+
var id = entry.target.getAttribute('id');
353+
//fight with js
354+
document.querySelector(`#toc li a[href="#${id}"]`).classList.remove('toc-active');
355+
});
354356
});
355-
});
356-
357-
//track all h1-4 headings that have an id
358-
document.querySelectorAll('.main h2[id], .main h3[id]').forEach((h) => {
359-
observer.observe(h);
360-
});
361-
362-
//runs when the IntersectionObserver fires
363-
function setCurrent(e) {
364-
var allTocLinks = document.querySelectorAll("#toc li a");
365-
e.map(i => {
366-
if (i.isIntersecting && i.intersectionRatio >= 1) {
367-
allTocLinks.forEach(link => link.classList.remove("toc-active"));
368-
toc_item = document.querySelector(`#toc li a[href="#${i.target.id}"]`)
369-
if(toc_item !== null) toc_item.classList.add('toc-active');
370-
}
371-
});
372-
};
373357

374-
//make clicked toc item active and stop IntersectionObserver
375-
$("#toc a").click(function() {
376-
//stop tracking all h1-4 headings that have an id
358+
//track all h1-4 headings that have an id
377359
document.querySelectorAll('.main h2[id], .main h3[id]').forEach((h) => {
378-
observer.unobserve(h);
360+
observer.observe(h);
379361
});
380-
toc_items = document.querySelectorAll('#toc a')
381-
for (let i = 0; i < toc_items.length; i++) {
382-
toc_items[i].classList.remove("toc-active");
383-
}
384-
this.classList.add("toc-active");
362+
363+
//runs when the IntersectionObserver fires
364+
function setCurrent(e) {
365+
var allTocLinks = document.querySelectorAll("#toc li a");
366+
if (allTocLinks !== undefined) {
367+
e.map(i => {
368+
if (i.isIntersecting && i.intersectionRatio >= 1) {
369+
allTocLinks.forEach(link => link.classList.remove("toc-active"));
370+
document.querySelector(`#toc li a[href="#${i.target.id}"]`).classList.add('toc-active')
371+
}
372+
})
373+
}
374+
};
375+
376+
//make clicked toc item active and stop IntersectionObserver
377+
$("#toc a").click(function() {
378+
//stop tracking all h1-4 headings that have an id
379+
document.querySelectorAll('.main h2[id], .main h3[id]').forEach((h) => {
380+
observer.unobserve(h);
381+
});
382+
var tocItems = $("#toc a");
383+
if (tocItems !== undefined) {
384+
for (let i = 0; i < tocItems.length; i++) {
385+
tocItems[i].classList.remove("toc-active");
386+
};
387+
this.classList.add("toc-active");
388+
}
389+
})
385390
})
386391
})
387392
</script>
388393

389394
<!--handle page scroll top and bottom, add toc-active -->
390395
<script type="text/javascript">
391-
toc_items = document.querySelectorAll('#toc a')
392396
document.addEventListener('scroll', () => {
393397
//scroll to bottom
394398
if(document.documentElement.scrollHeight === window.pageYOffset + window.innerHeight) {
395-
if(toc_items !== null) {
396-
for (let i = 0; i < toc_items.length; i++) {
397-
toc_items[i].classList.remove("toc-active")
398-
};
399-
toc_items[toc_items.length - 1].classList.add("toc-active");
400-
}
399+
var tocItems = $("#toc a");
400+
for (let i = 0; i < tocItems.length; i++) {
401+
tocItems[i].classList.remove("toc-active")
402+
};
403+
tocItems[tocItems.length - 1].classList.add("toc-active");
401404
};
402405
//scroll to top
403406
if(window.pageYOffset === 0) {
404-
for (let i = 0; i < toc_items.length; i++) {
405-
if(toc_items !== null) {
406-
toc_items[i].classList.remove("toc-active");
407+
var tocItems = $("#toc a");
408+
for (let i = 0; i < tocItems.length; i++) {
409+
tocItems[i].classList.remove("toc-active");
407410
};
408-
toc_items[0].classList.add("toc-active");
411+
tocItems[0].classList.add("toc-active");
412+
};
413+
})
414+
</script>
415+
416+
<!--adjust sidebar and toc when footer is displayed -->
417+
<script type="text/javascript">
418+
sidebar = document.querySelector('.sidebar')
419+
toc = document.querySelector('#toc')
420+
main = document.querySelector('.main')
421+
okd_footer = document.querySelector('.footer-origin-docs')
422+
document.addEventListener('scroll', () => {
423+
//scroll to bottom
424+
if (window.innerWidth >= 1425) {
425+
if(sidebar !== null && toc !== null) {
426+
if(document.documentElement.scrollHeight === window.pageYOffset + window.innerHeight) {
427+
sidebar.style.marginBottom = "38px";
428+
toc.style.bottom = "35px";
429+
main.style.marginBottom = "35px";
430+
//okd footer
431+
if(okd_footer !== null) {
432+
sidebar.style.marginBottom = "176px";
433+
toc.style.bottom = "175px";
434+
main.style.marginBottom = "135px";
435+
};
436+
};
437+
if(document.documentElement.scrollHeight != window.pageYOffset + window.innerHeight) {
438+
sidebar.style.marginBottom = "0px";
439+
toc.style.bottom = "0px";
440+
}
409441
}
410-
};
442+
}
411443
})
412444
</script>
413445

414446
<!-- adjust alerts on mobile -->
415447
<script type="text/javascript">
416-
alert_item = document.querySelector('#support-alert')
448+
alert = document.querySelector('#support-alert')
417449
window.addEventListener("wheel", () => {
418450
if (window.innerWidth < 1425) {
419451
//adjust alert
420452
if(window.pageYOffset > 0) {
421-
if(alert_item !== null) {
422-
alert_item.style.position = "fixed";
423-
alert_item.style.bottom = "0px";
424-
alert_item.style.margin = "5px";
425-
alert_item.style.zIndex = "9999999";
426-
}
453+
if(alert !== null) {
454+
document.querySelector('#support-alert').style.position = "fixed";
455+
document.querySelector('#support-alert').style.bottom = "0px";
456+
document.querySelector('#support-alert').style.margin = "5px";
457+
document.querySelector('#support-alert').style.zIndex = "9999999";
458+
}
427459
}
428460
}
429461
});
430462
window.addEventListener('resize', () => {
431463
if (window.innerWidth >= 1425) {
432-
if(alert_item !== null) {
433-
alert_item.style.removeProperty('position');
434-
alert_item.style.removeProperty('bottom');
435-
alert_item.style.removeProperty('margin');
436-
alert_item.style.removeProperty('zIndex');
464+
if(alert !== null) {
465+
document.querySelector('#support-alert').style.removeProperty('position');
466+
document.querySelector('#support-alert').style.removeProperty('bottom');
467+
document.querySelector('#support-alert').style.removeProperty('margin');
468+
document.querySelector('#support-alert').style.removeProperty('zIndex');
437469
}
438470
}
439471
})

0 commit comments

Comments
 (0)