@@ -40,8 +40,7 @@ const DocsData = (() => {
4040const DocsState = {
4141 currentPage : document . body . dataset . page || "index.html" ,
4242 currentSection : document . body . dataset . defaultSection || "home" ,
43- navOpen : false ,
44- paletteOpen : false
43+ navOpen : false
4544} ;
4645
4746const DocsElements = {
@@ -50,12 +49,8 @@ const DocsElements = {
5049 sidebarNav : document . getElementById ( "sidebar-nav" ) ,
5150 sidebarBackdrop : document . getElementById ( "sidebar-backdrop" ) ,
5251 menuToggle : document . getElementById ( "menu-toggle" ) ,
53- palette : document . getElementById ( "command-palette" ) ,
54- paletteInput : document . getElementById ( "command-palette-input" ) ,
55- paletteResults : document . getElementById ( "command-palette-results" ) ,
56- paletteClose : document . getElementById ( "command-palette-close" ) ,
57- quickJumpTrigger : document . getElementById ( "quick-jump-trigger" ) ,
58- paletteTriggers : Array . from ( document . querySelectorAll ( "[data-open-palette]" ) ) ,
52+ searchInput : document . getElementById ( "docs-search-input" ) ,
53+ searchResults : document . getElementById ( "docs-search-results" ) ,
5954 title : document . querySelector ( "title" )
6055} ;
6156
@@ -206,12 +201,12 @@ const Sidebar = (() => {
206201 return { render, syncActive, setOpen, toggle } ;
207202} ) ( ) ;
208203
209- const Palette = ( ( ) => {
204+ const Search = ( ( ) => {
210205 function renderResults ( query = "" ) {
211206 const needle = query . trim ( ) . toLowerCase ( ) ;
212207 const results = DocsData . entries . filter ( ( entry ) => {
213208 if ( needle . length === 0 ) {
214- return true ;
209+ return DocsData . pages [ entry . page ] ?. title === DocsData . pages [ DocsState . currentPage ] ?. title ;
215210 }
216211
217212 return [
@@ -223,62 +218,36 @@ const Palette = (() => {
223218 } ) ;
224219
225220 if ( results . length === 0 ) {
226- DocsElements . paletteResults . innerHTML = `
227- <div class="command-result-empty">
228- No matching docs pages. Try install, pipeline, console, reports, or testing.
229- </div>
230- ` ;
221+ DocsElements . searchResults . innerHTML = '<div class="command-result-empty">No matching docs pages. Try install, pipeline, console, reports, or testing.</div>' ;
231222 return ;
232223 }
233224
234- DocsElements . paletteResults . innerHTML = results . map ( ( entry ) => `
225+ DocsElements . searchResults . innerHTML = results . map ( ( entry ) => `
235226 <button type="button" class="command-result" data-section-id="${ entry . id }
236227 <span class="command-result-title">${ entry . title }
237228 <span class="command-result-meta">${ DocsData . pages [ entry . page ] ?. title || "Docs" }
238229 <span class="command-result-desc">${ entry . hint }
239230 </button>
240231 ` ) . join ( "" ) ;
241232
242- DocsElements . paletteResults . querySelectorAll ( ".command-result" ) . forEach ( ( button ) => {
233+ DocsElements . searchResults . querySelectorAll ( ".command-result" ) . forEach ( ( button ) => {
243234 button . addEventListener ( "click" , ( ) => {
244235 const entry = DocsHelpers . findEntry ( button . dataset . sectionId ) ;
245- close ( ) ;
246236 DocsHelpers . goToEntry ( entry ) ;
247237 } ) ;
248238 } ) ;
249239 }
250240
251- function open ( ) {
252- DocsState . paletteOpen = true ;
253- DocsElements . palette . hidden = false ;
254- DocsElements . body . classList . add ( "palette-open" ) ;
255- renderResults ( DocsElements . paletteInput . value ) ;
256- requestAnimationFrame ( ( ) => DocsElements . paletteInput . focus ( ) ) ;
257- }
258-
259- function close ( ) {
260- DocsState . paletteOpen = false ;
261- DocsElements . palette . hidden = true ;
262- DocsElements . body . classList . remove ( "palette-open" ) ;
263- }
264-
265241 function bind ( ) {
266- DocsElements . paletteInput ?. addEventListener ( "input" , ( event ) => {
242+ DocsElements . searchInput ?. addEventListener ( "input" , ( event ) => {
267243 renderResults ( event . target . value ) ;
268244 } ) ;
269-
270- DocsElements . palette ?. addEventListener ( "click" , ( event ) => {
271- if ( event . target === DocsElements . palette ) {
272- close ( ) ;
273- }
245+ DocsElements . searchInput ?. addEventListener ( "focus" , ( ) => {
246+ renderResults ( DocsElements . searchInput . value ) ;
274247 } ) ;
275-
276- DocsElements . paletteClose ?. addEventListener ( "click" , close ) ;
277- DocsElements . quickJumpTrigger ?. addEventListener ( "click" , open ) ;
278- DocsElements . paletteTriggers . forEach ( ( trigger ) => trigger . addEventListener ( "click" , open ) ) ;
279248 }
280249
281- return { bind, open , close , renderResults } ;
250+ return { bind, renderResults } ;
282251} ) ( ) ;
283252
284253const App = ( ( ) => {
@@ -297,28 +266,28 @@ const App = (() => {
297266 document . addEventListener ( "keydown" , ( event ) => {
298267 if ( ( event . ctrlKey || event . metaKey ) && event . key . toLowerCase ( ) === "k" ) {
299268 event . preventDefault ( ) ;
300- Palette . open ( ) ;
269+ DocsElements . searchInput ?. focus ( ) ;
301270 return ;
302271 }
303272
304- if ( event . key === "/" && ! DocsState . paletteOpen ) {
273+ if ( event . key === "/" ) {
305274 const target = event . target ;
306275 const editable =
307276 target instanceof HTMLElement &&
308277 ( target . isContentEditable || [ "INPUT" , "TEXTAREA" , "SELECT" ] . includes ( target . tagName ) ) ;
309278
310279 if ( ! editable ) {
311280 event . preventDefault ( ) ;
312- Palette . open ( ) ;
281+ DocsElements . searchInput ?. focus ( ) ;
313282 }
314283 return ;
315284 }
316285
317286 if ( event . key === "Escape" ) {
318- if ( DocsState . paletteOpen ) {
319- Palette . close ( ) ;
320- } else if ( DocsState . navOpen ) {
287+ if ( DocsState . navOpen ) {
321288 Sidebar . setOpen ( false ) ;
289+ } else if ( DocsElements . searchInput && document . activeElement === DocsElements . searchInput ) {
290+ DocsElements . searchInput . blur ( ) ;
322291 }
323292 }
324293 } ) ;
@@ -327,8 +296,8 @@ const App = (() => {
327296 function init ( ) {
328297 DocsHelpers . syncCurrentSection ( ) ;
329298 Sidebar . render ( ) ;
330- Palette . bind ( ) ;
331- Palette . renderResults ( "" ) ;
299+ Search . bind ( ) ;
300+ Search . renderResults ( "" ) ;
332301 bindGlobalEvents ( ) ;
333302
334303 if ( DocsHelpers . currentHashId ( ) ) {
0 commit comments