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

MdNadimHossain · 2022-07-05T05:05:41Z

JIRA

https://digital-engagement.atlassian.net/browse/SDPA-6253

Changes

Added a new form field as previous link in the embed media select step and made it hidden by default, so that it does not show up for the 1st page load
Added js to manipulate the embed media form select step on CKEditor
The first js gets loaded only when the CKEditor and iframe gets loaded and the 2nd one gets loaded with the view

Related PRs -

Testing PR - https://github.com/dpc-sdp/content-reference-sdp-vic-gov-au/pull/101
Link - https://nginx-php.pr-101.content-reference-sdp-vic-gov-au.sdp2.sdp.vic.gov.au/

Screenshots

… in CKEditor.

MdNadimHossain · 2022-07-11T00:55:01Z

js/embed_media_back_button.js

+      const backButton = $('#entity-embed-dialog-tide-media-browser-home')
+      $(document).ready(function () {
+        // Remove the name field value on modal first load if any.
+        localStorage.removeItem("tideMediaBrowsernameFilterVal");


this localstorage get emptied everytime the embed form loads for the first time, so that on first load the name filter field goes back to empty state

MdNadimHossain · 2022-07-11T00:56:08Z

js/embed_media_back_button.js

+        // Remove the name field value on modal first load if any.
+        localStorage.removeItem("tideMediaBrowsernameFilterVal");
+        $("iframe").on("load", function() {
+          if ($("iframe") && $("iframe").length > 0) {


there can be multiple iframe loaded in a single page, so this will make sure if there are multiple iframe it will check it is targeting the correct one

MdNadimHossain · 2022-07-11T00:56:41Z

js/embed_media_back_button.js

+                iframePath = $("iframe")[1].contentWindow.location.pathname
+                // Shows the back button when iframe is not in the first page.
+                if (iframePath && iframePath !== homePagePath) {
+                  backButton.css("display", "block");


only display the previous button if it is not the first page

MdNadimHossain · 2022-07-11T01:00:33Z

js/embed_media_back_button.js

+                // 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, published, site)) {
+                  $(this).contents().find('#edit-submit-tide-media-browser').trigger('click');


the filter search for media items is a ajax callback, for this reason, when going back to the first page if there are any filter values it will retrieve that but it won't retrieve the search results, this will make sure that if there are any pre-selected values in the filter, it will just trigger ajax callback to get the search results

on empty values it won't get triggered

MdNadimHossain · 2022-07-11T01:02:48Z

js/embed_media_iframe_form.js

+        })
+      }
+    };
+}(jQuery, Drupal));


this is a separate js to manipulate the name filter field. This only gets loaded when the view gets loaded

anthony-malkoun · 2022-07-11T07:19:04Z

js/embed_media_iframe_form.js

