Skip to content

Commit 5002bb7

Browse files
johanibjohanib
committed
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.
1 parent 9212ec1 commit 5002bb7

13 files changed

+134
-694
lines changed

‎theme/.terserrc.json‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"compress": {
3+
"passes": 2,
4+
"inline": 1,
5+
"dead_code": true,
6+
"unused": false,
7+
"reduce_funcs": false,
8+
"reduce_vars": false
9+
},
10+
"mangle": true
11+
}

‎theme/base/javascripts/consent/addA11ySupport.js‎

Lines changed: 0 additions & 20 deletions
This file was deleted.

‎theme/base/javascripts/consent/handleInvisibleTooltips.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import {consentHideInvisibleTooltips, consentShowInvisibleTooltips} from '../handlers';
1+
import {hideInvisibleTooltips} from './hideInvisibleTooltips';
2+
import {showInvisibleTooltips} from './showInvisibleTooltips';
23
import {
34
firstInvisibleAttributeSelector,
45
invisibleTooltipLabelsSelector,
@@ -18,12 +19,12 @@ export const handleInvisibleTooltips = () => {
1819
changeAriaPressed(showMoreCheckbox);
1920

2021
if (isHidden) {
21-
consentShowInvisibleTooltips();
22+
showInvisibleTooltips();
2223
firstInvisibleAttribute.setAttribute('tabindex', "-1");
2324
firstInvisibleAttribute.focus({preventScroll: true});
2425
return;
2526
}
2627

27-
consentHideInvisibleTooltips();
28+
hideInvisibleTooltips();
2829
document.querySelector(openToggleLabelSelector).focus({preventScroll: true});
2930
};

‎theme/base/javascripts/consent/keyboardBehaviour.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {consentEnterHandler} from '../handlers';
1+
import {enterHandler} from './enterHandler';
22
import {fireClickEvent} from '../utility/fireClickEvent';
33
import {getData} from '../utility/getData';
44

@@ -13,7 +13,7 @@ import {getData} from '../utility/getData';
1313
*
1414
* 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.
1515
*/
16-
export const keyboardBehaviour = () => {
16+
export const consentKeyboardBehaviour = () => {
1717
const ENTER = 13;
1818
const SPACE = 32;
1919
const TAB = 9;
@@ -22,7 +22,7 @@ export const keyboardBehaviour = () => {
2222
const classList = e.target.classList;
2323
switch (e.keyCode) {
2424
case ENTER:
25-
consentEnterHandler(e.target);
25+
enterHandler(e.target);
2626
break;
2727
case SPACE:
2828
classList.forEach(className => {

‎theme/base/javascripts/handlers.js‎

Lines changed: 36 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,26 @@
1-
import {enterHandler} from './consent/enterHandler';
2-
import {keyboardBehaviour} from './consent/keyboardBehaviour';
1+
import {consentKeyboardBehaviour} from './consent/keyboardBehaviour';
32
import {keyboardBehaviour as wayfKeyboardBehaviour} from './wayf/keyboardBehaviour';
43
import {animateInteractiveSections} from './utility/animateInteractiveSections';
5-
import {addAccessibilitySupport} from './consent/addA11ySupport';
6-
import {switchConsentSection} from './consent/switchConsentSection';
74
import {addClickHandlerOnce} from './utility/addClickHandlerOnce';
85
import {
96
backButtonSelector,
10-
firstRequestFieldId,
117
nokButtonSelector,
128
tooltipsAndModalLabels,
9+
contentSectionSelector,
10+
nokSectionSelector,
11+
consentAnimatedElementSelectors,
12+
nokCheckboxId,
13+
openToggleLabelSelector,
1314
} from './selectors';
1415
import {handlePreviousSelectionVisible} from './wayf/handlePreviousSelectionVisible';
1516
import {mouseBehaviour} from './wayf/mouseBehaviour';
1617
import {searchBehaviour} from './wayf/searchBehaviour';
17-
import {submitForm} from './wayf/submitForm';
18-
import {cancelButtonClickHandlerCreator} from './wayf/noAccess/cancelButtonClickHandler';
19-
import {toggleFormFieldsAndButton} from './wayf/noAccess/toggleFormFieldsAndButton';
2018
import {addTooltipAndModalAriaHandlers} from './consent/addTooltipAndModalAriaHandlers';
2119
import {hideInvisibleTooltips} from './consent/hideInvisibleTooltips';
22-
import {showInvisibleTooltips} from './consent/showInvisibleTooltips';
2320
import {handleInvisibleTooltips} from './consent/handleInvisibleTooltips';
2421
import {toggleTooltipPressedStates} from './consent/toggleTooltipPressedStates';
2522
import {handleNokFocus} from './consent/handleNokFocus';
23+
import {toggleVisibility} from './utility/toggleVisibility';
2624

2725
/***
2826
* CONSENT HANDLERS
@@ -32,24 +30,44 @@ export const consentCallbackAfterLoad = () => {
3230
addAccessibilitySupport();
3331
};
3432
export const consentHandleNokFocus = handleNokFocus;
35-
export const consentEnterHandler = (target) => enterHandler(target);
36-
export const consentKeyboardBehaviourHandler = keyboardBehaviour;
3733
export const consentAnimateInteractiveElements = (selector) => {
3834
animateInteractiveSections(selector);
3935
addTooltipAndModalAriaHandlers(tooltipsAndModalLabels);
4036
};
41-
export const consentHideInvisibleTooltips = hideInvisibleTooltips;
42-
export const consentShowInvisibleTooltips = showInvisibleTooltips;
43-
export const consentHandleInvisibleTooltips = handleInvisibleTooltips;
44-
export const consentToggleTooltipPressedState = toggleTooltipPressedStates;
37+
38+
export const addAccessibilitySupport = () => {
39+
consentKeyboardBehaviour();
40+
consentAnimateInteractiveElements(consentAnimatedElementSelectors);
41+
hideInvisibleTooltips();
42+
addClickHandlerOnce(openToggleLabelSelector, handleInvisibleTooltips);
43+
toggleTooltipPressedStates();
44+
addClickHandlerOnce(nokButtonSelector, consentHandleNokFocus);
45+
const el = document.getElementById(nokCheckboxId);
46+
if (el && el.classList) {
47+
el.classList.add('js');
48+
}
49+
};
50+
4551
export const consentNokHandler = (e) => {
46-
switchConsentSection(e);
52+
if (!!e) {
53+
e.preventDefault();
54+
}
55+
const nokSection = document.querySelector(nokSectionSelector);
56+
const contentSection = document.querySelector(contentSectionSelector);
57+
toggleVisibility(nokSection);
58+
toggleVisibility(contentSection);
4759
consentHandleNokFocus();
4860
addClickHandlerOnce(backButtonSelector, backButtonHandler());
4961
};
5062
export const backButtonHandler = () => {
5163
return (e) => {
52-
switchConsentSection(e);
64+
if (!!e) {
65+
e.preventDefault();
66+
}
67+
const nokSection = document.querySelector(nokSectionSelector);
68+
const contentSection = document.querySelector(contentSectionSelector);
69+
toggleVisibility(nokSection);
70+
toggleVisibility(contentSection);
5371
consentHandleNokFocus();
5472
};
5573
};
@@ -65,11 +83,4 @@ export const wayfCallbackAfterLoad = () => {
6583
mouseBehaviour();
6684
searchBehaviour();
6785
};
68-
export const idpSubmitHandler = (e) => {
69-
submitForm(e);
70-
};
71-
export const cancelButtonClickHandler = (parentSection, noAccess) => cancelButtonClickHandlerCreator(parentSection, noAccess);
72-
export const requestButtonHandler = () => {
73-
toggleFormFieldsAndButton();
74-
document.getElementById(firstRequestFieldId).focus();
75-
};
86+

‎theme/base/javascripts/wayf/handleEnter.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import {
1010
idpDisabledClass, idpFormClass, idpLogoClass, idpSubmitClass, idpTitleClass, searchFieldClass,
1111
toggleButtonClass
1212
} from '../selectors';
13-
import {idpSubmitHandler} from '../handlers';
13+
import {submitForm} from './submitForm';
1414

1515
/**
1616
* Behaviour expected to happen after a user presses the enter button.
@@ -41,7 +41,7 @@ export const handleEnter = (e) => {
4141
case idpSubmitClass:
4242
case idpFormClass:
4343
case idpLogoClass:
44-
idpSubmitHandler(e); break;
44+
submitForm(e); break;
4545
case searchFieldClass:
4646
selectFirstIdPAndSubmitForm(); break;
4747
case defaultIdpClass:

‎theme/base/javascripts/wayf/handlePreviousSelectionVisible.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import {
99
selectedIdpsListSelector
1010
} from '../selectors';
1111
import {addClickHandlerOnce} from '../utility/addClickHandlerOnce';
12-
import {idpSubmitHandler} from '../handlers';
12+
import {submitForm} from './submitForm';
1313
import {matchPreviouslySelectedWithCookie} from './matchPreviouslySelectedWithCookie';
1414

1515
/**
@@ -42,5 +42,5 @@ const mouseHandlersHiddenIdps = () => {
4242
attachDeleteHandlers();
4343

4444
// Attach event listener to previous selection idps-list
45-
addClickHandlerOnce(selectedIdpsListSelector, idpSubmitHandler);
45+
addClickHandlerOnce(selectedIdpsListSelector, submitForm);
4646
};

‎theme/base/javascripts/wayf/mouseBehaviour.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import {
1010
selectedIdpsFirstIdp,
1111
toggleButtonSelector,
1212
} from '../selectors';
13-
import {idpSubmitHandler} from '../handlers';
13+
import {submitForm} from './submitForm';
1414
import {checkHover} from './idpFocus/checkHover';
1515
import {isVisibleElement} from '../utility/isVisibleElement';
1616

@@ -24,7 +24,7 @@ export const mouseBehaviour = () => {
2424
if (!hasClickHandler) {
2525
list.addEventListener('click', (e) => {
2626
e.preventDefault();
27-
idpSubmitHandler(e);
27+
submitForm(e);
2828
});
2929
list.setAttribute('data-clickhandled', 'true');
3030
}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import {hideErrorMessage} from './hideErrorMessage';
22
import {cancelButtonSelector} from '../../selectors';
33
import {addClickHandlerOnce} from '../../utility/addClickHandlerOnce';
4-
import {cancelButtonClickHandler} from '../../handlers';
4+
import {cancelButtonClickHandlerCreator} from './cancelButtonClickHandler';
55

66
/**
77
* Ensure clicking the Cancel button shows the right behaviour:
@@ -13,6 +13,6 @@ import {cancelButtonClickHandler} from '../../handlers';
1313
* @param noAccess
1414
*/
1515
export const attachClickHandlerToCancelButton = (parentSection, noAccess) => {
16-
addClickHandlerOnce(cancelButtonSelector, cancelButtonClickHandler(parentSection, noAccess));
16+
addClickHandlerOnce(cancelButtonSelector, cancelButtonClickHandlerCreator(parentSection, noAccess));
1717
hideErrorMessage(noAccess);
1818
};

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

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,14 @@
11
import {attachClickHandlerToForm} from './attachClickHandlerToForm';
22
import {showFormSelector} from '../../selectors';
33
import {addClickHandlerOnce} from '../../utility/addClickHandlerOnce';
4-
import {requestButtonHandler} from '../../handlers';
4+
import {toggleFormFieldsAndButton} from './toggleFormFieldsAndButton';
5+
import {firstRequestFieldId} from '../../selectors';
6+
7+
const requestButtonHandler = () => {
8+
toggleFormFieldsAndButton();
9+
const el = document.getElementById(firstRequestFieldId);
10+
if (el && el.focus) el.focus();
11+
};
512

613
/**
714
* Ensure clicking the request button shows the right behaviour:

0 commit comments

Comments
 (0)