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",

656
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,12 +2231,228 @@ var pandora = new Ox.App({
}); });
return that; return that;
}, },
sectionList: function(id, i) {
var width = app.user.ui.sidebarWidth, //getSectionsWidth(),
that = new Ox.TextList({
columns: [
{
format: function() {
return $('<img>').attr({
src: 'static/oxjs/build/png/ox.ui/icon16.png'
});
},
id: 'user',
operator: '+',
visible: true,
width: 16
},
{
format: function(value) {
return value.split('.').join(': ');
},
id: 'id',
operator: '+',
unique: true,
visible: id == 'public',
width: width - 88
},
{
editable: function(data) {
return data.user == app.user.username;
// return data.id && data.id.split(': ')[0] == app.user.username;
},
id: 'name',
input: {
autovalidate: autovalidateListname
},
operator: '+',
visible: id != 'public',
width: width - 88
},
{
align: 'right',
id: 'items',
operator: '-',
visible: true,
width: 40
},
{
clickable: function(data) {
//alert(JSON.stringify([data.user, data.type]))
//Ox.print('$$$$$$$$', data.user, data.type)
return data.user == app.user.username && data.type == 'smart';
},
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: '+',
visible: true,
width: 16
},
{
clickable: id == 'my',
format: function(value) {
//var symbols = {private: 'Publish', public: 'Publish', featured: 'Star'};
return $('<img>')
.attr({
src: 'static/oxjs/build/png/ox.ui.' + Ox.theme() + '/symbol'
+ (value == 'featured' ? 'Star' : 'Publish') + '.png'
})
.css({
opacity: value == 'private' ? 0.1 : 1
})
},
id: 'status',
operator: '+',
visible: true,
width: 16
}
],
max: 1,
min: 0,
pageLength: 1000,
request: function(data, callback) {
var query;
if (id == 'my') {
query = {conditions: [
{key: 'user', value: app.user.username, operator: '='},
{key: 'status', value: 'featured', operator: '!'}
], operator: ''};
} else if (id == 'public') {
query = {conditions: [{key: 'subscribed', value: true, operator: '='}], operator: ''};
} else if (id == 'featured') {
query = {conditions: [{key: 'status', value: 'featured', operator: '='}], operator: '&'};
}
return pandora.api.findLists($.extend(data, {
query: query
}), callback);
},
sort: [
{key: 'position', operator: '+'}
],
sortable: id == 'my' || id == 'public' || app.user.group == 'admin'
})
.css({
left: 0,
top: 0,
width: width + 'px',
})
.bind({
dragenter: function(e) {
//Ox.print('DRAGENTER', e)
}
})
.bindEvent({
click: function(event, data) {
var $list = app.$ui.sectionList[i];
if (data.key == 'type') {
var $dialog = new Ox.Dialog({
buttons: [
new Ox.Button({
id: 'cancel',
title: 'Cancel'
}).bindEvent('click', function() {
$dialog.close();
}),
new Ox.Button({
id: 'save',
title: 'Save'
}).bindEvent('click', function() {
$dialog.close();
})
],
content: new Ox.Element('div').html('...'),
height: 200,
keys: {enter: 'save', escape: 'cancel'},
title: 'Advanced Find',
width: 640
}).open();
} else if (data.key == 'status') {
pandora.api.editList({
id: data.id,
status: $list.value(data.id, data.key) == 'private' ? 'public' : 'private'
}, function(result) {
$list.value(result.data.id, 'status', result.data.status);
});
}
},
'delete': function(event, data) {
var $list = app.$ui.sectionList[i];
URL.set('');
$list.options({selected: []});
pandora.api.removeList({
id: data.ids[0]
}, function() {
Ox.Request.emptyCache(); // fixme: remove
$list.reloadList();
});
},
init: function(event, data) {
app.ui.sectionLength[id] = data.items;
app.$ui.section[i].$content.css({
height: data.items * 16 + 'px'
});
app.$ui.sectionList[i].css({
height: data.items * 16 + 'px'
});
},
move: function(event, data) {
/*
data.ids.forEach(function(id, pos) {
app.user.ui.lists[id].position = pos;
});
*/
pandora.api.sortLists({
section: id,
ids: data.ids
});
},
select: function(event, data) {
if (data.ids.length) {
app.$ui.sectionList.forEach(function($list, i_) {
i != i_ && $list.options('selected', []);
});
URL.set('?find=list:' + data.ids[0]);
} else {
URL.set('');
}
},
submit: function(event, data) {
data_ = {id: data.id};
data_[data.key] = data.value;
pandora.api.editList(data_, function(result) {
if (result.data.id != data.id) {
app.$ui.sectionList[i].value(data.id, 'name', result.data.name);
app.$ui.sectionList[i].value(data.id, 'id', result.data.id);
URL.set('?find=list:' + result.data.id);
}
});
}
});
return that;
},
sections: function() { sections: function() {
var that = new Ox.Element(); var that = new Ox.Element()
.css({overflowY: 'auto'})
.bindEvent({
resize: function(event, data) {
resizeSections();
}
});
var counter = 0;
var $sections = []; var $sections = [];
app.$ui.sectionLists = []; app.$ui.section = [];
app.$ui.sectionList = [];
$.each(app.user.ui.sections, function(i, id) { $.each(app.user.ui.sections, function(i, id) {
var $section, menu = []; var menu = [];
if (id == 'my') { if (id == 'my') {
menu = [ menu = [
{ id: 'new', title: 'New List...' }, { id: 'new', title: 'New List...' },
@ -2119,7 +2467,7 @@ var pandora = new Ox.App({
{ id: 'browse', title: 'More Public Lists...' }, { id: 'browse', title: 'More Public Lists...' },
]; ];
} }
$section = new Ox.CollapsePanel({ app.$ui.section[i] = new Ox.CollapsePanel({
id: id, id: id,
menu: menu, menu: menu,
size: 16, size: 16,
@ -2127,7 +2475,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],
id; id;
if (data.id == 'new' || data.id == 'newsmart') { if (data.id == 'new' || data.id == 'newsmart') {
pandora.api.addList({ pandora.api.addList({
@ -2138,234 +2486,39 @@ var pandora = new Ox.App({
id = result.data.id; id = result.data.id;
URL.set('?find=list:' + id) URL.set('?find=list:' + id)
Ox.Request.emptyCache(); // fixme: remove Ox.Request.emptyCache(); // fixme: remove
$list.reloadList() $list.reloadList().bindEvent({load: load});
.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') {
function load(event, data) { app.$ui.publicListsDialog = ui.publicListsDialog().open();
$list.gainFocus()
.options({selected: [id]})
.editCell(id, 'name');
$list.unbindEvent({load: load}) // fixme: need bindEventOnce
} }
}, },
toggle: function(event, data) { toggle: function(event, data) {
Ox.print('toggle') Ox.print('toggle')
data.collapsed && app.$ui.sectionLists[i].loseFocus(); data.collapsed && app.$ui.sectionList[i].loseFocus();
app.user.ui.showSection[id] = !data.collapsed;
} }
}); });
$sections.push($section); $sections.push(app.$ui.section[i]);
app.$ui.sectionLists[i] = new Ox.TextList({ app.$ui.sectionList[i] = ui.sectionList(id, i)
columns: [ .bindEvent({init: init})
{ .appendTo(app.$ui.section[i].$content);
id: 'user', function init(event, data) {
format: function() { Ox.print('init', i, counter)
return $('<img>').attr({ if (++counter == 3) {
src: 'static/oxjs/build/png/ox.ui/icon16.png' $.each($sections, function(i, $section) {
}); that.append($section);
}, });
operator: '+', resizeSections();
visible: true, }
width: 16 app.$ui.sectionList[i].unbindEvent({init: init}); // fixme: need bindEventOnce
}, }
{ app.$ui.sectionList[i]
id: 'id',
format: function(value) {
return value.split('.').join(': ');
},
operator: '+',
unique: true,
visible: id == 'public',
width: 168
},
{
align: 'left',
editable: function(data) {
return data.user == app.user.username;
// return data.id && data.id.split(': ')[0] == app.user.username;
},
id: 'name',
input: {
autovalidate: autovalidateListname
},
operator: '+',
visible: id != 'public',
width: 168
},
{
align: 'right',
id: 'items',
operator: '-',
visible: true,
width: 40
},
{
align: 'left',
clickable: function(data) {
//alert(JSON.stringify([data.user, data.type]))
//Ox.print('$$$$$$$$', data.user, data.type)
return data.user == app.user.username && data.type == 'smart';
},
format: function(value) {
// var symbols = {static: 'Click', smart: 'Find'};
return $('<img>')
.attr({
src: 'static/oxjs/build/png/ox.ui.' + Ox.theme() +
'/symbolFind.png'
})
.css({
opacity: value == 'static' ? 0.1 : 1
});
},
id: 'type',
operator: '+',
visible: true,
width: 16
},
{
align: 'left',
clickable: id == 'my',
format: function(value) {
//var symbols = {private: 'Publish', public: 'Publish', featured: 'Star'};
return $('<img>')
.attr({
src: 'static/oxjs/build/png/ox.ui.' + Ox.theme() + '/symbol'
+ (value == 'featured' ? 'Star' : 'Publish') + '.png'
})
.css({
opacity: value == 'private' ? 0.1 : 1
})
},
id: 'status',
operator: '+',
visible: true,
width: 16
}
],
max: 1,
min: 0,
pageLength: 1000,
request: function(data, callback) {
var query;
if (id == 'my') {
query = {conditions: [
{key: 'user', value: app.user.username, operator: '='},
{key: 'status', value: 'featured', operator: '!'}
], operator: ''};
} else if (id == 'public') {
query = {conditions: [{key: 'subscribed', value: true, operator: '='}], operator: ''};
} else if (id == 'featured') {
query = {conditions: [{key: 'status', value: 'featured', operator: '='}], operator: '&'};
}
return pandora.api.findLists($.extend(data, {
query: query
}), callback);
},
sort: [
{key: 'position', operator: '+'}
],
sortable: id == 'my' || id == 'public' || app.user.group == 'admin'
})
.css({
left: 0,
top: 0,
width: app.user.ui.sidebarSize + 'px',
})
.bind({
dragenter: function(e) {
//Ox.print('DRAGENTER', e)
}
})
.bindEvent({
click: function(event, data) {
var $list = app.$ui.sectionLists[i];
if (data.key == 'type') {
var $dialog = new Ox.Dialog({
buttons: [
new Ox.Button({
id: 'cancel',
title: 'Cancel'
}).bindEvent('click', function() {
$dialog.close();
}),
new Ox.Button({
id: 'save',
title: 'Save'
}).bindEvent('click', function() {
$dialog.close();
})
],
content: new Ox.Element('div').html('...'),
height: 200,
keys: {enter: 'save', escape: 'cancel'},
title: 'Advanced Find',
width: 640
}).open();
} else if (data.key == 'status') {
pandora.api.editList({
id: data.id,
status: $list.value(data.id, data.key) == 'private' ? 'public' : 'private'
}, function(result) {
$list.value(result.data.id, 'status', result.data.status);
});
}
},
'delete': function(event, data) {
var $list = app.$ui.sectionLists[i];
URL.set('');
$list.options({selected: []});
pandora.api.removeList({
id: data.ids[0]
}, function() {
Ox.Request.emptyCache(); // fixme: remove
$list.reloadList();
});
},
init: function(event, data) {
$section.$content.css({
height: data.items * 16 + 'px'
});
app.$ui.sectionLists[i].css({
height: data.items * 16 + 'px'
});
},
move: function(event, data) {
/*
data.ids.forEach(function(id, pos) {
app.user.ui.lists[id].position = pos;
});
*/
pandora.api.sortLists({
section: id,
ids: data.ids
});
},
select: function(event, data) {
if (data.ids.length) {
app.$ui.sectionLists.forEach(function($list, i_) {
i != i_ && $list.options('selected', []);
});
URL.set('?find=list:' + data.ids[0]);
} else {
URL.set('');
}
},
submit: function(event, data) {
data_ = {id: data.id};
data_[data.key] = data.value;
pandora.api.editList(data_, function(result) {
if (result.data.id != data.id) {
app.$ui.sectionLists[i].value(data.id, 'name', result.data.name);
app.$ui.sectionLists[i].value(data.id, 'id', result.data.id);
URL.set('?find=list:' + result.data.id);
}
});
}
})
.appendTo($section.$content);
});
$.each($sections, function(i, $section) {
that.append($section);
}); });
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';