566 lines
11 KiB
JavaScript
566 lines
11 KiB
JavaScript
|
|
|
|
var app = new Ox.App({
|
|
apiURL: '/api/',
|
|
init: 'hello',
|
|
config: 'site.json' //FIXME: shouldn't need this, get data with 'hello' or 'init'.
|
|
});
|
|
|
|
app.launch(function(data) {
|
|
Ox.print(data);
|
|
|
|
app.$body = $('body');
|
|
app.$document = $(document);
|
|
app.$window = $(window);
|
|
/*
|
|
app.user = data.user;
|
|
app.config = data.config;
|
|
*/
|
|
|
|
/*
|
|
//FIXME: should this be a nested structure as their representation on the page?
|
|
app.constructors = ['wrapper', 'headerPanel', 'mainPanel', 'leftPanel', 'cityPicker', 'calendarBox', 'currentEventsList', 'middlePanel', 'middleTopPanel', 'newsfeedBox', 'aboutBox', 'itfBox', 'middleBottomPanel', 'erangBox', 'scriptArchiveBox', 'bestPracticesBox', 'biblioBox', 'offersNeedsBox', 'surveysBox', 'rightPanel', 'searchBox', 'loginBox', 'featureBox', 'footerPanel']
|
|
*/
|
|
|
|
app.$ui = {};
|
|
/*
|
|
Ox.each(app.constructors, function(i, v) {
|
|
app.$ui[v] = app.construct[v]();
|
|
});
|
|
*/
|
|
var wrapper = app.construct.wrapper();
|
|
app.$body.css({'opacity': 0});
|
|
wrapper.appendTo(app.$body);
|
|
app.$body.animate({
|
|
'opacity': 1
|
|
}, 2000);
|
|
|
|
|
|
/*
|
|
//FIXME: make sure to add a loading icon
|
|
Ox.Request.requests() && app.$ui.loadingIcon.start();
|
|
Ox.Event.bind('', 'requestStart', function() {
|
|
Ox.print('requestStart')
|
|
app.$ui.loadingIcon.start();
|
|
});
|
|
Ox.Event.bind('', 'requestStop', function() {
|
|
Ox.print('requestStop')
|
|
app.$ui.loadingIcon.stop();
|
|
});
|
|
*/
|
|
|
|
// $(body).append(app.$ui.wrapper);
|
|
|
|
});
|
|
|
|
|
|
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
|
|
featureBox
|
|
footerPanel
|
|
*/
|
|
|
|
|
|
'wrapper': function() {
|
|
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(),
|
|
},
|
|
{
|
|
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.Container({
|
|
id: id
|
|
});
|
|
c.$content.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");
|
|
});
|
|
return i;
|
|
},
|
|
|
|
/*
|
|
END headerPanel
|
|
*/
|
|
|
|
/*
|
|
BEGIN mainPanel
|
|
*/
|
|
|
|
'mainPanel': function() {
|
|
var id = 'mainPanel';
|
|
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(),
|
|
resizable: true
|
|
},
|
|
{
|
|
element: app.construct.rightPanel(),
|
|
size: 256,
|
|
resizable: true,
|
|
resize: [0, 128, 256, 384]
|
|
}
|
|
]
|
|
});
|
|
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: 40
|
|
},
|
|
{
|
|
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'
|
|
});
|
|
i.submit(function(val) {
|
|
Ox.Print("should handle submit of city name");
|
|
});
|
|
return i;
|
|
},
|
|
|
|
'calendarBox': function() {
|
|
var id = 'calendarBox';
|
|
var c = app.$ui[id] = new Ox.Container({
|
|
id: id
|
|
});
|
|
c.$content.html("somehow, the bookmyshow calendar goes here.");
|
|
return c;
|
|
},
|
|
|
|
'currentEventsList': function() {
|
|
var id = 'currentEventsList';
|
|
var c = app.$ui[id] = new Ox.Container({
|
|
id: id
|
|
});
|
|
c.$content.html("List of current events");
|
|
return c;
|
|
},
|
|
/*
|
|
END leftPanel
|
|
*/
|
|
|
|
/*
|
|
BEGIN middlePanel
|
|
*/
|
|
'middlePanel': function() {
|
|
var id = 'middlePanel';
|
|
var p = app.$ui[id] = new Ox.SplitPanel({
|
|
orientation: 'vertical',
|
|
id: id,
|
|
elements: [
|
|
{
|
|
element: app.construct.middleTopPanel(),
|
|
size: 128,
|
|
resizable: true,
|
|
resize: [0, 64, 128, 196, 256],
|
|
collapsible: true
|
|
},
|
|
{
|
|
element: app.construct.middleMiddlePanel(),
|
|
collapsible: true
|
|
},
|
|
{
|
|
element: app.construct.middleBottomPanel(),
|
|
size: 128,
|
|
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
|
|
},
|
|
{
|
|
element: app.construct.aboutBox()
|
|
},
|
|
{
|
|
element: app.construct.itfBox(),
|
|
size: 256
|
|
}
|
|
]
|
|
});
|
|
return p;
|
|
},
|
|
|
|
'newsfeedBox': function() {
|
|
var id = 'newsfeedBox';
|
|
var c = app.$ui[id] = new Ox.ItfBox({
|
|
id: id,
|
|
title: 'ITF NewsFeed'
|
|
});
|
|
for (var i=0; i<25; i++) {
|
|
var content = new Ox.Element().html('newsfeed content goes here');
|
|
c.$content.append(content);
|
|
}
|
|
return c;
|
|
},
|
|
|
|
'aboutBox': function() {
|
|
var id = 'aboutBox';
|
|
var c = app.$ui[id] = new Ox.Container({
|
|
id: id
|
|
});
|
|
c.$content.html("about goes here");
|
|
return c;
|
|
},
|
|
|
|
'itfBox': function() {
|
|
var id = 'itfBox';
|
|
var c = app.$ui[id] = new Ox.Container({
|
|
id: id
|
|
});
|
|
c.$content.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
|
|
},
|
|
{
|
|
element: app.construct.scriptArchiveBox()
|
|
},
|
|
{
|
|
element: app.construct.bestPracticesBox(),
|
|
size: 256
|
|
}
|
|
]
|
|
});
|
|
return p;
|
|
},
|
|
|
|
'erangBox': function() {
|
|
var id = 'erangBox';
|
|
var c = app.$ui[id] = new Ox.Container({
|
|
id: id
|
|
});
|
|
c.$content.html("erang goes here");
|
|
return c;
|
|
},
|
|
|
|
'scriptArchiveBox': function() {
|
|
var id = 'scriptArchiveBox';
|
|
var c = app.$ui[id] = new Ox.Container({
|
|
id: id
|
|
});
|
|
c.$content.html("script archive goes here");
|
|
return c;
|
|
},
|
|
|
|
'bestPracticesBox': function() {
|
|
var id = 'bestPracticesBox';
|
|
var c = app.$ui[id] = new Ox.Container({
|
|
id: id
|
|
});
|
|
c.$content.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
|
|
},
|
|
{
|
|
element: app.construct.offersNeedsBox()
|
|
},
|
|
{
|
|
element: app.construct.surveysBox(),
|
|
size: 256
|
|
}
|
|
]
|
|
});
|
|
return p;
|
|
},
|
|
|
|
'biblioBox': function() {
|
|
var id = 'biblioBox';
|
|
var c = app.$ui[id] = new Ox.Container({
|
|
id: id
|
|
});
|
|
c.$content.html("biblioBox here");
|
|
return c;
|
|
},
|
|
|
|
'offersNeedsBox': function() {
|
|
var id = 'offersNeedsBox';
|
|
var c = app.$ui[id] = new Ox.Container({
|
|
id: id
|
|
});
|
|
c.$content.html("offers and needs here");
|
|
return c;
|
|
},
|
|
|
|
'surveysBox': function() {
|
|
var id = 'surveysBox';
|
|
var c = app.$ui[id] = new Ox.Container({
|
|
id: id
|
|
});
|
|
c.$content.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: 256
|
|
},
|
|
{
|
|
element: app.construct.featureBox()
|
|
}
|
|
]
|
|
});
|
|
return p;
|
|
},
|
|
|
|
'loginBox': function() {
|
|
var id = 'loginBox';
|
|
var c = app.$ui[id] = new Ox.Container({
|
|
id: id
|
|
});
|
|
c.$content.html("login goes here");
|
|
return c;
|
|
},
|
|
|
|
'featureBox': function() {
|
|
var id = 'featureBox';
|
|
var c = app.$ui[id] = new Ox.Container({
|
|
id: id
|
|
});
|
|
c.$content.html("featured profile here");
|
|
return c;
|
|
},
|
|
|
|
/*
|
|
END rightPanel
|
|
*/
|
|
|
|
/*
|
|
END mainPanel
|
|
*/
|
|
|
|
/*
|
|
BEGIN footerPanel
|
|
*/
|
|
'footerPanel': function() {
|
|
var id = 'footerPanel';
|
|
var c = app.$ui[id] = new Ox.Container({
|
|
id: id
|
|
});
|
|
c.$content.html("footer goes here");
|
|
return c;
|
|
}
|
|
/*
|
|
END footerPanel
|
|
*/
|
|
}
|
|
|
|
|
|
|
|
/*
|
|
Ox.Box - generic box element, with a bar, some help, possibility for a short menu, and should some-how be able to contain items / elements.
|
|
|
|
*/
|
|
|
|
Ox.ItfBox = function(options, self) {
|
|
var self = self || {};
|
|
var that = new Ox.Container(options, self)
|
|
.defaults({
|
|
'title': ''
|
|
})
|
|
.options(options);
|
|
var title = self.options.title;
|
|
var $titlebar = new Ox.Bar({
|
|
orientation: 'horizontal',
|
|
size: 16
|
|
})
|
|
// .dblclick(dblclickTitlebar)
|
|
.appendTo(that.$content),
|
|
|
|
/*
|
|
$switch = new Ox.Button({
|
|
id: options.id + 'Switch',
|
|
style: 'symbol',
|
|
title: title,
|
|
type: 'image',
|
|
})
|
|
// .click(toggleCollapsed)
|
|
.appendTo($titlebar),
|
|
*/
|
|
$title = new Ox.Element()
|
|
.addClass('OxTitle')
|
|
.html(title/*.toUpperCase()*/)
|
|
.appendTo($titlebar);
|
|
|
|
// $buttons = new Ox.
|
|
return that;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|