Skip to content

Class Reference

Jump to bottom
Armagan Amcalar edited this page Jan 14, 2019 · 6 revisions

Classes

Component ⇐ EventEmitter

Component is a role that determines an aspect of your user interface. It defines what your users see on the page. Every Component includes a set of behaviors, like what happens when a user clicks on a button.

Components should be dummy, in that they should have no memory, or state, of their own. Components know how to draw a user interface and how to handle user input; whose business logic should be delegated to other classes in the system.

View ⇐ Component

The default view class for all the views in an erste application. A View is simply a Component with additional convenience features. For example, a View renders to document.body by default, whereas a Component silently ignores the call if no root is provided. Also, regardless of the template, a view attribute is added to the root DOM elements of each View, so that uniform styling across all views is possible without much heavy-lifting.

For implementing full-screen, navigable views, users should subclass View.

erste requires you to manually instantiate all the views in your application.

ViewManager

This class handles view transitions and view history in a consistent manner similar to NavigationControllers in other frameworks. An instance of this class should be used by views that will contain other views, and will allow navigation in between them.

Also, each multi-view application should have at least one root ViewManager.

InfiniteScroll ⇐ Component
NavBar ⇐ Component
PullToRefresh ⇐ Component
Sidebar ⇐ Component
TabView ⇐ View

Component ⇐ EventEmitter

Component is a role that determines an aspect of your user interface. It defines what your users see on the page. Every Component includes a set of behaviors, like what happens when a user clicks on a button.

Components should be dummy, in that they should have no memory, or state, of their own. Components know how to draw a user interface and how to handle user input; whose business logic should be delegated to other classes in the system.

Kind: global class Extends: EventEmitter

new Component()

Creates a new View instance. Users should subclass this class to incorporate their own functionality, as the default View instance doesn't provide anything out of the box.

Example

import {Component} from 'erste';

class ButtonWithLabel extends Component {
    template() {
        return `
        <button-with-label>
            <h1>Hello world!</h1>
            <button>Tap me!</button>
        </button-with-label>
        `;
    }

    onTapButton() {
        this.$('h1').innerText = 'Thanks for the tap!';
    }

    get events() {
        return {
            'tap': {
                'button': this.onTapButton
            }
        }
    }
}

component.id ⇒ string

The auto-generated, unique id of the Component.

Kind: instance property of Component

component.el ⇒ HTMLElement

The DOM element of the Component. This is a getter that first checks whether the component has been rendered as a DOM element, and returns the HTMLElement if so. If the component hasn't been rendered yet, it looks for the element in the DOM. If it's still not yet in the DOM, it renders the element to a DOM element and returns it accordingly.

Kind: instance property of Component

component.tagExtension_()

Provides template for populating the id field of a component.

Should not be overridden.

Kind: instance method of Component Access: protected

component.toString()

This method makes sure that users can conveniently include Components in the template of an owner component. Whenever a Component is cast to a string, we calculate the template and return it.

Notice that this is only a template, and does not correspond to the actual Component instance. In other words, one can't move a Component instance from a parent to a new parent simply by using its template in the new parent.

Kind: instance method of Component

component.$$(selector) ⇒ Array.<!Element>

Given a query selector, returns an array of child Elements of this Component or an empty array if no results are found. This is a wrapper around el.querySelectorAll, and conveniently returns an array instead of a NodeList, so all array operations work.

Kind: instance method of Component Returns: Array.<!Element> - The list of child Elements or an empty list

Param Type Description
selector string Selector to retrieve child Elements

component.$(selector) ⇒ Element

Given a query selector, returns the first child Element of this Component or null if no results are found or the Component hasn't been rendered yet. This is a wrapper around el.querySelector.

Kind: instance method of Component

Param Type Description
selector string Selector

component.render(rootEl, [opt_index]) ⇒ boolean

Renders the Component into a given parent DOM element and returns the result. May be called with an optional index to indicate where the DOM element of this Component should be inserted in the parent.

Kind: instance method of Component Returns: boolean - Whether the component is rendered. Note that it might have already been rendered, not as a direct result of this call to component.render().

Param Type Description
rootEl Element Root element to render this component in.
[opt_index] number The index of this component within the parent component. This may be used to render a new child before an existing child in the parent.

component.onAfterRender()

