#21 | [WIP] Implement search vue

AUTHORS.txt

@@ -4,6 +4,8 @@ See https://github.com/lakejason0/mediawiki-skins-Lakeus/graphs/contributors for
 Translations are done by Lakejason0 (`zh-hans`, `zh-hant`, `zh-hk`), Winston Sung (`zh-hant`), Olvcpr423 (`yue`) and other translators on translatewiki.net.
 See https://translatewiki.net/wiki/Special:MessageGroupStats?group=mwgithub-lakeus&suppressempty=1&x=D for the message group statistics of the skin.
 
+Special thanks to DDElephant helping me with WVUI search bar!
+
 Special thanks to Timeless, Vector, Minerva, FandomMobile and FandomDesktop for inspiration of some features of this skin!
 
 Timeless:

includes/Hooks.php

@@ -2,9 +2,24 @@
 
 namespace MediaWiki\Skins\Lakeus;
 
+use Config;
+# use MediaWiki\Config\Config; // Namespaced in 1.41.0
 use MediaWiki\Preferences\Hook\GetPreferencesHook;
+use MediaWiki\ResourceLoader\Context as ResourceLoaderContext;
 
 class Hooks implements GetPreferencesHook {
+	/**
+	 * @param ResourceLoaderContext $context
+	 * @param Config $config
+	 * @return $wgLakeusSearchOptions
+	 */
+	public function getLakeusSearchResourceLoaderConfig(
+		ResourceLoaderContext $context,
+		Config $config
+	) {
+		return $config->get( 'LakeusSearchOptions' );
+	}
+
 	/**
 	 * @see https://www.mediawiki.org/wiki/Special:MyLanguage/Manual:Hooks/GetPreferences
 	 * @param User $user

resources/skin.less

@@ -167,7 +167,7 @@ p {
 }
 
 #siteNotice {
-  margin: 40px auto 0;
+  margin: 45px auto 0;
   padding-bottom: 8px;
   color: @text-color-body;
 
@@ -197,11 +197,10 @@ p {
 
 #p-search {
   margin-right: 30px;
-  margin-left: 10px;
+  z-index: 3;
 
   @media screen and ( max-width: @width-breakpoint-tablet ) {
     width: 100%;
-    display: flex;
     justify-content: center;
     margin: 5px auto;
   }

resources/skins.lakeus.search/App.vue

@@ -0,0 +1,112 @@
+<template>
+  <wvui-typeahead-search
+    id="p-search"
+    ref="searchForm"
+    :client="getClient"
+    :domain="domain"
+    :footer-search-text="$i18n('searchsuggest-containing').text()"
+    :suggestions-label="$i18n('searchresults').text()"
+    :accesskey="searchAccessKey"
+    :title="searchTitle"
+    :placeholder="searchPlaceholder"
+    :aria-label="searchPlaceholder"
+    :initial-input-value="searchQuery"
+    :button-label="$i18n('searchbutton').text()"
+    :form-action="action"
+    :search-language="language"
+    :show-thumbnail="showThumbnail"
+    :show-description="showDescription"
+  >
+    <input type="hidden" name="title" value="Special:Search" />
+  </wvui-typeahead-search>
+</template>
+
+<script>
+/* global SubmitEvent */
+const wvui = require("wvui");
+module.exports = {
+  name: "App",
+  components: wvui,
+  mounted: function () {
+    // access the element associated with the wvui-typeahead-search component
+    // eslint-disable-next-line no-jquery/variable-pattern
+    var wvuiSearchForm = this.$refs.searchForm.$el;
+    this.$refs.searchForm.$el.id = "p-search";
+    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();
+    }
+  },
+  computed: {
+    /**
+     * Allow wikis to replace the default search API client
+     *
+     * @return {void|Object}
+     */
+    getClient: function () {
+      return mw.config.get("wgLakeusSearchClient", undefined);
+    },
+    language: function () {
+      return mw.config.get("wgUserLanguage");
+    },
+    domain: function () {
+      // It might be helpful to allow this to be configurable in future.
+      return mw.config.get("wgLakeusSearchHost", location.host);
+    },
+  },
+  props: {
+    autofocusInput: {
+      type: Boolean,
+      default: false,
+    },
+    action: {
+      type: String,
+      default: "",
+    },
+    /** The keyboard shortcut to focus search. */
+    searchAccessKey: {
+      type: String,
+    },
+    /** The access key informational tip for search. */
+    searchTitle: {
+      type: String,
+    },
+    /** The ghost text shown when no search query is entered. */
+    searchPlaceholder: {
+      type: String,
+    },
+    /**
+     * The search query string taken from the server-side rendered input immediately before
+     * client render.
+     */
+    searchQuery: {
+      type: String,
+    },
+    showThumbnail: {
+      type: Boolean,
+      default: true,
+    },
+    showDescription: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data: function () {
+    return {
+      // -1 here is the default "active suggestion index" defined in the
+      // `wvui-typeahead-search` component (see
+      // https://gerrit.wikimedia.org/r/plugins/gitiles/wvui/+/c7af5d6d091ffb3beb4fd2723fdf50dc6bb2789b/src/components/typeahead-search/TypeaheadSearch.vue#167).
+    };
+  },
+  methods: {
+    /**
+     * @param {SubmitEvent} event
+     */
+    onSubmit: function (event) {},
+  },
+};
+</script>

resources/skins.lakeus.search/skins.lakeus.search.js

@@ -0,0 +1,48 @@
+/** @module search */
+var Vue = require("vue").default || require("vue"),
+  App = require("./App.vue"),
+  config = require("./config.json");
+/**
+ * @param {HTMLElement} searchForm
+ * @param {HTMLInputElement} search
+ * @return {void}
+ */
+function initApp(searchForm, search) {
+  // 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"),
+            searchTitle: search.getAttribute("title"),
+            searchPlaceholder: search.getAttribute("placeholder"),
+            searchQuery: search.value,
+          },
+          // Pass additional config from server.
+          config
+        ),
+      });
+    },
+  });
+}
+/**
+ * @param {Document} document
+ * @return {void}
+ */
+function main(document) {
+  var searchForm = /** @type {HTMLElement} */ (document.querySelector("#p-search")),
+    search = /** @type {HTMLInputElement|null} */ (document.getElementById("searchInput"));
+  if (search && searchForm) {
+    initApp(searchForm, search);
+  }
+}
+main(document);

