mirror of https://gitgud.io/fatchan/jschan.git
patching up various things to do with audio support like default thumbnail, expanding, thumb extensions, live post template, catalog tiles, etc
parent
632811c636
commit
0da1bacd4f
6 changed files with 115 additions and 94 deletions
After Width: | Height: | Size: 1.1 KiB |
@ -1,97 +1,104 @@ |
|||||||
window.addEventListener('DOMContentLoaded', (event) => { |
window.addEventListener('DOMContentLoaded', (event) => { |
||||||
|
|
||||||
const thumbs = document.getElementsByClassName('post-file-src'); |
const isCatalog = window.location.pathname.endsWith('catalog.html'); |
||||||
|
|
||||||
const toggle = function(thumb, exp, fn) { |
if (!isCatalog) { |
||||||
const close = exp.previousSibling.innerText === 'Close video' ? exp.previousSibling : null; |
const thumbs = document.getElementsByClassName('post-file-src'); |
||||||
if (thumb.style.display === 'none') { |
|
||||||
thumb.style.display = ''; |
|
||||||
exp.style.display = 'none'; |
|
||||||
fn.style.maxWidth = ''; |
|
||||||
if (close) { |
|
||||||
close.style.display = 'none'; |
|
||||||
exp.pause(); |
|
||||||
} |
|
||||||
} else { |
|
||||||
thumb.style.display = 'none'; |
|
||||||
exp.style.display = ''; |
|
||||||
fn.style.maxWidth = exp.offsetWidth+'px'; |
|
||||||
if (close) { |
|
||||||
close.style.display = ''; |
|
||||||
exp.play(); |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
const expand = function(e) { |
const toggle = function(thumb, exp, fn) { |
||||||
e.preventDefault(); |
const close = exp.previousSibling.innerText === 'Close' ? exp.previousSibling : null; |
||||||
const fileLink = this.firstChild; |
if (thumb.style.display === 'none') { |
||||||
const fileSrc = fileLink.href; |
thumb.style.display = ''; |
||||||
const type = this.dataset.type; |
exp.style.display = 'none'; |
||||||
const thumbElement = fileLink.firstChild; |
fn.style.maxWidth = ''; |
||||||
const fileName = this.previousSibling; |
if (close) { |
||||||
const next = thumbElement.nextSibling; |
close.style.display = 'none'; |
||||||
let expandedElement; |
exp.pause(); |
||||||
if (next) { |
} |
||||||
if (next.innerText === 'Close video') { |
|
||||||
expandedElement = next.nextSibling; |
|
||||||
} else { |
} else { |
||||||
expandedElement = next; |
thumb.style.display = 'none'; |
||||||
|
exp.style.display = ''; |
||||||
|
fn.style.maxWidth = exp.offsetWidth+'px'; |
||||||
|
if (close) { |
||||||
|
close.style.display = ''; |
||||||
|
exp.play(); |
||||||
|
} |
||||||
} |
} |
||||||
} |
} |
||||||
if (!expandedElement && thumbElement.style.opacity !== '0.5') { |
|
||||||
fileLink.style.minWidth = fileLink.offsetWidth+'px'; |
const expand = function(e) { |
||||||
fileLink.style.minHeight = fileLink.offsetHeight+'px'; |
e.preventDefault(); |
||||||
let source; |
const fileLink = this.firstChild; |
||||||
switch(type) { |
const fileSrc = fileLink.href; |
||||||
case 'image': |
const type = this.dataset.type; |
||||||
thumbElement.style.opacity = '0.5'; |
const thumbElement = fileLink.firstChild; |
||||||
thumbElement.style.cursor = 'wait' |
const fileName = this.previousSibling; |
||||||
expandedElement = document.createElement('img'); |
const next = thumbElement.nextSibling; |
||||||
source = expandedElement; |
let expandedElement; |
||||||
source.onload = function() { |
if (next) { |
||||||
thumbElement.style.opacity = ''; |
if (next.innerText === 'Close') { |
||||||
thumbElement.style.cursor = ''; |
expandedElement = next.nextSibling; |
||||||
|
} else { |
||||||
|
expandedElement = next; |
||||||
|
} |
||||||
|
} |
||||||
|
if (!expandedElement && thumbElement.style.opacity !== '0.5') { |
||||||
|
let source; |
||||||
|
switch(type) { |
||||||
|
case 'image': |
||||||
|
fileLink.style.minWidth = fileLink.offsetWidth+'px'; |
||||||
|
fileLink.style.minHeight = fileLink.offsetHeight+'px'; |
||||||
|
thumbElement.style.opacity = '0.5'; |
||||||
|
thumbElement.style.cursor = 'wait' |
||||||
|
expandedElement = document.createElement('img'); |
||||||
|
source = expandedElement; |
||||||
|
source.onload = function() { |
||||||
|
thumbElement.style.opacity = ''; |
||||||
|
thumbElement.style.cursor = ''; |
||||||
|
fileLink.appendChild(expandedElement); |
||||||
|
toggle(thumbElement, expandedElement, fileName); |
||||||
|
} |
||||||
|
break; |
||||||
|
case 'video': |
||||||
|
fileLink.style.minWidth = fileLink.offsetWidth+'px'; |
||||||
|
fileLink.style.minHeight = fileLink.offsetHeight+'px'; |
||||||
|
case 'audio': |
||||||
|
expandedElement = document.createElement(type); |
||||||
|
close = document.createElement('div'); |
||||||
|
close.innerText = 'Close'; |
||||||
|
close.addEventListener('click', function(e) { |
||||||
|
e.preventDefault(); |
||||||
|
e.stopPropagation(); |
||||||
|
toggle(thumbElement, expandedElement, fileName); |
||||||
|
}, true); |
||||||
|
expandedElement.controls = 'true'; |
||||||
|
source = document.createElement('source'); |
||||||
|
expandedElement.appendChild(source); |
||||||
fileLink.appendChild(expandedElement); |
fileLink.appendChild(expandedElement); |
||||||
|
fileLink.insertBefore(close, expandedElement); |
||||||
toggle(thumbElement, expandedElement, fileName); |
toggle(thumbElement, expandedElement, fileName); |
||||||
} |
break; |
||||||
break; |
deault: |
||||||
case 'video': |
break; //uh oh
|
||||||
expandedElement = document.createElement('video'); |
} |
||||||
close = document.createElement('div'); |
source.src = fileSrc; |
||||||
close.innerText = 'Close video'; |
} else if (expandedElement) { |
||||||
close.addEventListener('click', function(e) { |
toggle(thumbElement, expandedElement, fileName); |
||||||
e.preventDefault(); |
|
||||||
e.stopPropagation(); |
|
||||||
toggle(thumbElement, expandedElement, fileName); |
|
||||||
}, true); |
|
||||||
expandedElement.controls = 'true'; |
|
||||||
source = document.createElement('source'); |
|
||||||
expandedElement.appendChild(source); |
|
||||||
fileLink.appendChild(expandedElement); |
|
||||||
fileLink.insertBefore(close, expandedElement); |
|
||||||
toggle(thumbElement, expandedElement, fileName); |
|
||||||
break; |
|
||||||
deault: |
|
||||||
break; //uh oh
|
|
||||||
} |
} |
||||||
source.src = fileSrc; |
return false; |
||||||
} else if (expandedElement) { |
}; |
||||||
toggle(thumbElement, expandedElement, fileName); |
|
||||||
|
for (let i = 0; i < thumbs.length; i++) { |
||||||
|
thumbs[i].addEventListener('click', expand, false); |
||||||
} |
} |
||||||
return false; |
|
||||||
}; |
|
||||||
|
|
||||||
for (let i = 0; i < thumbs.length; i++) { |
window.addEventListener('addPost', function(e) { |
||||||
thumbs[i].addEventListener('click', expand, false); |
const post = e.detail.post; |
||||||
|
const newthumbs = post.getElementsByClassName('post-file-src'); |
||||||
|
for (let i = 0; i < newthumbs.length; i++) { |
||||||
|
newthumbs[i].addEventListener('click', expand, false); |
||||||
|
} |
||||||
|
}); |
||||||
} |
} |
||||||
|
|
||||||
window.addEventListener('addPost', function(e) { |
|
||||||
const post = e.detail.post; |
|
||||||
const newthumbs = post.getElementsByClassName('post-file-src'); |
|
||||||
for (let i = 0; i < newthumbs.length; i++) { |
|
||||||
newthumbs[i].addEventListener('click', expand, false); |
|
||||||
} |
|
||||||
}); |
|
||||||
|
|
||||||
}); |
}); |
||||||
|
Loading…
Reference in new issue