From 99fbf9f2d93c9df157b12a389e4c3aec390f7bf4 Mon Sep 17 00:00:00 2001 From: rolux Date: Fri, 1 Mar 2013 11:38:51 +0530 Subject: [PATCH] sortSelect + orderButton -> selectElement --- static/js/pandora/clipsView.js | 5 +- static/js/pandora/navigationView.js | 5 +- static/js/pandora/sortElement.js | 87 +++++++++++++++++++++++++++++ static/js/pandora/toolbar.js | 18 +++--- 4 files changed, 96 insertions(+), 19 deletions(-) create mode 100644 static/js/pandora/sortElement.js diff --git a/static/js/pandora/clipsView.js b/static/js/pandora/clipsView.js index fd8a069b7..0e0549b22 100644 --- a/static/js/pandora/clipsView.js +++ b/static/js/pandora/clipsView.js @@ -18,10 +18,7 @@ pandora.ui.clipsView = function(videoRatio) { { element: Ox.Bar({size: 24}) .append( - pandora.$ui.sortSelect = pandora.ui.sortSelect() - ) - .append( - pandora.$ui.orderButton = pandora.ui.orderButton() + pandora.$ui.sortElement = pandora.ui.sortElement() ) .append( Ox.Input({ diff --git a/static/js/pandora/navigationView.js b/static/js/pandora/navigationView.js index ef54ec074..d26081d5b 100644 --- a/static/js/pandora/navigationView.js +++ b/static/js/pandora/navigationView.js @@ -19,10 +19,7 @@ pandora.ui.navigationView = function(type, videoRatio) { $toolbar = Ox.Bar({size: 24}) .append( - pandora.$ui.orderButton = pandora.ui.orderButton(true) - ) - .append( - pandora.$ui.sortSelect = pandora.ui.sortSelect(true) + pandora.$ui.sortElement = pandora.ui.sortElement(true) ), $list = pandora.ui.clipList(videoRatio) diff --git a/static/js/pandora/sortElement.js b/static/js/pandora/sortElement.js new file mode 100644 index 000000000..79b48cfbb --- /dev/null +++ b/static/js/pandora/sortElement.js @@ -0,0 +1,87 @@ +// vim: et:ts=4:sw=4:sts=4:ft=javascript + +'use strict'; + +pandora.user.ui.sortElement = function(isNavigationView) { + + var isClipView = pandora.isClipView(), + items = ( + isClipView ? pandora.site.clipKeys.map(function(key) { + return Ox.extend(Ox.clone(key), { + title: 'Sort by ' + (!pandora.user.ui.item ? 'Clip ' : '') + key.title + }); + }) : [] + ).concat( + !pandora.user.ui.item ? pandora.site.sortKeys.map(function(key) { + return Ox.extend(Ox.clone(key), { + title: 'Sort by ' + key.title + }); + }) : [] + ), + sortKey = !pandora.user.ui.item ? 'listSort' : 'itemSort', + + $sortSelect = Ox.Select({ + items: items, + value: pandora.user.ui[sortKey][0].key, + width: isNavigationView ? 120 + Ox.UI.SCROLLBAR_SIZE : 160 + }) + .bindEvent({ + change: function(data) { + var key = data.value; + pandora.UI.set(sortKey, [{ + key: key, + operator: pandora.getSortOperator(key) + }]); + }, + pandora_listsort: updateSelect, + pandora_itemsort: updateSelect + }), + + $orderButton = OxButton({ + overlap: 'left' + title: getTitle(), + tooltip: getTooltip(), + type: 'image' + }) + .bindEvent({ + click: function() { + pandora.UI.set(sortKey, [{ + key: pandora.user.ui[sortKey][0].key, + operator: pandora.user.ui[sortKey][0].operator == '+' ? '-' : '+' + }]); + updateButton(); + }, + pandora_listsort: updateButton, + pandora_itemsort: updateButton + }), + + that = Ox.FormElementGroup({ + elements: [$sortSelect, $orderButton] + }) + .css({ + float: isNavigationView ? 'right' : 'left', + margin: isNavigationView ? '4px 4px 0 0' : '4px 0 0 4px' + }); + + function getButtonTitle() { + return pandora.user.ui[sortKey][0].operator == '+' ? 'up' : 'down'; + } + + function getButtonTooltip() { + return pandora.user.ui[sortKey][0].operator == '+' ? 'Ascending' : 'Descending'; + } + + function updateButton() { + $orderButton.options({ + title: getTitle(), + tooltip: getTooltip() + }); + } + + function updateSelect(data) { + $sortSelect.value(data.value[0].key); + } + + return that; + +}; \ No newline at end of file diff --git a/static/js/pandora/toolbar.js b/static/js/pandora/toolbar.js index c59e4a5ce..5fdfce2a7 100644 --- a/static/js/pandora/toolbar.js +++ b/static/js/pandora/toolbar.js @@ -18,9 +18,7 @@ pandora.ui.toolbar = function() { pandora.$ui.viewSelect = pandora.ui.viewSelect() ); !ui.item && !isNavigationView && that.append( - pandora.$ui.sortSelect = pandora.ui.sortSelect() - ).append( - pandora.$ui.orderButton = pandora.ui.orderButton() + pandora.$ui.sortElement = pandora.ui.sortElement() ); that.append( !ui.item @@ -58,16 +56,14 @@ pandora.ui.toolbar = function() { wasNavigationView = ['map', 'calendar'].indexOf(data.previousValue) > -1; if (isNavigationView != wasNavigationView) { if (isNavigationView) { - pandora.$ui.sortSelect.remove(); - pandora.$ui.orderButton.remove(); + pandora.$ui.sortElement.remove(); } else { - pandora.$ui.sortSelect = pandora.ui.sortSelect().insertAfter(pandora.$ui.viewSelect); - pandora.$ui.orderButton = pandora.ui.orderButton().insertAfter(pandora.$ui.sortSelect); + pandora.$ui.sortElement = pandora.ui.sortElement().insertAfter(pandora.$ui.viewSelect); } pandora.$ui.listTitle.css({left: getListTitleLeft() + 'px'}); } else if ((data.value == 'clip') != (data.previousValue == 'clip')) { - pandora.$ui.sortSelect.replaceWith( - pandora.$ui.sortSelect = pandora.ui.sortSelect() + pandora.$ui.sortElement.replaceWith( + pandora.$ui.sortElement = pandora.ui.sortElement() ); } } @@ -81,8 +77,8 @@ pandora.ui.toolbar = function() { ) + ''; } function getListTitleLeft() { - return 320 - ( - ['map', 'calendar'].indexOf(pandora.user.ui.listView) > -1 ? 168 : 0 + return 332 - ( + ['map', 'calendar'].indexOf(pandora.user.ui.listView) > -1 ? 180 : 0 ); } that.updateListName = function(listId) {