e1d0f1e61c
- Make sure common styles are loaded for all components - Add icon in user menu Fixes renders of: - Language button (no top margin and button styles) - MenuPortal (no left margins) Change-Id: I98b4820b6d91d46fd27a1d433d5bacd187a7cbb0
45 lines
1.3 KiB
JavaScript
45 lines
1.3 KiB
JavaScript
import mustache from 'mustache';
|
|
import '../resources/skins.vector.styles/LanguageButton.less';
|
|
import { vectorMenuTemplate } from './MenuDropdown.stories.data';
|
|
import { languageData } from './LanguageButton.stories.data';
|
|
|
|
export default {
|
|
title: 'LanguageButton'
|
|
};
|
|
|
|
// mw-page-container is needed to enable the 20x20 icon
|
|
// mw-body-header can be removed when VectorLanguageInHeader is true and
|
|
// old language inside portal in modern Vector is no longer supported.
|
|
const CONTAINER_CLASS_MODERN_VECTOR = 'mw-body-header mw-page-container';
|
|
|
|
/**
|
|
* It allows us to support old and new renderings.
|
|
*
|
|
* @param {string|HTMLElement} htmlOrElement
|
|
* @param {string} className of containing element
|
|
* @return {HTMLElement}
|
|
*/
|
|
const wrapLanguageButton = ( htmlOrElement, className ) => {
|
|
const node = document.createElement( 'div' );
|
|
node.setAttribute( 'class', className );
|
|
if ( typeof htmlOrElement === 'string' ) {
|
|
node.innerHTML = htmlOrElement;
|
|
} else {
|
|
node.appendChild( htmlOrElement );
|
|
}
|
|
return node;
|
|
};
|
|
|
|
export const languageButton = () => mustache.render( vectorMenuTemplate, languageData );
|
|
|
|
export const languageButtonWhenULSEnabled = () => wrapLanguageButton(
|
|
wrapLanguageButton(
|
|
wrapLanguageButton(
|
|
mustache.render( vectorMenuTemplate, languageData ),
|
|
'vector-menu--hide-dropdown'
|
|
),
|
|
CONTAINER_CLASS_MODERN_VECTOR
|
|
),
|
|
'client-js'
|
|
);
|