mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-12-01 10:46:54 +00:00
9f1a1fa829
SkinMustache in core provides most of what is required for Vector to generate its menus. In the interest of having a canonical source of truth for menus across all skins, Vector should use this data. To ensure the HTML generated is (mostly) the same after this patch to prior, a few modifications are necessary: * The data from core is decorated so that Vector can continue having its own custom class names on menus. This is done using the decoratePortletClass method. * There is no support for a menu having a header representing the selected menu item, as is currently the case with variants. This is achieved via an extension to getPortletData. It's assumed that later when variants are merged with languages, this can be removed. * Menus are agnostic to how they are displayed, so we must continue to add the is-dropdown template variable to drop down menus. In future we may want to rethink our Menu partial to make this unnecessary in PHP. * The portal-first class is redundant in the modern Vector as we can use the first-child selector. Previously we introduced a class to service the legacy skin where this rule doesn't apply as #p-logo is the first child. However, the legacy skin can do this using a special next sibling selector instead. Bug: T268157 Change-Id: I5f7adc1840441b508ffee40139b85b64021789e6
137 lines
5.8 KiB
JavaScript
137 lines
5.8 KiB
JavaScript
/* eslint-disable quotes */
|
||
|
||
/**
|
||
* @external Indicator
|
||
*/
|
||
|
||
import { htmlUserLanguageAttributes } from './utils';
|
||
import { placeholder } from './utils';
|
||
|
||
import { PERSONAL_MENU_TEMPLATE_DATA, menuTemplate } from './Menu.stories.data';
|
||
import { pageActionsData, namespaceTabsData } from './MenuTabs.stories.data';
|
||
import { vectorMenuTemplate, moreData, variantsData } from './MenuDropdown.stories.data';
|
||
import { searchBoxData, searchBoxTemplate } from './SearchBox.stories.data';
|
||
import { SIDEBAR_DATA, SIDEBAR_TEMPLATE_PARTIALS, OPT_OUT_DATA,
|
||
sidebarLegacyTemplate, sidebarTemplate } from './Sidebar.stories.data';
|
||
import { FOOTER_TEMPLATE_DATA, FOOTER_TEMPLATE_PARTIALS,
|
||
footerTemplate } from './Footer.stories.data';
|
||
import { logoTemplate } from './Logo.stories.data';
|
||
|
||
export const NAVIGATION_TEMPLATE_DATA = {
|
||
loggedInWithVariantsAndOptOut: Object.assign( {}, {
|
||
'data-portlets': {
|
||
'data-personal': PERSONAL_MENU_TEMPLATE_DATA.loggedInWithEcho,
|
||
'data-namespaces': namespaceTabsData,
|
||
'data-views': pageActionsData,
|
||
'data-variants': variantsData
|
||
},
|
||
'data-search-box': searchBoxData,
|
||
'data-portlets-sidebar': SIDEBAR_DATA.withPortals,
|
||
'msg-navigation-heading': 'Navigation menu',
|
||
'html-logo-attributes': `class="mw-wiki-logo" href="/wiki/Main_Page" title="Visit the main page"`
|
||
}, OPT_OUT_DATA ),
|
||
loggedOutWithVariants: {
|
||
'data-portlets': {
|
||
'data-personal': PERSONAL_MENU_TEMPLATE_DATA.loggedOut,
|
||
'data-namespaces': namespaceTabsData,
|
||
'data-views': pageActionsData,
|
||
'data-variants': variantsData
|
||
},
|
||
'data-search-box': searchBoxData,
|
||
'data-portlets-sidebar': SIDEBAR_DATA.withPortals,
|
||
'msg-navigation-heading': 'Navigation menu',
|
||
'html-logo-attributes': `class="mw-wiki-logo" href="/wiki/Main_Page" title="Visit the main page"`
|
||
},
|
||
loggedInWithMoreActions: {
|
||
'data-portlets': {
|
||
'data-personal': PERSONAL_MENU_TEMPLATE_DATA.loggedInWithEcho,
|
||
'data-namespaces': namespaceTabsData,
|
||
'data-views': pageActionsData,
|
||
'data-actions': moreData
|
||
},
|
||
'data-search-box': searchBoxData,
|
||
'data-portlets-sidebar': SIDEBAR_DATA.withPortals,
|
||
'msg-navigation-heading': 'Navigation menu',
|
||
'html-logo-attributes': `class="mw-wiki-logo" href="/wiki/Main_Page" title="Visit the main page"`
|
||
}
|
||
};
|
||
|
||
export const TEMPLATE_PARTIALS = Object.assign( {}, SIDEBAR_TEMPLATE_PARTIALS, {
|
||
Logo: logoTemplate,
|
||
SearchBox: searchBoxTemplate,
|
||
'legacy/Sidebar': sidebarLegacyTemplate,
|
||
Sidebar: sidebarTemplate,
|
||
VectorMenu: vectorMenuTemplate,
|
||
Menu: menuTemplate,
|
||
Footer: footerTemplate
|
||
}, FOOTER_TEMPLATE_PARTIALS );
|
||
|
||
/**
|
||
* @type {Indicator[]}
|
||
*/
|
||
const DATA_INDICATORS = [ {
|
||
id: 'mw-indicator-good-star',
|
||
class: 'mw-indicator',
|
||
html: `<a href="/wiki/Wikipedia:Good_articles"
|
||
title="This is a good article. Follow the link for more information.">
|
||
<img alt="This is a good article. Follow the link for more information."
|
||
src="//upload.wikimedia.org/wikipedia/en/thumb/9/94/Symbol_support_vote.svg/19px-Symbol_support_vote.svg.png" decoding="async" width="19" height="20"
|
||
srcset="//upload.wikimedia.org/wikipedia/en/thumb/9/94/Symbol_support_vote.svg/29px-Symbol_support_vote.svg.png 1.5x, //upload.wikimedia.org/wikipedia/en/thumb/9/94/Symbol_support_vote.svg/39px-Symbol_support_vote.svg.png 2x" data-file-width="180" data-file-height="185" />
|
||
</a>`
|
||
},
|
||
{
|
||
id: 'mw-indicator-pp-autoreview',
|
||
class: 'mw-indicator',
|
||
html: `<a href="/wiki/Wikipedia:Protection_policy#pending"
|
||
title="All edits by unregistered and new users are subject to review prior to becoming visible to unregistered users">
|
||
<img alt="Page protected with pending changes" src="//upload.wikimedia.org/wikipedia/en/thumb/b/b7/Pending-protection-shackle.svg/20px-Pending-protection-shackle.svg.png"
|
||
decoding="async" width="20" height="20" srcset="//upload.wikimedia.org/wikipedia/en/thumb/b/b7/Pending-protection-shackle.svg/30px-Pending-protection-shackle.svg.png 1.5x, //upload.wikimedia.org/wikipedia/en/thumb/b/b7/Pending-protection-shackle.svg/40px-Pending-protection-shackle.svg.png 2x" data-file-width="512" data-file-height="512" />
|
||
</a>`
|
||
} ];
|
||
|
||
export const LEGACY_TEMPLATE_DATA = {
|
||
'html-title': 'Vector 2019',
|
||
'page-isarticle': true,
|
||
'msg-tagline': 'From Wikipedia, the free encyclopedia',
|
||
'html-user-language-attributes': htmlUserLanguageAttributes,
|
||
'msg-vector-jumptonavigation': 'Jump to navigation',
|
||
'msg-vector-jumptosearch': 'Jump to search',
|
||
|
||
// site specific
|
||
'data-footer': FOOTER_TEMPLATE_DATA,
|
||
'html-site-notice': placeholder( 'a site notice or central notice banner may go here', 70 ),
|
||
|
||
// article dependent
|
||
'html-body-content': `${placeholder( 'Article content goes here' )}
|
||
<div class="printfooter">
|
||
Retrieved from ‘<a dir="ltr" href="#">https://en.wikipedia.org/w/index.php?title=this&oldid=blah</a>’
|
||
</div>`,
|
||
'html-categories': placeholder( 'Category links component from mediawiki core', 50 ),
|
||
|
||
// extension dependent..
|
||
'html-after-content': placeholder( 'Extensions can add here e.g. Related Articles.', 100 ),
|
||
'array-indicators': DATA_INDICATORS,
|
||
'html-subtitle': placeholder( 'Extensions can configure subtitle', 20 )
|
||
};
|
||
|
||
export const MODERN_TEMPLATE_DATA = {
|
||
'html-title': 'Vector 2020',
|
||
'page-isarticle': true,
|
||
'msg-tagline': 'From Wikipedia, the free encyclopedia',
|
||
'html-user-language-attributes': htmlUserLanguageAttributes,
|
||
'msg-vector-jumptonavigation': 'Jump to navigation',
|
||
'msg-vector-jumptosearch': 'Jump to search',
|
||
|
||
// site specific
|
||
'data-footer': FOOTER_TEMPLATE_DATA,
|
||
'html-site-notice': placeholder( 'a site notice or central notice banner may go here', 70 ),
|
||
|
||
// article dependent
|
||
'array-indicators': DATA_INDICATORS,
|
||
'html-body-content': `${placeholder( 'Article content goes here' )}
|
||
<div class="printfooter">
|
||
Retrieved from ‘<a dir="ltr" href="#">https://en.wikipedia.org/w/index.php?title=this&oldid=blah</a>’
|
||
</div>`,
|
||
'html-categories': placeholder( 'Category links component from mediawiki core', 50 )
|
||
};
|