github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-11-24 00:51:03 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

FIX: bind selector to event listener callback for lightbox (#22637)

Browse Source 
Fixes an issue where this.selector value was not binded at the time of adding the event listener. Therefore when someone opens a chat channel that has images, the value of selector would change. I also moved the callback to a named function (rather than the default handleEvent).
This commit is contained in:
David Battersby 2023-07-17 19:55:48 +08:00 committed by GitHub
parent 346ccfd7f5
commit d44c9cf065
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 36 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
app/assets/javascripts/discourse/app/services/lightbox.js
View File

@ -106,31 +106,6 @@ export default class LightboxService extends Service {
return true;
}
@bind
handleEvent(event) {
const isLightboxClick = event
.composedPath()
.find(
(element) =>
element.matches &&
(element.matches(this.selector) ||
element.matches("[data-lightbox-trigger]"))
);
if (!isLightboxClick) {
return;
}
event.preventDefault();
this.openLightbox({
container: event.currentTarget,
selector: this.selector,
});
event.target.toggleAttribute(SELECTORS.DOCUMENT_LAST_FOCUSED_ELEMENT);
}
@bind
async openLightbox({ container, selector }) {
const { items, startingIndex } = await processHTML({ container, selector });
@ -170,8 +145,13 @@ export default class LightboxService extends Service {
}
const handlerOptions = { capture: true };
container.addEventListener("click", this, handlerOptions);
container.addEventListener(
"click",
(event) => {
this.handleClickEvent(event, selector);
},
handlerOptions
);
this.lightboxClickElements.push({ container, handlerOptions });
}
@ -185,7 +165,11 @@ export default class LightboxService extends Service {
this.closeLightbox();
this.lightboxClickElements.forEach(({ container, handlerOptions }) => {
container.removeEventListener("click", this, handlerOptions);
container.removeEventListener(
"click",
this.handleClickEvent,
handlerOptions
);
});
this.lightboxClickElements = [];
@ -251,6 +235,30 @@ export default class LightboxService extends Service {
);
}
handleClickEvent(event, trigger) {
const isLightboxClick = event
.composedPath()
.find(
(element) =>
element.matches &&
(element.matches(trigger) ||
element.matches("[data-lightbox-trigger]"))
);
if (!isLightboxClick) {
return;
}
event.preventDefault();
this.openLightbox({
container: event.currentTarget,
selector: trigger,
});
event.target.toggleAttribute(SELECTORS.DOCUMENT_LAST_FOCUSED_ELEMENT);
}
willDestroy() {
this.#reset();
}