listen to more resize events

This commit is contained in:
rolux 2010-12-22 18:28:44 +00:00
parent dc6d9d3185
commit 17b008ef0b
2 changed files with 87 additions and 31 deletions

View file

@ -120,11 +120,12 @@
"columns": ["id", "title", "director", "country", "year", "language", "genre"],
"findQuery": {"conditions": [], "operator": ""},
"groupsQuery": {"conditions": [], "operator": "|"},
"groupsSize": 128,
"groupsSize": 176,
"itemView": "timeline",
"listQuery": {"conditions": [], "operator": ""},
"listsSize": 256,
"listView": "icons",
"section": "items",
"sections": ["history", "lists", "public", "featured", "admin"],
"showAnnotations": true,
"showGroups": true,

View file

@ -23,6 +23,7 @@ var pandora = new Ox.App({
},
ui: {
infoRatio: 4 / 3,
sectionElement: 'buttons',
selectedMovies: []
},
user: data.user
@ -58,6 +59,17 @@ var pandora = new Ox.App({
app.$ui.appPanel = ui.appPanel().display();
app.ui.sectionButtonsWidth = app.$ui.sectionButtons.width() + 8;
app.$ui.window.resize(function(foo) {
Ox.print('foo', foo)
app.$ui.list.size();
resizeGroups(app.$ui.rightPanel.width());
if (app.user.ui.listView == 'map') {
app.$ui.map.triggerResize();
}
});
}
var ui = {
@ -301,7 +313,7 @@ var pandora = new Ox.App({
delete data.keys;
return pandora.api.find($.extend(data, {
group: id,
query: Query.toObject()
query: Query.toObject(id)
}), callback);
},
sort: [
@ -528,7 +540,7 @@ var pandora = new Ox.App({
var that = new Ox.SplitPanel({
elements: [
{
element: app.$ui.sectionbar = ui.sectionbar(),
element: app.$ui.sectionbar = ui.sectionbar('buttons'),
size: 24
},
{
@ -548,6 +560,15 @@ var pandora = new Ox.App({
orientation: 'vertical'
})
.bindEvent('resize', function(event, data) {
if (data < app.ui.sectionButtonsWidth && app.$ui.sectionButtons) {
app.$ui.sectionButtons.remove();
delete app.$ui.sectionButtons;
app.$ui.sectionbar.append(app.$ui.sectionSelect = ui.sectionSelect());
} else if (data >= app.ui.sectionButtonsWidth && app.$ui.sectionSelect) {
app.$ui.sectionSelect.remove();
delete app.$ui.sectionSelect;
app.$ui.sectionbar.append(app.$ui.sectionButtons = ui.sectionButtons());
}
Ox.print('resize', data, data / app.ui.infoRatio + 16);
app.$ui.leftPanel.size('infoPanel', Math.round(data / app.ui.infoRatio) + 16);
});
@ -567,6 +588,7 @@ var pandora = new Ox.App({
}),
columnsMovable: true,
columnsRemovable: true,
columnsResizable: true,
id: 'list',
request: function(data, callback) {
Ox.print('data, Query.toObject', data, Query.toObject())
@ -702,6 +724,9 @@ var pandora = new Ox.App({
}
],
orientation: 'horizontal'
})
.bindEvent('resize', function() {
app.$ui.map.triggerResize();
});
} else {
$list = new Ox.Element('<div>')
@ -951,13 +976,15 @@ var pandora = new Ox.App({
id: 'mainMenu',
menus: [
{ id: app.config.site.id + 'Menu', title: app.config.site.name, items: [
{ id: 'about', title: 'About' },
{ id: 'home', title: 'Home' },
{},
{ id: 'home', title: 'Home Screen' },
{ id: 'about', title: 'About' },
{ id: 'tour', title: 'Tour' },
{ id: 'news', title: 'News' },
{ id: 'faq', title: 'Frequently Asked Questions' },
{ id: 'tos', title: 'Terms of Service' },
{},
{ id: 'contact', title: 'Contact...' }
{ id: 'contact', title: 'Contact' }
] },
{ id: 'userMenu', title: 'User', items: [
{ id: 'username', title: 'User: not logged in', disabled: true },
@ -1583,44 +1610,44 @@ var pandora = new Ox.App({
orientation: 'vertical'
})
.bindEvent('resize', function(event, data) {
var widths = $.map(app.ui.groups, function(v, i) {
return getGroupWidth(i, data);
});
Ox.print('widths', widths);
app.$ui.browser.size(0, widths[0].list).size(2, widths[4].list);
app.$ui.groupsInnerPanel.size(0, widths[1].list).size(2, widths[3].list);
$.each(app.$ui.groups, function(i, list) {
list.resizeColumn('name', widths[i].column);
});
resizeGroups(data);
app.$ui.list.size();
if (app.user.ui.listView == 'map') {
app.$ui.map.triggerResize();
}
});
return that;
},
sectionbar: function() {
sectionbar: function(mode) {
var that = new Ox.Bar({
size: 24
})
.append(
app.$ui.sectionButtons = new Ox.ButtonGroup({
buttons: [
{id: 'site', title: app.config.site.name},
{id: 'items', title: app.config.itemName.plural},
{id: 'texts', title: 'Texts'},
{id: 'admin', title: 'Admin', type: 'image'}
],
id: 'sectionButtons',
selectable: true
})
.css({
float: 'left',
margin: '4px'
})
mode == 'buttons' ?
app.$ui.sectionButtons = ui.sectionButtons() :
app.$ui.sectionSelect = ui.sectionSelect()
);
that.toggle = function() {
};
return that;
},
sectionButtons: function() {
var that = new Ox.ButtonGroup({
buttons: items = [
{id: 'site', title: app.config.site.name},
{id: 'items', title: app.config.itemName.plural},
{id: 'texts', title: 'Texts'},
{id: 'admin', title: 'Admin'}
],
id: 'sectionButtons',
selectable: true
}).css({
float: 'left',
margin: '4px'
});
return that;
},
sections: function() {
var that = new Ox.Element();
var $sections = [];
@ -1651,6 +1678,21 @@ var pandora = new Ox.App({
}
return that;
},
sectionSelect: function() {
var that = new Ox.Select({
id: 'sectionSelect',
items: items = [
{id: 'site', title: app.config.site.name},
{id: 'items', title: app.config.itemName.plural},
{id: 'texts', title: 'Texts'},
{id: 'admin', title: 'Admin'}
]
}).css({
float: 'left',
margin: '4px'
});
return that;
},
status: function(key, data) {
var that = Ox.toTitleCase(key) + ': ' + [
Ox.formatNumber(data.items) + ' movie' + (data.items != 1 ? 's' : ''),
@ -1719,6 +1761,7 @@ var pandora = new Ox.App({
})
.bindEvent('change', function(event, data) {
var id = data.selected[0].id;
app.user.ui.listView = id;
app.$ui.mainMenu.checkItem('viewMenu_movies_' + id);
//$ui.list.$element.replaceWith(constructList(id));
// Ox.print('change ... id', id, list = app.constructList(id), list.options(), list.options('id'))
@ -1736,6 +1779,18 @@ var pandora = new Ox.App({
return width;
}
function resizeGroups(width) {
var widths = $.map(app.ui.groups, function(v, i) {
return getGroupWidth(i, width);
});
Ox.print('widths', widths);
app.$ui.browser.size(0, widths[0].list).size(2, widths[4].list);
app.$ui.groupsInnerPanel.size(0, widths[1].list).size(2, widths[3].list);
$.each(app.$ui.groups, function(i, list) {
list.resizeColumn('name', widths[i].column);
});
}
var Query = (function() {
function constructFind(query) {