This method is called after a render process either as a direct result of a component.render() call or after the template of this component is inserted into the DOM.

Subclasses should override this method for tasks that should be done when the Component is in the document.

Kind: instance method of Component

component.template() ⇒ string

Default template for Components. Returns an empty <div> by default and should be overridden to provide actual HTML templates.

A template can also contain another Component directly, as in the example below. This is a very handy way of rendering component hierarchies.

Kind: instance method of Component Example

template() {
    this.buttonWithLabel = new ButtonWithLabel();

    return `
    <div>
        <h1>Label</h1>
        ${this.buttonWithLabel}
    </div>
    `;
}

component.dispose()

This method should be called when this Component is being removed.

Make sure to override this method in your Components if they have side effects that should be cleared, e.g. removing event listeners, and make sure to call super().

The base implementation here removes all event listeners attached to this Component and also removes the Component from the ComponentManager. Finally, it removes the DOM element from the document.

Kind: instance method of Component

View ⇐ Component

The default view class for all the views in an erste application. A View is simply a Component with additional convenience features. For example, a View renders to document.body by default, whereas a Component silently ignores the call if no root is provided. Also, regardless of the template, a view attribute is added to the root DOM elements of each View, so that uniform styling across all views is possible without much heavy-lifting.

For implementing full-screen, navigable views, users should subclass View.

erste requires you to manually instantiate all the views in your application.

Kind: global class Extends: Component

new View()

Creates a new View instance. Users should subclass this class to incorporate their own functionality, as the default View instance doesn't provide anything out of the box.

Example

class RootView extends erste.View {
    template() {
        return `
        <root-view>
            <h1>Hello world!</h1>
            <button>Click me!</button>
        </root-view>
        `;
    }

    onTapButton() {
        this.$('h1').innerText = 'Thanks for the tap!';
    }

    get events() {
        return {
            'tap': {
                'button': this.onTapButton
            }
        }
    }
}

new RootView().render(); // renders into body.

view.index : number

View index in z-axis. This is used as the Z-value for initial translate3d CSS declaration.

Kind: instance property of View

view.supportsBackGesture : boolean

Determines whether the view should support back gestures to go back in history of a ViewManager.

Kind: instance property of View

view.hasSidebar : boolean

Determines whether the view allows swipe / drag gestures to reveal an associated sidebar. This lets the view manager orchestrate the touch gestures for revealing the sidebar menu.

Kind: instance property of View

view.id ⇒ string

The auto-generated, unique id of the Component.

Kind: instance property of View

view.el ⇒ HTMLElement

The DOM element of the Component. This is a getter that first checks whether the component has been rendered as a DOM element, and returns the HTMLElement if so. If the component hasn't been rendered yet, it looks for the element in the DOM. If it's still not yet in the DOM, it renders the element to a DOM element and returns it accordingly.

Kind: instance property of View

view.onActivation()

This method is called after the view is activated by a ViewManager, i.e., either pulled or set as the current view using setCurrentView.

Subclasses should override this method for tasks that should be done when the View is in viewport, such as updating information, etc.

Kind: instance method of View

view.tagExtension_()

Provides template for populating the id field of a component.

Should not be overridden.

Kind: instance method of View Overrides: tagExtension_ Access: protected

view.toString()

This method makes sure that users can conveniently include Components in the template of an owner component. Whenever a Component is cast to a string, we calculate the template and return it.

Notice that this is only a template, and does not correspond to the actual Component instance. In other words, one can't move a Component instance from a parent to a new parent simply by using its template in the new parent.

Kind: instance method of View

view.$$(selector) ⇒ Array.<!Element>

Given a query selector, returns an array of child Elements of this Component or an empty array if no results are found. This is a wrapper around el.querySelectorAll, and conveniently returns an array instead of a NodeList, so all array operations work.

Kind: instance method of View Returns: Array.<!Element> - The list of child Elements or an empty list

Param Type Description
selector string Selector to retrieve child Elements

view.$(selector) ⇒ Element

Given a query selector, returns the first child Element of this Component or null if no results are found or the Component hasn't been rendered yet. This is a wrapper around el.querySelector.

Kind: instance method of View

Param Type Description
selector string Selector

view.render(rootEl, [opt_index]) ⇒ boolean

