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

use Ox.Editable in Ox.AnnotationPanel

Browse source
This commit is contained in:
rlx 2011-10-27 13:13:28 +00:00
parent a4cb6ee9ae
commit a949ad2cf4
5 changed files with 53 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
source/Ox.UI/css/Ox.UI.css
View file

@ -1737,11 +1737,12 @@ Video
.OxAnnotation { .OxAnnotation {
border-width: 0 0 1px 0; border-width: 0 0 1px 0;
border-style: solid; border-style: solid;
padding: 4px; //padding: 4px 4px 0 4px;
} }
.OxAnnotation:last-child { .OxAnnotation:last-child {
border-width: 0; border-width: 0;
} }
/*
.OxAnnotation.OxEdit { .OxAnnotation.OxEdit {
padding: 0; padding: 0;
} }
@ -1749,6 +1750,7 @@ Video
padding: 4px; padding: 4px;
border: 0; border: 0;
} }
*/
.OxPosterMarker { .OxPosterMarker {
position: absolute; position: absolute;

41
source/Ox.UI/js/Form/Ox.Editable.js
View file

@ -27,7 +27,7 @@ Ox.Editable = function(options, self) {
placeholder: '', placeholder: '',
tooltip: '', tooltip: '',
value: '', value: '',
width: 256, width: 0,
type: 'input' type: 'input'
}) })
.options(options || {}) .options(options || {})
@ -81,11 +81,13 @@ Ox.Editable = function(options, self) {
}, self.options.type == 'textarea' ? { }, self.options.type == 'textarea' ? {
width: self.options.width width: self.options.width
} : {})) } : {}))
.css({display: 'none'}) .css({
display: 'none',
})
.bindEvent({ .bindEvent({
blur: submit, blur: submit,
cancel: cancel, cancel: cancel,
change: change, change: change
//submit: submit //submit: submit
}) })
//[self.options.editing ? 'show' : 'hide']() //[self.options.editing ? 'show' : 'hide']()
@ -98,9 +100,13 @@ Ox.Editable = function(options, self) {
} }
function cancel() { function cancel() {
self.$input.hide(); self.options.value = self.originalValue;
self.$value.show(); self.$input.options({value: formatInputValue()}).hide();
self.options.editing = false; self.$test.html(formatTestValue());
self.$value.html(formatValue()).show();
that.triggerEvent('submit', {
value: self.options.value
});
} }
function change(event) { function change(event) {
@ -109,10 +115,8 @@ Ox.Editable = function(options, self) {
self.$value.html(formatValue); self.$value.html(formatValue);
self.$test.html(formatTestValue()); self.$test.html(formatTestValue());
height = self.options.height || self.$test.height(); height = self.options.height || self.$test.height();
//height = Math.max(self.$test.height(), 14); width = self.options.width || Ox.limit(self.$test.width() + 2, self.minWidth, self.maxWidth)
width = Math.max(self.$test.width() + 2, 8); Ox.print(self.options.width, self.$test.width(), 'wxh', width, height)
width = Ox.limit(self.$test.width() + 2, self.minWidth, self.maxWidth)
Ox.print('wxh', width, height)
if (self.options.type == 'input') { if (self.options.type == 'input') {
self.$input.options({ self.$input.options({
width: width width: width
@ -141,6 +145,7 @@ Ox.Editable = function(options, self) {
function edit() { function edit() {
var height, width; var height, width;
if (self.options.editable && !self.options.editing) { if (self.options.editable && !self.options.editing) {
self.originalValue = self.options.value;
self.minWidth = 8 self.minWidth = 8
self.maxWidth = that.parent().width(); self.maxWidth = that.parent().width();
Ox.print('MAX WIDTH', self.maxWidth); Ox.print('MAX WIDTH', self.maxWidth);
@ -169,6 +174,7 @@ Ox.Editable = function(options, self) {
self.$input.focusInput(false); self.$input.focusInput(false);
}, 0); }, 0);
self.options.editing = true; self.options.editing = true;
that.triggerEvent('edit', {editing: true});
} }
} }
@ -179,14 +185,10 @@ Ox.Editable = function(options, self) {
} }
function formatTestValue() { function formatTestValue() {
Ox.print('TEST VALUE =', self.options.type == 'input'
? self.options.value.replace(/ /g, ' ')
: self.options.value.replace(/\n$/, '<br/>&nbsp;')
.replace(/\n/g, '<br/>'));
return self.options.type == 'input' return self.options.type == 'input'
? self.options.value.replace(/ /g, '&nbsp;') ? self.options.value.replace(/ /g, '&nbsp;')
: self.options.value.replace(/\n$/, '<br/>&nbsp;') : Ox.parseHTML(self.options.value || '&nbsp;')
.replace(/\n/g, '<br/>'); .replace(/<br\/?>$/, '<br/>&nbsp;');
} }
function formatValue() { function formatValue() {
@ -197,9 +199,10 @@ Ox.Editable = function(options, self) {
function submit() { function submit() {
self.options.value = Ox.parseHTML(self.$input.value()); self.options.value = Ox.parseHTML(self.$input.value());
self.$input.value(formatInputValue()); self.$input.options({value: formatInputValue()}).hide();
self.$value.html(formatValue()); self.$test.html(formatTestValue());
cancel(); self.$value.html(formatValue()).show();
self.options.editing = false;
that.triggerEvent('submit', { that.triggerEvent('submit', {
value: self.options.value value: self.options.value
}); });

4
source/Ox.UI/js/Form/Ox.Input.js
View file

@ -103,7 +103,9 @@ Ox.Input = function(options, self) {
)*/ )*/
) )
.css({width: self.options.width + 'px'}) .css({width: self.options.width + 'px'})
.bindEvent(Ox.extend(self.options.type == 'textarea' ? {} : { .bindEvent(Ox.extend(self.options.type == 'textarea' ? {
key_shift_enter: submit
} : {
key_enter: submit key_enter: submit
}, { }, {
key_control_v: paste, key_control_v: paste,

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

@ -55,9 +55,26 @@ Ox.AnnotationPanel = function(options, self) {
self.$annotations = Ox.List({ self.$annotations = Ox.List({
construct: function(data) { construct: function(data) {
return Ox.Element() var $item = Ox.Element()
.addClass('OxAnnotation OxEditable OxTarget') .append(
.html(Ox.parseHTML(data.value)); Ox.Editable({
type: 'textarea',
width: self.options.width - 8,
value: data.value
})
.bindEvent({
edit: function() {
$item.removeClass('OxTarget');
},
submit: function(data) {
$item.addClass('OxTarget')
}
})
)
.append($('<div>').css({height: '4px'}))
.css({padding: '4px 4px 0 4px'})
.addClass('OxAnnotation OxTarget');
return $item;
}, },
items: self.options.items.map(function(v, i) { items: self.options.items.map(function(v, i) {
return { return {
@ -65,6 +82,7 @@ Ox.AnnotationPanel = function(options, self) {
value: v.value value: v.value
}; };
}), }),
max: 1,
unique: 'id' unique: 'id'
}) })
.bindEvent({ .bindEvent({
@ -73,6 +91,7 @@ Ox.AnnotationPanel = function(options, self) {
selectAnnotation({}, {ids: [item.id]}); selectAnnotation({}, {ids: [item.id]});
}, },
open: function(data) { open: function(data) {
return;
if (data.ids.length == 1) { if (data.ids.length == 1) {
var pos = Ox.getPositionById(self.$annotations.options('items'), data.ids[0]); var pos = Ox.getPositionById(self.$annotations.options('items'), data.ids[0]);
self.$annotations.editItem(pos); self.$annotations.editItem(pos);

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

@ -9,6 +9,8 @@ Ox.VideoEditor <f:Ox.Element> VideoEditor Object
self <o> shared private variable self <o> shared private variable
@*/ @*/
// fixme: should be VideoAnnotationEditor
Ox.VideoEditor = function(options, self) { Ox.VideoEditor = function(options, self) {
self = self || {}; self = self || {};
@ -267,7 +269,7 @@ Ox.VideoEditor = function(options, self) {
self.options.layers.forEach(function(layer, i) { self.options.layers.forEach(function(layer, i) {
self.$annotationPanel[i] = Ox.AnnotationPanel( self.$annotationPanel[i] = Ox.AnnotationPanel(
Ox.extend({ Ox.extend({
width: self.options.annotationSize width: self.options.annotationsSize - Ox.UI.SCROLLBAR_SIZE
}, layer) }, layer)
) )
.bindEvent({ .bindEvent({
@ -309,7 +311,6 @@ Ox.VideoEditor = function(options, self) {
{id: resolution + '', title: resolution + 'p'} {id: resolution + '', title: resolution + 'p'}
); );
}); });
Ox.print('::::::',self.resolutions)
self.$keyboardShortcuts = $('<div>'); self.$keyboardShortcuts = $('<div>');
[ [
@ -612,7 +613,6 @@ Ox.VideoEditor = function(options, self) {
src: Ox.UI.getImageURL('symbolSet') src: Ox.UI.getImageURL('symbolSet')
}); });
that.$element = Ox.SplitPanel({ that.$element = Ox.SplitPanel({
elements: [ elements: [
{ {