-
Notifications
You must be signed in to change notification settings - Fork 1
/
toggle.js
78 lines (66 loc) · 2.27 KB
/
toggle.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
/* global console */
(function () {
'use strict';
/**
* @description Make sure the browser supports what we are about to do.
* @returns {Boolean}
*/
function isFeatureSupported() {
return !!(document.querySelectorAll && document.body.classList);
}
/**
* @description Finds correct error list element.
* @param {Object.<HTMLElement>} targetElement
* @returns {Object.<HTMLElement>} Error list element
*/
function getParentElement(targetElement) {
return targetElement.classList.contains('error') ? targetElement : getParentElement(targetElement.parentElement);
}
/**
* @description Gets error container element.
* @param {Object.<HTMLElement>} eventTarget Event target element
* @returns {Object.<HTMLElement>} Error container element
*/
function getErrorContainer(eventTarget) {
var parentElement = getParentElement(eventTarget);
if (parentElement) {
return parentElement.querySelector('.error-message');
}
}
/**
* @description Toggles error container visibility.
* @param {Object.<HTMLElement>} eventTarget
*/
function toggleView(eventTarget) {
var errorMessageContainer = getErrorContainer(eventTarget);
if (errorMessageContainer) {
errorMessageContainer.classList.toggle('hide');
}
}
/**
* @description Adds event listener to errors container element.
*/
function attachListener(errorsContainer) {
errorsContainer.addEventListener('click', function (event) {
event.stopPropagation();
if (event.target.className === 'error-header' || event.target.parentElement.className === 'error-header') {
toggleView(event.target);
}
}, false);
}
/**
* @description Initialises and checks for browser's feature support.
*/
function initialise() {
var errorsContainer;
if (isFeatureSupported()) {
errorsContainer = document.querySelector('.errors');
if (errorsContainer) {
attachListener(errorsContainer);
}
} else {
console.log('Please use a modern browser to view this page!');
}
}
initialise();
}());