Class: PortEditorSectionsView

PortEditorSectionsView()

A view of one or more Portal Editor sections

Constructor

new PortEditorSectionsView()

Source:

Extends

  • Backbone.View

Members

activeSection :PortEditorSectionView

A reference to the currently active editor section. e.g. Data, Metrics, Settings, etc.
Type:
Source:

activeSectionLabel :string

The name of the active section when the view is first loaded. This is retrieved from the router/URL
Type:
  • string
Source:

addPageLabel :string

A label for the section used to add a new page
Type:
  • string
Source:

className :string

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

displaySectionInUrl :boolean

Flag to add section name to URL. Enabled by default.
Type:
  • boolean
Source:

editorView :PortalEditorView

A reference to the PortalEditorView
Type:
Source:

events :Object

The events this view will listen to and the associated function to call.
Type:
  • Object
Source:

handleClass :string

A class name for the handles on tabs that the user can drag to re-order
Type:
  • string
Source:

metricsSectionTemplate :Underscore.Template

Type:
  • Underscore.Template
Source:

model :Portal

The PortalModel that is being edited
Type:
  • Portal
Source:

newPortalTempName

Source:

sectionEls :string

A jQuery selector for the section elements
Type:
  • string
Source:

sectionLabels :Array.<string>

The unique labels for each section in this Portal
Type:
  • Array.<string>
Source:
A jQuery selector for the element that a single section link will be inserted into
Type:
  • string
Source:

sectionLinkTemplate :Underscore.Template

Type:
  • Underscore.Template
Source:
A jQuery selector for the elements that are links to the individual sections
Type:
  • string
Source:
A jQuery selector for the element that the section links should be inserted into
Type:
  • string
Source:

sectionsContainer :string

A jQuery selector for the element that the editor sections should be inserted into
Type:
  • string
Source:

sortableLinksSelector :string

A selector for link or tab elements that the user is allowed to re-order, starting from the sectionLinksContainer
Type:
  • string
Source:

subviews :Array

The subviews contained within this view to be removed with onClose
Type:
  • Array
Source:

tagName :string

The HTML tag name for this view's element
Type:
  • string
Source:

template :Underscore.Template

Type:
  • Underscore.Template
Source:

type :string

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

Methods

addSection(sectionType)

Adds a section and tab to this view and the PortalModel
Parameters:
Name Type Description
sectionType string The type of section to add
Source:
Add a link to the given editor section
Parameters:
Name Type Description
sectionView PortEditorSectionView The view to add a link to
menuOptions Array.<string> An array of menu options for this section. e.g. Rename, Delete
isFocused boolean A boolean flag to enable focus on new section link
Source:

closePopovers()

Closes all the popovers in this view
Source:
Add a link to the given editor section
Parameters:
Name Type Description
sectionView PortEditorSectionView The view to add a link to
menuOptions Array.<string> An array of menu options for this section. e.g. Rename, Delete
Source:
Returns:
Type
Element

getSectionByLabel(label) → {PortEditorSectionView|false}

Returns the section view that has a label matching the one given.
Parameters:
Name Type Description
label string The label for the section
Source:
Returns:
- Returns false if a matching section view isn't found
Type
PortEditorSectionView | false

getSectionByModel(section) → {PortEditorSectionView|false}

Returns the section view that has a label matching the one given.
Parameters:
Name Type Description
section PortalSectionModel The section model
Source:
Returns:
- Returns false if a matching section view isn't found
Type
PortEditorSectionView | false

getUniqueSectionLabel(sectionModel) → {string}

Creates and returns a unique label for the given section. This label is just used in the view, because portal sections can have duplicate labels. But unique labels need to be used for navigation in the view.
Parameters:
Name Type Description
sectionModel PortEditorSection The section for which to create a unique label
Source:
Returns:
The unique label string
Type
string

handleSwitchSection(e)

When a section link has been clicked, switch to that section
Parameters:
Name Type Description
e Event The click event on the section link
Source:

limitLabelInput(e)

Stops user from entering more than 50 characters, and shows a message if user tries to exceed the limit. Also stops a user from entering RETURN or TAB characters, and instead re-directs to updateName(). In the case of the TAB key, the focus moves to the title field.
Parameters:
Name Type Description
e Event The keyup or keydown event when the user types in the portal-section-link field
Source:
navigateToData - Navigate to the data tab.
Source:

onClose()

This function is called when the app navigates away from this view. Any clean-up or housekeeping happens at this time.
Source:

removeSection(eopt, sectionLinkopt)

Removes a section and its tab from this view and the PortalModel. At least one of the parameters is required, but not both
Parameters:
Name Type Attributes Description
e Event <optional>
 (optional) The click event on the Remove button
sectionLink Element | jQuery <optional>
 The link element of the section to be removed.
Source:
Remove the link to the given section view
Parameters:
Name Type Description
sectionView View The view to remove the link to
Source:

renameSection(eopt)

Renames a section in the tab in this view and in the PortalSectionModel
Parameters:
Name Type Attributes Description
e Event <optional>
 (optional) The click event on the Rename button
