Following up on this spike T418333, Reader Growth plans to port the Carousel component (horizontal image scroll) to MultimediaViewer (MMV).
New modules:
- Add mmv.carousel and mmv.carousel.styles modules
- mmv.carousel depends on mmv.bootstrap so the router and hash navigation are available when the click interceptor runs.
"mmv.carousel.styles": {
"styles": [ "resources/mmv.carousel/carousel.less" ]
},
"mmv.carousel": {
"packageFiles": [ "resources/mmv.carousel/index.js" ],
"dependencies": [ "mmv.bootstrap", "mediawiki.router" ]
}Acceptance Criteria
- Add a new carousel module and style module to extension.json: mmv.carousel and mmv.carousel.styles.
- Register the new carousel modules and config variable ($wgMMVMobileCarousel) in skin.json.
- Extend getModules() to load mmv.bootstrap when carousel is enabled.
- Use PHP/server-side rendering to generate the carousel HTML (use HTML::* helpers or mustache template). One way to accomplish this is to extend onBeforePageDisplay() hook handler in Hooks.php by calling a new private method injectCarousel().
- Intercept carousel image clicks and navigate them to MMV's hash route. The JavaScript click interceptor lives in a new file like mmv.carousel/index.js.
Some notes about this based on the decision made in T418333 (and also T407850). I would consider these as additional requirements:
- The carousel will need to be ported from Vue.js to plain HTML and CSS (which we may need to generate in PHP). It needs to render properly and be clickable immediately at the time of first paint, before JS has initialized. We should either use MediaWiki's HTML building classes or something like Mustache templates to do this. We don't want to load Vue to show the carousel, only the lightbox (after the user clicks).
- A small amount of JS for the carousel module should intercept link clicks here and trigger hash navigation (just like the MMV desktop viewer does) once JS initializes
- Since the carousel is loading in PHP, we also need to perform the thumbnail selection/exclusion process in PHP as well. Currently this happens client-side. We'll need to add some kind of hook to manipulate the parser output (we should rely on the parser cache for this), find all matching thumbnails, etc.
- Opt-out mechanisms are handled by T419786, but we need to still hide this new element behind a feature flag of some sort while we build it
- Finally, adding the carousel to pages should not negatively impact performance.
