Start page / Template development / WebEdit / Easy-Edit / InplaceIncludeJS

WEBeditInplaceIncludeJS

The render format template WEBeditInplaceIncludeJS provides

the style sheets containing the Easy-Edit icons for editing content in the preview page,
the icon labelling (using tooltips) and
the JavaScript functions, which are responsible for animation and fading effects when the mouse is passed over Easy-Edit areas and on closing editing windows

WEBeditInplaceIncludeJS must be inserted in all page templates in which Easy-Edit is to be used, between the opening and closing HTML tag "head" with $CMS_RENDER(...)$:

...
<html>
  <head>
    <title>Page template</title>
    $CMS_RENDER(template:"WEBeditInplaceIncludeJS")$
  </head>
  <body>
...

Easy Edit icons

Like the Easy-Edit format templates, the Easy-Edit icons are included in the FirstSpirit scope of supply. They are located in the Media Store, in the "WebClient Media (EasyEdit)" folder (reference name: "WEBeditInplace").

The table below compares the functions of the icons with the reference names of the icons in the Media Store.

Any changes to these media are undone during an update.

Notes on updating Easy-Edit format templates

In the project properties, "Webedit Settings" menu item, the "Use Webedit" checkbox can be used to remove the WebEdit format templates from the project and then add them back again. The Easy-Edit format templates and the Easy-Edit icons are also removed or added back again at the same time.

In release projects, before the WebEdit format templates are removed (disable the "Use Webedit" checkbox), the following confirmation prompt appears: "CAUTION: Removing the WEBedit templates results in the release of the higher level folder of "WebClient Media (EasyEdit)". Is this ok?". Click "Yes" to remove the format templates and release the root node of the Media Store. If you select "No", the format templates are not removed.

If Easy-Edit icons and/or the "WebClient Media (EasyEdit)" folder have been manually removed from a release project and are to added back into the project by enabling the "Use Webedit" checkbox, the root node of the Media Store must be released first. Only then can the Easy Edit icons be created in the project with the original reference names, so that correct functioning of Easy Edit is ensured once again.

Labelling the icons

The tooltips of the Easy Edit icons are stored in the render format template WEBeditInplaceIncludeJS in the form of a Map with key value pairs. This map is stored in the page context in the weInplaceLangInfos variable. The following tooltips are defined as a default:

	Reference name of the icon	Language key	Function	Tooltip in German	Tooltip in English
	WE_newParagraph	addDataRecord	opens an editing window with which a new data record can be created	Datensatz anlegen	Add data record
	WE_newParagraph	addSection	opens an editing window with which a new section can be created above the selected section with the same section template	Absatz hinzufügen	Add section
	WE_cancel	cancel	closes the editing window without adopting any changes which have been made	Abbrechen	Cancel
	WE_delete	delete	deletes the respective section	Löschen	Delete
	WE_delete	deleteDataRecord	deletes the respective data record	Datensatz löschen	Delete data record
See note	--	deletionConfirmation	Display of the dialog for confirming the delete action	Möchten Sie das Objekt wirklich löschen?	Do you really want to delete this object?
	WE_language WE_language_inactive	displayLanguages	if more than one project language has been defined, this icon is used to show a tab on which language-dependent content can be entered; if there is only one project language, the icon is displayed in an inactive state	Sprachanzeige	Display languages
	WE_edit_active WE_edit_inactive	edit	opens the editing window with all input components of the respective section; if the section cannot be edited (e.g. section references), the icon is displayed in an inactive state	Bearbeiten	Edit
	WE_addSection	lastAddSectionDescription (Tooltip)	opens a window with which a new section can be created below the last section in the respective content area (see Note )	Absatz hinzufügen	Add section
	WE_addSection	lastAddSectionLabel (Button labelling)		Absatz hinzufügen	Add section
	WE_down WE_down_inactive	moveDown	moves the respective section down by one position; if the section is already in the bottom position, the icon is displayed in an active state	Nach unten verschieben	Move down
	WE_up WE_up_inactive	moveUp	moves the respective section up by one position; if the section is already in the top position, the icon is displayed in an inactive state	Nach oben verschieben	Move up
	WE_save_active	save	saves changes and closes the editing window	Speichern	Save
	WE_paragraph_active	--	indicates that it involves an Easy Edit area	--	--

