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