Renders the Component into a given parent DOM element and returns the result. May be called with an optional index to indicate where the DOM element of this Component should be inserted in the parent.

Kind: instance method of View Overrides: render Returns: boolean - Whether the component is rendered. Note that it might have already been rendered, not as a direct result of this call to component.render().

Param Type Description
rootEl Element Root element to render this component in.
[opt_index] number The index of this component within the parent component. This may be used to render a new child before an existing child in the parent.

view.onAfterRender()

This method is called after a render process either as a direct result of a component.render() call or after the template of this component is inserted into the DOM.

Subclasses should override this method for tasks that should be done when the Component is in the document.

Kind: instance method of View Overrides: onAfterRender

view.template() ⇒ string

Default template for Components. Returns an empty <div> by default and should be overridden to provide actual HTML templates.

A template can also contain another Component directly, as in the example below. This is a very handy way of rendering component hierarchies.

Kind: instance method of View Overrides: template Example

template() {
    this.buttonWithLabel = new ButtonWithLabel();

    return `
    <div>
        <h1>Label</h1>
        ${this.buttonWithLabel}
    </div>
    `;
}

view.dispose()

This method should be called when this Component is being removed.

Make sure to override this method in your Components if they have side effects that should be cleared, e.g. removing event listeners, and make sure to call super().

The base implementation here removes all event listeners attached to this Component and also removes the Component from the ComponentManager. Finally, it removes the DOM element from the document.

Kind: instance method of View

View.WIDTH ⇒ number

Returns the width of the viewport in pixels.

Kind: static property of View Returns: number - The device width.

ViewManager

This class handles view transitions and view history in a consistent manner similar to NavigationControllers in other frameworks. An instance of this class should be used by views that will contain other views, and will allow navigation in between them.

Also, each multi-view application should have at least one root ViewManager.

Kind: global class

new ViewManager([opt_root])

ViewManager constructor. At least one ViewManager should be present in all multi-view erste applications.

Param Type Description
[opt_root] Element | View Root element for this ViewManager. Default is document.body. Can also be a View, in which case the root element will be the el of the aforementioned View. In this case, the View instance should be rendered before any view interactions are done via viewManager.pull or other ViewManager methods.

viewManager.history : Array.<!View>

Array of views stored in memory. When viewManager.pull is called with the second argument set to true, meaning the user should be able to go back, the current view is pushed to this array.

When it's time to reset the history, all views in history are disposed.

Kind: instance property of ViewManager

viewManager.currentView : View

Current active view.

Kind: instance property of ViewManager

viewManager.getLastViewInHistory() ⇒ View

Returns the last view in this ViewManager's history, and null if the history is empty.

This may be used to send messages to whatever the previous View is in the history right before a viewManager.push() call.

Kind: instance method of ViewManager

viewManager.pull(view, [opt_canGoBack])

Kind: instance method of ViewManager

Param Type Description
view View View instance to pull into the scene.
[opt_canGoBack] boolean Whether the ViewManager should keep history so that one can go back to the previous View. Has a hard-coded transition effect similar to iOS7+.

viewManager.canGoBack() ⇒ boolean

Returns true if there is one or more views in history, returns false otherwise.

Kind: instance method of ViewManager Returns: boolean - Whether the view manager can push current view.

viewManager.push()

Switches to the previous view if there's one, and ignores the call if the history is empty.

Has a hard-coded transition effect similar to iOS7+.

Kind: instance method of ViewManager

viewManager.setCurrentView(view, [opt_noDispose])

Makes a given view the foremost view without animations and with disposing previous views in history.

Kind: instance method of ViewManager Noalias:

Param Type Description
view View The view to set as the foremost view.
[opt_noDispose] boolean Whether to dispose the current view.

viewManager.toggleSidebar()

Toggles the sidebar on or off according to its current state. This is to be used for a menu button, for example.

Kind: instance method of ViewManager

ViewManager.State : enum

View manager states.

Kind: static enum of ViewManager Properties

Name Type Default
DEFAULT string "default"
STARTED_GESTURE string "started"
CLOSING_SIDEBAR string "closingSidebar"
OPENING_SIDEBAR string "openingSidebar"
SIDEBAR_OPEN string "sidebarOpen"
GOING_TO_BACK_VIEW string "going"

