Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Clicking on the image on an already-open slideshow breaks #1695's fix for images having different widths after the modal is closed #1700

Closed
2 tasks
benlk opened this issue Apr 26, 2019 · 0 comments
Assignees
Labels
category: images Issues relating to images Estimate: < 6 Hours priority: normal Must be completed before release of this version of plugin. type: bug
Milestone

Comments

@benlk
Copy link
Collaborator

benlk commented Apr 26, 2019

Given a single image in an image block that is aligned left or right, take the following steps to reproduce this bug:

  1. Click/tap on the image to open the image in a Navis modal.
    1. the modal opens
    2. The image width is set to 100%: https://github.com/INN/largo/blob/e2ac830239452658c285860b330d521c6a0f300e/lib/navis-slideshows/js/navis-slideshows.js#L271
  2. Click/tap on the image in the Navis modal.
    1. Nothing happens that the user can see, but the function addCloseX is called again, adding a duplicate X in the modal (which is invisible to the user because it's stacked atop the current X, using the same CSS rules for positioning)
    2. The 100% image width is saved as the pre-click image attribute https://github.com/INN/largo/blob/e2ac830239452658c285860b330d521c6a0f300e/lib/navis-slideshows/js/navis-slideshows.js#L263-L268 and is now relayed to the event handler that calls closeSingle https://github.com/INN/largo/blob/e2ac830239452658c285860b330d521c6a0f300e/lib/navis-slideshows/js/navis-slideshows.js#L274-L276
  3. Click on the X to exit the modal.
    1. The 100% from the second click is used as the pre-click image width by closeSingle when the image is closed: https://github.com/INN/largo/blob/e2ac830239452658c285860b330d521c6a0f300e/lib/navis-slideshows/js/navis-slideshows.js#L177
  4. The image is now 100% of the column width rather than its previous appearance.

So the questions I have are:

  • is there a way to remove that 100% image style setting, and just put it in one of the CSS classes applied to the image, perhaps as a !important?
  • is there a JS sibling selector that we can run on the img to check that it doesn't have a .navis-before class as its sibling, which would mean that the dialog has been opened? We'd want to apply that here:

https://github.com/INN/largo/blob/e2ac830239452658c285860b330d521c6a0f300e/lib/navis-slideshows/js/navis-slideshows.js#L254-L255

@benlk benlk added type: bug priority: normal Must be completed before release of this version of plugin. labels Apr 26, 2019
@benlk benlk added this to the 0.6.4 milestone Apr 26, 2019
@MirandaEcho MirandaEcho added category: images Issues relating to images Estimate Needed labels May 21, 2019
@joshdarby joshdarby self-assigned this Jul 11, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
category: images Issues relating to images Estimate: < 6 Hours priority: normal Must be completed before release of this version of plugin. type: bug
Projects
None yet
Development

No branches or pull requests

3 participants