X-Git-Url: http://www.aleph1.co.uk/gitweb/?p=yaffs-website;a=blobdiff_plain;f=web%2Fcore%2Fmodules%2Fmedia_library%2Fjs%2Fmedia_library.widget.es6.js;fp=web%2Fcore%2Fmodules%2Fmedia_library%2Fjs%2Fmedia_library.widget.es6.js;h=a784cb3884cb0e5e7846a54ad45b965ad2d4bc49;hp=0000000000000000000000000000000000000000;hb=0bf8d09d2542548982e81a441b1f16e75873a04f;hpb=74df008bdbb3a11eeea356744f39b802369bda3c

diff --git a/web/core/modules/media_library/js/media_library.widget.es6.js b/web/core/modules/media_library/js/media_library.widget.es6.js
new file mode 100644
index 000000000..a784cb388
--- /dev/null
+++ b/web/core/modules/media_library/js/media_library.widget.es6.js
@@ -0,0 +1,120 @@
+/**
+ * @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);