updating ox.js
This commit is contained in:
parent
28535be814
commit
d7fb9e3dad
6 changed files with 715 additions and 335 deletions
|
@ -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;
|
||||
|
|
|
@ -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);
|
||||
|
|
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);
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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 ? "=" : "!") + "=> " + Ox.encodeHTML(expected.toString()) +
|
||||
(success ? "" : " ==> " + Ox.encodeHTML(result.toString())) + "</span>"
|
||||
Ox.basename(script) + ', line ' + l + ': <span style="font-weight: bold">' +
|
||||
Ox.encodeHTML(command).replace(replace[0], replace[1]) + ' ' +
|
||||
(success ? '=' : '!') + '=> ' + Ox.encodeHTML(expected.toString()) +
|
||||
(success ? '' : ' ==> ' + 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] + ')))'
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue