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

includes/SkinVector.php

@@ -65,6 +65,7 @@ class SkinVector extends SkinMustache {
 		'is-quiet' => true,
 		'class' => 'sticky-header-icon'
 	];
+	private const SEARCH_EXPANDING_CLASS = 'vector-search-box-show-thumbnail';
 
 	/**
 	 * T243281: Code used to track clicks to opt-out link.
@@ -325,7 +326,16 @@ class SkinVector extends SkinMustache {
 	private function getStickyHeaderData() {
 		return [
 			'data-primary-action' => !$this->shouldHideLanguages() ? $this->getULSButtonData() : '',
-			'data-button-start' => self::NO_ICON,
+			'data-button-start' => [
+				'href' => '#p-search',
+				'label' => $this->msg( 'search' ),
+				'icon' => 'wikimedia-search',
+				'is-quiet' => true,
+				'class' => 'vector-sticky-header-search-toggle',
+			],
+			'data-search' => [
+				'class' => $this->shouldSearchExpand() ? self::SEARCH_EXPANDING_CLASS : '',
+			],
 			'data-buttons' => [
 				self::TALK_ICON, self::HISTORY_ICON, self::NO_ICON, self::NO_ICON
 			]
@@ -423,7 +433,7 @@ class SkinVector extends SkinMustache {
 		}
 
 		if ( $this->shouldSearchExpand() ) {
-			$searchClass .= ' vector-search-box-show-thumbnail';
+			$searchClass .= " " . self::SEARCH_EXPANDING_CLASS;
 		}
 
 		// Annotate search box with a component class.

includes/templates/StickyHeader.mustache

@@ -6,6 +6,11 @@
 			{{>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>

jsdoc.json

@@ -22,6 +22,7 @@
 				"Element": "https://developer.mozilla.org/docs/Web/API/Element",
 				"Event": "https://developer.mozilla.org/docs/Web/API/Event",
 				"HTMLElement": "https://developer.mozilla.org/docs/Web/API/HTMLElement",
+				"NodeList": "https://developer.mozilla.org/docs/Web/API/NodeList",
 				"HTMLInputElement": "https://developer.mozilla.org/docs/Web/API/HTMLInputElement",
 				"\"removeEventListener\"": "https://developer.mozilla.org/docs/Web/API/EventTarget/removeEventListener",
 				"Window": "https://developer.mozilla.org/docs/Web/API/Window",

resources/skins.vector.js/searchToggle.js

@@ -1,7 +1,6 @@
 var
-	HEADER_SELECTOR = '.mw-header',
-	SEARCH_TOGGLE_SELECTOR = '.search-toggle',
-	SEARCH_BOX_ID = 'p-search',
+	HEADER_SELECTOR = 'header',
+	SEARCH_BOX_SELECTOR = '.vector-search-box',
 	SEARCH_VISIBLE_CLASS = 'vector-header-search-toggled';
 
 /**
@@ -22,7 +21,9 @@ function bindSearchBoxHandler( searchBox, header ) {
 			// Check if the click target was a suggestion link. WVUI clears the
 			// suggestion elements from the DOM when a suggestion is clicked so we
 			// can't test if the suggestion is a child of the searchBox.
-			!$( ev.target ).closest( '.wvui-typeahead-suggestion' ).length &&
+			//
+			// Note: The .closest API is feature detected in `initSearchToggle`.
+			!ev.target.closest( '.wvui-typeahead-suggestion' ) &&
 			!searchBox.contains( ev.target )
 		) {
 			// eslint-disable-next-line mediawiki/class-doc
@@ -53,15 +54,20 @@ function bindToggleClickHandler( searchBox, header, searchToggle ) {
 		// from the page when clicked.
 		ev.preventDefault();
 
-		bindSearchBoxHandler( searchBox, header );
-
 		// eslint-disable-next-line mediawiki/class-doc
 		header.classList.add( SEARCH_VISIBLE_CLASS );
 
-		// Defer focusing the input to another task in the event loop. At the time
+		// Defer binding the search box handler until after the event bubbles to the
+		// top of the document so that the handler isn't called when the user clicks
+		// the search toggle. Event bubbled callbacks execute within the same task
+		// in the event loop.
+		//
+		// Also, defer focusing the input to another task in the event loop. At the time
 		// of this writing, Safari 14.0.3 has trouble changing the visibility of the
 		// element and focusing the input within the same task.
 		setTimeout( function () {
+			bindSearchBoxHandler( searchBox, header );
+
 			var searchInput = /** @type {HTMLInputElement|null} */ ( searchBox.querySelector( 'input[type="search"]' ) );
 
 			if ( searchInput ) {
@@ -73,14 +79,34 @@ function bindToggleClickHandler( searchBox, header, searchToggle ) {
 	searchToggle.addEventListener( 'click', handler );
 }
 
-module.exports = function initSearchToggle() {
-	var
-		header = /** @type {HTMLElement|null} */ ( document.querySelector( HEADER_SELECTOR ) ),
-		searchBox = /** @type {HTMLElement|null} */ ( document.getElementById( SEARCH_BOX_ID ) ),
-		searchToggle =
-			/** @type {HTMLElement|null} */ ( document.querySelector( SEARCH_TOGGLE_SELECTOR ) );
+/**
+ * Enables search toggling behavior in a header given a toggle element (e.g.
+ * search icon).  When the toggle element is clicked, a class,
+ * `SEARCH_VISIBLE_CLASS`, will be applied to a header matching the selector
+ * `HEADER_SELECTOR` and the input inside the element, SEARCH_BOX_SELECTOR, will
+ * be focused.  This class can be used in CSS to show/hide the necessary
+ * elements. When the user clicks outside of SEARCH_BOX_SELECTOR, the class will
+ * be removed.
+ *
+ * @param {HTMLElement|null} searchToggle
+ */
+module.exports = function initSearchToggle( searchToggle ) {
+	// Check if .closest API is available (IE11 does not support it).
+	if ( !searchToggle || !searchToggle.closest ) {
+		return;
+	}
 
-	if ( !( searchBox && searchToggle && header ) ) {
+	var header =
+	/** @type {HTMLElement|null} */ ( searchToggle.closest( HEADER_SELECTOR ) );
+
+	if ( !header ) {
+		return;
+	}
+
+	var searchBox =
+	/** @type {HTMLElement|null} */ ( header.querySelector( SEARCH_BOX_SELECTOR ) );
+
+	if ( !searchBox ) {
 		return;
 	}
 

resources/skins.vector.js/skin.js

@@ -50,7 +50,9 @@ function main( window ) {
 	dropdownMenus();
 	vector.init();
 	initSearchLoader( document );
-	searchToggle();
+	// Initialize the search toggle for the main header only. The sticky header
+	// toggle is initialized after wvui search loads.
+	searchToggle( document.querySelector( '.mw-header .search-toggle' ) );
 	languageButton();
 	stickyHeader();
 }

resources/skins.vector.js/stickyHeader.js

@@ -6,7 +6,8 @@ var
 	FIRST_HEADING_ID = 'firstHeading',
 	USER_MENU_ID = 'p-personal',
 	VECTOR_USER_LINKS_SELECTOR = '.vector-user-links',
-	VECTOR_MENU_CONTENT_LIST_SELECTOR = '.vector-menu-content-list';
+	VECTOR_MENU_CONTENT_LIST_SELECTOR = '.vector-menu-content-list',
+	SEARCH_TOGGLE_SELECTOR = '.vector-sticky-header-search-toggle';
 
 /**
  * Copies attribute from an element to another.
@@ -141,6 +142,31 @@ function makeStickyHeaderFunctional(
 	stickyObserver.observe( stickyIntersection );
 }
 
+/**
+ * @param {HTMLElement} header
+ */
+function setupSearchIfNeeded( header ) {
+	var
+		searchToggle = header.querySelector( SEARCH_TOGGLE_SELECTOR );
+
+	if ( !(
+		searchToggle &&
+		window.fetch &&
+		document.body.classList.contains( 'skin-vector-search-vue' )
+	) ) {
+		return;
+	}
+
+	// Load the `skins.vector.search` module here or setup an event handler to
+	// load it depending on the outcome of T289718. After it loads, initialize the
+	// search toggle.
+	//
+	// Example:
+	// mw.loader.using( 'skins.vector.search', function () {
+	//   initSearchToggle( searchToggle );
+	// } );
+}
+
 module.exports = function initStickyHeader() {
 	var header = document.getElementById( STICKY_HEADER_ID ),
 		stickyIntersection = document.getElementById(
@@ -162,4 +188,5 @@ module.exports = function initStickyHeader() {
 	}
 
 	makeStickyHeaderFunctional( header, stickyIntersection, userMenu, userMenuStickyContainer );
+	setupSearchIfNeeded( header );
 };

resources/skins.vector.search/App.vue

@@ -1,6 +1,6 @@
 <template>
 	<wvui-typeahead-search
-		id="searchform"
+		:id="id"
 		ref="searchForm"
 		:client="getClient"
 		:domain="domain"
@@ -48,10 +48,6 @@ module.exports = {
 		var wvuiSearchForm = this.$refs.searchForm.$el;
 
 		if ( this.autofocusInput ) {
-			// TODO: The wvui-typeahead-search component accepts an id prop but does not
-			// display that value as an HTML attribute on the form element.
-			wvuiSearchForm.querySelector( 'form' ).setAttribute( 'id', 'searchform' );
-
 			// TODO: The wvui-typeahead-search component does not accept an autofocus parameter
 			// or directive. This can be removed when its does.
 			wvuiSearchForm.querySelector( 'input' ).focus();
@@ -75,6 +71,10 @@ module.exports = {
 		}
 	},
 	props: {
+		id: {
+			type: String,
+			required: true
+		},
 		searchPageTitle: {
 			type: String,
 			default: 'Special:Search'

resources/skins.vector.search/skins.vector.search.js

@@ -6,37 +6,55 @@ var
 
 /**
  * @param {HTMLElement} searchForm
+ * @param {NodeList} secondarySearchElements
  * @param {HTMLInputElement} search
  * @param {string|null} searchPageTitle title of page used for searching e.g. Special:Search
  *  If null then this will default to Special:Search.
  * @return {void}
  */
-function initApp( searchForm, search, searchPageTitle ) {
+function initApp( searchForm, secondarySearchElements, search, searchPageTitle ) {
+	/**
+	 *
+	 * @ignore
+	 * @param {Function} createElement
+	 * @param {string} id
+	 * @return {Vue.VNode}
+	 */
+	var renderFn = function ( createElement, id ) {
+		return createElement( App, {
+			props: $.extend( {
+				id: id,
+				autofocusInput: search === document.activeElement,
+				action: searchForm.getAttribute( 'action' ),
+				searchAccessKey: search.getAttribute( 'accessKey' ),
+				searchPageTitle: searchPageTitle,
+				searchTitle: search.getAttribute( 'title' ),
+				searchPlaceholder: search.getAttribute( 'placeholder' ),
+				searchQuery: search.value
+			},
+			// Pass additional config from server.
+			config
+			)
+		} );
+	};
 	// eslint-disable-next-line no-new
 	new Vue( {
 		el: searchForm,
-		/**
-		 *
-		 * @param {Function} createElement
-		 * @return {Vue.VNode}
-		 */
 		render: function ( createElement ) {
-			return createElement( App, {
-				props: $.extend( {
-					autofocusInput: search === document.activeElement,
-					action: searchForm.getAttribute( 'action' ),
-					searchAccessKey: search.getAttribute( 'accessKey' ),
-					searchPageTitle: searchPageTitle,
-					searchTitle: search.getAttribute( 'title' ),
-					searchPlaceholder: search.getAttribute( 'placeholder' ),
-					searchQuery: search.value
-				},
-				// Pass additional config from server.
-				config
-				)
-			} );
+			return renderFn( createElement, 'searchform' );
 		}
 	} );
+
+	// Initialize secondary search elements like the search in the sticky header.
+	Array.prototype.forEach.call( secondarySearchElements, function ( secondarySearchElement ) {
+		// eslint-disable-next-line no-new
+		new Vue( {
+			el: secondarySearchElement,
+			render: function ( createElement ) {
+				return renderFn( createElement, secondarySearchElement.id );
+			}
+		} );
+	} );
 }
 /**
  * @param {Document} document
@@ -48,9 +66,12 @@ function main( document ) {
 		titleInput = /** @type {HTMLInputElement|null} */ (
 			searchForm.querySelector( 'input[name=title]' )
 		),
-		search = /** @type {HTMLInputElement|null} */ ( document.getElementById( 'searchInput' ) );
+		search = /** @type {HTMLInputElement|null} */ ( document.getElementById( 'searchInput' ) ),
+		// Since App.vue requires a unique id prop, only query elements with an id attribute.
+		secondarySearchElements = document.querySelectorAll( '.vector-secondary-search[id]' );
+
 	if ( search && searchForm ) {
-		initApp( searchForm, search, titleInput && titleInput.value );
+		initApp( searchForm, secondarySearchElements, search, titleInput && titleInput.value );
 	}
 }
 main( document );

resources/skins.vector.styles/components/StickyHeader.less

@@ -46,6 +46,7 @@
 	&-start {
 		display: flex;
 		align-items: center;
+		flex-grow: 1;
 	}
 
 	&-end {
@@ -88,6 +89,29 @@
 			background-image: linear-gradient( to right, rgba( 255, 255, 255, 0 ), rgba( 255, 255, 255, 1 ) 20px );
 		}
 	}
+
+	.vector-search-box {
+		// Hide the search box until the user toggles it.
+		display: none;
+	}
+
+	&.vector-header-search-toggled {
+		.vector-sticky-header-search-toggle,
+		.vector-sticky-header-context-bar {
+			display: none;
+		}
+
+		.vector-search-box {
+			display: block;
+			flex-basis: unit( 500px / @font-size-browser / @font-size-base, em );
+		}
+
+		// Increase the start margin of the search box to account for the input
+		// expanding on focus.
+		.vector-search-box-show-thumbnail {
+			margin-left: @size-search-expand;
+		}
+	}
 }
 
 .client-nojs .vector-sticky-header {

stories/StickyHeader.stories.data.js

@@ -18,7 +18,16 @@ const data = {
 		label: '196 languages',
 		'html-vector-button-icon': `<span class="mw-ui-icon mw-ui-icon-wikimedia-language"></span>`
 	},
-	'data-button-start': NO_ICON,
+	'data-search': {
+		class: ''
+	},
+	'data-button-start': {
+		icon: 'wikimedia-search',
+		href: '#',
+		class: 'search-toggle',
+		'is-quiet': true,
+		label: 'Search'
+	},
 	'data-button-end': NO_ICON,
 	'data-buttons': [
 		NO_ICON, NO_ICON, NO_ICON, NO_ICON