updating ox.js

This commit is contained in:
rlx 2011-02-09 17:56:35 +00:00
parent 28535be814
commit d7fb9e3dad
6 changed files with 715 additions and 335 deletions

View file

@ -295,6 +295,10 @@ textarea {
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
}
textarea.OxSquare {
-moz-border-radius: 0;
-webkit-border-radius: 0;
}
/*
--------------------------------------------------------------------------------
OxButton
@ -1296,6 +1300,13 @@ Video
.OxAnnotation:last-child {
border-width: 0;
}
.OxAnnotation.OxEdit {
padding: 0;
}
.OxAnnotation textarea {
padding: 4px;
border: 0;
}
.OxVideoEditor {
overflow-x: hidden;

View file

@ -69,9 +69,10 @@ Forms
*/
.OxThemeModern .OxButton,
.OxThemeModern input.OxCheckbox,
.OxThemeModern input.OxInput,
.OxThemeModern textarea,
.OxThemeModern .OxButton,
.OxThemeModern .OxLabel,
.OxThemeModern .OxTrack {
//border: 1px solid rgb(80, 80, 80);

File diff suppressed because it is too large Load diff

View file

@ -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);

View file

@ -12,51 +12,49 @@
<script type="text/javascript" src="../build/js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="../build/js/ox.js"></script>
<script>
$(function() {
var $body = $("body"),
src = "http://khm0.google.com/kh/v=46&x=0&y=0&z=0",
//src = "http://www.google.com/intl/en_ALL/images/logo.gif",
//src = "http://www.google.com/favicon.ico",
//src = "http://images.apple.com/global/nav/images/globalnavbg.png",
//src = "http://a1.twimg.com/a/1257210731/images/logo.png",
//src = "http://l.yimg.com/g/images/logo_home.png",
//src = "http://www.libpng.org/pub/png/img_png/png-9passes.png"
//src = "http://www.libpng.org/pub/png/img_png/libpng-88x31.png"
//str = "¥€$",
str = "H€₤₤O ₩OR₤D"
;
$.get("http://google.com", function(data) {
var str = data; //data.substr(0, 2048);
$("<img/>")
$(function() {
var $body = $('body'),
src = 'v78.png'
//src = 'http://khm0.google.com/kh/v=46&x=0&y=0&z=0',
//src = 'http://www.google.com/intl/en_ALL/images/logo.gif',
//src = 'http://www.google.com/favicon.ico',
//src = 'http://images.apple.com/global/nav/images/globalnavbg.png',
//src = 'http://a1.twimg.com/a/1257210731/images/logo.png',
//src = 'http://l.yimg.com/g/images/logo_home.png',
//src = 'http://www.libpng.org/pub/png/img_png/png-9passes.png'
//src = 'http://www.libpng.org/pub/png/img_png/libpng-88x31.png'
//str = '¥€$',
str = 'H€₤₤O ₩OR₤D';
$('<img/>')
.attr({
src: src
})
.load(function() {
var that = this;
Ox.print('encoding');
$('<img/>')
.attr({
src: src
src: Ox.encodePNG(that, str)
})
.load(function() {
var that = this;
Ox.print("encoding");
$("<img/>")
.attr({
src: Ox.encodePNG(that, str)
})
.load(function() {
Ox.print("decoding");
$("<div/>")
.html("[decoding original, should throw an error] " + (function() {
var ret;
try {
ret = Ox.decodePNG(that);
ret = "[" + ret.length + " bytes] " + Ox.encodeHTML(ret);
} catch (e) {
ret = e.toString()
}
return ret;
})() + "<br/>[decoding encoded, should return a string] " + Ox.encodeHTML(Ox.decodePNG(this)))
.prependTo($body);
})
.appendTo($body);
});
Ox.print('decoding');
$('<div/>')
.html('[decoding original, should throw an error] ' + (function() {
var ret;
try {
ret = Ox.decodePNG(that);
ret = '[' + ret.length + ' bytes] ' + Ox.encodeHTML(ret);
} catch (e) {
ret = e.toString()
}
return ret;
}()) + '<br/>[decoding encoded, should return a string] ' + Ox.encodeHTML(Ox.decodePNG(this)))
.prependTo($body);
})
.appendTo($body);
});
});
});
</script>
</head>
<body></body>

View file

