Editor Core

Class: ContentTree

Granite.author.ui. ContentTree

The content tree displays the current content structure that is loaded in the ContentFrame in a tree view.

It is located in the SidePanel

Initialized on Document#event:cq-editor-loaded

new ContentTree(config)

Parameters:
Name Type Description
config Granite.author.ui.ContentTree~Config

The content tree configuration object
Source:
ui/ui.ContentTree.js

Methods

<private> _addToDataModel(model, editable, added)

Adds the provided editable to the given data model

Parameters:
Name Type Description
model Granite.author.ui.ContentTree~DataModel
editable Granite.author.Editable

The Editable to be filtered or not from the data model
added object

Map of previously added Editables
Source:
ui/ui.ContentTree.js

<private> _addToTree(element, tree [, isContainer])

Adds the given Element to the given tree

Parameters:
Name Type Argument Description
element Object

Element to be added to the content tree
tree Coral.Tree

Content tree
isContainer boolean <optional>

Is the element a container
Source:
ui/ui.ContentTree.js
Returns:
Type
Coral.Tree.Item

<protected> _getElementTitle(editable, componentTitle)

Get the title to be displayed in the tree item

Parameters:
Name Type Description
editable Granite.author.Editable
componentTitle String

The title of the underlaying component
Source:
ui/ui.ContentTree.js

<protected> _isDisplayable(editable)

Indicates if the passed Editable should be filtered out from the data model to NOT be displayed in the content tree

Parameters:
Name Type Description
editable Granite.author.Editable

The Editable to be filtered or not from the data model
Source:
ui/ui.ContentTree.js
Returns:
Type
boolean

<private> _renderElement(element, tree)

Renders the Element in the tree

Parameters:
Name Type Description
element Granite.author.ui.ContentTree~Element

The Element to be rendered
tree Coral.Tree

Content tree
Source:
ui/ui.ContentTree.js
Returns:
Type
Coral.Tree.Item

init()

Initializes the content tree to be rendered when the according sidepanel tab is selected

Source:
ui/ui.ContentTree.js

render( [editables])

Renders the content tree data model in the passed container

Parameters:
Name Type Argument Description
editables Array.<Granite.author.Editable> <optional>

The Editable store used to derive the data model from
Source:
ui/ui.ContentTree.js

Type Definitions

Config

Represents a content tree configuration object

Type:
  • Object
Properties:
Name Type Description
container HTMLElement

The container of the content tree.
editables Array.<Granite.author.Editable>

The Editable store used to derive the data model from
Source:
ui/ui.ContentTree.js

DataModel

Represents a content tree data model, composed of Elements representing the content structure opened in the Editor.
It is an array of Elements, where container elements are structured as sub arrays (the first element of the sub array is the container itself and the rest its children).

E.g. The following tree:

  • a
  • b
  • c
    • d
    • e
  • f

would be represented as: [a, b, [c, d, e], f]

Type:
  • Array
Source:
ui/ui.ContentTree.js

Element

Represents a content element, part of a DataModel.

Type:
  • Object
Properties:
Name Type Description
val string

The internal value of content element (path of the corresponding Editable)
title string

The displayed title of the content element (title of the corresponding Component)
Source:
ui/ui.ContentTree.js