We will remove a level of inheritance and convert the ImageOverlay to an Overlay with a child
- LanguageOverlay should be converted to an Overlay (T215657)
- Talkoverlay should be an Overlay (T215370)
- ImageOverlay is repurposed as a specialised Overlay which has
noheader. JR: We decided a header made sense
- An imageOverlay factory method returns an Overlay which contains an ImageCarousel component.
- The new ImageCarousel component does not use templatePartials in any way either directly or via toHtmlString (see https://gerrit.wikimedia.org/r/#/c/mediawiki/extensions/MobileFrontend/+/482382/)
Anatomy of ImageOverlay
The ImageOverlay has 3 distinct parts. The header/footer probably belong to the Overlay but may require specific styling and themselves may be components!
Sign off steps
- Update Progress
This ticket did some refactoring of the overlay but was not intended to change the behavior of the overlay other than its toggling behavior and the removal of the white loading overlay. We are looking for regressions from the production behavior. Device compatibility should also be the same in comparison to production's image overlay ( should work on all Grade A mobile browsers).
The image carousel should let the user see the page's images one-by-one in the order that they appear on the page (from top to bottom). To test, run the following steps:
- Visit https://en.m.wikipedia.beta.wmflabs.org/wiki/Barack_Obama_T173949
- Click on one of the images on the page
- Expected: The black image overlay appears with it eventually loading an image
- When the image loads, verify that clicking the black part of the overlay (but not the navigation controls) or on the image itself toggles the visibility of the navigation controls and white details bar. Note: this is intentionally differs from production's behavior which also toggles the visibility of the overlay's close icon.
- When the image loads, test that the back and forward buttons allow you to cycle through the images in the correct order
- Disconnect your internet connection, click the forward button, and verify that a load error message appears.
- Turn connection back on, and click the "Refresh" link. Verify that an image successfully loads
- Close the overlay by clicking on the close icon. Click your browser's forward button and verify that the image you just viewed appears again.