Constructor
- Since:
- Source:
Extends
Members
className :string
The HTML classes to use for this view's element
Type:
- Source:
classes :Object
The classes of the sub-elements that combined to create a toolbar view.
Type:
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. |
toggle |
string
|
The element in the template that acts as a toggle to
close the toolbar. |
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:
- Source:
model :Map
The model that this view uses
Type:
- Source:
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 three element,
one with the contentContainer class, one with the linksContainer class, and one
with the toggle class. See
ToolbarView#classes.
Type:
- Source:
type :string
The type of View this is
Type:
- 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
events() → {Object}
Creates an object that gives the events this view will listen to and the
associated function to call. Each entry in the object has the format 'event
selector': 'function'.
- Source:
Returns:
-
Type
-
Object
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:
- 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:
Renders this view
- Source:
Returns:
Returns the rendered view element
-
Type
-
ToolbarView
renderSectionContent(sectionOption) → {HTMLElement}
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:
Returns the content container with the rendered view
-
Type
-
HTMLElement
renderSectionLink(sectionOption) → {HTMLElement}
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