[SDPA-6253] Added custom previous button for media embed select modal in CKEditor.

composer.json

@@ -5,7 +5,7 @@
     "license": "GPL-2.0-or-later",
     "require": {
         "drupal/crop": "^2.1",
-        "dpc-sdp/tide_core": "^3.0.1",
+        "dpc-sdp/tide_core": "dev-feature/SRM-436_metadata_reroll_patch",
         "drupal/embed": "^1.1",
         "drupal/focal_point": "^1.5",
         "drupal/inline_entity_form": "^1.0-rc1",

css/embed_media_back_button.css

@@ -0,0 +1,5 @@
+a#entity-embed-dialog-tide-media-browser-home {
+  text-decoration: none;
+  color: #0074bd;
+  padding: 0 0 0.75em;
+}

js/embed_media_back_button.js

@@ -0,0 +1,89 @@
+/**
+ * @file
+ * Adds the back button for embeded media select modal in CKEditor.
+ * Everytime the user goes to different page within the media embed select modal
+ * it will save the filter values to retrive the search result when user
+ * comes back to the first page.
+ */
+
+ (function ($, Drupal) {
+  'use strict';
+
+  Drupal.behaviors.tide_media_browser_iframe = {
+    attach: function (context, settings) {
+      if (!window.CKEDITOR) {
+        return;
+      }
+      let iframePath, itemName, licenseType, mediaType, status, site
+      const iframeName = 'entity_browser_iframe_tide_media_browser_iframe'
+      const homePagePath = '/entity-browser/iframe/tide_media_browser_iframe'
+      const backButton = $('#entity-embed-dialog-tide-media-browser-home')
+      $(document).ready(function () {
+        // Remove the filter values on modal first load if any.
+        localStorage.removeItem('tideMediaBrowserNameFilterVal');
+        localStorage.removeItem('tideMediaBrowserLicenseTypeFilterVal');
+        localStorage.removeItem('tideMediaBrowserMediaTypeFilterVal');
+        localStorage.removeItem('tideMediaBrowserStatusFilterVal');
+        localStorage.removeItem('tideMediaBrowserSiteFilterVal');
+        $('iframe').on('load', function() {
+          if ($('iframe') && $('iframe').length > 0) {
+            for (let i = 0; i < $('iframe').length; i++) {
+              if ($('iframe')[i].name && $('iframe')[i].name === iframeName) {
+                iframePath = $('iframe')[i].contentWindow.location.pathname
+                // Shows the back button when iframe is not in the first page.
+                if (iframePath && iframePath !== homePagePath) {
+                  backButton.css('display', 'block');
+                }
+                // Hides the back button for the first page.
+                if (iframePath && iframePath === homePagePath) {
+                  backButton.css('display', 'none');
+                }
+              }
+            }
+          }
+        });
+      });
+      // Disable back button when it is on the first page.
+      backButton.click(function() {
+        history.back()
+        $('iframe').on('load', function() {
+          // Get the filter values on iframe load.
+          itemName = localStorage.getItem('tideMediaBrowserNameFilterVal')
+          $(this).contents().find('input[name=name]').val(itemName)
+          licenseType = checkFilterValueInStorage('tideMediaBrowserLicenseTypeFilterVal')
+          $(this).contents().find('select[name=field_license_type_target_id_1]').val(licenseType)
+          mediaType = checkFilterValueInStorage('tideMediaBrowserMediaTypeFilterVal')
+          $(this).contents().find('select[name=bundle]').val(mediaType)
+          status = checkFilterValueInStorage('tideMediaBrowserStatusFilterVal')
+          $(this).contents().find('select[name=status]').val(status)
+          site = checkFilterValueInStorage('tideMediaBrowserSiteFilterVal')
+          $(this).contents().find('select[name=field_media_site_target_id]').val(site)
+          // Trigger ajax call submit to retrive the user search for current session.
+          // Will only trigger if there is any filter value set for this session.
+          if (checkFilterValuesOnLoad (itemName, licenseType, mediaType, status, site)) {
+            $(this).contents().find('input[value=Apply]').trigger('click');
+          }
+        })
+      });
+      // Check filter values on load.
+      function checkFilterValuesOnLoad (itemName, licenseType, mediaType, status, site) {
+        const defaultValue = "All"
+        if ((itemName && itemName !== 'undefined') ||
+          (licenseType && licenseType !== defaultValue) || 
+          (mediaType && mediaType !== defaultValue) || 
+          (status && status !== defaultValue) || 
+          (site && site !== defaultValue)) {
+            return true
+        }
+        return false
+      }
+      // Value check on localStorage, if empty set to default.
+      function checkFilterValueInStorage (filterValName) {
+        if (localStorage.getItem(filterValName)) {
+          return localStorage.getItem(filterValName)
+        }
+        return 'All'
+      }
+    },
+  };
+}(jQuery, Drupal));

