548 lines
11 KiB
JavaScript
548 lines
11 KiB
JavaScript
|
|
app.construct = {
|
|
/*
|
|
Structure:
|
|
wrapper
|
|
headerPanel
|
|
homeBox
|
|
searchBox
|
|
mainPanel
|
|
leftPanel
|
|
cityPicker
|
|
calendarBox
|
|
currentEventsList
|
|
middlePanel
|
|
middleTopPanel
|
|
newsfeedBox
|
|
aboutBox
|
|
itfBox
|
|
middleMiddlePanel
|
|
erangBox
|
|
scriptArchiveBox
|
|
bestPracticesBox
|
|
middleBottomPanel
|
|
biblioBox
|
|
offersNeedsBox
|
|
surveysBox
|
|
rightPanel
|
|
loginBox
|
|
previewBox
|
|
footerPanel
|
|
*/
|
|
|
|
|
|
'wrapper': function(pageData) {
|
|
var id = 'wrapper';
|
|
// Constructs overall wrapper for the page, and should be appended to $(body)
|
|
return app.$ui[id] = new Ox.SplitPanel({
|
|
id: id,
|
|
orientation: 'vertical',
|
|
elements: [
|
|
{
|
|
element: app.construct.headerPanel(),
|
|
size: 40
|
|
},
|
|
{
|
|
element: app.construct.mainPanel(pageData),
|
|
},
|
|
{
|
|
element: app.construct.footerPanel(),
|
|
size: 40
|
|
}
|
|
]
|
|
});
|
|
},
|
|
|
|
/*
|
|
BEGIN headerPanel
|
|
*/
|
|
'headerPanel': function() {
|
|
var id = 'headerPanel';
|
|
var p = app.$ui[id] = new Ox.SplitPanel({
|
|
orientation: 'horizontal',
|
|
id: id,
|
|
elements: [
|
|
{
|
|
element: app.construct.homeBox(),
|
|
},
|
|
{
|
|
element: app.construct.searchBox(),
|
|
size: 128
|
|
|
|
}
|
|
]
|
|
});
|
|
return p;
|
|
},
|
|
|
|
'homeBox': function() {
|
|
var id = 'homeBox';
|
|
var c = app.$ui.homeBox = new Ox.Element({
|
|
id: id
|
|
});
|
|
c.html("This is the header - maybe load from a template?");
|
|
return c;
|
|
},
|
|
|
|
'searchBox': function() {
|
|
var id = 'searchBox';
|
|
var i = app.$ui.searchBox = new Ox.Input({
|
|
'id': id,
|
|
'placeholder': 'Search'
|
|
});
|
|
i.bindEvent("submit", function(val) {
|
|
Ox.print("Should be doing a search");
|
|
});
|
|
i.css({
|
|
'marginRight': '15px',
|
|
'marginTop': '6px'
|
|
});
|
|
return i;
|
|
},
|
|
|
|
/*
|
|
END headerPanel
|
|
*/
|
|
|
|
/*
|
|
BEGIN mainPanel
|
|
*/
|
|
|
|
'mainPanel': function(pageData) {
|
|
var id = 'mainPanel';
|
|
// var p = app.$ui[id] = new ItfPage(pageData);
|
|
|
|
var p = app.$ui[id] = new Ox.SplitPanel({
|
|
id: id,
|
|
orientation: 'horizontal',
|
|
elements: [
|
|
/* {
|
|
element: app.construct.leftPanel(),
|
|
size: 256,
|
|
resizable: true,
|
|
resize: [0, 128, 256, 384]
|
|
}, */
|
|
{
|
|
element: app.construct.middlePanel(pageData),
|
|
size: 1000,
|
|
resizable: true
|
|
},
|
|
{
|
|
element: app.construct.rightPanel(),
|
|
}
|
|
]
|
|
});
|
|
|
|
return p;
|
|
},
|
|
|
|
/*
|
|
BEGIN leftPanel
|
|
*/
|
|
'leftPanel': function() {
|
|
var id = 'leftPanel';
|
|
var p = app.$ui[id] = new Ox.SplitPanel({
|
|
id: id,
|
|
orientation: 'vertical',
|
|
elements: [
|
|
{
|
|
element: app.construct.cityPicker(),
|
|
size: 20
|
|
},
|
|
{
|
|
element: app.construct.calendarBox()
|
|
},
|
|
{
|
|
element: app.construct.currentEventsList(),
|
|
size: 300
|
|
}
|
|
]
|
|
});
|
|
return p;
|
|
},
|
|
|
|
'cityPicker': function() {
|
|
var id = 'cityPicker';
|
|
var i = app.$ui[id] = new Ox.Input({
|
|
id: id,
|
|
placeholder: 'Chose Your City',
|
|
autocomplete: ['Mumbai', 'Gurgaon', 'Agra', 'Delhi', 'Bangalore', 'Calcutta', 'Hyderabad'],
|
|
autocompleteSelect: true,
|
|
autocompleteSelectHighlight: true,
|
|
autocompleteSelectSubmit: true,
|
|
autocompleteReplaceCorrect: true,
|
|
width: 250,
|
|
labelWidth: 0
|
|
});
|
|
i.bindEvent("submit", function(event, data) {
|
|
Ox.print(data);
|
|
// alert(data.value);
|
|
});
|
|
return i;
|
|
},
|
|
|
|
'calendarBox': function() {
|
|
var id = 'calendarBox';
|
|
var c = app.$ui[id] = new Ox.Element({
|
|
id: id
|
|
});
|
|
c.html("somehow, the bookmyshow calendar goes here.");
|
|
return c;
|
|
},
|
|
|
|
'currentEventsList': function() {
|
|
var id = 'currentEventsList';
|
|
var c = app.$ui[id] = new Ox.Element({
|
|
id: id
|
|
});
|
|
c.html("List of current events");
|
|
return c;
|
|
},
|
|
/*
|
|
END leftPanel
|
|
*/
|
|
|
|
/*
|
|
BEGIN middlePanel
|
|
*/
|
|
'middlePanel': function(pageData) {
|
|
var id = 'middlePanel';
|
|
var p = new Ox.ItfPage(pageData);
|
|
/*
|
|
var p = app.$ui[id] = new Ox.SplitPanel({
|
|
orientation: 'vertical',
|
|
id: id,
|
|
elements: [
|
|
{
|
|
element: app.construct.middleTopPanel(),
|
|
size: 196,
|
|
resizable: true,
|
|
resize: [0, 64, 128, 196, 256],
|
|
// collapsible: true
|
|
},
|
|
{
|
|
element: app.construct.middleMiddlePanel(),
|
|
// collapsible: true
|
|
},
|
|
{
|
|
element: app.construct.middleBottomPanel(),
|
|
size: 196,
|
|
resizable: true,
|
|
resize: [0, 64, 128, 196, 256],
|
|
// collapsible: true
|
|
}
|
|
]
|
|
});
|
|
*/
|
|
return p;
|
|
},
|
|
|
|
/*
|
|
BEGIN middleTopPanel
|
|
*/
|
|
'middleTopPanel': function() {
|
|
var id = 'middleTopPanel';
|
|
var p = app.$ui[id] = new Ox.SplitPanel({
|
|
id: id,
|
|
orientation: 'horizontal',
|
|
elements: [
|
|
{
|
|
element: app.construct.newsfeedBox(),
|
|
size: 256,
|
|
resizable: true,
|
|
resize: [0,128,196,256,384,512]
|
|
},
|
|
{
|
|
element: app.construct.aboutBox()
|
|
},
|
|
{
|
|
element: app.construct.itfBox(),
|
|
size: 256,
|
|
resizable: true,
|
|
resize: [0,128,196,256,384,512]
|
|
}
|
|
]
|
|
});
|
|
return p;
|
|
},
|
|
|
|
'newsfeedBox': function() {
|
|
var id = 'newsfeedBox';
|
|
var c = app.$ui[id] = new Ox.Element({
|
|
id: id,
|
|
title: 'ITF NewsFeed'
|
|
});
|
|
for (var i=0; i<25; i++) {
|
|
var content = new Ox.Element().html('newsfeed content goes here');
|
|
c.append(content);
|
|
}
|
|
return c;
|
|
},
|
|
|
|
'aboutBox': function() {
|
|
var id = 'aboutBox';
|
|
var c = app.$ui[id] = new Ox.Element({
|
|
id: id,
|
|
title: 'About'
|
|
});
|
|
c.html("about goes here");
|
|
return c;
|
|
},
|
|
|
|
'itfBox': function() {
|
|
var id = 'itfBox';
|
|
var c = app.$ui[id] = new Ox.Element({
|
|
id: id
|
|
});
|
|
c.html("about itf goes here");
|
|
return c;
|
|
},
|
|
/*
|
|
END middleTopPanel
|
|
*/
|
|
|
|
/*
|
|
BEGIN middleMiddlePanel
|
|
*/
|
|
|
|
'middleMiddlePanel': function() {
|
|
var id = 'middleMiddlePanel';
|
|
var p = app.$ui[id] = new Ox.SplitPanel({
|
|
id: id,
|
|
orientation: 'horizontal',
|
|
elements: [
|
|
{
|
|
element: app.construct.erangBox(),
|
|
size: 256,
|
|
resizable: true,
|
|
resize: [0,128,196,256,384,512]
|
|
},
|
|
{
|
|
element: app.construct.scriptArchiveBox()
|
|
},
|
|
{
|
|
element: app.construct.bestPracticesBox(),
|
|
size: 256,
|
|
resizable: true,
|
|
resize: [0,128,196,256,384,512]
|
|
}
|
|
]
|
|
});
|
|
return p;
|
|
},
|
|
|
|
'erangBox': function() {
|
|
var id = 'erangBox';
|
|
var c = app.$ui[id] = new Ox.Element({
|
|
id: id
|
|
});
|
|
c.html("erang goes here");
|
|
return c;
|
|
},
|
|
|
|
'scriptArchiveBox': function() {
|
|
var id = 'scriptbankBox';
|
|
var c = app.$ui[id] = new Ox.ItfBox({
|
|
'id': id,
|
|
'title': 'Script Bank',
|
|
'module': 'scriptbank',
|
|
'model': 'Script',
|
|
'info': 'Script Archives are great, etc.'
|
|
});
|
|
// c.html("script archive goes here");
|
|
return c;
|
|
},
|
|
|
|
'bestPracticesBox': function() {
|
|
var id = 'bestpracticesBox';
|
|
var title = "Best Practices";
|
|
var module = "bestpractices";
|
|
var model = "BestPractice";
|
|
var info = "Some best practices lorem ipsum";
|
|
var c = app.$ui[id] = new Ox.ItfBox({
|
|
'id': id,
|
|
'title': 'Best Practices',
|
|
'module': 'bestpractices',
|
|
'model': 'BestPractice',
|
|
'info': 'Some best practices lorem ipsum'
|
|
/*
|
|
'preview': function(data, callback) {
|
|
var selectedId = data.ids[0];
|
|
app.api.preview({
|
|
'model': model,
|
|
'module': module,
|
|
'data': {'id': selectedId}
|
|
}, callback);
|
|
}
|
|
*/
|
|
});
|
|
// c.html("best practices goes here");
|
|
return c;
|
|
},
|
|
|
|
/*
|
|
END middleMiddlePanel
|
|
*/
|
|
|
|
/*
|
|
BEGIN middleBottomPanel
|
|
*/
|
|
'middleBottomPanel': function() {
|
|
var id = 'middleBottomPanel';
|
|
var p = app.$ui[id] = new Ox.SplitPanel({
|
|
id: id,
|
|
orientation: 'horizontal',
|
|
elements: [
|
|
{
|
|
element: app.construct.biblioBox(),
|
|
size: 256,
|
|
resizable: true,
|
|
resize: [0,128,196,256,384,512]
|
|
},
|
|
{
|
|
element: app.construct.offersNeedsBox()
|
|
},
|
|
{
|
|
element: app.construct.surveysBox(),
|
|
size: 256,
|
|
resizable: true,
|
|
resize: [0,128,196,256,384,512]
|
|
}
|
|
]
|
|
});
|
|
return p;
|
|
},
|
|
|
|
'biblioBox': function() {
|
|
var id = 'biblioBox';
|
|
var c = app.$ui[id] = new Ox.Element({
|
|
id: id
|
|
});
|
|
c.html("biblioBox here");
|
|
return c;
|
|
},
|
|
|
|
'offersNeedsBox': function() {
|
|
var id = 'offersNeedsBox';
|
|
var c = app.$ui[id] = new Ox.Element({
|
|
id: id
|
|
});
|
|
c.html("offers and needs here");
|
|
return c;
|
|
},
|
|
|
|
'surveysBox': function() {
|
|
var id = 'surveysBox';
|
|
var c = app.$ui[id] = new Ox.Element({
|
|
id: id
|
|
});
|
|
c.html("surveys go here");
|
|
return c;
|
|
},
|
|
|
|
/*
|
|
END middleBottomPanel
|
|
*/
|
|
|
|
/*
|
|
END middlePanel
|
|
*/
|
|
|
|
/*
|
|
BEGIN rightPanel
|
|
*/
|
|
|
|
'rightPanel': function() {
|
|
var id = 'rightPanel';
|
|
var p = app.$ui[id] = new Ox.SplitPanel({
|
|
id: id,
|
|
orientation: 'vertical',
|
|
elements: [
|
|
{
|
|
element: app.construct.loginBox(),
|
|
size: 32
|
|
},
|
|
{
|
|
element: app.construct.previewBox()
|
|
}
|
|
]
|
|
});
|
|
return p;
|
|
},
|
|
|
|
'loginBox': function() {
|
|
var id = 'loginBox';
|
|
var c = app.$ui[id] = new Ox.Element({
|
|
id: id
|
|
});
|
|
|
|
|
|
var btnsWrapper = c.$btns = new Ox.Element().css({'textAlign': 'center', 'marginTop': '4px'});
|
|
|
|
var info = c.$info = new Ox.Element("span").appendTo(btnsWrapper);
|
|
|
|
var loginBtn = c.$loginBtn = new Ox.Button({
|
|
'id': 'loginBtn',
|
|
'title': 'Login',
|
|
'size': 'large'
|
|
}).bindEvent("click", function() {
|
|
ui.accountDialog("login").open();
|
|
}).appendTo(btnsWrapper);
|
|
|
|
var registerBtn = c.$registerBtn = new Ox.Button({
|
|
'id': 'registerBtn',
|
|
'title': 'Register',
|
|
'size': 'large'
|
|
}).bindEvent("click", function() {
|
|
ui.accountDialog("register").open();
|
|
}).appendTo(btnsWrapper);
|
|
|
|
var logoutBtn = c.$logoutBtn = new Ox.Button({
|
|
'id': 'logoutBtn',
|
|
'title': 'Logout',
|
|
'size': 'large'
|
|
}).bindEvent("click", function() {
|
|
app.api.logout({}, function(data) {
|
|
ui.accountLogoutDialog().open();
|
|
});
|
|
}).appendTo(btnsWrapper).hide();
|
|
|
|
|
|
btnsWrapper.appendTo(c);
|
|
return c;
|
|
},
|
|
|
|
'previewBox': function() {
|
|
var id = 'previewBox';
|
|
var c = app.$ui[id] = new Ox.ItfPreview({
|
|
id: id
|
|
});
|
|
c.$content.html("previews here");
|
|
return c;
|
|
},
|
|
|
|
/*
|
|
END rightPanel
|
|
*/
|
|
|
|
/*
|
|
END mainPanel
|
|
*/
|
|
|
|
/*
|
|
BEGIN footerPanel
|
|
*/
|
|
'footerPanel': function() {
|
|
var id = 'footerPanel';
|
|
var c = app.$ui[id] = new Ox.Element({
|
|
id: id
|
|
});
|
|
c.html("footer goes here");
|
|
return c;
|
|
}
|
|
/*
|
|
END footerPanel
|
|
*/
|
|
}
|
|
|