wikimedia/mediawiki-extensions-Popups
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/Popups synced 2024-11-15 03:34:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge "Improving RTL support for the Storybook app"

Browse source
This commit is contained in:
jenkins-bot 2019-03-26 19:20:00 +00:00 committed by Gerrit Code Review
parent 511c74bf72 da369d09ae
commit 6531459e1a
5 changed files with 203 additions and 101 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
.storybook/mocks/models.js
View file

@ -256,6 +256,21 @@ MODELS.HE_WIKI = {
pageId: 502723
};
MODELS.HE_WIKI2 = {
title: "לונדון",
url: "לונדון",
languageCode: "he",
languageDirection: "rtl",
extract: "<p><b>לונדון</b> היא עיר הבירה של אנגליה ושל הממלכה המאוחדת, והעיר והמטרופולין הגדולה ביותר בממלכה. העיר שוכנת על גדות נהר התמזה, והיוותה מקום התיישבות מרכזי במשך יותר מאלפיים שנים. הרומאים התיישבו בה לראשונה, וכינו אותה לונדיניום. גרעינה ההיסטורי של העיר הוא הסיטי של לונדון, ששומר עד היום על גבולותיו מימי הביניים. לונדון המודרנית מורכבת מצירוף של ערים, עיירות, רבעים, שכונות ופרברים, אשר נסתפחו לאורך השנים לשטחה האדמיניסטרטיבי של \"לונדון רבתי\", וכולם יחד נקראים \"לונדון\".</p>",
type: "page",
thumbnail: {
source: "https://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/London_Montage_L.jpg/424px-London_Montage_L.jpg",
width: 424,
height: 640
},
"pageId": 2955
}
MODELS.AR_WIKI = {
title: "سلسلة جبلية",
url: "سلسلة جبلية",
@ -273,6 +288,23 @@ MODELS.AR_WIKI = {
pageId: 32340
};
MODELS.AR_WIKI2 = {
title: "سلسلة جبلية",
url: "سلسلة جبلية",
languageCode: "ar",
languageDirection: "rtl",
extract:
"<p><b>الجبال</b> هي سلسلة متتالية من الارتفاعات تفتقر إلى التجانس، بحيث تكون ارتفاعات القمم شديدة التباين(مثل 1000 متر، 2500 متر أو 700 متر...)، وهي مجموعة من الجبال تحدها السهول أو يفصلها عن غيرها ممرات أو أنهار ولكن الأودية تكون متعمقة، و<b>السفوح</b> شديدة التجزئة وقوية الانحدار.\nوتتميز الجبال بعدة أشكال بالنسبة للقمم&nbsp;:</p>",
type: "page",
thumbnail: {
source:
"https://upload.wikimedia.org/wikipedia/en/thumb/3/3a/Barker_poster.jpg/258px-Barker_poster.jpg",
width: 258,
height: 640
},
pageId: 32340
};
MODELS.JA_WIKI = {
title: "焼きそば",
url: "焼きそば",

6
.storybook/package-lock.json generated
View file

@ -3729,6 +3729,12 @@
"integrity": "sha1-yBSQPkViM3GgR3tAEJqq++6t27Q=",
"dev": true
},
"cssjanus": {
"version": "1.3.1",
"resolved": "https://registry.npmjs.org/cssjanus/-/cssjanus-1.3.1.tgz",
"integrity": "sha512-VSdSFi8jQVyOH83pfNK9lOkJEyV/1P9hMHKsw9AULI7YZosow/FmAJB9EM8Y1SS75dRtBRMhr5ZTEgC36EKU5w==",
"dev": true
},
"cyclist": {
"version": "0.2.2",
"resolved": "https://registry.npmjs.org/cyclist/-/cyclist-0.2.2.tgz",

1
.storybook/package.json
View file

@ -6,6 +6,7 @@
},
"devDependencies": {
"@babel/core": "7.1.6",
"cssjanus": "1.3.1",
"@storybook/addon-cssresources": "4.1.0-alpha.9",
"@storybook/addon-knobs": "4.0.9",
"@storybook/addon-options": "4.0.12",

263
.storybook/stories/index.stories.js
View file

@ -6,9 +6,17 @@ import '../mocks/js/mockMediaWiki.js';
/**
* CSS
* Custom CSS is inserted into the <head> via webpack.
* However, the Popups-specific CSS is imported as a string and inserted into the <head> manually
* in order to change it later for RTL transformations with CSSJanus.
*/
import '../../src/ui/index.less';
import '../mocks/less/custom.less';
// NOTE: The following import overrides the webpack config for this specific LESS file in order to
// omit the 'style-loader' and import the content as a string.
// The "./mocks/less" path is hard-coded and should be kept in sync with the path in webpack.config.js
import PopupsCSSString from '!css-loader!less-loader?{"paths":"./mocks/less"}!../../src/ui/index.less';
// The CSSJanus library is used to transform CSS for RTL languages.
import * as cssjanus from 'cssjanus';
/**
* Storybook dependencies
@ -37,11 +45,48 @@ import createPopup from '../helpers/createPopup';
*/
import pointerMaskSVG from '../../src/ui/pointer-mask.svg';
createPointerMasks( document.body );
const popupsCSS = {
ltr: PopupsCSSString,
rtl: cssjanus.transform( PopupsCSSString.toString() )
},
KNOBS_PARAM = { knobs: {
escapeHTML: false
} },
PopupsCSSElementId = 'PopupsCssElement';
const KNOBS_PARAM = { knobs: {
escapeHTML: false
} }
/**
* Inserts the Popups CSS string into the <head> of the document manually.
* @param {string} CSSString
*/
function insertPopupsStyleElement() {
const PopupsCSSElement = document.createElement( 'style' ),
customCSSElement = document.head.querySelector( 'style:last-of-type' );
PopupsCSSElement.type = 'text/css';
PopupsCSSElement.id = PopupsCSSElementId;
document.head.insertBefore( PopupsCSSElement, customCSSElement );
}
/**
* Modifies the Popups CSS via CSSJanus and changes the document lang and dir attributes.
* @param {string} lang
* @param {string} dir
*/
function modifyStorybookHead( lang, dir ) {
const PopupsCSSElement = document.getElementById( PopupsCSSElementId );
if ( document.documentElement.lang !== lang ) {
document.documentElement.lang = lang;
}
if ( document.documentElement.dir !== dir ) {
document.documentElement.dir = dir;
}
if ( PopupsCSSElement.innerHTML !== popupsCSS[ dir ] ) {
PopupsCSSElement.innerHTML = popupsCSS[ dir ]
}
}
/**
* Extends default model with params and adds knobs to it.
@ -92,6 +137,16 @@ function useApiOrInitModel( ApiValue, initModel, thumbnailSize, ApiParser ) {
return initModel;
}
/**
* Global DOM manipulations
*/
createPointerMasks( document.body );
insertPopupsStyleElement();
modifyStorybookHead( 'en', 'ltr' );
/**
* Stories
*/
storiesOf( 'Thumbnails', module )
.addDecorator(withKnobs)
.add( 'portrait', () => {
@ -102,14 +157,12 @@ storiesOf( 'Thumbnails', module )
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(2), left: grid.portrait.col( 1 ) }, flippedX: false, flippedY: true } )}
${createPopup( model, { offset: { top: grid.portrait.row(2), left: grid.portrait.col( 2 ) }, flippedX: true, flippedY: true } )}
</div>
`);
modifyStorybookHead( model.languageCode, model.languageDirection )
return `${createPopup( model, { offset: { top: grid.portrait.row(1), left: grid.portrait.col( 1 ) }, flippedX: false, flippedY: false } )}
${createPopup( model, { offset: { top: grid.portrait.row(2), left: grid.portrait.col( 1 ) }, flippedX: true, flippedY: false } )}
${createPopup( model, { offset: { top: grid.portrait.row(1), left: grid.portrait.col( 2 ) }, flippedX: false, flippedY: true } )}
${createPopup( model, { offset: { top: grid.portrait.row(2), left: grid.portrait.col( 2 ) }, flippedX: true, flippedY: true } )}
`;
}, KNOBS_PARAM )
.addDecorator(withKnobs)
@ -121,120 +174,126 @@ storiesOf( 'Thumbnails', module )
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(2), left: grid.landscape.col( 1 ) }, flippedX: false, flippedY: true } )}
${createPopup( model, { offset: { top: grid.landscape.row(2), left: grid.landscape.col( 2 ) }, flippedX: true, flippedY: true } )}
</div>
`);
modifyStorybookHead( model.languageCode, model.languageDirection )
return `${createPopup( model, { offset: { top: grid.landscape.row(1), left: grid.landscape.col( 1 ) }, flippedX: false, flippedY: false } )}
${createPopup( model, { offset: { top: grid.landscape.row(2), left: grid.landscape.col( 1 ) }, flippedX: true, flippedY: false } )}
${createPopup( model, { offset: { top: grid.landscape.row(1), left: grid.landscape.col( 2 ) }, flippedX: false, flippedY: true } )}
${createPopup( model, { offset: { top: grid.landscape.row(2), left: grid.landscape.col( 2 ) }, flippedX: true, flippedY: true } )}
`;
}, 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>
`);
modifyStorybookHead( MODELS.SVG_PORTRAIT.languageCode, MODELS.SVG_PORTRAIT.languageDirection )
return `
${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 } )}
`;
} )
.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>
` );
modifyStorybookHead( MODELS.SVG_LANDSCAPE.languageCode, MODELS.SVG_LANDSCAPE.languageDirection )
return `
${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 } )}
`;
} )
.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>
` );
modifyStorybookHead( MODELS.THIN_THUMBNAIL.languageCode, MODELS.THIN_THUMBNAIL.languageDirection )
return `
${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 } )}
`;
} )
.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>
` );
modifyStorybookHead( MODELS.THUMBNAIL_DIVIDER.languageCode, MODELS.THUMBNAIL_DIVIDER.languageDirection )
return `
${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 } )}
`;
} )
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>
` );
modifyStorybookHead( MODELS.LONG_WORD_1.languageCode, MODELS.LONG_WORD_1.languageDirection )
return `
${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 } )}
`;
} )
.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>
` );
modifyStorybookHead( MODELS.CHEM_2.languageCode, MODELS.CHEM_2.languageDirection )
return `
${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 } )}
`;
} );
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>
` );
modifyStorybookHead( MODELS.DISAMBIGUATION.languageCode, MODELS.DISAMBIGUATION.languageDirection )
return `
${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 } )}
`;
} )
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 } )}
.add( 'portrait', () => {
modifyStorybookHead( MODELS.HE_WIKI.languageCode, MODELS.HE_WIKI.languageDirection )
return `
${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>
` );
${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 } )}
`;
} )
.add( 'landscape', () => {
modifyStorybookHead( MODELS.HE_WIKI2.languageCode, MODELS.HE_WIKI2.languageDirection )
return `
${createPopup( MODELS.HE_WIKI2, { offset: { top: grid.landscape.row( 1 ), left: grid.landscape.col( 1 ) }, flippedX: false, flippedY: false } )}
${createPopup( MODELS.HE_WIKI2, { offset: { top: grid.landscape.row( 1 ), left: grid.landscape.col( 2 ) }, flippedX: true, flippedY: false } )}
${createPopup( MODELS.HE_WIKI2, { offset: { top: grid.landscape.row( 2 ), left: grid.landscape.col( 1 ) }, flippedX: false, flippedY: true } )}
${createPopup( MODELS.HE_WIKI2, { offset: { top: grid.landscape.row( 2 ), left: grid.landscape.col( 2 ) }, flippedX: true, flippedY: true } )}
`;
} )
.add( 'landscape - thin thumbnail', () => {
modifyStorybookHead( MODELS.AR_WIKI2.languageCode, MODELS.AR_WIKI2.languageDirection )
return `
${createPopup( MODELS.AR_WIKI2, { offset: { top: grid.landscape.row( 1 ), left: grid.landscape.col( 1 ) }, flippedX: false, flippedY: false } )}
${createPopup( MODELS.AR_WIKI2, { offset: { top: grid.landscape.row( 1 ), left: grid.landscape.col( 2 ) }, flippedX: true, flippedY: false } )}
${createPopup( MODELS.AR_WIKI2, { offset: { top: grid.landscape.row( 2 ), left: grid.landscape.col( 1 ) }, flippedX: false, flippedY: true } )}
${createPopup( MODELS.AR_WIKI2, { offset: { top: grid.landscape.row( 2 ), left: grid.landscape.col( 2 ) }, flippedX: true, flippedY: true } )}
`;
} )
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>
` );
modifyStorybookHead( MODELS.RU_WIKI.languageCode, MODELS.RU_WIKI.languageDirection )
return `
${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 } )}
`;
} )
storiesOf( 'assets', module )
@ -254,6 +313,8 @@ storiesOf( 'assets', module )
`;
}, '' )
modifyStorybookHead( 'en', 'ltr' )
return `
<div>
<p>SVG masks are rendered in at a width/height of 500px in a viewbox of 1000px, so half size.</p>

2
.storybook/webpack.config.js
View file

@ -18,6 +18,8 @@ module.exports = {
* which contain less files that essentially
* just reach into mediawiki core fo the
* appropriate files.
* This path is also specified in stories/index.stories.less
* when importing '../../src/ui/index.less'.
*/
path.resolve(__dirname, './mocks/less')
]