'use strict';
/*
|------------------------------------------------------------------------------
| Action Sheet
|------------------------------------------------------------------------------
*/
myApp.onPageInit('action-sheet', function(page) {
$$('body').on('click', '.page[data-page=action-sheet] [data-action=open-action-sheet]', function(e) {
e.preventDefault();
var target = this; /* For Action Sheet to Popover conversion on tablets */
/* Define Action Sheet Buttons */
var buttons = [
[
{
text: 'Share Nectar',
label: true
}
],
[
{
text: ' SMS',
onClick: function() {
myApp.prompt('Mobile Number', function(value) {
if (value.trim().length > 0) {
window.open('sms:' + value);
}
});
}
},
{
text: ' Email',
onClick: function() {
myApp.prompt('Email Address', function(value) {
if (value.trim().length > 0) {
window.open('mailto:' + value);
}
});
}
},
{
text: ' Print',
disabled: true
}
],
[
{
text: ' Facebook',
onClick: function() {
window.open('https://facebook.com', '_blank');
}
},
{
text: ' Twitter',
onClick: function() {
window.open('https://twitter.com', '_blank');
}
},
{
text: ' WhatsApp',
onClick: function() {
window.open('whatsapp://send');
}
}
],
[
{
text: 'Cancel',
color: 'red'
}
]
];
/* Open Action Sheet */
myApp.actions(target, buttons);
});
});
/*
|------------------------------------------------------------------------------
| Autocomplete
|------------------------------------------------------------------------------
*/
myApp.onPageInit('autocomplete', function(page) {
/* Populate Autocomplete Array */
var fruits = [ 'Apple', 'Apricot', 'Banana', 'Blackberry', 'Cherry', 'Grapes', 'Guava', 'Mango', 'Mulberry', 'Orange', 'Papaya', 'Peach', 'Pear', 'Pineapple', 'Pomegranate', 'Strawberry', 'Tamarind' ];
/* Single Value Dropdown Autocomplete */
var singleValueDropdownAutocomplete = myApp.autocomplete({
dropdownPlaceholderText: "Try to type 'Apple'",
input: '.page[data-page=autocomplete] #single-value-dropdown-autocomplete',
openIn: 'dropdown',
source: function(autocomplete, query, render) {
var results = [];
if (query.length === 0) {
render(results);
return;
}
for (var i=0; i < fruits.length; i++) {
if (fruits[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) {
results.push(fruits[i]);
}
}
render(results);
}
});
/* Single Value Standalone Autocomplete */
var singleValueStandaloneAutocomplete = myApp.autocomplete({
autoFocus: true,
backOnSelect: true,
notFoundText: 'No such fruit found.',
opener: $$('.page[data-page=autocomplete] #single-value-standalone-autocomplete'),
openIn: 'page',
source: function (autocomplete, query, render) {
var results = [];
for (var i=0; i < fruits.length; i++) {
if (fruits[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) {
results.push(fruits[i]);
}
}
render(results);
},
onChange: function(autocomplete, value) {
$$('.page[data-page=autocomplete] #single-value-standalone-autocomplete').find('.item-after').text(value[0]);
$$('.page[data-page=autocomplete] #single-value-standalone-autocomplete').find('input').val(value[0]);
}
});
/* Multiple Values Standalone Autocomplete */
var multipleValuesStandaloneAutocomplete = myApp.autocomplete({
autoFocus: true,
multiple: true,
notFoundText: 'No such fruit found.',
opener: $$('.page[data-page=autocomplete] #multiple-values-standalone-autocomplete'),
openIn: 'page',
source: function (autocomplete, query, render) {
var results = [];
for (var i=0; i < fruits.length; i++) {
if (fruits[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) {
results.push(fruits[i]);
}
}
render(results);
},
onChange: function(autocomplete, value) {
$$('.page[data-page=autocomplete] #multiple-values-standalone-autocomplete').find('.item-after').text(value.join(', '));
$$('.page[data-page=autocomplete] #multiple-values-standalone-autocomplete').find('input').val(value.join(', '));
}
});
});
/*
|------------------------------------------------------------------------------
| Calendar
|------------------------------------------------------------------------------
*/
myApp.onPageInit('calendar', function(page) {
/* Basic Calendar */
var calendarBasic = myApp.calendar({
input: '.page[data-page=calendar] #calendar-basic'
});
/* Calendar with Custom Date Format */
var calendarCustomDateFormat = myApp.calendar({
dateFormat: 'DD, MM dd, yyyy',
input: '.page[data-page=calendar] #calendar-custom-date-format'
});
/* Calendar with Multiple Dates */
var calendarMultipleDates = myApp.calendar({
dateFormat: 'M dd, yyyy',
input: '.page[data-page=calendar] #calendar-multiple-dates',
multiple: true
});
/* Calendar with Date Range */
var calendarDateRange = myApp.calendar({
dateFormat: 'dd MM yyyy',
input: '.page[data-page=calendar] #calendar-date-range',
rangePicker: true
});
/* Calendar with Disabled Dates */
var dateToday = new Date();
var dateWeekLater = new Date().setDate(dateToday.getDate() + 7);
var calendarDisabledDates = myApp.calendar({
dateFormat: 'MM dd, yyyy',
disabled: {
from: dateToday,
to: dateWeekLater
},
input: '.page[data-page=calendar] #calendar-disabled-dates'
});
});
/*
|------------------------------------------------------------------------------
| Form Validation
|------------------------------------------------------------------------------
*/
myApp.onPageInit('form-validation', function(page) {
$('.page[data-page=form-validation] form[name=validation]').validate({
rules: {
name: {
required: true
},
age: {
required: true,
range: [1, 100]
},
email: {
required: true,
email: true
},
url: {
required: true,
url: true
},
number: {
required: true,
number: true
},
digits: {
required: true,
digits: true
},
us_phone: {
required: true,
phoneUS: true
},
credit_card: {
required: true,
creditcard: true
}
},
errorElement : 'div',
errorPlacement: function(error, element) {
error.appendTo(element.parent().siblings('.input-error'));
},
submitHandler: function(form) {
myApp.addNotification({
message: 'Yay! All the fields are valid.',
hold: 1500,
button: {
text: ''
}
});
}
});
});
/*
|------------------------------------------------------------------------------
| Hamburgers
|------------------------------------------------------------------------------
*/
myApp.onPageInit('hamburgers', function(page) {
$$('body').on('click', '.page[data-page=hamburgers] .hamburgers a', function(e) {
e.preventDefault();
$(this).children('.hamburger').toggleClass('is-active');
});
});
/*
|------------------------------------------------------------------------------
| Indexed List
|------------------------------------------------------------------------------
*/
myApp.onPageInit('indexed-list', function(page) {
/* Initialize Search Bar */
var mySearchbar = myApp.searchbar('.page[data-page=indexed-list] .searchbar', {
searchList: '.page[data-page=indexed-list] .list-block-search',
searchIn: '.page[data-page=indexed-list] .list-block-search .item-title'
});
});
/*
|------------------------------------------------------------------------------
| Infinite Scroll
|------------------------------------------------------------------------------
*/
myApp.onPageInit('infinite-scroll', function(page) {
/* Loading Flag */
var loading = false;
/* Last Loaded Index */
var lastIndex = $$('.page[data-page=infinite-scroll] .list-block li').length;
/* Max Items to Load */
var maxItems = 100;
/* Append Items per Load */
var itemsPerLoad = 20;
/* Attach 'infinite scroll' Event Handler */
$$('.page[data-page=infinite-scroll] .infinite-scroll').on('infinite', function() {
/* Exit, If Loading in Progress */
if (loading) return;
/* Set Loading Flag */
loading = true;
/* Emulate 1s Loading */
setTimeout(function() {
/* Reset Loading Flag */
loading = false;
if (lastIndex >= maxItems) {
/* Nothing more to load, detach infinite scroll events to prevent unnecessary loadings */
myApp.detachInfiniteScroll($$('.page[data-page=infinite-scroll] .infinite-scroll'));
/* Remove Preloader */
$$('.page[data-page=infinite-scroll] .infinite-scroll-preloader').remove();
return;
}
/* Generate New Items HTML */
var html = '';
for (var i = lastIndex + 1; i <= lastIndex + itemsPerLoad; i++) {
html += '';
}
/* Append New Items */
$$('.page[data-page=infinite-scroll] .list-block ul').append(html);
/* Update Last Loaded Index */
lastIndex = $$('.page[data-page=infinite-scroll] .list-block li').length;
}, 1000);
});
});
/*
|------------------------------------------------------------------------------
| Keypad
|------------------------------------------------------------------------------
*/
myApp.onPageInit('keypad', function(page) {
var myNumpadLimitedValueLength = myApp.keypad({
input: '.page[data-page=keypad] #numpad-limited-value-length',
valueMaxLength: 2,
dotButton: false
});
});
/*
|------------------------------------------------------------------------------
| Modals
|------------------------------------------------------------------------------
*/
myApp.onPageInit('modals', function(page) {
/* Alert with Text */
$$('.page[data-page=modals] #modal-alert-text').on('click', function(e) {
e.preventDefault();
myApp.alert('Neque porro quisquam est qui.');
});
/* Alert with Title and Text */
$$('.page[data-page=modals] #modal-alert-title-text').on('click', function(e) {
e.preventDefault();
myApp.alert('Neque porro quisquam est qui.', 'Lorem Ipsum');
});
/* Alert with Text and Callback */
$$('.page[data-page=modals] #modal-alert-text-callback').on('click', function(e) {
e.preventDefault();
myApp.alert('Neque porro quisquam est qui.', function() {
myApp.alert('Button Clicked!')
});
});
/* Alert with Title, Text and Callback */
$$('.page[data-page=modals] #modal-alert-title-text-callback').on('click', function(e) {
e.preventDefault();
myApp.alert('Neque porro quisquam est qui.', 'Lorem Ipsum', function() {
myApp.alert('Button Clicked!', 'Lorem Ipsum');
});
});
/* Confirm with Text and OK Callback */
$$('.page[data-page=modals] #modal-confirm-text-ok-callback').on('click', function(e) {
e.preventDefault();
myApp.confirm('Are you sure?', function() {
myApp.alert('You clicked OK button.');
});
});
/* Confirm with Text, OK and Cancel Callbacks */
$$('.page[data-page=modals] #modal-confirm-text-ok-cancel-callback').on('click', function(e) {
e.preventDefault();
myApp.confirm('Are you sure?',
function() {
myApp.alert('You clicked OK button.');
},
function() {
myApp.alert('You clicked Cancel button.');
}
);
});
/* Confirm with Title, Text and OK Callback */
$$('.page[data-page=modals] #modal-confirm-title-text-ok-callback').on('click', function(e) {
e.preventDefault();
myApp.confirm('Are you sure?', 'Confirm', function() {
myApp.alert('You clicked OK button.');
});
});
/* Confirm with Title, Text, OK and Cancel Callbacks */
$$('.page[data-page=modals] #modal-confirm-title-text-ok-cancel-callback').on('click', function(e) {
e.preventDefault();
myApp.confirm('Are you sure?', 'Confirm',
function() {
myApp.alert('You clicked OK button.');
},
function() {
myApp.alert('You clicked Cancel button.');
}
);
});
/* Prompt with Text and OK Callback */
$$('.page[data-page=modals] #modal-prompt-text-ok-callback').on('click', function(e) {
e.preventDefault();
myApp.prompt('What is your name?', function(value) {
myApp.alert('Your name is ' + value + '. You clicked OK button.');
});
});
/* Prompt with Text, OK and Cancel Callbacks */
$$('.page[data-page=modals] #modal-prompt-text-ok-cancel-callback').on('click', function(e) {
e.preventDefault();
myApp.prompt('What is your name?',
function(value) {
myApp.alert('Your name is ' + value + '. You clicked OK button.');
},
function(value) {
myApp.alert('Your name is ' + value + '. You clicked Cancel button.');
}
);
});
/* Prompt with Title, Text and OK Callback */
$$('.page[data-page=modals] #modal-prompt-title-text-ok-callback').on('click', function(e) {
e.preventDefault();
myApp.prompt('What is your name?', 'Identity Required', function(value) {
myApp.alert('Your name is ' + value + '. You clicked OK button.');
});
});
/* Prompt with Title, Text, OK and Cancel Callbacks */
$$('.page[data-page=modals] #modal-prompt-title-text-ok-cancel-callback').on('click', function(e) {
e.preventDefault();
myApp.prompt('What is your name?', 'Identity Required',
function(value) {
myApp.alert('Your name is ' + value + '. You clicked OK button.');
},
function(value) {
myApp.alert('Your name is ' + value + '. You clicked Cancel button.');
}
);
});
/* Login Modal */
$$('.page[data-page=modals] #modal-login').on('click', function(e) {
e.preventDefault();
myApp.modalLogin('Authentication Required', function(username, password) {
myApp.alert('Your username is: ' + username);
myApp.alert('Your password is: ' + password);
});
});
/* Password Modal */
$$('.page[data-page=modals] #modal-password').on('click', function(e) {
e.preventDefault();
myApp.modalPassword('Enter your password', function(password) {
myApp.alert('Your password is: ' + password);
});
});
/* Preloader */
$$('.page[data-page=modals] #modal-preloader').on('click', function(e) {
e.preventDefault();
myApp.showPreloader();
setTimeout(function() {
myApp.hidePreloader();
}, 2000);
});
/* Preloader with Custom Title */
$$('.page[data-page=modals] #modal-preloader-custom-title').on('click', function(e) {
e.preventDefault();
myApp.showPreloader('Please wait...')
setTimeout(function() {
myApp.hidePreloader();
}, 2000);
});
/* Indicator */
$$('.page[data-page=modals] #modal-indicator').on('click', function(e) {
e.preventDefault();
myApp.showIndicator();
setTimeout(function() {
myApp.hideIndicator();
}, 2000);
});
/* Nested Modal */
$$('.page[data-page=modals] #modal-nested').on('click', function(e) {
e.preventDefault();
myApp.prompt('What is your name?', function(value) {
myApp.confirm('Are you sure that your name is ' + value + '?', function() {
myApp.alert('OK, Your name is ' + value + '.');
});
});
});
/* Modal with 3 Buttons */
$$('.page[data-page=modals] #modal-custom-3-buttons').on('click', function(e) {
e.preventDefault();
myApp.modal({
title: 'Lorem Ipsum',
text: 'Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.',
buttons: [
{
text: 'Yes',
onClick: function() {
myApp.alert("You clicked 'Yes'");
}
},
{
text: 'No',
onClick: function() {
myApp.alert("You clicked 'No'");
}
},
{
text: 'Maybe',
onClick: function() {
myApp.alert("You clicked 'Maybe'");
}
}
]
});
});
/* Modal with Image Slider */
$$('.page[data-page=modals] #modal-custom-image-slider').on('click', function(e) {
e.preventDefault();
var modal = myApp.modal({
title: 'Awesome Photos?',
text: 'What do you think about my photos?',
afterText: '' +
'
' +
'
' +
'
' +
'
' +
'
' +
'
' +
'
' +
'
'+
'' +
'
' +
'
' +
'
' +
'
' + person.name + '
' +
'
' +
'
" +
"Please click 'Next' to move forward."
},
{
step: 2,
element: '.page[data-page=tour-guide] [data-action=start-tour]',
header: '2nd Tour Step',
message: "This is our second tour step." +
"
" +
"You can also use icons or images." +
'
' +
"Please click 'Next' or 'Previous' to move forward or backward respectively."
},
{
step: 3,
element: '.page[data-page=tour-guide] .navbar .center',
header: 'Final Tour Step',
message: "Congratulations! You have finished the tour guide tutorial. Enjoy"
},
];
var tourGuide = myApp.tourguide(tourSteps, tourOptions);
tourGuide.showTour();
});
});
/*
|------------------------------------------------------------------------------
| Virtual List
|------------------------------------------------------------------------------
*/
myApp.onPageInit('virtual-list', function(page) {
/* Populate Virtual List Items Array */
var items=[];
for(var i=1; i<=10000; i++) {
items.push({
title:'Item ' + i
});
}
/* Initialize Virtual List */
var myVirtualList = myApp.virtualList('.page[data-page=virtual-list] .virtual-list', {
items: items,
template: '' +
'' +
'',
searchAll: function (query, items) {
var foundItems = [];
for (var i = 0; i < items.length; i++) {
if (items[i].title.toLowerCase().indexOf(query.trim().toLowerCase()) >= 0) {
foundItems.push(i);
}
}
return foundItems;
}
});
/* Initialize Searchbar */
var mySearchbar = myApp.searchbar('.page[data-page=virtual-list] .searchbar', {
searchList: '.page[data-page=virtual-list] .virtual-list',
searchIn: '.page[data-page=virtual-list] .virtual-list .item-title'
});
});