Notes:

The tooltip language always depends on the respective displayed WebEdit project language: If "German" is selected as the project language, the German tooltips are displayed, the English tooltips are displayed for all other project languages.

In some cases, only one icon is available for 2 functions, e.g. for creating a section and creating a data record. Which function is actually available is automatically determined from the context and the corresponding tooltip is displayed accordingly (exception: Content which is output via the contentSelect function). For further information, see WEBeditInplaceEditBegin format template.

For the button for creating sections, labelling can be defined using the lastAddSectionLabel language key and a tooltip can be defined using the lastAddSectionDescription language key. The text chosen for lastAddSectionLabel may not be too long, as this is rendered on the "WE_addSection" button image and so a limited space only is available (the width of the image). For further information, see format template WEBeditInplaceBody.

There is no icon for the language key deletionConfirmation. The text is used in the following dialog, which opens if a section or a data record is to be deleted. Click "OK" to delete the object and "Cancel" to cancel the deletion:

Adjusting the tooltips

If necessary, the tooltips can be adjusted by assigning different values to the map's language keys using $CMS_SET(...)$. Depending on the application,

individual tooltips (see 1st example),
all tooltips for the whole project (see 2nd example and 3rd example) or
tooltips for individual sections (see 4th example)

can be exchanged.

1st example: Change a tooltip (project-wide)

To change the tooltip for an icon, $CMS_SET(...)$ is used to redefine the value for the language key concerned within each page template in which a $CMS_RENDER(template:"WEBeditInplaceIncludeJS")$ is given. Here it is important that the $CMS_SET(...)$ instruction directly follows the call of WEBeditInplaceIncludeJS:

$CMS_RENDER(template:"WEBeditInplaceIncludeJS")$
$-- Overwriting a language key --$
$CMS_IF(isSet(weInplaceLangInfos))$
    $CMS_SET(weInplaceLangInfos["moveUp"], "Please click here to move the section one position up")$
$CMS_END_IF$
$-- /Overwriting a language key --$

In this example themoveUp key, which has the default value Move up , is assigned the new value Please click here to move the section one position up.

To make a language-dependent change to the definition for a tooltip, you can use the call: #global.language.abbreviation, e.g.:

