forked from 0x2620/pandora
listen to more resize events
This commit is contained in:
rolux
parent
dc6d9d3185
commit
17b008ef0b
2 changed files with 87 additions and 31 deletions
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
Loading…
Reference in a new issue