@ -1,65 +1,67 @@
$(function() {
var $body = $("body")
var $body = $('body')
.css({
overflowY: "auto"
overflowY: 'auto'
}),
$tests = new Ox.Bar({
size: 20
})
.css({
padding: "6px 0 6px 8px",
fontSize: "16px",
fontWeight: "bold"
padding: '6px 0 6px 8px',
fontSize: '16px',
fontWeight: 'bold'
})
.appendTo($("body"));
.appendTo($('body'));
colors = [
["255, 64, 64", "224, 32, 32", "240, 16, 16"],
["64, 192, 64", "32, 160, 32", "40, 176, 48"],
["96, 96, 255", "64, 64, 224", "80, 80, 240"]
['255, 64, 64', '224, 32, 32', '240, 16, 16'],
['64, 192, 64', '32, 160, 32', '40, 176, 48'],
['96, 96, 255', '64, 64, 224', '80, 80, 240']
],
gradients = [
"-moz-linear-gradient(",
"-webkit-gradient(linear, "
'-moz-linear-gradient(',
'-webkit-gradient(linear, '
];
setBackground($tests, true);
tests("../build/js/ox.js", "../build/js/ox.data.js");
tests('../build/js/ox.js', '../build/js/ox.data.js');
function tests() {
var succeeded = 0, failed = 0,
lines, spaces, command, expected, result, success,
replace = ["", ""], fns = [], $test
replace = ['', ''], fns = [], $test
$.each($.isArray(arguments[0]) ? arguments[0] : arguments, function(i, script) {
$.get(script, function(data) {
Ox.Bar({size: 17})
.css({padding: "3px 0 0 8px"})
new Ox.Bar({size: 17})
.css({padding: '3px 0 0 8px'})
.html(Ox.basename(script))
.appendTo($body);
lines = data.split("\n");
lines = data.split('\n');
$.each(lines, function(l, line) {
if (line.indexOf("/*") > -1 && lines[l + 1].indexOf("====") > -1) {
Ox.Bar({size: 17})
.css({padding: "3px 0 0 24px"})
if (line.indexOf('/*') > -1 && lines[l + 1].indexOf('====') > -1) {
new Ox.Bar({size: 17})
.css({padding: '3px 0 0 24px'})
.html($.trim(lines[l + 2]))
.appendTo($body);
//setBackground(x, 2)
}
spaces = line.indexOf(">>> ");
spaces = line.indexOf('>>> ');
if (spaces > -1) {
command = $.trim(line).substr(4).split(" // ")[0];
command = $.trim(line).substr(4).split(' // ')[0];
Ox.print('command:', command)
fn = command.match(/Ox\.\w+/);
expected = eval(lines[l + 1].substr(spaces, lines[l + 1].length));
// fixme: if object, recursively check identity
result = eval(command);
if (fn) {
fn = fn[0];
success = typeof expected == "object" ?
success = typeof expected == 'object' ?
expected.toString() == result.toString() : expected === result;
succeeded += success;
failed += !success;
$tests.html((succeeded + failed) + " tests, " +
succeeded + " succeeded, " + failed + " failed");
$tests.html((succeeded + failed) + ' tests, ' +
succeeded + ' succeeded, ' + failed + ' failed');
if (!success) {
setBackground($tests, success);
}
@ -67,22 +69,22 @@ $(function() {
fns.push(fn);
$test = Ox.CollapsePanel({
collapsed: true,
title: fn + "()"
title: fn + '()'
})
.appendTo($body);
setBackground($test.find(".OxBar"), true);
setBackground($test.find('.OxBar'), true);
}
///*
Ox.Bar({size:17}) // fixme: Ox.Object() used to work
new Ox.Bar({size:17}) // fixme: Ox.Object() used to work
.css({
//padding: "2px 0 2px 8px",
background: "rgb(" + colors[+success][2] + ")"
//padding: '2px 0 2px 8px',
background: 'rgb(' + colors[+success][2] + ')'
})
.html(
Ox.basename(script) + ", line " + l + ": <span style=\"font-weight: bold\">" +
Ox.encodeHTML(command).replace(replace[0], replace[1]) + " " +
(success ? "=" : "!") + "=&gt; " + Ox.encodeHTML(expected.toString()) +
(success ? "" : " ==&gt; " + Ox.encodeHTML(result.toString())) + "</span>"
Ox.basename(script) + ', line ' + l + ': <span style="font-weight: bold">' +
Ox.encodeHTML(command).replace(replace[0], replace[1]) + ' ' +
(success ? '=' : '!') + '=&gt; ' + Ox.encodeHTML(expected.toString()) +
(success ? '' : ' ==&gt; ' + Ox.encodeHTML(result.toString())) + '</span>'
)
.appendTo($test.$content);
//*/
@ -90,16 +92,16 @@ $(function() {
// /*
$test.$content
.css({
marginTop: -$test.$content.height() + "px"
marginTop: -$test.$content.height() + 'px'
});
//*/
// /*
if (!success) {
setBackground($test.find(".OxBar"), success);
setBackground($test.find('.OxBar'), success);
}
//*/
} else {
replace = command.split(" = ")
replace = command.split(' = ')
}
}
});
@ -110,9 +112,9 @@ $(function() {
function setBackground($element, success) {
$.each(gradients, function(i, v) {
$element.css({
background: v + "left top, left bottom, from(rgb(" +
colors[+success][0] + ")), to(rgb(" +
colors[+success][1] + ")))"
background: v + 'left top, left bottom, from(rgb(' +
colors[+success][0] + ')), to(rgb(' +
colors[+success][1] + ')))'
});
});
}