JavaScript

Dialog

var dialog = new phonepack.Dialog({
    title: 'Loading...',
    content: 'Message',         
}).show(function(){
    dialog.hide();
});

Loading

var loading = new phonepack.Loading({
    spinner: true,
    overlay: true,
    title: 'Loading'
}).show();
                
setTimeout(function() {
    loading.hide();
}, 100);

Notification

var notification = new phonepack.Notification();
notification.simple('simple message');
notification.info('Info message');
notification.success('Success message');
notification.warning('Warning message');
notification.error('Error message');

Navigation

<!-- Entry point in views that will be inserted in the DOM  -->
<div id="navigation" class="navigation"></div>
    
<!-- All application pages should be between a DIV tag with class " .pages "  -->
<div class="pages"></div>
    

// Sets the homepage that will be loaded into the DOM.
var options = {
    otherwise: 'startPage.html'
};        

// Instance a new page class
var navigation = new phonepack.Navigation(document.querySelector('.navigation'), options, doSomething);

// Push a new page into the DOM
navigation.pushPage('example-page.html', { paramObj: { foo: 'bar } }, doSomething);

// Pass the element parameters
var element = document.createElement('div');
navigation.pushPage(element, { paramObj: { foo: 'bar } }, doSomething);

// Replace a new page in DOM
navigation.changePage('example-page.html', doSomething);

function doSomething(element){
    // Callback
    // element is the html element
}

// Close the current page pushed in the DOM
navigation.closeCurrentPage();

//Get page params
var naviParams = navigation.params;
console.log(naviParams.paramObj);

/*
    Output: 
    {
        foo: 'bar'
    }
*/

Events

beforePush - This method is called before rendering the html of the page in the DOM.

navigation.on('beforePush', function(template, next){
    // template: Html element
    // next: Method should be called for to continue rendering the page in the DOM.
});

afterPush - This method is called after rendering the html of the page in the DOM.

navigation.on('afterPush', function(template){
    // template: Html element
});

Side Menu

// Get menu element instance
sideMenu = new phonepack.SideMenu(document.getElementById('side-menu'));

// show/hide menu
sideMenu.toggle();

SideMenu HTML

<div class="side-menu" id="side-menu">
        <header class="header">
            <div class="header__title">Title</div>
        </header>
        <ul class="list">
            <li class="list__item"> Item 01 </li>
            <li class="list__item"> Item 02 </li>
        </ul>
</div>

DropDown Menu

document.querySelector('#open').addEventListener('click', function() {
    phonepack.DropDownMenu(this, document.getElementById('dropMenu'));
});

Html

    	<div class="content" id="content"></div>
    	<button class="button button--icon button--ripple" id="open">
                    <i class="icon mdi mdi-dots-vertical"></i>
         </button>
    	<div class="dropdown-menu" id="dropMenu">
                    <ul>
                        <li class="dropdown-item" id="moveToTrash">
                            <div class="item-primary">
                                <i class="icon mdi mdi-dots-vertical"></i>
                            </div>
                            <div class="item-content">Move to trash</div>
                        </li>
                        <li class="dropdown-divider"></li>
                        <li class="dropdown-item">
                            <div class="item-primary">
                                <i class="icon mdi mdi-dots-vertical"></i>
                            </div>
                            <div class="item-content">Undo</div>
                        </li>
                    </ul>
        </div>
    

Pull to refresh (only mobile)

var pullToRefresh = new phonepack.PullToRefresh(document.querySelector('#content'), 
	{ 
		type: 'snake'
	},
	function(){
    setTimeout(function(){
        pullToRefresh.hide();
    }, 5000); 
});
 

Html

    	<div class="content" id="content"></div>
    

TabBar

Javascript

var tabBar = new phonepack.TabBar(document.querySelector('#tab'));
    

Html

<div class="sub-header header--shadow">
    <div id="tab" class="tab-bar bg-indigo tab-bar--text-white tab-bar--indicator-bottom-white">
      <div class="tab-bar__item ripple active" ref="#tab1">
        TEXT 1
      </div>
      <div class="tab-bar__item ripple" ref="#tab2">
        TEXT 2
      </div>
      <div class="tab-bar__item ripple" ref="#tab3">
        TEXT 3
      </div>
    </div>
</div>

  <section class="content content--padding has-header has-sub-header" id="tab1">
      Tab 1
  </section>
  
  <section class="content content--padding has-header has-sub-header" id="tab2">
      Tab 2
  </section>
  
  <section class="content content--padding has-header has-sub-header" id="tab3">
      Tab 3
  </section>

Infinite Scroll

var content = document.querySelector('.content');

var infiniteScroll = new phonepack.InfiniteScroll(content, { distance: 50 }, function(){
  infiniteScroll.hide();
});

Shrink Header

phonepack.shrinkHeader(document.querySelector('.header'));