handle checkbox (multi-selection) grid CSS and logic (#442)

episphere · Jun 7, 2024 · ec22434 · ec22434
1 parent 272061e
commit ec22434
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 4 deletions.
diff --git a/ActiveLogic.css b/ActiveLogic.css
@@ -204,6 +204,7 @@ for bootstrap -xs
   font-size: clamp(12px, 1.5vw, 16px);
 }
 
+.quest-grid.table-layout input[type="checkbox"],
 .quest-grid.table-layout input[type="radio"] {
   position: absolute;
   opacity: 0;
@@ -241,6 +242,7 @@ for bootstrap -xs
   background-color: transparent;
 }
 
+.quest-grid.table-layout input[type="checkbox"]:checked + .custom-label::after,
 .quest-grid.table-layout input[type="radio"]:checked + .custom-label::after {
   content: '';
   display: block;
@@ -265,6 +267,7 @@ for bootstrap -xs
   box-shadow: 0 0 .75vw #b3b3b3;
 }
 
+.quest-grid.table-layout input[type="checkbox"]:checked + .custom-label,
 .quest-grid.table-layout input[type="radio"]:checked + .custom-label {
   border: none;
   background-color: transparent;
@@ -345,6 +348,7 @@ for bootstrap -xs
     color: #333;
   }
 
+  .quest-grid.table-layout input[type="checkbox"]:checked + .custom-label::after,
   .quest-grid.table-layout input[type="radio"]:checked + .custom-label::after {
     display: none;
   }
@@ -353,6 +357,7 @@ for bootstrap -xs
     display: none;
   }
 
+  .quest-grid.table-layout td input[type="checkbox"]:checked + .custom-label,
   .quest-grid.table-layout td input[type="radio"]:checked + .custom-label {
     position: absolute;
     top: 0;

diff --git a/Default.css b/Default.css
@@ -138,6 +138,7 @@ for bootstrap -xs
   font-size: clamp(12px, 1.5vw, 16px);
 }
 
+.quest-grid.table-layout input[type="checkbox"],
 .quest-grid.table-layout input[type="radio"] {
   position: absolute;
   opacity: 0;
@@ -175,6 +176,7 @@ for bootstrap -xs
   background-color: transparent;
 }
 
+.quest-grid.table-layout input[type="checkbox"]:checked + .custom-label::after,
 .quest-grid.table-layout input[type="radio"]:checked + .custom-label::after {
   content: '';
   display: block;
@@ -199,6 +201,7 @@ for bootstrap -xs
   box-shadow: 0 0 .75vw #b3b3b3;
 }
 
+.quest-grid.table-layout input[type="checkbox"]:checked + .custom-label,
 .quest-grid.table-layout input[type="radio"]:checked + .custom-label {
   border: none;
   background-color: transparent;
@@ -279,6 +282,7 @@ for bootstrap -xs
     color: #333;
   }
 
+  .quest-grid.table-layout input[type="checkbox"]:checked + .custom-label::after,
   .quest-grid.table-layout input[type="radio"]:checked + .custom-label::after {
     display: none;
   }
@@ -287,6 +291,7 @@ for bootstrap -xs
     display: none;
   }
 
+  .quest-grid.table-layout td input[type="checkbox"]:checked + .custom-label,
   .quest-grid.table-layout td input[type="radio"]:checked + .custom-label {
     position: absolute;
     top: 0;

diff --git a/questionnaire.js b/questionnaire.js
@@ -1205,8 +1205,8 @@ export function displayQuestion(nextElement) {
 
   questionQueue.ptree();
 
-  // manage the question-specific listeners
-  refreshListeners(nextElement);
+  // manage the question-specific listeners in a live environment (skip in the renderer)
+  if (moduleParams.renderObj?.activate) refreshListeners(nextElement);
   return nextElement;
 }
 
@@ -1467,7 +1467,7 @@ export function gridHasAllAnswers(questionFieldset) {
     if (current.style.display=='none') return acc // skip hidden rows
 
     let name = current.dataset.questionId
-    let currentResponses = Array.from(current.parentElement.querySelectorAll(`input[type="radio"][name="${name}"]`))
+    let currentResponses = Array.from(current.parentElement.querySelectorAll(`input[type="radio"][name="${name}"], input[type="checkbox"][name="${name}"]`))
     return acc && currentResponses.some(checked)
   },true)
 }
@@ -1479,7 +1479,7 @@ export function numberOfUnansweredGridQuestions(questionFieldset) {
     if (current.style.display=='none') return acc // skip hidden rows
 
     let name = current.dataset.questionId
-    let currentResponses = Array.from(current.querySelectorAll(`input[type="radio"][name="${name}"]`));
+    let currentResponses = Array.from(current.querySelectorAll(`input[type="radio"][name="${name}"], input[type="checkbox"][name="${name}"]`));
     return currentResponses.some(checked)?acc:(acc+1)
   },0)
 }