sortSelect + orderButton -> selectElement

This commit is contained in:
rolux 2013-03-01 11:38:51 +05:30
parent 76bf9a2bee
commit 99fbf9f2d9
4 changed files with 96 additions and 19 deletions

View file

@ -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({

View file

@ -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)

View file

@ -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;
};

View file

@ -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() {
) + '</b>';
}
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) {