With Méthode Swing it’s possible to add custom insertinfos to the Editor. The behaviour and the registration is similar to the Object Panel extension.

Registration of a custom insertinfo template

To register a new custom insertinfo template, use the following namespace

eidosmedia.webclient.insertinfo

and its function

add( options )
Table 1. Method information

Method

add

Parameter

Required {object} options - An object containing the options and the behaviour of the custom insertinfo template.

Returns

{undefined} undefined

The following is a very simple of a working custom insertinfo template.

(function() {

		eidosmedia.webclient.insertinfo.add({

		/**
		* name of the custom insertinfo implementation
		*/
		name: "CustomInsertInfo",

		/**
		* path of the html template relative to the insertinfo folder
		*/
		template: "customInsertInfo.html",

		/**
		* An array of insertinfo template configured in the DTX which the custom implementation will be connected.
		*/
		dtxTemplateName: ['Custom Image Size', 'Custom width-height'],
		/**
		*
		* @param ctx: The usual Context Object. See <<ctx>> for further details. It could be empty
		* if only placeholder is inserted.
		* @param htmlTemplate: a String containing the html of
		* the configured template
		*
		* @return a jQuery object with the html to show to the user
		*/
		init: function(ctx, htmlTemplate){

			/*
			* Elaborate the html and return the
			* html to show to the user
			*
			*/

			return $(htmlTemplate);
		},

		/**
		*
		* @param ctx: The usual Context Object. See <<ctx>> for further details. It could be empty
		* if only placeholder is inserted.
		* @param $html: the jQuery representation of the html
		* edited by the user
		*
		* @return an object with key values pairs:
		*    {
		*        "uVariable"  : "value",
		*	 "uVariable2" : "value2"
		*    }
		*/
		getValues: function(ctx, $html){
			/**
			* Elaborate $html object
			**/

			var width = $html.find('#custom_width').val();
			var height = $html.find('#custom_height').val();

			result = {
				"uWidth"  : width,
				"uHeight" : height
			}

			return result;
		}
    });

})();

Properties and methods of the custom insertinfo

The following paragraphs describe each of the available properties or methods for the custom insertinfo.

name

[Mandatory] {String} name defines the name of the custom inserinfo.

{
    // ...
    name: 'CustomInsertInfo',
    // ...
}

dtxTemplateName

[Mandatory] {Array,String} dtxTemplateName An array of insertinfo template configured in the DTX which the custom implementation will be connected.

String type is still supported only for backward compatibility.

Example

{
    // ...
    dtxTemplateName: ['Custom image size', 'Custom width height'],
    // ...
}

DTX configuration:

{
    <template name="Custom image size" element="fg-photo" mode="inline">
        <photo-group>
            <fg-photo width="{uWidth}" height="{uHeight}"></fg-photo>
            <photo-caption>
                <p xpAttributesSource="/*/iptc/caption/text()">
                	<source xpAttributesSource="/*/iptc/source/text()"><?EM-dummyText Insert caption source?></source>
                	<?EM-dummyText Insert caption here?>
                </p>
                <foto-links></foto-links>
            </photo-caption>
        </photo-group>
    </template>

    <template name="Custom width height" element="fg-photo" mode="inline">
        <photo-group>
            <fg-photo width="{uWidth}" height="{uHeight}"></fg-photo>
            <photo-caption>
                <p xpAttributesSource="/*/iptc/caption/text()">
                    <source xpAttributesSource="/*/iptc/source/text()"><?EM-dummyText Insert caption source?></source>
                    <?EM-dummyText Insert caption here?>
                </p>
                <foto-links></foto-links>
            </photo-caption>
        </photo-group>
    </template>
}
dtxTemplateName can contain the value of the attribute customInsertInfo of the link element of type insert. In this case the custom implementation will be connected to all the tempplate configured. See the documentation about custom configuration 
{
    <insertInfo type="Image" channel="Globe-Web" container="EOM::CompoundStory,EOM::MediaGallery">
        <link name="Insert" type="insert" customInsertInfo="customLinkInsert">

            <template name="Custom Image One" element="fg-photo" mode="inline">
                <photo-group>
                    <fg-photo width="{uWidth}" height="{uHeight}"></fg-photo>
                    <photo-caption>
                        <p xpAttributesSource="/*/iptc/caption/text()">
                            <source xpAttributesSource="/*/iptc/source/text()"><?EM-dummyText Insert caption source?></source>
                            <?EM-dummyText Insert caption here?>
                        </p>
                        <foto-links></foto-links>
                    </photo-caption>
                </photo-group>
            </template>

            <template name="Custom Image Two" element="fg-photo" mode="inline">
                <photo-group>
                    <fg-photo width="{uWidth}" height="{uHeight}"></fg-photo>
                    <photo-caption>
                        <p xpAttributesSource="/*/iptc/caption/text()">
                            <source xpAttributesSource="/*/iptc/source/text()"><?EM-dummyText Insert caption source?></source>
                            <?EM-dummyText Insert caption here?>
                        </p>
                        <foto-links></foto-links>
                    </photo-caption>
                </photo-group>
            </template

        </link>
    </insertInfo>
}
all the variables have to be wrapped with brackets (e.g. {uWidth}).

