Merge pull request #2289 from WPO-Foundation/checkall

 Experiments: Select/Unselect All when dealing with large-ish list of files

www/experiments.php

@@ -55,6 +55,9 @@
  td.separation {
  height: 2em;
  }
+ .selectall, .unselectall {
+ cursor: pointer;
+ }
  </style>
  <?php if (!$testComplete) {
  $autoRefresh = true;
@@ -116,7 +119,7 @@
  <p>WebPageTest helps identify opportunities to improve a site's experience. Select one or more No-Code Experiments below and submit to test their impact.</p>
  </div>
 
- 
+
 
  </div>
 
@@ -284,7 +287,12 @@ function observationHTML($parts)
 
  if ($exp->expvar && $exp->expval) {
  if (count($exp->expval)) {
+ $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 .= '<ol>';
 
  foreach ($exp->expval as $in => $val) {
@@ -540,7 +548,7 @@ function UpdateStatus(){
 
 
 
- 
+
  </script>
  <?php
  }
@@ -563,7 +571,7 @@ function refreshExperimentFormState(){
  var keyval = pair.split("=");
  if( keyval[0] !== 'runs' ){
  var input = form.find("[name='" + keyval[0] + "']");
- 
+
  if( input.length ){
  if( input.filter("[type=checkbox],[type=radio]").length ){
  input = input.filter( "[value='"+ keyval[1] +"']" ).attr("checked", true);
@@ -573,7 +581,7 @@ function refreshExperimentFormState(){
  }
  }
  });
- 
+
  }
  }
 
@@ -632,7 +640,7 @@ function updateTestRunTotal(){
 
  updateTestRunTotal();
 
- 
+
 
 
  // try and restore state at load
@@ -641,14 +649,26 @@ function updateTestRunTotal(){
  $("form.experiments_grades").on("change input submit", updateCount );
 
  // add add buttons
- $(".experiment_pair_value-add").after("<button type='button' class='experiment_pair_value_addbtn'>Add more</button>").next().on("click", function(){ $(this).before($(this).prev().clone());}); 
+ $(".experiment_pair_value-add").after("<button type='button' class='experiment_pair_value_addbtn'>Add more</button>").next().on("click", function(){ $(this).before($(this).prev().clone());});
 
  $('<button type="button">Expand All</button>')
  .on('click', function(){
  $(this).closest(".util_overflow_more").addClass("util_overflow_more-expanded");
  })
  .appendTo(".util_overflow_more");
 
+ // select all
+ document.querySelectorAll('.experiment_assets').forEach(details => {
+ details.addEventListener('click', e => {
+ if (e.target.className === 'selectall') {
+ details.querySelectorAll('input[type=checkbox]').forEach(el => el.checked = true);
+ }
+ if (e.target.className === 'unselectall') {
+ details.querySelectorAll('input[type=checkbox]').forEach(el => el.checked = false);
+ }
+ });
+ });
+
 </script>
  </body>
 </html>