$CMS_RENDER(template:"WEBeditInplaceIncludeJS")$
$-- Language-dependent tooltips --$
$CMS_IF(isSet(weInplaceLangInfos))$

  $CMS_IF(#global.language.abbreviation == "DE")$
      $CMS_SET(weInplaceLangInfos["save"], "Möchten Sie die Änderungen speichern?")$
  $CMS_ELSE$
      $CMS_SET(weInplaceLangInfos["save"], "Do you want to save your changes?")$
  $CMS_END_IF$

$CMS_END_IF$
$-- /Language-dependent tooltips --$

In the example, the key save is assigned the value Möchten Sie die Änderungen speichern? in the language with abbreviation DE. The value: Do you want to save your changes? is output for all other languages.

2nd example: Change all tooltips (project-wide)

To change all tooltips, each key must be assigned a new value using $CMS_SET(...)$ :

$CMS_RENDER(template:"WEBeditInplaceIncludeJS")$
$-- Overwriting all language keys --$
$CMS_IF(isSet(weInplaceLangInfos))$
    $CMS_SET(weInplaceLangInfos, {
        "addDataRecord" :  "Please click to add data record.",
        "addSection" : "Please click to add section.",
        "cancel" : "Please click to cancel.",
        "delete" : "Please click to delete.",
        "deleteDataRecord" : "Please click to delete data record.",
        "deletionConfirmation", "Delete?",
        "displayLanguages" : "Please click to display language selection.",
        "edit" : "Please click to edit.",
        "lastAddSectionDescription" : "Please click to add section in last position."
        "lastAddSectionLabel" : "Please click to add section in last position." 
        "moveDown" : "Please click to move down.",
        "moveUp" : "Please click to move up.",
        "moveUp" : "Please click to save."
    })$
$CMS_END_IF$
$-- /Overwriting all language keys --$

For a uniform appearance, we recommend using the same tooltip language values in each page template. If necessary, however, the tooltips can also be assigned different values in different page templates. The change to a tooltip always affects the pages based on the page template with the overwritten language values.

3rd example: Multiple use of tooltips in several pages

For a uniform appearance, as an alternative to changing the tooltips in each individual page template, a separate format template can be created in which project-wide icon labelling is defined.

If all tooltips are to be redefined, the new format template could look like this:

$CMS_SET(#global.context("PAGE")["weInplaceLangInfos"],
                if(#global.language.abbreviation == "DE", {
                        "addDataRecord"  : "...",
                        "addSection" : "...",
                        "cancel" : "...",
                        "delete" : "...",
                        "deleteDataRecord" : "...",
                        "deletionConfirmation" : "...",
                        "displayLanguages" : "...",
                        "edit" : "...",
                        "lastAddSectionDescription" : "...",
                        "lastAddSectionLabel" : "...",
                        "moveDown" : "...",
                        "moveUp" : "...",
                        "save" : "..."
                    },{
                        "addDataRecord" : "...",
                        "addSection" : "...",
                        "cancel" : "...",,
                        "delete" : "...",
                        "deleteDataRecord" : "...",
                        "deletionConfirmation" : "...",
                        "displayLanguages" : "...",
                        "edit" : "...",
                        "lastAddSectionDescription" : "...",
                        "lastAddSectionLabel" : "...",
                        "moveDown" : "...",
                        "moveUp" : "...",
                        "save" : "...",                 }))$

In this example, the tooltips are defined multilingually. Instead of wildcards, ... the new values are assigned for each key, once for DE and once for all other languages.

If individual tooltips only are to be defined project-wide, the separate format template could look like this:

