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

add support for data annotations

Browse source
This commit is contained in:
j 2026-01-12 22:30:54 +00:00
commit 8243614546
5 changed files with 77 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

2
source/UI/js/Form/ArrayEditable.js
View file

@ -75,7 +75,7 @@ Ox.ArrayEditable = function(options, self) {
width: function() {
var width = self.options.width;
that.css({width: width - 8 + 'px'}); // 2 x 4 px padding
self.options.type == 'textarea' && self.$items.forEach(function($item) {
self.options.type != 'input' && self.$items.forEach(function($item) {
$item.options({width: width})
});
}

25
source/UI/js/Form/Editable.js
View file

@ -19,7 +19,7 @@ Ox.Editable = function(options, self) {
self = self || {};
var that = Ox.Element({
element: options.type == 'textarea' ? '<div>' : '<span>',
element: options.type == 'input' ? '<span>' : '<div>',
tooltip: options.tooltip
}, self)
.defaults({
@ -94,7 +94,9 @@ Ox.Editable = function(options, self) {
}
});
if (self.options.type != 'data') {
self.options.value = self.options.value.toString();
}
self.css = {};
self.$value = Ox.Element(self.options.type == 'input' ? '<span>' : '<div>')
@ -159,7 +161,7 @@ Ox.Editable = function(options, self) {
changeOnKeypress: true,
element: self.options.type == 'input' ? '<span>' : '<div>',
style: 'square',
type: self.options.type,
type: getInputType(),
value: formatInputValue()
})
.css(self.css)
@ -203,14 +205,15 @@ Ox.Editable = function(options, self) {
}
function formatInputValue() {
return self.options.type == 'input'
? (self.options.unformat || Ox.decodeHTMLEntities)(self.options.value)
return self.options.unformat
? self.options.unformat(self.options.value)
: self.options.type == 'input' ? Ox.decodeHTMLEntities(self.options.value)
: self.options.value.replace(/<br\/?><br\/?>/g, '\n\n');
}
function formatTestValue() {
var value = Ox.encodeHTMLEntities(
(self.options.unformat || Ox.identity)(self.$input.options('value'))
(self.options.type != 'data' && self.options.unformat || Ox.identity)(self.$input.options('value'))
);
return !value ? '&nbsp;'
: self.options.type == 'input'
@ -247,7 +250,9 @@ Ox.Editable = function(options, self) {
self.$input.value().replace(/\n\n+/g, '\0')
).replace(/\0/g, '\n\n').trim();
return (
self.options.type == 'input'
self.options.type == 'data'
? JSON.parse(value)
: self.options.type == 'input'
? Ox.encodeHTMLEntities(value)
: Ox.sanitizeHTML(value, self.options.tags, self.options.globalAttributes)
);
@ -265,7 +270,7 @@ Ox.Editable = function(options, self) {
height = self.options.height || Ox.limit(self.$test.height(), self.minHeight, self.maxHeight);
width = self.$test.width();
// +Ox.UI.SCROLLBAR_SIZE to prevent scrollbar from showing up
if (self.options.type == 'textarea') {
if (self.options.type != 'input') {
width += Ox.UI.SCROLLBAR_SIZE;
}
width = self.options.width || Ox.limit(width, self.minWidth, self.maxWidth);
@ -280,12 +285,16 @@ Ox.Editable = function(options, self) {
width: width,
height: height
});
self.$input.find(self.options.type).css({
self.$input.find(getInputType()).css({
width: width + 'px',
height: height + 'px'
});
}
function getInputType() {
return self.options.type == 'data' ? 'textarea' : self.options.type
}
function submit() {
self.options.editing = false;
that.removeClass('OxEditing');

43
source/UI/js/Video/AnnotationFolder.js
View file

@ -121,7 +121,7 @@ Ox.AnnotationFolder = function(options, self) {
self.$widget.options({width: self.options.width});
}
self.$annotations.options({
width: self.options.type == 'text'
width: isTextType(self.options.type)
? self.options.width + 8
: self.options.width
});
@ -284,7 +284,7 @@ Ox.AnnotationFolder = function(options, self) {
clickLink: self.options.clickLink,
confirmDeleteDialog: self.options.confirmDeleteDialog,
editable: self.options.editable,
getSortValue: self.options.type == 'text'
getSortValue: isTextType(self.options.type)
? function(value) {
return Ox.stripTags(value);
}
@ -301,8 +301,24 @@ Ox.AnnotationFolder = function(options, self) {
+ Ox.formatDate(item.modified.slice(0, 10), '%B %e, %Y');
} : '',
width: self.options.width,
maxHeight: self.options.type == 'text' ? Infinity : void 0,
type: self.options.type == 'text' ? 'textarea' : 'input'
maxHeight: isTextType(self.options.type) ? Infinity : void 0,
type: self.options.type == 'data' ? 'data' : self.options.type == 'text' ? 'textarea' : 'input',
format: self.options.type == 'data' ? function(value) {
return Ox.TreeList({
data: value,
width: self.options.width
}).css({
minHeight: '256px',
});
} : self.options.translate ? function(value) {
return Ox._(value);
} : null,
unformat: function(value) {
if (self.options.type == 'data') {
return JSON.stringify(value, null, " ");
}
return Ox.decodeHTMLEntities(Ox.stripTags(value));
}
}, self.options.autocomplete ? {
autocomplete: function(value, callback) {
self.options.autocomplete(self.options.id, value, callback);
@ -313,14 +329,9 @@ Ox.AnnotationFolder = function(options, self) {
autocompleteSelectHighlight: true,
autocompleteSelectMaxWidth: 256,
autocompleteSelectOffset: {left: 0, top: 0},
autocompleteSelectUpdate: true,
format: self.options.translate ? function(value) {
return Ox._(value);
} : null,
unformat: function(value) {
return Ox.decodeHTMLEntities(Ox.stripTags(value));
}
} : {}))
autocompleteSelectUpdate: true
} : {
}))
.bindEvent({
add: function(data) {
if (self.editing) {
@ -548,8 +559,8 @@ Ox.AnnotationFolder = function(options, self) {
function getSort() {
return ({
duration: ['-duration', '+in', self.options.type == 'text' ? '+created' : '+value'],
position: ['+in', '+duration', self.options.type == 'text' ? '+created' : '+value'],
duration: ['-duration', '+in', isTextType(self.options.type) ? '+created' : '+value'],
position: ['+in', '+duration', isTextType(self.options.type) ? '+created' : '+value'],
text: ['+value', '+in', '+duration'],
created: ['+created', '+in', '+duration', '+value']
})[self.options.sort];
@ -560,6 +571,10 @@ Ox.AnnotationFolder = function(options, self) {
&& !!item[self.options.type].type;
}
function isTextType(type) {
return ['text', 'data'].includes(type);
}
function removeAnnotation(data) {
var item;
self.editing = false;

4
source/UI/js/Video/AnnotationPanel.js
View file

@ -247,13 +247,13 @@ Ox.AnnotationPanel = function(options, self) {
if (annotation && folder) {
key = folder.options('id');
type = folder.options('type');
value = annotation.entity ? annotation.entity.name : annotation.value;
value = type == 'data' ? '' : annotation.entity ? annotation.entity.name : annotation.value;
isEditable = annotation.editable;
isEntity = !!annotation.entity;
isEvent = type == 'event';
isPlace = type == 'place';
isEventOrPlace = isEvent || isPlace;
isString = type != 'text';
isString = type != 'text' && type != 'data';
// fixme: absence of annotation[type] may be an error
isDefined = isEventOrPlace && !!annotation[type] && !!annotation[type].type;
annotationTitle = folder.options('item') + ': "' + Ox.stripTags(value) + '"';

25
source/UI/js/Video/VideoAnnotationPanel.js
View file

@ -1069,10 +1069,16 @@ Ox.VideoAnnotationPanel = function(options, self) {
if (query.length) {
query = query.toLowerCase();
results = self.annotations.filter(function(annotation) {
let value = annotation.value
if (!value.toLowerCase && value.toString) {
value = value.toString()
}
if (value.toLowerCase) {
return Ox.contains(['*', annotation.layer], self.options.findLayer)
&& Ox.decodeHTMLEntities(Ox.stripTags(
annotation.value.toLowerCase()
value.toLowerCase()
)).indexOf(query) > -1;
}
});
}
return results;
@ -1119,6 +1125,9 @@ Ox.VideoAnnotationPanel = function(options, self) {
Ox.forEach(layer.items, function(item) {
if (item.id == annotationId) {
value = item.value;
if (!value.toLowerCase && value.toString) {
value = value.toString()
}
found = true;
return false; // break
}
@ -1276,9 +1285,15 @@ Ox.VideoAnnotationPanel = function(options, self) {
var words = [];
Ox.forEach(Ox.count(Ox.words(
self.annotations.map(function(annotation) {
let value = annotation.value
if (!value.toLowerCase && value.toString) {
value = value.toString()
}
if (value.toLowerCase) {
return Ox.decodeHTMLEntities(
Ox.stripTags(annotation.value.toLowerCase())
Ox.stripTags(value.toLowerCase())
);
}
}).join(' ')
)), function(count, value) {
words.push({count: count, value: value});
@ -1431,11 +1446,12 @@ Ox.VideoAnnotationPanel = function(options, self) {
position: self.options.position
});
if (self.editing && self.options.selected.length && self.options.selected[0] != '_') {
let value = $('.OxEditableElement input:visible').val()
that.triggerEvent('editannotation', {
id: self.options.selected,
'in': self.options['in'],
out: self.options.out,
value: $('.OxEditableElement input:visible').val()
value: value
});
}
}
@ -1568,6 +1584,9 @@ Ox.VideoAnnotationPanel = function(options, self) {
}
data['in'] = self.options['in'];
data.out = self.options.out;
if (data.layer == 'data' && Ox.isString(data.value)) {
data.value = JSON.parse(data.value)
}
that.triggerEvent('editannotation', data);
}