HCL DAM Picker Helper

hcl-dam-picker.js

/**
 * @author Mohammad Ashfaq
 * @data 16 Aug 2023
 * @version 1.0
 * Dependencies: jQuery, wpModules.dialog
 * Utility to interact with HCL DAM Picker dialog
 *
 */
(function( hcldamhelper, $ ) {
    //Private Property
    var isDAMInitialized = false;
    var damConfiguration = {};
    var imagePickerURL, filePickerURL;
    var dialog = null;
    var pickerData = {};
    //Public Property
    hcldamhelper.cfversion = "";

    initDAM();

    //Private Method
    /* Function to initialize HCL DAM related data, automatically called when this file is loaded */
    function initDAM( callback ) {
        if (!isDAMInitialized) {
            $.ajax({
                "url": "/wps/mycontenthandler/dxconfig/configuration/",
                "method": "GET"
            }).done(function(data) {
                isDAMInitialized = true;
                console.log("DAM configuration: ", data);
                damConfiguration = data;
                imagePickerURL = (data.dam["picker-url-images"]) ? data.dam["picker-url-images"] : "";
                filePickerURL = (data.dam["picker-url-files"]) ? data.dam["picker-url-files"] : "";
                hcldamhelper.cfversion = (data.environment.version) ? data.environment.version : "";
                if (typeof callback === "function") {
                    callback({"message": "initialization successful"});
                }
            }).fail(function(){
                isDAMInitialized = false;
                if (typeof callback === "function") {
                    callback({"message": "initialization failed"});
                }
            });
        } else {
            console.log("HCL DAM already initialized");
            if (typeof callback === "function") {
                callback({"message": "HCL DAM already initialized"});
            }
        }
    }

    /* Add the listener to window.top so that we can listen to data posted by HCL DAM */
    function addMLPickerListener() {
        console.info("addPickerListener ...");
        if (window.top.addEventListener) {
            window.top.addEventListener("message", pickerMLListener, false);
        } else {
            window.top.attachEvent("onmessage", pickerMLListener);
        }
    }

    /* Remove the listener from window.top for cleanup */
    function removePickerListener() {
        console.info("removePickerListener ...");
        if (window.top.removeEventListener) {
            window.top.removeEventListener("message", pickerMLListener, false);
        } else {
            window.top.attachEvent("onmessage", pickerMLListener);
        }
    }

    /**
     * Function to process json from picker event received
     * @param event
     * @returns
     */
    function pickerMLListener(event) {
        // parse data received from picker
        var pickerJson = JSON.parse(event.data);
        var previewUrl=pickerJson.path;
        pickerData = pickerJson;
        dialog.close();
        removePickerListener();
    }

    //Public Methods

    /**
     * Function to open picker in Portal wpModules dialog
     * 
     * @param assetType - Image to choose only images, File to choose any file type
     * @param callback - Function to be called when file or image is selected or dialog is closed.
     * @returns
     */
    hcldamhelper.openMLDialog = function(assetType, callback) {
        if (!isDAMInitialized) {
            console.warn("HCL DAM not initialized");
            callback({"message": "HCL DAM not initialized"});
            return;
        }
        dialog = new wpModules.dialog.Dialog({
            url : (assetType == "Image") ? imagePickerURL : filePickerURL,
            title : 'Insert Media',
            modal : true,
            autoClose : true,
            metrics: {"width": 1200, "height": 650},
            window : window.top,
            posHandler:"horizontallyCenteredBelow",
            callbackFn: function(data) {
                if (typeof callback === "function") {
                    callback(pickerData);
                    pickerData = {};
                }
            }
        });
        try {
            dialog.open();
            addMLPickerListener();
        } catch (err) {
            console.log("Exception occurred opening picker" + err);
            dialog.close();
        }
    };

    hcldamhelper.retryInitialization = function(callbackFn) {
        initDAM(callbackFn);
    };

    /** Check to see if DAM is initialized */
    hcldamhelper.isDAMInitialized = function() {
        return isDAMInitialized;
    };

    /** Return DAM configuration, blank if DAM not initialized */
    hcldamhelper.getDAMConfig = function() {
        return damConfiguration;
    };

}( window.hcldamhelper = window.hcldamhelper || {}, jQuery ));

HCL Released HCL DAM feature in HCL DX with CF181, but there's no easy way to directly integrate it with Custom Portlets. So, I have developed this small utility which you can use to open HCL DAM dialog to select the file and store its details and generate the previews. You should include this file in the Theme and you're ready to go.

To open the DAM picker call the function hcldamhelper.openMLDialog with asset type and callback function which will be executed when file is selected by user.