mediawiki-skins-Vector/includes/templates/StickyHeader.mustache
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

34 lines
1 KiB
Plaintext

<header id="vector-sticky-header"
class="vector-sticky-header {{#is-visible}}vector-sticky-header-visible{{/is-visible}}">
<div class="vector-sticky-header-start">
<div class="vector-sticky-header-icon-start">
{{#data-button-start}}
{{>Button}}
{{/data-button-start}}
</div>
{{#data-search}}
<div class="vector-search-box {{class}}">
<div class="vector-secondary-search" id="vector-sticky-header-search"></div>
</div>
{{/data-search}}
<div class="vector-sticky-header-context-bar">
<div class="vector-sticky-header-context-bar-primary">{{html-title}}</div>
</div>
</div>
<div class="vector-sticky-header-end">
<div class="vector-sticky-header-icons">
{{#data-buttons}}
{{>Button}}
{{/data-buttons}}
</div>
{{#data-primary-action}}
{{>Button}}
{{/data-primary-action}}
<div class="vector-sticky-header-icon-end">
<div class="vector-user-links">
{{! User menu items with unique ids are cloned here from the fixed header in stickyHeader.js. }}
</div>
</div>
</div>
</header>