diff --git a/static/js/pandora/navigationView.js b/static/js/pandora/navigationView.js
index 448b05796..92b30914c 100644
--- a/static/js/pandora/navigationView.js
+++ b/static/js/pandora/navigationView.js
@@ -15,55 +15,13 @@ pandora.ui.navigationView = function(type, videoRatio) {
$element = Ox.Element(),
- $itemIcon = type == 'map' ? $('')
- .addClass('OxFlag')
- .attr({
- src: Ox.getImageByGeoname('icon', 16, '')
- })
- .css({float: 'left', margin: '2px'}) : '',
-
- $itemLabel = Ox.Label({
- textAlign: 'center',
- title: '',
- width: 0 // 76 + Ox.UI.SCROLLBAR_SIZE
- })
- .css({
- position: 'absolute',
- left: 4 + !!ui.item * 20 + (type == 'map') * 20 + 'px',
- top: '4px',
- right: '24px',
- width: 'auto'
- })
- .bindEvent({
- singleclick: function() {
- $element[type == 'map' ? 'panToPlace' : 'panToEvent']();
- },
- doubleclick: function() {
- $element[type == 'map' ? 'zoomToPlace' : 'zoomToEvent']();
- }
- }),
-
- $itemButton = Ox.Button({
- title: 'close',
- type: 'image'
- })
- .css({float: 'right', margin: '2px'})
- .bindEvent({
- click: function() {
- $element.options({selected: null});
- updateStatusbar(0);
- }
- }),
-
- $item = $('
')
- .css({padding: '2px'})
- .append(ui.item ? pandora.$ui.sortMenu = pandora.ui.sortMenu() : '')
- .append($itemIcon)
- .append($itemLabel)
- .append($itemButton),
-
$toolbar = Ox.Bar({size: 24})
- .append($item),
+ .append(
+ pandora.$ui.navigationViewOrderButton = pandora.ui.orderButton(true)
+ )
+ .append(
+ pandora.$ui.navigationViewSortSelect = pandora.ui.sortSelect(true)
+ ),
$list = pandora.ui.clipList(videoRatio)
.bindEvent({
@@ -224,12 +182,10 @@ pandora.ui.navigationView = function(type, videoRatio) {
}
- updateToolbar();
updateStatusbar();
function selectItem(data) {
var id = data.id || '';
- updateToolbar(id ? data : null);
if (id && id[0] != '_') {
$status.html('loading...');
$list.options({
@@ -271,16 +227,6 @@ pandora.ui.navigationView = function(type, videoRatio) {
);
}
- function updateToolbar(item) {
- type == 'map' && $itemIcon.attr({
- src: Ox.getImageByGeoname('icon', 16, item ? item.geoname : '')
- });
- $itemLabel.options({
- title: item ? item.name : 'No ' + itemName
- });
- $itemButton.options({disabled: !item});
- }
-
if (type == 'map') {
pandora.user.ui.mapFind = '';
pandora.user.ui.mapSelection = '';
diff --git a/static/js/pandora/orderButton.js b/static/js/pandora/orderButton.js
index a963aab6d..e4f14c0e8 100644
--- a/static/js/pandora/orderButton.js
+++ b/static/js/pandora/orderButton.js
@@ -1,6 +1,6 @@
// vim: et:ts=4:sw=4:sts=4:ft=javascript
-pandora.ui.orderButton = function() {
+pandora.ui.orderButton = function(isNavigationView) {
var sortKey = !pandora.user.ui.item ? 'listSort' : 'itemSort',
that = Ox.Button({
id: 'orderButton',
@@ -9,8 +9,8 @@ pandora.ui.orderButton = function() {
type: 'image'
})
.css({
- float: 'left',
- margin: '4px 0 0 4px'
+ float: isNavigationView ? 'right' : 'left',
+ margin: isNavigationView ? '4px 4px 0 0' : '4px 0 0 4px'
})
.bindEvent({
click: function(data) {
diff --git a/static/js/pandora/sortSelect.js b/static/js/pandora/sortSelect.js
index b73010dbe..9015611d5 100644
--- a/static/js/pandora/sortSelect.js
+++ b/static/js/pandora/sortSelect.js
@@ -1,5 +1,6 @@
// vim: et:ts=4:sw=4:sts=4:ft=javascript
-pandora.ui.sortSelect = function() {
+
+pandora.ui.sortSelect = function(isNavigationView) {
var isClipView = pandora.isClipView(),
items = [],
sortKey = !pandora.user.ui.item ? 'listSort' : 'itemSort',
@@ -27,11 +28,11 @@ pandora.ui.sortSelect = function() {
that = Ox.Select({
id: 'sortSelect',
items: items,
- width: 144
+ width: isNavigationView ? 128 : 144
})
.css({
- float: 'left',
- margin: '4px 0 0 4px'
+ float: isNavigationView ? 'right' : 'left',
+ margin: isNavigationView ? '4px 4px 0 0' : '4px 0 0 4px'
})
.bindEvent({
change: function(data) {
diff --git a/static/js/pandora/toolbar.js b/static/js/pandora/toolbar.js
index 01bd7ab75..823aaeb08 100644
--- a/static/js/pandora/toolbar.js
+++ b/static/js/pandora/toolbar.js
@@ -2,6 +2,8 @@
pandora.ui.toolbar = function() {
var ui = pandora.user.ui,
+ isNavigationView = !ui.item
+ && ['map', 'calendar'].indexOf(ui.listView) > -1,
that = Ox.Bar({
size: 24
}).css({
@@ -18,6 +20,10 @@ pandora.ui.toolbar = function() {
).append(
pandora.$ui.orderButton = pandora.ui.orderButton()
);
+ if (isNavigationView) {
+ pandora.$ui.sortSelect.hide();
+ pandora.$ui.orderButton.hide();
+ }
ui.item && that.append(
pandora.$ui.itemTitle = Ox.Label({
textAlign: 'center'
@@ -36,6 +42,11 @@ pandora.ui.toolbar = function() {
);
that.bindEvent({
pandora_listview: function(data) {
+ var isNavigationView = ['map', 'calendar'].indexOf(data.value) > -1,
+ wasNavigationView = ['map', 'calendar'].indexOf(data.previousValue) > -1;
+ if (isNavigationView != wasNavigationView) {
+ pandora.$ui.sortSelect[isNavigationView ? 'hide' : 'show']();
+ }
if (pandora.isClipView() != pandora.isClipView(data.previousValue)) {
pandora.$ui.sortSelect.replaceWith(
pandora.$ui.sortSelect = pandora.ui.sortSelect()