pixl-webapp
Version:
A client-side JavaScript framework, designed to be a base for web applications.
314 lines (240 loc) • 10 kB
JavaScript
// Demo Web App
// Author: Joseph Huckaby
// Copyright (c) 2015 Joseph Huckaby and PixlCore.com
// Released under The MIT License
//
// Home Page/Tab
//
Class.subclass( Page, "Page.Home", {
onInit: function() {
// called once at page load
var html = '';
// include initial HTML here, if you want
this.div.html( html );
},
onActivate: function(args) {
// page activation
if (!args) args = {};
this.args = args;
app.setWindowTitle('Home');
app.showTabBar(true);
// activate page here (show live / updated content)
var html = '';
// fieldset
html += '<fieldset><legend>Some Info</legend>';
html += '<div class="info_label">Section 1</div>';
html += '<div class="info_value">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>';
html += '<div class="info_label">Section 2</div>';
html += '<div class="info_value">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>';
html += '</fieldset>';
// body text
html += '<div style="margin-top:15px;">';
html += 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';
html += '</div>';
// buttons
html += '<div style="margin-top:15px;">';
html += '<div class="button left" onMouseUp="$P().demoSuccess()">Demo Success</div>';
html += '<div class="button left" style="margin-left:15px;" onMouseUp="$P().demoWarning()">Demo Warning</div>';
html += '<div class="button left" style="margin-left:15px;" onMouseUp="$P().demoError()">Demo Error</div>';
html += '<div class="button left" style="margin-left:15px;" onMouseUp="$P().demoProgress()">Demo Progress</div>';
html += '<div class="button left" style="margin-left:15px;" onMouseUp="$P().demoDialog()">Demo Dialog</div>';
html += '</div>';
this.div.html( html );
return true;
},
demoSuccess: function() {
app.showMessage('success', "This is a successful message.");
},
demoWarning: function() {
app.showMessage('warning', "This is a warning message.");
},
demoError: function() {
app.showMessage('error', "This is an error message.");
},
demoProgress: function() {
app.showProgress( 0, "Doing something..." );
var progress = 0;
var timer = setInterval( function() {
progress += 0.03;
app.showProgress( progress );
if (progress > 1.0) {
app.hideProgress();
clearTimeout( timer );
}
}, 100 );
},
demoDialog: function() {
app.confirm( 'Add Vegetable', "Are you sure you want to add the vegetable <b>celery</b>?", "Add", function(result) {
if (result) {
app.hideDialog();
app.showMessage('success', "Celery added successfully.");
}
} );
},
onDeactivate: function() {
// called when page is deactivated
// this.div.html( '' );
return true;
}
} );
//
// MoreDemos Page/Tab
//
Class.subclass( Page, "Page.MoreDemos", {
defaultSubPage: 'form',
onInit: function() {
// called once at page load
},
onActivate: function(args) {
// page activation
if (!args) args = {};
if (!args.sub) args.sub = this.defaultSubPage;
this.args = args;
app.showTabBar(true);
// save current nav anchor for returning to sub-tab later
this.tab[0]._page_id = Nav.currentAnchor();
// jump to sub-page based on has query
this['gosub_'+args.sub](args);
return true;
},
gosub_form: function(args) {
// show form demo sub-page
app.setWindowTitle( "Form Demo" );
var html = '';
html += this.getSidebarTabs( args.sub,
[
['form', "Form Demo"],
['table', "Table Demo"]
]
);
html += '<div style="padding:20px;"><div class="subtitle">New Vegetable</div></div>';
html += '<div style="padding:0px 20px 50px 20px">';
html += '<center><table style="margin:0;">';
var veg = {
name: '',
fresh: true,
type: ''
};
// Vegetable Name
html += get_form_table_row( 'Name', '<input type="text" id="fe_ee_title" size="35" value="'+escape_text_field_value(veg.name)+'" spellcheck="false"/>' );
html += get_form_table_caption( "Enter a title for the vegetable, which will be displayed on the main salad." );
html += get_form_table_spacer();
// Quality
html += get_form_table_row( 'Quality', '<input type="checkbox" id="fe_ee_enabled" value="1" ' + (veg.fresh ? 'checked="checked"' : '') + '/><label for="fe_ee_enabled">Farm Fresh</label>' );
html += get_form_table_caption( "Select whether the vegetable should be farm fresh or not." );
html += get_form_table_spacer();
// Type
var veg_types = ['Carrot', 'Celery', 'Beet', 'Lettuce'];
html += get_form_table_row( 'Type', '<select id="fe_ee_cat">' + render_menu_options(veg_types, veg.type, false) + '</select>' );
html += get_form_table_caption( "Select a category for the vegetable (this may limit the maximum available, etc.)" );
html += get_form_table_spacer();
// notes
html += get_form_table_row( 'Notes', '<textarea id="fe_ee_notes" style="width:600px; height:80px;">'+escape_text_field_value(veg.notes)+'</textarea>' );
html += get_form_table_caption( "Optionally enter notes for the veg, which will be included in all e-mail notifications." );
html += get_form_table_spacer();
// buttons at bottom
html += '<tr><td colspan="2" align="center">';
html += '<div style="height:30px;"></div>';
html += '<table><tr>';
html += '<td><div class="button" style="width:120px; font-weight:normal;" onMouseUp="$P().cancelEdit()">Cancel</div></td>';
html += '<td width="50"> </td>';
html += '<td><div class="button" style="width:120px;" onMouseUp="$P().saveChanges()">Save Changes</div></td>';
html += '</tr></table>';
html += '</td></tr>';
html += '</table></center>';
html += '</div>'; // table wrapper div
html += '</div>'; // sidebar tabs
this.div.html( html );
},
cancelEdit: function() {
// cancel edit, return home
Nav.go('Home');
},
saveChanges: function() {
// simulate save changes
app.showMessage('success', "Changes saved successfully.");
},
gosub_table: function(args) {
// show table demo sub-page
app.setWindowTitle( "Table Demo" );
var html = '';
html += this.getSidebarTabs( args.sub,
[
['form', "Form Demo"],
['table', "Table Demo"]
]
);
var cols = ['Vegetable Name', 'Color', 'Size', 'Quantity', 'Price', 'Date Added', 'Date Modified', 'Actions'];
html += '<div style="padding:20px 20px 30px 20px">';
html += '<div class="subtitle">';
html += 'All Vegetables';
// html += '<div class="clear"></div>';
html += '</div>';
// sort by title ascending
this.vegetables = vegetables.sort( function(a, b) {
return (b.name < a.name) ? 1 : -1;
} );
var offset = args.offset || 0;
var limit = args.limit || 5;
// render table
html += this.getPaginatedTable({
cols: cols,
rows: this.vegetables.slice( offset, offset + limit ),
data_type: 'vegetable',
offset: offset,
limit: limit,
total: vegetables.length,
callback: function(veg, idx) {
var actions = [
'<span class="link" onMouseUp="$P().editVeg('+idx+')"><b>Edit</b></span>',
'<span class="link" onMouseUp="$P().deleteveg('+idx+')"><b>Delete</b></span>'
];
var tds = [
'<div class="td_big"><span class="link" onMouseUp="$P().editVeg('+idx+')">' + veg.name + '</span></div>',
'<span class="color_label ' + veg.color.toLowerCase() + '">' + veg.color + '</span>',
veg.size,
commify( veg.quantity ),
veg.price,
get_short_date_time( veg.created ),
get_short_date_time( veg.created + 86400 ),
actions.join(' | ')
];
return tds;
}
});
html += '<div style="height:30px;"></div>';
html += '<center><table><tr>';
html += '<td><div class="button" style="width:130px;" onMouseUp="$P().editVeg(-1)">Add Vegetable...</div></td>';
html += '</tr></table></center>';
html += '</div>'; // padding
html += '</div>'; // sidebar tabs
this.div.html( html );
},
editVeg: function(idx) {
// add or edit vegetable
Nav.go( 'MoreDemos?sub=form' );
},
deleteVeg: function(idx) {
// delete vegetable
},
onDeactivate: function() {
// called when page is deactivated
// this.div.html( '' );
return true;
}
} );
//
// Sample data for table
//
window.vegetables = [
{ name: 'Celery', color: 'Blue', size: '1ft', quantity: 450, price: '$2.75', created: 1442984544 },
{ name: 'Beets', color: 'Green', size: '4in', quantity: 30, price: '$3.50', created: 1442380043 },
{ name: 'Lettuce', color: 'Yellow', size: '1ft', quantity: 1000, price: '$2.50', created: 1442264863 },
{ name: 'Carrots', color: 'Red', size: '8in', quantity: 60, price: '$4.00', created: 1442084869 },
{ name: 'Rhubarb', color: 'Purple', size: '2ft', quantity: 190, price: '$3.99', created: 1441724876 },
{ name: 'Amaranth', color: 'Gray', size: '1in', quantity: 270, price: '$0.50', created: 1441184886 },
{ name: 'Arugula', color: 'Blue', size: '1ft', quantity: 0, price: '$4.30', created: 1439384893 },
{ name: 'Brussels sprout', color: 'Green', size: '2in', quantity: 910, price: '$9.50', created: 1438934904 },
{ name: 'Cabbage', color: 'Yellow', size: '1ft', quantity: 620, price: '$4.75', created: 1435784914 },
{ name: 'Watercress', color: 'Red', size: '3in', quantity: 1300, price: '$11.00', created: 1370984920 }
];