diff --git a/static/js/pandora/ui/menu.js b/static/js/pandora/ui/menu.js index 6bdc15b5..cee1e5e0 100644 --- a/static/js/pandora/ui/menu.js +++ b/static/js/pandora/ui/menu.js @@ -405,6 +405,9 @@ pandora.ui.mainMenu = function() { } else if (data.id == 'loginlogout') { pandora.$ui.accountDialog = (pandora.user.level == 'guest' ? pandora.ui.accountDialog('login') : pandora.ui.accountLogoutDialog()).open(); + } else if (data.id == 'posters') { + var id = '0133093'; + pandora.$ui.postersDialog = pandora.ui.postersDialog(id).open(); } else if (data.id == 'places') { pandora.$ui.placesDialog = pandora.ui.placesDialog().open(); /* diff --git a/static/js/pandora/ui/postersDialog.js b/static/js/pandora/ui/postersDialog.js new file mode 100644 index 00000000..eb62d9a8 --- /dev/null +++ b/static/js/pandora/ui/postersDialog.js @@ -0,0 +1,106 @@ +pandora.ui.postersDialog = function(id) { + + var height = Math.round(window.innerHeight * 0.9), + width = Math.round(window.innerWidth * 0.5), + listWidth = 144 + Ox.UI.SCROLLBAR_SIZE, + previewWidth = width - listWidth, + previewHeight = height - 48, + previewRatio = previewWidth / previewHeight, + $preview = Ox.Element(), + $panel = Ox.SplitPanel({ + elements: [ + { + element: Ox.Element(), + size: listWidth + }, + { + element: $preview + } + ], + orientation: 'horizontal' + }), + that = Ox.Dialog({ + buttons: [ + Ox.Button({ + id: 'done', + title: 'Done' + }).bindEvent({ + click: function() { + that.close(); + } + }) + ], + content: $panel, + height: height, + padding: 0, + title: 'Manage Posters', + width: width + }); + + pandora.api.get({ + id: id, + keys: ['posters'] + }, function(result) { + var posters = result.data.posters, + selected = [posters.filter(function(poster) { + return poster.selected; + })[0]['source']], + $list = Ox.IconList({ + item: function(data, sort, size) { + var ratio = data.width / data.height; + size = size || 128; + return { + height: ratio <= 1 ? size : size / ratio, + id: data['id'], + info: data.width + ' x ' + data.height + ' px', + title: data.source, + url: data.url, + width: ratio >= 1 ? size : size * ratio + } + }, + items: posters, + keys: ['source', 'width', 'height', 'url'], + max: 1, + min: 1, + orientation: 'vertical', + selected: selected, + size: 128, + sort: [{key: 'source', operator: '+'}], + unique: 'source' + }) + .css({background: 'rgb(16, 16, 16)'}) + .bindEvent({ + select: function(event) { + var source = event.ids[0], + poster = posters.filter(function(poster) { + return poster.source == source; + })[0], + posterRatio = poster.width / poster.height, + posterWidth = posterRatio > previewRatio ? previewWidth : previewHeight * posterRatio, + posterHeight = posterRatio < previewRatio ? previewHeight : previewWidth / posterRatio; + $preview.html( + $('') + .attr({ + src: poster.url + }) + .css({ + position: 'absolute', + left: 0, + top: 0, + right: 0, + bottom: 0, + width: posterWidth + 'px', + height: posterHeight + 'px', + margin: 'auto' + }) + ); + } + }); + + $panel.replaceElement(0, $list); + + }); + + return that; + +} \ No newline at end of file diff --git a/static/json/pandora.json b/static/json/pandora.json index 1f2da0d6..4b015ae8 100644 --- a/static/json/pandora.json +++ b/static/json/pandora.json @@ -39,5 +39,6 @@ "js/pandora/ui/leftPanel.js", "js/pandora/ui/appPanel.js", "js/pandora/ui/flipbook.js", - "js/pandora/ui/editor.js" + "js/pandora/ui/editor.js", + "js/pandora/ui/postersDialog.js" ]