mockup for box
This commit is contained in:
sanj
parent
7827d617df
commit
7a40236189
|
|
@ -75,7 +75,8 @@ class ItfModel(models.Model):
|
|||
'page_no': 1,
|
||||
'list_size': 8,
|
||||
'search': '',
|
||||
'sort': []
|
||||
'sort': [],
|
||||
'range': [0,50]
|
||||
}
|
||||
options.update(data)
|
||||
ret = []
|
||||
|
|
@ -91,13 +92,10 @@ class ItfModel(models.Model):
|
|||
if sort != []:
|
||||
qset = qset.order_by(sort[0]) #FIXME: Do Sort!
|
||||
|
||||
paginator = Paginator(qset, list_size)
|
||||
try:
|
||||
results = paginator.page(page_no)
|
||||
except (EmptyPage, InvalidPage):
|
||||
results = paginator.page(paginator.num_pages)
|
||||
|
||||
for r in results.object_list:
|
||||
r0 = options['range'][0]
|
||||
r1 = options['range'][1]
|
||||
results = qset[r0:r1]
|
||||
for r in results:
|
||||
ret.append(r.list_dict())
|
||||
return ret
|
||||
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ var app = new Ox.App({
|
|||
});
|
||||
|
||||
app.launch(function(data) {
|
||||
Ox.theme("modern");
|
||||
Ox.print(data);
|
||||
|
||||
app.$body = $('body');
|
||||
|
|
@ -269,10 +270,10 @@ BEGIN headerPanel
|
|||
|
||||
'homeBox': function() {
|
||||
var id = 'homeBox';
|
||||
var c = app.$ui.homeBox = new Ox.Container({
|
||||
var c = app.$ui.homeBox = new Ox.Element({
|
||||
id: id
|
||||
});
|
||||
c.$content.html("This is the header - maybe load from a template?");
|
||||
c.html("This is the header - maybe load from a template?");
|
||||
return c;
|
||||
},
|
||||
|
||||
|
|
@ -309,18 +310,18 @@ BEGIN mainPanel
|
|||
{
|
||||
element: app.construct.leftPanel(),
|
||||
size: 256,
|
||||
resizable: true,
|
||||
resize: [0, 128, 256, 384]
|
||||
// resizable: true,
|
||||
// resize: [0, 128, 256, 384]
|
||||
},
|
||||
{
|
||||
element: app.construct.middlePanel(),
|
||||
resizable: true
|
||||
element: app.construct.middlePanel()
|
||||
// resizable: true
|
||||
},
|
||||
{
|
||||
element: app.construct.rightPanel(),
|
||||
size: 256,
|
||||
resizable: true,
|
||||
resize: [0, 128, 256, 384]
|
||||
// resizable: true,
|
||||
// resize: [0, 128, 256, 384]
|
||||
}
|
||||
]
|
||||
});
|
||||
|
|
@ -372,19 +373,19 @@ BEGIN mainPanel
|
|||
|
||||
'calendarBox': function() {
|
||||
var id = 'calendarBox';
|
||||
var c = app.$ui[id] = new Ox.Container({
|
||||
var c = app.$ui[id] = new Ox.Element({
|
||||
id: id
|
||||
});
|
||||
c.$content.html("somehow, the bookmyshow calendar goes here.");
|
||||
c.html("somehow, the bookmyshow calendar goes here.");
|
||||
return c;
|
||||
},
|
||||
|
||||
'currentEventsList': function() {
|
||||
var id = 'currentEventsList';
|
||||
var c = app.$ui[id] = new Ox.Container({
|
||||
var c = app.$ui[id] = new Ox.Element({
|
||||
id: id
|
||||
});
|
||||
c.$content.html("List of current events");
|
||||
c.html("List of current events");
|
||||
return c;
|
||||
},
|
||||
/*
|
||||
|
|
@ -403,20 +404,20 @@ BEGIN mainPanel
|
|||
{
|
||||
element: app.construct.middleTopPanel(),
|
||||
size: 128,
|
||||
resizable: true,
|
||||
resize: [0, 64, 128, 196, 256],
|
||||
collapsible: true
|
||||
// resizable: true,
|
||||
// resize: [0, 64, 128, 196, 256],
|
||||
// collapsible: true
|
||||
},
|
||||
{
|
||||
element: app.construct.middleMiddlePanel(),
|
||||
collapsible: true
|
||||
// collapsible: true
|
||||
},
|
||||
{
|
||||
element: app.construct.middleBottomPanel(),
|
||||
size: 128,
|
||||
resizable: true,
|
||||
resize: [0, 64, 128, 196, 256],
|
||||
collapsible: true
|
||||
// resizable: true,
|
||||
// resize: [0, 64, 128, 196, 256],
|
||||
// collapsible: true
|
||||
}
|
||||
]
|
||||
});
|
||||
|
|
@ -450,7 +451,7 @@ BEGIN mainPanel
|
|||
|
||||
'newsfeedBox': function() {
|
||||
var id = 'newsfeedBox';
|
||||
var c = app.$ui[id] = new Ox.Container({
|
||||
var c = app.$ui[id] = new Ox.Element({
|
||||
id: id,
|
||||
title: 'ITF NewsFeed'
|
||||
});
|
||||
|
|
@ -463,20 +464,20 @@ BEGIN mainPanel
|
|||
|
||||
'aboutBox': function() {
|
||||
var id = 'aboutBox';
|
||||
var c = app.$ui[id] = new Ox.Container({
|
||||
var c = app.$ui[id] = new Ox.Element({
|
||||
id: id,
|
||||
title: 'About'
|
||||
});
|
||||
c.$content.html("about goes here");
|
||||
c.html("about goes here");
|
||||
return c;
|
||||
},
|
||||
|
||||
'itfBox': function() {
|
||||
var id = 'itfBox';
|
||||
var c = app.$ui[id] = new Ox.Container({
|
||||
var c = app.$ui[id] = new Ox.Element({
|
||||
id: id
|
||||
});
|
||||
c.$content.html("about itf goes here");
|
||||
c.html("about itf goes here");
|
||||
return c;
|
||||
},
|
||||
/*
|
||||
|
|
@ -511,10 +512,10 @@ BEGIN mainPanel
|
|||
|
||||
'erangBox': function() {
|
||||
var id = 'erangBox';
|
||||
var c = app.$ui[id] = new Ox.Container({
|
||||
var c = app.$ui[id] = new Ox.Element({
|
||||
id: id
|
||||
});
|
||||
c.$content.html("erang goes here");
|
||||
c.html("erang goes here");
|
||||
return c;
|
||||
},
|
||||
|
||||
|
|
@ -524,9 +525,10 @@ BEGIN mainPanel
|
|||
'id': id,
|
||||
'title': 'Script Bank',
|
||||
'module': 'scriptbank',
|
||||
'model': 'Script'
|
||||
'model': 'Script',
|
||||
'info': 'Script Archives are great, etc.'
|
||||
});
|
||||
// c.$content.html("script archive goes here");
|
||||
// c.html("script archive goes here");
|
||||
return c;
|
||||
},
|
||||
|
||||
|
|
@ -536,9 +538,10 @@ BEGIN mainPanel
|
|||
'id': id,
|
||||
'title': 'Best Practices',
|
||||
'module': 'bestpractices',
|
||||
'model': 'BestPractice'
|
||||
'model': 'BestPractice',
|
||||
'info': 'Some best practices lorem ipsum'
|
||||
});
|
||||
// c.$content.html("best practices goes here");
|
||||
// c.html("best practices goes here");
|
||||
return c;
|
||||
},
|
||||
|
||||
|
|
@ -573,28 +576,28 @@ BEGIN mainPanel
|
|||
|
||||
'biblioBox': function() {
|
||||
var id = 'biblioBox';
|
||||
var c = app.$ui[id] = new Ox.Container({
|
||||
var c = app.$ui[id] = new Ox.Element({
|
||||
id: id
|
||||
});
|
||||
c.$content.html("biblioBox here");
|
||||
c.html("biblioBox here");
|
||||
return c;
|
||||
},
|
||||
|
||||
'offersNeedsBox': function() {
|
||||
var id = 'offersNeedsBox';
|
||||
var c = app.$ui[id] = new Ox.Container({
|
||||
var c = app.$ui[id] = new Ox.Element({
|
||||
id: id
|
||||
});
|
||||
c.$content.html("offers and needs here");
|
||||
c.html("offers and needs here");
|
||||
return c;
|
||||
},
|
||||
|
||||
'surveysBox': function() {
|
||||
var id = 'surveysBox';
|
||||
var c = app.$ui[id] = new Ox.Container({
|
||||
var c = app.$ui[id] = new Ox.Element({
|
||||
id: id
|
||||
});
|
||||
c.$content.html("surveys go here");
|
||||
c.html("surveys go here");
|
||||
return c;
|
||||
},
|
||||
|
||||
|
|
@ -630,19 +633,19 @@ BEGIN mainPanel
|
|||
|
||||
'loginBox': function() {
|
||||
var id = 'loginBox';
|
||||
var c = app.$ui[id] = new Ox.Container({
|
||||
var c = app.$ui[id] = new Ox.Element({
|
||||
id: id
|
||||
});
|
||||
c.$content.html("login goes here");
|
||||
c.html("login goes here");
|
||||
return c;
|
||||
},
|
||||
|
||||
'featureBox': function() {
|
||||
var id = 'featureBox';
|
||||
var c = app.$ui[id] = new Ox.Container({
|
||||
var c = app.$ui[id] = new Ox.Element({
|
||||
id: id
|
||||
});
|
||||
c.$content.html("featured profile here");
|
||||
c.html("featured profile here");
|
||||
return c;
|
||||
},
|
||||
|
||||
|
|
@ -659,10 +662,10 @@ BEGIN footerPanel
|
|||
*/
|
||||
'footerPanel': function() {
|
||||
var id = 'footerPanel';
|
||||
var c = app.$ui[id] = new Ox.Container({
|
||||
var c = app.$ui[id] = new Ox.Element({
|
||||
id: id
|
||||
});
|
||||
c.$content.html("footer goes here");
|
||||
c.html("footer goes here");
|
||||
return c;
|
||||
}
|
||||
/*
|
||||
|
|
@ -673,13 +676,12 @@ 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.Box - generic box element, with a bar, some help, search, a menu, etc.
|
||||
*/
|
||||
|
||||
Ox.ItfBox = function(options, self) {
|
||||
var self = self || {};
|
||||
var that = new Ox.Container(options, self)
|
||||
var that = new Ox.Element(options, self)
|
||||
.defaults({
|
||||
'title': ''
|
||||
})
|
||||
|
|
@ -703,35 +705,94 @@ Ox.ItfBox = function(options, self) {
|
|||
})
|
||||
.css({'width': '128px', 'marginLeft': 'auto', 'marginRight': 'auto'})
|
||||
.appendTo(that)
|
||||
.hide();
|
||||
.hide()
|
||||
.bindEvent("submit", function(value) {
|
||||
$list.options("request", function(data, callback) {
|
||||
return app.api.find(getQueryParams(data), callback)
|
||||
});
|
||||
});
|
||||
|
||||
var $switch = new Ox.Button({
|
||||
id: options.id + 'Switch',
|
||||
|
||||
var $buttons = new Ox.Element().appendTo($title).css({'position': 'absolute', 'top': '1px', 'right': '1px'});
|
||||
|
||||
var $infoBtn = new Ox.Button({
|
||||
id: options.id + "InfoBtn",
|
||||
style: 'symbold',
|
||||
title: 'info',
|
||||
type: 'image',
|
||||
tooltip: 'More info about ' + options.title
|
||||
})
|
||||
.appendTo($buttons)
|
||||
.bindEvent("click", function() {
|
||||
var info = options.info;
|
||||
var d = new Ox.Dialog({
|
||||
buttons: [
|
||||
new Ox.Button({
|
||||
id: 'cancel',
|
||||
title: 'Close',
|
||||
})
|
||||
.bindEvent("click", function() { d.close(); })
|
||||
],
|
||||
content: new Ox.Element().html(info),
|
||||
title: options.title
|
||||
})
|
||||
.open();
|
||||
});
|
||||
|
||||
var $searchBtn = new Ox.Button({
|
||||
id: options.id + 'SearchBtn',
|
||||
style: 'symbol',
|
||||
title: 'collapse',
|
||||
title: 'find',
|
||||
type: 'image',
|
||||
tooltip: 'Search'
|
||||
})
|
||||
.css({'position': 'absolute', 'top': '1px', 'right': '1px', 'marginLeft': '6px'})
|
||||
|
||||
.bindEvent("click", function() {
|
||||
// alert("foo");
|
||||
// $search.slideDown();
|
||||
$search.is(":visible") ? $search.slideUp() : $search.slideDown();
|
||||
$search.focus();
|
||||
})
|
||||
.appendTo($title);
|
||||
.appendTo($buttons);
|
||||
|
||||
|
||||
var $menuBtn = new Ox.Button({
|
||||
id: options.id + 'MenuBtn',
|
||||
style: 'symbol',
|
||||
title: 'collapse',
|
||||
type: 'image',
|
||||
tooltip: 'Show Menu'
|
||||
}).appendTo($buttons);
|
||||
|
||||
var $menu = new Ox.Menu({
|
||||
id: options.id + 'Menu',
|
||||
element: $menuBtn,
|
||||
items: [
|
||||
{id: 'Test', title: 'Menu Item 1'},
|
||||
{id: 'Test2', title: 'Menu Item 2'}
|
||||
]
|
||||
});
|
||||
|
||||
var $list = new Ox.ItfList({
|
||||
$menuBtn.bindEvent("click", function() {
|
||||
$menu.showMenu();
|
||||
});
|
||||
|
||||
function getQueryParams(data) {
|
||||
// Ox.print("SEARCHVAL", $search.val());
|
||||
return $.extend(data, {
|
||||
'search': $search.value() == 'Search' ? '' : $search.value(),
|
||||
'model': options.model,
|
||||
'module': options.module
|
||||
});
|
||||
}
|
||||
|
||||
var $list = new Ox.List({
|
||||
'width': 256,
|
||||
'itemWidth': 256,
|
||||
'itemHeight': 16,
|
||||
'itemWidth': 250,
|
||||
'orientation': 'horizontal',
|
||||
'request': function(data, callback) {
|
||||
// var queryParams = $.extend(data, {'model': options.id, 'query': app.Query.toObject()});
|
||||
var queryParams = $.extend(data, {'model': options.model, 'module': options.module, 'query': {}});
|
||||
// alert(JSON.stringify(queryParams));
|
||||
return app.api.find(queryParams, callback)
|
||||
return app.api.find(getQueryParams(data), callback)
|
||||
},
|
||||
'id': options.id + 'List',
|
||||
'construct': function(data) {
|
||||
|
|
@ -740,6 +801,7 @@ Ox.ItfBox = function(options, self) {
|
|||
return $item;
|
||||
}
|
||||
})
|
||||
.css({'overflow-x': 'hidden'})
|
||||
.appendTo(that);
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user