collapse.js
43 lines
| 1.8 KiB
| application/javascript
|
JavascriptLexer
r338 | /*global gettext*/ | |||
|
r367 | 'use strict'; | ||
{ | ||||
r338 | window.addEventListener('load', function() { | |||
// Add anchor tag for Show/Hide link | ||||
|
r367 | const fieldsets = document.querySelectorAll('fieldset.collapse'); | ||
for (const [i, elem] of fieldsets.entries()) { | ||||
r338 | // Don't hide if fields in this fieldset have errors | |||
|
r367 | if (elem.querySelectorAll('div.errors, ul.errorlist').length === 0) { | ||
r338 | elem.classList.add('collapsed'); | |||
|
r367 | const h2 = elem.querySelector('h2'); | ||
const link = document.createElement('a'); | ||||
link.id = 'fieldsetcollapser' + i; | ||||
link.className = 'collapse-toggle'; | ||||
link.href = '#'; | ||||
r338 | link.textContent = gettext('Show'); | |||
h2.appendChild(document.createTextNode(' (')); | ||||
h2.appendChild(link); | ||||
h2.appendChild(document.createTextNode(')')); | ||||
} | ||||
} | ||||
|
r367 | // Add toggle to hide/show anchor tag | ||
const toggleFunc = function(ev) { | ||||
if (ev.target.matches('.collapse-toggle')) { | ||||
ev.preventDefault(); | ||||
ev.stopPropagation(); | ||||
const fieldset = ev.target.closest('fieldset'); | ||||
if (fieldset.classList.contains('collapsed')) { | ||||
// Show | ||||
ev.target.textContent = gettext('Hide'); | ||||
fieldset.classList.remove('collapsed'); | ||||
} else { | ||||
// Hide | ||||
ev.target.textContent = gettext('Show'); | ||||
fieldset.classList.add('collapsed'); | ||||
} | ||||
r338 | } | |||
}; | ||||
|
r367 | document.querySelectorAll('fieldset.module').forEach(function(el) { | ||
el.addEventListener('click', toggleFunc); | ||||
}); | ||||
r338 | }); | |||
|
r367 | } | ||