InfiniteScroll ⇐ Component

Kind: global class Extends: Component

new InfiniteScroll([opt_el])

InfiniteScrollComponent is a small component which checks the scroll position of a given DOM element, and if it's in an appropriate position, fires a LOAD event for the parent component to act upon. When the parent component is done loading new items, it should reset this InfiniteScrollComponent with the reset() method.

Param Type Description
[opt_el] Element Optional element to track its scroll.

infiniteScroll.endOfListText : string

Message to show when no more items are available to load.

Kind: instance property of InfiniteScroll

infiniteScroll.id ⇒ string

The auto-generated, unique id of the Component.

Kind: instance property of InfiniteScroll

infiniteScroll.el ⇒ HTMLElement

The DOM element of the Component. This is a getter that first checks whether the component has been rendered as a DOM element, and returns the HTMLElement if so. If the component hasn't been rendered yet, it looks for the element in the DOM. If it's still not yet in the DOM, it renders the element to a DOM element and returns it accordingly.

Kind: instance property of InfiniteScroll

infiniteScroll.reset()

Resets the component state to default. This should be used to signal the end of loading so that this component can again check for loading.

Kind: instance method of InfiniteScroll

infiniteScroll.register(el)

Registers an element to track its scroll. This can be used for lazily introducing an element to track.

Kind: instance method of InfiniteScroll

Param Type Description
el Element Element to track.

infiniteScroll.showSpinner()

Shows spinner during load.

Kind: instance method of InfiniteScroll

infiniteScroll.showEndOfList()

Shows end of list message if no more items are available.

Kind: instance method of InfiniteScroll

infiniteScroll.tagExtension_()

Provides template for populating the id field of a component.

Should not be overridden.

Kind: instance method of InfiniteScroll Access: protected

infiniteScroll.toString()

This method makes sure that users can conveniently include Components in the template of an owner component. Whenever a Component is cast to a string, we calculate the template and return it.

Notice that this is only a template, and does not correspond to the actual Component instance. In other words, one can't move a Component instance from a parent to a new parent simply by using its template in the new parent.

Kind: instance method of InfiniteScroll

infiniteScroll.$$(selector) ⇒ Array.<!Element>

Given a query selector, returns an array of child Elements of this Component or an empty array if no results are found. This is a wrapper around el.querySelectorAll, and conveniently returns an array instead of a NodeList, so all array operations work.

Kind: instance method of InfiniteScroll Returns: Array.<!Element> - The list of child Elements or an empty list

Param Type Description
selector string Selector to retrieve child Elements

infiniteScroll.$(selector) ⇒ Element

Given a query selector, returns the first child Element of this Component or null if no results are found or the Component hasn't been rendered yet. This is a wrapper around el.querySelector.

Kind: instance method of InfiniteScroll

Param Type Description
selector string Selector

infiniteScroll.render(rootEl, [opt_index]) ⇒ boolean

Renders the Component into a given parent DOM element and returns the result. May be called with an optional index to indicate where the DOM element of this Component should be inserted in the parent.

Kind: instance method of InfiniteScroll Overrides: render Returns: boolean - Whether the component is rendered. Note that it might have already been rendered, not as a direct result of this call to component.render().

Param Type Description
rootEl Element Root element to render this component in.
[opt_index] number The index of this component within the parent component. This may be used to render a new child before an existing child in the parent.

infiniteScroll.onAfterRender()

This method is called after a render process either as a direct result of a component.render() call or after the template of this component is inserted into the DOM.

Subclasses should override this method for tasks that should be done when the Component is in the document.

Kind: instance method of InfiniteScroll

infiniteScroll.template() ⇒ string

Default template for Components. Returns an empty <div> by default and should be overridden to provide actual HTML templates.

A template can also contain another Component directly, as in the example below. This is a very handy way of rendering component hierarchies.

Kind: instance method of InfiniteScroll Overrides: template Example

template() {
    this.buttonWithLabel = new ButtonWithLabel();

    return `
    <div>
        <h1>Label</h1>
        ${this.buttonWithLabel}
    </div>
    `;
}

infiniteScroll.dispose()

This method should be called when this Component is being removed.

Make sure to override this method in your Components if they have side effects that should be cleared, e.g. removing event listeners, and make sure to call super().