js/embed_media_iframe_form.js

@@ -0,0 +1,31 @@
+/**
+ * @file
+ * Retrieve the name user input for embed media select iframe.
+ * Everytime the user goes to different page within the media embed select modal
+ * it will save the name field value to retrive the search result when user
+ * comes back to the first page.
+ */
+
+ (function ($, Drupal) {
+  'use strict';
+
+  Drupal.behaviors.tide_media_media_form = {
+    attach: function (context, settings) {
+      const nameField = $('#views-exposed-form-tide-media-browser-media-browser input[name=name]')
+      const licenseType = $('#views-exposed-form-tide-media-browser-media-browser select[name=field_license_type_target_id_1]')
+      const mediaType = $('#views-exposed-form-tide-media-browser-media-browser select[name=bundle]')
+      const status = $('#views-exposed-form-tide-media-browser-media-browser select[name=status]')
+      const site = $('#views-exposed-form-tide-media-browser-media-browser select[name=field_media_site_target_id]')
+      const formSubmit = $('#views-exposed-form-tide-media-browser-media-browser input[type=submit]')
+      // On every submit it will save the namefield value to the localstorage.
+      formSubmit.click(function () {
+        // Store user set values on every click.
+        localStorage.setItem('tideMediaBrowserNameFilterVal', nameField.val());
+        localStorage.setItem('tideMediaBrowserLicenseTypeFilterVal', licenseType.val());
+        localStorage.setItem('tideMediaBrowserMediaTypeFilterVal', mediaType.val());
+        localStorage.setItem('tideMediaBrowserStatusFilterVal', status.val());
+        localStorage.setItem('tideMediaBrowserSiteFilterVal', site.val());
+      })
+    }
+  };
+}(jQuery, Drupal));

tide_media.libraries.yml

@@ -11,3 +11,24 @@ media_browser:
   css:
     theme:
       css/media_browser.css: {}
+
+embed_media_back_button:
+  js:
+    js/embed_media_back_button.js: {}
+  dependencies:
+    - core/drupal
+    - core/drupalSettings
+    - core/jquery
+
+embed_media_iframe_form:
+  js:
+    js/embed_media_iframe_form.js: {}
+  dependencies:
+    - core/drupal
+    - core/drupalSettings
+    - core/jquery
+
+embed_media_back_button_style:
+  css:
+    theme:
+      css/embed_media_back_button.css: {}

tide_media.module

@@ -109,9 +109,27 @@ function tide_media_form_alter(&$form, FormStateInterface $form_state, $form_id)
       }
     }
   }
-  // Add check box to show or hide last updated date for embeded media items.
+
   $entity_element = $form_state->get('entity_element');
   if ($form_id === 'entity_embed_dialog') {
+    // Add back button for medie embed modal in CKEditor.
+    if ($form_state->get('step') == 'select') {
+      $form['entity-embed-dialog-tide-media-browser-home'] = [
+        '#title' => t('<< Previous'),
+        '#type' => 'link',
+        '#url' => Url::fromRoute('<none>'),
+        '#weight' => 0,
+        '#attributes' => [
+          'onclick' => "return false",
+          'id' => ["entity-embed-dialog-tide-media-browser-home"],
+          'style' => "display:none",
+        ],
+      ];
+      $form['#attached']['library'][] = 'tide_media/embed_media_back_button';
+      $form['#attached']['library'][] = 'tide_media/embed_media_back_button_style';
+
+    }
+    // Add check box to show or hide last updated date for embeded media items.
     if ($form_state->get('step') == 'embed') {
       $form['attributes']['data-show-last-updated'] = [
         '#type' => 'checkbox',
@@ -294,6 +312,7 @@ function tide_media_preprocess_image(&$variables) {
 function tide_media_views_pre_render(ViewExecutable $view) {
   if ($view->id() === 'tide_media_browser' && (($view->current_display === 'media_browser') || ($view->current_display === 'document_browser'))) {
     $view->element['#attached']['library'][] = 'tide_media/media_browser';
+    $view->element['#attached']['library'][] = 'tide_media/embed_media_iframe_form';
     foreach ($view->result as $value) {
       if (!empty($value->_relationship_entities['field_media_file_target_id'])) {
         $file_type = $value->_relationship_entities['field_media_file_target_id'];