form.js 3.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  1. import $ from 'jquery';
  2. const attachToggleables = (form) => {
  3. form = $(form);
  4. let query = '[data-grav-field="toggleable"] input[type="checkbox"]';
  5. form.on('change', query, (event) => {
  6. let toggle = $(event.target);
  7. let enabled = toggle.is(':checked');
  8. let parent = toggle.closest('.form-field');
  9. let label = parent.find('label.toggleable');
  10. let fields = parent.find('.form-data');
  11. let inputs = fields.find('input, select, textarea, button');
  12. label.add(fields).css('opacity', enabled ? '' : 0.7);
  13. inputs.map((index, input) => {
  14. let isSelectize = input.selectize;
  15. input = $(input);
  16. if (isSelectize) {
  17. isSelectize[enabled ? 'enable' : 'disable']();
  18. } else {
  19. input.prop('disabled', !enabled);
  20. }
  21. });
  22. });
  23. form.find(query).trigger('change');
  24. };
  25. const attachDisabledFields = (form) => {
  26. form = $(form);
  27. let prefix = '.form-field-toggleable .form-data';
  28. let query = [];
  29. ['input', 'select', 'label[for]', 'textarea', '.selectize-control'].forEach((item) => {
  30. query.push(`${prefix} ${item}`);
  31. });
  32. form.on('mousedown', query.join(', '), (event) => {
  33. let input = $(event.target);
  34. let isFor = input.prop('for');
  35. let isSelectize = (input.hasClass('selectize-control') || input.parents('.selectize-control')).length;
  36. if (isFor) { input = $(`[id="${isFor}"]`); }
  37. if (isSelectize) { input = input.closest('.selectize-control').siblings('select[name]'); }
  38. if (!input.prop('disabled')) { return true; }
  39. let toggle = input.closest('.form-field').find('[data-grav-field="toggleable"] input[type="checkbox"]');
  40. toggle.trigger('click');
  41. });
  42. };
  43. /*
  44. const submitUncheckedFields = (forms) => {
  45. forms = $(forms);
  46. let submitted = false;
  47. forms.each((index, form) => {
  48. form = $(form);
  49. form.on('submit', () => {
  50. // workaround for MS Edge, submitting multiple forms at the same time
  51. if (submitted) { return false; }
  52. let formId = form.attr('id');
  53. let unchecked = form.find('input[type="checkbox"]:not(:checked):not(:disabled)');
  54. let submit = form.find('[type="submit"]').add(`[form="${formId}"][type="submit"]`);
  55. if (!unchecked.length) { return true; }
  56. submit.addClass('pointer-events-disabled');
  57. unchecked.each((index, element) => {
  58. element = $(element);
  59. let name = element.prop('name');
  60. let fake = $(`<input type="hidden" name="${name}" value="0" />`);
  61. form.append(fake);
  62. });
  63. submitted = true;
  64. return true;
  65. });
  66. });
  67. };
  68. */
  69. $(document).ready(() => {
  70. const forms = $('form').filter((form) => $(form).find('[name="__form-name__"]'));
  71. if (!forms.length) { return; }
  72. forms.each((index, form) => {
  73. attachToggleables(form);
  74. attachDisabledFields(form);
  75. // submitUncheckedFields(form);
  76. });
  77. });