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

FIX: add tracked property for items in lightbox carousel (#22592) 

The new lightbox was missing the tracked property for items when it was launched earlier as experimental feature flag.

This PR should fix issues experienced when the user clicks between multiple galleries causing the carousel images not to be updated as they were previously not tracked.
This commit is contained in:
David Battersby 2023-07-13 20:36:22 +08:00 committed by GitHub
parent d7b7ca82f5
commit 80578e75f0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 38 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/assets/javascripts/discourse/app/components/d-lightbox.js
View File

@ -27,6 +27,7 @@ import { tracked } from "@glimmer/tracking";
export default class DLightbox extends Component {
@service appEvents;
@tracked items = [];
@tracked isVisible = false;
@tracked isLoading = false;
@tracked currentIndex = 0;
@ -40,6 +41,9 @@ export default class DLightbox extends Component {
@tracked hasCarousel = false;
@tracked hasExpandedTitle = false;
options = {};
callbacks = {};
willClose = false;
elementId = LIGHTBOX_ELEMENT_ID;
titleElementId = TITLE_ELEMENT_ID;
animationDuration = ANIMATION_DURATION;

41
app/assets/javascripts/discourse/tests/acceptance/d-lightbox-test.js
View File

@ -51,7 +51,14 @@ ${generateLightboxMarkup(LIGHTBOX_IMAGE_FIXTURES.second)}`;
function setupPretender(server, helper, markup) {
const topicResponse = cloneJSON(topicFixtures["/t/280/1.json"]);
topicResponse.post_stream.posts[0].cooked += markup;
let markupFromArray = Array.isArray(markup);
let responseTotal = markupFromArray ? markup.length : 1;
for (let i = 0; i < responseTotal; i++) {
topicResponse.post_stream.posts[i].cooked += markupFromArray
? markup[i]
: markup;
}
server.get("/t/280.json", () => helper.response(topicResponse));
server.get("/t/280/:post_number.json", () => helper.response(topicResponse));
@ -632,11 +639,10 @@ acceptance("Experimental Lightbox - carousel", function (needs) {
needs.settings({ enable_experimental_lightbox: true });
needs.pretender((server, helper) =>
setupPretender(
server,
helper,
multipleLargeImagesMarkup + multipleLargeImagesMarkup
)
setupPretender(server, helper, [
multipleLargeImagesMarkup + multipleLargeImagesMarkup,
multipleLargeImagesMarkup,
])
);
test("navigation", async function (assert) {
@ -705,7 +711,7 @@ acceptance("Experimental Lightbox - carousel", function (needs) {
const lightboxes = [...queryAll(SELECTORS.DEFAULT_ITEM_SELECTOR)];
const lastThreeLightboxes = lightboxes.slice(-3);
const lastThreeLightboxes = lightboxes.slice(-6);
lastThreeLightboxes.forEach((lightbox) => {
lightbox.remove();
@ -731,6 +737,27 @@ acceptance("Experimental Lightbox - carousel", function (needs) {
await click(SELECTORS.CLOSE_BUTTON);
assert.dom(SELECTORS.LIGHTBOX_CONTENT).doesNotExist();
});
test("images update when changing galleries", async function (assert) {
await visit("/t/internationalization-localization/280");
// click on image from first gallery
await click("#post_1 " + SELECTORS.DEFAULT_ITEM_SELECTOR + ":nth-child(1)");
// toggle carousel open
await click(SELECTORS.CAROUSEL_BUTTON);
// number of images in carousel matches first gallery
assert.dom(SELECTORS.CAROUSEL_ITEM).exists({ count: 6 });
await click(SELECTORS.CLOSE_BUTTON);
// click on image from second gallery
await click("#post_2 " + SELECTORS.DEFAULT_ITEM_SELECTOR + ":nth-child(1)");
// number of images in carousel matches second gallery
assert.dom(SELECTORS.CAROUSEL_ITEM).exists({ count: 3 });
});
});
acceptance("Experimental Lightbox - mobile", function (needs) {