Source:

render()

Renders the PortEditorSectionsView
Source:

renderAddSection()

Render a section for adding a new section
Source:

renderContentSection(section, isNew)

Render a single markdown section in the editor (sectionView + link)
Parameters:
Name Type Description
section PortalSectionModel The section to render
isNew boolean If true, this section will be rendered as a section that was just added by the user
Source:

renderContentSections()

Render all sections in the editor for each content section in the Portal
Source:

renderDataSection()

Renders a Data section in this view
Source:

renderMetricsSection()

Renders the Metrics section of the editor
Source:

renderSettings()

Renders the Settings section of the editor
Source:

showSection(eopt)

Shows a previously-hidden section
Parameters:
Name Type Attributes Description
e Event <optional>
 (optional) The click event on the Show button
Source:

showValidation(elements)

Shows a validation error message and adds error styling to the given elements
Parameters:
Name Type Description
elements jQuery The elements to add error styling and messaging to
Source:

switchSection(sectionViewopt)

Manually switch to a section subview by making the tab and tab panel active. Navigation between sections is usually handled automatically by the Bootstrap library, but a manual switch may be necessary sometimes
Parameters:
Name Type Attributes Description
sectionView PortEditorSectionView <optional>
 The section view to switch to. If not given, defaults to the activeSection set on the view.
Source:
Adds or removes the metrics link depending on the 'hideMetrics' option in the model.
Source:

toggleRemoveSectionOption()

toggleRemoveSectionOption - Disables the hide and remove option from section link if it's the only section left. Re-enables the remove/hide link when a new section is added. Called on initial render and each time a section is added, removed, shown, or hidden.
Source:

updateName(e)

Update the section label
Parameters:
Name Type Description
e The event triggering this method
Source:

updatePageOrder()

Using the "section-name" data attribute set on each section link, and the order that the links are displayed in the DOM, update the pageOrder option in the portal model.
Source:

updatePath(showSectionLabelopt)

Update the window location path with the active section name
Parameters:
Name Type Attributes Description
showSectionLabel boolean <optional>
 If true, the editor section label will be added to the path
Source:

updateSectionLabelsList()

Add a new unique label to the list of unique section labels (used the ensure that tab links and anchors are unique, otherwise, tab switching does not work)
Source:
Add a link to the given editor section
Parameters:
Name Type Description
sectionView PortEditorSectionView The view to add a link to
menuOptions Array.<string> An array of menu options for this section. e.g. Rename, Delete
Source:

PortEditorSectionsView(options)

new PortEditorSectionsView(options)

Creates a new PortEditorSectionsView
Parameters:
Name Type Description
options Object A literal object with options to pass to the view
Source:

Members

activeSection :PortEditorSectionView

A reference to the currently active editor section. e.g. Data, Metrics, Settings, etc.
Type:
Source:

activeSectionLabel :string

The name of the active section when the view is first loaded. This is retrieved from the router/URL
Type:
  • string
Source:

addPageLabel :string

A label for the section used to add a new page
Type:
  • string
Source:

className :string

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

displaySectionInUrl :boolean

Flag to add section name to URL. Enabled by default.
Type:
  • boolean
Source:

editorView :PortalEditorView

A reference to the PortalEditorView
Type:
Source:

events :Object

The events this view will listen to and the associated function to call.
Type:
  • Object
Source:

handleClass :string

A class name for the handles on tabs that the user can drag to re-order
Type:
  • string
Source:

metricsSectionTemplate :Underscore.Template

Type:
  • Underscore.Template
Source:

model :Portal

The PortalModel that is being edited
Type:
  • Portal
Source:

newPortalTempName

Source:

sectionEls :string

A jQuery selector for the section elements
Type:
  • string
Source:

sectionLabels :Array.<string>

The unique labels for each section in this Portal
Type:
  • Array.<string>
Source:
A jQuery selector for the element that a single section link will be inserted into
Type:
  • string
Source:

sectionLinkTemplate :Underscore.Template

Type:
  • Underscore.Template
Source:
A jQuery selector for the elements that are links to the individual sections
Type:
  • string
Source:
A jQuery selector for the element that the section links should be inserted into
Type:
  • string
Source:

sectionsContainer :string

A jQuery selector for the element that the editor sections should be inserted into
Type:
  • string
Source:

sortableLinksSelector :string

A selector for link or tab elements that the user is allowed to re-order, starting from the sectionLinksContainer
Type:
  • string
Source:

subviews :Array

The subviews contained within this view to be removed with onClose
Type:
  • Array
Source:

tagName :string

The HTML tag name for this view's element
Type:
  • string
Source:

template :Underscore.Template

Type:
  • Underscore.Template
Source:

type :string

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

Methods

addSection(sectionType)

Adds a section and tab to this view and the PortalModel
Parameters:
Name Type Description
sectionType string The type of section to add
Source:
Add a link to the given editor section
Parameters:
Name Type Description
sectionView PortEditorSectionView The view to add a link to
menuOptions Array.<string> An array of menu options for this section. e.g. Rename, Delete
isFocused boolean A boolean flag to enable focus on new section link
Source:

