Class: ToolbarView

ToolbarView()

The map toolbar view is a side bar that contains information about a map, including the available layers, plus UI for changing the settings of a map.

Screenshot

Constructor

new ToolbarView()

Since:
  • 2.18.0
Source:

Extends

  • Backbone.View

Members

className :string

The HTML classes to use for this view's element
Type:
  • string
Source:

classes :Object

The classes of the sub-elements that combined to create a toolbar view.
Type:
  • Object
Properties:
Name Type Description
open string The class to add to the view when the toolbar is open (and the content is visible)
contentContainer string The element that contains all containers for the toolbar section content. This element must be part of this view's template.
linksContainer string The container for all of the section links (i.e. tabs)
link string A section link
linkTitle string The section link title
linkIcon string The section link icon
linkActive string The class to add to a link when its content is active
content string A section's content. This element will be the container for the view associated with this section.
contentActive string A class added to a content container when it is the active section
Source:

isOpen :Boolean

Whether or not the toolbar menu is opened. This will get updated when the user interacts with the toolbar links.
Type:
  • Boolean
Source:

model :Map

The model that this view uses
Type:
Source:

sectionOptions :Array.<SectionOption>

The sections displayed in the toolbar will be created based on the options set in this array.
Type:
Source:

template :Underscore.template

The primary HTML template for this view. The template must have two element, one with the contentContainer class, and one with the linksContainer class. See ToolbarView#classes.
Type:
  • Underscore.template
Source:

type :string

The type of View this is
Type:
  • string
Source:

Methods

activateSection(sectionEl)

Display the content of a given section
Parameters:
Name Type Description
sectionEl SectionElement The section to activate
Source:

close()

Closes the toolbar. Also inactivates all sections.
Source:

createIcon(iconString) → {HTMLElement}

Given the name of a Font Awesome 3.2 icon, or an SVG string, creates an icon element with the appropriate classes for the tool bar link (tab)
Parameters:
Name Type Description
iconString MapIconString The string to use to create the icon
Source:
Returns:
Returns either an element with a Font Awesome icon, or and SVG with a custom icon
Type
HTMLElement

defaultActivationAction(sectionEl)

The default action for a section being activated.
Parameters:
Name Type Description
sectionEl SectionElement The section to activate
Source:

handleLinkClick(sectionEl)

Executed when any one of the tabs/links are clicked. Opens the toolbar if it's closed, closes it if the active section is clicked, and otherwise activates the clicked section content.
Parameters:
Name Type Description
sectionEl SectionElement
Source:

inactivateAllSections()

Hide all of the sections in a toolbar view
Source:

inactivateSection(sectionEl)

Hide the content of a section
Parameters:
Name Type Description
sectionEl SectionElement The section to inactivate
Source:

initialize(optionsopt)

Executed when a new ToolbarView is created
Parameters:
Name Type Attributes Description
options Object <optional>
 A literal object with options to pass to the view
Source:

open()

Opens the toolbar and displays the content of the active toolbar section
Source:

render() → {ToolbarView}

Renders this view
Source:
Returns:
Returns the rendered view element
Type
ToolbarView

renderSectionContent(sectionOption) → {SectionContentReturnType}

Creates a container for a toolbar section's content, then rendered the specified view in that container.
Parameters:
Name Type Description
sectionOption SectionOption The view and view options that are set in the Section Option are used to create the content container
Source:
Returns:
The content container with the rendered view, and the Backbone.View itself.
Type
SectionContentReturnType
Creates a link/tab for a given toolbar section
Parameters:
Name Type Description
sectionOption SectionOption The label and icon that are set in the Section Option are used to create the link content
Source:
Returns:
Returns the link element
Type
HTMLElement