sortSelect + orderButton -> selectElement
This commit is contained in:
parent
76bf9a2bee
commit
99fbf9f2d9
4 changed files with 96 additions and 19 deletions
|
@ -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({
|
||||
|
|
|
@ -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)
|
||||
|
|
87
static/js/pandora/sortElement.js
Normal file
87
static/js/pandora/sortElement.js
Normal 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;
|
||||
|
||||
};
|
|
@ -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) {
|
||||
|
|
Loading…
Reference in a new issue