collapse.js 2.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. /*global gettext*/
  2. (function() {
  3. 'use strict';
  4. var closestElem = function(elem, tagName) {
  5. if (elem.nodeName === tagName.toUpperCase()) {
  6. return elem;
  7. }
  8. if (elem.parentNode.nodeName === 'BODY') {
  9. return null;
  10. }
  11. return elem.parentNode && closestElem(elem.parentNode, tagName);
  12. };
  13. window.addEventListener('load', function() {
  14. // Add anchor tag for Show/Hide link
  15. var fieldsets = document.querySelectorAll('fieldset.collapse');
  16. for (var i = 0; i < fieldsets.length; i++) {
  17. var elem = fieldsets[i];
  18. // Don't hide if fields in this fieldset have errors
  19. if (elem.querySelectorAll('div.errors').length === 0) {
  20. elem.classList.add('collapsed');
  21. var h2 = elem.querySelector('h2');
  22. var link = document.createElement('a');
  23. link.setAttribute('id', 'fieldsetcollapser' + i);
  24. link.setAttribute('class', 'collapse-toggle');
  25. link.setAttribute('href', '#');
  26. link.textContent = gettext('Show');
  27. h2.appendChild(document.createTextNode(' ('));
  28. h2.appendChild(link);
  29. h2.appendChild(document.createTextNode(')'));
  30. }
  31. }
  32. // Add toggle to hide/show anchor tag
  33. var toggleFunc = function(ev) {
  34. if (ev.target.matches('.collapse-toggle')) {
  35. ev.preventDefault();
  36. ev.stopPropagation();
  37. var fieldset = closestElem(ev.target, 'fieldset');
  38. if (fieldset.classList.contains('collapsed')) {
  39. // Show
  40. ev.target.textContent = gettext('Hide');
  41. fieldset.classList.remove('collapsed');
  42. } else {
  43. // Hide
  44. ev.target.textContent = gettext('Show');
  45. fieldset.classList.add('collapsed');
  46. }
  47. }
  48. };
  49. var inlineDivs = document.querySelectorAll('fieldset.module');
  50. for (i = 0; i < inlineDivs.length; i++) {
  51. inlineDivs[i].addEventListener('click', toggleFunc);
  52. }
  53. });
  54. })();