0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

make find next/previous select the annotation

Browse source
This commit is contained in:
rlx 2012-02-01 05:21:29 +00:00
parent 319608b5ac
commit 9b2766bc17
6 changed files with 137 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
source/Ox.UI/js/Form/Ox.ArrayEditable.js
View file

@ -11,7 +11,7 @@ Ox.ArrayEditable = function(options, self) {
.defaults({
clickLink: null,
editable: true,
highlight: null,
highlight: '',
itemName: 'item',
items: [],
maxHeight: void 0,
@ -114,6 +114,7 @@ Ox.ArrayEditable = function(options, self) {
return value || ' '
},
*/
highlight: self.options.highlight,
maxHeight: self.options.maxHeight,
submitOnBlur: self.options.submitOnBlur,
tooltip: 'Click to select' + (

4
source/Ox.UI/js/Video/Ox.AnnotationFolder.js
View file

@ -25,7 +25,7 @@ Ox.AnnotationFolder = function(options, self) {
clickLink: null,
collapsed: false,
editable: false,
highlight: null,
highlight: '',
id: '',
'in': 0,
item: '',
@ -206,7 +206,7 @@ Ox.AnnotationFolder = function(options, self) {
self.$annotations = Ox.ArrayEditable({
clickLink: self.options.clickLink,
editable: self.options.editable,
highlight: self.highlight,
highlight: self.options.highlight,
items: self.annotations,
placeholder: 'No ' + self.options.title,
selected: self.options.selected,

2
source/Ox.UI/js/Video/Ox.AnnotationPanel.js
View file

@ -13,7 +13,7 @@ Ox.AnnotationPanel = function(options, self) {
clickLink: null,
editable: false,
font: 'small',
highlight: null,
highlight: '',
layers: [],
mapSize: 256,
range: 'all',

2
source/Ox.UI/js/Video/Ox.SmallVideoTimelineImage.js
View file

@ -125,7 +125,7 @@ Ox.SmallVideoTimelineImage = function(options, self) {
Ox.loop(left, right, function(x) {
Ox.loop(top, bottom, function(y) {
var alpha = self.options.type == 'editor'
&& (y == top || y == bottom - 1) ? 192 : 64,
&& (y == top || y == bottom - 1) ? 255 : 128,
color = [2, 3, 6].indexOf(x % 4 + y % 4) > -1
? [0, 0, 0] : [255, 255, 0],
index = x * 4 + y * 4 * width;

123
source/Ox.UI/js/Video/Ox.VideoEditor.js
View file

@ -112,7 +112,7 @@ Ox.VideoEditor = function(options, self) {
});
},
key_g: function() {
self.results.length && setPosition(getNextPosition('result', 1));
self.results.length && selectAnnotation(getNextResult(1));
},
key_i: function() {
setPoint('in', self.options.position);
@ -146,7 +146,7 @@ Ox.VideoEditor = function(options, self) {
movePositionBy(self.options.duration);
},
key_shift_g: function() {
self.results.length && setPosition(getNextPosition('result', -1));
self.results.length && selectAnnotation(getNextResult(-1));
},
key_shift_left: function() {
movePositionBy(-1);
@ -570,7 +570,7 @@ Ox.VideoEditor = function(options, self) {
.css({float: 'right'})
.bindEvent({
click: function() {
setPosition(getNextPosition('result', 1));
selectAnnotation(getNextResult(1));
}
})
.appendTo(self.$menubar);
@ -585,7 +585,7 @@ Ox.VideoEditor = function(options, self) {
.css({float: 'right'})
.bindEvent({
click: function() {
setPosition(getNextPosition('result', -1));
selectAnnotation(getNextResult(-1));
}
})
.appendTo(self.$menubar);
@ -600,6 +600,7 @@ Ox.VideoEditor = function(options, self) {
clickLink: self.options.clickLink,
editable: true,
font: self.options.annotationsFont,
highlight: self.options.find,
'in': self.options['in'],
layers: self.options.layers,
mapSize: self.options.annotationsMapSize,
@ -643,6 +644,7 @@ Ox.VideoEditor = function(options, self) {
},
edit: function(data) {
Ox.print('EDIT EVENT REACHED EDITOR', data)
updateWords('remove');
self.editing = true;
setTimelineState();
},
@ -655,6 +657,7 @@ Ox.VideoEditor = function(options, self) {
var layer = Ox.getObjectById(self.options.layers, data.layer),
index = Ox.getIndexById(layer.items, data.id);
layer.items.splice(index, 1);
updateWords('remove');
self.editing = false;
self.options.selected = '';
setTimelineState();
@ -734,6 +737,7 @@ Ox.VideoEditor = function(options, self) {
}
function blurAnnotation() {
updateWords('add');
self.editing = false;
setTimelineState();
if (
@ -750,6 +754,7 @@ Ox.VideoEditor = function(options, self) {
}
function editAnnotation() {
updateWords('remove');
self.editing = true;
setTimelineState();
self.$annotationPanel.editItem();
@ -764,12 +769,25 @@ Ox.VideoEditor = function(options, self) {
return Ox.decodeHTML(Ox.stripTags(
item.value.toLowerCase()
)).indexOf(query) > -1 ? {
id: item.id,
'in': item['in'],
out: item.out
} : null;
});
})));
//Ox.print('RESULTS:', results)
}))).sort(function(a, b) {
var ret = 0;
if (a['in'] < b['in']) {
ret = -1;
} else if (a['in'] > b['in']) {
ret = 1;
} else if (a.out > b.out) {
ret = -1;
} else if (a.out < b.out) {
ret = 1;
}
return ret;
});
Ox.print('RESULTS:', results)
/*
results = Ox.map(self.options.subtitles, function(subtitle) {
return subtitle.text.toLowerCase().indexOf(query) > -1 ? {
@ -817,6 +835,21 @@ Ox.VideoEditor = function(options, self) {
return annotations.length ? annotations[0] : {id: ''};
}
function getAnnotationValue(annotationId) {
var found = false, value;
Ox.forEach(self.options.layers, function(layer, i) {
Ox.forEach(layer.items, function(item) {
if (item.id == annotationId) {
value = item.value;
found = true;
return false;
}
});
return !found;
});
return value;
}
// fixme: why not goToNextPosition()?
function getNextPosition(type, direction) {
var found = false,
@ -832,14 +865,18 @@ Ox.VideoEditor = function(options, self) {
)));
} else if (type == 'cut') {
positions = Ox.merge(0, self.options.cuts, self.options.duration);
} else if (type == 'result') {
}/* else if (type == 'result') {
positions = self.results.map(function(v) {
return v['in'];
});
}
}*/
direction == -1 && positions.reverse();
Ox.forEach(positions, function(v) {
if (direction == 1 ? v > self.options.position : v < self.options.position) {
if (
direction == 1
? v > self.options.position
: v < self.options.position
) {
position = v;
found = true;
return false;
@ -852,6 +889,29 @@ Ox.VideoEditor = function(options, self) {
return position;
}
function getNextResult(direction) {
var found = false,
result,
results = Ox.clone(self.results);
direction == -1 && results.reverse();
Ox.forEach(results, function(v) {
if (
direction == 1
? v['in'] > self.options.position
: v['in'] < self.options.position
) {
result = v;
found = true;
return false;
}
});
direction == -1 && results.reverse();
if (!found) {
result = results[direction == 1 ? 0 : results.length - 1];
}
return result;
}
/*
function getPoints(type) {
var found = false,
@ -957,7 +1017,7 @@ Ox.VideoEditor = function(options, self) {
Ox.forEach(Ox.count(Ox.words(
Ox.merge(self.options.layers.map(function(layer) {
return layer.items.map(function(item) {
return item.value;
return Ox.decodeHTML(Ox.stripTags(item.value.toLowerCase()));
});
})).join(' ')
)), function(count, value) {
@ -1001,8 +1061,10 @@ Ox.VideoEditor = function(options, self) {
} else if (!data.id) {
that.gainFocus();
}
self.editing = false;
// FIXME
// self.editing = false;
self.options.selected = data.id;
Ox.print('SOS???', self.options.selected);
if (self.options.selected) {
self.options.annotationsRange != 'position' && setPosition(data['in']);
setPoint('in', data['in'], true);
@ -1121,13 +1183,12 @@ Ox.VideoEditor = function(options, self) {
}
function submitAnnotation(data) {
updateWords('add');
self.editing = false;
setTimelineState();
/*
Ox.print('....', self.options.annotationsRange == 'position',
self.options.position < self.options['in'],
self.options.position > self.options.out)
*/
if (
self.options.annotationsRange == 'position' && (
self.options.position < self.options['in']
@ -1166,7 +1227,8 @@ Ox.VideoEditor = function(options, self) {
if (hasPressedEnter) {
that.triggerEvent('find', {find: self.options.find});
if (self.results.length) {
setPosition(getNextPosition('result', 1));
Ox.print('HELLO?>??', getNextResult(1))
selectAnnotation(getNextResult(1));
} else {
self.$findInput.focusInput(true);
}
@ -1201,6 +1263,39 @@ Ox.VideoEditor = function(options, self) {
});
}
function updateWords(action) {
var words = [];
Ox.forEach(Ox.count(Ox.words(
getAnnotationValue(self.options.selected)
)), function(count, value) {
words.push({count: count, value: value});
});
words.forEach(function(word) {
var index = Ox.getIndex(self.words, 'value', word.value);
if (action == 'add') {
if (index == -1) {
self.words.push({count: 1, value: word.value});
} else {
self.words[index].count++;
}
} else {
if (self.words[index].count == 1) {
self.words.splice(index, 1);
} else {
self.words[index].count--;
}
}
});
self.words.sort(function(a, b) {
return b.count - a.count;
});
self.$findInput.options({
autocomplete: self.words.map(function(word) {
return word.value;
})
});
}
self.setOption = function(key, value) {
if (key == 'width' || key == 'height') {
setSizes();

22
source/Ox.UI/themes/classic/css/classic.css
View file

@ -774,6 +774,28 @@ Video
.OxThemeClassic .OxAnnotationFolder .OxArrayEditable .OxEditableElement.OxSelected {
background: rgb(192, 192, 255);
}
.OxThemeClassic .OxAnnotationFolder .OxArrayEditable .OxEditableElement.OxSelected .OxHighlight {
background-color: transparent;
background-image: -moz-repeating-linear-gradient(
-45deg, rgb(192, 192, 255) 0, rgb(192, 192, 255) 25%,
rgb(255, 255, 0) 25%, rgb(255, 255, 0) 50%,
rgb(192, 192, 255) 50%, rgb(192, 192, 255) 75%,
rgb(255, 255, 0) 75%, rgb(255, 255, 0) 100%
);
background-image: -o-repeating-linear-gradient(
-45deg, rgb(192, 192, 255) 0, rgb(192, 192, 255) 25%,
rgb(255, 255, 0) 25%, rgb(255, 255, 0) 50%,
rgb(192, 192, 255) 50%, rgb(192, 192, 255) 75%,
rgb(255, 255, 0) 75%, rgb(255, 255, 0) 100%
);
background-image: -webkit-repeating-linear-gradient(
-45deg, rgb(192, 192, 255) 0, rgb(192, 192, 255) 25%,
rgb(255, 255, 0) 25%, rgb(255, 255, 0) 50%,
rgb(192, 192, 255) 50%, rgb(192, 192, 255) 75%,
rgb(255, 255, 0) 75%, rgb(255, 255, 0) 100%
);
background-size: 4px 4px;
}
.OxThemeClassic .OxAnnotationFolder .OxArrayEditableInput .OxEditableElement.OxSelected {
box-shadow: 0 0 1px rgb(64, 64, 64);
}