The base implementation here removes all event listeners attached to this Component and also removes the Component from the ComponentManager. Finally, it removes the DOM element from the document.

Kind: instance method of InfiniteScroll Overrides: dispose

NavBar ⇐ Component

Kind: global class Extends: Component

new NavBar([opt_config])

Includes back button for back navigation.

Param Type Description
[opt_config] NavBarOptions Config parameters to include things like title.

navBar.id ⇒ string

The auto-generated, unique id of the Component.

Kind: instance property of NavBar

navBar.el ⇒ HTMLElement

The DOM element of the Component. This is a getter that first checks whether the component has been rendered as a DOM element, and returns the HTMLElement if so. If the component hasn't been rendered yet, it looks for the element in the DOM. If it's still not yet in the DOM, it renders the element to a DOM element and returns it accordingly.

Kind: instance property of NavBar

navBar.onBackButtonTap()

Back button tap event handler.

Kind: instance method of NavBar

navBar.tagExtension_()

Provides template for populating the id field of a component.

Should not be overridden.

Kind: instance method of NavBar Access: protected

navBar.toString()

This method makes sure that users can conveniently include Components in the template of an owner component. Whenever a Component is cast to a string, we calculate the template and return it.

Notice that this is only a template, and does not correspond to the actual Component instance. In other words, one can't move a Component instance from a parent to a new parent simply by using its template in the new parent.

Kind: instance method of NavBar

navBar.$$(selector) ⇒ Array.<!Element>

Given a query selector, returns an array of child Elements of this Component or an empty array if no results are found. This is a wrapper around el.querySelectorAll, and conveniently returns an array instead of a NodeList, so all array operations work.

Kind: instance method of NavBar Returns: Array.<!Element> - The list of child Elements or an empty list

Param Type Description
selector string Selector to retrieve child Elements

navBar.$(selector) ⇒ Element

Given a query selector, returns the first child Element of this Component or null if no results are found or the Component hasn't been rendered yet. This is a wrapper around el.querySelector.

Kind: instance method of NavBar

Param Type Description
selector string Selector

navBar.render(rootEl, [opt_index]) ⇒ boolean

Renders the Component into a given parent DOM element and returns the result. May be called with an optional index to indicate where the DOM element of this Component should be inserted in the parent.

Kind: instance method of NavBar Returns: boolean - Whether the component is rendered. Note that it might have already been rendered, not as a direct result of this call to component.render().

Param Type Description
rootEl Element Root element to render this component in.
[opt_index] number The index of this component within the parent component. This may be used to render a new child before an existing child in the parent.

navBar.onAfterRender()

This method is called after a render process either as a direct result of a component.render() call or after the template of this component is inserted into the DOM.

Subclasses should override this method for tasks that should be done when the Component is in the document.

Kind: instance method of NavBar

navBar.template() ⇒ string

Default template for Components. Returns an empty <div> by default and should be overridden to provide actual HTML templates.

A template can also contain another Component directly, as in the example below. This is a very handy way of rendering component hierarchies.

Kind: instance method of NavBar Overrides: template Example

template() {
    this.buttonWithLabel = new ButtonWithLabel();

    return `
    <div>
        <h1>Label</h1>
        ${this.buttonWithLabel}
    </div>
    `;
}

navBar.dispose()

This method should be called when this Component is being removed.

Make sure to override this method in your Components if they have side effects that should be cleared, e.g. removing event listeners, and make sure to call super().

The base implementation here removes all event listeners attached to this Component and also removes the Component from the ComponentManager. Finally, it removes the DOM element from the document.

Kind: instance method of NavBar

NavBar.NavBarOptions : Object

Kind: static typedef of NavBar

PullToRefresh ⇐ Component

Kind: global class Extends: Component

new PullToRefresh([opt_el])

P2RComponent is a small component which checks the scroll position of a given DOM element, and if it's in an appropriate position, fires a REFRESH event for the parent component to act upon. When the parent component is done with refreshing, it should reset this P2RComponent with the reset() method.

Param Type Description
[opt_el] Element Optional element to track its scroll.

pullToRefresh.threshold : number

Threshold value for the release action. Releases after this threshold will trigger a refresh.

Kind: instance property of PullToRefresh

pullToRefresh.height : number

Height of this component. This setting is used to offset the scroll view while refreshing.

