libs/cq/gui/components/authoring/editors/clientlibs/core/js/

Class: Editable

Granite.author. Editable

An Editable represents the basic JS entity on which we can perform editing / authoring related actions (in-place edit, properties configuration via dialog, copy/cut/paste/delete, etc.)

All the Editables of a given page are stored in Granite.author.editables.

new Editable(dom)

Parameters:
Name Type Description
dom jQuery

The content DOM corresponding to the HTML rendered by the corresponding component included by the page.
Source:
model/Editable.js

Extends

Members

config :Granite.author.Editable~Config

The computed configuration object (built via Editable#_buildConfig)

Type:
Overrides:
Source:
model/Editable.js

dom :jQuery

The content DOM corresponding to the HTML rendered by the corresponding component included by the page

Type:
  • jQuery
Inherited From:
Source:
model/Inspectable.js

overlay :jQuery

The overlay of the content DOM (allows user interaction with it)

Type:
  • jQuery
Inherited From:
Source:
model/Inspectable.js

path :String

The content path of the corresponding content node in the repository

Type:
Inherited From:
Overrides:
Source:
model/Inspectable.js

type :String

The sling resource type of the corresponding component

Type:
Inherited From:
Overrides:
Source:
model/Inspectable.js

Methods

<private> _buildConfig(config)

Builds the configuration based on the given configuration object, parent configuration and default configuration

Parameters:
Name Type Description
config Granite.author.Editable~Config

Configuration object
Source:
model/Editable.js

actionsUpdated()

Actions are ready to be loaded (use this hook in subclasses to update the list of available actions)

Source:
model/Editable.js

afterChildCopy()

Executes the afterchildcopy listener.
NB: Inside of the listener function, "this" refers to the current Editable.

Source:
model/Editable.js

afterChildDelete()

Executes the afterchilddelete listener.
NB: Inside of the listener function, "this" refers to the current Editable.

Source:
model/Editable.js

afterChildEdit()

Executes the afterchildedit listener.
NB: Inside of the listener function, "this" refers to the current Editable.

Source:
model/Editable.js

afterChildInsert()

Executes the afterchildinsert listener.
NB: Inside of the listener function, "this" refers to the current Editable.

Source:
model/Editable.js

afterChildMove()

Executes the afterchildmove listener.
NB: Inside of the listener function, "this" refers to the current Editable.

Source:
model/Editable.js

afterCopy()

Executes the aftercopy listener.
NB: Inside of the listener function, "this" refers to the current Editable.

Source:
model/Editable.js

afterDelete()

Executes the afterdelete listener.
NB: Inside of the listener function, "this" refers to the current Editable.

Source:
model/Editable.js

afterEdit()

Executes the afteredit listener.
NB: Inside of the listener function, "this" refers to the current Editable.

Source:
model/Editable.js

afterInsert()

Executes the afterinsert listener.

Source:
model/Editable.js

afterMove()

Executes the aftermove listener.
NB: Inside of the listener function, "this" refers to the current Editable.

Source:
model/Editable.js

beforeChildCopy(defaultCopyFunction, childEditable)

Executes the beforechildcopy listener. If "false" is returned, the insert child operation gets aborted.
If the listener explicitly returns false, then the operation should be aborted.
NB: Inside of the listener function, "this" refers to the current Editable.

Parameters:
Name Type Description
defaultCopyFunction function

The default copy operation to be applied (to allow clients to override it).
childEditable Editable

The editable to be copied
Source:
model/Editable.js
Returns:

Returns the value resulting from the listener's execution.

Type
Boolean

beforeChildDelete(defaultDeleteFunction, childEditable)

Executes the beforechildinsert listener. If "false" is returned, the insert child operation gets aborted.
If the listener explicitly returns false, then the operation should be aborted.
NB: Inside of the listener function, "this" refers to the current Editable.

Parameters:
Name Type Description
defaultDeleteFunction function

The default delete operation to be applied (to allow clients to override it).
childEditable Editable

The editable to be deleted
Source:
model/Editable.js
Returns:

Returns the value resulting from the listener's execution.

Type
Boolean

beforeChildEdit(defaultEditFunction, properties, childEditable)

Executes the beforechildedit listener. If "false" is returned, the edit operation gets aborted.
If the listener explicitly returns false, then the operation should be aborted.
NB: Inside of the listener function, "this" refers to the current Editable.

Parameters:
Name Type Description
defaultEditFunction function

The default edit operation to be applied (to allow clients to override it).
properties Object

The properties to be updated
childEditable Editable

The editable to be edited
Source:
model/Editable.js
Returns:

Returns the value resulting from the listener's execution.

Type
Boolean

beforeChildInsert(defaultChildInsertFunction, component)

Executes the beforechildinsert listener. If "false" is returned, the insert child operation gets aborted.
If the listener explicitly returns false, then the operation should be aborted.
NB: Inside of the listener function, "this" refers to the current Editable.

Parameters:
Name Type Description
defaultChildInsertFunction function

The default move operation to be applied (to allow clients to override it).
component Object

The component definition of the new child
Source:
model/Editable.js
Returns:

Returns the value resulting from the listener's execution.

Type
Boolean

beforeChildMove(defaultMoveFunction, editable)

Executes the beforechildmove listener. If "false" is returned, the move operation gets aborted.
If the listener explicitly returns false, then the operation should be aborted.
NB: Inside of the listener function, "this" refers to the current Editable.

Parameters:
Name Type Description
defaultMoveFunction function

The default move operation to be applied (to allow clients to override it).
editable Editable

The editable to be copied
Source:
model/Editable.js
Returns:

Returns the value resulting from the listener's execution.

Type
Boolean

beforeCopy(defaultCopyFunction)

Executes the beforecopy listener. If "false" is returned, the copy operation gets aborted.
If the listener explicitly returns false, then the operation should be aborted.
NB: Inside of the listener function, "this" refers to the current Editable.

Parameters:
Name Type Description
defaultCopyFunction function

The default copy operation to be applied (to allow clients to override it).
Source:
model/Editable.js
Returns:

Returns the value resulting from the listener's execution.

Type
Boolean

beforeDelete(defaultDeleteFunction)

Executes the beforedelete listener.
If the listener explicitly returns false, then the operation should be aborted.
NB: Inside of the listener function, "this" refers to the current Editable.

Parameters:
Name Type Description
defaultDeleteFunction function

The default delete operation to be applied (to allow clients to override it).
Source:
model/Editable.js
Returns:

Returns the value resulting from the listener's execution.

Type
Boolean

beforeEdit(defaultEditFunction, properties)

Executes the beforeedit listener. If "false" is returned, the edit operation gets aborted.
If the listener explicitly returns false, then the operation should be aborted.
NB: Inside of the listener function, "this" refers to the current Editable.

Parameters:
Name Type Description
defaultEditFunction function

The default edit operation to be applied (to allow clients to override it).
properties Object

The properties to be updated
Source:
model/Editable.js
Returns:

Returns the value resulting from the listener's execution.

Type
Boolean

beforeMove(defaultMoveFunction)

Executes the beforemove listener. If "false" is returned, the move operation gets aborted.
If the listener explicitly returns false, then the operation should be aborted.
NB: Inside of the listener function, "this" refers to the current Editable.

Parameters:
Name Type Description
defaultMoveFunction function

The default move operation to be applied (to allow clients to override it).
Source:
model/Editable.js
Returns:

Returns the value resulting from the listener's execution.

Type
Boolean

canInPlaceEdit()

Tells if in-place edit is possible on the editable
For instance, of in-place editor is the image editor, it returns true only if the editable has an image to edit

Source:
model/Editable.js
Returns:

Indicates if the editable can be in-place edited

Type
Boolean

destroy()

Destroys this Editable's references

Source:
model/Editable.js

getDropTarget( [id])

Returns the drop targets available on the Editable

Parameters:
Name Type Argument Description
id string <optional>

If passed a single drop target object will be returned (the one matching the identifier)
Source:
model/Editable.js
Returns:

Returns the drop targets of the Editable (null if not found or empty)

Type
Array | Object

getTypeName()

Returns the type name of the Editable class

Source:
model/Editable.js
Returns:

returns the unique name of the Editable

Type
String

hasAction(actionName)

Returns true if the action is allowed from either the edit config of the editable
NB: This doesn't necessarily means that the action could be executed on the editable; because (1) the toolbar defines what actions are available for a given layer,
and (2) the action itself defines a condition to be evaluated before it could be performed on an editable.

Parameters:
Name Type Description
actionName String

The name of the action (default actions are usually uppercase)
Source:
model/Editable.js
Returns:

Returns true if the action is present in the config of the Editable

Type
boolean

hasActionsAvailable()

Source:
model/Editable.js
Returns:

Returns true if some actions are available on the Editable

Type
boolean

isOrderable()

Indicates if the editable is orderable

Source:
model/Editable.js
Returns:
Type
boolean

updateComponentList()

Executes the afterinsert listener.

Source:
model/Editable.js

updateConfig(config)

Updates the config from the given config passed

Parameters:
Name Type Description
config Granite.author.Editable~Config
Source:
model/Editable.js

Type Definitions

Config

Represents the Editable Configuration object.
Contains all the properties that configure the different aspects of the Editable

Type:
  • object
Properties:
Name Type Description
csp string

Cell Search Path expression. It is a path expression where (1) the slash is the delimiter, (2) the pipe represents a variation and (3) chunks are component type names.
Example: "contentpage|page/title"
cellSearchPath Array.<string>

Computed list of all Cell Search Paths (derived from the csp expression). It is used to retrieve the corresponding component's design cell.
Example: ["contentpage/title", "page/title", "contentpage", "page", "title"]
childConfig Granite.author.Editable~EditConfig

Provides all the edit behavior that the children of the Editable will inherit
dialog string

Path to the cq:dialog node
dialogClassic string

Path to the dialog node (Classic UI)
dialogSrc string

URL of dialog (including content suffix) that will be used to configure Editable content properties
isDropTarget boolean

Indicates if the Editable could be used as a drop target
path string

Path to the corresponding Editable in the repository
editConfig Granite.author.Editable~EditConfig

Provides all the edit behavior of the Editable
type string

Sling resource type of the corresponding Component
Source:
model/Editable.js

EditConfig

Represents the cq:EditConfig object.
Contains all the properties defined on the Component level to configure the editing behavior of the Editable.

Type:
  • object
Properties:
Name Type Argument Default Description
actions Array.<Object> <optional>
 ['EDIT', 'ANNOTATE']

List of the actions available on the Editable
dropTargets Array.<Object> <optional>

List of asset types and groups allowed to be dropped on the Editable
orderable boolean <optional>
 true

Indicates if the Editable is orderable or not
inplaceEditingConfig Object <optional>

Defines the in place editing configuration of the Editable
listeners Object <optional>

Contains the different cq:listeners defined for the Editable.
All listeners are no operations by default.
Inside all listeners, "this" refers to the current Editable.

Properties
Name Type Argument Default Description
beforedelete function <optional>
 function (deleteFunction) {}
beforeedit function <optional>
 function (editFunction, properties) {}
beforecopy function <optional>
 function (copyFunction) {}
beforemove function <optional>
 function (moveFunction) {}
beforechildinsert function <optional>
 function (insertFunction, component) {}
beforechilddelete function <optional>
 function (deleteFunction, childEditable) {}
beforechildedit function <optional>
 function (editFunction, properties, childEditable) {}
beforechildcopy function <optional>
 function (copyFunction, childEditable) {}
beforechildmove function <optional>
 function (moveFunction, childEditable) {}
afterdelete function <optional>
 function () {}
afteredit function <optional>
 function () {}
aftercopy function <optional>
 function () {}
afterinsert function <optional>
 function () {}
aftermove function <optional>
 function () {}
afterchildinsert function <optional>
 function (childEditable) {}
afterchilddelete function <optional>
 function (childEditable) {}
afterchildedit function <optional>
 function (childEditable) {}
afterchildcopy function <optional>
 function (childEditable) {}
afterchildmove function <optional>
 function (childEditable) {}
updatecomponentlist function <optional>
 function (cellSearchPath, allowedComponents, components) {}
Source:
model/Editable.js