[TDP Survey] IE11 compatibility (#6626)

* [TDP Survey] IE11 compatibility

* [TDP Survey] fix lint errors

Co-authored-by: Wyatt Pearsall <[email protected]>

cfgov/unprocessed/apps/teachers-digital-platform/css/pages/survey.less

@@ -34,6 +34,9 @@ ul.tdp-form {
     // This gets fine-tuned by indentQuestionsByNumber() but putting this in
     // CSS reduces the visual jump.
     text-indent: -20px;
+
+    // IE11
+    width: 100%;
 }
 
 .tdp-survey-layout {
@@ -238,6 +241,9 @@ ul.tdp-survey__choice-question {
 
         svg {
             display: none;
+
+            // IE11
+            width: 1.5em;
         }
     }
     &[data-checked="1"] {

cfgov/unprocessed/apps/teachers-digital-platform/js/modals.js

@@ -1,4 +1,5 @@
-require( './CustomEvent-polyfill' );
+const { closest } = require('@cfpb/cfpb-atomic-component/src/utilities/dom-traverse.js');
+const CustomEvt = require('customevent');
 
 /**
  * Holds the only reference to Modal instances, which are only created just
@@ -21,7 +22,7 @@ class Modal {
   open() {
     const el = this.getElement();
 
-    const event = new CustomEvent( 'modal:open:before', {
+    const event = new CustomEvt( 'modal:open:before', {
       bubbles: true,
       detail: { modal: this }
     } );
@@ -107,7 +108,7 @@ function init() {
 function handleClicks() {
   document.addEventListener( 'click', event => {
     const t = event.target;
-    const opener = t.closest( '[data-open-modal]' );
+    const opener = closest( t, '[data-open-modal]' );
     if ( opener ) {
       event.preventDefault();
       event.stopPropagation();
@@ -166,12 +167,12 @@ function handleEscKey() {
  */
 function handleFocusChanges() {
   document.addEventListener( 'focusin', event => {
-    const trap = event.target.closest( '[data-trap]' );
+    const trap = closest( event.target, '[data-trap]' );
     if ( !trap ) {
       return;
     }
 
-    const content = trap.closest( '.o-modal_content' );
+    const content = closest( trap, '.o-modal_content' );
 
     if ( trap.dataset.trap === '1' ) {
       const first = content.querySelector( '.o-modal_close' );

cfgov/unprocessed/apps/teachers-digital-platform/js/survey/ChoiceField.js

@@ -1,3 +1,7 @@
+const { closest } = require( '@cfpb/cfpb-atomic-component/src/utilities/dom-traverse.js' );
+const objectValues = require( 'object.values' );
+const objectEntries = require( 'object.entries' );
+
 const $ = document.querySelector.bind( document );
 const $$ = document.querySelectorAll.bind( document );
 
@@ -28,7 +32,7 @@ class ChoiceField {
    * @returns {HTMLUListElement} The UL of the main set of answers
    */
   getUl() {
-    return this.inputs[0].closest( 'ul.ChoiceField' );
+    return closest( this.inputs[0], 'ul.ChoiceField' );
   }
 
   markError() {
@@ -62,15 +66,14 @@ ChoiceField.get = name => {
 /**
  * @returns {ChoiceField[]} unset choice fields
  */
-ChoiceField.findUnsets = () => Object
-  .values( ChoiceField.cache )
+ChoiceField.findUnsets = () => objectValues( ChoiceField.cache )
   .filter( cf => cf.value === null );
 
 /**
  * Remove all the error indicators
  */
 ChoiceField.removeErrors = () => {
-  errorIndicators.forEach( el => el.remove() );
+  errorIndicators.forEach( el => el.parentElement.removeChild( el ) );
   errorIndicators = [];
 };
 
@@ -97,7 +100,7 @@ ChoiceField.restoreFromSession = key => {
     }
   };
 
-  Object.entries( ChoiceField.cache ).forEach( checkCache );
+  objectEntries( ChoiceField.cache ).forEach( checkCache );
 
   if ( update ) {
     sessionStorage.setItem( key, JSON.stringify( store ) );

cfgov/unprocessed/apps/teachers-digital-platform/js/survey/ProgressBar.js

@@ -1,11 +1,11 @@
-require( '../CustomEvent-polyfill' );
+const CustomEvt = require( 'customevent' );
 
 class ProgressBar {
   constructor( totalNum, numDone ) {
     this.totalNum = totalNum;
     this.numDone = numDone;
 
-    const event = new CustomEvent( ProgressBar.UPDATE_EVT, {
+    const event = new CustomEvt( ProgressBar.UPDATE_EVT, {
       detail: { progressBar: this }
     } );
     document.dispatchEvent( event );
@@ -18,7 +18,7 @@ class ProgressBar {
   update( numDone ) {
     this.numDone = numDone;
 
-    const event = new CustomEvent( ProgressBar.UPDATE_EVT, {
+    const event = new CustomEvt( ProgressBar.UPDATE_EVT, {
       detail: { progressBar: this }
     } );
     document.dispatchEvent( event );

cfgov/unprocessed/apps/teachers-digital-platform/js/survey/result-page.js

@@ -1,3 +1,4 @@
+const { closest } = require( '@cfpb/cfpb-atomic-component/src/utilities/dom-traverse.js' );
 const Cookie = require( 'js-cookie' );
 const {
   ANSWERS_SESS_KEY,
@@ -142,7 +143,7 @@ function handleResetModal() {
   }
 
   modal.addEventListener( 'click', event => {
-    const button = event.target.closest( '[data-cancel]' );
+    const button = closest( event.target, '[data-cancel]' );
     if ( button ) {
       event.preventDefault();
       if ( button.dataset.cancel ) {

cfgov/unprocessed/apps/teachers-digital-platform/js/survey/survey-page.js

@@ -1,3 +1,5 @@
+const { closest } = require( '@cfpb/cfpb-atomic-component/src/utilities/dom-traverse.js' );
+const objectEntries = require( 'object.entries' );
 const Cookie = require( 'js-cookie' );
 const { ANSWERS_SESS_KEY, RESULT_COOKIE, SURVEY_COOKIE } = require( './config' );
 const modals = require( '../modals' );
@@ -64,7 +66,7 @@ function readSurveyData() {
    * @type {SurveyData}
    */
   const data = Object.create( null );
-  Object.entries( el.dataset ).forEach( ( [ k, v ] ) => {
+  objectEntries( el.dataset ).forEach( ( [ k, v ] ) => {
     try {
       data[k] = JSON.parse( v );
     } catch ( err ) {
@@ -139,7 +141,7 @@ function userTriedReentry() {
  */
 function allowStartOver() {
   document.addEventListener( 'click', event => {
-    const button = event.target.closest( '#modal-restart [data-cancel]' );
+    const button = closest( event.target, '#modal-restart [data-cancel]' );
     if ( button ) {
       event.preventDefault();
       if ( button.dataset.cancel ) {
@@ -167,8 +169,9 @@ function initProgressListener() {
     const outOfEls = $$( '.tdp-survey-progress-out-of' );
 
     const circle = $( '.tdp-survey-progress__circle' );
+    const svg = $( '.tdp-survey-progress__svg' );
     const texts = [].slice.call( $$( '.tdp-survey-progress__svg text' ) );
-    if ( !outOfEls.length || !circle || texts.length < 3 ) {
+    if ( !outOfEls.length || !circle || !svg || texts.length < 3 ) {
       return;
     }
 
@@ -184,7 +187,6 @@ function initProgressListener() {
     const dashOffset = 1 - ( pb.numDone / pb.totalNum );
     circle.setAttribute( 'stroke-dashoffset', dashOffset );
 
-    const svg = circle.parentElement;
     svg.setAttribute( 'aria-label', `${ perc } complete` );
     svg.style.opacity = '1';
   } );
@@ -220,8 +222,8 @@ function initErrorHandling() {
           scrollToEl( fieldset );
         } );
         const li = document.createElement( 'li' );
-        ul.append( li );
-        li.append( link );
+        ul.appendChild( li );
+        li.appendChild( link );
       } );
 
       notification.classList.add( 'm-notification__visible' );
@@ -261,7 +263,7 @@ function indentQuestionsByNumber() {
    */
   const strongs = [].slice.call( $$( '.tdp-question-legend > strong' ) );
   strongs.forEach( strong => {
-    const offset = Math.round(strong.getBoundingClientRect().width + 3);
+    const offset = Math.round( strong.getBoundingClientRect().width + 3 );
     const legend = strong.parentElement;
     const li = legend.parentElement;
     li.style.paddingLeft = `${ offset }px`;
@@ -274,7 +276,7 @@ function indentQuestionsByNumber() {
  *
  */
 function breakSeparatedAnswers() {
-  const convertToDivs = (text, charCode) => {
+  const convertToDivs = ( text, charCode ) => {
     // Convert text node into a set of div items
     const wrap = document.createElement( 'div' );
     wrap.className = 'tdp-lines';
@@ -291,7 +293,7 @@ function breakSeparatedAnswers() {
     ul.innerHTML = '<li>' +
       htmlItems.join( '</li><li>' ) + '</li>';
 
-    wrap.append( ul );
+    wrap.appendChild( ul );
     return wrap;
   };
 
@@ -303,7 +305,7 @@ function breakSeparatedAnswers() {
    */
   const labels = [].slice.call( $$( '.ChoiceField .a-label' ) );
   labels.forEach( label => {
-    if ( label.closest( 'li:first-child' ) === label.parentElement ) {
+    if ( closest( label, 'li:first-child' ) === label.parentElement ) {
       // Reset to "a"
       charCode = 97;
     }
@@ -317,7 +319,11 @@ function breakSeparatedAnswers() {
       const node = label.childNodes[i];
       if ( node.nodeType === Node.TEXT_NODE &&
         isSeparated( node.textContent ) ) {
-        node.replaceWith( convertToDivs( node.textContent, charCode ) );
+        node.parentNode.insertBefore(
+          convertToDivs( node.textContent, charCode ),
+          node
+        );
+        node.parentNode.removeChild( node );
       }
     }
 

cfgov/unprocessed/apps/teachers-digital-platform/package.json

@@ -18,7 +18,10 @@
   "dependencies": {
     "aos": "3.0.0-beta.6",
     "classlist-polyfill": "1.2.0",
+    "customevent": "1.0.1",
     "js-cookie": "2.2.1",
+    "object.entries": "1.1.4",
+    "object.values": "1.1.4",
     "smoothscroll-polyfill": "0.4.4",
     "stickyfilljs": "2.1.0"
   }