Kind: instance property of PullToRefresh

pullToRefresh.arrowOffset : number

Start position of the arrow. This is adjusted for a spring-like effect.

Kind: instance property of PullToRefresh

pullToRefresh.id ⇒ string

The auto-generated, unique id of the Component.

Kind: instance property of PullToRefresh

pullToRefresh.el ⇒ HTMLElement

The DOM element of the Component. This is a getter that first checks whether the component has been rendered as a DOM element, and returns the HTMLElement if so. If the component hasn't been rendered yet, it looks for the element in the DOM. If it's still not yet in the DOM, it renders the element to a DOM element and returns it accordingly.

Kind: instance property of PullToRefresh

pullToRefresh.mappings : enum

Kind: instance enum of PullToRefresh

pullToRefresh.onShouldRefresh()

Triggered when the components decides a refresh action. This method should be overridden to, for example, display a spinner animation during refresh.

Kind: instance method of PullToRefresh

pullToRefresh.reset()

Resets the component state to default. This should be used to signal the end of refreshing so that this component can again check for pull to refresh.

Kind: instance method of PullToRefresh

pullToRefresh.register(scrollEl, [containerEl])

Registers an element to track its scroll. This can be used for lazily introducing an element to track.

Kind: instance method of PullToRefresh

Param Type Description
scrollEl Element Element to track.
[containerEl] Element Element to offset during activity.

pullToRefresh.checkShouldRefresh()

If in an appropriate state, checks if the scroll position is right and if so triggers a refresh event.

Kind: instance method of PullToRefresh

pullToRefresh.tagExtension_()

Provides template for populating the id field of a component.

Should not be overridden.

Kind: instance method of PullToRefresh Access: protected

pullToRefresh.toString()

This method makes sure that users can conveniently include Components in the template of an owner component. Whenever a Component is cast to a string, we calculate the template and return it.

Notice that this is only a template, and does not correspond to the actual Component instance. In other words, one can't move a Component instance from a parent to a new parent simply by using its template in the new parent.

Kind: instance method of PullToRefresh

pullToRefresh.$$(selector) ⇒ Array.<!Element>

Given a query selector, returns an array of child Elements of this Component or an empty array if no results are found. This is a wrapper around el.querySelectorAll, and conveniently returns an array instead of a NodeList, so all array operations work.

Kind: instance method of PullToRefresh Returns: Array.<!Element> - The list of child Elements or an empty list

Param Type Description
selector string Selector to retrieve child Elements

pullToRefresh.$(selector) ⇒ Element

Given a query selector, returns the first child Element of this Component or null if no results are found or the Component hasn't been rendered yet. This is a wrapper around el.querySelector.

Kind: instance method of PullToRefresh

Param Type Description
selector string Selector

pullToRefresh.render(rootEl, [opt_index]) ⇒ boolean

Renders the Component into a given parent DOM element and returns the result. May be called with an optional index to indicate where the DOM element of this Component should be inserted in the parent.

Kind: instance method of PullToRefresh Returns: boolean - Whether the component is rendered. Note that it might have already been rendered, not as a direct result of this call to component.render().

Param Type Description
rootEl Element Root element to render this component in.
[opt_index] number The index of this component within the parent component. This may be used to render a new child before an existing child in the parent.

pullToRefresh.onAfterRender()

This method is called after a render process either as a direct result of a component.render() call or after the template of this component is inserted into the DOM.

Subclasses should override this method for tasks that should be done when the Component is in the document.

Kind: instance method of PullToRefresh Overrides: onAfterRender

pullToRefresh.template() ⇒ string

Default template for Components. Returns an empty <div> by default and should be overridden to provide actual HTML templates.

A template can also contain another Component directly, as in the example below. This is a very handy way of rendering component hierarchies.

Kind: instance method of PullToRefresh Overrides: template Example

template() {
    this.buttonWithLabel = new ButtonWithLabel();

    return `
    <div>
        <h1>Label</h1>
        ${this.buttonWithLabel}
    </div>
    `;
}

pullToRefresh.dispose()

This method should be called when this Component is being removed.

Make sure to override this method in your Components if they have side effects that should be cleared, e.g. removing event listeners, and make sure to call super().

The base implementation here removes all event listeners attached to this Component and also removes the Component from the ComponentManager. Finally, it removes the DOM element from the document.

