1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
|
$(document).ready(function() {
insertIframe()
const options = {
threshold: 0.01,
}
const divDoc = document.querySelector('.iframe-container')
const innerSidebar = $('.wy-side-scroll')
intersectionObserver(options, divDoc, innerSidebar)
$(window).resize(function() {
intersectionObserver(options, divDoc, innerSidebar)
})
$(window).scroll(function() {
intersectionObserver(options, divDoc, innerSidebar)
})
});
function intersectionObserver(options, divDoc, innerSidebar) {
// we delete any inline-styles from innerSidebar
if($(innerSidebar).attr('style')) {
innerSidebar.removeAttr('style')
}
const screenWidth = $(window).width()
const sidebar = $('.wy-nav-side')
const documentHeight = $(document).height()
const iframeHeight = $('.iframe-container').height()
const currentPosition = $(document).scrollTop()
const additionalPaddingFromSidebar = screenWidth > 991 ? 70 : 83
const heightThatIsAddedByPaddings = 36
const resultOfSums = documentHeight -
iframeHeight -
currentPosition -
additionalPaddingFromSidebar -
heightThatIsAddedByPaddings
const heightOfAdditionalButton = 50
const onEntry = (entries, observer) => {
entries.forEach(entry => {
if(entry.isIntersecting) {
if(resultOfSums <= 70) {
$(sidebar).hide()
return
}
$(sidebar).show()
$(sidebar).height(resultOfSums)
$(sidebar).css('margin-bottom', '20px')
$(innerSidebar).removeAttr('style')
$(innerSidebar).height(resultOfSums - heightOfAdditionalButton)
return
} else {
$(sidebar).removeAttr('style')
$(innerSidebar).removeAttr('style')
}
})
}
const observer = new IntersectionObserver(onEntry, options);
observer.observe(divDoc)
if($(innerSidebar).attr('style')) {
observer.unobserve(divDoc)
}
determineHeightOfFooterContainer()
}
function determineHeightOfFooterContainer() {
const iframeFooter= $('#vyos-footer-iframe');
const title = window.document.getElementsByTagName('title')?.[0]?.text;
const iframeContainer = $('.iframe-container')
const href = window.location.href;
window.addEventListener('message',function(message){
if(message.data.footerIframeHeight){
$(iframeFooter).css('min-height', `${message.data.footerIframeHeight + 1}px`)
$(iframeContainer).height(message.data.footerIframeHeight + 1)
iframeFooter[0].contentWindow.postMessage({title, href},'*');
}
})
}
function insertIframe() {
const body = $('.wy-body-for-nav')
body.append(divWithIframe)
}
const divWithIframe = `<div class="iframe-container">
<iframe src='https://vyos.io/iframes/footer' id='vyos-footer-iframe'></iframe>
</div>`
|
