Fix/rework building of javascript

Prior to this change, in the previous commit, the `tinyify` package was
upgraded. This package minified the js and css.
However, after the update, the javascript was no longer functioning.
This manifested itself by errors in the browser console.

This had two root causes:
 * The javascript in EB used circular dependencies.
 * Even after fixing that, the tinyify package simply broke the
   javascript by removing functions that could not be removed.

This change reworks the javascript to remove the circular dependencies.
It also replaces the unmaintained tinyify plugin by using the `terser` directly.

Author: johanib

theme/.terserrc.json

@@ -0,0 +1,11 @@
+{
+  "compress": {
+    "passes": 2,
+    "inline": 1,
+    "dead_code": true,
+    "unused": false,
+    "reduce_funcs": false,
+    "reduce_vars": false
+  },
+  "mangle": true
+}

theme/base/javascripts/consent/addA11ySupport.js

@@ -1,20 +1,2 @@
-import {
-  consentAnimateInteractiveElements,
-  consentHandleInvisibleTooltips,
-  consentHandleNokFocus,
-  consentHideInvisibleTooltips,
-  consentKeyboardBehaviourHandler,
-  consentToggleTooltipPressedState,
-} from '../handlers';
-import {consentAnimatedElementSelectors, nokButtonSelector, nokCheckboxId, openToggleLabelSelector} from '../selectors';
-import {addClickHandlerOnce} from '../utility/addClickHandlerOnce';
+export { addAccessibilitySupport } from '../handlers';
 
-export const addAccessibilitySupport = () => {
-  consentKeyboardBehaviourHandler();
-  consentAnimateInteractiveElements(consentAnimatedElementSelectors);
-  consentHideInvisibleTooltips();
-  addClickHandlerOnce(openToggleLabelSelector, consentHandleInvisibleTooltips);
-  consentToggleTooltipPressedState();
-  addClickHandlerOnce(nokButtonSelector, consentHandleNokFocus);
-  document.getElementById(nokCheckboxId).classList.add('js');
-};

theme/base/javascripts/consent/handleInvisibleTooltips.js

