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

- remove editItem from Ox.List

Browse source 
- use ArrayEditable for text too
This commit is contained in:
j 2012-01-04 22:57:32 +05:30
parent 66934d22a9
commit 093edd57d0
12 changed files with 180 additions and 403 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -16,6 +16,7 @@ Ox.ArrayEditable = function(options, self) {
items: [],
position: -1,
selected: '',
type: 'input',
width: 256
})
.options(options || {})
@ -40,10 +41,14 @@ Ox.ArrayEditable = function(options, self) {
function anyclick(e) {
var $target = $(e.target),
$parent = $target.parent();
$target.is(':not(input)') && that.gainFocus();
$parent = $target.parent(),
position = $parent.data('position');
!$target.is('.OxInput') && that.gainFocus();
if ($parent.is('.OxEditableElement')) {
selectItem($parent.data('position'));
selectItem(
e.metaKey && position == self.selected
? -1 : $parent.data('position')
);
} else {
selectNone();
}
@ -58,10 +63,11 @@ Ox.ArrayEditable = function(options, self) {
}
function doubleclick(e) {
var $parent = $(e.target).parent();
var $target = $(e.target),
$parent = $target.parent();
if ($parent.is('.OxEditableElement')) {
that.editItem(self.options.selected);
} else {
} else if(!$target.is('.OxInput')) {
that.triggerEvent('add');
}
}
@ -88,7 +94,8 @@ Ox.ArrayEditable = function(options, self) {
function renderItems() {
that.empty();
self.options.items.forEach(function(item, i) {
i && $('<span>')
i && self.options.type == 'input'
&& $('<span>')
.html(', ')
.appendTo(that);
self.$items[i] = Ox.Editable({
@ -99,13 +106,18 @@ Ox.ArrayEditable = function(options, self) {
tooltip: 'Click to select' + (
item.editable ? ', doubleclick to edit' : ''
),
value: item.value
type: self.options.type,
value: item.value,
width: self.options.type == 'input' ? 0 : self.options.width
})
.addClass(item.id == self.options.selected ? 'OxSelected' : '')
.data({position: i})
.bindEvent({
cancel: function(data) {
},
edit: function(data) {
that.triggerEvent('edit', data);
},
submit: function(data) {
submit(i, data.value);
@ -159,6 +171,8 @@ Ox.ArrayEditable = function(options, self) {
self.setOption = function(key, value) {
if (key == 'items') {
renderItems();
} else if (key == 'selected') {
that.selectItem(value);
}
}

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

@ -63,6 +63,7 @@ Ox.Editable = function(options, self) {
if (self.options.editing) {
self.options.editing = false;
// edit will toggle self.options.editing
edit();
}
@ -159,7 +160,7 @@ Ox.Editable = function(options, self) {
}
// fixme: why can't this be chained?
setTimeout(function() {
self.$input.focusInput(true);
self.$input.focusInput(self.options.type == 'input');
}, 0);
that.$tooltip && that.$tooltip.options({title: ''});
that.triggerEvent('edit', {editing: true});

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

@ -885,7 +885,7 @@ Ox.Input = function(options, self) {
var length = self.$input.val().length,
start = Ox.isNumber(arguments[0])
? (arguments[0] < 0 ? length + arguments[0] : arguments[0])
: 0,
: arguments[0] ? 0 : length,
stop = Ox.isNumber(arguments[1])
? (arguments[1] < 0 ? length + arguments[1] : arguments[1])
: Ox.isNumber(arguments[0]) ? arguments[0]

176
source/Ox.UI/js/List/Ox.ItemInput.js
View file

@ -1,176 +0,0 @@
// vim: et:ts=4:sw=4:sts=4:ft=javascript
'use strict';
/*@
Ox.ItemInput <f:Ox.Element> ItemInput Object
() -> <f> ItemInput Object
(options) -> <f> ItemInput Object
(options, self) -> <f> ItemInput Object
options <o> Options object
type <s|textarea> can be textarea
value <s> default value
height <n|300> height
width <n|100> width
self <o> shared private variable
cancel <!> triggered if cancel button is pressed
save <!> triggered if save button is pressed
@*/
Ox.ItemInput = function(options, self) {
self = self || {};
var that = Ox.Element({}, self)
.defaults({
type: 'textarea',
value: '',
height: 300,
width: 100
})
.options(options || {});
self.$input = Ox.Input({
changeOnKeypress: true,
height: self.options.height,
style: 'square',
type: self.options.type,
value: self.options.value,
width: self.options.width + 6
})
.bind({
mousedown: function(e) {
// keep mousedown from reaching list
e.stopPropagation();
}
})
.bindEvent({
change: function(data) {
self.options.height = data.value.split('\n').length * 13;
Ox.Log('List', 'HEIGHT', self.options.height)
self.$input.options({
height: self.options.height
});
that.css({
height: self.options.height + 16 + 'px'
});
that.parent().css({
height: self.options.height + 24 + 'px'
});
self.$bar.css({
marginTop: 8 + 'px'
});
}
})
.appendTo(that);
self.$bar = Ox.Bar({
size: 16
})
.css({
marginTop: self.options.height - 8 + 'px'
})
.appendTo(that);
Ox.Button({
style: 'symbol',
title: 'delete',
tooltip: 'Remove',
type: 'image'
})
.css({float: 'left'})
.bindEvent({
click: function() {
that.triggerEvent('remove');
}
})
.appendTo(self.$bar);
Ox.Button({
style: 'symbol',
title: 'check',
tooltip: 'Save',
type: 'image'
})
.css({float: 'right'})
.bindEvent({
click: function() {
that.triggerEvent('save', {
value: self.$input.value()
});
}
})
.appendTo(self.$bar);
Ox.Button({
style: 'symbol',
title: 'view',
tooltip: 'Preview',
type: 'image'
})
.css({float: 'right'})
.bindEvent({
click: function() {
that.triggerEvent('preview');
}
})
.appendTo(self.$bar);
Ox.Button({
style: 'symbol',
title: 'close',
tooltip: 'Cancel',
type: 'image'
})
.css({float: 'right'})
.bindEvent({
click: function() {
that.triggerEvent('cancel');
}
})
.appendTo(self.$bar);
/*
that.append(
$input = Ox.Input({
height: self.options.height,
style: 'square',
type: self.options.type,
value: self.options.value,
width: self.options.width + 6
})
.bind({
mousedown: function(e) {
// keep mousedown from reaching list
e.stopPropagation();
}
})
)
.append(Ox.Element()
.append(Ox.Button({type: 'text', title: 'Cancel'})
.css('width', '42%')
.bindEvent({
'click': function() {
that.triggerEvent('cancel');
}
}))
.append(Ox.Button({type: 'text', title: 'Save'})
.css('width', '42%')
.bindEvent({
'click': function() {
that.triggerEvent('save', {
value: $input.value()
});
}
}))
.css({
'margin-top': self.options.height-8,
'height': '16px',
'text-align': 'right',
})
);
Ox.Log('List', $input);
*/
return that;
};

50
source/Ox.UI/js/List/Ox.List.js
View file

@ -1538,56 +1538,6 @@ Ox.List = function(options, self) {
return that;
};
/*@
editItem <f> turn item into edit form
(pos) -> <u> edit item at position
pos <n> position of item to edit
@*/
that.editItem = function(pos) {
var $input,
item = self.options.items[pos],
$item = self.$items[pos],
width = $item.width(), // fixme: don't lookup in DOM
height = $item.height();
$item
.height(height + 8 + 16)
.empty()
.addClass('OxEdit');
$input = Ox.ItemInput({
type: 'textarea',
value: item.value,
height: height,
width: width
}).bindEvent({
cancel: cancel,
remove: remove,
save: submit
}).appendTo($item.$element);
/*
setTimeout(function() {
$input.gainFocus();
$input.focus();
});
*/
function cancel() {
$item.options('data', item);
that.triggerEvent('cancel', item);
loadItems();
}
function remove() {
that.triggerEvent('remove', item.id);
}
function submit(data) {
item.value = data.value;
//$input.loseFocus().remove();
// fixme: leaky, inputs remain in focus stack
$item.options('data', item);
that.triggerEvent('submit', item);
loadItems();
}
}
/*@
paste <f> paste data
(data) -> <o> the list

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

@ -26,7 +26,7 @@ Ox.AnnotationPanel = function(options, self) {
id: '',
items: [],
range: 'all',
selected: -1,
selected: '',
sort: 'position',
title: '',
type: 'text',
@ -78,12 +78,13 @@ Ox.AnnotationPanel = function(options, self) {
self.$annotations = Ox.Element();
} else if (self.options.type == 'place') {
self.$annotations = Ox.Element();
} else if (self.options.type == 'string') {
} else if (['string', 'text'].indexOf(self.options.type) > -1) {
self.$annotations = Ox.ArrayEditable({
editable: self.options.editable,
items: getAnnotations(),
sort: self.sort,
width: pandora.user.ui.annotationsSize - Ox.UI.SCROLLBAR_SIZE
width: self.options.width,
type: self.options.type == 'text' ? 'textarea' : 'input'
})
.bindEvent({
add: function(data) {
@ -94,63 +95,11 @@ Ox.AnnotationPanel = function(options, self) {
'delete': function(data) {
that.triggerEvent('remove', {id: data.id});
},
select: function(data) {
selectAnnotation({ids: [data.id]});
},
submit: updateAnnotation
});
} else if (self.options.type == 'text') {
self.$annotations = Ox.List({
construct: function(data) {
var $item = Ox.Element()
.addClass('OxAnnotation OxTarget')
.css({padding: '4px 4px 0 4px'})
.append(
Ox.Editable({
type: 'textarea',
width: self.options.width - 8,
value: data.value
})
.bindEvent({
edit: function() {
$item.removeClass('OxTarget');
},
submit: function(newData) {
$item.addClass('OxTarget');
updateAnnotation({
id: data.id,
value: newData.value
});
}
})
)
.append($('<div>').css({height: '4px'}));
return $item;
},
items: getAnnotations(),
max: 1,
min: 0,
sort: self.sort,
type: 'none', // fixme
unique: 'id'
})
.bindEvent({
cancel: function(item) {
//reset in/out points
selectAnnotation({ids: [item.id]});
},
open: function(data) {
return;
if (data.ids.length == 1) {
var pos = Ox.getIndexById(self.$annotations.options('items'), data.ids[0]);
self.$annotations.editItem(pos);
}
},
'delete': function(data) {
that.triggerEvent('remove', {id: data.ids[0]});
edit: function(data) {
that.triggerEvent('edit', data);
},
select: selectAnnotation,
submit: updateAnnotation
submit: editAnnotation
});
}
self.$annotations.appendTo(that.$content);
@ -185,15 +134,17 @@ Ox.AnnotationPanel = function(options, self) {
}
function selectAnnotation(data) {
var item = Ox.getObjectById(self.options.items, data.ids[0]);
item && that.triggerEvent('select', {
var item = Ox.getObjectById(self.options.items, data.id);
that.triggerEvent('select', Ox.extend({
id: data.id
}, item ? {
'in': item['in'],
'out': item.out,
'layer': self.options.id
});
out: item.out,
layer: self.options.id
} : {}));
}
function updateAnnotation(data) {
function editAnnotation(data) {
var item = Ox.getObjectById(self.options.items, data.id);
item.value = data.value;
that.triggerEvent('submit', item);
@ -221,7 +172,7 @@ Ox.AnnotationPanel = function(options, self) {
items: getAnnotations()
});
} else if (key == 'sort') {
self.$annotations.options({sort: value});
self.$annotations.options('sort', value);
}
};
@ -231,11 +182,7 @@ Ox.AnnotationPanel = function(options, self) {
that.addItem = function(item) {
var pos = 0;
self.options.items.splice(pos, 0, item);
if (self.$annotations.addItem) {
self.$annotations.addItem(pos, item);
} else {
self.$annotations.addItems(pos, [item]);
}
self.$annotations.editItem(pos);
};
@ -243,7 +190,7 @@ Ox.AnnotationPanel = function(options, self) {
deselectItems <f> deselectItems
@*/
that.deselectItems = function() {
self.$annotations.options('selected', []);
self.$annotations.options('selected', '');
};
/*@

10
source/Ox.UI/js/Video/Ox.BlockVideoTimeline.js
View file

@ -16,6 +16,7 @@ Ox.BlockVideoTimeline = function(options, self) {
results: [],
showPointMarkers: false,
showSubtitles: false,
state: 'default',
subtitles: [],
width: 0
})
@ -58,7 +59,7 @@ Ox.BlockVideoTimeline = function(options, self) {
subtitles: self.options.showSubtitles ? self.options.subtitles : [],
timeline: self.options.getImageURL,
width: Math.round(self.options.duration),
type: self.options.type
type: 'editor'
});
Ox.loop(self.lines, function(i) {
@ -217,6 +218,11 @@ Ox.BlockVideoTimeline = function(options, self) {
updateTimelines();
}
function setState() {
self.$image.options({state: self.options.state});
updateTimelines();
}
function setWidth() {
self.lines = getLines();
setCSS();
@ -266,6 +272,8 @@ Ox.BlockVideoTimeline = function(options, self) {
setPositionMarker();
} else if (key == 'results') {
setResults();
} else if (key == 'state') {
setState();
} else if (key == 'width') {
setWidth();
}

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

@ -6,11 +6,10 @@ Ox.SmallVideoTimelineImage = function(options, self) {
var that = Ox.Element({}, self)
.defaults({
duration: 0,
editing: false,
'in': 0,
out: 0,
results: [],
selected: false,
state: 'default',
subtitles: [],
timeline: '',
width: 256,
@ -102,8 +101,8 @@ Ox.SmallVideoTimelineImage = function(options, self) {
.appendTo(that.$element);
function getImageURL(image, callback) {
var width = image == 'results' || image == 'selection' ?
self.options.width : self.imageWidth,
var width = image == 'results' || image == 'selection'
? self.options.width : self.imageWidth,
height = self.imageHeight,
canvas = $('<canvas>')
.attr({
@ -125,9 +124,10 @@ Ox.SmallVideoTimelineImage = function(options, self) {
) + 1;
Ox.loop(left, right, function(x) {
Ox.loop(top, bottom, function(y) {
var alpha = self.options.type == 'player' ? 128
: (y == top || y == bottom - 1) ? 255 : 64,
color = Ox.Theme[self.theme].timeline.result,
var alpha = self.options.type == 'editor'
&& (y == top || y == bottom - 1) ? 192 : 64,
color = [2, 3, 6].indexOf(x % 4 + y % 4) > -1
? [0, 0, 0] : [255, 255, 0],
index = x * 4 + y * 4 * width;
data[index] = color[0];
data[index + 1] = color[1];
@ -145,15 +145,14 @@ Ox.SmallVideoTimelineImage = function(options, self) {
) + 1,
top = 0,
bottom = height,
rgb = self.options.editing ? [128, 255, 255] : [255, 255, 255];
rgb = self.options.state == 'editing' ? [[0, 0, 128], [128, 128, 255]]
: self.options.state == 'selected' ? [[0, 128, 0], [128, 255, 128]]
: [[0, 0, 0], [255, 255, 255]];
Ox.loop(left, right, function(x) {
Ox.loop(top, bottom, function(y) {
var alpha = self.options.type == 'player' ? 128
: (y == top || y == bottom - 1) ? 255 : 64,
color = Ox.Theme[self.theme].timeline[
self.options.editing ? 'editing'
: self.options.selected ? 'selected' : 'default'
],
var alpha = self.options.type == 'editor'
&& (y == top || y == bottom - 1) ? 192 : 64,
color = rgb[[2, 3, 6].indexOf(x % 4 + y % 4) > -1 ? 0 : 1],
index = x * 4 + y * 4 * width;
data[index] = color[0];
data[index + 1] = color[1];
@ -209,6 +208,10 @@ Ox.SmallVideoTimelineImage = function(options, self) {
self.$subtitles.attr({
src: getImageURL('subtitles')
});
} else if (key == 'state') {
self.$selection.attr({
src: getImageURL('selection')
});
} else if (key == 'width') {
that.css({width: value + 'px'});
self.$results

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

@ -40,8 +40,10 @@ Ox.VideoEditor = function(options, self) {
posterFrame: 0,
posterFrameControls: false,
resolution: 0,
selected: '',
showAnnotations: false,
showLargeTimeline: true,
state: 'default',
subtitles: [],
tooltips: false,
videoRatio: 16/9,
@ -284,6 +286,7 @@ Ox.VideoEditor = function(options, self) {
results: find(self.options.find),
showPointMarkers: true,
showSubtitles: true,
state: self.options.state,
subtitles: self.options.subtitles,
videoId: self.options.videoId,
width: self.sizes.timeline[1].width
@ -313,6 +316,7 @@ Ox.VideoEditor = function(options, self) {
out: self.options.out,
position: self.options.position,
range: self.options.annotationsRange,
// selected: self.options.selected,
sort: self.options.annotationsSort,
width: self.options.annotationsSize - Ox.UI.SCROLLBAR_SIZE
}, layer)
@ -324,6 +328,9 @@ Ox.VideoEditor = function(options, self) {
data.out = self.options.out;
that.triggerEvent('addannotation', data);
},
edit: function(data) {
setState(data.editing ? 'editing' : 'selected');
},
remove: function(data) {
that.triggerEvent('removeannotation', {
id: data.id,
@ -331,14 +338,14 @@ Ox.VideoEditor = function(options, self) {
});
},
select: function(data) {
if(data.id) {
self.options.layers.forEach(function(layer_, i_) {
if (i_ != i) {
// FIXME: the way AnnotationPanel is set up,
// it does not actually have that method
// self.$annotationPanel[i_].deselectItems();
self.$annotationPanel[i_].deselectItems();
}
});
selectAnnotation(data);
}
},
submit: editAnnotation
})
@ -671,7 +678,8 @@ Ox.VideoEditor = function(options, self) {
})
.appendTo(self.$annotationsbar);
that.$element = Ox.SplitPanel({
that.setElement(
Ox.SplitPanel({
elements: [
{
element: Ox.SplitPanel({
@ -714,7 +722,8 @@ Ox.VideoEditor = function(options, self) {
}
],
orientation: 'horizontal'
});
})
);
// we need a timeout so that a chained bindEvent
// actually catches the event
@ -920,10 +929,13 @@ Ox.VideoEditor = function(options, self) {
}
function selectAnnotation(data) {
//setPosition(data['in']);
self.options.annotationsRange != 'position' && setPosition(data['in']);
if (data.id) {
setPoint('in', data['in']);
setPoint('out', data.out);
}
setState(data.id ? 'selected' : 'default');
}
function select(type) {
self.options.points = getPoints(type);
@ -933,6 +945,9 @@ Ox.VideoEditor = function(options, self) {
function setPoint(point, position) {
var otherPoint = point == 'in' ? 'out' : 'in';
self.options[point] = position;
if (self.options.state == 'selected') {
setState('default');
}
self.$player.forEach(function($player) {
$player.options(point, self.options[point]);
});
@ -1000,6 +1015,11 @@ Ox.VideoEditor = function(options, self) {
});
}
function setState(state) {
self.options.state = state;
self.$timeline[1].options({state: state});
}
function submitFindInput(value, hasPressedEnter) {
self.options.find = value;
self.results = find(self.options.find);

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

@ -340,10 +340,6 @@ Forms
background: -webkit-linear-gradient(top, rgb(160, 160, 160), rgb(192, 192, 192));
}
.OxThemeClassic .OxEditableElement.OxSelected {
background: rgb(208, 208, 208);
}
/*
================================================================================
Images
@ -743,6 +739,13 @@ Video
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 1), rgba(192, 192, 192, 1));
}
.OxThemeClassic .OxAnnotationPanel .OxEditableElement.OxSelected {
background: rgb(192, 255, 192);
}
.OxThemeClassic .OxAnnotationPanel .OxEditableElement input {
background: rgb(192, 192, 255);
}
/*
================================================================================
Miscellaneous
@ -775,7 +778,10 @@ Miscellaneous
-webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.OxThemeClassic ::selection {
.OxThemeClassic ::selection,
.OxThemeClassic ::-moz-selection,
.OxThemeClassic ::-o-selection,
.OxThemeClassic ::-webkit-selection {
background: rgb(192, 192, 192);
//color: rgb(255, 255, 255);
}

6
source/Ox.UI/themes/modern/css/modern.css
View file

@ -760,6 +760,12 @@ Video
//display: none;
}
.OxThemeModern .OxAnnotationPanel .OxEditableElement.OxSelected {
background: rgb(0, 128, 0);
}
.OxThemeModern .OxAnnotationPanel .OxEditableElement input {
background: rgb(64, 64, 192);
}
/*
================================================================================

18
source/Ox/js/Collection.js
View file

@ -104,8 +104,8 @@ Ox.filter <f> Filters a collection by a given condition
objects and strings.
> Ox.filter([2, 1, 0], function(v, i) { return v == i; })
[1]
> Ox.keys(Ox.filter({a: 'c', b: 'b', c: 'a'}, function(v, k) { return v == k; }))
['b']
> Ox.filter({a: 'c', b: 'b', c: 'a'}, function(v, k) { return v == k; })
{b: 'b'}
> Ox.filter(' foo bar ', function(v) { return v != ' '; })
'foobar'
@*/
@ -113,14 +113,14 @@ Ox.filter <f> Filters a collection by a given condition
Ox.filter = function(col, fn) {
var type = Ox.typeOf(col),
ret = type == 'array' ? [] : type == 'object' ? {} : '';
Ox.forEach(col, function(v, k) {
if (fn(v, k)) {
Ox.forEach(col, function(val, key) {
if (fn(val, key)) {
if (type == 'array') {
ret.push(v);
ret.push(val);
} else if (type == 'object') {
ret[k] = v;
ret[key] = val;
} else {
ret += v;
ret += val;
}
}
});
@ -384,7 +384,7 @@ Ox.last = function(arr, val) {
Ox.len <f> Returns the length of an array, function, object or string
Not to be confused with <code>Ox.length</code>, which is the
<code>length</code> property of the <code>Ox</code> function
(<code>1</code>).
(<code>1</code>). // FIXME: 1 becomes 67 in DocPanel
> Ox.len([1, 2, 3])
3
> Ox.len([,])
@ -455,7 +455,6 @@ Ox.makeArray <f> Takes an array-like object and returns a true array
> Ox.makeArray({0: "f", 1: "o", 2: "o", length: 3})
["f", "o", "o"]
@*/
Ox.makeArray = /MSIE/.test(navigator.userAgent)
? function(col) {
var i, len, ret = [];
@ -632,7 +631,6 @@ Ox.shuffle <f> Randomizes the order of values within a collection
> Ox.shuffle('123').length
3
@*/
Ox.shuffle = function(col) {
var keys, ret, type = Ox.typeOf(col), values;
function sort() {