From a85a38d60c91a8bbab59427ab244ee23e148b6ea Mon Sep 17 00:00:00 2001
From: j <0x006A@0x2620.org>
Date: Thu, 6 Feb 2014 10:27:57 +0000
Subject: [PATCH] edit sort
---
source/Ox.UI/js/Video/ClipPanel.js | 196 ++++++++++++++----------
source/Ox.UI/js/Video/VideoEditPanel.js | 12 +-
2 files changed, 122 insertions(+), 86 deletions(-)
diff --git a/source/Ox.UI/js/Video/ClipPanel.js b/source/Ox.UI/js/Video/ClipPanel.js
index 606b8519..8cea8dd6 100644
--- a/source/Ox.UI/js/Video/ClipPanel.js
+++ b/source/Ox.UI/js/Video/ClipPanel.js
@@ -10,6 +10,7 @@ Ox.ClipPanel = function(options, self) {
annotationsMapSize: 256,
annotationsRange: 'all',
annotationsSort: 'position',
+ clipRatio: 16/9,
clips: [],
clickLink: null,
duration: 0,
@@ -34,7 +35,7 @@ Ox.ClipPanel = function(options, self) {
clips: function() {
self.$list.options({
items: self.options.clips,
- sort: self.options.sort,
+ sort: getListSort(),
sortable: isSortable()
});
updateStatus();
@@ -54,17 +55,97 @@ Ox.ClipPanel = function(options, self) {
sort: function() {
updateSortElement();
self.$list.options({
- sort: self.options.sort,
+ sort: getListSort(),
sortable: isSortable(),
});
}
})
.bindEvent({
- resize: function() {
+ resize: function(data) {
+ self.$sortSelect.options({width: getSortSelectWidth(data.size)});
self.$list.size();
}
});
+ self.columns = [
+ {
+ align: 'right',
+ id: 'index',
+ operator: '+',
+ title: Ox._('Index'),
+ visible: false,
+ width: 60
+ },
+ {
+ id: 'id',
+ operator: '+',
+ title: Ox._('ID'),
+ unique: true,
+ visible: false,
+ width: 60
+ },
+ {
+ id: 'item',
+ operator: '+',
+ title: Ox._(pandora.site.itemName.singular),
+ visible: true,
+ width: 60
+ },
+ {
+ align: 'right',
+ editable: isEditable,
+ format: function(value, data) {
+ return (
+ isEditable(data) ? ['', '']
+ : ['', '']
+ ).join(Ox.formatDuration(value, 3));
+ },
+ id: 'in',
+ operator: '+',
+ title: Ox._('In'),
+ visible: true,
+ width: 90
+ },
+ {
+ align: 'right',
+ editable: isEditable,
+ format: function(value, data) {
+ return (
+ isEditable(data) ? ['', '']
+ : ['', '']
+ ).join(Ox.formatDuration(value, 3));
+ },
+ id: 'out',
+ operator: '+',
+ title: Ox._('Out'),
+ visible: true,
+ width: 90
+ },
+ {
+ align: 'right',
+ editable: isEditable,
+ format: function(value, data) {
+ return (
+ isEditable(data) ? ['', '']
+ : ['', '']
+ ).join(Ox.formatDuration(value, 3));
+ },
+ id: 'duration',
+ operator: '+',
+ title: Ox._('Duration'),
+ visible: true,
+ width: 90
+ },
+ {
+ align: 'right',
+ id: 'sort',
+ operator: '+',
+ title: Ox._('Sort'),
+ visible: false,
+ width: 60
+ }
+ ];
+
self.$menubar = Ox.Bar({
size: 24
})
@@ -84,9 +165,9 @@ Ox.ClipPanel = function(options, self) {
{id: 'annotations', title: Ox._('View Annotations'), checked: self.options.view == 'annotations'},
]},
{},
- {id: 'split', title: Ox._('Split Selected Clips at Cuts'), disabled: !self.options.editable || !self.options.selected.length},
- {id: 'join', title: Ox._('Join Selected Clips at Cuts'), disabled: !self.options.editable || !self.options.selected.length},
- {id: 'replace', title: Ox._('Make Selected Clips Editable'), disabled: !self.options.editable || !self.options.selected.length}
+ {id: 'split', title: Ox._('Split Selected Clips at Cuts'), disabled: !self.options.editable || !self.options.selected.length || self.options.view == 'annotations'},
+ {id: 'join', title: Ox._('Join Selected Clips at Cuts'), disabled: !self.options.editable || !self.options.selected.length || self.options.view == 'annotations'},
+ {id: 'replace', title: Ox._('Make Selected Clips Editable'), disabled: !self.options.editable || !self.options.selected.length || self.options.view == 'annotations'}
],
title: 'set',
tooltip: Ox._('Options'),
@@ -99,7 +180,14 @@ Ox.ClipPanel = function(options, self) {
.bindEvent({
change: function(data) {
if (data.id == 'view') {
+ var action = self.options.editable
+ && self.options.selected.length
+ && self.options.view != 'annotations'
+ ? 'enableItem' : 'disableItem';
self.options.view = data.checked[0].id;
+ self.$menu[action]('split');
+ self.$menu[action]('join');
+ self.$menu[action]('replace');
self.$panel.replaceElement(1, self.$list = getList());
that.triggerEvent('view', {view: self.options.view});
}
@@ -117,7 +205,7 @@ Ox.ClipPanel = function(options, self) {
self.$sortSelect = Ox.Select({
items: self.options.sortOptions,
value: self.options.sort[0].key,
- width: 100 + Ox.UI.SCROLLBAR_SIZE
+ width: getSortSelectWidth(self.options.width)
})
.bindEvent({
change: function(data) {
@@ -248,76 +336,7 @@ Ox.ClipPanel = function(options, self) {
return $list;
} else if (self.options.view == 'list') {
$list = Ox.TableList({
- columns: [
- {
- align: 'right',
- id: 'index',
- operator: '+',
- title: Ox._('Index'),
- visible: false,
- width: 60
- },
- {
- id: 'id',
- operator: '+',
- title: Ox._('ID'),
- unique: true,
- visible: false,
- width: 60
- },
- {
- id: 'item',
- operator: '+',
- title: Ox._(pandora.site.itemName.singular),
- visible: true,
- width: 60
- },
- {
- align: 'right',
- editable: isEditable,
- format: function(value, data) {
- return (
- isEditable(data) ? ['', '']
- : ['', '']
- ).join(Ox.formatDuration(value, 3));
- },
- id: 'in',
- operator: '+',
- title: Ox._('In'),
- visible: true,
- width: 90
- },
- {
- align: 'right',
- editable: isEditable,
- format: function(value, data) {
- return (
- isEditable(data) ? ['', '']
- : ['', '']
- ).join(Ox.formatDuration(value, 3));
- },
- id: 'out',
- operator: '+',
- title: Ox._('Out'),
- visible: true,
- width: 90
- },
- {
- align: 'right',
- editable: isEditable,
- format: function(value, data) {
- return (
- isEditable(data) ? ['', '']
- : ['', '']
- ).join(Ox.formatDuration(value, 3));
- },
- id: 'duration',
- operator: '+',
- title: Ox._('Duration'),
- visible: true,
- width: 90
- }
- ],
+ columns: self.columns,
columnsMovable: true,
columnsRemovable: true,
columnsResizable: true,
@@ -325,18 +344,18 @@ Ox.ClipPanel = function(options, self) {
items: self.options.clips,
scrollbarVisible: true,
selected: self.options.selected,
- sort: self.options.sort,
+ sort: getListSort(),
sortable: isSortable(),
unique: 'id'
});
} else {
$list = Ox.IconList({
draggable: true,
- fixedRatio: pandora.site.video.previewRatio,
+ fixedRatio: self.options.clipRatio,
item: function(data, sort, size) {
size = size || 128; // fixme: is this needed?
var ratio = data.videoRatio,
- fixedRatio = pandora.site.video.previewRatio,
+ fixedRatio = self.options.clipRatio,
width = ratio > fixedRatio ? size : Math.round(size * ratio / fixedRatio),
height = Math.round(width / ratio),
info,
@@ -363,7 +382,7 @@ Ox.ClipPanel = function(options, self) {
items: self.options.clips,
keys: ['id', 'in', 'out'],
orientation: 'both',
- sort: self.options.sort,
+ sort: getListSort(),
unique: 'id'
});
}
@@ -431,6 +450,21 @@ Ox.ClipPanel = function(options, self) {
return $list;
}
+ function getListSort() {
+ var sort = [{key: 'index', operator: '+'}]
+ if (self.options.sort && self.options.sort.length) {
+ sort[0].operator = self.options.sort[0].operator;
+ sort[0].key = Ox.getObjectById(self.columns, self.options.sort[0].key)
+ ? self.options.sort[0].key
+ : 'sort';
+ }
+ return sort;
+ }
+
+ function getSortSelectWidth(width) {
+ return Math.min(144, width - 52 + Ox.UI.SCROLLBAR_SIZE);
+ }
+
function isEditable(data) {
return self.options.editable && !data.annotation;
}
diff --git a/source/Ox.UI/js/Video/VideoEditPanel.js b/source/Ox.UI/js/Video/VideoEditPanel.js
index 85b48cfb..ee85fa03 100644
--- a/source/Ox.UI/js/Video/VideoEditPanel.js
+++ b/source/Ox.UI/js/Video/VideoEditPanel.js
@@ -10,10 +10,9 @@ Ox.VideoEditPanel = function(options, self) {
annotationsMapSize: 256,
annotationsRange: 'all',
annotationsSort: 'position',
+ clipRatio: 16/9,
clips: [],
clipSize: 256,
- clipSort: [],
- clipSortOptions: [],
clipTooltip: 'clips',
clipView: 'list',
clickLink: null,
@@ -43,6 +42,8 @@ Ox.VideoEditPanel = function(options, self) {
showTimeline: false,
showUsers: false,
smallTimelineURL: '',
+ sort: [],
+ sortOptions: [],
subtitles: [],
timeline: '',
timelineTooltip: 'timeline',
@@ -56,7 +57,7 @@ Ox.VideoEditPanel = function(options, self) {
clips: function() {
self.$clipPanel.options({
clips: Ox.clone(self.options.clips),
- sort: self.options.clipSort
+ sort: self.options.sort
});
},
duration: function() {
@@ -299,6 +300,7 @@ Ox.VideoEditPanel = function(options, self) {
annotationsMapSize: self.options.annotationsMapSize,
annotationsRange: self.options.annotationsRange,
annotationsSort: self.options.annotationsSort,
+ clipRatio: self.options.clipRatio,
clips: Ox.clone(self.options.clips),
clickLink: self.options.clickLink,
duration: self.options.duration,
@@ -313,7 +315,7 @@ Ox.VideoEditPanel = function(options, self) {
showAnnotationsMap: self.options.showAnnotationsMap,
showLayers: self.options.showLayers,
showUsers: self.options.showUsers,
- sort: self.options.clipSort,
+ sort: self.options.sort,
sortOptions: self.options.sortOptions,
view: self.options.clipView,
width: self.options.clipSize
@@ -356,7 +358,7 @@ Ox.VideoEditPanel = function(options, self) {
that.triggerEvent('select', data);
},
sort: function(data) {
- self.options.clipSort = data;
+ self.options.sort = data;
that.triggerEvent('sort', data);
},
split: function(data) {