diff --git a/static/js/pandora/pandora.js b/static/js/pandora/pandora.js index 5a33e5c..978377b 100644 --- a/static/js/pandora/pandora.js +++ b/static/js/pandora/pandora.js @@ -221,9 +221,12 @@ pandora.resizeFolders = function() { var i = Ox.getPositionById(pandora.site.sectionFolders[pandora.user.ui.section], id); pandora.$ui.folder[i].css({width: width + 'px'}); $list.css({width: width + 'px'}); - Ox.print('...', width, id, $list.options()) if (pandora.user.ui.section == 'items') { 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) .resizeColumn('name', columnWidth.name); } else { diff --git a/static/js/pandora/ui/folderBrowser.js b/static/js/pandora/ui/folderBrowser.js index 4fc8fba..6cef76e 100644 --- a/static/js/pandora/ui/folderBrowser.js +++ b/static/js/pandora/ui/folderBrowser.js @@ -3,7 +3,7 @@ pandora.ui.folderBrowser = function(id) { var that = Ox.SplitPanel({ elements: [ { - element: pandora.ui.folderBrowserBar(), + element: pandora.ui.folderBrowserBar(id), size: 24 }, { diff --git a/static/js/pandora/ui/folderBrowserBar.js b/static/js/pandora/ui/folderBrowserBar.js index 895d4da..bc6df0e 100644 --- a/static/js/pandora/ui/folderBrowserBar.js +++ b/static/js/pandora/ui/folderBrowserBar.js @@ -3,11 +3,54 @@ pandora.ui.folderBrowserBar = function(id) { var that = Ox.Bar({ size: 24 }); - pandora.$ui.findListInput = Ox.Input({ - placeholder: 'Find User', - width: 184 - Ox.UI.SCROLLBAR_SIZE + Ox.print('ID', id) + pandora.$ui.findListElement[id] = Ox.FormElementGroup({ + 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({ + float: 'right', margin: '4px', align: 'right' }) diff --git a/static/js/pandora/ui/folderBrowserList.js b/static/js/pandora/ui/folderBrowserList.js index 2736a72..53fd8b1 100644 --- a/static/js/pandora/ui/folderBrowserList.js +++ b/static/js/pandora/ui/folderBrowserList.js @@ -8,16 +8,18 @@ pandora.ui.folderBrowserList = function(id) { columns: [ { format: function() { - return $('') - .attr({ - src: Ox.UI.PATH + 'png/icon16.png' - }); + return $('').attr({ + src: Ox.UI.getImageURL('symbolIcon') + }).css({ + width: '10px', + height: '10px', + padding: '3px 2px 1px 2px' + }); }, id: 'id', operator: '+', - title: $('') - .attr({ - src: Ox.UI.PATH + 'png/icon16.png' + title: $('').attr({ + src: Ox.UI.getImageURL('symbolIcon') }) .css({ width: '10px', @@ -100,8 +102,8 @@ pandora.ui.folderBrowserList = function(id) { height: '10px', padding: '3px 2px 1px 2px', opacity: id == 'favorite' - ? (value ? 1 : 0.1) - : (value == 'featured' ? 1 : 0.1) + ? (value ? 1 : 0.25) + : (value == 'featured' ? 1 : 0.25) }); }, id: id == 'favorite' ? 'subscribed' : 'status', @@ -129,13 +131,12 @@ pandora.ui.folderBrowserList = function(id) { columnsVisible: true, items: function(data, callback) { 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: 'featured', operator: '='} - ], operator: '|'}; - return pandora.api.findLists($.extend(data, { + {key: 'user', value: pandora.user.username, operator: '!'} + ], operator: '&'} : {conditions: [ + {key: 'status', value: 'private', operator: '!'} + ], operator: ''}; + return pandora.api.findLists(Ox.extend(data, { query: query }), callback); }, diff --git a/static/js/pandora/ui/folders.js b/static/js/pandora/ui/folders.js index 3b0db53..a2ca9b6 100644 --- a/static/js/pandora/ui/folders.js +++ b/static/js/pandora/ui/folders.js @@ -12,6 +12,9 @@ pandora.ui.folders = function() { pandora.$ui.folder = []; pandora.$ui.folderBrowser = {}; pandora.$ui.folderList = {}; + pandora.$ui.findListElement = {}; + pandora.$ui.findListSelect = {}; + pandora.$ui.findListInput = {}; if (pandora.user.ui.section == 'items') { pandora.site.sectionFolders.items.forEach(function(folder, i) { var extras; diff --git a/static/js/pandora/ui/foldersList.js b/static/js/pandora/ui/foldersList.js index e1fe191..c490a66 100644 --- a/static/js/pandora/ui/foldersList.js +++ b/static/js/pandora/ui/foldersList.js @@ -4,104 +4,7 @@ pandora.ui.folderList = function(id) { that; if (pandora.user.ui.section == 'items') { var columns, items; - if (id == 'volumes') { - columns = [ - { - format: function() { - return $('').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 $('') - .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 $('') - .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 { + if (id != 'volumes') { columns = [ { format: function() { @@ -110,7 +13,7 @@ pandora.ui.folderList = function(id) { }).css({ width: '10px', height: '10px', - padding: '3px 1px 1px 3px' + padding: '3px 2px 1px 2px' }); }, id: 'user', @@ -191,7 +94,7 @@ pandora.ui.folderList = function(id) { width: '10px', height: '10px', padding: '3px 2px 1px 2px', - opacity: value == 'private' ? 0.1 : 1 + opacity: value == 'private' ? 0.25 : 1 }) }, id: 'status', @@ -222,6 +125,103 @@ pandora.ui.folderList = function(id) { query: query }), callback); }; + } else { + columns = [ + { + format: function() { + return $('').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 $('') + .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 $('') + .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({ columns: columns,