Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Research about how to integrate web components that depend each others #90

Closed
humitos opened this issue Aug 28, 2023 · 2 comments
Closed

Research about how to integrate web components that depend each others #90

humitos opened this issue Aug 28, 2023 · 2 comments

Comments

@humitos
Copy link
Member

humitos commented Aug 28, 2023

We need to find a way to include readthedocs-search inside readthedocs-flyout so when clicking on the "Search" input field from inside the flyout, the readthedocs-search web component (modal) is triggered.

Screenshot_2023-08-28_15-47-22
@humitos
Copy link
Member Author

humitos commented Aug 28, 2023

Note we will need the same for docdiff as well: #23

humitos added a commit that referenced this issue Sep 5, 2023
@humitos
Embeded webcomponents
7b01b0f 
This is an initial attempt to be able to render the `readthedocs-search` addon
inside the `readthedocs-flyout` one.

I was able to:

- include the `readthedocs-search` tag inside the flyout
- connect the `focusin` event to the input from inside the flyout to call the search

Each time I click on the input from inside the flyout, it shows a log in the
console (for debugging). However, due to some reason that I don't know yet, the
`readthedocs-search` tag does not contains any HTML inside ito, so even when the
modal is triggered, nothing is shown.

Related #90
@humitos humitos mentioned this issue Sep 5, 2023
Merged
humitos added a commit that referenced this issue Sep 7, 2023
@humitos
Trigger search addon from flyout input (#108)
a7a49eb 
This is an initial attempt to be able to render the `readthedocs-search`
addon inside the `readthedocs-flyout` one.

I was able to:

- include the `readthedocs-search` tag inside the flyout
- connect the `focusin` event to the input from inside the flyout to
call the search

Each time I click on the input from inside the flyout, it shows a log in
the console (for debugging). However, due to some reason that I don't
know yet, the `readthedocs-search` tag does not contains any HTML inside
ito, so even when the modal is triggered, nothing is shown.

Related #90
@humitos
Copy link
Member Author

humitos commented Sep 12, 2023

We found a simple pattern that consists on listening and triggering a CustomEvent(). The event is listened by the addon that has to be enabled and triggered from the addon where the click is done by the user. This seems like an easy pattern that we can follow for now.

The situation it's a little different for those addons that include UI elements that are not modals. I'm thinking about docdiff, for example, that has a checkbox. However, the approach for this case could be to implement the checkbox directly on the flyout and make this checkbox to trigger the custom event to hide/show the diffs. Here, this pattern seems to work still.

I'm sure there would be more complex addons with more UI elements where this pattern may not work great, but I think we've solved this problem for now and we can revisit in the future if we find it's not enough.

@humitos humitos closed this as completed Sep 12, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
✨ Addons
Status: Done
Milestone
No milestone
Development

No branches or pull requests
1 participant
@humitos