mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-11-24 23:55:53 +00:00
93745e4800
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
34 lines
1 KiB
Plaintext
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>
|