0x2620/pandora
2
1
Fork 1
Code Issues 1.3k Pull requests Releases Wiki Activity

fix resizing behavior of lists sections

Browse source
This commit is contained in:
rolux 2011-01-14 03:53:26 +00:00
parent 97535240e8
commit aea8b80f48
2 changed files with 424 additions and 239 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
pandora/templates/site.json
View file

@ -179,9 +179,14 @@
"section": "items", "section": "items",
"sections": ["my", "public", "featured"], "sections": ["my", "public", "featured"],
"showAnnotations": true, "showAnnotations": true,
"showGroups": true, "showGroups": false,
"showInfo": true, "showInfo": true,
"showMovies": true, "showMovies": true,
"showSection": {
"my": true,
"public": true,
"featured": true
},
"showSidebar": true, "showSidebar": true,
"sidebarSize": 256, "sidebarSize": 256,
"sitePage": "home", "sitePage": "home",

354
static/js/pandora.js
View file

@ -19,8 +19,9 @@ var pandora = new Ox.App({
config: data.config, config: data.config,
requests: {}, requests: {},
ui: { ui: {
infoRatio: 4 / 3, infoRatio: 16 / 9,
sectionElement: 'buttons', sectionElement: 'buttons',
sectionLength: {},
selectedMovies: [] selectedMovies: []
}, },
user: data.user user: data.user
@ -31,6 +32,12 @@ var pandora = new Ox.App({
$.browser.safari && Ox.theme('modern'); $.browser.safari && Ox.theme('modern');
} }
// fixme: remove
app.user.ui.showSection = {
"my": true,
"public": true,
"featured": true
}
// $.each(pandora.afterLaunch, function(i, f) { f(); }); // $.each(pandora.afterLaunch, function(i, f) { f(); });
@ -64,6 +71,7 @@ var pandora = new Ox.App({
app.ui.sectionButtonsWidth = app.$ui.sectionButtons.width() + 8; app.ui.sectionButtonsWidth = app.$ui.sectionButtons.width() + 8;
app.$ui.window.resize(function() { app.$ui.window.resize(function() {
resizeSections();
if (app.user.ui.item == '') { if (app.user.ui.item == '') {
app.$ui.list.size(); app.$ui.list.size();
resizeGroups(app.$ui.rightPanel.width()); resizeGroups(app.$ui.rightPanel.width());
@ -938,7 +946,8 @@ var pandora = new Ox.App({
.css({ .css({
position: 'absolute', position: 'absolute',
left: 0, left: 0,
top: 0 top: 0,
height: '96px'
}) })
) )
.append( .append(
@ -949,7 +958,12 @@ var pandora = new Ox.App({
bottom: 0, bottom: 0,
height: '16px', height: '16px',
}) })
); )
.bindEvent({
toggle: function(event, data) {
app.user.ui.showInfo = !data.collapsed;
}
});
return that; return that;
}, },
item: function() { item: function() {
@ -1084,6 +1098,7 @@ var pandora = new Ox.App({
}) })
.bindEvent({ .bindEvent({
resize: function(event, data) { resize: function(event, data) {
var infoSize = Math.round(data / app.ui.infoRatio) + 16;
app.user.ui.sidebarSize = data; app.user.ui.sidebarSize = data;
if (data < app.ui.sectionButtonsWidth && app.$ui.sectionButtons) { if (data < app.ui.sectionButtonsWidth && app.$ui.sectionButtons) {
app.$ui.sectionButtons.remove(); app.$ui.sectionButtons.remove();
@ -1094,16 +1109,14 @@ var pandora = new Ox.App({
delete app.$ui.sectionSelect; delete app.$ui.sectionSelect;
app.$ui.sectionbar.append(app.$ui.sectionButtons = ui.sectionButtons()); app.$ui.sectionbar.append(app.$ui.sectionButtons = ui.sectionButtons());
} }
app.$ui.sectionLists.forEach(function($list) { !app.user.ui.showInfo && app.$ui.leftPanel.css({bottom: -infoSize});
$list.css({width: data + 'px'}); app.$ui.leftPanel.size('infoPanel', infoSize);
$list.resizeColumn('name', data - 88); resizeSections();
});
app.$ui.leftPanel.size('infoPanel', Math.round(data / app.ui.infoRatio) + 16);
}, },
toggle: function(event, data) { toggle: function(event, data) {
app.user.ui.showSidebar = !data.collapsed; app.user.ui.showSidebar = !data.collapsed;
if (data.collapsed) { if (data.collapsed) {
app.$ui.sectionLists.forEach(function($list) { app.$ui.sectionList.forEach(function($list) {
$list.loseFocus(); $list.loseFocus();
}); });
} }
@ -1168,7 +1181,7 @@ var pandora = new Ox.App({
size: 128, size: 128,
sort: app.user.ui.lists[app.user.ui.list].sort, sort: app.user.ui.lists[app.user.ui.list].sort,
unique: 'id' unique: 'id'
}); })
} else if (view == 'map') { } else if (view == 'map') {
that = new Ox.SplitPanel({ that = new Ox.SplitPanel({
elements: [ elements: [
@ -1425,6 +1438,7 @@ var pandora = new Ox.App({
width = app.$ui.info.width(), width = app.$ui.info.width(),
height = imageHeight * width / imageWidth; height = imageHeight * width / imageWidth;
app.ui.infoRatio = width / height; app.ui.infoRatio = width / height;
!app.user.ui.showInfo && app.$ui.leftPanel.css({bottom: -height - 16});
app.$ui.leftPanel.size('infoPanel', height + 16); app.$ui.leftPanel.size('infoPanel', height + 16);
$still.css({ $still.css({
position: 'absolute', position: 'absolute',
@ -1447,6 +1461,7 @@ var pandora = new Ox.App({
}, 250, function() { }, 250, function() {
app.$ui.infoStill.remove(); app.$ui.infoStill.remove();
app.$ui.infoStill = $still; app.$ui.infoStill = $still;
resizeSections();
}); });
}); });
/* /*
@ -2023,7 +2038,7 @@ var pandora = new Ox.App({
collapsible: true, collapsible: true,
element: app.$ui.leftPanel = ui.leftPanel(), element: app.$ui.leftPanel = ui.leftPanel(),
resizable: true, resizable: true,
resize: [128, 256, 384, 512], resize: [192, 256, 320, 384],
size: app.user.ui.sidebarSize size: app.user.ui.sidebarSize
}, },
{ {
@ -2034,6 +2049,123 @@ var pandora = new Ox.App({
}) })
return that; return that;
}, },
publicListsDialog: function() {
var that = new Ox.Dialog({
buttons: [
new Ox.Button({
id: 'done',
title: 'Done'
}).bindEvent({
click: function() {
that.close();
}
})
],
content: new Ox.TextList({
columns: [
{
format: function() {
return $('<img>').attr({
src: 'static/oxjs/build/png/ox.ui/icon16.png'
});
},
id: 'id',
operator: '+',
title: $('<img>').attr({
src: 'static/oxjs/build/png/ox.ui/icon16.png'
}),
visible: true,
width: 16
},
{
id: 'user',
operator: '+',
title: 'User',
visible: true,
width: 160
},
{
id: 'name',
operator: '+',
title: 'Name',
visible: true,
width: 160
},
{
align: 'right',
id: 'items',
operator: '-',
title: 'Items',
visible: true,
width: 40
},
{
format: function(value) {
return $('<img>')
.attr({
src: 'static/oxjs/build/png/ox.ui.' + Ox.theme() +
'/symbolFind.png'
})
.css({
opacity: value == 'static' ? 0.1 : 1
});
},
id: 'type',
operator: '+',
title: $('<img>').attr({
src: 'static/oxjs/build/png/ox.ui.' +
Ox.theme() + '/symbolFind.png'
}),
visible: true,
width: 16
},
{
clickable: true,
format: function(value) {
return $('<img>')
.attr({
src: 'static/oxjs/build/png/ox.ui.' +
Ox.theme() + '/symbolCheck.png'
})
.css({
opacity: value == 'static' ? 0.1 : 1
});
},
id: 'status',
operator: '+',
title: $('<img>').attr({
src: 'static/oxjs/build/png/ox.ui.' +
Ox.theme() + '/symbolCheck.png'
}),
visible: true,
width: 16
},
],
columnsVisible: true,
request: function(data, callback) {
var query = {conditions: [
//{key: 'user', value: app.user.username, operator: '!'},
{key: 'status', value: 'public', operator: '='}
], operator: ''};
return pandora.api.findLists($.extend(data, {
query: query
}), callback);
},
sort: [
{key: 'name', operator: '+'}
]
}),
height: 320,
keys: {enter: 'close', escape: 'close'},
padding: 0,
title: 'Public Lists',
width: 420
})
.css({
position: 'absolute'
});
return that;
},
rightPanel: function() { rightPanel: function() {
var that = new Ox.SplitPanel({ var that = new Ox.SplitPanel({
elements: [ elements: [
@ -2099,87 +2231,32 @@ var pandora = new Ox.App({
}); });
return that; return that;
}, },
sections: function() { sectionList: function(id, i) {
var that = new Ox.Element(); var width = app.user.ui.sidebarWidth, //getSectionsWidth(),
var $sections = []; that = new Ox.TextList({
app.$ui.sectionLists = [];
$.each(app.user.ui.sections, function(i, id) {
var $section, menu = [];
if (id == 'my') {
menu = [
{ id: 'new', title: 'New List...' },
{ id: 'newfromselection', title: 'New List from Current Selection...', disabled: true },
{ id: 'newsmart', title: 'New Smart List...' },
{ id: 'newfromresults', title: 'New Smart List from Current Results...', disabled: true },
{},
{ id: 'addselection', title: 'Add Selection to List...' }
];
} else if (id == 'public') {
menu = [
{ id: 'browse', title: 'More Public Lists...' },
];
}
$section = new Ox.CollapsePanel({
id: id,
menu: menu,
size: 16,
title: Ox.getObjectById(app.config.sections, id).title
})
.bindEvent({
click: function(event, data) {
var $list = app.$ui.sectionLists[i],
id;
if (data.id == 'new' || data.id == 'newsmart') {
pandora.api.addList({
name: 'Untitled',
status: 'private',
type: data.id == 'new' ? 'static' : 'smart'
}, function(result) {
id = result.data.id;
URL.set('?find=list:' + id)
Ox.Request.emptyCache(); // fixme: remove
$list.reloadList()
.bindEvent({load: load});
});
}
function load(event, data) {
$list.gainFocus()
.options({selected: [id]})
.editCell(id, 'name');
$list.unbindEvent({load: load}) // fixme: need bindEventOnce
}
},
toggle: function(event, data) {
Ox.print('toggle')
data.collapsed && app.$ui.sectionLists[i].loseFocus();
}
});
$sections.push($section);
app.$ui.sectionLists[i] = new Ox.TextList({
columns: [ columns: [
{ {
id: 'user',
format: function() { format: function() {
return $('<img>').attr({ return $('<img>').attr({
src: 'static/oxjs/build/png/ox.ui/icon16.png' src: 'static/oxjs/build/png/ox.ui/icon16.png'
}); });
}, },
id: 'user',
operator: '+', operator: '+',
visible: true, visible: true,
width: 16 width: 16
}, },
{ {
id: 'id',
format: function(value) { format: function(value) {
return value.split('.').join(': '); return value.split('.').join(': ');
}, },
id: 'id',
operator: '+', operator: '+',
unique: true, unique: true,
visible: id == 'public', visible: id == 'public',
width: 168 width: width - 88
}, },
{ {
align: 'left',
editable: function(data) { editable: function(data) {
return data.user == app.user.username; return data.user == app.user.username;
// return data.id && data.id.split(': ')[0] == app.user.username; // return data.id && data.id.split(': ')[0] == app.user.username;
@ -2190,7 +2267,7 @@ var pandora = new Ox.App({
}, },
operator: '+', operator: '+',
visible: id != 'public', visible: id != 'public',
width: 168 width: width - 88
}, },
{ {
align: 'right', align: 'right',
@ -2200,14 +2277,12 @@ var pandora = new Ox.App({
width: 40 width: 40
}, },
{ {
align: 'left',
clickable: function(data) { clickable: function(data) {
//alert(JSON.stringify([data.user, data.type])) //alert(JSON.stringify([data.user, data.type]))
//Ox.print('$$$$$$$$', data.user, data.type) //Ox.print('$$$$$$$$', data.user, data.type)
return data.user == app.user.username && data.type == 'smart'; return data.user == app.user.username && data.type == 'smart';
}, },
format: function(value) { format: function(value) {
// var symbols = {static: 'Click', smart: 'Find'};
return $('<img>') return $('<img>')
.attr({ .attr({
src: 'static/oxjs/build/png/ox.ui.' + Ox.theme() + src: 'static/oxjs/build/png/ox.ui.' + Ox.theme() +
@ -2223,7 +2298,6 @@ var pandora = new Ox.App({
width: 16 width: 16
}, },
{ {
align: 'left',
clickable: id == 'my', clickable: id == 'my',
format: function(value) { format: function(value) {
//var symbols = {private: 'Publish', public: 'Publish', featured: 'Star'}; //var symbols = {private: 'Publish', public: 'Publish', featured: 'Star'};
@ -2269,7 +2343,7 @@ var pandora = new Ox.App({
.css({ .css({
left: 0, left: 0,
top: 0, top: 0,
width: app.user.ui.sidebarSize + 'px', width: width + 'px',
}) })
.bind({ .bind({
dragenter: function(e) { dragenter: function(e) {
@ -2278,7 +2352,7 @@ var pandora = new Ox.App({
}) })
.bindEvent({ .bindEvent({
click: function(event, data) { click: function(event, data) {
var $list = app.$ui.sectionLists[i]; var $list = app.$ui.sectionList[i];
if (data.key == 'type') { if (data.key == 'type') {
var $dialog = new Ox.Dialog({ var $dialog = new Ox.Dialog({
buttons: [ buttons: [
@ -2311,7 +2385,7 @@ var pandora = new Ox.App({
} }
}, },
'delete': function(event, data) { 'delete': function(event, data) {
var $list = app.$ui.sectionLists[i]; var $list = app.$ui.sectionList[i];
URL.set(''); URL.set('');
$list.options({selected: []}); $list.options({selected: []});
pandora.api.removeList({ pandora.api.removeList({
@ -2322,10 +2396,11 @@ var pandora = new Ox.App({
}); });
}, },
init: function(event, data) { init: function(event, data) {
$section.$content.css({ app.ui.sectionLength[id] = data.items;
app.$ui.section[i].$content.css({
height: data.items * 16 + 'px' height: data.items * 16 + 'px'
}); });
app.$ui.sectionLists[i].css({ app.$ui.sectionList[i].css({
height: data.items * 16 + 'px' height: data.items * 16 + 'px'
}); });
}, },
@ -2342,7 +2417,7 @@ var pandora = new Ox.App({
}, },
select: function(event, data) { select: function(event, data) {
if (data.ids.length) { if (data.ids.length) {
app.$ui.sectionLists.forEach(function($list, i_) { app.$ui.sectionList.forEach(function($list, i_) {
i != i_ && $list.options('selected', []); i != i_ && $list.options('selected', []);
}); });
URL.set('?find=list:' + data.ids[0]); URL.set('?find=list:' + data.ids[0]);
@ -2355,17 +2430,95 @@ var pandora = new Ox.App({
data_[data.key] = data.value; data_[data.key] = data.value;
pandora.api.editList(data_, function(result) { pandora.api.editList(data_, function(result) {
if (result.data.id != data.id) { if (result.data.id != data.id) {
app.$ui.sectionLists[i].value(data.id, 'name', result.data.name); app.$ui.sectionList[i].value(data.id, 'name', result.data.name);
app.$ui.sectionLists[i].value(data.id, 'id', result.data.id); app.$ui.sectionList[i].value(data.id, 'id', result.data.id);
URL.set('?find=list:' + result.data.id); URL.set('?find=list:' + result.data.id);
} }
}); });
} }
})
.appendTo($section.$content);
}); });
return that;
},
sections: function() {
var that = new Ox.Element()
.css({overflowY: 'auto'})
.bindEvent({
resize: function(event, data) {
resizeSections();
}
});
var counter = 0;
var $sections = [];
app.$ui.section = [];
app.$ui.sectionList = [];
$.each(app.user.ui.sections, function(i, id) {
var menu = [];
if (id == 'my') {
menu = [
{ id: 'new', title: 'New List...' },
{ id: 'newfromselection', title: 'New List from Current Selection...', disabled: true },
{ id: 'newsmart', title: 'New Smart List...' },
{ id: 'newfromresults', title: 'New Smart List from Current Results...', disabled: true },
{},
{ id: 'addselection', title: 'Add Selection to List...' }
];
} else if (id == 'public') {
menu = [
{ id: 'browse', title: 'More Public Lists...' },
];
}
app.$ui.section[i] = new Ox.CollapsePanel({
id: id,
menu: menu,
size: 16,
title: Ox.getObjectById(app.config.sections, id).title
})
.bindEvent({
click: function(event, data) {
var $list = app.$ui.sectionList[i],
id;
if (data.id == 'new' || data.id == 'newsmart') {
pandora.api.addList({
name: 'Untitled',
status: 'private',
type: data.id == 'new' ? 'static' : 'smart'
}, function(result) {
id = result.data.id;
URL.set('?find=list:' + id)
Ox.Request.emptyCache(); // fixme: remove
$list.reloadList().bindEvent({load: load});
function load(event, data) {
$list.gainFocus()
.options({selected: [id]})
.editCell(id, 'name');
$list.unbindEvent({load: load}) // fixme: need bindEventOnce
}
});
} else if (data.id == 'browse') {
app.$ui.publicListsDialog = ui.publicListsDialog().open();
}
},
toggle: function(event, data) {
Ox.print('toggle')
data.collapsed && app.$ui.sectionList[i].loseFocus();
app.user.ui.showSection[id] = !data.collapsed;
}
});
$sections.push(app.$ui.section[i]);
app.$ui.sectionList[i] = ui.sectionList(id, i)
.bindEvent({init: init})
.appendTo(app.$ui.section[i].$content);
function init(event, data) {
Ox.print('init', i, counter)
if (++counter == 3) {
$.each($sections, function(i, $section) { $.each($sections, function(i, $section) {
that.append($section); that.append($section);
});
resizeSections();
}
app.$ui.sectionList[i].unbindEvent({init: init}); // fixme: need bindEventOnce
}
app.$ui.sectionList[i]
}); });
that.toggle = function() { that.toggle = function() {
@ -2569,13 +2722,32 @@ var pandora = new Ox.App({
) > -1 ? 'left' : 'right'; ) > -1 ? 'left' : 'right';
} }
function getGroupWidth(pos, panelWidth) { function getGroupWidth(pos, panelWidth) { // fixme: don't pass panelWidth
var width = {}; var width = {};
width.list = Math.floor(panelWidth / 5) + (panelWidth % 5 > pos); width.list = Math.floor(panelWidth / 5) + (panelWidth % 5 > pos);
width.column = width.list - 40 - ($.browser.mozilla ? 16 : 12); width.column = width.list - 40 - ($.browser.mozilla ? 16 : 12);
return width; return width;
} }
function getSectionsWidth() {
var width = app.user.ui.sidebarSize;
Ox.print(getSectionsHeight(), '>', app.$ui.leftPanel.height() - 24 - 1 - app.$ui.info.height(), getSectionsHeight() > app.$ui.leftPanel.height() - 24 - 1 - app.$ui.info.height())
// fixme: don't use height(), look up in splitpanels
if (getSectionsHeight() > app.$ui.leftPanel.height() - 24 - 1 - app.$ui.info.height()) {
width -= $.browser.mozilla ? 16 : 12;
}
return width;
}
function getSectionsHeight() {
var height = 48;
$.each(app.user.ui.showSection, function(id, show) {
height += show * app.ui.sectionLength[id] * 16;
});
Ox.print('getSectionsHeight', height)
return height;
}
function getSortOperator(key) { // fixme: make static function getSortOperator(key) { // fixme: make static
return ['person', 'string', 'text', 'title'].indexOf( return ['person', 'string', 'text', 'title'].indexOf(
Ox.getObjectById(app.config.sortKeys, key).type Ox.getObjectById(app.config.sortKeys, key).type
@ -2621,6 +2793,14 @@ var pandora = new Ox.App({
}); });
} }
function resizeSections() {
var width = getSectionsWidth();
app.$ui.sectionList.forEach(function($list) {
$list.css({width: width + 'px'});
$list.resizeColumn('name', width - 88);
});
}
function validateUser(key, existing) { function validateUser(key, existing) {
existing = existing || false; existing = existing || false;
var string = key == 'username' ? 'username' : 'e-mail address'; var string = key == 'username' ? 'username' : 'e-mail address';