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

Make select/unselect real buttons #2857

Merged
merged 1 commit into from
Apr 26, 2023
Merged

Make select/unselect real buttons #2857

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion www/assets/css/pagestyle2.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -943,7 +943,8 @@ h4.experiments_list_hed-recs {
background: url(/assets/images/icon-external.svg) right center no-repeat;
}

.experiment_description_text span {
.experiment_description_text span,
.experiment_description_text .selectbutton {
font-size: 0.7em;
padding: 0.2em 0.4em;
border: 1px solid #666;
Expand Down
34 changes: 18 additions & 16 deletions www/experiments.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,7 @@
}
.selectall, .unselectall {
cursor: pointer;
margin-right: 0.4em;
}
</style>
<?php if (!$testComplete) {
Expand Down Expand Up @@ -280,7 +281,8 @@ function observationHTML($parts)
$enable_select_all = count($exp->expval) > 7;
$out .= '<details class="experiment_assets ' . (($hideassets === true || $exp->hideassets === true) ? "experiment_assets-hide" : "" ) . '"><summary>Assets included in experiment:</summary>';
if ($enable_select_all) {
$out .= '<span class="selectall">Select all</span> <span class="unselectall">Unselect all</span>';
$out .= '<button type="button" class="selectbutton selectall">Select all</button>';
$out .= '<button type="button" class="selectbutton unselectall">Unselect all</button>';
}

$out .= '<ol>';
Expand Down Expand Up @@ -600,7 +602,7 @@ function refreshExperimentFormState(){
});
}
var input = form.querySelector("textarea[name='" + keyval[0] + "']:not([data-hydrated='true']),input[type='text'][name='" + keyval[0] + "']:not([data-hydrated='true'])");

if( !input ){
let priors = form.querySelectorAll("textarea[name='" + keyval[0] + "'],input[type='text'][name='" + keyval[0] + "']");
if( priors.length ){
Expand All @@ -616,7 +618,7 @@ function refreshExperimentFormState(){
input.value = keyval[1];
input.setAttribute('data-hydrated', 'true');
}

}
});
updateCheckDeps();
Expand All @@ -633,11 +635,11 @@ function saveExperimentFormState(){
for (const pair of formData.entries()) {
formString += `${encodeURIComponent(pair[0])}=${encodeURIComponent(pair[1])}&`;
}


localStorage.setItem("experimentForm", formString);
}

form.addEventListener("change", saveExperimentFormState );
form.addEventListener("submit", sortExperimentOrder );
form.addEventListener("submit", saveExperimentFormState );
Expand Down Expand Up @@ -701,7 +703,7 @@ function saveExperimentOrder(){
localStorage.setItem("experimentOrder", JSON.stringify(orderObj));
}
}


var expsActive;
function updateCount(){
Expand All @@ -715,7 +717,7 @@ function updateCount(){
}
});


document.querySelector(".experiments_foot").classList.add("experiments_foot-stick");
let cta = document.querySelector(".exps-cta");
if( cta ){
Expand All @@ -727,7 +729,7 @@ function updateCount(){
let expsActiveLinksContain = document.createElement('div');
expsActiveLinksContain.innerHTML = '<p class="experiments_jump">Experiments apply in this order: <i>(Order matters! Some experiments will override others.)</i></p>';
let expsActiveLinks = document.createElement('ol');

expsActive.forEach(exp => {
let newLi = document.createElement('li');
newLi.setAttribute("data-input-name", exp.getAttribute('name'));
Expand Down Expand Up @@ -764,7 +766,7 @@ function updateCount(){
if( cta ){
cta.innerText = "Select one or more experiments...";
}

document.querySelector("[type=submit]").setAttribute("aria-disabled", true);

}
Expand Down Expand Up @@ -794,7 +796,7 @@ function updateTestRunTotal(){
btn.className = "experiment_pair_value_addbtn";
btn.innerText = "Add more";
pair.after(btn);
btn.addEventListener("click", () => {
btn.addEventListener("click", () => {
let newpair = pair.cloneNode(true);
pair.after(newpair);
});
Expand All @@ -804,26 +806,26 @@ function updateTestRunTotal(){
overflowSections.forEach(section => {
let btn = document.createElement('button');
btn.type = "button";
btn.innerText = "Expand All";
btn.innerText = "Expand All";
section.append(btn);
btn.addEventListener("click", () => {
btn.addEventListener("click", () => {
btn.closest(".util_overflow_more").classList.add("util_overflow_more-expanded");
});
});

// select all
document.querySelectorAll('.experiment_assets').forEach(details => {
details.addEventListener('click', e => {
if (e.target.className === 'selectall') {
if (e.target.classList.contains('selectall')) {
details.querySelectorAll('input[type=checkbox]').forEach(el => el.checked = true);
}
if (e.target.className === 'unselectall') {
if (e.target.classList.contains('unselectall')) {
details.querySelectorAll('input[type=checkbox]').forEach(el => el.checked = false);
}
});
});



</script>
</body>
Expand Down