72 lines
1.7 KiB
JavaScript
72 lines
1.7 KiB
JavaScript
// Used to pop a resizable image view
|
|
async function imageWasClicked(img) {
|
|
img.classList.add("nnwClicked");
|
|
|
|
const rect = img.getBoundingClientRect();
|
|
|
|
var message = {
|
|
x: rect.x,
|
|
y: rect.y,
|
|
width: rect.width,
|
|
height: rect.height
|
|
};
|
|
|
|
try {
|
|
const response = await fetch(img.src);
|
|
if (!response.ok) {
|
|
throw new Error('Network response was not ok.');
|
|
}
|
|
|
|
const imgBlob = await response.blob();
|
|
|
|
var reader = new FileReader();
|
|
reader.readAsDataURL(imgBlob);
|
|
|
|
reader.onloadend = function() {
|
|
message.imageURL = reader.result;
|
|
var jsonMessage = JSON.stringify(message);
|
|
window.webkit.messageHandlers.imageWasClicked.postMessage(jsonMessage);
|
|
}
|
|
} catch (error) {
|
|
console.log('There has been a problem with your fetch operation: ', error.message);
|
|
}
|
|
|
|
}
|
|
|
|
// Used to animate the transition to a fullscreen image
|
|
function hideClickedImage() {
|
|
var img = document.querySelector('.nnwClicked')
|
|
img.style.opacity = 0
|
|
}
|
|
|
|
// Used to animate the transition from a fullscreen image
|
|
function showClickedImage() {
|
|
var img = document.querySelector('.nnwClicked')
|
|
img.classList.remove("nnwClicked");
|
|
img.style.opacity = 1
|
|
window.webkit.messageHandlers.imageWasShown.postMessage("");
|
|
}
|
|
|
|
// Add the click listener for images
|
|
function imageClicks() {
|
|
window.onclick = function(event) {
|
|
if (event.target.matches('img')) {
|
|
imageWasClicked(event.target);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Add the playsinline attribute to any HTML5 videos that don't have it.
|
|
// Without this attribute videos may autoplay and take over the whole screen
|
|
// on an iphone when viewing an article.
|
|
function inlineVideos() {
|
|
document.querySelectorAll("video").forEach(element => {
|
|
element.setAttribute("playsinline", true)
|
|
});
|
|
}
|
|
|
|
function postRenderProcessing() {
|
|
imageClicks()
|
|
inlineVideos()
|
|
}
|