Back to Top

erste master

Your first choice for hybrid mobile applications

new InfiniteScrollModel()

Model for the infinite scroll component. Manages loading states to prevent performance problems like double actions.

Returns

Void

InfiniteScrollModel.reset()

Resets the component state to default state.

Returns

Void

InfiniteScrollModel.triggerShouldCheckState()

If the component is not in LOADING state, it should check to see if it should load. This method will be triggered on every scroll event.

Returns

Void

InfiniteScrollModel.shouldCheck()

Informs the caller if this model is in an appropriate state for checking the right (scroll) position.

Returns

boolean

Whether the component should check for the right (scroll) position.

InfiniteScrollModel.load()

Emits a load event to inform the parent component that it's at the end of a scroll and should load more items.

Returns

Void

InfiniteScrollModel.State()

Load more states.

Returns

Void

InfiniteScrollModel.EventType()

Event types for this model.

Returns

Void

new InfiniteScroll()

Returns

Void

InfiniteScroll.constructor([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.

Parameters

Name Type Description
opt_el HTMLElement

Optional element to track its scroll.

Optional

Returns

Void

this.EventType()

Returns

Void

this.scrollEl()

Returns

Void

this.endOfListText()

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

Returns

Void

render()

Returns

Void

reset()

Returns

Void

register(el)

Parameters

Name Type Description
el HTMLElement

Element to track.

Returns

Void

onScroll_() private method

Scroll event handler for infinite scroll. Fires the throttle to check for the correct load more position.

Returns

Void

checkShouldLoadMore_() private method

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

Returns

Void

showSpinner()

Returns

Void

showEndOfList()

Returns

Void

template()

Returns

Void

dispose()

Returns

Void

new NavBar()

Returns

Void

NavBar.constructor([opt_config])

Includes back button for back navigation.

Parameters

Name Type Description
opt_config NavBar.NavBarOptions

Config parameters to include things like title.

Optional

Returns

Void

this.vm()

Returns

Void

this.config()

Returns

Void

onBackButtonTap()

Returns

Void

onMenuButtonTap()

Returns

Void

template()

Returns

Void

events()

Returns

Void

NavBar.NavBarOptions()

Returns

Void

new P2RComponentModel()

Model for the pull to refresh component. Manages refreshing states to prevent performance problems like double actions.

Returns

Void

P2RComponentModel.triggerShouldCheckState()

If the component is not in REFRESHING state, it should check to see if it should refresh. This method will be triggered on every scroll event.

Returns

Void

P2RComponentModel.shouldCheck()

Informs the caller if this model is in an appropriate state for checking the right (scroll) position.

Returns

boolean

Whether the component should check for the right (scroll) position.

P2RComponentModel.refresh()

Dispatches a refresh event to inform the parent component that it's at the appropriate position for refresh.

Returns

Void

P2RComponentModel.State()

Pull to refresh states.

Returns

Void

P2RComponentModel.EventType()

Event types for this model.

Returns

Void

new PullToRefresh()

Returns

Void

PullToRefresh.constructor([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.

Parameters

Name Type Description
opt_el HTMLElement

Optional element to track its scroll.

Optional

Returns

Void

this.EventType()

Returns

Void

onShouldRefresh()

Returns

Void

onAfterRender()

Returns

Void

reset()

Returns

Void

register(scrollEl[, containerEl])

Parameters

Name Type Description
scrollEl HTMLElement

Element to track.

containerEl HTMLElement

Element to offset during activity.

Optional

Returns

Void

onScroll_(e) private method

Scroll event handler for pull to refresh.

Parameters

Name Type Description
e Event

Scroll event object.

Returns

Void

onRelease_() private method

Fires when the user lifts her finger to finish the scroll. If the user scrolled enough, inform the model to refresh

Returns

Void

checkShouldRefresh()

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

Returns

Void

template()

Returns

Void

dispose()

Returns

Void

mappings()

Returns

Void

PullToRefresh.threshold()

Returns

Void

PullToRefresh.height()

Returns

Void

PullToRefresh.arrowOffset()

Returns

Void

new Sidebar()

Returns

Void

this.vm()

Returns

Void

onSidebarItemTap(e)

Parameters

Name Type Description
e [object Object]

Tap event.

Returns

Void

template()

Returns

Void

template_items()

Returns

string

Returns the items for the sidebar.

mappings()

Returns

Void

events()

Returns

Void

new TabView()

Returns

Void

this.vm()

Returns

Void

this.views()

Returns

Void

this.activeItemIndex()

Returns

Void

onAfterRender()

Returns

Void

onItemTap(e)

Parameters

Name Type Description
e [object Object]

Item touch event handler.

Returns

Void

activateItem(index)

Parameters

Name Type Description
index number

Index of the item to be active.

Returns

Void

activateItemByName(name)

Parameters

Name Type Description
name string

Name for the tab bar item.

Returns

Void

deactivateActiveItem()

Returns

Void

template()

Returns

string

Base template of NavigationBar component.

template_views()

Returns

Void

template_items()

Returns

string

Template for tab bar items.

mappings()

Returns

Void

events()

Returns

Void

erste()

Returns

Void

Component()

Returns

Void

ViewManager()

Returns

Void

View()

Returns

Void

locale()

Returns

Void

Sidebar()

Returns

Void

TabView()

Returns

Void

NavBar()

Returns

Void

PullToRefresh()

Returns

Void

InfiniteScroll()

Returns

Void

__()

Returns

Void

erste.use()

Returns

Void

goog()

Base namespace for the Closure library. Checks to see goog is already defined in the current scope before assigning to prevent clobbering if base.js is loaded more than once.

Returns

Void

goog.global()

Reference to the global context. In most cases this will be 'window'.

Returns

Void

goog.isDef(val)

Returns true if the specified value is not undefined.

Parameters

Name Type Description
val

Variable to test.

Returns

boolean

Whether variable is defined.

goog.exportPath_(name[, opt_object, opt_objectToExportTo]) private method

Builds an object structure for the provided namespace path, ensuring that names that already exist are not overwritten. For example: "a.b.c" -> a = {};a.b={};a.b.c={}; Used by goog.provide and goog.exportSymbol.

Parameters

Name Type Description
name string

name of the object that this file defines.

opt_object

the object to expose at the end of the path.

Optional
opt_objectToExportTo Object

The object to add the path to; default is goog.global.

Optional

Returns

Void

goog.exportSymbol(publicPath, object[, opt_objectToExportTo])

Exposes an unobfuscated global namespace path for the given object. Note that fields of the exported object will be obfuscated, unless they are exported in turn via this function or goog.exportProperty.

Also handy for making public items that are defined in anonymous closures.

ex. goog.exportSymbol('public.path.Foo', Foo);

ex. goog.exportSymbol('public.path.Foo.staticFunction', Foo.staticFunction); public.path.Foo.staticFunction();

ex. goog.exportSymbol('public.path.Foo.prototype.myMethod', Foo.prototype.myMethod); new public.path.Foo().myMethod();

Parameters

Name Type Description
publicPath string

Unobfuscated name to export.

object

Object the name should point to.

opt_objectToExportTo Object

The object to add the path to; default is goog.global.

Optional

Returns

Void

goog.exportProperty(object, publicName, symbol)

Exports a property unobfuscated into the object's namespace. ex. goog.exportProperty(Foo, 'staticFunction', Foo.staticFunction); ex. goog.exportProperty(Foo.prototype, 'myMethod', Foo.prototype.myMethod);

Parameters

Name Type Description
object Object

Object whose static property is being exported.

publicName string

Unobfuscated name to export.

symbol

Object the name should point to.

Returns

Void

decorateEvents(comp)

Fills events object of given component class from method names that match event handler pattern.

Parameters

Name Type Description
comp Component

Component instance to decorate events for.

Returns

Void

callHandlers()

Given a list of componentsRegistry, checks whether any component would respond to the given event and if so, executes the event handler defined in the component.

Returns

Void

getComponent(id)

Given an id, returns a component in the registry.

Parameters

Name Type Description
id string

Id for the component instance.

Returns

Void

setComponent(comp)

Registers a component to the component registry, setting it up for render if it hasn't already been rendered.

Also, if this is the first time this type of component is registered, it checks and decomposes the event handler declaration syntax sugar.

Parameters

Name Type Description
comp Component

Component instance to register.

Returns

Void

removeComponent(comp)

Given an id, removes a component from the registry.

Parameters

Name Type Description
comp Component

Component instance to remove.

Returns

Void

markComponentRendered(comp)

Given an id, marks a component as rendered, removing it from the render queue.

Parameters

Name Type Description
comp Component

Component instance to mark as rendered.

Returns

Void

new Component()

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

{@link Component}s should be dummy, in that they should have no memory, or state, of their own. {@link Component}s 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.

Returns

Void

Component.constructor(props)

Creates a new {@link 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.

Parameters

Name Type Description
props Object

Properties that will be saved as this.props.

Examples


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

Returns

Void

this.id_() private property

Returns

Void

this.element_() private property

Returns

Void

this.template_() private property

The HTML template of a {@link Component}.

Returns

Void

this.rendered_() private property

Whether the {@link Component} has been rendered into the DOM.

Returns

Void

this.props()

Returns

Void

created(props)

Parameters

Name Type Description
props Object

The properties passed onto this {@link Component} at instantiation.

Returns

Void

createdHooks(props)

Parameters

Name Type Description
props Object

The properties passed onto this {@link Component} at instantiation.

Returns

Void

id()

Returns

string

el()

Returns

HTMLElement

tagExtension_()

Provides template for populating the id field of a component.

Should not be overridden.

Returns

Void

toString()

Returns

Void

$$(selector)

Parameters

Name Type Description
selector string

Selector to retrieve child Elements

Returns

Array.<!Element>

The list of child Elements or an empty list

$(selector)

Parameters

Name Type Description
selector string

Selector

Returns

HTMLElement

render(rootEl[, opt_index])

Parameters

Name Type Description
rootEl HTMLElement

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.

Optional

Returns

boolean

Whether the component is rendered. Note that it might have already been rendered, not as a direct result of this call to {@link #Component+render|component.render()}.

rendered()

Returns

Void

onAfterRender()

Returns

Void

onAfterRenderAsync()

Returns

Void

onAfterRenderHooks()

Returns

Void

template(props)

Parameters

Name Type Description
props Object

The properties passed onto this {@link Component} at instantiation.

Examples


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

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

Returns

string

dispose()

Returns

Void

Component.events()

Returns

Void

Component.__events()

Returns

Void

Component.__nonBubblingEvents()

Returns

Void

Events() private constructor

Constructor to create a storage for our EE objects. An Events instance is a plain object whose properties are event names.

Returns

Void

EE(fn, context[, once=false]) private constructor

Representation of a single event listener.

Parameters

Name Type Description
fn Function

The listener function.

context

The context to invoke the listener with.

once=false boolean

Specify if the listener is a one-time listener.

Optional

Returns

Void

addListener(emitter, event, fn, context, once) private function

Add a listener for a given event.

Parameters

Name Type Description
emitter EventEmitter

Reference to the EventEmitter instance.

event string Symbol

The event name.

fn Function

The listener function.

context

The context to invoke the listener with.

once boolean

Specify if the listener is a one-time listener.

Returns

EventEmitter

clearEvent(emitter, evt) private function

Clear event by name.

Parameters

Name Type Description
emitter EventEmitter

Reference to the EventEmitter instance.

evt string Symbol number

The Event name.

Returns

Void

EventEmitter()

Minimal EventEmitter interface that is molded against the Node.js EventEmitter interface.

Returns

Void

EventEmitter.eventNames()

Return an array listing the events for which the emitter has registered listeners.

Returns

Array

EventEmitter.listeners(event)

Return the listeners registered for a given event.

Parameters

Name Type Description
event string Symbol

The event name.

Returns

Array

The registered listeners.

EventEmitter.listenerCount(event)

Return the number of listeners listening to a given event.

Parameters

Name Type Description
event string Symbol

The event name.

Returns

number

The number of listeners.

EventEmitter.emit(event[, a1, a2, a3, a4, a5])

Calls each of the listeners registered for a given event.

Parameters

Name Type Description
event string Symbol

The event name.

a1 Optional
a2 Optional
a3 Optional
a4 Optional
a5 Optional

Returns

boolean

true if the event had listeners, else false.

EventEmitter.on(event, fn[, context=this])

Add a listener for a given event.

Parameters

Name Type Description
event string Symbol

The event name.

fn Function

The listener function.

context=this

The context to invoke the listener with.

Optional

Returns

EventEmitter

this.

EventEmitter.once(event, fn[, context=this])

Add a one-time listener for a given event.

Parameters

Name Type Description
event string Symbol

The event name.

fn Function

The listener function.

context=this

The context to invoke the listener with.

Optional

Returns

EventEmitter

this.

EventEmitter.removeListener(event, fn, context, once)

Remove the listeners of a given event.

Parameters

Name Type Description
event string Symbol

The event name.

fn Function

Only remove the listeners that match this function.

context

Only remove the listeners that have this context.

once boolean

Only remove one-time listeners.

Returns

EventEmitter

this.

EventEmitter.removeAllListeners([event])

Remove all listeners, or those of the specified event.

Parameters

Name Type Description
event string Symbol

The event name.

Optional

Returns

EventEmitter

this.

deviceIsIOSWithBadTarget()

iOS 6.0(+?) requires the target element to be manually derived.

Returns

Void

constructor([opt_el])

Tracks and fires gestures on touch enabled devices.

Parameters

Name Type Description
opt_el HTMLElement

Provided, gesture handler will track gesture events on this element. The default value is document.body; but an optional root element is inevitable for iframe's.

Optional

Returns

Void

this.touchStartTime()

Returns

Void

this.touches()

Returns

Void

modulo(a, b)

The % operator in JavaScript returns the remainder of a / b, but differs from some other languages in that the result will have the same sign as the dividend. For example, -1 % 8 == -1, whereas in some other languages (such as Python) the result would be 7. This function emulates the more correct modulo behavior, which is useful for certain applications such as calculating an offset index in a circular list.

Parameters

Name Type Description
a number

The dividend.

b number

The divisor.

Returns

number

a % b where the result is between 0 and b (either 0 <= x < b or b < x <= 0, depending on the sign of b).

toDegrees(angleRadians)

Converts radians to degrees.

Parameters

Name Type Description
angleRadians number

Angle in radians.

Returns

number

Angle in degrees.

standardAngle(angle)

Normalizes an angle to be in range [0-360). Angles outside this range will be normalized to be the equivalent angle with that range.

Parameters

Name Type Description
angle number

Angle in degrees.

Returns

number

Standardized angle.

angle(x1, y1, x2, y2)

Computes the angle between two points (x1,y1) and (x2,y2). Angle zero points in the +X direction, 90 degrees points in the +Y direction (down) and from there we grow clockwise towards 360 degrees.

Parameters

Name Type Description
x1 number

x of first point.

y1 number

y of first point.

x2 number

x of second point.

y2 number

y of second point.

Returns

number

Standardized angle in degrees of the vector from x1,y1 to x2,y2.

distance(x1, y1, x2, y2)

Calculates distance between two points given 4 points.

Parameters

Name Type Description
x1 number

X value of the first point

y1 number

Y value of the first point

x2 number

X value of the second point

y2 number

Y value of the second point

Returns

number

Distance between two points

lerp(a, b, x)

Performs linear interpolation between values a and b. Returns the value between a and b proportional to x (when x is between 0 and 1. When x is outside this range, the return value is a linear extrapolation).

Parameters

Name Type Description
a number

A number.

b number

A number.

x number

The proportion between a and b.

Returns

number

The interpolated value between a and b.

getUid()

Returns a unique identifier string, which is an auto-incremented base-36 counter.

Returns

string

ErstePlugin()

Returns

Void

(plugin)

Parameters

Name Type Description
plugin ErstePlugin

An erste plugin to install and use. Its $$register method will be called with erste as the first parameter, allowing it to modify the erste module freely. One common use case is the regie npm library, which is the state management solution for vanilla JavaScript applications and erste. It injects the store into root of erste and allows Components to have a special syntax to declare observations for state properties.

Returns

Void

defaultLang_()

The default language

Returns

Void

setLanguage(lang)

Change the active dictionary

Parameters

Name Type Description
lang string

Language code.

Returns

Void

getLocalizedString(text, args)

Return translation of the given text

Look for a translation from goog.require()'d scripts. Replace the variables inside the translation. Return the same text if no translation found.

Pass in variables as integers inside curly brackets. {0} will be replaced by first argument and so on.

Parameters

Name Type Description
text string

Text to be translated.

args

Translation arguments.

Returns

string

Localized string.

__()

Returns

Void

rv(args)

Parameters

Name Type Description
args

Returns

Void

now()

Returns

Void

new 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 {@link ViewManager}.

Returns

Void

ViewManager.constructor([opt_root])

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

Parameters

Name Type Description
opt_root Element View

Root element for this {@link ViewManager}.

Default is document.body. Can also be a {@link View}, in which case the root element will be the {@link View#el} of the aforementioned View. In this case, the View instance should be rendered before any view interactions are done via {@link #ViewManager+pull|viewManager.pull} or other {@link ViewManager} methods.

Optional

Returns

Void

this.history()

Returns

Void

this.lastTouches_() private property

Returns

Void

this.state_() private property

Initial state of the viewManager. Indicates the sidebar is off and there are no active gestures on the root element.

Returns

Void

this.rootEl_() private property

Returns

Void

this.currentView()

Returns

Void

this.hideSidebarTimeout_() private property

Returns

Void

this.firstX_() private property

Returns

Void

this.initialized_() private property

Returns

Void

this.root_() private property

Returns

Void

init_() private method

Returns

Void

getLastViewInHistory()

Returns

View

pull(view[, opt_canGoBack])

Parameters

Name Type Description
view View

{@link View} instance to pull into the scene.

opt_canGoBack boolean

Whether the {@link ViewManager} should keep history so that one can go back to the previous {@link View}.

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

Optional

Returns

Void

canGoBack()

Returns

boolean

Whether the view manager can push current view.

push()

Returns

Void

setCurrentView(view[, opt_noDispose])

Parameters

Name Type Description
view View

The view to set as the foremost view.

opt_noDispose boolean

Whether to dispose the current view.

Optional

Returns

Void

toggleSidebar()

Returns

Void

initTouchEvents_() private method

Initializes touch event handlers for all touch end and touch move events ocurring on the root element.

Returns

Void

onTouchMove_() private method

Handles touch move events and decides how the view transitions should occur.

Returns

Void

onTouchEnd_() private method

Handles touch end events and decides how the view transitions should follow.

Returns

Void

backGestureTouchEnd_(e) private method

Handles touch end event when they occur in a back gesture.

Parameters

Name Type Description
e TouchEvent

Touch end event.

Returns

Void

backGestureTouchMove_(e) private method

Handle touch move events when they occur in a back gesture.

Parameters

Name Type Description
e TouchEvent

Touch end event.

Returns

Void

closeSidebarTouchMove_(e) private method

Close sidebar touch move functionality.

Parameters

Name Type Description
e TouchEvent

Returns

Void

toggleSidebar_(state) private method

Toggles the sidebar on or off according to a given state.

Parameters

Name Type Description
state boolean

Whether to open or close the sidebar.

Returns

Void

openSidebarTouchMove_(e) private method

Close sidebar touch move functionality.

Parameters

Name Type Description
e TouchEvent

Returns

Void

ViewManager.State()

Returns

Void

ViewManager.topIndex_() private property

3d transform Z position for the uppermost view. Used to set the right view on top.

Returns

Void

new View()

The default view class for all the views in an erste application. A {@link View} is simply a {@link Component} with additional convenience features. For example, a {@link View} renders to document.body by default, whereas a {@link 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 {@link View}, so that uniform styling across all views is possible without much heavy-lifting.

For implementing full-screen, navigable views, users should subclass {@link View}.

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

Returns

Void

View.constructor(props)

Creates a new {@link 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.

Parameters

Name Type Description
props Object

Properties that will be saved as this.props.

Examples


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.

Returns

Void

View.render([opt_index])

Renders the view into a parent DOM element. The default root element is document.body, so for the sake of simplicity, one can just call view.render() to render the view into the DOM.

Parameters

Name Type Description
opt_rootEl=document.body HTMLElement

Root element to render this view in.

Optional
opt_index number

The index of this view in z-axis.

Optional

Returns

Void

onAfterRender()

This method is similar to viewDidAppear or componentDidMount methods found in other frameworks. It's called automatically when the view is rendered into the DOM. This method already sets thez-index property and accompanying CSS transforms appropriately, positioning the view to its correct place.

Override to provide custom functionality after the view's root element enters the DOM. This can be listening to additional DOM events or manipulating element properties.

Make sure to call super.onAfterRender() when you override this method.

Returns

Void

onActivation()

Returns

Void

panIn(isTheViewBeingPulled)

Parameters

Name Type Description
isTheViewBeingPulled boolean

Whether the view is being pulled or pushed

Returns

Void

panOut(isTheViewBeingPulled)

Parameters

Name Type Description
isTheViewBeingPulled boolean

Whether the view is being pulled or pushed.

Returns

Void

template()

Default template for views. Uses a custom element <view>, which should be set to display: block for proper looks.

Examples

You can use the following CSS rule in your implementation:

```css
[view] {
    position: absolute;
    transition: transform .35s;
    z-index: 0;
    top: 0px;
    bottom: 0px;
    width: 100%;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
}
```

Returns

Void

tagExtension_()

Provides template for populating the id field and adding the view attribute.

Should not be overridden.

Returns

Void

View.width_()

Returns

Void

View.index()

Returns

Void

View.supportsBackGesture()

Returns

Void

View.backGestureTouchTargetWidth()

Returns

Void

View.hasSidebar()

Returns

Void