91 lines
3.3 KiB
JavaScript
91 lines
3.3 KiB
JavaScript
document.querySelectorAll(".gallery").forEach(item => {
|
|
// Switch to gallery-js stylesheet
|
|
item.className = "gallery-js";
|
|
|
|
// Create the spotlight container
|
|
let spot = document.createElement('div');
|
|
spot.className = "gallery-spot";
|
|
spot.style.display = "none";
|
|
spot.appendChild(item.firstElementChild.cloneNode(true));
|
|
item.after(spot);
|
|
|
|
// Add some logic
|
|
// item.addEventListener("click", function(e) {
|
|
// console.log(e.target);
|
|
// console.log(e.currentTarget);
|
|
// // Select the clicked media
|
|
// Array.from(item.children).forEach(child => {
|
|
// child.classList.remove('selected');
|
|
// });
|
|
// e.target.classList.add('selected');
|
|
//
|
|
// // Display the current
|
|
// e.currentTarget.nextElementSibling.querySelector('div').innerHTML = e.target.outerHTML;
|
|
// });
|
|
});
|
|
|
|
document.querySelectorAll(".gallery-js > video").forEach(item => {
|
|
// Remove the video controls
|
|
item.removeAttribute('controls');
|
|
// Generate a thumbnail
|
|
item.addEventListener('loadedmetadata', e => {
|
|
const item = e.target;
|
|
item.currentTime = item.duration * 0.5; // 10% of the video
|
|
item.addEventListener('loadeddata', e => {
|
|
const v = e.target;
|
|
const canvas = document.createElement("canvas");
|
|
canvas.width = v.videoWidth;
|
|
canvas.height = v.videoHeight;
|
|
// draw the video frame to canvas
|
|
const ctx = canvas.getContext("2d");
|
|
// ctx.drawImage(v, 0, 0, canvas.width, canvas.height);
|
|
// draw the play button
|
|
// icon = new Path2D("M10,16.5V7.5L16,12M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z");
|
|
icon = new Path2D("M10 10 h 80 v 80 h -80 Z");
|
|
console.log(icon);
|
|
ctx.fill(icon);
|
|
// return the canvas image as a blob
|
|
ctx.canvas.toBlob(
|
|
blob => {
|
|
console.log(blob);
|
|
v.setAttribute('poster', URL.createObjectURL(blob));
|
|
},
|
|
"image/png",
|
|
0.75 /* quality */
|
|
);
|
|
});
|
|
});
|
|
});
|
|
|
|
document.querySelectorAll(".gallery-js > *").forEach(item => {
|
|
// Add some dynamic behavior
|
|
item.addEventListener("click", function(e) {
|
|
// Manage selected media
|
|
if(e.target.classList.contains('selected')) {
|
|
e.target.classList.remove('selected');
|
|
} else {
|
|
e.target.classList.add('selected');
|
|
}
|
|
Array.from(e.target.parentElement.children).forEach(el => {
|
|
if(el != e.target) el.classList.remove('selected');
|
|
});
|
|
|
|
// Change content of spotlight
|
|
let spot = e.target.parentElement.nextElementSibling;
|
|
spot.replaceChild(e.target.cloneNode(true), spot.firstElementChild);
|
|
spot.firstElementChild.setAttribute('controls', "");
|
|
|
|
// Open spotlight media in a new tab
|
|
spot.firstElementChild.addEventListener("click", function(e) {
|
|
window.open(spot.firstElementChild.src, "_blank");
|
|
});
|
|
|
|
// Display the spotlight
|
|
if(e.target.classList.contains('selected')) {
|
|
spot.style.display = "flex";
|
|
} else {
|
|
spot.style.display = "none";
|
|
}
|
|
});
|
|
});
|