Skip to content

Commit

Permalink
Merge pull request #1159 from drgrice1/html-dropdown
Browse files Browse the repository at this point in the history 
Add an HTML/JavaScript drop down menu option to parserPopUp.pl.
  • Loading branch information
@Alex-Jordan
Alex-Jordan authored Feb 1, 2025
2 parents 6f12013 + d3f9908 commit 6a409c6
Show file tree
Hide file tree
Showing 4 changed files with 221 additions and 44 deletions.
63 changes: 63 additions & 0 deletions htdocs/js/DropDown/dropdown.js
View file
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());
})();
41 changes: 41 additions & 0 deletions htdocs/js/DropDown/dropdown.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
.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;
--bs-btn-hover-color: #000;
--bs-btn-hover-bg: #d3d4d5;
--bs-btn-hover-border-color: #ccc;
--bs-btn-focus-shadow-rgb: 33, 37, 41;
--bs-btn-active-color: #000;
--bs-btn-active-bg: #d3d4d5;
--bs-btn-active-border-color: #ccc;
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);

&.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;
}
}
2 changes: 2 additions & 0 deletions htdocs/js/Problem/problem.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,7 @@
input[type='radio'],
input[type='checkbox'],
span[id^='mq-answer'],
.pg-dropdown .btn.dropdown-toggle,
.graphtool-container {
&.correct:not(:focus):not(.mq-focused) {
border-color: rgba(81, 153, 81, 0.8); /* green */
Expand Down Expand Up @@ -118,6 +119,7 @@
input[type='radio'],
input[type='checkbox'],
textarea,
.pg-dropdown .btn.dropdown-toggle,
select {
&:focus {
border-color: rgba(112, 154, 192, 0.8);
Expand Down
159 changes: 115 additions & 44 deletions macros/parsers/parserPopUp.pl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,9 @@ =head1 DESCRIPTION
Note that drop-down menus cannot contain mathematical notation, only
plain text. This is because the browser's native menus are used, and
these can contain only text, not mathematics or graphics.
these can contain only text, not mathematics or graphics. That is unless
the C<useHTMLSelect> option is set to 0. See more about that option
below.
The difference between C<PopUp()> and C<DropDown() >is that in HTML,
the latter will have an unselectable placeholder value. This value
Expand Down Expand Up @@ -146,6 +148,16 @@ =head1 DESCRIPTION
list of options is printed as a bullet list, otherwise an inline list is
used. Default: 25
=item C<S<< useHTMLSelect => 0 or 1 >>>
If this is set to 1 (the default) then a native HTML select element will
be used for the dropdown menu. However, if this is set to 0 then a
Bootstrap Dropdown will be used instead. In this case, the answer labels
must work directly in HTML, and must also work inside C<\text{...}> in
LaTeX. Note that math mode (C<\(...\)> or C<\[...\]>) can be used in
these labels. In HTML those will be typeset by MathJax, and in hard copy
will be typeset by LaTeX.
=back
To insert the drop-down into the problem text when using PGML:
Expand Down Expand Up @@ -235,14 +247,15 @@ sub new {
$context->{parser}{String} = "parser::PopUp::String";
$context->update;
$self = bless {
data => [$value],
context => $context,
choices => $choices,
placeholder => $options{placeholder} // '',
showInStatic => $options{showInStatic} // 1,
inlineSize => $options{inlineSize} // 25,
values => $options{values} // [],
noindex => $options{noindex} // 0
data => [$value],
context => $context,
choices => $choices,
placeholder => $options{placeholder} // '',
showInStatic => $options{showInStatic} // 1,
inlineSize => $options{inlineSize} // 25,
values => $options{values} // [],
noindex => $options{noindex} // 0,
useHTMLSelect => $options{useHTMLSelect} // 1
}, $class;
$self->getChoiceOrder;
$self->addLabelsValues;
Expand Down Expand Up @@ -365,8 +378,19 @@ sub cmp_preprocess {
}
}

# Allow users to convert the value string into a label
sub quoteTeX {
my ($self, $s) = @_;
return "\\text{$s}" unless $self->{useHTMLSelect};
return $self->SUPER::quoteTeX($s);
}

sub quoteHTML {
my ($self, $s) = @_;
return $s unless $self->{useHTMLSelect};
return $self->SUPER::quoteHTML($s);
}

# Allow users to convert the value string into a label
sub answerLabel {
my ($self, $value) = @_;
my $index = $self->getIndexByValue($value);
Expand Down Expand Up @@ -398,43 +422,90 @@ sub MENU {
my $aria_label = main::generate_aria_label($name);

if ($main::displayMode =~ m/^HTML/) {
$menu = main::tag(
'div',
class => 'd-inline text-nowrap',
data_feedback_insert_element => $name,
data_feedback_insert_method => 'append_content',
main::tag(
'select',
class => 'pg-select',
name => $name,
id => $name,
aria_label => $aria_label,
size => 1,
(
$self->{placeholder}
? main::tag(
'option',
disabled => undef,
selected => undef,
value => '',
class => 'tex2jax_ignore',
if ($self->{useHTMLSelect}) {
$menu = main::tag(
'div',
class => 'd-inline text-nowrap',
data_feedback_insert_element => $name,
data_feedback_insert_method => 'append_content',
main::tag(
'select',
class => 'pg-select',
name => $name,
id => $name,
aria_label => $aria_label,
size => 1,
(
$self->{placeholder}
)
: ''
)
. join(
'',
map {
main::tag(
'option', $self->{values}[$_] eq $answer_value ? (selected => undef) : (),
value => $self->{values}[$_],
class => 'tex2jax_ignore',
$self->quoteHTML($self->{labels}[$_], 1)
? main::tag(
'option',
disabled => undef,
selected => undef,
value => '',
class => 'tex2jax_ignore',
$self->{placeholder}
)
} (0 .. $#list)
: ''
)
. join(
'',
map {
main::tag(
'option', $self->{values}[$_] eq $answer_value ? (selected => undef) : (),
value => $self->{values}[$_],
class => 'tex2jax_ignore',
$self->quoteHTML($self->{labels}[$_], 1)
)
} (0 .. $#list)
)
)
);
} else {
main::ADD_CSS_FILE('js/DropDown/dropdown.css');
main::ADD_JS_FILE('js/DropDown/dropdown.js', 0, { defer => undef });

$menu = main::tag(
'div',
class => 'dropdown-center pg-dropdown d-inline',
data_feedback_insert_element => $name,
data_feedback_insert_method => 'append_content',
join(
'',
main::tag('input', type => 'hidden', name => $name, value => $answer_value),
main::tag('span', class => 'visually-hidden', $aria_label),
main::tag(
'button',
class => 'btn dropdown-toggle text-nowrap ',
type => 'button',
data_bs_toggle => 'dropdown',
aria_expanded => 'false',
$answer_value ne '' ? $self->answerLabel($answer_value) : defined $self->{placeholder}
&& $self->{placeholder} ne '' ? $self->{placeholder} : '?'
),
main::tag(
'ul',
class => 'dropdown-menu',
join(
'',
map {
main::tag(
'li',
main::tag(
'button',
class => 'dropdown-item'
. ($self->{values}[$_] eq $answer_value ? ' active' : ''),
type => 'button',
data_value => $self->{values}[$_],
data_content => $self->{labels}[$_],
$self->{labels}[$_]
)
)
} (0 .. $#list)
)
)
)
);
)
);
}
} elsif ($main::displayMode eq 'PTX') {
if ($self->{showInStatic}) {
$menu = main::tag(
Expand Down

0 comments on commit 6a409c6

Please sign in to comment.