mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/Popups
synced 2024-11-16 12:12:47 +00:00
83a28d177f
Storybook.js provides a framework for viewing and working with UI components. https://storybook.js.org/ This patch adds the Storybook.js UI library to Popups for the purposes of viewing multiple previews at once. This enables viewing page previews in the following states: - with thumbnails - without thumbnails - with SVG thumbnails - with narrow thumbnails - with white background thumbnails - in RTL languages - in non-latin languages - disambiguation popups Storybook also allows users to change the image or text of a popup through a GUI. This patch sets up Storybook as a "mini" repo inside the.storybook folder with a seperate package.json file to avoid incompatibilities with the current webpack/babel (or even Node) versions used in the Popups repo. Storybook requires at least Node v8.3 to run. (an .nvmrc file with 11.3.0 has been added to the .stories dir). To start: `cd .storybook && npm install && npm run start`. Bug: T205989 Change-Id: I041e46c4f0cf173950015067e2dce81c023d3fdd
246 lines
13 KiB
JavaScript
246 lines
13 KiB
JavaScript
/**
|
|
* Browser globals
|
|
*/
|
|
import jquery from 'jquery';
|
|
import '../mocks/js/mockMediaWiki.js';
|
|
|
|
/**
|
|
* CSS
|
|
*/
|
|
import '../../src/ui/index.less';
|
|
import '../mocks/less/custom.less';
|
|
|
|
/**
|
|
* Storybook dependencies
|
|
*/
|
|
import { document } from 'global';
|
|
import { storiesOf } from '@storybook/html';
|
|
import { withKnobs, text, select, number, object } from '@storybook/addon-knobs';
|
|
|
|
/**
|
|
* Popups dependencies
|
|
*/
|
|
import { createPointerMasks } from '../../src/ui/renderer.js';
|
|
import { convertPageToModel } from '../../src/gateway/rest.js';
|
|
import { parseHTMLResponse } from '../../src/gateway/restFormatters.js';
|
|
import { default as CONSTANTS } from '../../src/constants';
|
|
|
|
/**
|
|
* Popups helpers
|
|
*/
|
|
import MODELS from '../mocks/models';
|
|
import grid from '../helpers/grid';
|
|
import createPopup from '../helpers/createPopup';
|
|
|
|
createPointerMasks( document.body );
|
|
|
|
const KNOBS_PARAM = { knobs: {
|
|
escapeHTML: false
|
|
} }
|
|
|
|
/**
|
|
* Extends default model with params and adds knobs to it.
|
|
* @param {object} model
|
|
* @param {object} extendedModel
|
|
*
|
|
* @returns {object}
|
|
*/
|
|
function extendModelWithKnobs( DEFAULT_MODEL, extendedModel ) {
|
|
var extendedModel = extendedModel || {},
|
|
thumbnail = extendedModel.thumbnail || DEFAULT_MODEL.thumbnail || undefined,
|
|
mergedModel;
|
|
|
|
mergedModel = Object.assign(
|
|
{},
|
|
DEFAULT_MODEL,
|
|
{
|
|
extract: text( "extract", extendedModel.extract || DEFAULT_MODEL.extract),
|
|
languageDirection: select(
|
|
'Language direction',
|
|
['ltr', 'rtl'],
|
|
extendedModel.languageDirection || DEFAULT_MODEL.languageDirection )
|
|
}
|
|
)
|
|
|
|
if ( thumbnail ) {
|
|
mergedModel.thumbnail = {
|
|
source: text( 'thumbnail - URL', thumbnail.source ),
|
|
width: number( 'thumbnail - width', thumbnail.width),
|
|
height: number( 'thumbnail - height', thumbnail.height)
|
|
}
|
|
}
|
|
return mergedModel;
|
|
}
|
|
/**
|
|
* If an API response is valid, returns a model based on it, if not, returns the initial model.
|
|
* @param {object} ApiValue
|
|
* @param {object} initModel
|
|
* @param {number} thumbnailSize
|
|
* @param {function} ApiParser
|
|
*
|
|
* @return {object} PagePreview model
|
|
*/
|
|
function useApiOrInitModel( ApiValue, initModel, thumbnailSize, ApiParser ) {
|
|
if ( JSON.stringify( ApiValue ) !== '{}' ) {
|
|
return convertPageToModel( ApiValue, thumbnailSize, ApiParser );
|
|
}
|
|
return initModel;
|
|
}
|
|
|
|
storiesOf( 'Thumbnails', module )
|
|
.addDecorator(withKnobs)
|
|
.add( 'portrait', () => {
|
|
const
|
|
initModel = extendModelWithKnobs( MODELS.THUMBNAIL_PORTRAIT ),
|
|
apiResponse = object('API Response', {} ),
|
|
model = useApiOrInitModel( apiResponse, initModel, CONSTANTS.THUMBNAIL_SIZE, parseHTMLResponse ),
|
|
model2 = extendModelWithKnobs( model, { extract: model.extract.slice(0, 80)} );
|
|
|
|
object('Effective model', Object.assign( {}, model, { extract: model.extract[0].outerHTML } ) );
|
|
|
|
return document.createRange().createContextualFragment(`
|
|
<div>
|
|
${createPopup( model, { offset: { top: grid.portrait.row(1), left: grid.portrait.col( 1 ) }, flippedX: false, flippedY: false } )}
|
|
${createPopup( model, { offset: { top: grid.portrait.row(1), left: grid.portrait.col( 2 ) }, flippedX: true, flippedY: false } )}
|
|
${createPopup( model, { offset: { top: grid.portrait.row(1), left: grid.portrait.col( 3 ) }, flippedX: false, flippedY: true } )}
|
|
${createPopup( model, { offset: { top: grid.portrait.row(1), left: grid.portrait.col( 4 ) }, flippedX: true, flippedY: true } )}
|
|
|
|
${createPopup( model2, { offset: { top: grid.portrait.row(2.1), left: grid.portrait.col( 1 ) }, flippedX: false, flippedY: false } )}
|
|
${createPopup( model2, { offset: { top: grid.portrait.row(2.1), left: grid.portrait.col( 2 ) }, flippedX: true, flippedY: false } )}
|
|
${createPopup( model2, { offset: { top: grid.portrait.row(2.1), left: grid.portrait.col( 3 ) }, flippedX: false, flippedY: true } )}
|
|
${createPopup( model2, { offset: { top: grid.portrait.row(2.1), left: grid.portrait.col( 4 ) }, flippedX: true, flippedY: true } )}
|
|
</div>
|
|
`);
|
|
|
|
}, KNOBS_PARAM )
|
|
.addDecorator(withKnobs)
|
|
.add( 'landscape', () => {
|
|
const
|
|
initModel = extendModelWithKnobs( MODELS.THUMBNAIL_LANDSCAPE ),
|
|
apiResponse = object('API Response', {} ),
|
|
model = useApiOrInitModel( apiResponse, initModel, CONSTANTS.THUMBNAIL_SIZE, parseHTMLResponse ),
|
|
model2 = extendModelWithKnobs( model, { extract: model.extract.slice(0, 80)} );
|
|
|
|
object('Effective model', Object.assign( {}, model, { extract: model.extract[0].outerHTML } ) );
|
|
|
|
return document.createRange().createContextualFragment(`
|
|
<div>
|
|
${createPopup( model, { offset: { top: grid.landscape.row(1), left: grid.landscape.col( 1 ) }, flippedX: false, flippedY: false } )}
|
|
${createPopup( model, { offset: { top: grid.landscape.row(1), left: grid.landscape.col( 2 ) }, flippedX: true, flippedY: false } )}
|
|
${createPopup( model, { offset: { top: grid.landscape.row(1), left: grid.landscape.col( 3 ) }, flippedX: false, flippedY: true } )}
|
|
${createPopup( model, { offset: { top: grid.landscape.row(1), left: grid.landscape.col( 4 ) }, flippedX: true, flippedY: true } )}
|
|
|
|
${createPopup( model2, { offset: { top: grid.landscape.row(2), left: grid.landscape.col( 1 ) }, flippedX: false, flippedY: false } )}
|
|
${createPopup( model2, { offset: { top: grid.landscape.row(2), left: grid.landscape.col( 2 ) }, flippedX: true, flippedY: false } )}
|
|
${createPopup( model2, { offset: { top: grid.landscape.row(2), left: grid.landscape.col( 3 ) }, flippedX: false, flippedY: true } )}
|
|
${createPopup( model2, { offset: { top: grid.landscape.row(2), left: grid.landscape.col( 4 ) }, flippedX: true, flippedY: true } )}
|
|
</div>
|
|
`);
|
|
|
|
}, KNOBS_PARAM )
|
|
.add( 'portrait - SVG', () => {
|
|
return document.createRange().createContextualFragment(`
|
|
<div>
|
|
${createPopup( MODELS.SVG_PORTRAIT, { offset: { top: grid.portrait.row(1), left: grid.portrait.col( 1 ) }, flippedX: false, flippedY: false } )}
|
|
${createPopup( MODELS.SVG_PORTRAIT, { offset: { top: grid.portrait.row(1), left: grid.portrait.col( 2 ) }, flippedX: true, flippedY: false } )}
|
|
${createPopup( MODELS.SVG_PORTRAIT, { offset: { top: grid.portrait.row(2), left: grid.portrait.col( 1 ) }, flippedX: false, flippedY: true } )}
|
|
${createPopup( MODELS.SVG_PORTRAIT, { offset: { top: grid.portrait.row(2), left: grid.portrait.col( 2 ) }, flippedX: true, flippedY: true } )}
|
|
</div>
|
|
`);
|
|
} )
|
|
.add( 'landscape - SVG', () => {
|
|
return document.createRange().createContextualFragment(`
|
|
<div>
|
|
${createPopup( MODELS.SVG_LANDSCAPE, { offset: { top: grid.landscape.row( 1 ), left: grid.landscape.col( 1 ) }, flippedX: false, flippedY: false } )}
|
|
${createPopup( MODELS.SVG_LANDSCAPE, { offset: { top: grid.landscape.row( 1 ), left: grid.landscape.col( 2 ) }, flippedX: true, flippedY: false } )}
|
|
${createPopup( MODELS.SVG_LANDSCAPE, { offset: { top: grid.landscape.row( 2 ), left: grid.landscape.col( 1 ) }, flippedX: false, flippedY: true } )}
|
|
${createPopup( MODELS.SVG_LANDSCAPE, { offset: { top: grid.landscape.row( 2 ), left: grid.landscape.col( 2 ) }, flippedX: true, flippedY: true } )}
|
|
</div>
|
|
` );
|
|
} )
|
|
.add( 'landscape - Thin thumbnail', () => {
|
|
return document.createRange().createContextualFragment(`
|
|
<div>
|
|
${createPopup( MODELS.THIN_THUMBNAIL, { offset: { top: grid.landscape.row( 1 ), left: grid.landscape.col( 1 ) }, flippedX: false, flippedY: false } )}
|
|
${createPopup( MODELS.THIN_THUMBNAIL, { offset: { top: grid.landscape.row( 1 ), left: grid.landscape.col( 2 ) }, flippedX: true, flippedY: false } )}
|
|
${createPopup( MODELS.THIN_THUMBNAIL, { offset: { top: grid.landscape.row( 2 ), left: grid.landscape.col( 1 ) }, flippedX: false, flippedY: true } )}
|
|
${createPopup( MODELS.THIN_THUMBNAIL, { offset: { top: grid.landscape.row( 2 ), left: grid.landscape.col( 2 ) }, flippedX: true, flippedY: true } )}
|
|
</div>
|
|
` );
|
|
} )
|
|
.add( 'portrait - Thumbnail divider', () => {
|
|
return document.createRange().createContextualFragment(`
|
|
<div>
|
|
${createPopup( MODELS.THUMBNAIL_DIVIDER, { offset: { top: grid.portrait.row( 1 ), left: grid.portrait.col( 1 ) }, flippedX: false, flippedY: false } )}
|
|
${createPopup( MODELS.THUMBNAIL_DIVIDER, { offset: { top: grid.portrait.row( 1 ), left: grid.portrait.col( 2 ) }, flippedX: true, flippedY: false } )}
|
|
${createPopup( MODELS.THUMBNAIL_DIVIDER, { offset: { top: grid.portrait.row( 2 ), left: grid.portrait.col( 1 ) }, flippedX: false, flippedY: true } )}
|
|
${createPopup( MODELS.THUMBNAIL_DIVIDER, { offset: { top: grid.portrait.row( 2 ), left: grid.portrait.col( 2 ) }, flippedX: true, flippedY: true } )}
|
|
</div>
|
|
` );
|
|
} )
|
|
|
|
storiesOf( 'Text', module )
|
|
.add( 'Short & long', () => {
|
|
return document.createRange().createContextualFragment(`
|
|
<div>
|
|
${createPopup( MODELS.LONG_WORD_1, { offset: { top: grid.portrait.row( 1 ), left: grid.portrait.col( 1 ) }, flippedX: false, flippedY: false } )}
|
|
${createPopup( MODELS.LONG_WORD_2, { offset: { top: grid.portrait.row( 1.5), left: grid.portrait.col( 1 ) }, flippedX: false, flippedY: false } )}
|
|
${createPopup( MODELS.LONG_WORD_THUMB, { offset: { top: grid.portrait.row( 1 ), left: grid.portrait.col( 2 ) }, flippedX: false, flippedY: false } )}
|
|
</div>
|
|
` );
|
|
} )
|
|
.add( 'Math & chemistry', () => {
|
|
return document.createRange().createContextualFragment(`
|
|
<div>
|
|
${createPopup( MODELS.CHEM_2, { offset: { top: grid.portrait.row( 1 ), left: grid.portrait.col( 1 ) }, flippedX: false, flippedY: false } )}
|
|
${createPopup( MODELS.CHEM_3, { offset: { top: grid.portrait.row( 2.4 ), left: grid.portrait.col( 1 ) }, flippedX: false, flippedY: false } )}
|
|
${createPopup( MODELS.MATH_1, { offset: { top: grid.landscape.row( 1.8 ), left: grid.portrait.col( 1 ) }, flippedX: false, flippedY: false } )}
|
|
${createPopup( MODELS.CHEM_1, { offset: { top: grid.portrait.row( 1.55 ), left: grid.portrait.col( 2 ) }, flippedX: false, flippedY: false } )}
|
|
${createPopup( MODELS.MATH_2, { offset: { top: grid.portrait.row( 1 ), left: grid.portrait.col( 2 ) }, flippedX: false, flippedY: false } )}
|
|
</div>
|
|
` );
|
|
} );
|
|
|
|
storiesOf( 'Disambiguation', module )
|
|
.add( 'standard', () => {
|
|
return document.createRange().createContextualFragment(`
|
|
<div>
|
|
${createPopup( MODELS.DISAMBIGUATION, { offset: { top: grid.landscape.row( 1 ), left: grid.landscape.col( 1 ) }, flippedX: false, flippedY: false } )}
|
|
${createPopup( MODELS.DISAMBIGUATION, { offset: { top: grid.landscape.row( 1 ), left: grid.landscape.col( 1.7 ) }, flippedX: true, flippedY: false } )}
|
|
${createPopup( MODELS.DISAMBIGUATION, { offset: { top: grid.landscape.row( 1.7 ), left: grid.landscape.col( 1 ) }, flippedX: false, flippedY: true } )}
|
|
${createPopup( MODELS.DISAMBIGUATION, { offset: { top: grid.landscape.row( 1.7 ), left: grid.landscape.col( 1.7 ) }, flippedX: true, flippedY: true } )}
|
|
</div>
|
|
` );
|
|
} )
|
|
|
|
storiesOf( 'RTL', module )
|
|
.add( 'thumbnails', () => {
|
|
return document.createRange().createContextualFragment(`
|
|
<div>
|
|
${createPopup( MODELS.HE_WIKI, { offset: { top: grid.portrait.row( 1 ), left: grid.portrait.col( 1 ) }, flippedX: false, flippedY: false } )}
|
|
${createPopup( MODELS.HE_WIKI, { offset: { top: grid.portrait.row( 1 ), left: grid.portrait.col( 2 ) }, flippedX: true, flippedY: false } )}
|
|
${createPopup( MODELS.HE_WIKI, { offset: { top: grid.portrait.row( 1 ), left: grid.portrait.col( 3) }, flippedX: false, flippedY: true } )}
|
|
${createPopup( MODELS.HE_WIKI, { offset: { top: grid.portrait.row( 1 ), left: grid.portrait.col( 4 ) }, flippedX: true, flippedY: true } )}
|
|
|
|
${createPopup( MODELS.AR_WIKI, { offset: { top: grid.portrait.row( 2 ), left: grid.portrait.col( 1 ) }, flippedX: false, flippedY: false } )}
|
|
${createPopup( MODELS.AR_WIKI, { offset: { top: grid.portrait.row( 2 ), left: grid.portrait.col( 2 ) }, flippedX: true, flippedY: false } )}
|
|
${createPopup( MODELS.AR_WIKI, { offset: { top: grid.portrait.row( 2 ), left: grid.portrait.col( 3 ) }, flippedX: false, flippedY: true } )}
|
|
${createPopup( MODELS.AR_WIKI, { offset: { top: grid.portrait.row( 2 ), left: grid.portrait.col( 4 ) }, flippedX: true, flippedY: true } )}
|
|
</div>
|
|
` );
|
|
} )
|
|
|
|
storiesOf( 'Non-latin', module )
|
|
.add( 'thumbnails', () => {
|
|
return document.createRange().createContextualFragment(`
|
|
<div>
|
|
${createPopup( MODELS.RU_WIKI, { offset: { top: grid.portrait.row( 1 ), left: grid.portrait.col( 1 ) }, flippedX: false, flippedY: false } )}
|
|
${createPopup( MODELS.EL_WIKI, { offset: { top: grid.portrait.row( 1 ), left: grid.portrait.col( 2 ) }, flippedX: false, flippedY: false } )}
|
|
${createPopup( MODELS.HZ_WIKI, { offset: { top: grid.portrait.row( 2 ), left: grid.portrait.col( 2 ) }, flippedX: false, flippedY: false } )}
|
|
${createPopup( MODELS.KO_WIKI, { offset: { top: grid.portrait.row( 2 ), left: grid.portrait.col( 1 ) }, flippedX: false, flippedY: false } )}
|
|
${createPopup( MODELS.JA_WIKI, { offset: { top: grid.portrait.row( 1 ), left: grid.portrait.col( 3 ) }, flippedX: false, flippedY: false } )}
|
|
${createPopup( MODELS.TH_WIKI, { offset: { top: grid.portrait.row( 2 ), left: grid.portrait.col( 3 ) }, flippedX: false, flippedY: false } )}
|
|
</div>
|
|
` );
|
|
} )
|