Chris@17: /** Chris@17: * @file media_library.widget.js Chris@17: */ Chris@17: (($, Drupal) => { Chris@17: /** Chris@17: * Allows users to re-order their selection with drag+drop. Chris@18: * Chris@18: * @type {Drupal~behavior} Chris@18: * Chris@18: * @prop {Drupal~behaviorAttach} attach Chris@18: * Attaches behavior to re-order selected media items. Chris@17: */ Chris@17: Drupal.behaviors.MediaLibraryWidgetSortable = { Chris@17: attach(context) { Chris@17: // Allow media items to be re-sorted with drag+drop in the widget. Chris@17: $('.js-media-library-selection', context) Chris@17: .once('media-library-sortable') Chris@17: .sortable({ Chris@17: tolerance: 'pointer', Chris@17: helper: 'clone', Chris@17: handle: '.js-media-library-item-preview', Chris@17: stop: ({ target }) => { Chris@17: // Update all the hidden "weight" fields. Chris@17: $(target) Chris@17: .children() Chris@17: .each((index, child) => { Chris@17: $(child) Chris@17: .find('.js-media-library-item-weight') Chris@17: .val(index); Chris@17: }); Chris@17: }, Chris@17: }); Chris@17: }, Chris@17: }; Chris@17: Chris@17: /** Chris@17: * Allows selection order to be set without drag+drop for accessibility. Chris@18: * Chris@18: * @type {Drupal~behavior} Chris@18: * Chris@18: * @prop {Drupal~behaviorAttach} attach Chris@18: * Attaches behavior to toggle the weight field for media items. Chris@17: */ Chris@17: Drupal.behaviors.MediaLibraryWidgetToggleWeight = { Chris@17: attach(context) { Chris@17: const strings = { Chris@17: show: Drupal.t('Show media item weights'), Chris@17: hide: Drupal.t('Hide media item weights'), Chris@17: }; Chris@17: $('.js-media-library-widget-toggle-weight', context) Chris@17: .once('media-library-toggle') Chris@17: .on('click', e => { Chris@17: e.preventDefault(); Chris@17: $(e.currentTarget) Chris@17: .toggleClass('active') Chris@17: .text( Chris@17: $(e.currentTarget).hasClass('active') Chris@17: ? strings.hide Chris@17: : strings.show, Chris@17: ) Chris@17: .parent() Chris@17: .find('.js-media-library-item-weight') Chris@17: .parent() Chris@17: .toggle(); Chris@17: }) Chris@17: .text(strings.show); Chris@17: $('.js-media-library-item-weight', context) Chris@17: .once('media-library-toggle') Chris@17: .parent() Chris@17: .hide(); Chris@17: }, Chris@17: }; Chris@17: Chris@17: /** Chris@18: * Disable the open button when the user is not allowed to add more items. Chris@18: * Chris@18: * @type {Drupal~behavior} Chris@18: * Chris@18: * @prop {Drupal~behaviorAttach} attach Chris@18: * Attaches behavior to disable the media library open button. Chris@17: */ Chris@18: Drupal.behaviors.MediaLibraryWidgetDisableButton = { Chris@17: attach(context) { Chris@18: // When the user returns from the modal to the widget, we want to shift Chris@18: // the focus back to the open button. If the user is not allowed to add Chris@18: // more items, the button needs to be disabled. Since we can't shift the Chris@18: // focus to disabled elements, the focus is set back to the open button Chris@18: // via JavaScript by adding the 'data-disabled-focus' attribute. Chris@18: $('.js-media-library-open-button[data-disabled-focus="true"]', context) Chris@18: .once('media-library-disable') Chris@18: .each(function() { Chris@18: $(this).focus(); Chris@17: Chris@18: // There is a small delay between the focus set by the browser and the Chris@18: // focus of screen readers. We need to give screen readers time to Chris@18: // shift the focus as well before the button is disabled. Chris@18: setTimeout(() => { Chris@18: $(this).attr('disabled', 'disabled'); Chris@18: }, 50); Chris@17: }); Chris@17: }, Chris@17: }; Chris@17: })(jQuery, Drupal);