+    Drupal.behaviors.tide_media_media_form = {
+      attach: function (context, settings) {
+        let nameField = $('#views-exposed-form-tide-media-browser-media-browser input[name=name]')
+        const fromSubmit = $('#views-exposed-form-tide-media-browser-media-browser input[type=submit]')


formSubmit?

Why is one let and one const?

here the formSubmit is view filter selection "Apply" button. So every time user hits the Apply button it checks the name field saves the user input value in the localStorage

it should be const, it is a mistake, fixing it now, thanks

Lol, was just about the spelling... you have fromSubmit

oops, fixing it 👍

anthony-malkoun · 2022-07-11T07:35:54Z

js/embed_media_back_button.js

+                }
+                // Get the filter values on iframe load.
+                itemName =  $(this).contents().find('#edit-name').val()
+                licenseType = $(this).contents().find('#edit-field-license-type-target-id-1 :selected').text()


I'm not seeing this saved in local storage. Think your selector might not be quite right for all but the name field. e.g. this license type has this HTML:

<select data-drupal-selector="edit-field-license-type-target-id-1" id="edit-field-license-type-target-id-1--1_-ORPXVgy4" name="field_license_type_target_id_1" class="form-select">

Your id is edit-field-license-type-target-id-1--1_-ORPXVgy4 which looks a bit random. You might need to find the name attribute seems more consistent.

The filter values except for name field doesn't need to be saved in local storage and coming back to the first page the selection remains the same. Only the namefield value needs to be stored.

so looks like JQuery can target partial id, got the idea from here - https://stackoverflow.com/questions/37300558/how-to-select-elements-using-jquery-by-partial-id-and-a-class-at-the-same-time
and this scenario it works as well and targets the partial id

Hey @anthony-malkoun the drop down saves fine when I tried in the testing PR now. See the attached steps I followed - live media embed demo.webm

Hmm, that's not quite what I'm seeing. If I have some filters applied, view an item and hit previous, I go back to the listing (at page 1) and the filters are selected but I have to hit apply again to get them active. Is this as expected?

Create.Landing.Page._.Single.Digital.Presence.Content.Management.System.and.22.more.pages.-.Personal.-.Microsoft.Edge.2022-07-12.09-08-47.mp4

anthony-malkoun

@MdNadimHossain a few little issues I reckon. Doesn't seem to be saving the drop down filter elements because the id seems to not be what you're expecting.

Also, should we be saving what page we're at? I feel that if I've navigated through to other pages, then clicking Previous shouldn't take you back to page 1.

MdNadimHossain · 2022-07-11T08:12:14Z

@MdNadimHossain a few little issues I reckon. Doesn't seem to be saving the drop down filter elements because the id seems to not be what you're expecting.

Also, should we be saving what page we're at? I feel that if I've navigated through to other pages, then clicking Previous shouldn't take you back to page 1.

Hey @anthony-malkoun the drop down saves fine when I tried in the testing PR now. See the attached steps I followed -
live media embed demo.webm
Also the previous button works as the back button of a browser, so if the user journey continues, the user can click through to reach to the first page, which is the home page of the modal. But there will be a 2nd phase of this story, where user can select an item when they are viewing the media item. So in that 2nd phase, my idea to stop the user navigate through after first level. So once they go to a different page from the home page, they shouldn't be able to click through from the 2nd page. Cause the whole idea of going to the media page from the modal is to just view the item and if user is satisfied then add it or go back to home page add it.

anthony-malkoun · 2022-07-11T23:19:25Z

OK, I'm not convinced that going back to the first page is what they will want. If I've navigated to page 10 say, and I look at the image and it's not what I want, then I don't want to go back to page 1 and start my search again IMO. Are you saying this functionality is phase 2?

MdNadimHossain · 2022-07-20T22:52:30Z

OK, I'm not convinced that going back to the first page is what they will want. If I've navigated to page 10 say, and I look at the image and it's not what I want, then I don't want to go back to page 1 and start my search again IMO. Are you saying this functionality is phase 2?

Hey @anthony-malkoun I have tried this feature to work out, but couldn't work it out for this. So when it changes the pagination the location path of the iframe doesn't change, so there is nothing to trigger an event to retrieve the pagination state of the user.
We can track the pagination number on user click and if it is not the first page it will trigger the click when a user goes back. But it becomes ugly cause it triggers so many ajax call. E.g - An user is in the 3rd page of pagination -> goes to different link -> clicks "previous" link -> 1 - "Apply" button triggered 2. pagination triggered to go to 2nd page 3. pagination triggered to go to 3rd page . So 3 ajax call. which doesn't look right
I have informed Leslie about the drawback of this feature and she is fine with it. I have added comment and video demo in the ticket as well for future reference. - https://digital-vic.atlassian.net/browse/SDPAP-6343

MdNadimHossain added 7 commits July 5, 2022 14:59

[SDPA-6253] Added custom previous button for media embed select modal…

3161577

… in CKEditor.

Updated lint.

45828fb

Updated lint.

97cf5be

Updated css.

1109004

Added dev-tools hash.

a45e09d

Reverted dev tools hash.

290c778

Added check on iframe name.

0612791

MdNadimHossain commented Jul 11, 2022

View reviewed changes

MdNadimHossain requested review from anthony-malkoun, edyuenyw, mayurngondhkar, vincent-gao and yeniatencio July 11, 2022 01:03

MdNadimHossain self-assigned this Jul 11, 2022

MdNadimHossain added the Needs review label Jul 11, 2022

anthony-malkoun reviewed Jul 11, 2022

View reviewed changes

anthony-malkoun requested changes Jul 11, 2022

View reviewed changes

Updated var type.

96d2bb9

Updated var name.

3618a7b

MdNadimHossain added 3 commits July 12, 2022 16:01

Updated js.

31e3bb8

Updated js.

845ca60

Updated composer alias for tide_core.

4b3f6b6

MdNadimHossain requested a review from anthony-malkoun July 20, 2022 22:53

anthony-malkoun approved these changes Aug 16, 2022

View reviewed changes

Reverted tide_core reference.

de565af

MdNadimHossain merged commit 88a812a into develop Aug 17, 2022

MdNadimHossain deleted the feature/SDPA-6253-media-library-inspect-item-improvements branch August 17, 2022 00:17

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

MdNadimHossain commented Jul 5, 2022 •

edited

Loading

MdNadimHossain Jul 11, 2022

MdNadimHossain Jul 11, 2022

MdNadimHossain Jul 11, 2022

MdNadimHossain Jul 11, 2022

MdNadimHossain Jul 11, 2022

MdNadimHossain Jul 11, 2022

anthony-malkoun Jul 11, 2022

anthony-malkoun Jul 11, 2022

MdNadimHossain Jul 11, 2022

anthony-malkoun Jul 11, 2022

MdNadimHossain Jul 11, 2022

anthony-malkoun Jul 11, 2022

MdNadimHossain Jul 11, 2022

anthony-malkoun Jul 11, 2022

anthony-malkoun left a comment

MdNadimHossain commented Jul 11, 2022 •

edited

Loading

anthony-malkoun commented Jul 11, 2022

MdNadimHossain commented Jul 20, 2022 •

edited

Loading

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

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

Conversation

MdNadimHossain commented Jul 5, 2022 • edited Loading

JIRA

Changes

Related PRs -

Screenshots

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

anthony-malkoun left a comment

Choose a reason for hiding this comment

MdNadimHossain commented Jul 11, 2022 • edited Loading

anthony-malkoun commented Jul 11, 2022

MdNadimHossain commented Jul 20, 2022 • edited Loading

MdNadimHossain commented Jul 5, 2022 •

edited

Loading

MdNadimHossain commented Jul 11, 2022 •

edited

Loading

MdNadimHossain commented Jul 20, 2022 •

edited

Loading