make find work in list browsers
This commit is contained in:
rolux
parent
ae19191014
commit
e95d30e2d1
6 changed files with 170 additions and 120 deletions
|
|
@ -221,9 +221,12 @@ pandora.resizeFolders = function() {
|
||||||
var i = Ox.getPositionById(pandora.site.sectionFolders[pandora.user.ui.section], id);
|
var i = Ox.getPositionById(pandora.site.sectionFolders[pandora.user.ui.section], id);
|
||||||
pandora.$ui.folder[i].css({width: width + 'px'});
|
pandora.$ui.folder[i].css({width: width + 'px'});
|
||||||
$list.css({width: width + 'px'});
|
$list.css({width: width + 'px'});
|
||||||
Ox.print('...', width, id, $list.options())
|
|
||||||
if (pandora.user.ui.section == 'items') {
|
if (pandora.user.ui.section == 'items') {
|
||||||
if (pandora.site.sectionFolders[pandora.user.ui.section][i].showBrowser) {
|
if (pandora.site.sectionFolders[pandora.user.ui.section][i].showBrowser) {
|
||||||
|
Ox.print('ID', id)
|
||||||
|
pandora.$ui.findListInput[id].options({
|
||||||
|
width: width - 24
|
||||||
|
});
|
||||||
$list.resizeColumn('user', columnWidth.user)
|
$list.resizeColumn('user', columnWidth.user)
|
||||||
.resizeColumn('name', columnWidth.name);
|
.resizeColumn('name', columnWidth.name);
|
||||||
} else {
|
} else {
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@ pandora.ui.folderBrowser = function(id) {
|
||||||
var that = Ox.SplitPanel({
|
var that = Ox.SplitPanel({
|
||||||
elements: [
|
elements: [
|
||||||
{
|
{
|
||||||
element: pandora.ui.folderBrowserBar(),
|
element: pandora.ui.folderBrowserBar(id),
|
||||||
size: 24
|
size: 24
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
|
||||||
|
|
@ -3,11 +3,54 @@ pandora.ui.folderBrowserBar = function(id) {
|
||||||
var that = Ox.Bar({
|
var that = Ox.Bar({
|
||||||
size: 24
|
size: 24
|
||||||
});
|
});
|
||||||
pandora.$ui.findListInput = Ox.Input({
|
Ox.print('ID', id)
|
||||||
placeholder: 'Find User',
|
pandora.$ui.findListElement[id] = Ox.FormElementGroup({
|
||||||
width: 184 - Ox.UI.SCROLLBAR_SIZE
|
elements: [
|
||||||
|
pandora.$ui.findListSelect[id] = Ox.Select({
|
||||||
|
items: [
|
||||||
|
{id: 'user', title: 'Find: User', checked: true},
|
||||||
|
{id: 'list', title: 'Find: List'}
|
||||||
|
],
|
||||||
|
overlap: 'right',
|
||||||
|
type: 'image'
|
||||||
|
})
|
||||||
|
.bindEvent({
|
||||||
|
change: function(data) {
|
||||||
|
pandora.$ui.findListInput[id].options({
|
||||||
|
placeholder: data.selected[0].title
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
pandora.$ui.findListInput[id] = Ox.Input({
|
||||||
|
clear: true,
|
||||||
|
placeholder: 'Find: User',
|
||||||
|
width: pandora.getFoldersWidth() - 24
|
||||||
|
})
|
||||||
|
.bindEvent({
|
||||||
|
submit: function(data) {
|
||||||
|
var key = pandora.$ui.findListSelect[id].value() == 'user' ? 'user' : 'name',
|
||||||
|
value = data.value;
|
||||||
|
pandora.$ui.folderList[id].options({
|
||||||
|
items: function(data, callback) {
|
||||||
|
var query = id == 'favorite' ? {conditions: [
|
||||||
|
{key: 'status', value: 'public', operator: '='},
|
||||||
|
{key: 'user', value: pandora.user.username, operator: '!'},
|
||||||
|
{key: key, value: value, operator: ''}
|
||||||
|
], operator: '&'} : {conditions: [
|
||||||
|
{key: 'status', value: 'private', operator: '!'},
|
||||||
|
{key: key, value: value, operator: ''}
|
||||||
|
], operator: '&'};
|
||||||
|
return pandora.api.findLists(Ox.extend(data, {
|
||||||
|
query: query
|
||||||
|
}), callback);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
})
|
||||||
|
],
|
||||||
})
|
})
|
||||||
.css({
|
.css({
|
||||||
|
float: 'right',
|
||||||
margin: '4px',
|
margin: '4px',
|
||||||
align: 'right'
|
align: 'right'
|
||||||
})
|
})
|
||||||
|
|
|
||||||
|
|
@ -8,16 +8,18 @@ pandora.ui.folderBrowserList = function(id) {
|
||||||
columns: [
|
columns: [
|
||||||
{
|
{
|
||||||
format: function() {
|
format: function() {
|
||||||
return $('<img>')
|
return $('<img>').attr({
|
||||||
.attr({
|
src: Ox.UI.getImageURL('symbolIcon')
|
||||||
src: Ox.UI.PATH + 'png/icon16.png'
|
}).css({
|
||||||
|
width: '10px',
|
||||||
|
height: '10px',
|
||||||
|
padding: '3px 2px 1px 2px'
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
id: 'id',
|
id: 'id',
|
||||||
operator: '+',
|
operator: '+',
|
||||||
title: $('<img>')
|
title: $('<img>').attr({
|
||||||
.attr({
|
src: Ox.UI.getImageURL('symbolIcon')
|
||||||
src: Ox.UI.PATH + 'png/icon16.png'
|
|
||||||
})
|
})
|
||||||
.css({
|
.css({
|
||||||
width: '10px',
|
width: '10px',
|
||||||
|
|
@ -100,8 +102,8 @@ pandora.ui.folderBrowserList = function(id) {
|
||||||
height: '10px',
|
height: '10px',
|
||||||
padding: '3px 2px 1px 2px',
|
padding: '3px 2px 1px 2px',
|
||||||
opacity: id == 'favorite'
|
opacity: id == 'favorite'
|
||||||
? (value ? 1 : 0.1)
|
? (value ? 1 : 0.25)
|
||||||
: (value == 'featured' ? 1 : 0.1)
|
: (value == 'featured' ? 1 : 0.25)
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
id: id == 'favorite' ? 'subscribed' : 'status',
|
id: id == 'favorite' ? 'subscribed' : 'status',
|
||||||
|
|
@ -129,13 +131,12 @@ pandora.ui.folderBrowserList = function(id) {
|
||||||
columnsVisible: true,
|
columnsVisible: true,
|
||||||
items: function(data, callback) {
|
items: function(data, callback) {
|
||||||
var query = id == 'favorite' ? {conditions: [
|
var query = id == 'favorite' ? {conditions: [
|
||||||
{key: 'user', value: pandora.user.username, operator: '!'},
|
|
||||||
{key: 'status', value: 'public', operator: '='}
|
|
||||||
], operator: '&'} : {conditions: [
|
|
||||||
{key: 'status', value: 'public', operator: '='},
|
{key: 'status', value: 'public', operator: '='},
|
||||||
{key: 'status', value: 'featured', operator: '='}
|
{key: 'user', value: pandora.user.username, operator: '!'}
|
||||||
], operator: '|'};
|
], operator: '&'} : {conditions: [
|
||||||
return pandora.api.findLists($.extend(data, {
|
{key: 'status', value: 'private', operator: '!'}
|
||||||
|
], operator: ''};
|
||||||
|
return pandora.api.findLists(Ox.extend(data, {
|
||||||
query: query
|
query: query
|
||||||
}), callback);
|
}), callback);
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -12,6 +12,9 @@ pandora.ui.folders = function() {
|
||||||
pandora.$ui.folder = [];
|
pandora.$ui.folder = [];
|
||||||
pandora.$ui.folderBrowser = {};
|
pandora.$ui.folderBrowser = {};
|
||||||
pandora.$ui.folderList = {};
|
pandora.$ui.folderList = {};
|
||||||
|
pandora.$ui.findListElement = {};
|
||||||
|
pandora.$ui.findListSelect = {};
|
||||||
|
pandora.$ui.findListInput = {};
|
||||||
if (pandora.user.ui.section == 'items') {
|
if (pandora.user.ui.section == 'items') {
|
||||||
pandora.site.sectionFolders.items.forEach(function(folder, i) {
|
pandora.site.sectionFolders.items.forEach(function(folder, i) {
|
||||||
var extras;
|
var extras;
|
||||||
|
|
|
||||||
|
|
@ -4,104 +4,7 @@ pandora.ui.folderList = function(id) {
|
||||||
that;
|
that;
|
||||||
if (pandora.user.ui.section == 'items') {
|
if (pandora.user.ui.section == 'items') {
|
||||||
var columns, items;
|
var columns, items;
|
||||||
if (id == 'volumes') {
|
if (id != 'volumes') {
|
||||||
columns = [
|
|
||||||
{
|
|
||||||
format: function() {
|
|
||||||
return $('<img>').attr({
|
|
||||||
src: Ox.UI.getImageURL('symbolVolume')
|
|
||||||
}).css({
|
|
||||||
width: '10px',
|
|
||||||
height: '10px',
|
|
||||||
padding: '3px 1px 1px 3px'
|
|
||||||
});
|
|
||||||
},
|
|
||||||
id: 'user',
|
|
||||||
operator: '+',
|
|
||||||
visible: true,
|
|
||||||
width: 16
|
|
||||||
},
|
|
||||||
{
|
|
||||||
editable: true,
|
|
||||||
id: 'name',
|
|
||||||
operator: '+',
|
|
||||||
tooltip: 'Edit Title',
|
|
||||||
unique: true,
|
|
||||||
visible: true,
|
|
||||||
width: pandora.user.ui.sidebarWidth - 96
|
|
||||||
},
|
|
||||||
{
|
|
||||||
align: 'right',
|
|
||||||
id: 'items',
|
|
||||||
format: {type: 'number'},
|
|
||||||
operator: '-',
|
|
||||||
visible: true,
|
|
||||||
width: 48
|
|
||||||
},
|
|
||||||
{
|
|
||||||
clickable: function(data) {
|
|
||||||
return data.mounted;
|
|
||||||
},
|
|
||||||
format: function(value, data) {
|
|
||||||
return $('<img>')
|
|
||||||
.attr({
|
|
||||||
src: Ox.UI.getImageURL(data.mounted ? 'symbolScan' : 'symbolEdit')
|
|
||||||
})
|
|
||||||
.css({
|
|
||||||
width: '10px',
|
|
||||||
height: '10px',
|
|
||||||
padding: '3px 2px 1px 2px'
|
|
||||||
});
|
|
||||||
},
|
|
||||||
id: 'path',
|
|
||||||
operator: '+',
|
|
||||||
tooltip: function(data) {
|
|
||||||
return data.mounted ? 'Scan Volume' : 'Edit Path';
|
|
||||||
},
|
|
||||||
visible: true,
|
|
||||||
width: 16
|
|
||||||
},
|
|
||||||
{
|
|
||||||
clickable: true,
|
|
||||||
format: function(value, data) {
|
|
||||||
return $('<img>')
|
|
||||||
.attr({
|
|
||||||
src: Ox.UI.getImageURL('symbolMount')
|
|
||||||
})
|
|
||||||
.css({
|
|
||||||
width: '10px',
|
|
||||||
height: '10px',
|
|
||||||
padding: '3px 2px 1px 2px',
|
|
||||||
opacity: data.mounted ? 1 : 0.25
|
|
||||||
});
|
|
||||||
},
|
|
||||||
id: 'mounted',
|
|
||||||
operator: '+',
|
|
||||||
tooltip: function(data) {
|
|
||||||
return data.mounted ? 'Unmount Volume' : 'Mount Volume';
|
|
||||||
},
|
|
||||||
visible: true,
|
|
||||||
width: 16
|
|
||||||
}
|
|
||||||
];
|
|
||||||
items = function(data, callback) {
|
|
||||||
var volumes = pandora.user.volumes || [
|
|
||||||
{"name": "Movies A-M", "path": "/Volumes/Movies A-M", "items": 1234},
|
|
||||||
{"name": "Movies N-Z", "path": "/Volumes/Movies N-Z", "items": 987}
|
|
||||||
];
|
|
||||||
if (!data.keys) {
|
|
||||||
data = {items: volumes.length};
|
|
||||||
} else {
|
|
||||||
data = {items: volumes.map(function(volume) {
|
|
||||||
return Ox.extend({id: volume.name, user: pandora.user.username, mounted: false}, volume);
|
|
||||||
})};
|
|
||||||
}
|
|
||||||
// fixme: ridiculous (we're binding to init too late)
|
|
||||||
setTimeout(function() {
|
|
||||||
callback({data: data});
|
|
||||||
}, 1000);
|
|
||||||
};
|
|
||||||
} else {
|
|
||||||
columns = [
|
columns = [
|
||||||
{
|
{
|
||||||
format: function() {
|
format: function() {
|
||||||
|
|
@ -110,7 +13,7 @@ pandora.ui.folderList = function(id) {
|
||||||
}).css({
|
}).css({
|
||||||
width: '10px',
|
width: '10px',
|
||||||
height: '10px',
|
height: '10px',
|
||||||
padding: '3px 1px 1px 3px'
|
padding: '3px 2px 1px 2px'
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
id: 'user',
|
id: 'user',
|
||||||
|
|
@ -191,7 +94,7 @@ pandora.ui.folderList = function(id) {
|
||||||
width: '10px',
|
width: '10px',
|
||||||
height: '10px',
|
height: '10px',
|
||||||
padding: '3px 2px 1px 2px',
|
padding: '3px 2px 1px 2px',
|
||||||
opacity: value == 'private' ? 0.1 : 1
|
opacity: value == 'private' ? 0.25 : 1
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
id: 'status',
|
id: 'status',
|
||||||
|
|
@ -222,6 +125,103 @@ pandora.ui.folderList = function(id) {
|
||||||
query: query
|
query: query
|
||||||
}), callback);
|
}), callback);
|
||||||
};
|
};
|
||||||
|
} else {
|
||||||
|
columns = [
|
||||||
|
{
|
||||||
|
format: function() {
|
||||||
|
return $('<img>').attr({
|
||||||
|
src: Ox.UI.getImageURL('symbolVolume')
|
||||||
|
}).css({
|
||||||
|
width: '10px',
|
||||||
|
height: '10px',
|
||||||
|
padding: '3px 2px 1px 2px'
|
||||||
|
});
|
||||||
|
},
|
||||||
|
id: 'user',
|
||||||
|
operator: '+',
|
||||||
|
visible: true,
|
||||||
|
width: 16
|
||||||
|
},
|
||||||
|
{
|
||||||
|
editable: true,
|
||||||
|
id: 'name',
|
||||||
|
operator: '+',
|
||||||
|
tooltip: 'Edit Title',
|
||||||
|
unique: true,
|
||||||
|
visible: true,
|
||||||
|
width: pandora.user.ui.sidebarWidth - 96
|
||||||
|
},
|
||||||
|
{
|
||||||
|
align: 'right',
|
||||||
|
id: 'items',
|
||||||
|
format: {type: 'number'},
|
||||||
|
operator: '-',
|
||||||
|
visible: true,
|
||||||
|
width: 48
|
||||||
|
},
|
||||||
|
{
|
||||||
|
clickable: function(data) {
|
||||||
|
return data.mounted;
|
||||||
|
},
|
||||||
|
format: function(value, data) {
|
||||||
|
return $('<img>')
|
||||||
|
.attr({
|
||||||
|
src: Ox.UI.getImageURL(data.mounted ? 'symbolSync' : 'symbolEdit')
|
||||||
|
})
|
||||||
|
.css({
|
||||||
|
width: '10px',
|
||||||
|
height: '10px',
|
||||||
|
padding: '3px 2px 1px 2px'
|
||||||
|
});
|
||||||
|
},
|
||||||
|
id: 'path',
|
||||||
|
operator: '+',
|
||||||
|
tooltip: function(data) {
|
||||||
|
return data.mounted ? 'Scan Volume' : 'Edit Path';
|
||||||
|
},
|
||||||
|
visible: true,
|
||||||
|
width: 16
|
||||||
|
},
|
||||||
|
{
|
||||||
|
clickable: true,
|
||||||
|
format: function(value, data) {
|
||||||
|
return $('<img>')
|
||||||
|
.attr({
|
||||||
|
src: Ox.UI.getImageURL('symbolMount')
|
||||||
|
})
|
||||||
|
.css({
|
||||||
|
width: '10px',
|
||||||
|
height: '10px',
|
||||||
|
padding: '3px 2px 1px 2px',
|
||||||
|
opacity: data.mounted ? 1 : 0.25
|
||||||
|
});
|
||||||
|
},
|
||||||
|
id: 'mounted',
|
||||||
|
operator: '+',
|
||||||
|
tooltip: function(data) {
|
||||||
|
return data.mounted ? 'Unmount Volume' : 'Mount Volume';
|
||||||
|
},
|
||||||
|
visible: true,
|
||||||
|
width: 16
|
||||||
|
}
|
||||||
|
];
|
||||||
|
items = function(data, callback) {
|
||||||
|
var volumes = pandora.user.volumes || [
|
||||||
|
{"name": "Movies A-M", "path": "/Volumes/Movies A-M", "items": 1234},
|
||||||
|
{"name": "Movies N-Z", "path": "/Volumes/Movies N-Z", "items": 987}
|
||||||
|
];
|
||||||
|
if (!data.keys) {
|
||||||
|
data = {items: volumes.length};
|
||||||
|
} else {
|
||||||
|
data = {items: volumes.map(function(volume) {
|
||||||
|
return Ox.extend({id: volume.name, user: pandora.user.username, mounted: volume.name == 'Movies A-M'}, volume);
|
||||||
|
})};
|
||||||
|
}
|
||||||
|
// fixme: ridiculous (we're binding to init too late)
|
||||||
|
setTimeout(function() {
|
||||||
|
callback({data: data});
|
||||||
|
}, 1000);
|
||||||
|
};
|
||||||
}
|
}
|
||||||
that = Ox.TextList({
|
that = Ox.TextList({
|
||||||
columns: columns,
|
columns: columns,
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue