wikimedia/mediawiki-skins-Vector
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git synced 2024-11-05 14:22:56 +00:00
Code Issues Packages Projects Releases Wiki Activity
mediawiki-skins-Vector/stories/portal.stories.data.js

83 lines
7.9 KiB
JavaScript
Raw Normal View History

Add storybook to Vector - Update package.json with the new dependencies. - A script storybook.sh pulls down CSS and LESS imports from external dependencies. This copies the approach taken in Popups and MobileFrontend. - Icons from external repos are maintained within the repo in SVG-only form. Using load.php modules is also possible, but will pull down other unnecessary icons and break if any of these modules are changed. Decided that we should manually maintain these for the time being given there are only 3 icons. - Several LESS files now import the variables file. I think it's useful for stories to only import the CSS they use as this encourages us to modularise our CSS. Before these imports were not necessary as they inherit imports from index.less. This will have no impact on the bundle size as the LESS compiler silently discards duplicate imports - stories/utils.js provides a useful placeholder function for generalising our hook entry points. Bug: T242674 Change-Id: I722e84d2fb57653a2f96142dc3e5248043261746
2020-01-09 22:11:00 +00:00
import mustache from 'mustache';
import portalTemplate from '!!raw-loader!../includes/templates/Portal.mustache';
Isolate Vector Styles to their Respective Component This will help with the encapsulation/reusability of each component. * Stylesheets were renamed to reflect their respective component name (e.g. search.less became SearchBox.less) * Styles were isolated to each component: * navigation.less now only contains classes that are relevant to Navigation.mustache. * personalNavigation.less, search.less, and tabs.less imports were removed and made first-class styles. * several selectors were moved into common.less * #p-logo was moved into sidebar * tabs.less was renamed to VectorTabs.less and styles specific to VectorMenu.less were put into VectorMenu.less * Storybook was updated to reflect changes Bug: T243281 Change-Id: Idf90ee2a0f1c1d08a31cf50099c0bebc7b67e619
2020-02-28 20:06:33 +00:00
import '../resources/skins.vector.styles/Portal.less';
Add storybook to Vector - Update package.json with the new dependencies. - A script storybook.sh pulls down CSS and LESS imports from external dependencies. This copies the approach taken in Popups and MobileFrontend. - Icons from external repos are maintained within the repo in SVG-only form. Using load.php modules is also possible, but will pull down other unnecessary icons and break if any of these modules are changed. Decided that we should manually maintain these for the time being given there are only 3 icons. - Several LESS files now import the variables file. I think it's useful for stories to only import the CSS they use as this encourages us to modularise our CSS. Before these imports were not necessary as they inherit imports from index.less. This will have no impact on the bundle size as the LESS compiler silently discards duplicate imports - stories/utils.js provides a useful placeholder function for generalising our hook entry points. Bug: T242674 Change-Id: I722e84d2fb57653a2f96142dc3e5248043261746
2020-01-09 22:11:00 +00:00
import '../.storybook/common.less';
import { placeholder, htmluserlangattributes } from './utils';
[Dev] processTemplate used in one place Moving all the templateParser calls to one function so its easier to see how the template is composed. The diff of changes to the stories folder highlight the internal changes which are: * html-portals replaced with html-sidebar in main template * new Sidebar template added which outputs to html-sidebar * Mention of "MainMenu" replaced with better understood "Sidebar" This is precursory work to adopt templatePartials Change-Id: I6b2196e39087f818e774d04b2d1b9ab8cb8816a1
2020-02-14 20:33:54 +00:00
export const wrapPortlet = ( data ) => {
Add storybook to Vector - Update package.json with the new dependencies. - A script storybook.sh pulls down CSS and LESS imports from external dependencies. This copies the approach taken in Popups and MobileFrontend. - Icons from external repos are maintained within the repo in SVG-only form. Using load.php modules is also possible, but will pull down other unnecessary icons and break if any of these modules are changed. Decided that we should manually maintain these for the time being given there are only 3 icons. - Several LESS files now import the variables file. I think it's useful for stories to only import the CSS they use as this encourages us to modularise our CSS. Before these imports were not necessary as they inherit imports from index.less. This will have no impact on the bundle size as the LESS compiler silently discards duplicate imports - stories/utils.js provides a useful placeholder function for generalising our hook entry points. Bug: T242674 Change-Id: I722e84d2fb57653a2f96142dc3e5248043261746
2020-01-09 22:11:00 +00:00
const node = document.createElement( 'div' );
node.setAttribute( 'id', 'mw-panel' );
node.innerHTML = mustache.render( portalTemplate, data );
return node;
};
const portletAfter = ( html ) => {
return `<div class="after-portlet after-portlet-tb">${html}</div>`;
};
[Dev] processTemplate used in one place Moving all the templateParser calls to one function so its easier to see how the template is composed. The diff of changes to the stories folder highlight the internal changes which are: * html-portals replaced with html-sidebar in main template * new Sidebar template added which outputs to html-sidebar * Mention of "MainMenu" replaced with better understood "Sidebar" This is precursory work to adopt templatePartials Change-Id: I6b2196e39087f818e774d04b2d1b9ab8cb8816a1
2020-02-14 20:33:54 +00:00
export const PORTALS = {
example: {
Add storybook to Vector - Update package.json with the new dependencies. - A script storybook.sh pulls down CSS and LESS imports from external dependencies. This copies the approach taken in Popups and MobileFrontend. - Icons from external repos are maintained within the repo in SVG-only form. Using load.php modules is also possible, but will pull down other unnecessary icons and break if any of these modules are changed. Decided that we should manually maintain these for the time being given there are only 3 icons. - Several LESS files now import the variables file. I think it's useful for stories to only import the CSS they use as this encourages us to modularise our CSS. Before these imports were not necessary as they inherit imports from index.less. This will have no impact on the bundle size as the LESS compiler silently discards duplicate imports - stories/utils.js provides a useful placeholder function for generalising our hook entry points. Bug: T242674 Change-Id: I722e84d2fb57653a2f96142dc3e5248043261746
2020-01-09 22:11:00 +00:00
'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': `<ul>
<li><a href='#'>A list of links</a></li>
<li><a href='#'>with ids</a></li>
<li><a href='#'>on each list item</a></li>
</ul>`,
'html-after-portal': portletAfter(
placeholder( `<p>Beware: The <a href="https://codesearch.wmflabs.org/search/?q=BaseTemplateAfterPortlet&i=nope&files=&repos=">BaseTemplateAfterPortlet hook</a> can be used to inject arbitary HTML here for any portlet.</p>`, 60 )
)
[Dev] processTemplate used in one place Moving all the templateParser calls to one function so its easier to see how the template is composed. The diff of changes to the stories folder highlight the internal changes which are: * html-portals replaced with html-sidebar in main template * new Sidebar template added which outputs to html-sidebar * Mention of "MainMenu" replaced with better understood "Sidebar" This is precursory work to adopt templatePartials Change-Id: I6b2196e39087f818e774d04b2d1b9ab8cb8816a1
2020-02-14 20:33:54 +00:00
},
navigation: {
Add storybook to Vector - Update package.json with the new dependencies. - A script storybook.sh pulls down CSS and LESS imports from external dependencies. This copies the approach taken in Popups and MobileFrontend. - Icons from external repos are maintained within the repo in SVG-only form. Using load.php modules is also possible, but will pull down other unnecessary icons and break if any of these modules are changed. Decided that we should manually maintain these for the time being given there are only 3 icons. - Several LESS files now import the variables file. I think it's useful for stories to only import the CSS they use as this encourages us to modularise our CSS. Before these imports were not necessary as they inherit imports from index.less. This will have no impact on the bundle size as the LESS compiler silently discards duplicate imports - stories/utils.js provides a useful placeholder function for generalising our hook entry points. Bug: T242674 Change-Id: I722e84d2fb57653a2f96142dc3e5248043261746
2020-01-09 22:11:00 +00:00
'portal-id': 'p-navigation',
'msg-label': 'Navigation',
'msg-label-id': 'p-navigation-label',
'html-userlangattributes': htmluserlangattributes,
'html-portal-content': `<ul>
<li id="n-mainpage-description"><a href="/wiki/Main_Page" title="Visit the main page [⌃⌥z]" accesskey="z">Main page</a></li><li id="n-contents"><a href="/wiki/Wikipedia:Contents" title="Guides to browsing Wikipedia">Contents</a></li><li id="n-featuredcontent"><a href="/wiki/Wikipedia:Featured_content" title="Featured content – the best of Wikipedia">Featured content</a></li><li id="n-currentevents"><a href="/wiki/Portal:Current_events" title="Find background information on current events">Current events</a></li><li id="n-randompage"><a href="/wiki/Special:Random" title="Load a random page [⌃⌥x]" accesskey="x">Random page</a></li><li id="n-sitesupport"><a href="https://donate.wikimedia.org/wiki/Special:FundraiserRedirector?utm_source=donate&amp;utm_medium=sidebar&amp;utm_campaign=C13_en.wikipedia.org&amp;uselang=en" title="Support us">Donate</a></li><li id="n-shoplink"><a href="//shop.wikimedia.org" title="Visit the Wikipedia store">Wikipedia store</a></li>
</ul>`,
'html-after-portal': portletAfter( placeholder( 'Possible hook output (navigation)', 50 ) )
[Dev] processTemplate used in one place Moving all the templateParser calls to one function so its easier to see how the template is composed. The diff of changes to the stories folder highlight the internal changes which are: * html-portals replaced with html-sidebar in main template * new Sidebar template added which outputs to html-sidebar * Mention of "MainMenu" replaced with better understood "Sidebar" This is precursory work to adopt templatePartials Change-Id: I6b2196e39087f818e774d04b2d1b9ab8cb8816a1
2020-02-14 20:33:54 +00:00
},
toolbox: {
Add storybook to Vector - Update package.json with the new dependencies. - A script storybook.sh pulls down CSS and LESS imports from external dependencies. This copies the approach taken in Popups and MobileFrontend. - Icons from external repos are maintained within the repo in SVG-only form. Using load.php modules is also possible, but will pull down other unnecessary icons and break if any of these modules are changed. Decided that we should manually maintain these for the time being given there are only 3 icons. - Several LESS files now import the variables file. I think it's useful for stories to only import the CSS they use as this encourages us to modularise our CSS. Before these imports were not necessary as they inherit imports from index.less. This will have no impact on the bundle size as the LESS compiler silently discards duplicate imports - stories/utils.js provides a useful placeholder function for generalising our hook entry points. Bug: T242674 Change-Id: I722e84d2fb57653a2f96142dc3e5248043261746
2020-01-09 22:11:00 +00:00
'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': `<ul>
<li id="t-whatlinkshere"><a href="/wiki/Special:WhatLinksHere/Spain" title="A list of all wiki pages that link here [⌃⌥j]" accesskey="j">What links here</a></li><li id="t-recentchangeslinked"><a href="/wiki/Special:RecentChangesLinked/Spain" rel="nofollow" title="Recent changes in pages linked from this page [⌃⌥k]" accesskey="k">Related changes</a></li><li id="t-upload"><a href="/wiki/Wikipedia:File_Upload_Wizard" title="Upload files [⌃⌥u]" accesskey="u">Upload file</a></li><li id="t-specialpages"><a href="/wiki/Special:SpecialPages" title="A list of all special pages [⌃⌥q]" accesskey="q">Special pages</a></li><li id="t-permalink"><a href="/w/index.php?title=Spain&amp;oldid=935087243" title="Permanent link to this revision of the page">Permanent link</a></li><li id="t-info"><a href="/w/index.php?title=Spain&amp;action=info" title="More information about this page">Page information</a></li><li id="t-wikibase"><a href="https://www.wikidata.org/wiki/Special:EntityPage/Q29" title="Link to connected data repository item [⌃⌥g]" accesskey="g">Wikidata item</a></li><li id="t-cite"><a href="/w/index.php?title=Special:CiteThisPage&amp;page=Spain&amp;id=935087243" title="Information on how to cite this page">Cite this page</a></li>
</ul>`,
'html-after-portal': portletAfter( placeholder( 'Possible hook output (tb)', 50 ) )
[Dev] processTemplate used in one place Moving all the templateParser calls to one function so its easier to see how the template is composed. The diff of changes to the stories folder highlight the internal changes which are: * html-portals replaced with html-sidebar in main template * new Sidebar template added which outputs to html-sidebar * Mention of "MainMenu" replaced with better understood "Sidebar" This is precursory work to adopt templatePartials Change-Id: I6b2196e39087f818e774d04b2d1b9ab8cb8816a1
2020-02-14 20:33:54 +00:00
},
langlinks: {
Add storybook to Vector - Update package.json with the new dependencies. - A script storybook.sh pulls down CSS and LESS imports from external dependencies. This copies the approach taken in Popups and MobileFrontend. - Icons from external repos are maintained within the repo in SVG-only form. Using load.php modules is also possible, but will pull down other unnecessary icons and break if any of these modules are changed. Decided that we should manually maintain these for the time being given there are only 3 icons. - Several LESS files now import the variables file. I think it's useful for stories to only import the CSS they use as this encourages us to modularise our CSS. Before these imports were not necessary as they inherit imports from index.less. This will have no impact on the bundle size as the LESS compiler silently discards duplicate imports - stories/utils.js provides a useful placeholder function for generalising our hook entry points. Bug: T242674 Change-Id: I722e84d2fb57653a2f96142dc3e5248043261746
2020-01-09 22:11:00 +00:00
'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': `<ul>
<li class="interlanguage-link interwiki-ace">
<a href="https://ace.wikipedia.org/wiki/Seupanyo"
title="Seupanyo – Achinese" lang="ace" hreflang="ace" class="interlanguage-link-target">Acèh</a>
</li><li class="interlanguage-link interwiki-kbd"><a href="https://kbd.wikipedia.org/wiki/%D0%AD%D1%81%D0%BF%D0%B0%D0%BD%D0%B8%D1%8D" title="Эспаниэ – Kabardian" lang="kbd" hreflang="kbd" class="interlanguage-link-target">Адыгэбзэ</a></li><li class="interlanguage-link interwiki-ady"><a href="https://ady.wikipedia.org/wiki/%D0%98%D1%81%D0%BF%D0%B0%D0%BD%D0%B8%D0%B5" title="Испание – Adyghe" lang="ady" hreflang="ady" class="interlanguage-link-target">Адыгабзэ</a></li><li class="interlanguage-link interwiki-af"><a href="https://af.wikipedia.org/wiki/Spanje" title="Spanje – Afrikaans" lang="af" hreflang="af" class="interlanguage-link-target">Afrikaans</a></li><li class="interlanguage-link interwiki-ak"><a href="https://ak.wikipedia.org/wiki/Spain" title="Spain – Akan" lang="ak" hreflang="ak" class="interlanguage-link-target">Akan</a></li><li class="interlanguage-link interwiki-als"><a href="https://als.wikipedia.org/wiki/Spanien" title="Spanien – Alemannisch" lang="gsw" hreflang="gsw" class="interlanguage-link-target">Alemannisch</a></li><li class="interlanguage-link interwiki-am"><a href="https://am.wikipedia.org/wiki/%E1%8A%A5%E1%88%B5%E1%8D%93%E1%8A%95%E1%8B%AB" title="እስፓንያ – Amharic" lang="am" hreflang="am" class="interlanguage-link-target">አማርኛ</a></li><li class="interlanguage-link interwiki-ang"><a href="https://ang.wikipedia.org/wiki/Sp%C4%93onland" title="Spēonland – Old English" lang="ang" hreflang="ang" class="interlanguage-link-target">Ænglisc</a></li><li class="interlanguage-link interwiki-ab"><a href="https://ab.wikipedia.org/wiki/%D0%98%D1%81%D0%BF%D0%B0%D0%BD%D0%B8%D0%B0" title="Испаниа – Abkhazian" lang="ab" hreflang="ab" class="interlanguage-link-target">Аҧсшәа</a></li><li class="interlanguage-link interwiki-ar badge-Q17437798 badge-goodarticle" title="good article"><a href="https://ar.wikipedia.org/wiki/%D8%A5%D8%B3%D8%A8%D8%A7%D9%86%D9%8A%D8%A7" title="إسبانيا – Arabic" lang="ar" hreflang="ar" class="interlanguage-link-target">العربية</a></li><li class="interlanguage-link interwiki-an">
</ul>`,
'html-after-portal': portletAfter(
`<span class="wb-langlinks-edit wb-langlinks-link"><a href="https://www.wikidata.org/wiki/Special:EntityPage/Q29#sitelinks-wikipedia" title="Edit interlanguage links (provided by WikiBase extension)" class="wbc-editpage">Edit links</a></span></div>
${placeholder( `<p>Further hook output possible (lang)</p>`, 60 )}`
)
[Dev] processTemplate used in one place Moving all the templateParser calls to one function so its easier to see how the template is composed. The diff of changes to the stories folder highlight the internal changes which are: * html-portals replaced with html-sidebar in main template * new Sidebar template added which outputs to html-sidebar * Mention of "MainMenu" replaced with better understood "Sidebar" This is precursory work to adopt templatePartials Change-Id: I6b2196e39087f818e774d04b2d1b9ab8cb8816a1
2020-02-14 20:33:54 +00:00
},
otherProjects: {
Add storybook to Vector - Update package.json with the new dependencies. - A script storybook.sh pulls down CSS and LESS imports from external dependencies. This copies the approach taken in Popups and MobileFrontend. - Icons from external repos are maintained within the repo in SVG-only form. Using load.php modules is also possible, but will pull down other unnecessary icons and break if any of these modules are changed. Decided that we should manually maintain these for the time being given there are only 3 icons. - Several LESS files now import the variables file. I think it's useful for stories to only import the CSS they use as this encourages us to modularise our CSS. Before these imports were not necessary as they inherit imports from index.less. This will have no impact on the bundle size as the LESS compiler silently discards duplicate imports - stories/utils.js provides a useful placeholder function for generalising our hook entry points. Bug: T242674 Change-Id: I722e84d2fb57653a2f96142dc3e5248043261746
2020-01-09 22:11:00 +00:00
'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': `<ul>
<li class="wb-otherproject-link wb-otherproject-commons"><a href="https://commons.wikimedia.org/wiki/Category:Spain" hreflang="en">Wikimedia Commons</a></li><li class="wb-otherproject-link wb-otherproject-wikinews"><a href="https://en.wikinews.org/wiki/Category:Spain" hreflang="en">Wikinews</a></li><li class="wb-otherproject-link wb-otherproject-wikiquote"><a href="https://en.wikiquote.org/wiki/Spain" hreflang="en">Wikiquote</a></li><li class="wb-otherproject-link wb-otherproject-wikivoyage"><a href="https://en.wikivoyage.org/wiki/Spain" hreflang="en">Wikivoyage</a></li></ul>`,
'html-after-portal': ''
}
[Dev] processTemplate used in one place Moving all the templateParser calls to one function so its easier to see how the template is composed. The diff of changes to the stories folder highlight the internal changes which are: * html-portals replaced with html-sidebar in main template * new Sidebar template added which outputs to html-sidebar * Mention of "MainMenu" replaced with better understood "Sidebar" This is precursory work to adopt templatePartials Change-Id: I6b2196e39087f818e774d04b2d1b9ab8cb8816a1
2020-02-14 20:33:54 +00:00
};
Reference in a new issue Copy permalink