Kind: instance method of PullToRefresh Overrides: dispose

Sidebar ⇐ Component

Kind: global class Extends: Component

sidebar.vm

Kind: instance property of Sidebar Export:

sidebar.id ⇒ string

The auto-generated, unique id of the Component.

Kind: instance property of Sidebar

sidebar.el ⇒ HTMLElement

The DOM element of the Component. This is a getter that first checks whether the component has been rendered as a DOM element, and returns the HTMLElement if so. If the component hasn't been rendered yet, it looks for the element in the DOM. If it's still not yet in the DOM, it renders the element to a DOM element and returns it accordingly.

Kind: instance property of Sidebar

sidebar.mappings : enum

Dom mapping.

Kind: instance enum of Sidebar

sidebar.onSidebarItemTap(e)

Dispatches a switch view event to listeners and toggles the sidebar of the view manager that is responsible for this sidebar.

Kind: instance method of Sidebar

Param Type Description
e Object Tap event.

sidebar.template_items() ⇒ string

Kind: instance method of Sidebar Returns: string - Returns the items for the sidebar.

sidebar.tagExtension_()

Provides template for populating the id field of a component.

Should not be overridden.

Kind: instance method of Sidebar Access: protected

sidebar.toString()

This method makes sure that users can conveniently include Components in the template of an owner component. Whenever a Component is cast to a string, we calculate the template and return it.

Notice that this is only a template, and does not correspond to the actual Component instance. In other words, one can't move a Component instance from a parent to a new parent simply by using its template in the new parent.

Kind: instance method of Sidebar

sidebar.$$(selector) ⇒ Array.<!Element>

Given a query selector, returns an array of child Elements of this Component or an empty array if no results are found. This is a wrapper around el.querySelectorAll, and conveniently returns an array instead of a NodeList, so all array operations work.

Kind: instance method of Sidebar Returns: Array.<!Element> - The list of child Elements or an empty list

Param Type Description
selector string Selector to retrieve child Elements

sidebar.$(selector) ⇒ Element

Given a query selector, returns the first child Element of this Component or null if no results are found or the Component hasn't been rendered yet. This is a wrapper around el.querySelector.

Kind: instance method of Sidebar

Param Type Description
selector string Selector

sidebar.render(rootEl, [opt_index]) ⇒ boolean

Renders the Component into a given parent DOM element and returns the result. May be called with an optional index to indicate where the DOM element of this Component should be inserted in the parent.

Kind: instance method of Sidebar Returns: boolean - Whether the component is rendered. Note that it might have already been rendered, not as a direct result of this call to component.render().

Param Type Description
rootEl Element Root element to render this component in.
[opt_index] number The index of this component within the parent component. This may be used to render a new child before an existing child in the parent.

sidebar.onAfterRender()

This method is called after a render process either as a direct result of a component.render() call or after the template of this component is inserted into the DOM.

Subclasses should override this method for tasks that should be done when the Component is in the document.

Kind: instance method of Sidebar

sidebar.template() ⇒ string

Default template for Components. Returns an empty <div> by default and should be overridden to provide actual HTML templates.

A template can also contain another Component directly, as in the example below. This is a very handy way of rendering component hierarchies.

Kind: instance method of Sidebar Overrides: template Example

template() {
    this.buttonWithLabel = new ButtonWithLabel();

    return `
    <div>
        <h1>Label</h1>
        ${this.buttonWithLabel}
    </div>
    `;
}

sidebar.dispose()

This method should be called when this Component is being removed.

Make sure to override this method in your Components if they have side effects that should be cleared, e.g. removing event listeners, and make sure to call super().

The base implementation here removes all event listeners attached to this Component and also removes the Component from the ComponentManager. Finally, it removes the DOM element from the document.

Kind: instance method of Sidebar

TabView ⇐ View

Kind: global class Extends: View

tabView.views : Array.<!View>

Kind: instance property of TabView

tabView.index : number

View index in z-axis. This is used as the Z-value for initial translate3d CSS declaration.

Kind: instance property of TabView

tabView.supportsBackGesture : boolean

Determines whether the view should support back gestures to go back in history of a ViewManager.

Kind: instance property of TabView

tabView.hasSidebar : boolean

