coral path browser events | Community
Skip to main content
sreenu539
sreenu539
Level 7
November 3, 2017

coral path browser events

  • November 3, 2017
  • 5 replies
  • 6439 views

Hi,

I am trying to add preview for DAM assets in "path browser" component.

Unfortunately these events not triggered on first load of dialog. if I click path browser button second time the alert("path browser button clicked"); is displayed.

AEM 6.3 is the environment. 

(function (document, $) {

    var rel_preview_enabled_path_browser = "[data-enable-path-browser-preview='true'] .js-coral-pathbrowser-button";

    var rel_path_browser_item = ".coral-Pathbrowser-picker[data-enable-path-browser-preview=\"true\"] .coral-ColumnView-item";

    var rel_path_browser_preview = ".path-browser-preview";

    var rel_path_browser_preview_image = rel_path_browser_preview + " .path-browser-preview-image";

    var rel_active_item = ".coral-ColumnView-column.is-active .coral-ColumnView-item.is-active";

    var previewUrl;

    $(document).on("click", rel_preview_enabled_path_browser, function (e) {

       alert("path browser button clicked");

    });

    $(document).on("click", rel_path_browser_item, function (e) {

        alert("path browser item selected");

    });

})(document, Granite.$);

Thanks,

Sri

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

5 replies

smacdonald2008
smacdonald2008
Level 10
November 3, 2017

Did you look through the Coral API reference docs? Reference Materials

sreenu539
sreenu539Author
Level 7
November 3, 2017

@smacdonald2008 thanks for reply. I did read the coral ui documentation. I could not find events for coral icon -filesearch. I knew there were events like coral-overlay:open for dialogs.

Not really sure, how to bind/listen to coral path browser icon click events. I tried to bind/listen to coral-columnview-item click events, it didn't work either. I had this js as part of clientlib and categories value as 'cq.authoring.dialog'. Please let me know, if above closure does not work, i will wrap the bind events in document.ready and give it a try.

Thanks.

kautuk_sahni
Community Manager
kautuk_sahniCommunity Manager
Community Manager
November 6, 2017

You can try:- AEM Touch UI Custom Validation - Adobe Experience Manager | AEM/CQ | Apache Sling

// Registering custom validators is done by calling the jQuery based $.validator.register method. The register method takes a single JavaScript object literal argument. The parameter looks for four properties: selector, validate, show and clear, of which the only selector is required.

The  selector property ties the validator to the form elements on the page. The property accepts any jQuery selector such as a class ( .my-class-name), type ( INPUT) or attribute ( INPUT[type="text"]) selectors.

The validate property is the function that validates the form element's input. The function provides the form element as a jQuery object as the single available parameter. The field is treated as invalid if this function returns a string literal as the validation error message.

I hope this would help you.

Kautuk Sahni
manish_anand
manish_anand
Level 3
December 15, 2017

Hi,

Did you get any solution for this?

Regards,

Manish

sreenu539
sreenu539Author
Level 7
December 15, 2017

Yes. Following worked for me . AEM 6.3 is the environment.

;(function (channel, $) {

    'use strict';

    var previewUrl;

    var rel_path_browser_preview = ".path-browser-preview";

    var rel_path_browser_preview_image = rel_path_browser_preview + " .path-browser-preview-image";

    channel.on('click', '.coral-PathBrowser[data-enable-path-browser-preview=\"true\"] .coral-InputGroup .coral-InputGroup-button', function(event) {

        var target = $(event.target);

        var pathBrowser = target.closest("[data-enable-path-browser-preview='true']");

        previewUrl = pathBrowser.data("previewUrl") || "$path.thumb.319.319.png";

       

        if (pathBrowser.length) {   

            var $pathBrowser = pathBrowser.data("pathBrowser");

            var $pathBrowserPicker = $pathBrowser.$picker;

            var $pickerPanel = $pathBrowserPicker.find(".coral-Pathbrowser-pickerPanel");

            var $pickerColumnView = $pickerPanel.find(".coral-ColumnView");

            var newPreview = $pickerPanel.find('.path-browser-preview');

            if(!newPreview.length) {

                $pickerColumnView.css({

                    width: "75%"

                });

                var $preview = $("<div class='" + rel_path_browser_preview.substr(1) + "'><div class='path-browser-preview-text'>Preview</div><div class='path-browser-preview-image'></div></div>");

                $preview.css({

                    width: "25%",

                    height: "100%",

                    "border-left": "1px solid black",

                    float: "right"

                });

                $pickerPanel.append($preview);

            };

        }

    });

    channel.on('coral-columnview-item-select', function(event) {      

      var activeItem = $('.coral-ColumnView-column.is-active .coral-ColumnView-item.is-active');

      var path = activeItem.data('value');

      var previewImage = $(rel_path_browser_preview_image);

      previewImage.find("img").remove();

      if (path) {

          var previewThumbnail = previewUrl.replace("$path", path);

          previewImage.append("<img src='" + previewThumbnail + "'>");

      }

    });

})(jQuery(document), Granite.$);

    manish_anand
    manish_anand
    Level 3
    December 15, 2017

    I want my dam assets icons to be displayed along side there names in path browser.

    did you achieve that too?

    any idea?

    edubey
    edubey
    Level 10
    December 15, 2017

    Can you share
    1. dialog screen shot

    2. all properties of field in which you are adding this.

    Y
    YentlFr
    September 25, 2019

    Did you also implement a way to load the preview as soon as the path browser is opened?

    Terms & ConditionsAccessibility statement

    Loading footer...