@@ -1,4 +1,5 @@
-import {consentHideInvisibleTooltips, consentShowInvisibleTooltips} from '../handlers';
+import {hideInvisibleTooltips} from './hideInvisibleTooltips';
+import {showInvisibleTooltips} from './showInvisibleTooltips';
 import {
   firstInvisibleAttributeSelector,
   invisibleTooltipLabelsSelector,
@@ -18,12 +19,12 @@ export const handleInvisibleTooltips = () => {
   changeAriaPressed(showMoreCheckbox);
 
   if (isHidden) {
-    consentShowInvisibleTooltips();
+    showInvisibleTooltips();
     firstInvisibleAttribute.setAttribute('tabindex', "-1");
     firstInvisibleAttribute.focus({preventScroll: true});
     return;
   }
 
-  consentHideInvisibleTooltips();
+  hideInvisibleTooltips();
   document.querySelector(openToggleLabelSelector).focus({preventScroll: true});
 };

theme/base/javascripts/consent/keyboardBehaviour.js

@@ -1,4 +1,4 @@
-import {consentEnterHandler} from '../handlers';
+import {enterHandler} from './enterHandler';
 import {fireClickEvent} from '../utility/fireClickEvent';
 import {getData} from '../utility/getData';
 
@@ -13,7 +13,7 @@ import {getData} from '../utility/getData';
  *
  * Note: many problems were solved with HTML & CSS.  JS should be a last resort, as not everyone has JS.  See https://kryogenix.org/code/browser/everyonehasjs.html as to why to avoid JS.
  */
-export const keyboardBehaviour = () => {
+export const consentKeyboardBehaviour = () => {
   const ENTER      = 13;
   const SPACE      = 32;
   const TAB        = 9;
@@ -22,7 +22,7 @@ export const keyboardBehaviour = () => {
     const classList = e.target.classList;
     switch (e.keyCode) {
       case ENTER:
-        consentEnterHandler(e.target);
+        enterHandler(e.target);
         break;
       case SPACE:
         classList.forEach(className => {

theme/base/javascripts/handlers.js

@@ -1,28 +1,26 @@
-import {enterHandler} from './consent/enterHandler';
-import {keyboardBehaviour} from './consent/keyboardBehaviour';
+import {consentKeyboardBehaviour} from './consent/keyboardBehaviour';
 import {keyboardBehaviour as wayfKeyboardBehaviour} from './wayf/keyboardBehaviour';
 import {animateInteractiveSections} from './utility/animateInteractiveSections';
-import {addAccessibilitySupport} from './consent/addA11ySupport';
-import {switchConsentSection} from './consent/switchConsentSection';
 import {addClickHandlerOnce} from './utility/addClickHandlerOnce';
 import {
   backButtonSelector,
-  firstRequestFieldId,
   nokButtonSelector,
   tooltipsAndModalLabels,
+  contentSectionSelector,
+  nokSectionSelector,
+  consentAnimatedElementSelectors,
+  nokCheckboxId,
+  openToggleLabelSelector,
 } from './selectors';
 import {handlePreviousSelectionVisible} from './wayf/handlePreviousSelectionVisible';
 import {mouseBehaviour} from './wayf/mouseBehaviour';
 import {searchBehaviour} from './wayf/searchBehaviour';
-import {submitForm} from './wayf/submitForm';
-import {cancelButtonClickHandlerCreator} from './wayf/noAccess/cancelButtonClickHandler';
-import {toggleFormFieldsAndButton} from './wayf/noAccess/toggleFormFieldsAndButton';
 import {addTooltipAndModalAriaHandlers} from './consent/addTooltipAndModalAriaHandlers';
 import {hideInvisibleTooltips} from './consent/hideInvisibleTooltips';
-import {showInvisibleTooltips} from './consent/showInvisibleTooltips';
 import {handleInvisibleTooltips} from './consent/handleInvisibleTooltips';
 import {toggleTooltipPressedStates} from './consent/toggleTooltipPressedStates';
 import {handleNokFocus} from './consent/handleNokFocus';
+import {toggleVisibility} from './utility/toggleVisibility';
 
 /***
  * CONSENT HANDLERS
@@ -32,24 +30,44 @@ export const consentCallbackAfterLoad = () => {
   addAccessibilitySupport();
 };
 export const consentHandleNokFocus = handleNokFocus;
-export const consentEnterHandler = (target) => enterHandler(target);
-export const consentKeyboardBehaviourHandler = keyboardBehaviour;
 export const consentAnimateInteractiveElements = (selector) => {
   animateInteractiveSections(selector);
   addTooltipAndModalAriaHandlers(tooltipsAndModalLabels);
 };
-export const consentHideInvisibleTooltips = hideInvisibleTooltips;
-export const consentShowInvisibleTooltips = showInvisibleTooltips;
-export const consentHandleInvisibleTooltips = handleInvisibleTooltips;
-export const consentToggleTooltipPressedState = toggleTooltipPressedStates;
+
+export const addAccessibilitySupport = () => {
+  consentKeyboardBehaviour();
+  consentAnimateInteractiveElements(consentAnimatedElementSelectors);
+  hideInvisibleTooltips();
+  addClickHandlerOnce(openToggleLabelSelector, handleInvisibleTooltips);
+  toggleTooltipPressedStates();
+  addClickHandlerOnce(nokButtonSelector, consentHandleNokFocus);
+  const el = document.getElementById(nokCheckboxId);
+  if (el && el.classList) {
+    el.classList.add('js');
+  }
+};
+
 export const consentNokHandler = (e) => {
-  switchConsentSection(e);
+  if (!!e) {
+    e.preventDefault();
+  }
+  const nokSection = document.querySelector(nokSectionSelector);
+  const contentSection = document.querySelector(contentSectionSelector);
+  toggleVisibility(nokSection);
+  toggleVisibility(contentSection);
   consentHandleNokFocus();
   addClickHandlerOnce(backButtonSelector, backButtonHandler());
 };
 export const backButtonHandler = () => {
   return (e) => {
-    switchConsentSection(e);
+    if (!!e) {
+      e.preventDefault();
+    }
+    const nokSection = document.querySelector(nokSectionSelector);
+    const contentSection = document.querySelector(contentSectionSelector);
+    toggleVisibility(nokSection);
+    toggleVisibility(contentSection);
     consentHandleNokFocus();
   };
 };
@@ -65,11 +83,4 @@ export const wayfCallbackAfterLoad = () => {
   mouseBehaviour();
   searchBehaviour();
 };
-export const idpSubmitHandler = (e) => {
-  submitForm(e);
-};
-export const cancelButtonClickHandler = (parentSection, noAccess) => cancelButtonClickHandlerCreator(parentSection, noAccess);
-export const requestButtonHandler = () => {
-  toggleFormFieldsAndButton();
-  document.getElementById(firstRequestFieldId).focus();
-};
+

theme/base/javascripts/wayf/handleEnter.js

@@ -10,7 +10,7 @@ import {
   idpDisabledClass, idpFormClass, idpLogoClass, idpSubmitClass, idpTitleClass, searchFieldClass,
   toggleButtonClass
 } from '../selectors';
-import {idpSubmitHandler} from '../handlers';
+import {submitForm} from './submitForm';
 
 /**
  * Behaviour expected to happen after a user presses the enter button.
@@ -41,7 +41,7 @@ export const handleEnter = (e) => {
       case idpSubmitClass:
       case idpFormClass:
       case idpLogoClass:
-        idpSubmitHandler(e); break;
+        submitForm(e); break;
       case searchFieldClass:
         selectFirstIdPAndSubmitForm(); break;
       case defaultIdpClass:

theme/base/javascripts/wayf/handlePreviousSelectionVisible.js

@@ -9,7 +9,7 @@ import {
   selectedIdpsListSelector
 } from '../selectors';
 import {addClickHandlerOnce} from '../utility/addClickHandlerOnce';
-import {idpSubmitHandler} from '../handlers';
+import {submitForm} from './submitForm';
 import {matchPreviouslySelectedWithCookie} from './matchPreviouslySelectedWithCookie';
 
 /**
@@ -42,5 +42,5 @@ const mouseHandlersHiddenIdps = () => {
   attachDeleteHandlers();
 
   // Attach event listener to previous selection idps-list
-  addClickHandlerOnce(selectedIdpsListSelector, idpSubmitHandler);
+  addClickHandlerOnce(selectedIdpsListSelector, submitForm);
 };

theme/base/javascripts/wayf/mouseBehaviour.js

@@ -10,7 +10,7 @@ import {
   selectedIdpsFirstIdp,
   toggleButtonSelector,
 } from '../selectors';
-import {idpSubmitHandler} from '../handlers';
+import {submitForm} from './submitForm';
 import {checkHover} from './idpFocus/checkHover';
 import {isVisibleElement} from '../utility/isVisibleElement';
 
@@ -24,7 +24,7 @@ export const mouseBehaviour = () => {
     if (!hasClickHandler) {
       list.addEventListener('click', (e) => {
         e.preventDefault();
-        idpSubmitHandler(e);
+        submitForm(e);
       });
       list.setAttribute('data-clickhandled', 'true');
     }

theme/base/javascripts/wayf/noAccess/attachClickHandlerToCancelButton.js

@@ -1,7 +1,7 @@
 import {hideErrorMessage} from './hideErrorMessage';
 import {cancelButtonSelector} from '../../selectors';
 import {addClickHandlerOnce} from '../../utility/addClickHandlerOnce';
-import {cancelButtonClickHandler} from '../../handlers';
+import {cancelButtonClickHandlerCreator} from './cancelButtonClickHandler';
 
 /**
  * Ensure clicking the Cancel button shows the right behaviour:
@@ -13,6 +13,6 @@ import {cancelButtonClickHandler} from '../../handlers';
  * @param noAccess
  */
 export const attachClickHandlerToCancelButton = (parentSection, noAccess) => {
-  addClickHandlerOnce(cancelButtonSelector, cancelButtonClickHandler(parentSection, noAccess));
+  addClickHandlerOnce(cancelButtonSelector, cancelButtonClickHandlerCreator(parentSection, noAccess));
   hideErrorMessage(noAccess);
 };

theme/base/javascripts/wayf/noAccess/attachClickHandlerToRequestButton.js

@@ -1,7 +1,14 @@
 import {attachClickHandlerToForm} from './attachClickHandlerToForm';
 import {showFormSelector} from '../../selectors';
 import {addClickHandlerOnce} from '../../utility/addClickHandlerOnce';
-import {requestButtonHandler} from '../../handlers';
+import {toggleFormFieldsAndButton} from './toggleFormFieldsAndButton';
+import {firstRequestFieldId} from '../../selectors';
+
+const requestButtonHandler = () => {
+  toggleFormFieldsAndButton();
+  const el = document.getElementById(firstRequestFieldId);
+  if (el && el.focus) el.focus();
+};
 
 /**
  * Ensure clicking the request button shows the right behaviour: