media_library.click_to_select.es6.js 1.1 KB

12345678910111213141516171819202122232425262728293031
  1. /**
  2. * @file media_library.click_to_select.es6.js
  3. */
  4. (($, Drupal) => {
  5. /**
  6. * Allows users to select an element which checks a hidden checkbox.
  7. */
  8. Drupal.behaviors.ClickToSelect = {
  9. attach(context) {
  10. $('.js-click-to-select-trigger', context)
  11. .once('media-library-click-to-select')
  12. .on('click', event => {
  13. // Links inside the trigger should not be click-able.
  14. event.preventDefault();
  15. // Click the hidden checkbox when the trigger is clicked.
  16. const $input = $(event.currentTarget)
  17. .closest('.js-click-to-select')
  18. .find('.js-click-to-select-checkbox input');
  19. $input.prop('checked', !$input.prop('checked')).trigger('change');
  20. });
  21. $('.js-click-to-select-checkbox input', context)
  22. .once('media-library-click-to-select')
  23. .on('change', ({ currentTarget }) => {
  24. $(currentTarget)
  25. .closest('.js-click-to-select')
  26. .toggleClass('checked', $(currentTarget).prop('checked'));
  27. });
  28. },
  29. };
  30. })(jQuery, Drupal);