Commit graph

23 commits

Author SHA1 Message Date
jdlrobson cdd5ebd74d Use template partials rather than HTML strings
CHANGES to  index.mustache:
Changes can be understood by looking at the diff of
the file stories/skin.stories.js

The additional changes in stories folder export the data passed to
those templates. A new file is used as exporting any variable in a
file suffixed stories.js will be assumed to be a story entry.

The changes to index.mustache are as follows:
* html-footer is replaced with data-footer and Footer
component is rendered via template partial
* html-navigation is replaced with data-navigation and
Navigation component is rendered via template partial

CHANGES to Navigation.mustache:
Changes are best explained by looking at the diff to
stories/navigation.stories.js
and navigation.stories.data.js
* html-personal-menu is replaced with data-personal-menu

Bug: T245456
Change-Id: Ie96e92447a932b8a7f3844df277a1d31a2af423c
2020-03-03 09:28:52 -08:00
jdlrobson 698752e38a [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-26 12:28:40 -08:00
jdlrobson ea2bcd44f2 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-31 16:59:15 +08:00
jdlrobson 12e2287894 Simplify logo generation
Use a template variable only for html attributes of the logo
Move static HTML into Navigation.mustache

Change-Id: If37015b9ce4f37e264b6f25956e4d0ca35e8cdff
2020-01-30 02:11:05 +00:00
jdlrobson 0cdf0c238a Dev: Complete initial porting of Vector to Mustache
Bug: T240062
Change-Id: I18cb1fda6850646a38314a7d2dd356103f04ec28
2020-01-29 13:21:34 +00:00
jdlrobson 80b5ccc634 Dev: Break Footer out into template
Add a new Footer template for modelling the footer of
Vector.

Bug: T240062
Change-Id: I60a243abeb5650542ca6f6fac8401a622faaabac
2020-01-17 13:10:37 -08:00
jdlrobson 9f82f58ea9 Dev: Include closed body and html tags in getTrail
This will allow us to render in Storybook without having issues
with unclosed tags. it also mirrors how html-headelement works
(obscuring the opening of the body and html tags)

Bug: T240062
Bug: T242674
Change-Id: I216a920c68bf3da9de55a75fc53451c68c9cc753
2020-01-17 19:16:32 +00:00
Jan Drewniak 361e0d6f71 Extract Portal mustache component from VectorTemplate.php
A Portal (or portlet) in the Vector context is a section of the
sidebar menu (e.g. Tools, Languges etc.).

The hook that places content between the portals (or portlets?)
such as `SkinTemplateToolboxEnd` and `otherlanguages` has been
enclosed inside of an output buffer so that any content it
produces can be passed to a template.

Bug: T239248, T240062
Change-Id: I882db161e5462cf88aa48c9cfd91448eb97a4a77
2020-01-14 22:44:58 +01:00
Jan Drewniak 093cc20ee0 Extract VectorMenu.mustache component from VectorTemplate
Extracts a new VectorMenu mustache component from VectorTemplate.
VectorMenu is the "more" menu that appears at small widths instead of the
Read/Edit/View History menu near the top of the Vector skin.

Bug: T239248, T240062
Change-Id: I41b1ec949d81303abddadb981741445572c939e3
2020-01-14 10:38:46 -08:00
Jan Drewniak 4f471bfa5e Extract PersonalMenu,mustache component from VectorTemplate
PersonalMenu is the login/logout notifications etc. menu at the very
top of the Vector skin.

Bug: T239248, T240062
Change-Id: Iae224cbd838e44669a9f27e6dd303c6c3b402d41
2020-01-09 16:01:46 +01:00
Stephen Niedzielski 9d427dcb30 [Hygiene] [Mustache] rename SearchComponent to SearchBox
For consistency with VectorTabs, rename SearchComponent to only imply
component. At least two word names seems like a good target (instead of
just "Search") for grepability and standard component style conventions.

Bug: T239248
Change-Id: I1e4f7270ba29c2f35f08e92f8a28cd8a2ec8fe87
2019-12-06 17:00:42 -07:00
Stephen Niedzielski 60148a1a92 [Hygiene] [Mustache] improve template parameters and docs
Add typing expectations to search box template parameters. Add context
expectations to search box and tabs templates.

Bug: T239248
Change-Id: I4ff1920f5489b68ef73a219ceeceb1f5511fc9e8
2019-12-06 17:00:42 -07:00
jenkins-bot 11ad91633f Merge "Move namespace & view tabs into a VectorTabs.mustache component" 2019-12-04 15:44:38 +00:00
Jan Drewniak c12c5f06db Move namespace & view tabs into a VectorTabs.mustache component
Creates a new VectorTabs.mustache component and uses it to render
the namespace & view tabs.

Bug: T239248
Change-Id: I859e4e95a2a12470f66564db547679c9f0a16727
2019-12-04 15:51:02 +01:00
Stephen Niedzielski 71672d60b3 Fix: search header attribute escaping
Broken in my previous commit, d6f4aaa. This causes attributes to be
doubly escaped. For example,
http://localhost:8181/wiki/Main_Page?uselang=he.

Change-Id: I9776a3c355081dc5fec7753edf256f55dfe6045b
2019-12-03 16:05:56 -07:00
Stephen Niedzielski d6f4aaa88e Hygiene: extract VectorTemplate inline HTML to SearchComponent Mustache file
Extract SearchComponent.mustache from VectorTemplate. The "search"
message is now escaped by the template parser. As is, htmlspecialchars()
for "wgScript".

A later patch will change each component renderer function as well as
renderNavigation() to return a string.

Change-Id: I3084b7e0ef73d320c85ee780c9eff13ecea92906
2019-11-20 16:41:05 -05:00
Isarra 411a015ec5 Move DataAfterContent outside of main content block
Bug: T226199
Change-Id: Ie04d8d2bb1d44ec8a1c03fcc6f807668bab0377c
2019-06-20 17:55:55 +00:00
Timo Tijhof d56792addb Fix <h1> to be present even if title is "0"
Regression from 74b9803d9a, caused by a bug in LightNCandy which
caused {{foo}} to render "0", and {{#foo}} to pass as true with "0", but then
in {{#foo}}<b>{{foo}}</b>{{/foo} render as empty string producing "<b></b>".
In other words, the conditional is passing and the inner block is executed,
but the placeholder is mistakenly converting "0" => null => "" (empty string),
causing the <h1> to render but without any text in it.

Work around this bug by simply removing the conditional. Several other skins
already don't have this conditional and it's unclear why or in what
situation MediaWiki would send OutputPage to SkinTemplate without a title.

I think it would make sense in such rare case to still have a consistent
layout for extensions and gadgets to interact with and not omit the H1
element, but render it with the value that OutputPage gave it, even if it
is the empty string.

Bug: T219864
Change-Id: I6e04b512d2fe2e949ff5385cb38ceebe392fb255
2019-04-02 19:47:38 +01:00
Michael Große 3669843c9f Fix invalid lang attribute on first heading
Bug: T219359
Change-Id: I0d6e036b65da024278fb492c6dfe44c79efb1e98
2019-03-28 11:54:40 +01:00
Jdlrobson 74b9803d9a Start extracting rendering from PHP into Mustache
This reverts commit 8d0377d926
now a conversation has happened.

Bug: T217172
Change-Id: Id51bbd4358bdcc1131c11e13d5548e9c0474e711
2019-03-05 13:22:24 +00:00
Isarra 8d0377d926 Revert "Start extracting rendering from PHP into Mustache"
This reverts commit a3ca2c3e16.

Reason for revert: This requires wider discussion before moving
forward, and a more complete implementation even once we do have
consensus.

No associated task exists on which to view or continue this
discussion: linked task briefly mentions Mustache in general as an
option as part of a much wider topic, but doesn't concern this
specifically.

Issues that should be discussed include:
* What the intent even is here: is this for one skin only? Is this
  the intended path forward for all of them? Depending on which, we
  have other issues: for the former case, that it is quite
  unhelpful in terms of maintenance and further development having
  more random code diversity out there, especially in this
  half-completed state; or if it is indeed intended for all of them,
  that an RfC is needed before anything is merged, as that is a very
  significant change.
* That using Mustache in MediaWiki does add (usually minor)
  performance overhead; we need to clearly establish in the task that
  this is indeed worth it here.

Change-Id: I0bafa55b554aa8a38553e20c75859ec5eec2c062
2019-01-28 16:49:48 +00:00
Timo Tijhof d306e07824 template: Avoid raw HTML parameter for jump link labels
Change-Id: I6c638118988b6fbea95697817edf8c59c0ef6a6b
2019-01-22 21:13:05 -08:00
Timo Tijhof a3ca2c3e16 Start extracting rendering from PHP into Mustache
Bug: T140664
Change-Id: I249fead8e1c7bc5dc295457bd46b05e7ed389414
2019-01-22 21:13:05 -08:00