move long text out of intro, fix resize, fix position
This commit is contained in:
parent
eb7152bde6
commit
f9b30f1fd8
4 changed files with 25 additions and 8 deletions
0
app/static/js/about.js
Executable file → Normal file
0
app/static/js/about.js
Executable file → Normal file
30
app/static/js/ascroll.js
Executable file → Normal file
30
app/static/js/ascroll.js
Executable file → Normal file
|
@ -15,21 +15,27 @@ function resize() {
|
|||
}
|
||||
}
|
||||
|
||||
function updatePlayer(video, frame, currentTime, out, src, config) {
|
||||
//console.log('update player', currentTime, out, src)
|
||||
function updatePlayerRect(video, frame, config) {
|
||||
var top, rect = frame.getBoundingClientRect();
|
||||
video.style.opacity = 0
|
||||
if (config.root && config.mode != "single") {
|
||||
var root_rect = config.root.getBoundingClientRect();
|
||||
//console.log('rect.top', rect.top, 'window.scrollY', window.scrollY, 'root_rect.top', root_rect.top)
|
||||
top = rect.top - root_rect.top
|
||||
video.style.left = ''
|
||||
} else {
|
||||
top = rect.top + window.scrollY
|
||||
video.style.left = rect.x + 'px'
|
||||
}
|
||||
video.style.top = top + 'px'
|
||||
video.style.display = 'block';
|
||||
video.style.maxWidth = rect.width + 'px'
|
||||
if (src) {
|
||||
}
|
||||
|
||||
function updatePlayer(video, frame, currentTime, out, src, config) {
|
||||
video.style.opacity = 0
|
||||
//console.log('update player', currentTime, out, src)
|
||||
updatePlayerRect(video, frame, config)
|
||||
if (src && config.loaded) {
|
||||
setVideoSrc(video, src)
|
||||
}
|
||||
//video.poster = frame.querySelector('img').src
|
||||
|
@ -108,13 +114,18 @@ function formatInfo(config, ascroll) {
|
|||
h2.innerHTML = config.byline
|
||||
info.appendChild(h2)
|
||||
}
|
||||
if (config.body) {
|
||||
if (config.annotations.length && config.body) {
|
||||
var div = document.createElement('div')
|
||||
div.classList.add('intro')
|
||||
div.innerHTML = config.body
|
||||
info.appendChild(div)
|
||||
}
|
||||
ascroll.appendChild(info)
|
||||
if (!config.annotations.length && config.body) {
|
||||
var div = document.createElement('div')
|
||||
div.innerHTML = config.body
|
||||
ascroll.appendChild(div)
|
||||
}
|
||||
return info
|
||||
}
|
||||
|
||||
|
@ -162,6 +173,12 @@ function renderAnnotation(config, video, root, clip) {
|
|||
updatePlayer(video, frame, annotation['in'], annotation['out'], src, config)
|
||||
}
|
||||
}))
|
||||
window.addEventListener('resize', () => {
|
||||
var visible = isElementInViewport(frame);
|
||||
if (config.loaded && visible) {
|
||||
updatePlayerRect(video, frame, config)
|
||||
}
|
||||
}, false);
|
||||
}
|
||||
|
||||
function renderAnnotations(config) {
|
||||
|
@ -373,7 +390,6 @@ function renderSingleMode(config) {
|
|||
var frame = div.querySelector('.frame')
|
||||
var text = div.querySelector('.text')
|
||||
document.addEventListener('scroll', onVisibilityChange(div.querySelector('.frame'), function(visible) {
|
||||
console.log('scroll', config.loaded, visible)
|
||||
if (config.loaded && visible) {
|
||||
updatePlayer(config.video, frame, config['in'], config['out'], src, config)
|
||||
}
|
||||
|
@ -387,7 +403,7 @@ function renderSingleMode(config) {
|
|||
var annot = document.createElement('div')
|
||||
annot.classList.add('annotation')
|
||||
annot.innerHTML = values
|
||||
console.log(clip)
|
||||
//console.log(clip)
|
||||
annot.dataset['in'] = clip.annotations[0]['in']
|
||||
annot.dataset['out'] = clip.annotations[0]['out']
|
||||
annot.style.display = 'none'
|
||||
|
|
|
@ -89,7 +89,6 @@ class PandoraScroll extends HTMLElement {
|
|||
config.root = this.shadowRoot.querySelector('.pandora-scroll')
|
||||
config.video = document.querySelector('video')
|
||||
loadAnnotations(config).then(config => {
|
||||
config.loaded = true
|
||||
if (config.mode == "single") {
|
||||
renderSingleMode(config)
|
||||
} else {
|
||||
|
@ -98,6 +97,7 @@ class PandoraScroll extends HTMLElement {
|
|||
renderAnnotation(window.config, config.video, config.root, annotation)
|
||||
})
|
||||
}
|
||||
config.loaded = true
|
||||
})
|
||||
}
|
||||
|
||||
|
|
|
@ -16,6 +16,7 @@ function setVideoSrc(video, src) {
|
|||
}
|
||||
src = src.replace('.webm', videoExtension)
|
||||
if (src != video.src) {
|
||||
//console.log(video.src, '->', src)
|
||||
video.src = src
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue