Skip to content

Class Reference

Jump to bottom
Armagan Amcalar edited this page Apr 1, 2017 · 6 revisions

Classes

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.

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 who would like to contain other views.

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

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

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.

Kind: global class Extends: Component

new View()

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

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
            }
        }
    }
}

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.template_ : string

Kind: instance property of View Access: protected

view.rendered_ : boolean

Kind: instance property of View Access: protected

view.id ⇒ string

Kind: instance property of View

view.el ⇒ HTMLElement

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_()

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

view.toString()

Kind: instance method of View

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

Kind: instance method of View

Param Type Description
selector string Selector

view.$(selector) ⇒ Element

Kind: instance method of View

Param Type Description
selector string Selector

view.render([opt_base], [opt_index])

Kind: instance method of View Overrides: render

Param Type Description
[opt_base] Element Base element
[opt_index] number Base element

view.onBeforeRender()

Method called before a render process. Called automatically before each render. Subclasses should override this method for tasks that should be done right before the View enters the document.

Kind: instance method of View

view.onAfterRender()

Method called after a render process. Called automatically after each render. Subclasses should override this method for tasks that should be done when the View is in document.

Kind: instance method of View Overrides: onAfterRender

view.template() ⇒ string

Kind: instance method of View Overrides: template

view.dispose()

Call when removing this Component from memory

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 who would like to contain other views.

Also, each multi-view application should have at least one 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 parameter 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

Kind: instance method of ViewManager

viewManager.pull(view, [opt_canGoBack])

Kind: instance method of ViewManager

Param Type Description
view View View to pull into view.
[opt_canGoBack] boolean Whether this view keeps history so that one can go back to the previous view.

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.

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"

Component ⇐ EventEmitter

Kind: global class Extends: EventEmitter

new Component()

Component is a role that determines your user interface. It defines what your users see on the page. Component includes a lot of predefined behaviors, like what happens when a user clicks on a button. Components are extremely dummy, in that they have no memory, or state, of their own. They know how to draw a user interface and how to handle user input; which they delegate to the Representatives.

component.template_ : string

Kind: instance property of Component Access: protected

component.rendered_ : boolean

Kind: instance property of Component Access: protected

component.id ⇒ string

Kind: instance property of Component

component.el ⇒ HTMLElement

Kind: instance property of Component

component.tagExtension_()

Kind: instance method of Component Access: protected

component.toString()

Kind: instance method of Component

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

Kind: instance method of Component

Param Type Description
selector string Selector

component.$(selector) ⇒ Element

Kind: instance method of Component

Param Type Description
selector string Selector

component.render([opt_base], [opt_index])

Kind: instance method of Component

Param Type Description
[opt_base] Element Base element
[opt_index] number Base element

component.onBeforeRender()

Method called before a render process. Called automatically before each render. Subclasses should override this method for tasks that should be done right before the View enters the document.

Kind: instance method of Component

component.onAfterRender()

Method called after a render process. Called automatically after each render. Subclasses should override this method for tasks that should be done when the View is in document.

Kind: instance method of Component

component.template() ⇒ string

Kind: instance method of Component

component.dispose()

Call when removing this Component from memory

Kind: instance method of Component

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.template_ : string

Kind: instance property of InfiniteScroll Access: protected

infiniteScroll.rendered_ : boolean

Kind: instance property of InfiniteScroll Access: protected

infiniteScroll.id ⇒ string

Kind: instance property of InfiniteScroll

infiniteScroll.el ⇒ HTMLElement

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_()

Kind: instance method of InfiniteScroll Access: protected

infiniteScroll.toString()

Kind: instance method of InfiniteScroll

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

Kind: instance method of InfiniteScroll

Param Type Description
selector string Selector

infiniteScroll.$(selector) ⇒ Element

Kind: instance method of InfiniteScroll

Param Type Description
selector string Selector

infiniteScroll.render([opt_base], [opt_index])

Kind: instance method of InfiniteScroll Overrides: render

Param Type Description
[opt_base] Element Base element
[opt_index] number Base element

infiniteScroll.onBeforeRender()

Method called before a render process. Called automatically before each render. Subclasses should override this method for tasks that should be done right before the View enters the document.

Kind: instance method of InfiniteScroll

infiniteScroll.onAfterRender()

Method called after a render process. Called automatically after each render. Subclasses should override this method for tasks that should be done when the View is in document.

Kind: instance method of InfiniteScroll

infiniteScroll.template() ⇒ string

Kind: instance method of InfiniteScroll Overrides: template

infiniteScroll.dispose()

Call when removing this Component from memory

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.template_ : string

Kind: instance property of NavBar Access: protected

navBar.rendered_ : boolean

Kind: instance property of NavBar Access: protected

navBar.id ⇒ string

Kind: instance property of NavBar

navBar.el ⇒ HTMLElement

Kind: instance property of NavBar

navBar.onBackButtonTap()

Back button tap event handler.

Kind: instance method of NavBar

navBar.tagExtension_()

Kind: instance method of NavBar Access: protected

navBar.toString()

Kind: instance method of NavBar

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

Kind: instance method of NavBar

Param Type Description
selector string Selector

navBar.$(selector) ⇒ Element

Kind: instance method of NavBar

Param Type Description
selector string Selector

navBar.render([opt_base], [opt_index])

Kind: instance method of NavBar

Param Type Description
[opt_base] Element Base element
[opt_index] number Base element

navBar.onBeforeRender()

Method called before a render process. Called automatically before each render. Subclasses should override this method for tasks that should be done right before the View enters the document.

Kind: instance method of NavBar

navBar.onAfterRender()

Method called after a render process. Called automatically after each render. Subclasses should override this method for tasks that should be done when the View is in document.

Kind: instance method of NavBar

navBar.template() ⇒ string

Kind: instance method of NavBar Overrides: template

navBar.dispose()

Call when removing this Component from memory

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.template_ : string

Kind: instance property of PullToRefresh Access: protected

pullToRefresh.rendered_ : boolean

Kind: instance property of PullToRefresh Access: protected

pullToRefresh.id ⇒ string

Kind: instance property of PullToRefresh

pullToRefresh.el ⇒ HTMLElement

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_()

Kind: instance method of PullToRefresh Access: protected

pullToRefresh.toString()

Kind: instance method of PullToRefresh

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

Kind: instance method of PullToRefresh

Param Type Description
selector string Selector

pullToRefresh.$(selector) ⇒ Element

Kind: instance method of PullToRefresh

Param Type Description
selector string Selector

pullToRefresh.render([opt_base], [opt_index])

Kind: instance method of PullToRefresh

Param Type Description
[opt_base] Element Base element
[opt_index] number Base element

pullToRefresh.onBeforeRender()

Method called before a render process. Called automatically before each render. Subclasses should override this method for tasks that should be done right before the View enters the document.

Kind: instance method of PullToRefresh

pullToRefresh.onAfterRender()

Method called after a render process. Called automatically after each render. Subclasses should override this method for tasks that should be done when the View is in document.

Kind: instance method of PullToRefresh Overrides: onAfterRender

pullToRefresh.template() ⇒ string

Kind: instance method of PullToRefresh Overrides: template

pullToRefresh.dispose()

Call when removing this Component from memory

Kind: instance method of PullToRefresh Overrides: dispose

Sidebar ⇐ Component

Kind: global class Extends: Component

sidebar.vm

Kind: instance property of Sidebar Export:

sidebar.template_ : string

Kind: instance property of Sidebar Access: protected

sidebar.rendered_ : boolean

Kind: instance property of Sidebar Access: protected

sidebar.id ⇒ string

Kind: instance property of Sidebar

sidebar.el ⇒ HTMLElement

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_()

Kind: instance method of Sidebar Access: protected

sidebar.toString()

Kind: instance method of Sidebar

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

Kind: instance method of Sidebar

Param Type Description
selector string Selector

sidebar.$(selector) ⇒ Element

Kind: instance method of Sidebar

Param Type Description
selector string Selector

sidebar.render([opt_base], [opt_index])

Kind: instance method of Sidebar

Param Type Description
[opt_base] Element Base element
[opt_index] number Base element

sidebar.onBeforeRender()

Method called before a render process. Called automatically before each render. Subclasses should override this method for tasks that should be done right before the View enters the document.

Kind: instance method of Sidebar

sidebar.onAfterRender()

Method called after a render process. Called automatically after each render. Subclasses should override this method for tasks that should be done when the View is in document.

Kind: instance method of Sidebar

sidebar.template() ⇒ string

Kind: instance method of Sidebar Overrides: template

sidebar.dispose()

Call when removing this Component from memory

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.template_ : string

Kind: instance property of TabView Access: protected

tabView.rendered_ : boolean

Kind: instance property of TabView Access: protected

tabView.id ⇒ string

Kind: instance property of TabView

tabView.el ⇒ HTMLElement

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([opt_base], [opt_index])

Kind: instance method of TabView

Param Type Description
[opt_base] Element Base element
[opt_index] number Base element

tabView.onAfterRender()

Method called after a render process. Called automatically after each render. Subclasses should override this method for tasks that should be done when the View is in 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

Kind: instance method of TabView Overrides: template

tabView.tagExtension_()

Kind: instance method of TabView Access: protected

tabView.toString()

Kind: instance method of TabView

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

Kind: instance method of TabView

Param Type Description
selector string Selector

tabView.$(selector) ⇒ Element

Kind: instance method of TabView

Param Type Description
selector string Selector

tabView.onBeforeRender()

Method called before a render process. Called automatically before each render. Subclasses should override this method for tasks that should be done right before the View enters the document.

Kind: instance method of TabView

tabView.dispose()

Call when removing this Component from memory

Kind: instance method of TabView

Clone this wiki locally