AEM 6440 - Touch UI Composite Image Multifield

Goal

Before trying out this extension, check if the AEM Core components Carousel serves your purpose - http://opensource.adobe.com/aem-core-wcm-components/library/carousel.html or using a Pathbrowser is good enough - /libs/granite/ui/components/coral/foundation/form/pathbrowser

Create  a Touch UI Composite Multifield configuration supporting Images, widgets of type /libs/cq/gui/components/authoring/dialog/fileupload

For AEM 62 check this post

Demo | Package Install | Github


Component Rendering

Image Multifield Structure

Nodes in CRX

Dialog

Dialog XML

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
    jcr:primaryType="nt:unstructured"
    jcr:title="64 Image Multifield"
    sling:resourceType="cq/gui/components/authoring/dialog">
    <content
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns">
        <items jcr:primaryType="nt:unstructured">
            <column
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/coral/foundation/container">
                <items jcr:primaryType="nt:unstructured">
                    <products
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
                        composite="{Boolean}true"
                        fieldLabel="Products">
                        <field
                            jcr:primaryType="nt:unstructured"
                            sling:resourceType="granite/ui/components/coral/foundation/container"
                            name="./products">
                            <items jcr:primaryType="nt:unstructured">
                                <column
                                    jcr:primaryType="nt:unstructured"
                                    sling:resourceType="granite/ui/components/coral/foundation/container">
                                    <items jcr:primaryType="nt:unstructured">
                                        <product
                                            jcr:primaryType="nt:unstructured"
                                            sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                            fieldDescription="Name of Product"
                                            fieldLabel="Product Name"
                                            name="./product"/>
                                        <path
                                            jcr:primaryType="nt:unstructured"
                                            sling:resourceType="granite/ui/components/coral/foundation/form/pathbrowser"
                                            fieldDescription="Select Path"
                                            fieldLabel="Path"
                                            name="./path"
                                            rootPath="/content"/>
                                        <file
                                            jcr:primaryType="nt:unstructured"
                                            sling:resourceType="cq/gui/components/authoring/dialog/fileupload"
                                            allowUpload="false"
                                            autoStart="{Boolean}false"
                                            class="cq-droptarget"
                                            fileNameParameter="./fileName"
                                            fileReferenceParameter="./fileReference"
                                            mimeTypes="[image/gif,image/jpeg,image/png,image/webp,image/tiff]"
                                            multiple="{Boolean}false"
                                            name="./file"
                                            title="Upload Image Asset"
                                            uploadUrl="${suffix.path}"
                                            useHTML5="{Boolean}true"/>
                                    </items>
                                </column>
                            </items>
                        </field>
                    </products>
                </items>
            </column>
        </items>
    </content>
</jcr:root>

Solution

1) Login to CRXDE Lite, create folder (nt:folder) /apps/eaem-touchui-image-multifield

2) Create clientlib (type cq:ClientLibraryFolder) /apps/eaem-touchui-image-multifield/clientlib and set a property categories of String type to cq.authoring.dialog.all, dependencies of type String[] with value underscore

3) Create file ( type nt:file ) /apps/eaem-touchui-image-multifield/clientlib/js.txt, add the following

                         image-multifield.js

4) Create file ( type nt:file ) /apps/eaem-touchui-image-multifield/clientlib/image-multifield.js, add the following code

