## SipaOnsenPage SipaOnsenPage Tool class with page loader with included router for OnsenUI (mobile). * [SipaOnsenPage](#SipaOnsenPage) * [.config](#SipaOnsenPage.config) : [Config](#SipaOnsenPage.Config) * [.load(page_id, options)](#SipaOnsenPage.load) * [.getOnsenNavigator()](#SipaOnsenPage.getOnsenNavigator) → Element * [.extractIdOfTemplate(template, options)](#SipaOnsenPage.extractIdOfTemplate) → string * [.getClassNameOfTemplate(template, options)](#SipaOnsenPage.getClassNameOfTemplate) → string * [.typeOptions(type)](#SipaOnsenPage.typeOptions) → [TypeOptionsType](#TypeOptionsType) * [.currentPageId()](#SipaOnsenPage.currentPageId) → string \| undefined * [.currentPageClass()](#SipaOnsenPage.currentPageClass) → SipaBasicView \| undefined * [.currentLayoutId()](#SipaOnsenPage.currentLayoutId) → string * [.loadLayout(layout_id, options)](#SipaOnsenPage.loadLayout) * [.callMethodOfPage(page_id, method_name, parameters)](#SipaOnsenPage.callMethodOfPage) * [.callMethodOfLayout(layout_id, method_name, parameters)](#SipaOnsenPage.callMethodOfLayout) * [.setConfig(config)](#SipaOnsenPage.setConfig) * [.popPage(options)](#SipaOnsenPage.popPage) → Promise * [.addStatusBarMock()](#SipaOnsenPage.addStatusBarMock) * [.removeStatusBarMock()](#SipaOnsenPage.removeStatusBarMock) * [._initStatusBarMock()](#SipaOnsenPage._initStatusBarMock) * [.reset()](#SipaOnsenPage.reset) * [.Config](#SipaOnsenPage.Config) : Object * [.OnsenOptions](#SipaOnsenPage.OnsenOptions) : Object ### SipaOnsenPage.config : [Config](#SipaOnsenPage.Config) **Kind**: static property of [SipaOnsenPage](#SipaOnsenPage) ### SipaOnsenPage.load(page_id, options) Load given page by page_id | Param | Type | Default | Description | | --- | --- | --- | --- | | page_id | string | | to load | | options | Object | | | | options.reset | boolean | false | reset page to given page | | options.replace | boolean | false | replace current page with given page. If reset=true is set, this option will be ignored | | options.push | boolean | false | stack given page over current page, independent if it exists already. If reset=true or replace=true is set, this option will be ignored | | options.onsen | [OnsenOptions](#SipaOnsenPage.OnsenOptions) | | options passed to original OnsenUI bringPageTop / pushPage / replacePage / resetPage | | options.init_history_tree | boolean | false | force to load history tree, default false | | options.params | Object | | parameters to be set at the new page | | options.keep_params | boolean | true | keep parameters when loading other page | | options.anchor | string | | anchor to be set at the new page | | options.keep_anchor | boolean | false | keep current anchor when loading other page | | options.remove_params | Array.<String> | | parameters to be removed at the new page | | options.success | function | | function to be called after successful loading | | options.error | function | | function to be called after loading fails | | options.always | function | | function to be called always after successful/erroneous loading | **Example** ```js SipaOnsenPage.load('home', { reset: true, params: { user_id: 123 }, anchor: 'section2', keep_params: false, keep_anchor: false, fade_effect: true, onsen: { animation: 'fade' }, success: (data, text, response) => { console.log("Page loaded successfully"); }, error: (response, text, data) => { console.error("Error loading page"); } }); ``` ### SipaOnsenPage.getOnsenNavigator() → Element Get the OnsenUI navigator element. ### SipaOnsenPage.extractIdOfTemplate(template, options) → string Get the id only of the given template. **Returns**: string - absolute path | Param | Type | Default | Description | | --- | --- | --- | --- | | template | string | | id or path of page or layout | | options | Object | | | | options.type | SipaPage.PageType | 'page' | | **Example** ```js SipaOnsenPage.extractIdOfTemplate('views/pages/test/test.html'); // => 'test' SipaOnsenPage.extractIdOfTemplate('views/pages/group/children.html'); // => 'group/children' ``` ### SipaOnsenPage.getClassNameOfTemplate(template, options) → string Get the class name of the given template. **Returns**: string - class name | Param | Type | Default | Description | | --- | --- | --- | --- | | template | string | | id or path of page or layout | | options | Object | | | | options.type | SipaPage.PageType | 'page' | | **Example** ```js SipaOnsenPage.getClassNameOfTemplate('views/pages/test/test.html'); // => 'TestPage' SipaOnsenPage.getClassNameOfTemplate('views/pages/group/children/children.html'); // => 'GroupChildrenPage' SipaOnsenPage.getClassNameOfTemplate('views/layouts/main/main.html', {type: 'layout'}); // => 'MainLayout' ``` ### SipaOnsenPage.typeOptions(type) → [TypeOptionsType](#TypeOptionsType) Get the options of the given type. **Returns**: [TypeOptionsType](#TypeOptionsType) - type options | Param | Type | | --- | --- | | type | SipaPage.PageType | **Example** ```js SipaOnsenPage.typeOptions('page'); // => { prefix: 'views/pages/', file_ext: '.html' } SipaOnsenPage.typeOptions('layout'); // => { prefix: 'views/layouts/', file_ext: '.html' } ``` ### SipaOnsenPage.currentPageId() → string \| undefined Get page id of current loaded page. If no page is loaded, return undefined. **Returns**: string \| undefined - page id **Example** ```js // page 'HomePage' is loaded SipaOnsenPage.currentPageId(); // => 'home' ``` ### SipaOnsenPage.currentPageClass() → SipaBasicView \| undefined Get current page class. If no page is loaded, return undefined. **Example** ```js // page with id 'home' is loaded SipaOnsenPage.currentPageClass(); // => HomePage ``` ### SipaOnsenPage.currentLayoutId() → string Get layout id of current loaded layout. **Example** ```js // layout 'DefaultLayout' is loaded SipaOnsenPage.currentLayoutId(); // => 'default-layout' ``` ### SipaOnsenPage.loadLayout(layout_id, options) Load the given layout. | Param | Type | Default | Description | | --- | --- | --- | --- | | layout_id | string | | to load | | options | Object | | | | options.fade_effect | boolean | true | fade effect on layout change | | options.keep_page | boolean | false | keep the loaded page, but change the layout only | ### SipaOnsenPage.callMethodOfPage(page_id, method_name, parameters) Call the given method of the given page with given (optional) parameters. | Param | Type | | --- | --- | | page_id | string | | method_name | string | | parameters | Array | **Example** ```js SipaOnsenPage.callMethodOfPage('home', 'myCustomMethod', [param1, param2]); ``` ### SipaOnsenPage.callMethodOfLayout(layout_id, method_name, parameters) Call the given method of the given layout with given (optional) parameters. | Param | Type | | --- | --- | | layout_id | string | | method_name | string | | parameters | Array | **Example** ```js SipaOnsenPage.callMethodOfLayout('default-layout', 'myCustomMethod', [param1, param2]); ``` ### SipaOnsenPage.setConfig(config) Set the configuration of pages and layouts. | Param | Type | | --- | --- | | config | Object | | config.default_layout | string | | config.default_layouts | Object | **Example** ```js SipaOnsenPage.setConfig({ // default layout for all pages default_layout: 'default', // specific layouts for some pages { : } default_layouts: { // overwrites the layout for the page 'login-page' with layout 'mini-dialog' 'login-page': 'mini-dialog' } }); ``` ### SipaOnsenPage.popPage(options) → Promise Pop the current page from the stack. | Param | Type | Description | | --- | --- | --- | | options | Object | | | options.onsen | [OnsenOptions](#SipaOnsenPage.OnsenOptions) | options passed to original OnsenUI popPage | **Example** ```js SipaOnsenPage.load("home"); // some user interaction later SipaOnsenPage.load("details"); // some user interaction later SipaOnsenPage.popPage(); // now back to 'home' ``` ### SipaOnsenPage.addStatusBarMock() Add a status bar mock to the app at the top. **Example** ```js SipaOnsenPage.addStatusBarMock(); ``` ### SipaOnsenPage.removeStatusBarMock() Remove status bar mock of the app at the top if available. **Example** ```js SipaOnsenPage.removeStatusBarMock(); ``` ### SipaOnsenPage.\_initStatusBarMock() Initialize status bar mock - do NOT run before first page is loaded! ### SipaOnsenPage.reset() Reset all states Useful for unit testing. ### SipaOnsenPage.Config : Object **Kind**: static typedef of [SipaOnsenPage](#SipaOnsenPage) | Param | Type | | --- | --- | | default_layout | string | | default_layouts | Object | ### SipaOnsenPage.OnsenOptions : Object **Kind**: static typedef of [SipaOnsenPage](#SipaOnsenPage) | Param | Type | Description | | --- | --- | --- | | animation | 'slide' \| 'lift' \| 'fade' \| 'none' \| 'slide-ios' \| 'lift-ios' \| 'fade-ios' \| 'slide-md' \| 'lift-md' \| 'fade-md' | Animation name. Available animations are "slide", "lift", "fade" and "none". These are platform based animations. For fixed animations, add "-ios" or "-md" suffix to the animation name. E.g. "lift-ios", "lift-md". Defaults values are "slide-ios" and "fade-md". | | animationOptions | Object | Specify the animation’s duration, delay and timing. E.g. {duration: 0.2, delay: 0.4, timing: 'ease-in'}. | | animationOptions.duration | number | | | animationOptions.delay | number | | | animationOptions.timing | string | | | callback | function | Function that is called when the transition has ended. | | data | Object | Custom data that will be stored in the new page element. | | times | number | Number of pages to be popped. Only one animation will be shown. Works only on popPage | | page | string | Only necessary if no page is given. | | pageHTML | string | HTML code that will be computed as a new page. Overwrites page parameter. | ## TypeOptionsType : Object Custom type definitions for excellent IDE auto complete support **Properties** | Name | Type | | --- | --- | | prefix | string | | file_ext | string |