-
Notifications
You must be signed in to change notification settings - Fork 36
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
- Loading branch information
Showing
9 changed files
with
195 additions
and
32 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| import bindTabUI from './tabs'; | ||
| import updateSidenavHeight from './sidenav'; | ||
| import bindTabsSelectorsUI from './tabs-selectors'; | ||
| const OFFLINE_UI_CLASSNAME = 'snooty-offline-ui'; | ||
|
|
||
| const getScript = ({ key, fn }) => ( | ||
| <script | ||
| className={OFFLINE_UI_CLASSNAME} | ||
| key={key} | ||
| type="text/javascript" | ||
| dangerouslySetInnerHTML={{ __html: `!${fn}()` }} | ||
| /> | ||
| ); | ||
|
|
||
| export const OFFLINE_HEAD_SCRIPTS = [bindTabUI, updateSidenavHeight, bindTabsSelectorsUI].map((fn, idx) => | ||
| getScript({ key: `offline-docs-ui-${idx}`, fn }) | ||
| ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,72 @@ | ||
| /** | ||
| * Tabs selectors are singular per page | ||
| * For offline builds, refer to one ID from TabSelectors component | ||
| * | ||
| */ | ||
|
|
||
| function bindTabsSelectorsUI() { | ||
| function onChoiceClick({ e, choices, tabsComponents, menu, button }) { | ||
| // get the data-value attribute | ||
| const tabName = e.currentTarget.getAttribute('data-value'); | ||
|
|
||
| // set choice selected for styling css | ||
| for (const choice of choices) { | ||
| choice.setAttribute('selected', false); | ||
| } | ||
| e.currentTarget.setAttribute('selected', true); | ||
|
|
||
| // handle the tabsComponents | ||
| for (const tabsComponent of tabsComponents) { | ||
| // find the tab within each tabsComponent | ||
| const tabContent = tabsComponent.querySelector(`[data-value=${tabName}`); | ||
| if (!tabContent) { | ||
| continue; | ||
| } | ||
| // if it exists, hide all other tabs, and show this tab | ||
| for (const tabPanel of tabsComponent.querySelectorAll('[role=tabpanel]')) { | ||
| tabPanel.style.display = tabPanel.contains(tabContent) ? 'block' : 'none'; | ||
| } | ||
| } | ||
| const buttonChildren = button.querySelectorAll('div'); | ||
| const selectTextelm = buttonChildren[buttonChildren.length - 1]; | ||
| selectTextelm.innerText = e.currentTarget.getAttribute('data-text'); | ||
|
|
||
| // finally hide the menu | ||
| menu.setAttribute('hidden', true); | ||
| } | ||
|
|
||
| const onContentLoaded = () => { | ||
| const selectPortal = document.querySelector('#offline-select'); | ||
|
|
||
| // bind menu opening to select component | ||
| const button = selectPortal?.querySelector('button'); | ||
| const menu = selectPortal?.querySelector('.offline-select-menu'); | ||
| button?.addEventListener('click', () => { | ||
| menu.toggleAttribute('hidden'); | ||
| }); | ||
|
|
||
| // bind choices selection to showing tabbed content | ||
| const choices = menu?.querySelectorAll('.offline-select-choice') ?? []; | ||
| const tabsComponents = document.querySelectorAll('.offline-tabs.drivers'); | ||
| for (const choice of choices) { | ||
| choice?.addEventListener('click', (e) => { | ||
| onChoiceClick({ e, choices, tabsComponents, menu, button }); | ||
| }); | ||
| } | ||
|
|
||
| // select the first choice on load | ||
| // TODO: possibly add to local storage and store info here | ||
| choices[0].click(); | ||
|
|
||
| // bind document click to close menu | ||
| document.addEventListener('click', (e) => { | ||
| if (!selectPortal.contains(e.target)) { | ||
| menu.setAttribute('hidden', true); | ||
| } | ||
| }); | ||
| }; | ||
|
|
||
| document.addEventListener('DOMContentLoaded', onContentLoaded, false); | ||
| } | ||
|
|
||
| export default bindTabsSelectorsUI; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters