import mustache from 'mustache'; import { vectorMenuTemplate as portalTemplate } from './MenuDropdown.stories.data'; import '../resources/skins.vector.styles/MenuPortal.less'; import { placeholder, htmlUserLanguageAttributes, portletAfter } from './utils'; /** * @param {MenuDefinition} data * @return {HTMLElement} */ export const wrapPortlet = ( data ) => { const node = document.createElement( 'div' ); node.setAttribute( 'id', 'mw-panel' ); node.innerHTML = mustache.render( portalTemplate, data ); return node; }; /** * @type {Object.} */ export const PORTALS = { example: { id: 'p-example', class: 'vector-menu-portal portal', 'html-tooltip': 'Message tooltip-p-example acts as tooltip', label: 'Portal title', 'html-user-language-attributes': htmlUserLanguageAttributes, 'html-items': `
  • A list of links
  • with ids
  • on each list item
  • `, 'html-after-portal': portletAfter( placeholder( `

    Beware: The SkinAfterPortlet hook can be used to inject arbitary HTML here for any portlet.

    `, 60 ) ) }, navigation: { id: 'p-navigation', class: 'vector-menu-portal portal', 'html-tooltip': 'A message tooltip-p-navigation must exist for this to appear', label: 'Navigation', 'html-user-language-attributes': htmlUserLanguageAttributes, 'html-items': `
  • Main page
  • Contents
  • Featured content
  • Current events
  • Random page
  • Donate
  • `, 'html-after-portal': portletAfter( placeholder( 'Possible hook output (navigation)', 50 ) ) }, toolbox: { id: 'p-tb', class: 'vector-menu-portal portal', 'html-tooltip': 'A message tooltip-p-tb must exist for this to appear', label: 'Tools', 'html-user-language-attributes': htmlUserLanguageAttributes, 'html-items': `
  • What links here
  • Related changes
  • Upload file
  • Special pages
  • Page information
  • Wikidata item
  • Cite this page
  • `, 'html-after-portal': portletAfter( placeholder( 'Possible hook output (tb)', 50 ) ) }, langlinks: { id: 'p-lang', class: 'vector-menu-portal portal', 'html-tooltip': 'A message tooltip-p-lang must exist for this to appear', label: 'In other languages', 'html-user-language-attributes': htmlUserLanguageAttributes, 'html-items': ` `, 'html-after-portal': '' } };