Determines whether the view allows swipe / drag gestures to reveal an associated sidebar. This lets the view manager orchestrate the touch gestures for revealing the sidebar menu.

Kind: instance property of TabView

tabView.id ⇒ string

The auto-generated, unique id of the Component.

Kind: instance property of TabView

tabView.el ⇒ HTMLElement

The DOM element of the Component. This is a getter that first checks whether the component has been rendered as a DOM element, and returns the HTMLElement if so. If the component hasn't been rendered yet, it looks for the element in the DOM. If it's still not yet in the DOM, it renders the element to a DOM element and returns it accordingly.

Kind: instance property of TabView

tabView.mappings : enum

Dom mappings.

Kind: instance enum of TabView

tabView.onItemTap(e)

Kind: instance method of TabView

Param Type Description
e Object Item touch event handler.

tabView.activateItem(index)

Adds active class to item.

Kind: instance method of TabView

Param Type Description
index number Index of the item to be active.

tabView.activateItemByName(name)

Activates a tab bar item with a given name. If an item for the given the name isn't found, does nothing.

Kind: instance method of TabView

Param Type Description
name string Name for the tab bar item.

tabView.deactivateActiveItem()

Removes active class of active item.

Kind: instance method of TabView

tabView.template_items() ⇒ string

Kind: instance method of TabView Returns: string - Template for tab bar items.

tabView.render(rootEl, [opt_index]) ⇒ boolean

Renders the Component into a given parent DOM element and returns the result. May be called with an optional index to indicate where the DOM element of this Component should be inserted in the parent.

Kind: instance method of TabView Returns: boolean - Whether the component is rendered. Note that it might have already been rendered, not as a direct result of this call to component.render().

Param Type Description
rootEl Element Root element to render this component in.
[opt_index] number The index of this component within the parent component. This may be used to render a new child before an existing child in the parent.

tabView.onAfterRender()

This method is called after a render process either as a direct result of a component.render() call or after the template of this component is inserted into the DOM.

Subclasses should override this method for tasks that should be done when the Component is in the document.

Kind: instance method of TabView Overrides: onAfterRender

tabView.onActivation()

This method is called after the view is activated by a ViewManager, i.e., either pulled or set as the current view using setCurrentView.

Subclasses should override this method for tasks that should be done when the View is in viewport, such as updating information, etc.

Kind: instance method of TabView

tabView.template() ⇒ string

Default template for Components. Returns an empty <div> by default and should be overridden to provide actual HTML templates.

A template can also contain another Component directly, as in the example below. This is a very handy way of rendering component hierarchies.

Kind: instance method of TabView Overrides: template Example

template() {
    this.buttonWithLabel = new ButtonWithLabel();

    return `
    <div>
        <h1>Label</h1>
        ${this.buttonWithLabel}
    </div>
    `;
}

tabView.tagExtension_()

Provides template for populating the id field of a component.

Should not be overridden.

Kind: instance method of TabView Access: protected

tabView.toString()

This method makes sure that users can conveniently include Components in the template of an owner component. Whenever a Component is cast to a string, we calculate the template and return it.

Notice that this is only a template, and does not correspond to the actual Component instance. In other words, one can't move a Component instance from a parent to a new parent simply by using its template in the new parent.

Kind: instance method of TabView

tabView.$$(selector) ⇒ Array.<!Element>

Given a query selector, returns an array of child Elements of this Component or an empty array if no results are found. This is a wrapper around el.querySelectorAll, and conveniently returns an array instead of a NodeList, so all array operations work.

Kind: instance method of TabView Returns: Array.<!Element> - The list of child Elements or an empty list

Param Type Description
selector string Selector to retrieve child Elements

tabView.$(selector) ⇒ Element

Given a query selector, returns the first child Element of this Component or null if no results are found or the Component hasn't been rendered yet. This is a wrapper around el.querySelector.

Kind: instance method of TabView

Param Type Description
selector string Selector

tabView.dispose()

This method should be called when this Component is being removed.

Make sure to override this method in your Components if they have side effects that should be cleared, e.g. removing event listeners, and make sure to call super().

The base implementation here removes all event listeners attached to this Component and also removes the Component from the ComponentManager. Finally, it removes the DOM element from the document.

Kind: instance method of TabView

Clone this wiki locally