$CMS_IF(isSet(weInplaceLangInfos))$
    $CMS_SET(set_ft_langInfos, weInplaceLangInfos)$
    $CMS_SET(_void, set_ft_langInfos.put("edit", "..."))$
    $CMS_SET(_void, set_ft_langInfos.put("moveUp", "..."))$
    $CMS_SET(#global.context("PAGE")["weInplaceLangInfos"], set_ft_langInfos)$
$CMS_END_IF$

This format template must be integrated after the render call $CMS_RENDER(template:"WEBeditInplaceIncludeJS")$ in all all page templates in which these tooltips are to be used:

$CMS_RENDER(template:"WEBeditInplaceIncludeJS")$
$CMS_RENDER(template:"REFERENCENAME_OF_THE_FORMAT_TEMPLATE")$

The new format template gets the default language object from the Easy Edit format template $CMS_RENDER(template:"WEBeditInplaceIncludeJS")$ and writes it in the page context. The values from the format template WEBeditInplaceIncludeJS are used for the tooltips for which no values are defined in this format template.

To ensure the new format template is not deleted in the event of an update, it should not be in the "WebClient format templates (EasyEdit)" folder (reference name "webeditinplace").

4th example: Changing a tooltip for a section

If another tooltip is only to be used for a specific section, the new value is assigned within the section template. To do this, the following code must be added before the call $CMS_RENDER(template:"WEBeditInplaceEditBegin")$ or to change the tooltip and/or labelling of the "Add Section" button (media reference name WE_addSection) be added before the call $CMS_RENDER(template:"WEBeditInplaceBody")$:

$-- Temporarily overwriting a tooltip (section level) --$
$CMS_IF(isSet(weInplaceLangInfos))$
    $CMS_SET(set_st_weInplaceLangInfos, {:})$
    $CMS_SET(gv_void, set_st_weInplaceLangInfos.putAll(weInplaceLangInfos))$
    $CMS_SET(set_st_weInplaceLangInfos["moveUp"], "The labelling is different for this section!")$
    $CMS_SET(weInplaceLangInfos, set_st_weInplaceLangInfos)$
$CMS_END_IF$
$-- /Temporarily overwriting a tooltip (section level) --$

In this example, themoveUp key, which has the default value Move up , is assigned the new value The description differs for this section!. To do this, a new empty map is generated first, which is saved in the variable set_st_weInplaceLangInfos. (The _st_ is intended to make clear that this is a language definition map for the respective section.)

$CMS_SET(gv_void, set_st_weInplaceLangInfos.putAll(weInplaceLangInfos))$ is used to fill the map with the key value pairs of the weInplaceLangInfos map, which applies at page level. In the following line, the required value is assigned to the moveUp key within the map at section level. This map is then passed to the weInplaceLangInfos map with the new value.

Configure animation mode

If editable areas of the preview page are passed over with the mouse pointer (onmouseover) or left again (onmouseout), the optional animated and fastMode parameters can be used to switch on and off transition effects for the showing or hiding of borders and background colours. These parameters can also be used to enable or disable transition effects on closing editing windows.

The transition effects are achieved using a JavaScript supplied as well as the JavaScript framework MooTools, which is also supplied. For notes on using MooTools with other JavaScript frameworks, see below.

Three different animation modes can be set using the animated and fastMode parameters:

Animation mode disabled
If animated is set to false, when the Easy Edit areas are passed over with the mouse, they are highlighted by borders and background colours without animation. Transition effects are also not displayed when the editing window is closed.

$CMS_RENDER(template:"WEBeditInplaceIncludeJS")$

Animation mode enabled
If the animated parameter is set to true and the fastMode parameter is set to false, all transition effects are enabled. This means, Easy Edit areas are highlighted when passed over with the mouse pointer and on closing the editing window, a "soft" transition is realised, the new preview page with the changes is slowly shown. MooTools is only used in this mode.

$CMS_RENDER(template:"WEBeditInplaceIncludeJS", animated:true, fastMode:false)$

Fast animation mode
If both animated and fastMode parameters are set to true, Easy Edit areas are highlighted with transition effects when passed over with the mouse pointer. On the other hand, there is no animated preview transition on closing editing windows. The new preview with the changes made is uploaded immediately.

$CMS_RENDER(template:"WEBeditInplaceIncludeJS", animated:true, fastMode:false)$

The colour and border change on passing over Easy Edit areas with the mouse cursor can be influenced using the WEBeditInplaceEditBegin format template.

For a uniform appearance, we recommend using the same animation mode in each page template. However, if necessary, different animation modes can be defined in different page templates. The definition of an animation mode always affects the pages based on the corresponding page template.

Optional parameters

Parameter	Explanation / Example
animated	disabled/enabled transition effects on passing over Easy Edit areas with the mouse pointer and on closing editing windows, e.g. animated:false All transition effects are switched off with false and they are switched on with true. If the parameter is not given, transition effects are enabled as a default (animated:true).
fastMode	disables/enables animated preview transition after changes are made in the editing window, e.g. fastMode:true The animated preview transition is enabled with false and is disabled with true. If the parameter is not given, animated preview transition is enabled as a default (fastMode:true). The parameter must be used together with the animated parameter.

Parallel use of MooTools and other JavaScript frameworks

Conflicts can occur if different JavaScript Frameworks are used in parallel, e.g. MooTools and jQuery, as namespaces and function names can overlap. This especially applies to the dollar sign ($), which is used in the syntax of several Frameworks to address functions.

For example, to use jQuery in parallel with MooTools (or another JavaScript framework), the noConflict() function can be used to switch to so-called compatibility mode.

One option is to start the command jQuery.noConflict() with the file which jQuery uses, i.e. to call the file at the very beginning, e.g.

  jQuery.noConflict();     
  jQuery(document).ready(function(){
    if ($.browser.msie) {
     ...
    }
  ...
  }

Here it must be noted that jQuery.noConflict() cannot be called until jQuery Framework is uploaded, i.e. the jQuery.js file has been integrated in the page.

For further information on the noConflict() function, see jQuery documentation.

Print version | Page start