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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
|
<script>
let asidePaddingTop;
let sectionPaddingTop;
let coverSlid = false;
const hideCover = Boolean({{$hide_cover}});
let coverHeight;
document.addEventListener('DOMContentLoaded', function() {
const coverPhoto = document.getElementById('cover-photo');
if (!coverPhoto) return;
// If screen width is smaller than 755px, remove the cover photo
if (window.innerWidth < 755) {
coverPhoto.remove();
coverSlid = true;
return;
}
// Otherwise, set up the cover photo's size
coverPhoto.classList.remove('d-none');
coverHeight = Math.round(window.innerWidth / 2.75862069);
coverPhoto.style.height = `${coverHeight}px`;
datasrc2src('#cover-photo > img');
// Bind events for hiding the cover
document.addEventListener('click', slideUpCover);
document.addEventListener('mouseup', slideUpCover);
document.addEventListener('keyup', slideUpCover);
// Hide the cover if required
if (hideCover) {
hideCoverFunction();
} else if (!coverSlid) {
coverVisibleActions();
}
// Throttle scroll event
let lastScrollTop = 0;
const scrollThreshold = 100;
window.addEventListener('scroll', function() {
const scrollTop = window.scrollY;
if (Math.abs(scrollTop - lastScrollTop) < scrollThreshold) {
return;
}
lastScrollTop = scrollTop;
handleScroll(scrollTop);
});
// Adjust cover photo on resize
window.addEventListener('resize', function() {
if (!coverPhoto) return;
coverHeight = Math.round(window.innerWidth / 2.75862069);
coverPhoto.style.height = `${coverHeight}px`;
if (window.innerWidth < 755) {
coverPhoto.remove();
coverHiddenActions();
coverSlid = true;
}
});
});
// Scroll event handling
function handleScroll(scrollTop) {
const coverPhoto = document.getElementById('cover-photo');
if (!coverPhoto) return;
if (scrollTop >= coverHeight) {
coverHiddenActions();
coverSlid = true;
} else if (scrollTop < coverHeight) {
if (coverSlid) {
document.body.style.overflow = 'hidden'; // Disable scrolling
window.scrollTo(0, coverHeight);
setTimeout(function() {
coverSlid = false;
document.body.style.overflow = 'auto'; // Enable scrolling
}, 500);
} else {
coverVisibleActions();
}
}
// Fade effect for main content opacity
const mainElement = document.querySelector('main');
if (mainElement && parseFloat(getComputedStyle(mainElement).opacity) < 1) {
mainElement.style.opacity = (scrollTop / coverHeight).toFixed(1);
}
}
// Functions to handle showing/hiding the cover
function slideUpCover() {
if (coverSlid) return;
window.scrollTo({
top: coverHeight,
behavior: 'smooth'
});
}
function hideCoverFunction() {
if (coverSlid) return;
window.scrollTo(0, coverHeight);
}
// Actions when the cover is visible
function coverVisibleActions() {
document.body.style.cursor = 'n-resize';
const navbar = document.getElementById('navbar-top');
if (navbar) navbar.classList.remove('fixed-top');
const mainElement = document.querySelector('main');
if (mainElement) mainElement.style.opacity = 0;
}
// Actions when the cover is hidden
function coverHiddenActions() {
document.body.style.cursor = '';
const navbar = document.getElementById('navbar-top');
if (navbar) navbar.classList.add('fixed-top');
const mainElement = document.querySelector('main');
if (mainElement) mainElement.style.opacity = 1;
}
</script>
<div class="d-none" id="cover-photo" title="{{$hovertitle}}">
{{$photo_html}}
<div id="cover-photo-caption">
<h1>{{$title}}</h1>
<h3>{{$subtitle}}</h3>
</div>
</div>
|
