forked from openwebwork/pg
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add an HTML/JavaScript drop down menu option to parserPopUp.pl.
The point of this is to make a drop down menu that can contain math mode
content. A native select of course can not contain such content other
than in string form which is ugly at best.
The option is `useHTMLSelect`. The default value for this option is 1
which means that a native HTML select element is used. That means that
the current behavior of a drop down menu is used. If `useHTMLSelect` is
set to 0, then instead a Bootstrap drop down is used instead of a native
HTML select. In this case the choices must be provided that satisfy the
constraint that they will work directly in HTML and will also work if
placed in a `\text{...}` call in LaTeX. In HTML of course `\(...\)` or
`\[...\]` will work and will be typeset by MathJax. Those also work
inside `\text{...}` in LaXeX. So the drop down could have choices like
`\(y < \frac{3}{4}\)` or `Choice 1: \(y^2 = e^x\)`.
The drop down menu is styled to appear much like the native select, and
JavaScript designed to make the drop down behave much the same. There
are some differences such as the down arrow for a Bootstrap drop down
menu looks a little different than that of a select element, and there
is a hover/focus background color change for a Bootstrap drop down.- Loading branch information
Showing
4 changed files
with
208 additions
and
43 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,63 @@ | ||
| (() => { | ||
| const setupDropdown = (dropdown) => { | ||
| const input = dropdown?.querySelector(`input[name="${dropdown.dataset.feedbackInsertElement}"]`); | ||
| const dropdownBtn = dropdown?.querySelector('button.dropdown-toggle'); | ||
| if (!dropdown || !input || !dropdownBtn) return; | ||
|
|
||
| // Give the dropdown button the correct/incorrect colors. | ||
| if (input.classList.contains('correct')) dropdownBtn.classList.add('correct'); | ||
| if (input.classList.contains('incorrect')) dropdownBtn.classList.add('incorrect'); | ||
| if (input.classList.contains('partially-correct')) dropdownBtn.classList.add('partially-correct'); | ||
|
|
||
| const options = Array.from(dropdown.querySelectorAll('.dropdown-item:not(.disabled)')); | ||
|
|
||
| dropdown.addEventListener('shown.bs.dropdown', () => { | ||
| for (const option of options) { | ||
| if (option.classList.contains('active')) { | ||
| option.focus(); | ||
| break; | ||
| } | ||
| } | ||
| }); | ||
|
|
||
| for (const option of options) { | ||
| option.addEventListener('click', () => { | ||
| options.forEach((o) => o.classList.remove('active')); | ||
| option.classList.add('active'); | ||
| input.value = option.dataset.value; | ||
| dropdownBtn.textContent = option.dataset.content; | ||
| dropdownBtn.focus(); | ||
|
|
||
| if (window.MathJax) | ||
| MathJax.startup.promise = MathJax.startup.promise.then(() => MathJax.typesetPromise([dropdownBtn])); | ||
|
|
||
| // If any feedback popovers are open, then update their positions. | ||
| for (const popover of document.querySelectorAll('.ww-feedback-btn')) { | ||
| bootstrap.Popover.getInstance(popover)?.update(); | ||
| } | ||
| }); | ||
| } | ||
| }; | ||
|
|
||
| // Set up dropdowns that are already in the page. | ||
| document.querySelectorAll('.pg-dropdown').forEach(setupDropdown); | ||
|
|
||
| // Observer that sets up MathQuill inputs. | ||
| const observer = new MutationObserver((mutationsList) => { | ||
| for (const mutation of mutationsList) { | ||
| for (const node of mutation.addedNodes) { | ||
| if (node instanceof Element) { | ||
| if (node.classList.contains('pg-dropdown')) { | ||
| setupDropdown(node); | ||
| } else { | ||
| node.querySelectorAll('.pg-dropdown').forEach(setupDropdown); | ||
| } | ||
| } | ||
| } | ||
| } | ||
| }); | ||
| observer.observe(document.body, { childList: true, subtree: true }); | ||
|
|
||
| // Stop the mutation observer when the window is closed. | ||
| window.addEventListener('unload', () => observer.disconnect()); | ||
| })(); |
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,33 @@ | ||
| .pg-dropdown { | ||
| .btn.dropdown-toggle { | ||
| --bs-btn-color: #555; | ||
| --bs-btn-bg: white; | ||
| --bs-btn-padding-y: 0.2rem; | ||
| --bs-btn-padding-x: 0.45rem; | ||
| --bs-btn-font-size: 0.85rem; | ||
| --bs-btn-border-radius: 4px; | ||
| --bs-btn-border-color: #ccc; | ||
|
|
||
| &.show { | ||
| border-color: rgba(112, 154, 192, 0.8); | ||
| outline: 0; | ||
| box-shadow: | ||
| inset 0 1px 1px rgba(0, 0, 0, 0.25), | ||
| 0 0 0 0.2rem rgba(136, 187, 221, 0.8); | ||
| } | ||
|
|
||
| &::after { | ||
| margin-left: 0.9em; | ||
| } | ||
| } | ||
|
|
||
| .dropdown-menu { | ||
| --bs-dropdown-min-width: 100%; | ||
| } | ||
|
|
||
| .dropdown-item { | ||
| --bs-dropdown-link-active-color: black; | ||
| --bs-dropdown-link-active-bg: lightgray; | ||
| --bs-dropdown-link-hover-bg: #d3d3d387; | ||
| } | ||
| } |
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