mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/Popups
synced 2024-12-18 02:00:53 +00:00
a0754c8cf9
Provide containers for page previews examples In storybook we avoid position absolute but this deviation from how they behave in reality could lead to subtle differences that impact the rendering of previews. It also doesn't allow to see the preview in the context of the link which is an important part of visually verifying the position of the pokey arrow. This also allows us to rethink the broken RTL mode. We now scope LTR rules to a LTR class that is present on the container, and use the CSSJanus parsed stylesheet for RTL. Change-Id: I189019824ddd6aa759790fd162ffcd543619a953
111 lines
2.9 KiB
JavaScript
111 lines
2.9 KiB
JavaScript
import { SIZES } from '../../src/ui/thumbnail';
|
|
import { createPreviewWithType, layoutPreview, getClasses,
|
|
createLayout,
|
|
pointerSize, landscapePopupWidth, portraitPopupWidth
|
|
} from '../../src/ui/renderer.js';
|
|
import scaleDownThumbnail from './scaleDownThumbnail';
|
|
|
|
/**
|
|
* @typedef {LayoutHint}
|
|
* @property {boolean} flippedX
|
|
* @property {boolean} flippedY
|
|
*/
|
|
/**
|
|
* Creates a static/stateless Popup and returns its HTML.
|
|
*
|
|
* @param {ext.popups.PreviewModel} model
|
|
* @param {LayoutHint} layoutHint
|
|
*
|
|
* @return {string} HTML
|
|
*/
|
|
function createPopup( model, layoutHint ) {
|
|
if ( model.thumbnail ) {
|
|
model.thumbnail = scaleDownThumbnail( model.thumbnail );
|
|
}
|
|
|
|
const preview = createPreviewWithType( model );
|
|
const WINDOW_WIDTH = preview.isTall ? 500 : 500;
|
|
const WINDOW_HEIGHT = preview.isTall ? 450 : 500;
|
|
const LINK_HEIGHT = 40;
|
|
const POPUP_SIZE = preview.isTall ? landscapePopupWidth : portraitPopupWidth;
|
|
|
|
const LINK_POS_X = layoutHint.flippedX ?
|
|
WINDOW_WIDTH - LINK_HEIGHT : LINK_HEIGHT;
|
|
const LINK_POS_Y = layoutHint.flippedY ?
|
|
WINDOW_HEIGHT - LINK_HEIGHT :
|
|
- POPUP_SIZE + LINK_HEIGHT;
|
|
|
|
const measures = {
|
|
pageX: LINK_POS_X,
|
|
pageY: 0,
|
|
clientY: 0,
|
|
clientRects: [
|
|
{
|
|
top: WINDOW_HEIGHT,
|
|
bottom: WINDOW_WIDTH
|
|
}
|
|
],
|
|
// Represent link position based on hints
|
|
offset: {
|
|
// control it.
|
|
top: LINK_POS_Y,
|
|
left: 0
|
|
},
|
|
width: POPUP_SIZE,
|
|
height: POPUP_SIZE,
|
|
scrollTop: 0,
|
|
windowWidth: WINDOW_WIDTH,
|
|
windowHeight: WINDOW_HEIGHT
|
|
};
|
|
|
|
// Mirror logic in render::createLayout
|
|
const layout = createLayout(
|
|
preview.isTall,
|
|
measures,
|
|
pointerSize,
|
|
model.languageDirection
|
|
);
|
|
|
|
const wrapper = document.createElement( 'div' );
|
|
const LANG_DIR = layout.dir === 'rtl' ? layout.dir : 'ltr';
|
|
wrapper.setAttribute( 'dir', LANG_DIR );
|
|
wrapper.setAttribute( 'class', `popups-storybook-example storybook-${LANG_DIR}` );
|
|
wrapper.style.maxHeight = `${WINDOW_HEIGHT}px;`;
|
|
wrapper.style.maxWidth = `${WINDOW_HEIGHT}px;`;
|
|
if ( layout.flippedX ) {
|
|
wrapper.classList.add( 'popups-storybook-example-flipped-x' );
|
|
}
|
|
if ( layout.flippedY ) {
|
|
wrapper.classList.add( 'popups-storybook-example-flipped-y' );
|
|
}
|
|
if ( preview.isTall ) {
|
|
wrapper.classList.add( 'popups-storybook-example-tall' );
|
|
}
|
|
|
|
const link = document.createElement( 'a' );
|
|
link.setAttribute( 'href', '#' );
|
|
link.setAttribute( 'class', 'popups-storybook-link' );
|
|
link.textContent = `Page preview ${layout.flippedX ? 'flipped-x' : ''}
|
|
${layout.flippedY ? 'flipped-y' : ''}
|
|
${preview.isTall ? '(landscape)' : '(portrait)'}
|
|
${preview.hasThumbnail ? 'with thumbnail' : ''}`;
|
|
|
|
wrapper.appendChild( link );
|
|
layoutPreview(
|
|
preview,
|
|
layout,
|
|
getClasses( preview, {
|
|
dir: layout.dir,
|
|
flippedX: layout.flippedX,
|
|
flippedY: layout.flippedY
|
|
} ),
|
|
SIZES.landscapeImage.h,
|
|
pointerSize,
|
|
WINDOW_HEIGHT
|
|
);
|
|
wrapper.appendChild( preview.el[ 0 ] );
|
|
return wrapper.outerHTML;
|
|
}
|
|
|
|
export default createPopup;
|