sanj/oxjs
1
0
Fork 0
forked from 0x2620/oxjs
Code Pull requests Activity

update video editor (editables)

Browse source
This commit is contained in:
rlx 2012-01-16 16:52:34 +05:30
commit 408ebf54cb
7 changed files with 55 additions and 51 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -32,7 +32,11 @@ Ox.ArrayEditable = function(options, self) {
doubleclick: doubleclick,
key_delete: deleteItem,
key_enter: function() {
that.editItem();
// make sure the newline does
// not end up in the textarea
setTimeout(function() {
that.editItem();
}, 0);
},
key_escape: selectNone,
key_down: self.options.type == 'input' ? selectLast : selectNext,

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

@ -58,9 +58,7 @@ Ox.Editable = function(options, self) {
self.css = {};
self.$value = Ox.Element(self.options.type == 'input' ? '<span>' : '<div>')
.addClass('OxValue')
//.css({background: 'red'})
.html(formatValue())
//[self.options.editing ? 'hide' : 'show']()
.appendTo(that);
if (self.options.editing) {
@ -84,6 +82,7 @@ Ox.Editable = function(options, self) {
function cancel() {
self.options.editing = false;
that.removeClass('OxEditing');
self.options.value = self.originalValue;
self.$input.value(formatInputValue()).hide();
self.$test.html(formatTestValue());
@ -92,29 +91,20 @@ Ox.Editable = function(options, self) {
}
function change(data) {
setTimeout(function() {
var height, width;
self.options.value = data.value;
self.$value.html(formatValue());
self.$test.html(formatTestValue());
setSizes();
}, 25);
self.options.value = parseValue(data.value);
self.$value.html(formatValue());
self.$test.html(formatTestValue());
setSizes();
}
function edit() {
Ox.print('E EDIT! editable editing', self.options.editable, self.options.editing)
var height, width;
if (self.options.editable && !self.options.editing) {
self.options.editing = true;
that.addClass('OxEditing');
self.originalValue = self.options.value;
self.$value.hide();
Ox.Log('Form', 'H:::', self.options.height, height)
if (!self.$test) {
self.$test = self.$value.$element.clone()
.css(Ox.extend({display: 'inline-block'}, self.css))
.html(formatTestValue())
.css({background: 'rgb(192, 192, 192)'})
.appendTo(that.$element);
if (!self.$input) {
self.$input = Ox.Input({
changeOnKeypress: true,
element: self.options.type == 'input' ? '<span>' : '<div>',
@ -124,15 +114,18 @@ Ox.Editable = function(options, self) {
})
.css(self.css)
.bindEvent({
blur: self.options.submitOnBlur ? submit : blur,
cancel: cancel,
change: change,
submit: submit
})
.appendTo(that.$element);
self.$input.bindEvent({
blur: self.options.submitOnBlur ? submit : blur
});
self.$input.find('input').css(self.css);
self.$test = self.$value.$element.clone()
.css(Ox.extend({display: 'inline-block'}, self.css))
.html(formatTestValue())
.css({background: 'rgb(192, 192, 192)'})
.appendTo(that.$element);
}
self.minWidth = 8;
self.maxWidth = that.parent().width();
@ -162,35 +155,34 @@ Ox.Editable = function(options, self) {
}
function formatTestValue() {
return self.options.type == 'input'
? Ox.encodeHTML(self.options.value) //.replace(/ /g, '&nbsp;')
: Ox.encodeHTML(self.options.value || '&nbsp;')
.replace(/\n$/, '\n&nbsp;')
.replace(/\n/g, '<br/>')
/*
: Ox.parseHTML(self.options.value || '&nbsp;')
.replace(/(\n|<br\/?>)$/, '<br/>&nbsp;');
*/
var value = Ox.encodeHTML(self.$input.options('value'));
return !value ? '&nbsp;'
: self.options.type == 'input'
? value.replace(/ /g, '&nbsp;')
: value.replace(/\n$/, '\n ')
.replace(/ /g, ' &nbsp;')
.replace(/(^ | $)/, '&nbsp;')
.replace(/\n/g, '<br/>')
}
function formatValue() {
Ox.print('HUH?', self.options.value, self.options.format);
var value = self.options.value;
if (self.options.value === '' && self.options.placeholder) {
value = self.options.placeholder;
} else if (self.options.format) {
value = self.options.format(self.options.value)
} else if (self.options.type == 'input') {
Ox.print('HELLO??')
value = Ox.encodeHTML(self.options.value);
}
return value;
}
function parseValue() {
return self.options.type == 'input'
? Ox.encodeHTML(self.$input.value())
: Ox.parseHTML(self.$input.value());
var value = Ox.clean(
self.$input.value().replace(/\n\n+/g, '\0')
).replace(/\0/g, '\n\n').trim();
return (self.options.type == 'input'
? Ox.encodeHTML(value)
: Ox.parseHTML(value)
);
}
function setSizes() {
@ -198,7 +190,6 @@ Ox.Editable = function(options, self) {
self.$test.show();
height = self.options.height || Ox.limit(self.$test.height(), self.minHeight, self.maxHeight);
width = self.options.width || Ox.limit(self.$test.width(), self.minWidth, self.maxWidth);
Ox.print('stH', self.$test.height(), self.options.value)
self.$test.hide();
self.$input.options({
width: width,
@ -212,14 +203,12 @@ Ox.Editable = function(options, self) {
function submit() {
self.options.editing = false;
//self.options.value = parseValue();
that.removeClass('OxEditing');
self.$input.value(formatInputValue()).hide();
self.$test.html(formatTestValue());
self.$value.html(formatValue()).show();
that.$tooltip && that.$tooltip.options({title: self.options.tooltip});
that.triggerEvent('submit', {
value: self.options.value
});
that.triggerEvent('submit', {value: self.options.value});
}
self.setOption = function(key, value) {

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

@ -99,7 +99,6 @@ Ox.AnnotationFolder = function(options, self) {
if (self.widget) {
self.widgetSize = self.options.showWidget * self.options.widgetSize;
Ox.print('FOO', self.widgetSize, self.options.showWidget, self.options.widgetSize)
self.$outer = Ox.Element()
.css({
display: 'table-cell',
@ -179,7 +178,7 @@ Ox.AnnotationFolder = function(options, self) {
separator: ';',
sort: self.sort,
submitOnBlur: false,
width: self.options.type == 'text' ? self.options.width + 8 : self.options.width,
width: self.options.width,
type: self.options.type == 'text' ? 'textarea' : 'input'
})
//.css({marginTop: '256px'})