diff --git a/Awful.apk/src/main/assets/javascript/thread.js b/Awful.apk/src/main/assets/javascript/thread.js index b2769b4c2..7ac70a708 100644 --- a/Awful.apk/src/main/assets/javascript/thread.js +++ b/Awful.apk/src/main/assets/javascript/thread.js @@ -34,10 +34,11 @@ function containerInit() { loadIgnoredPost(target, event); return; } - if (target.tagName === 'IMG' && target.hasAttribute('title') && target.src.endsWith('.gif')) { + if (target.tagName === 'IMG' && target.src.endsWith('.gif')) { freezeGif(target); return; } + // TODO 2022/09/22: does this get called anymore? images get wrapped in tags upstream, and gif freezing acts on the tags. if (target.tagName === 'CANVAS' && target.hasAttribute('title') && target.getAttribute('src').endsWith('.gif')) { target.outerHTML = ''; return; @@ -186,26 +187,26 @@ function processPosts(scopeElement) { highlightOwnQuotes(scopeElement); } - // handle all GIFs that are not avatars + // handle all GIFs that are not avatars if (listener.getPreference('disableGifs') === 'true') { - scopeElement.querySelectorAll('img[title][src$=".gif"]:not(.avatar)').forEach(prepareFreezeGif); + scopeElement.querySelectorAll('img[src$=".gif"]:not(.avatar)').forEach(prepareFreezeGif); } - // this handles all avatar processing, meaning if the avatar is a GIF we need to handle freezing as well - scopeElement.querySelectorAll("img[title].avatar").forEach(function each(img) { - img.addEventListener('load', processSecondaryAvatar); - }); - function processSecondaryAvatar() { - // when people want to use gangtags as avatars, etc., they often use a 1x1 image as their primary avatar. - // if this is the case, we change over to a "secondary" avatar, which is probably what's intended. - if (this.naturalWidth === 1 && this.naturalHeight === 1 && this.dataset.avatarSecondSrc && this.dataset.avatarSecondSrc.length) { - this.src = this.dataset.avatarSecondSrc; - } - - if (listener.getPreference('disableGifs') === 'true' && this.src.slice(-4) === ".gif") { - prepareFreezeGif(this); - } - } + // this handles all avatar processing, meaning if the avatar is a GIF we need to handle freezing as well + scopeElement.querySelectorAll("img.avatar").forEach(function each(img) { + img.addEventListener('load', processSecondaryAvatar); + }); + function processSecondaryAvatar() { + // when people want to use gangtags as avatars, etc., they often use a 1x1 image as their primary avatar. + // if this is the case, we change over to a "secondary" avatar, which is probably what's intended. + if (this.naturalWidth === 1 && this.naturalHeight === 1 && this.dataset.avatarSecondSrc && this.dataset.avatarSecondSrc.length) { + this.src = this.dataset.avatarSecondSrc; + } + + if (listener.getPreference('disableGifs') === 'true' && this.src.slice(-4) === ".gif") { + prepareFreezeGif(this); + } + } } /** @@ -213,7 +214,7 @@ function processPosts(scopeElement) { * @param {Element} scopeElement The element containing videos to pause */ function pauseVideosOutOfView(scopeElement) { - scopeElement = scopeElement || document; + scopeElement = scopeElement || document; scopeElement.querySelectorAll('video').forEach(function eachVideo(video) { if (isElementInViewport(video) && video.parentElement.parentElement.tagName !== 'BLOCKQUOTE' && video.firstElementChild.src.indexOf('webm') === -1) { video.play(); @@ -309,16 +310,14 @@ function showInlineImage(url) { } /** - * Adds an empty Image Element to the Link if the link is not around a gif + * Adds an empty Image Element to the Link * @param {Element} link Link Element */ function addEmptyImg(link) { - // basically treating anything not marked as a frozen gif as a text link - if (!link.classList.contains(FROZEN_GIF)) { - var image = document.createElement('img'); - image.src = ''; - link.appendChild(image); - } else { + var image = document.createElement('img'); + image.src = ''; + link.appendChild(image); + if (link.classList.contains(FROZEN_GIF)) { link.classList.add(LOADING); } } @@ -332,6 +331,9 @@ function showInlineImage(url) { image.src = url; image.style.height = 'auto'; image.style.width = 'auto'; + if (link.classList.contains(FROZEN_GIF)) { + link.querySelector('canvas').replaceWith(image); + } link.classList.remove(LOADING); link.classList.remove(FROZEN_GIF); } @@ -371,6 +373,8 @@ function changeFontFace(font) { * @param {Element} image Gif image that will be turned into a still canvas */ function freezeGif(image) { + var FROZEN_GIF = 'playGif'; + var canvas = document.createElement('canvas'); var imageWidth = image.naturalWidth; var imageHeight = image.naturalHeight; @@ -382,6 +386,9 @@ function freezeGif(image) { canvas.setAttribute(image.attributes[i].name, image.attributes[i].value); } image.parentNode.replaceChild(canvas, image); + if (canvas.parentNode.tagName === "A") { + canvas.parentNode.classList.add(FROZEN_GIF); + } } /** @@ -389,13 +396,13 @@ function freezeGif(image) { * @param {Element} image Gif image to monitor */ function prepareFreezeGif(image) { - if (!image.complete) { - image.addEventListener('load', function freezeLoadHandler() { - freezeGif(image); - }); - } else { - freezeGif(image); - } + if (!image.complete) { + image.addEventListener('load', function freezeLoadHandler() { + freezeGif(image); + }); + } else { + freezeGif(image); + } } /** @@ -464,9 +471,9 @@ function handleQuoteLink(link, event) { * @param {Element} info The HTMLElement of the postinfo */ function toggleInfo(info) { - var posterTitle = info.querySelector('.postinfo-title'); - var posterRegDate = info.querySelector('.postinfo-regdate'); - if (!posterTitle) { return; } + var posterTitle = info.querySelector('.postinfo-title'); + var posterRegDate = info.querySelector('.postinfo-regdate'); + if (!posterTitle) { return; } if (posterTitle.classList.contains('extended')) { if (info.querySelector('.avatar') !== null) { @@ -475,15 +482,15 @@ function toggleInfo(info) { info.querySelector('canvas').classList.add('avatar'); } window.requestAnimationFrame(function shrinkAvatar() { - info.querySelector('.avatar').classList.remove('extended'); + info.querySelector('.avatar').classList.remove('extended'); }); } posterTitle.classList.remove('extended'); posterTitle.setAttribute('aria-hidden', 'true'); if (posterRegDate) { - posterRegDate.classList.remove('extended'); - posterRegDate.setAttribute('aria-hidden', 'true'); - } + posterRegDate.classList.remove('extended'); + posterRegDate.setAttribute('aria-hidden', 'true'); + } } else { if (info.querySelector('.avatar') !== null) { if (info.querySelector('canvas') !== null) { @@ -500,9 +507,9 @@ function toggleInfo(info) { posterTitle.classList.add('extended'); posterTitle.setAttribute('aria-hidden', 'false'); if (posterRegDate) { - posterRegDate.classList.add('extended'); - posterRegDate.setAttribute('aria-hidden', 'false'); - } + posterRegDate.classList.add('extended'); + posterRegDate.setAttribute('aria-hidden', 'false'); + } } } @@ -713,16 +720,16 @@ function handleTouchLeave() { * Hides all instances of the given avatar on the page */ function hideAvatar(avatarUrl) { - document.querySelectorAll('[src="' + avatarUrl + '"]').forEach(function(avatarTag) { - avatarTag.classList.add('hide-avatar'); - }); + document.querySelectorAll('[src="' + avatarUrl + '"]').forEach(function(avatarTag) { + avatarTag.classList.add('hide-avatar'); + }); } /** * Shows all instances of the given avatar on the page */ function showAvatar(avatarUrl) { - document.querySelectorAll('[src="' + avatarUrl + '"]').forEach(function(avatarTag) { - avatarTag.classList.remove('hide-avatar'); - }); + document.querySelectorAll('[src="' + avatarUrl + '"]').forEach(function(avatarTag) { + avatarTag.classList.remove('hide-avatar'); + }); } \ No newline at end of file