(function ($, $document) {
    var COMPOSITE_MULTIFIELD_SELECTOR = "coral-multifield[data-granite-coral-multifield-composite]",
        FILE_REFERENCE_PARAM = "fileReference",
        registry = $(window).adaptTo("foundation-registry"),
        ALLOWED_MIME_TYPE = "image/jpeg",
        adapters = registry.get("foundation.adapters");

    var fuAdapter = _.reject(adapters, function(adapter){
        return ((adapter.type !== "foundation-field") || (adapter.selector !== "coral-fileupload.cq-FileUpload"));
    });

    if(_.isEmpty(fuAdapter)){
        return;
    }

    fuAdapter = fuAdapter[0];

    var orignFn = fuAdapter.adapter;

    fuAdapter.adapter = function(el) {
        return Object.assign(orignFn.call(el), {
            getName: function () {
                return el.name;
            },
            setName: function(name) {
                var prefix = name.substr(0, name.lastIndexOf(el.name));

                el.name = name;

                $("input[type='hidden'][data-cq-fileupload-parameter]", el).each(function(i, el) {
                    if ($(el).data("data-cq-fileupload-parameter") !== "filemovefrom") {
                        this.setAttribute("name", prefix + this.getAttribute("name"));
                    }
                });
            }
        });
    };

    $document.on("foundation-contentloaded", function(e) {
        var composites = $(COMPOSITE_MULTIFIELD_SELECTOR, e.target);

        composites.each(function() {
            Coral.commons.ready(this, function(el) {
                addThumbnails(el);
            });
        });
    });

    function addThumbnails(multifield){
        var $multifield = $(multifield),
            dataPath = $multifield.closest(".cq-dialog").attr("action"),
            mfName = $multifield.attr("data-granite-coral-multifield-name");

        dataPath = dataPath + "/" + getStringAfterLastSlash(mfName);

        $.ajax({
            url: dataPath + ".2.json",
            cache: false
        }).done(handler);

        function handler(mfData){
            multifield.items.getAll().forEach(function(item, i) {
                var $mfItem = $(item),
                    $fileUpload = $mfItem.find("coral-fileupload");

                if(_.isEmpty($fileUpload)){
                    return;
                }

                var itemName = getJustItemName($fileUpload.attr("name"));

                if(_.isEmpty(mfData[itemName]) || _.isEmpty((mfData[itemName][FILE_REFERENCE_PARAM]))){
                    return;
                }

                var imagePath = mfData[itemName][FILE_REFERENCE_PARAM];

                $fileUpload.trigger($.Event("assetselected", {
                    path: imagePath,
                    group: "",
                    mimetype: ALLOWED_MIME_TYPE, // workaround to add thumbnail
                    param: "",
                    thumbnail: getThumbnailHtml(imagePath)
                }));
            });
        }

        function getThumbnailHtml(path){
            return "<img class='cq-dd-image' src='" + path + "/_jcr_content/renditions/cq5dam.thumbnail.319.319.png'>";
        }

        function getJustItemName(itemName){
            itemName = itemName.substr(itemName.indexOf(mfName) + mfName.length + 1);

            itemName = itemName.substring(0, itemName.indexOf("/"));

            return itemName;
        }
    }

    function getStringAfterLastSlash(str){
        if(!str || (str.indexOf("/") == -1)){
            return "";
        }

        return str.substr(str.lastIndexOf("/") + 1);
    }
}(jQuery, jQuery(document)));

5) To render the composite multifield items eg. to create a Image Gallery component, create a HTL render script /apps/eaem-touchui-image-multifield/sample-image-multifield/sample-image-multifield.html

<div>
    <b>6420 Composite Image Multifield</b>

    <div data-sly-use.company="helper.js" data-sly-unwrap>
        <div data-sly-test="${!company.products && wcmmode.edit}">
            Add products using component dialog
        </div>

        <div data-sly-test="${company.products}">
            <div data-sly-list.product="${company.products}">
                <div>
                    <div>${product.name}</div>
                    <div>${product.path}</div>
                    <div><img src="${product.fileReference}" width="150" height="150"/></div>
                </div>
            </div>
        </div>
    </div>
</div>

6) Finally a HTL use-script to read the multifield data /apps/eaem-touchui-image-multifield/sample-image-multifield/helper.js

"use strict";
 
use( ["/libs/wcm/foundation/components/utils/ResourceUtils.js","/libs/sightly/js/3rd-party/q.js" ], function(ResourceUtils, Q){
    var prodPromise = Q.defer(), company = {},
        productsPath = granite.resource.path + "/products";
 
    company.products = undefined;
 
    ResourceUtils.getResource(productsPath)
            .then(function (prodParent) {
                return prodParent.getChildren();
            })
            .then(function(products) {
                addProduct(products, 0);
            });
 
    function addProduct(products, currIndex){
        if(!company.products){
            company.products = [];
        }
 
        if (currIndex >= products.length) {
            prodPromise.resolve(company);
            return;
        }
 
        var productRes = products[currIndex],
            properties = productRes.properties;
 
        var product = {
            path: properties.path,
            name: properties.product,
            fileReference: properties.fileReference
        };

        company.products.push(product);
 
        addProduct(products, (currIndex + 1));
    }

    return prodPromise.promise;
} );