--- /dev/null
+/**
+ * @file media_library.widget.js
+ */
+(($, Drupal) => {
+ /**
+ * Allows users to re-order their selection with drag+drop.
+ */
+ Drupal.behaviors.MediaLibraryWidgetSortable = {
+ attach(context) {
+ // Allow media items to be re-sorted with drag+drop in the widget.
+ $('.js-media-library-selection', context)
+ .once('media-library-sortable')
+ .sortable({
+ tolerance: 'pointer',
+ helper: 'clone',
+ handle: '.js-media-library-item-preview',
+ stop: ({ target }) => {
+ // Update all the hidden "weight" fields.
+ $(target)
+ .children()
+ .each((index, child) => {
+ $(child)
+ .find('.js-media-library-item-weight')
+ .val(index);
+ });
+ },
+ });
+ },
+ };
+
+ /**
+ * Allows selection order to be set without drag+drop for accessibility.
+ */
+ Drupal.behaviors.MediaLibraryWidgetToggleWeight = {
+ attach(context) {
+ const strings = {
+ show: Drupal.t('Show media item weights'),
+ hide: Drupal.t('Hide media item weights'),
+ };
+ $('.js-media-library-widget-toggle-weight', context)
+ .once('media-library-toggle')
+ .on('click', e => {
+ e.preventDefault();
+ $(e.currentTarget)
+ .toggleClass('active')
+ .text(
+ $(e.currentTarget).hasClass('active')
+ ? strings.hide
+ : strings.show,
+ )
+ .parent()
+ .find('.js-media-library-item-weight')
+ .parent()
+ .toggle();
+ })
+ .text(strings.show);
+ $('.js-media-library-item-weight', context)
+ .once('media-library-toggle')
+ .parent()
+ .hide();
+ },
+ };
+
+ /**
+ * Warn users when clicking outgoing links from the library or widget.
+ */
+ Drupal.behaviors.MediaLibraryWidgetWarn = {
+ attach(context) {
+ $('.js-media-library-item a[href]', context)
+ .once('media-library-warn-link')
+ .on('click', e => {
+ const message = Drupal.t(
+ 'Unsaved changes to the form will be lost. Are you sure you want to leave?',
+ );
+ const confirmation = window.confirm(message);
+ if (!confirmation) {
+ e.preventDefault();
+ }
+ });
+ },
+ };
+
+ /**
+ * Prevent users from selecting more items than allowed in the view.
+ */
+ Drupal.behaviors.MediaLibraryWidgetRemaining = {
+ attach(context, settings) {
+ const $view = $('.js-media-library-view', context).once(
+ 'media-library-remaining',
+ );
+ $view
+ .find('.js-media-library-item input[type="checkbox"]')
+ .on('change', () => {
+ if (
+ settings.media_library &&
+ settings.media_library.selection_remaining
+ ) {
+ const $checkboxes = $view.find(
+ '.js-media-library-item input[type="checkbox"]',
+ );
+ if (
+ $checkboxes.filter(':checked').length ===
+ settings.media_library.selection_remaining
+ ) {
+ $checkboxes
+ .not(':checked')
+ .prop('disabled', true)
+ .closest('.js-media-library-item')
+ .addClass('media-library-item--disabled');
+ } else {
+ $checkboxes
+ .prop('disabled', false)
+ .closest('.js-media-library-item')
+ .removeClass('media-library-item--disabled');
+ }
+ }
+ });
+ },
+ };
+})(jQuery, Drupal);