import mustache from 'mustache';
import portalTemplate from '!!raw-loader!../includes/templates/Portal.mustache';
import '../resources/skins.vector.styles/navigation.less';
import '../.storybook/common.less';
import { placeholder, htmluserlangattributes } from './utils';
export default {
title: 'Portals'
};
const wrapPortlet = ( data ) => {
const node = document.createElement( 'div' );
node.setAttribute( 'id', 'mw-panel' );
node.innerHTML = mustache.render( portalTemplate, data );
return node;
};
const portletAfter = ( html ) => {
return `${html}
`;
};
export const portal = () => wrapPortlet(
{
'portal-id': 'p-example',
'html-tooltip': 'Message tooltip-p-example acts as tooltip',
'msg-label': 'Portal title',
'msg-label-id': 'p-example-label',
'html-userlangattributes': htmluserlangattributes,
'html-portal-content': ``,
'html-after-portal': portletAfter(
placeholder( `Beware: The BaseTemplateAfterPortlet hook can be used to inject arbitary HTML here for any portlet.
`, 60 )
)
}
);
export const navigationPortal = () => wrapPortlet(
{
'portal-id': 'p-navigation',
'msg-label': 'Navigation',
'msg-label-id': 'p-navigation-label',
'html-userlangattributes': htmluserlangattributes,
'html-portal-content': ``,
'html-after-portal': portletAfter( placeholder( 'Possible hook output (navigation)', 50 ) )
}
);
export const toolbox = () => wrapPortlet(
{
'portal-id': 'p-tb',
'html-tooltip': 'A message tooltip-p-tb must exist for this to appear',
'msg-label': 'Tools',
'msg-label-id': 'p-tb-label',
'html-userlangattributes': htmluserlangattributes,
'html-portal-content': ``,
'html-after-portal': portletAfter( placeholder( 'Possible hook output (tb)', 50 ) )
}
);
export const langlinks = () => wrapPortlet(
{
'portal-id': 'p-lang',
'html-tooltip': 'A message tooltip-p-lang must exist for this to appear',
'msg-label': 'In other languages',
'msg-label-id': 'p-lang-label',
'html-userlangattributes': htmluserlangattributes,
'html-portal-content': ``,
'html-after-portal': portletAfter(
`Edit links
${placeholder( `Further hook output possible (lang)
`, 60 )}`
)
}
);
export const otherProjects = () => wrapPortlet(
{
'portal-id': 'p-wikibase-otherprojects',
'html-tooltip': 'A message tooltip-p-lang must exist for this to appear',
'msg-label': 'In other projects',
'msg-label-id': 'p-wikibase-otherprojects-label',
'html-userlangattributes': htmluserlangattributes,
'html-portal-content': ``,
'html-after-portal': ''
}
);