skin.json

@@ -7,6 +7,7 @@
 		"Light beacon",
 		"Dianliang233",
 		"Winston Sung",
+		"DDElephant",
 		"..."
 	],
 	"version": "1.2.1",
@@ -194,6 +195,26 @@
 				"lakeus-theme-designer-text-color-sticky-toc-number",
 				"lakeus-theme-designer-danger-zone"
 			]
+		},
+		"skins.lakeus.search": {
+			"es6": true,
+			"dependencies": [
+				"mediawiki.Uri"
+			],
+			"packageFiles": [
+				"resources/skins.lakeus.search/skins.lakeus.search.js",
+				"resources/skins.lakeus.search/App.vue",
+				{
+					"name": "resources/skins.lakeus.search/config.json",
+					"callback": "MediaWiki\\Skins\\Lakeus\\Hooks::getLakeusSearchResourceLoaderConfig"
+				}
+
+			],
+			"messages": [
+				"searchbutton",
+				"searchresults",
+				"searchsuggest-containing"
+			]
 		}
 	},
 	"ResourceModuleSkinStyles": {
@@ -240,7 +261,8 @@
 					],
 					"scripts": [
 						"skins.lakeus",
-						"skins.lakeus.designer"
+						"skins.lakeus.designer",
+						"skins.lakeus.search"
 					],
 					"messages": [
 						"sitetitle",
@@ -265,6 +287,20 @@
 			"value": true,
 			"description": "Whether to show the link to the repository or not."
 		},
+		"LakeusSearchHost": {
+			"value": "",
+			"description": "Override default search API. Can be used with $wgDisableTextSearch and $wgSearchForwardUrl to mimic user experience on production."
+		},
+		"LakeusSearchModuleType": {
+			"value": null,
+			"description": "Which search module to use. Options: null (default Codex) / 'codex' (Codex) / 'jquery' (legacy jQuery search)."
+		},
+		"LakeusSearchOptions": {
+			"value": {
+				"showThumbnail": true,
+				"showDescription": true
+			}
+		},
 		"LakeusSiteNoticeHasBorder": {
 			"value": false,
 			"description": "Whether to add a border to site notice. Useful for plain text notices."