Commit Graph

9 Commits

Author SHA1 Message Date
jdlrobson caed16e26f Allow multiple search components on the same page
Styling should not depend on IDs to allow us to have multiple
searches in the page.

Precursor for wiring up search in the sticky header.

This also tweaks performance metrics to track separate metrics
for the sticky header search

Change-Id: I5b4192a8f5a9f95af26c1faf904f7cc994323518
2021-09-23 23:23:58 +00:00
Clare Ming bdad84a7c9 Restrict sticky header to specified namespaces
- Hardcode allowable namespaces, actions for now in relevant js.

Bug: T290347
Change-Id: If482505be5de4b3e5bf130530f27f0d917ecaaa0
2021-09-17 19:07:04 +00:00
Nicholas Ray 93745e4800 Add search to sticky header
Per T289724#7342741, server renders an anchor tag pointing to #p-search
into the "button-start" bucket of the sticky header.

In the future after T289718, this anchor will then acts as a button when
the search module is loaded and searchToggle executes.

* skins.vector.search was modified to accomodate instantiating multiple
search components (one in the main header and one in the sticky
header).

* searchToggle.js was modified to accept a searchToggle element as a
param which the caller can then instantiate when ideal. For the sticky
header toggle, this needs to happen *after* the search module loads.
Before then, the toggle will act as a link.

* Drops one jQuery usage from searchToggle so that it can be jQuery
free. Because the native .closest method is used, IE11 support is also
dropped. However, the script feature detects and returns early if the
API isn't available.

* Makes App.vue accept an `id` prop so that multiple instances of it can
be created.

Bug: T289724
Change-Id: I1c5e6eee75918a0d06562d07c31fdcbd5a4ed6d5
2021-09-14 16:58:07 -07:00
jdlrobson f271c86238 [refactor] DRY up attribute suffixing
This makes the code more readable and allows us to apply
the suffixing in other places in the sticky header.

Change-Id: I44008c18a3faea2089bc93eb5ce7fea1cad1aaec
2021-09-14 23:34:48 +00:00
jdlrobson 21a21f7e93 [refactor] reduce usages of typescript type declarations
While needed for cloned elements, others can be avoided by
using more general Element class

Change-Id: Iaee121a9f746e9729b5ecbdec80915bf05c11655
2021-09-14 23:34:36 +00:00
jdlrobson 52204c0f1a Add history and talk page icons to sticky header
Bug: T290597
Change-Id: Ib590399df09a9da8e181b331d4227b0de30b9a8e
2021-09-14 12:34:47 -07:00
Clare Ming 755f10cd0b Add user menu to sticky header
- Remove unused button, data from sticky header.
- Simplify template to leave sticky user menu placeholder.
- Update js to clone user menu with new ids.
- Include gadget-injected items in sticky user menu.

Bug: T289816
Change-Id: I23fde537efc2a66a2df22cd2633fbab034b73eb6
2021-09-14 12:57:08 -06:00
Clare Ming e639c9287d Make sticky header functional/visible
- Show sticky header after bottom of first h1.
- Hide sticky header before bottom of first h1.
- Add media query for reduce motion preference.

Bug: T290101
Change-Id: I2b1ecd31ac360a1ef5bf2f016978d6e0665a316c
2021-09-07 16:10:21 -06:00
jdlrobson 8657171471 Build the sticky header skeleton
The sticky header is currently disabled unconditionally
and nothing is wired up, with placeholders for data and
functionality which will be added in future.

Bug: T289716
Change-Id: I16223ce849267e718aad22b8a24b2327332ac8b7
2021-09-01 12:32:31 -07:00