Fullscreen search modal #18

phonzammi · 2024-10-24T02:54:21Z

No description provided.

brillout · 2024-10-24T11:02:35Z

FYI I created a new directory docsearch/. How about we move the CSS over there?

brillout · 2024-10-24T11:16:18Z

I just rebased and force-pushed, I hope it's ok. We can now try the changes by using Docpress's demo: 617f339.

brillout · 2024-10-24T11:18:50Z

Let me implement the <meta> thing, so that we can assign a categoy to each page. Let's then do a column layout for the docsearch modal.

phonzammi · 2024-10-25T08:32:13Z

FYI I created a new directory docsearch/. How about we move the CSS over there?

Done. I’ve also made a few improvements, please take a look.

brillout · 2024-10-25T14:33:32Z

Nice, much better! I think we can polish a bit more: removing the rounded corner + avoiding the scrolling of the main view.

The docsearch category meta tag is live so I think we can now implement the column layout: every page is guaranteed to have a category (it falls back to Miscellaneous). I expect it to be a bit tricky if there are too many columns that don't fit the viewport. Let's try something simple first and let's maybe do something more sophisticated if we aren't happy with it. (In case you're curious, you can see how <MenuModal> does it: see getStyleColumnLayout.ts.)

phonzammi · 2024-10-27T14:23:59Z

avoiding the scrolling of the main view

Algolia DocSearch has already added this functionality by toggling the DocSearch--active class on the <body> tag, but it doesn’t seem to be working

brillout · 2024-10-27T14:27:32Z

ea1b44b

…

On Sun, Oct 27, 2024 at 3:24 PM Muhammad ***@***.***> wrote: avoiding the scrolling of the main view Algolia DocSearch has already added this functionality by toggling the DocSearch--active class on the <body> tag, but it doesn’t seem to be working — Reply to this email directly, view it on GitHub <#18 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAHVQRQHSJS3RU7FERFAUB3Z5TZRLAVCNFSM6AAAAABQQCWNYKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDINBQGA2DINRTGY> . You are receiving this because you commented.Message ID: ***@***.***>

phonzammi · 2024-10-27T14:28:47Z

I tried to follow the approach you used with MenuModal, but the issue with DocSearchModal is that when we click the Cancel button, the class doesn’t get removed.

The DocSearchModal & it's children (e.g. the Cancel button) are created dynamically, I don't know how we can add an event listener to the Cancel button

brillout · 2024-10-27T14:33:07Z

I think we can use our keydown listener to add our own CSS class to html.

…

On Sun, Oct 27, 2024 at 3:29 PM Muhammad ***@***.***> wrote: I tried to follow the approach you used with MenuModal, but the issue with DocSearchModal is that when we click the Cancel button, the class doesn’t get removed. — Reply to this email directly, view it on GitHub <#18 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAHVQRTQ5HJGFGPHZD36DG3Z5T2DLAVCNFSM6AAAAABQQCWNYKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDINBQGA2DMMRTGI> . You are receiving this because you commented.Message ID: ***@***.***>

phonzammi · 2024-10-27T15:21:42Z

I think we can use our keydown listener to add our own CSS class to html.

Yes, we can and it works to toggle the class.
but the issue with DocSearchModal is that when we click the Cancel button, the class doesn’t get removed.

…zammi/full-screen-search

…ty}`

phonzammi · 2024-10-29T16:23:35Z

@brillout, Please take a look at my latest commits

brillout · 2024-10-30T15:14:26Z

src/docsearch/toggleDocsearchModal.ts

  if (!isClosed()) return
-  toggle()
+  if (isButton) {


I'd refactor this a bit; it's a bit difficult to understand. How about onDocsearchModalOpen() instead?

When a user opens the docsearch modal using the hotkeys, we only need to add the class, we don't need to call

window.dispatchEvent(new KeyboardEvent('keydown', { key: 'k', ctrlKey: true }))

because useDocSearchKeyboardEvents() handles that.
Otherwise, the browser will throw an error : Uncaught RangeError: Maximum call stack size exceeded in the console.

Yea, the logic seems accurate. What I meant is to refactor it to make it a little bit less convoluted.

src/docsearch/DocSearchInstall.tsx

brillout · 2024-10-30T15:19:13Z

src/docsearch/toggleDocsearchModal.ts

+  if (isButton) {
+    window.dispatchEvent(new KeyboardEvent('keydown', { key: 'k', ctrlKey: true }))
+  }
+  document.documentElement.classList.add('DocSearch--active')


Let's add a comment about this.

brillout · 2024-10-30T15:20:48Z

src/docsearch/toggleDocsearchModal.ts

@@ -5,24 +5,31 @@ import { assert } from '../utils/client'

 function closeDocsearchModal() {
  if (isClosed()) return
-  toggle()
+  document.documentElement.classList.remove('DocSearch--active')


I'd refactor this a bit; let's collocate this line next to its add() counterpart.

brillout · 2024-10-30T15:21:26Z

src/docsearch/toggleDocsearchModal.ts


 function isClosed() {
-  const test1 = !document.body.classList.contains('DocSearch--active')
+  const test1 =


I would use an assert() instead.

Like this : 993b47c ?

brillout · 2024-10-30T15:22:10Z

Nice, looks it's working 💯

brillout · 2024-10-30T15:29:51Z

I just tried, really nice.

The layout seems a bit broken sometimes, for example:

eject @docsearch/css

0f7995a

brillout force-pushed the phonzammi/full-screen-search branch from 3a25cd7 to 13058ca Compare October 24, 2024 11:15

fix: fullscreen docsearch

6a0257e

phonzammi force-pushed the phonzammi/full-screen-search branch from 13058ca to 6a0257e Compare October 25, 2024 08:29

phonzammi added 5 commits October 28, 2024 21:47

polis: remove the rounded corner

c7287f6

refactor(DocSearchInstall): use <DocSearchModal /> component

4cf2470

Merge branch 'main' of https://github.com/brillout/docpress into phon…

7f575bc

…zammi/full-screen-search

fix(DocSearch): show all result per group `maxResultsPerGroup={Infini…

69b381b

…ty}`

feat(DocSearch): show search results in columns

a52f25a

brillout reviewed Oct 30, 2024

View reviewed changes

phonzammi added 3 commits November 1, 2024 15:33

polish

656ec03

polish: remove React.useCallback()

646211d

polish: use assert()

993b47c

brillout closed this Dec 17, 2024

brillout mentioned this pull request Feb 23, 2025

[Algolia] Fullscreen #33

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fullscreen search modal #18

Fullscreen search modal #18

phonzammi commented Oct 24, 2024

brillout commented Oct 24, 2024

brillout commented Oct 24, 2024

brillout commented Oct 24, 2024

phonzammi commented Oct 25, 2024

brillout commented Oct 25, 2024

phonzammi commented Oct 27, 2024

brillout commented Oct 27, 2024 via email

phonzammi commented Oct 27, 2024 •

edited

Loading

brillout commented Oct 27, 2024 via email

phonzammi commented Oct 27, 2024

phonzammi commented Oct 29, 2024 •

edited

Loading

brillout Oct 30, 2024

phonzammi Oct 31, 2024

brillout Oct 31, 2024

brillout Oct 30, 2024

brillout Oct 30, 2024

brillout Oct 30, 2024

phonzammi Nov 1, 2024

brillout commented Oct 30, 2024

brillout commented Oct 30, 2024 •

edited

Loading

Fullscreen search modal #18

Fullscreen search modal #18

Conversation

phonzammi commented Oct 24, 2024

brillout commented Oct 24, 2024

brillout commented Oct 24, 2024

brillout commented Oct 24, 2024

phonzammi commented Oct 25, 2024

brillout commented Oct 25, 2024

phonzammi commented Oct 27, 2024

brillout commented Oct 27, 2024 via email

phonzammi commented Oct 27, 2024 • edited Loading

brillout commented Oct 27, 2024 via email

phonzammi commented Oct 27, 2024

phonzammi commented Oct 29, 2024 • edited Loading

brillout Oct 30, 2024

Choose a reason for hiding this comment

phonzammi Oct 31, 2024

Choose a reason for hiding this comment

brillout Oct 31, 2024

Choose a reason for hiding this comment

brillout Oct 30, 2024

Choose a reason for hiding this comment

brillout Oct 30, 2024

Choose a reason for hiding this comment

brillout Oct 30, 2024

Choose a reason for hiding this comment

phonzammi Nov 1, 2024

Choose a reason for hiding this comment

brillout commented Oct 30, 2024

brillout commented Oct 30, 2024 • edited Loading

phonzammi commented Oct 27, 2024 •

edited

Loading

phonzammi commented Oct 29, 2024 •

edited

Loading

brillout commented Oct 30, 2024 •

edited

Loading