AEM 61 - Extend TouchUI Rich Text Editor Table Plugin, Add Summary Field

Goal

Extend Touch UI Rich Text Editor (RTE) widget to add a field for Table Summary

Classic UI RTE Table extension for Summary is available here

For AEM 64 check this post

Demo shows dialog of foundation text component 
(/libs/foundation/components/text/dialog/items/tab1/items/text/rtePlugins) modified to add the table plugin config. This is just for demonstration only (on Geometrixx pages), ideally the foundation components should never be altered...

For extending Link Dialog in AEM 62 check this post

Demo | Package Install


Table Properties Dialog with Summary

Table Source with Summary

Solution

1) Login to CRXDE Lite, create folder (nt:folder) /apps/touchui-rte-table-summary

2) Create clientlib (type cq:ClientLibraryFolder) /apps/touchui-rte-table-summary/clientlib and set property categories of String type to cq.authoring.dialog and dependencies String[] to underscore

3) Create file ( type nt:file ) /apps/touchui-rte-table-summary/clientlib/js.txt, add the following

                         summary.js

4) Create file (type nt:file) /apps/touchui-rte-table-summary/clientlib/summary.js, add the following code

(function ($) {
    "use strict";

    var _ = window._,
        Class = window.Class,
        CUI = window.CUI,
        EAEM_TABLE = null,
        COLUMN_CONTAINER = ".coral-RichText-dialog-columnContainer",
        SUMMARY_SEL = ".coral-RichText-dialog--tableprops textarea[data-type=\"summary\"]",
        SUMMARY_HTML = '<div class="coral-RichText-dialog-columnContainer">'
                            + '<div class="coral-RichText-dialog-column">'
                                +  'Summary'
                            +  '</div>'
                            +  '<div class="coral-RichText-dialog-column">'
                                +  '<textarea data-type="summary" class="coral-Textfield coral-Textfield--multiline coral-RichText--large"></textarea>'
                            +  '</div>'
                        + '</div>';

    if(CUI.rte.ui.cui.TablePropsDialog.eaemExtended){
        return;
    }

    CUI.rte.ui.cui.TablePropsDialog = new Class({

        extend: CUI.rte.ui.cui.TablePropsDialog,

        toString: "EAEMTablePropsDialog",

        initialize: function(config) {
            this.superClass.initialize.call(this, config);

            this.$summary = this.$container.find(SUMMARY_SEL);

            if(!_.isEmpty(this.$summary)){
                return;
            }

            this.$caption = this.$container.find(".coral-RichText-dialog--tableprops input[data-type=\"caption\"]");

            $(SUMMARY_HTML).insertBefore( this.$caption.closest(COLUMN_CONTAINER) );

            this.$summary = this.$container.find(SUMMARY_SEL);

            this.propertyItems.push(this.$summary);
        }
    });

    EAEM_TABLE = new Class({
        toString: "EAEMTable",

        extend: CUI.rte.commands.Table,

        transferConfigToTable: function(dom, execDef) {
            this.superClass.transferConfigToTable.call(this, dom, execDef);

            var com = CUI.rte.Common,
                config = execDef.value;

            if (config.summary) {
                com.setAttribute(dom, "summary", config.summary);
            } else {
                com.removeAttribute(dom, "summary");
            }
        }
    });

    CUI.rte.commands.CommandRegistry.register("_table", EAEM_TABLE);

    CUI.rte.ui.cui.TablePropsDialog.eaemExtended = true;
})(jQuery);