template

[Mandatory] {String} template defines the path of the custom panel HTML template. The templates must be put under the following folder:

{SWING-APP}/config/templates/insertinfo/
Swing supports Tomcat 9.x, so custom panels can be configured outside {SWING-APP}. See the paragraph How to configure custom insertinfo in external folder for some tips in how to take advantage of this configuration option.
the path specified in the template option is relative to the /insertinfo/ folder.

Example

{
    // ...
    template: 'customInsertInfo.html',
    // ...
}

init( ctx, htmlTemplate )

[Mandatory] {Function} init is called as soon as the panel is initialized. This function must return a valid jQuery object to be used.

Table 2. Method parameters
Name Description

ctx

The usual Context Object. See Context Object (ctx parameter) for further details. It could be empty if only placeholder is inserted.

htmlTemplate

htmlTemplate: a String containing the html of the configured template

Returns

{object} results - An object containig key value pairs of all the variables present in the insertinfo template.

Example

{
    // ...
    init: function( ctx, html ) {
        // Elaborate the html document an return a jQuery html object
        var $html = $(html);

        return $html;
    },
    // ...
}

getValues( params, $html )

[Mandatory] {Function} getValues is called when the user applies the insertinfo. This function must return a valid Object containing all the variables present in the template.

Table 3. Method parameters
Name Description

ctx

The usual Context Object. See Context Object (ctx parameter) for further details. It could be empty if only placeholder is inserted.

$html

The jQuery representation of the html edited by the user.

Returns

{object} results - An object containig key value pairs of all the variables present in the insertinfo template.

Example

{
    // ...
    getValues: function( ctx, $html ) {
        /*
		* Elaborate $html object
		*/
		var width = $html.find('#custom_width').val();
		var height = $html.find('#custom_height').val();
		result = {
			"uWidth"  : width,
			"uHeight" : height
		}
		return result;
    },
    // ...
}

Context Object (ctx parameter)

Basic structure of the Context Object

The Context object is made of a specific list of properties, and a number of publicly available methods.

{
    application: {
        getId: function()
    },
    area: {
        getType: function(),
        getName: function(),
        getContext: function()
    },
    component: {
        getType: function()
    },
    activeObject: {
        // Methods of the single object.
    },
    activeObjects: [{activeObject}] // An array of activeObject
    selection: [ ] // Array of objects. See below.
}
Table 4. Parameters list
Parameter Value type Description Values

application.getId()

String

Returns the application Id.

"swing", …​

area.getType()

String

Returns the area type.

"main" (for the main views), "editor"

area.getName()

String

Returns the area name.

"explorer", "dashboard", "myarea", "liveblogmanagement" (for "main" areas). "story" (for editors).

area.getContext()

String

Returns the area context.

"story-editor", "report-editor", "dwp-editor", "topic@editor", "topic@search", "topic@binder", "topicplan@editor", "topicplan@search", "topicplan@binder", "topicitem", "upload", "diagram-workflow", "search", "planning-calendar"

component.getType()

String

Returns the component type.

"toolbar", "grid", "objectpanel"…​

activeObject

Object

Returns an object with a set of methods. Refer to : Methods of the single object for the list of methods.

activeObjects

Array

Returns an array of activeObject(s). In bulk selection mode all selected items are returned here as array. In single selection mode array length is 1. Each activeObject is coupled with one selected item. Methods of the single object operate to that item.

selection

Array of Object

Returns an array with the currently selected items. Each item has the same set of methods available. Refer to : Methods of the single object for the list of methods.

Each context has a different value for these properties.

Methods available in the Context Object

Further details on the methods available in the Context Object can be found in the Context Object Methods reference.

How to configure custom insertinfo in external folder

Additional objects may be made available to Swing application by defining one or more nested components in Swing web context in server.xml. (for further details on Tomcat 9.x Resources configuration, please refer to Resources configuration).

This is an example of the external custom insertinfo configuration.

<Context docBase="com.eidosmedia.webclient.web-app"
    path="/swing" reloadable="false">
    <Resources
        className="org.apache.catalina.webresources.StandardRoot">
        <PreResources
            className="org.apache.catalina.webresources.DirResourceSet"
            base="/methode/meth01/extension/insertinfo" readOnly="true"
            webAppMount="/config/templates/insertinfo" />
    </Resources>
</Context>