Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

FIX: Support pausing inline animated images (#13033)

This commit is contained in:
Penar Musaraj 2021-05-12 09:49:04 -04:00 committed by GitHub
parent f9bb6399e0
commit b0d66b4b2f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 12 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
app/assets/javascripts/discourse/app/initializers/animated-images.js
View File

@ -20,8 +20,10 @@ function _pauseAnimation(img, opts = {}) {
} }
function _resumeAnimation(img) { function _resumeAnimation(img) {
if (img.previousSibling && img.previousSibling.nodeName === "CANVAS") {
img.previousSibling.remove(); img.previousSibling.remove();
img.parentNode.classList.remove("paused-animated-image", "manually-paused"); }
img.parentNode.classList.remove("paused-animated-image");
} }
function animatedImgs() { function animatedImgs() {
@ -83,13 +85,18 @@ export default {
img.addEventListener("load", _handleEvent, false); img.addEventListener("load", _handleEvent, false);
} }
img.parentNode.classList.add("pausable-animated-image"); const wrapper = document.createElement("div"),
const overlay = document.createElement("div"); overlay = document.createElement("div");
img.parentNode.insertBefore(wrapper, img);
wrapper.classList.add("pausable-animated-image");
wrapper.appendChild(img);
overlay.classList.add("animated-image-overlay"); overlay.classList.add("animated-image-overlay");
overlay.setAttribute("aria-hidden", "true"); overlay.setAttribute("aria-hidden", "true");
overlay.setAttribute("role", "presentation"); overlay.setAttribute("role", "presentation");
overlay.innerHTML = `${iconHTML("pause")}${iconHTML("play")}`; overlay.innerHTML = `${iconHTML("pause")}${iconHTML("play")}`;
img.parentNode.appendChild(overlay); wrapper.appendChild(overlay);
}); });
} }