Tree

PMA .UI .Components Tree

Represents a UI component that shows a tree view that allows browsing through the directories and slides from multiple PMA.core servers. This component uses fancytree under the hood.

Constructor

new Tree(context, options)

Source:

components/js/tree.js, line 42

Tutorials:

Tutorial: 04-tree

Parameters:

Name Type Description

context Context

options

object

Configuration options

Properties

Name	Type	Attributes	Default	Description
`servers`	Array.<Tree~server>			An array of servers to show files from
`element`	string \| HTMLElement			The element that hosts the tree view. It can be either a valid CSS selector or an HTMLElement instance.
`renderNode`	function	<optional>		Allows tweaking after node state was rendered
`rootDirSortCb`	Tree~rootDirSortCb	<optional>		Function that sorts an array of directories
`filterDirectoryCb`	Tree~filterDirectoryCb	<optional>		Function that filters directories before they appear in the tree view
`filterFileCb`	Tree~filterFileCb	<optional>		Function that filters files before they appear in the tree view
`checkboxes`	boolean	<optional>	`false`	Allows multi selection of files with checkboxes
`autoDetectPmaStart`	boolean	<optional>	`false`	Whether the tree should try to connect to a PMA.core lite server
`autoExpandNodes`	boolean	<optional>	`false`	Whether the tree should expand nodes on single click
`preview`	boolean	<optional>	`false`	Whether the tree should show a popover preview of slides
`search`	boolean	<optional>	`false`	Whether the tree should show a textbox for enabling search

Fires:

Methods

addPmaStartServer(callback)

Source:

components/js/tree.js, line 433

Add a pma.start server if available

Parameters:

Name	Type	Description
`callback`	Tree~addServerCallback	The function to call when the attempt to add server completes

addServer(server)

Source:

components/js/tree.js, line 375

Adds a new server to the tree

Parameters:

Name	Type	Description
`server`	Tree~server	A server object

clearMultiSelection()

Source:

components/js/tree.js, line 534

Clears the selected nodes in the tree view

clearSearchResults()

Source:

components/js/tree.js, line 599

Clears any search results for this tree

collapseAll()

Source:

components/js/tree.js, line 684

Resets the state of all servers, collapses all visible folder, and resets the lazy load state

getFilesVisibility(serverUrl)

Source:

components/js/tree.js, line 648

Gets a value indicating whether files are shown for a specified server

Parameters:

Name	Type	Description
`serverUrl`	string	A server url to show/hide files for

getMultiSelection(contentTypeopt) → {Array.<Tree~item>}

Source:

components/js/tree.js, line 503

Gets an array with the checked slides or an empty array

Parameters:

Name	Type	Attributes	Default	Description
`contentType`	"slides" \| "directories" \| "all"	<optional>	`"slides"`	The type of content to return

Returns:

Type: Array.<Tree~item>

getSearchResults() → {Object.<string, Array.<string>>}

Source:

components/js/tree.js, line 592

Returns the last search results, grouped by the server name

Returns:

The object containing the result for each server available

Type: Object.<string, Array.<string>>

getSelectedDirectory() → {Tree~server}

Source:

components/js/tree.js, line 489

Gets the currently selected directory or null

Returns:

Type: Tree~server

getSelectedSlide() → {Tree~server}

Source:

components/js/tree.js, line 476

Gets the currently selected slide or null

Returns:

Type: Tree~server

getServers() → {Array.<Tree~server>}

Source:

components/js/tree.js, line 468

Returns the list of servers currently under the tree view

Returns:

Type: Array.<Tree~server>

listen(eventName, callback)

Source:

components/js/tree.js, line 622

Attaches an event listener

Parameters:

Name	Type	Description
`eventName`	PMA.UI.Components.Events	The name of the event to listen to
`callback`	function	The function to call when the event occurs

navigateTo(path)

Source:

components/js/tree.js, line 542

Navigates to a path in the tree

Parameters:

Name	Type	Description
`path`	string	The virtual path to navigate to. The server part of the path should be the server NAME(not the server url)

refresh(path)

Source:

components/js/tree.js, line 577

Refreshes a node in the tree specified by the path (server or directory)

Parameters:

Name	Type	Description
`path`	string	The virtual path to refresh. The server part of the path should be the server NAME(not the server url)

removePmaStartServer()

Source:

components/js/tree.js, line 420

Removes a Pma.start server if it exists

removeServer(index)

Source:

components/js/tree.js, line 403

Removes a server from the tree

Parameters:

Name	Type	Description
`index`	number	The index of the server to remove

search(value)

Source:

components/js/tree.js, line 612

Searches for files matching the specified value, and appends them to the tree. Use getSearchResults to get the search results

Parameters:

Name	Type	Description
`value`	string	The value to search for

Fires:

PMA.UI.Components.Events.event:SearchFinished

setFilesVisibility(serverUrl, visible)

Source:

components/js/tree.js, line 666

Shows or hides the files of a specified server

Parameters:

Name	Type	Description
`serverUrl`	string	A server url to show/hide files for
`visible`	boolean	Whether to show or hide files for the specific server

signOut()

Source:

components/js/tree.js, line 695

Resets the state of a specified server, collapses all visible folder, resets the lazy load state and invalidates the session

togglePreview(enable)

Source:

components/js/tree.js, line 362

Toggle the live preview on/off

Parameters:

Name	Type	Description
`enable`	boolean

Type Definitions

addServerCallback(success)

Source:

components/js/tree.js, line 81

Function that gets called when an attempt to add a server completes.

Parameters:

Name	Type	Description
`success`	boolean	Whether the server was successfully added or not

filterDirectoryCb(dirPath) → {boolean}

Source:

components/js/tree.js, line 67

Function that filters a directory given it's path

Parameters:

Name	Type	Description
`dirPath`	String

Returns:

Type: boolean

filterFileCb(filePath) → {boolean}

Source:

components/js/tree.js, line 74

Function that filters a file given it's path

Parameters:

Name	Type	Description
`filePath`	String

Returns:

Type: boolean

item

Source:

components/js/tree.js, line 52

Properties:

Name	Type	Description
`serverUrl`	string	The url of the server this node belongs to
`path`	string	The path of the node
`isDirectory`	boolean	Whether or not to the node is a directory

Holds information about a tree node

Type:

Object

rootDirSortCb(directories) → {Array.<String>}

Source:

components/js/tree.js, line 60

Function that sorts an array of directories

Parameters:

Name	Type	Description
`directories`	Array.<String>

Returns:

Type: Array.<String>

server

Source:

components/js/tree.js, line 43

Properties:

Name	Type	Attributes	Default	Description
`name`	string			The display name of the server
`url`	string			The url of the server
`path`	string	<optional>		An optional path of a folder in the server to show
`showFiles`	boolean	<optional>	`true`	Whether or not to display slides along with directories

Holds information about a PMA.core server

Type:

Object