closePopovers()

Closes all the popovers in this view
Source:
Add a link to the given editor section
Parameters:
Name Type Description
sectionView PortEditorSectionView The view to add a link to
menuOptions Array.<string> An array of menu options for this section. e.g. Rename, Delete
Source:
Returns:
Type
Element

getSectionByLabel(label) → {PortEditorSectionView|false}

Returns the section view that has a label matching the one given.
Parameters:
Name Type Description
label string The label for the section
Source:
Returns:
- Returns false if a matching section view isn't found
Type
PortEditorSectionView | false

getSectionByModel(section) → {PortEditorSectionView|false}

Returns the section view that has a label matching the one given.
Parameters:
Name Type Description
section PortalSectionModel The section model
Source:
Returns:
- Returns false if a matching section view isn't found
Type
PortEditorSectionView | false

getUniqueSectionLabel(sectionModel) → {string}

Creates and returns a unique label for the given section. This label is just used in the view, because portal sections can have duplicate labels. But unique labels need to be used for navigation in the view.
Parameters:
Name Type Description
sectionModel PortEditorSection The section for which to create a unique label
Source:
Returns:
The unique label string
Type
string

handleSwitchSection(e)

When a section link has been clicked, switch to that section
Parameters:
Name Type Description
e Event The click event on the section link
Source:

limitLabelInput(e)

Stops user from entering more than 50 characters, and shows a message if user tries to exceed the limit. Also stops a user from entering RETURN or TAB characters, and instead re-directs to updateName(). In the case of the TAB key, the focus moves to the title field.
Parameters:
Name Type Description
e Event The keyup or keydown event when the user types in the portal-section-link field
Source:
navigateToData - Navigate to the data tab.
Source:

onClose()

This function is called when the app navigates away from this view. Any clean-up or housekeeping happens at this time.
Source:

removeSection(eopt, sectionLinkopt)

Removes a section and its tab from this view and the PortalModel. At least one of the parameters is required, but not both
Parameters:
Name Type Attributes Description
e Event <optional>
 (optional) The click event on the Remove button
sectionLink Element | jQuery <optional>
 The link element of the section to be removed.
Source:
Remove the link to the given section view
Parameters:
Name Type Description
sectionView View The view to remove the link to
Source:

renameSection(eopt)

Renames a section in the tab in this view and in the PortalSectionModel
Parameters:
Name Type Attributes Description
e Event <optional>
 (optional) The click event on the Rename button
Source:

render()

Renders the PortEditorSectionsView
Source:

renderAddSection()

Render a section for adding a new section
Source:

renderContentSection(section, isNew)

Render a single markdown section in the editor (sectionView + link)
Parameters:
Name Type Description
section PortalSectionModel The section to render
isNew boolean If true, this section will be rendered as a section that was just added by the user
Source:

renderContentSections()

Render all sections in the editor for each content section in the Portal
Source:

renderDataSection()

Renders a Data section in this view
Source:

renderMetricsSection()

Renders the Metrics section of the editor
Source:

renderSettings()

Renders the Settings section of the editor
Source:

showSection(eopt)

Shows a previously-hidden section
Parameters:
Name Type Attributes Description
e Event <optional>
 (optional) The click event on the Show button
Source:

showValidation(elements)

Shows a validation error message and adds error styling to the given elements
Parameters:
Name Type Description
elements jQuery The elements to add error styling and messaging to
Source:

switchSection(sectionViewopt)

Manually switch to a section subview by making the tab and tab panel active. Navigation between sections is usually handled automatically by the Bootstrap library, but a manual switch may be necessary sometimes
Parameters:
Name Type Attributes Description
sectionView PortEditorSectionView <optional>
 The section view to switch to. If not given, defaults to the activeSection set on the view.
Source:
Adds or removes the metrics link depending on the 'hideMetrics' option in the model.
Source:

toggleRemoveSectionOption()

toggleRemoveSectionOption - Disables the hide and remove option from section link if it's the only section left. Re-enables the remove/hide link when a new section is added. Called on initial render and each time a section is added, removed, shown, or hidden.
Source:

updateName(e)

Update the section label
Parameters:
Name Type Description
e The event triggering this method
Source:

updatePageOrder()

Using the "section-name" data attribute set on each section link, and the order that the links are displayed in the DOM, update the pageOrder option in the portal model.
Source:

updatePath(showSectionLabelopt)

Update the window location path with the active section name
Parameters:
Name Type Attributes Description
showSectionLabel boolean <optional>
 If true, the editor section label will be added to the path
Source:

updateSectionLabelsList()

Add a new unique label to the list of unique section labels (used the ensure that tab links and anchors are unique, otherwise, tab switching does not work)
Source:
Add a link to the given editor section
Parameters:
Name Type Description
sectionView PortEditorSectionView The view to add a link to
menuOptions Array.<string> An array of menu options for this section. e.g. Rename, Delete
Source: