From 7a402361891b63c85fc2cf621ccd502c0848d0ce Mon Sep 17 00:00:00 2001 From: sanj Date: Thu, 6 Jan 2011 11:29:08 +0530 Subject: [PATCH] mockup for box --- itf/app/models.py | 14 ++-- itf/static/js/itf/itf.js | 176 ++++++++++++++++++++++++++------------- 2 files changed, 125 insertions(+), 65 deletions(-) diff --git a/itf/app/models.py b/itf/app/models.py index cb1a584..1538312 100644 --- a/itf/app/models.py +++ b/itf/app/models.py @@ -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 diff --git a/itf/static/js/itf/itf.js b/itf/static/js/itf/itf.js index bc6821b..9c39cc7 100644 --- a/itf/static/js/itf/itf.js +++ b/itf/static/js/itf/itf.js @@ -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);