-
Notifications
You must be signed in to change notification settings - Fork 6
/
index.js
32 lines (26 loc) · 1.07 KB
/
index.js
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
/** @type {HTMLDivElement} */
const videoWrapper = document.querySelector('.kjb-video-responsive')
function highlightAndScrollIntoViewActive() {
const sideMenu = document.querySelector('.main-sidebar')
/** @type HTMLLinkElement */
const activeLink = sideMenu.querySelector('.product-outline-post.active')
activeLink.style.outline = '3px solid #0060df'
activeLink.style.padding = '6px'
// NOTE: smooth scrolling doesn't work well in Chromium based browsers
activeLink.scrollIntoView({ block: 'center' })
}
function maximiseVideo() {
const searchForm = document.querySelectorAll('form[role=search]')[1]
videoWrapper.style.maxWidth = '100%'
videoWrapper.style.paddingBottom = '0'
videoWrapper.style.aspectRatio = '5/4'
videoWrapper.style.height = 'auto'
videoWrapper.style.maxHeight = `calc(100vh - ${
searchForm.getBoundingClientRect().height
}px)`
videoWrapper.style.width = '100%'
searchForm.scrollIntoView(true)
}
maximiseVideo()
// NOTE: Ensure scroll animation runs after video resized
window.requestAnimationFrame(highlightAndScrollIntoViewActive)