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

update video editor (editables)

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

8
demos/arrayeditable/js/arrayeditable.js
View file

@ -1,14 +1,16 @@
Ox.load('UI', function() {
var items = [
{editable: true, value: 'The <b><i><u>firefox.</u></i></b> jumps over the lazy fox.'},
{editable: true, value: 'The lazy fox jumps over the <a href="http://mozilla.org">firefox</a>.'}
{editable: true, value: 'The firefox jumps over the lazy fox.'},
{editable: true, value: 'The <b><i><u>lazy fox</u></i></b><br>\njumps over the<br><br><a href="http://mozilla.org">firefox</a>.'}
],
$box = Ox.Element()
.css({width: '256px', height: '512px', padding: '8px', background: 'rgb(224, 224, 224)'})
.appendTo(Ox.$body),
$arrayEditableInput = Ox.ArrayEditable({
items: items
items: items.map(function(item) {
return {editable: item.editable, value: Ox.encodeHTML(item.value)};
})
})
.css({background: 'rgb(240, 240, 240)', boxShadow: '0 0 1px black'})
.appendTo($box),

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'})

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

@ -747,14 +747,22 @@ Video
.OxThemeClassic .OxAnnotationFolder .OxEditableElement.OxPlaceholder .OxValue {
color: rgb(160, 160, 160);
}
.OxThemeClassic .OxAnnotationFolder .OxEditableElement.OxSelected {
.OxThemeClassic .OxAnnotationFolder .OxArrayEditable .OxEditableElement.OxSelected {
background: rgb(192, 192, 255);
}
.OxThemeClassic .OxAnnotationFolder .OxArrayEditableInput .OxEditableElement.OxSelected {
box-shadow: 0 0 1px rgb(64, 64, 64);
}
.OxThemeClassic .OxAnnotationFolder .OxArrayEditableTextarea .OxEditableElement.OxEditing {
background: rgb(160, 224, 160);
}
.OxThemeClassic .OxAnnotationFolder .OxArrayEditable .OxInput.OxFocus {
box-shadow: none;
}
.OxThemeClassic .OxAnnotationFolder .OxEditableElement input {
background: rgb(160, 224, 160);
color: rgb(0, 0, 0);
box-shadow: 0 0 1px rgb(64, 64, 64);
//box-shadow: 0 0 1px rgb(64, 64, 64);
}
.OxThemeClassic .OxAnnotationFolder .OxEditableElement textarea {
background: rgb(160, 224, 160);

2
source/Ox/js/HTML.js
View file

@ -67,7 +67,7 @@ Ox.parseHTML = (function() {
},
'*': function(tag) {
var ret = {};
ret['<(/?' + tag + ')>'] = '<{1}>';
ret['<(/?' + tag + ') ?/?>'] = '<{1}>';
return ret;
}
},

4
source/Ox/js/String.js
View file

@ -25,12 +25,14 @@ Ox.clean <f> Remove leading, trailing and double whitespace from a string
"foo bar"
> Ox.clean(" foo \n bar ")
"foo\nbar"
> Ox.clean(" \nfoo\n\nbar\n ")
"foo\nbar"
> Ox.clean(" foo\tbar ")
"foo bar"
@*/
Ox.clean = function(str) {
return Ox.map(str.split('\n'), function(str) {
return Ox.trim(str.replace(/\s+/g, ' '));
return Ox.trim(str.replace(/\s+/g, ' ')) || null;
}).join('\n');
};