forked from 0x2620/oxjs
updating ox.js
This commit is contained in:
rlx
parent
28535be814
commit
d7fb9e3dad
6 changed files with 715 additions and 335 deletions
634
build/js/ox.js
634
build/js/ox.js
File diff suppressed because it is too large
Load diff
|
|
@ -3009,11 +3009,13 @@ requires
|
|||
|
||||
// fixme: is there a better way than this one?
|
||||
// should at least go into ox.ui.theme.foo.js
|
||||
// probably better: divs in the background
|
||||
if (self.options.type == 'textarea') {
|
||||
$.extend(self, {
|
||||
colors: Ox.theme() == 'classic' ?
|
||||
[208, 232, 244] :
|
||||
[0, 16, 32],
|
||||
//[0, 16, 32],
|
||||
[32, 48, 64],
|
||||
colorstops: [8 / self.options.height, self.options.height - 8 / self.options.height]
|
||||
});
|
||||
self.$input.css({
|
||||
|
|
@ -6592,7 +6594,6 @@ requires
|
|||
});
|
||||
}
|
||||
|
||||
Ox.print('OxList', self.options)
|
||||
if (Ox.isArray(self.options.items)) {
|
||||
loadItems();
|
||||
} else {
|
||||
|
|
@ -7204,7 +7205,7 @@ requires
|
|||
editable = $cell.hasClass('OxEditable') && !$cell.hasClass('OxEdit');
|
||||
if (clickable || editable) {
|
||||
// click on a clickable or editable cell
|
||||
triggerCellEvent(self.$items[pos], $cell, clickable ? 'click' : 'edit');
|
||||
triggerClickEvent(clickable ? 'click' : 'edit', self.$items[pos], $cell);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -7222,9 +7223,9 @@ requires
|
|||
clickable, editable,
|
||||
clickTimeout = false,
|
||||
selectTimeout = false,
|
||||
$cell,
|
||||
$element,
|
||||
hadFocus = that.hasFocus();
|
||||
Ox.print('mousedown', pos)
|
||||
//Ox.print('mousedown', pos)
|
||||
that.gainFocus();
|
||||
if (pos > -1) {
|
||||
if (!self.clickTimeout) {
|
||||
|
|
@ -7247,16 +7248,16 @@ requires
|
|||
// of a double click on multiple items
|
||||
selectTimeout = true;
|
||||
} else if (self.options.type == 'text' && hadFocus) {
|
||||
$cell = findCell(e);
|
||||
if ($cell) {
|
||||
clickable = $cell.hasClass('OxClickable');
|
||||
editable = $cell.hasClass('OxEditable') && !$cell.hasClass('OxEdit');
|
||||
if (clickable || editable) {
|
||||
if (self.options.sortable && self.listLength > 1) {
|
||||
clickTimeout = true;
|
||||
} else {
|
||||
triggerCellEvent(self.$items[pos], $cell, clickable ? 'click' : 'edit');
|
||||
}
|
||||
var $cell = findCell(e),
|
||||
$element = $cell || self.$items[pos];
|
||||
clickable = $element.hasClass('OxClickable');
|
||||
editable = $element.hasClass('OxEditable') && !$element.hasClass('OxEdit');
|
||||
if (clickable || editable) {
|
||||
if (self.options.sortable && self.listLength > 1) {
|
||||
clickTimeout = true;
|
||||
} else {
|
||||
!$cell && that.editItem(pos);
|
||||
triggerClickEvent(clickable ? 'click' : 'edit', self.$items[pos], $cell);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -7278,7 +7279,7 @@ requires
|
|||
clearTimeout(self.dragTimeout);
|
||||
self.dragTimeout = 0;
|
||||
if (clickTimeout) {
|
||||
triggerCellEvent(self.$items[pos], $cell, clickable ? 'click' : 'edit');
|
||||
triggerClickEvent(clickable ? 'click' : 'edit', self.$items[pos], $cell);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
@ -7521,12 +7522,13 @@ requires
|
|||
}
|
||||
}
|
||||
|
||||
function triggerCellEvent($item, $cell, event) {
|
||||
function triggerClickEvent(event, $item, $cell) {
|
||||
// event can be 'click' or 'edit'
|
||||
that.triggerEvent(event, {
|
||||
id: $item.data('id'),
|
||||
that.triggerEvent(event, $.extend({
|
||||
id: $item.data('id')
|
||||
}, $cell ? {
|
||||
key: $cell.attr('class').split('OxColumn')[1].split(' ')[0].toLowerCase()
|
||||
});
|
||||
} : {}));
|
||||
}
|
||||
|
||||
function triggerSelectEvent() {
|
||||
|
|
@ -7678,7 +7680,45 @@ requires
|
|||
self.options.items.splice.apply(self.options.items, $.merge([pos, 0], items));
|
||||
self.$items.splice.apply(self.$items, $.merge([pos, 0], $items));
|
||||
updatePositions();
|
||||
Ox.print('s.o.i', self.options.items, 's.$i', $.map(self.$items, function(v) {return v.data()}))
|
||||
}
|
||||
|
||||
that.editItem = function(pos) {
|
||||
var $input,
|
||||
item = self.options.items[pos],
|
||||
$item = self.$items[pos];
|
||||
Ox.print('****', $item)
|
||||
var html = $item.$element.html(),
|
||||
width = $item.width(), // fixme: don't lookup in DOM
|
||||
height = $item.height();
|
||||
$item
|
||||
.height(height + 8)
|
||||
.empty()
|
||||
.addClass('OxEdit');
|
||||
$input = new Ox.Input({
|
||||
height: height,
|
||||
style: 'square',
|
||||
type: 'textarea',
|
||||
value: item.value,
|
||||
width: width + 6
|
||||
})
|
||||
.bind({
|
||||
mousedown: function(e) {
|
||||
// keep mousedown from reaching list
|
||||
e.stopPropagation();
|
||||
}
|
||||
})
|
||||
.bindEvent({
|
||||
blur: submit,
|
||||
})
|
||||
.appendTo($item.$element)
|
||||
.gainFocus();
|
||||
function submit() {
|
||||
item.value = $input.value();
|
||||
//$input.loseFocus().remove();
|
||||
// fixme: leaky, inputs remain in focus stack
|
||||
$item.options('data', item);
|
||||
that.triggerEvent('submit', item);
|
||||
}
|
||||
}
|
||||
|
||||
that.clearCache = function() { // fixme: was used by TextList resizeColumn, now probably no longer necessary
|
||||
|
|
@ -7816,7 +7856,7 @@ requires
|
|||
|
||||
function constructItem(update) {
|
||||
var $element = self.options.construct(self.options.data)
|
||||
.addClass('OxItem OxDeleteme' + self.options.data[self.options.unique])
|
||||
.addClass('OxItem')
|
||||
.attr({
|
||||
draggable: self.options.draggable
|
||||
})
|
||||
|
|
@ -10707,19 +10747,25 @@ requires
|
|||
self.$annotations = new Ox.List({
|
||||
construct: function(data) {
|
||||
return new Ox.Element('div')
|
||||
.addClass('OxAnnotation OxTarget')
|
||||
.html(data.value);
|
||||
.addClass('OxAnnotation OxEditable OxTarget')
|
||||
.html(Ox.parseHTML(data.value));
|
||||
},
|
||||
items: $.map(self.options.items, function(v, i) {
|
||||
return {
|
||||
id: i + '',
|
||||
value: v.value.replace(/\n/g, '<br/>')
|
||||
id: v.id || i + '',
|
||||
value: v.value
|
||||
};
|
||||
}),
|
||||
unique: 'id'
|
||||
})
|
||||
.bindEvent({
|
||||
select: selectAnnotation
|
||||
open: function(event, data) {
|
||||
if (data.ids.length == 1)
|
||||
self.$annotations.editItem(data.ids[0]);
|
||||
},
|
||||
//edit: editAnnotation,
|
||||
select: selectAnnotation,
|
||||
submit: updateAnnotation
|
||||
})
|
||||
.appendTo(that.$content);
|
||||
|
||||
|
|
@ -10737,25 +10783,32 @@ requires
|
|||
.appendTo(self.$annotations);
|
||||
});
|
||||
*/
|
||||
|
||||
function selectAnnotation(event, data) {
|
||||
var pos = parseInt(data.ids[0]),
|
||||
/* done in list now
|
||||
function editAnnotation(event, data) {
|
||||
return;
|
||||
var pos = parseInt(data.id),
|
||||
item = self.options.items[pos];
|
||||
if (pos != self.selected) {
|
||||
that.triggerEvent('select', {
|
||||
'in': item.in,
|
||||
'out': item.out
|
||||
});
|
||||
} else {
|
||||
self.$annotation[pos].replaceWith(
|
||||
new Ox.Input({
|
||||
height: 128,
|
||||
type: 'textarea',
|
||||
value: item.value,
|
||||
width: self.options.width
|
||||
})
|
||||
);
|
||||
}
|
||||
self.$annotation[pos].html(
|
||||
new Ox.Input({
|
||||
height: 128,
|
||||
type: 'textarea',
|
||||
value: item.value,
|
||||
width: self.options.width
|
||||
})
|
||||
);
|
||||
}
|
||||
*/
|
||||
function selectAnnotation(event, data) {
|
||||
var item = Ox.getObjectById(self.options.items, data.ids[0]);
|
||||
that.triggerEvent('select', {
|
||||
'in': item.in,
|
||||
'out': item.out
|
||||
});
|
||||
}
|
||||
function updateAnnotation(event, data) {
|
||||
var item = Ox.getObjectById(self.options.items, data.id);
|
||||
item.value = data.value;
|
||||
that.triggerEvent('submit', item);
|
||||
}
|
||||
|
||||
function togglePanel() {
|
||||
|
|
@ -10796,6 +10849,7 @@ requires
|
|||
$images: [],
|
||||
$lines: [],
|
||||
$markerPoint: [],
|
||||
$selection: [],
|
||||
$subtitles: [],
|
||||
hasSubtitles: self.options.subtitles.length,
|
||||
height: 16,
|
||||
|
|
@ -10845,6 +10899,7 @@ requires
|
|||
});
|
||||
|
||||
function addLine(i) {
|
||||
// fixme: get URLs once, not once for every line
|
||||
self.$lines[i] = new Ox.Element('div')
|
||||
.css({
|
||||
top: i * (self.height + self.margin) + 'px',
|
||||
|
|
@ -10872,6 +10927,23 @@ requires
|
|||
})
|
||||
.appendTo(self.$lines[i].$element);
|
||||
}
|
||||
if (self.options.points[0] != self.options.points[1]) {
|
||||
addSelection[i];
|
||||
}
|
||||
}
|
||||
|
||||
function addSelection(i) {
|
||||
self.selectionImageURL = getSelectionImageURL();
|
||||
self.$selection[i] && self.$selection[i].remove();
|
||||
self.$selection[i] = $('<img>')
|
||||
.addClass('OxTimelineSmallSelection')
|
||||
.attr({
|
||||
src: self.selectionImageURL
|
||||
})
|
||||
.css({
|
||||
marginLeft: (-i * self.options.width) + 'px'
|
||||
})
|
||||
.appendTo(self.$lines[i].$element);
|
||||
}
|
||||
|
||||
function getPosition(e) {
|
||||
|
|
@ -10879,6 +10951,37 @@ requires
|
|||
return (e.offsetX ? e.offsetX : e.clientX - $(e.target).offset().left);
|
||||
}
|
||||
|
||||
function getSelectionImageURL() {
|
||||
var height = 18,
|
||||
width = Math.ceil(self.options.duration),
|
||||
$canvas = $('<canvas>')
|
||||
.attr({
|
||||
height: height,
|
||||
width: width
|
||||
}),
|
||||
canvas = $canvas[0],
|
||||
context = canvas.getContext('2d'),
|
||||
imageData = context.createImageData(width, height),
|
||||
data = imageData.data,
|
||||
points = $.map(self.options.points, function(v, i) {
|
||||
return Math.round(v) + i;
|
||||
}),
|
||||
top = 0,
|
||||
bottom = 18;
|
||||
$.each(Ox.range(points[0], points[1]), function(i, x) {
|
||||
$.each(Ox.range(top, bottom), function(i, y) {
|
||||
var color = (y == top || y == bottom - 1) ? [255, 255, 255, 255] : [255, 255, 255, 64],
|
||||
index = x * 4 + y * 4 * width;
|
||||
data[index] = color[0];
|
||||
data[index + 1] = color[1];
|
||||
data[index + 2] = color[2];
|
||||
data[index + 3] = color[3]
|
||||
});
|
||||
});
|
||||
context.putImageData(imageData, 0, 0);
|
||||
return canvas.toDataURL();
|
||||
}
|
||||
|
||||
function getSubtitle(position) {
|
||||
var subtitle = null;
|
||||
$.each(self.options.subtitles, function(i, v) {
|
||||
|
|
@ -10903,17 +11006,20 @@ requires
|
|||
imageData = context.createImageData(width, height),
|
||||
data = imageData.data;
|
||||
$.each(self.options.subtitles, function(i, v) {
|
||||
var color = self.options.matches.indexOf(i) > -1 ? [255, 255, 0] : [255, 255, 255]
|
||||
$.each(Ox.range(
|
||||
Math.round(v['in']),
|
||||
Math.round(v['out']) + 1
|
||||
), function(i, x) {
|
||||
$.each(Ox.range(0, 18), function(i, y) {
|
||||
var index = x * 4 + y * 4 * width;
|
||||
//var color = self.options.matches.indexOf(i) > -1 ? [255, 255, 0] : [255, 255, 255]
|
||||
var inPoint = Math.round(v.in),
|
||||
outPoint = Math.round(v.out) + 1,
|
||||
lines = v.value.split('\n').length,
|
||||
bottom = 15,
|
||||
top = bottom - lines - 2;
|
||||
$.each(Ox.range(inPoint, outPoint), function(i, x) {
|
||||
$.each(Ox.range(top, bottom), function(i, y) {
|
||||
var color = (y == top || y == bottom - 1) ? [0, 0, 0] : [255, 255, 255],
|
||||
index = x * 4 + y * 4 * width;
|
||||
data[index] = color[0];
|
||||
data[index + 1] = color[1];
|
||||
data[index + 2] = color[2];
|
||||
data[index + 3] = (y == 0 || y == 17) ? 255 : 128
|
||||
data[index + 3] = 128
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -10953,7 +11059,8 @@ requires
|
|||
var $target = $(e.target);
|
||||
if (
|
||||
$target.hasClass('OxTimelineSmallImage') ||
|
||||
$target.hasClass('OxTimelineSmallSubtitles')
|
||||
$target.hasClass('OxTimelineSmallSubtitles') ||
|
||||
$target.hasClass('OxTimelineSmallSelection')
|
||||
) {
|
||||
self.options.position = getPosition(e);
|
||||
setPosition();
|
||||
|
|
@ -10974,7 +11081,8 @@ requires
|
|||
subtitle;
|
||||
if (
|
||||
$target.hasClass('OxTimelineSmallImage') ||
|
||||
$target.hasClass('OxTimelineSmallSubtitles')
|
||||
$target.hasClass('OxTimelineSmallSubtitles') ||
|
||||
$target.hasClass('OxTimelineSmallSelection')
|
||||
) {
|
||||
position = getPosition(e),
|
||||
subtitle = getSubtitle(position);
|
||||
|
|
@ -11004,7 +11112,7 @@ requires
|
|||
}
|
||||
|
||||
function setMarkerPoint(i) {
|
||||
var position = self.options.points[i];
|
||||
var position = Math.round(self.options.points[i]);
|
||||
self.$markerPoint[i]
|
||||
.css({
|
||||
left: (position % self.options.width) + 'px',
|
||||
|
|
@ -11049,12 +11157,19 @@ requires
|
|||
setMarkerPoint(1);
|
||||
}
|
||||
|
||||
function updateSelection() {
|
||||
self.$lines.forEach(function($line, i) {
|
||||
addSelection(i);
|
||||
});
|
||||
}
|
||||
|
||||
self.onChange = function(key, value) {
|
||||
//Ox.print('onChange:', key, value)
|
||||
if (key == 'points') {
|
||||
//Ox.print('key', key, 'value', value)
|
||||
setMarkerPoint(0);
|
||||
setMarkerPoint(1);
|
||||
updateSelection()
|
||||
} else if (key == 'position') {
|
||||
setPosition();
|
||||
} else if (key == 'width') {
|
||||
|
|
@ -11214,7 +11329,7 @@ requires
|
|||
.addClass('OxSubtitle' + (self.options.matches.indexOf(i) > -1 ? ' OxHighlight' : ''))
|
||||
.css({
|
||||
left: (v['in'] * self.fps) + 'px',
|
||||
width: (((v['out'] - v['in']) * self.fps) - 4) + 'px'
|
||||
width: (((v['out'] - v['in']) * self.fps) - 2) + 'px'
|
||||
})
|
||||
.html(Ox.highlight(v.value, self.options.find))
|
||||
.appendTo(self.$timeline)
|
||||
|
|
@ -11255,7 +11370,7 @@ requires
|
|||
|
||||
function click(event, e) {
|
||||
self.options.position = Ox.limit(
|
||||
self.options.position + (e.clientX - that.$element.offset().left - self.center) / self.fps,
|
||||
self.options.position + (e.clientX - that.$element.offset().left - self.center - 1) / self.fps,
|
||||
0, self.options.duration
|
||||
);
|
||||
setPosition();
|
||||
|
|
@ -11341,7 +11456,8 @@ requires
|
|||
}
|
||||
|
||||
function updateTooltip() {
|
||||
var position = self.options.position + (self.clientX - that.offset().left - self.center) / self.fps;
|
||||
// fixme: duplicated, need getPosition(e)
|
||||
var position = self.options.position + (self.clientX - that.offset().left - self.center - 1) / self.fps;
|
||||
if (position >= 0 && position <= self.options.duration) {
|
||||
self.$tooltip
|
||||
.options({
|
||||
|
|
@ -11772,10 +11888,11 @@ requires
|
|||
self.$annotationPanel[i] = new Ox.AnnotationPanel(
|
||||
$.extend({
|
||||
width: self.options.annotationSize
|
||||
}, layer, layer.id == 'subtitles' ? {items: self.options.subtitles} : {})
|
||||
}, layer)
|
||||
)
|
||||
.bindEvent({
|
||||
select: selectAnnotation
|
||||
select: selectAnnotation,
|
||||
submit: updateAnnotation
|
||||
})
|
||||
.appendTo(self.$annotations);
|
||||
});
|
||||
|
|
@ -12017,6 +12134,9 @@ requires
|
|||
setPosition();
|
||||
setPoints();
|
||||
}
|
||||
function updateAnnotation(event, data) {
|
||||
that.triggerEvent('updateAnnotation', data);
|
||||
}
|
||||
|
||||
function select(type) {
|
||||
self.options.points = getPoints(type);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue