Acceptance criteria

1. Open an image that has a long caption or description, like this Rapa Nui map on alpha.
2. Click on the long caption (or its ellipsis) to expand it
3. Clicking on it again should collapse that long caption and bring the panel back to its closed state. (we don’t want to interfere with text selection)
4. When the panel is open and the user clicks on the image or the black background area, the panel collapses.
   1. When hovering the image, if the panel is open, the cursor will be the regular pointer (not the magnifying glass). This is because clicking on the image is not going to trigger the zoom but close the panel instead. Once the panel is closed, the “zoom” behaviour would be as usual again (and the cursor the zoom-in one).
   2. Note that other controls over the image are not affected by this. That is, the user will still be able to go next/previous while keeping the panel open.
5. On full-screen mode, hovering outside the metadata panel will compact it again. This won’t be visible for the user since we are hidding the panel when the user moves the mouse outside of it in full-sceen mode.

Design notes

The panel should be closed in a smooth (but not necessarily slow) transition. I created a quick hack to see how this will look:

$(".mw-mmv-image img, .mw-mmv-image-wrapper").click(function(e){ if($(".mw-mmv-post-image").hasClass("panel-open")){ $("html, body").animate({ scrollTop: 0 }, "slow"); e.stopImmediatePropagation(); } }) jQuery._data( $(".mw-mmv-image img")[0], "events" ).click.reverse()