listen to more resize events
This commit is contained in:
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"],
|
"columns": ["id", "title", "director", "country", "year", "language", "genre"],
|
||||||
"findQuery": {"conditions": [], "operator": ""},
|
"findQuery": {"conditions": [], "operator": ""},
|
||||||
"groupsQuery": {"conditions": [], "operator": "|"},
|
"groupsQuery": {"conditions": [], "operator": "|"},
|
||||||
"groupsSize": 128,
|
"groupsSize": 176,
|
||||||
"itemView": "timeline",
|
"itemView": "timeline",
|
||||||
"listQuery": {"conditions": [], "operator": ""},
|
"listQuery": {"conditions": [], "operator": ""},
|
||||||
"listsSize": 256,
|
"listsSize": 256,
|
||||||
"listView": "icons",
|
"listView": "icons",
|
||||||
|
"section": "items",
|
||||||
"sections": ["history", "lists", "public", "featured", "admin"],
|
"sections": ["history", "lists", "public", "featured", "admin"],
|
||||||
"showAnnotations": true,
|
"showAnnotations": true,
|
||||||
"showGroups": true,
|
"showGroups": true,
|
||||||
|
|
|
@ -23,6 +23,7 @@ var pandora = new Ox.App({
|
||||||
},
|
},
|
||||||
ui: {
|
ui: {
|
||||||
infoRatio: 4 / 3,
|
infoRatio: 4 / 3,
|
||||||
|
sectionElement: 'buttons',
|
||||||
selectedMovies: []
|
selectedMovies: []
|
||||||
},
|
},
|
||||||
user: data.user
|
user: data.user
|
||||||
|
@ -58,6 +59,17 @@ var pandora = new Ox.App({
|
||||||
|
|
||||||
app.$ui.appPanel = ui.appPanel().display();
|
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 = {
|
var ui = {
|
||||||
|
@ -301,7 +313,7 @@ var pandora = new Ox.App({
|
||||||
delete data.keys;
|
delete data.keys;
|
||||||
return pandora.api.find($.extend(data, {
|
return pandora.api.find($.extend(data, {
|
||||||
group: id,
|
group: id,
|
||||||
query: Query.toObject()
|
query: Query.toObject(id)
|
||||||
}), callback);
|
}), callback);
|
||||||
},
|
},
|
||||||
sort: [
|
sort: [
|
||||||
|
@ -528,7 +540,7 @@ var pandora = new Ox.App({
|
||||||
var that = new Ox.SplitPanel({
|
var that = new Ox.SplitPanel({
|
||||||
elements: [
|
elements: [
|
||||||
{
|
{
|
||||||
element: app.$ui.sectionbar = ui.sectionbar(),
|
element: app.$ui.sectionbar = ui.sectionbar('buttons'),
|
||||||
size: 24
|
size: 24
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
@ -548,6 +560,15 @@ var pandora = new Ox.App({
|
||||||
orientation: 'vertical'
|
orientation: 'vertical'
|
||||||
})
|
})
|
||||||
.bindEvent('resize', function(event, data) {
|
.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);
|
Ox.print('resize', data, data / app.ui.infoRatio + 16);
|
||||||
app.$ui.leftPanel.size('infoPanel', Math.round(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,
|
columnsMovable: true,
|
||||||
columnsRemovable: true,
|
columnsRemovable: true,
|
||||||
|
columnsResizable: true,
|
||||||
id: 'list',
|
id: 'list',
|
||||||
request: function(data, callback) {
|
request: function(data, callback) {
|
||||||
Ox.print('data, Query.toObject', data, Query.toObject())
|
Ox.print('data, Query.toObject', data, Query.toObject())
|
||||||
|
@ -702,6 +724,9 @@ var pandora = new Ox.App({
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
orientation: 'horizontal'
|
orientation: 'horizontal'
|
||||||
|
})
|
||||||
|
.bindEvent('resize', function() {
|
||||||
|
app.$ui.map.triggerResize();
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
$list = new Ox.Element('<div>')
|
$list = new Ox.Element('<div>')
|
||||||
|
@ -951,13 +976,15 @@ var pandora = new Ox.App({
|
||||||
id: 'mainMenu',
|
id: 'mainMenu',
|
||||||
menus: [
|
menus: [
|
||||||
{ id: app.config.site.id + 'Menu', title: app.config.site.name, items: [
|
{ 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: 'faq', title: 'Frequently Asked Questions' },
|
||||||
{ id: 'tos', title: 'Terms of Service' },
|
{ id: 'tos', title: 'Terms of Service' },
|
||||||
{},
|
{},
|
||||||
{ id: 'contact', title: 'Contact...' }
|
{ id: 'contact', title: 'Contact' }
|
||||||
] },
|
] },
|
||||||
{ id: 'userMenu', title: 'User', items: [
|
{ id: 'userMenu', title: 'User', items: [
|
||||||
{ id: 'username', title: 'User: not logged in', disabled: true },
|
{ id: 'username', title: 'User: not logged in', disabled: true },
|
||||||
|
@ -1583,44 +1610,44 @@ var pandora = new Ox.App({
|
||||||
orientation: 'vertical'
|
orientation: 'vertical'
|
||||||
})
|
})
|
||||||
.bindEvent('resize', function(event, data) {
|
.bindEvent('resize', function(event, data) {
|
||||||
var widths = $.map(app.ui.groups, function(v, i) {
|
resizeGroups(data);
|
||||||
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);
|
|
||||||
});
|
|
||||||
app.$ui.list.size();
|
app.$ui.list.size();
|
||||||
|
if (app.user.ui.listView == 'map') {
|
||||||
|
app.$ui.map.triggerResize();
|
||||||
|
}
|
||||||
});
|
});
|
||||||
return that;
|
return that;
|
||||||
},
|
},
|
||||||
sectionbar: function() {
|
sectionbar: function(mode) {
|
||||||
var that =new Ox.Bar({
|
var that = new Ox.Bar({
|
||||||
size: 24
|
size: 24
|
||||||
})
|
})
|
||||||
.append(
|
.append(
|
||||||
app.$ui.sectionButtons = new Ox.ButtonGroup({
|
mode == 'buttons' ?
|
||||||
buttons: [
|
app.$ui.sectionButtons = ui.sectionButtons() :
|
||||||
{id: 'site', title: app.config.site.name},
|
app.$ui.sectionSelect = ui.sectionSelect()
|
||||||
{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'
|
|
||||||
})
|
|
||||||
);
|
);
|
||||||
that.toggle = function() {
|
that.toggle = function() {
|
||||||
|
|
||||||
};
|
};
|
||||||
return that;
|
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() {
|
sections: function() {
|
||||||
var that = new Ox.Element();
|
var that = new Ox.Element();
|
||||||
var $sections = [];
|
var $sections = [];
|
||||||
|
@ -1651,6 +1678,21 @@ var pandora = new Ox.App({
|
||||||
}
|
}
|
||||||
return that;
|
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) {
|
status: function(key, data) {
|
||||||
var that = Ox.toTitleCase(key) + ': ' + [
|
var that = Ox.toTitleCase(key) + ': ' + [
|
||||||
Ox.formatNumber(data.items) + ' movie' + (data.items != 1 ? 's' : ''),
|
Ox.formatNumber(data.items) + ' movie' + (data.items != 1 ? 's' : ''),
|
||||||
|
@ -1719,6 +1761,7 @@ var pandora = new Ox.App({
|
||||||
})
|
})
|
||||||
.bindEvent('change', function(event, data) {
|
.bindEvent('change', function(event, data) {
|
||||||
var id = data.selected[0].id;
|
var id = data.selected[0].id;
|
||||||
|
app.user.ui.listView = id;
|
||||||
app.$ui.mainMenu.checkItem('viewMenu_movies_' + id);
|
app.$ui.mainMenu.checkItem('viewMenu_movies_' + id);
|
||||||
//$ui.list.$element.replaceWith(constructList(id));
|
//$ui.list.$element.replaceWith(constructList(id));
|
||||||
// Ox.print('change ... id', id, list = app.constructList(id), list.options(), list.options('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;
|
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() {
|
var Query = (function() {
|
||||||
|
|
||||||
function constructFind(query) {
|
function constructFind(query) {
|
||||||
|
|
Loading…
Reference in a new issue