From d7fb9e3dad08e516d512721b817d583be63d9bce Mon Sep 17 00:00:00 2001 From: rlx <0x0073@0x2620.org> Date: Wed, 9 Feb 2011 17:56:35 +0000 Subject: [PATCH] updating ox.js --- build/css/ox.ui.css | 11 + build/css/ox.ui.modern.css | 3 +- build/js/ox.js | 634 ++++++++++++++++++++++++++----------- build/js/ox.ui.js | 242 ++++++++++---- tests/png.html | 80 +++-- tests/tests.js | 80 ++--- 6 files changed, 715 insertions(+), 335 deletions(-) diff --git a/build/css/ox.ui.css b/build/css/ox.ui.css index b3c4c5b9..1912e56c 100644 --- a/build/css/ox.ui.css +++ b/build/css/ox.ui.css @@ -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; diff --git a/build/css/ox.ui.modern.css b/build/css/ox.ui.modern.css index 84aeb8b2..4a70fbb4 100644 --- a/build/css/ox.ui.modern.css +++ b/build/css/ox.ui.modern.css @@ -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); diff --git a/build/js/ox.js b/build/js/ox.js index eec35506..f821c350 100644 --- a/build/js/ox.js +++ b/build/js/ox.js @@ -5,9 +5,11 @@ Ox = function(val) { }; */ -Ox = { - version: '0.1.2' -}; +if (!window.Ox) { + Ox = { + version: '0.1.2' + }; +} /* ================================================================================ @@ -15,14 +17,17 @@ Constants ================================================================================ */ -Ox.AMPM = ["AM", "PM"]; +Ox.AMPM = ['AM', 'PM']; Ox.DAYS = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; Ox.EARTH_RADIUS = 6378137; Ox.EARTH_CIRCUMFERENCE = Ox.EARTH_RADIUS * 2 * Math.PI; -Ox.MONTHS = ["January", "February", "March", "April", "May", "June", - "July", "August", "September", "October", "November", "December"]; -Ox.WEEKDAYS = ["Monday", "Tuesday", "Wednesday", "Thursday", - "Friday", "Saturday", "Sunday"]; +Ox.HTML_ENTITIES = {'"': '"', '&': '&', "'": ''', + '<': '<', '>': '>'}; +Ox.MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', + 'July', 'August', 'September', 'October', 'November', 'December']; +Ox.PREFIXES = ['K', 'M', 'G', 'T', 'P']; +Ox.WEEKDAYS = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', + 'Friday', 'Saturday', 'Sunday']; /* ================================================================================ @@ -76,16 +81,16 @@ Ox.getset = function(obj, args, callback, context) { Ox.print = function() { /* */ - if (typeof console != "undefined") { + if (window.console) { var args = $.makeArray(arguments), date = new Date; - args.unshift(Ox.formatDate(date, "%H:%M:%S") + "." + + args.unshift(Ox.formatDate(date, '%H:%M:%S') + '.' + (Ox.pad(+date % 1000, 3))); - console.log.apply(console, args); + window.console.log.apply(window.console, args); } } -Ox.uid = function() { +Ox.uid = (function() { /*** returns a unique id >>> Ox.uid() != Ox.uid() @@ -95,7 +100,7 @@ Ox.uid = function() { return function() { return uid++; }; -}(); +}()); Ox.user = function() { // fixme: move to ox.ui @@ -137,17 +142,32 @@ Ox.avg = function(obj) { returns the average of an array's values, or an object's properties >>> Ox.avg([-1, 0, 1]) 0 - >>> Ox.avg({"a": 1, "b": 2, "c": 3}) + >>> Ox.avg({a: 1, b: 2, c: 3}) 2 ***/ return Ox.sum(obj) / Ox.length(obj); }; Ox.clone = function(obj) { + /* + */ return Ox.isArray(obj) ? obj.slice() : Ox.extend({}, obj); }; +Ox.count = function(arr) { + /* + Ox.count(['foo', 'bar', 'foo']).foo + 2 + */ + var obj = {}; + arr.forEach(function(v) { + obj[v] = (obj[v] || 0) + 1; + }); + return obj; +}; + Ox.each = function(obj, fn) { + // fixme: deprecate! /* Ox.each() works for arrays, objects and strings, like $.each(), unlike [].forEach() @@ -155,11 +175,12 @@ Ox.each = function(obj, fn) { [0, 1, 2] >>> Ox.each({a: 1, b: 2, c: 3}, function(k, v) {}).a 1 - >>> Ox.each("foo", function(i, v) {}) - "foo" + >>> Ox.each('foo', function(i, v) {}) + 'foo' */ - var i; + var i, isArray = Ox.isArray(obj); for (i in obj) { + i = isArray ? parseInt(i) : i; // fixme: should be (v, k), like [].forEach() if (fn(i, obj[i]) === false) { break; @@ -170,7 +191,12 @@ Ox.each = function(obj, fn) { Ox.equals = function(obj0, obj1) { /* - ... core? type? + >>> Ox.equals([1, 2, 3], [1, 2, 3]) + true + >>> Ox.equals({a: 1, b: [2, 3], c: {d: '4'}}, {a: 1, b: [2, 3], c: {d: '4'}}) + true + >>> Ox.equals(function() { return; }, function() { return; }); + true */ var ret = false; if (obj0 === obj1) { @@ -179,7 +205,7 @@ Ox.equals = function(obj0, obj1) { if (obj0 == obj1) { ret = true; } else if (Ox.isArray(obj0) && obj0.length == obj1.length) { - Ox.each(obj0, function(i, v) { + Ox.forEach(obj0, function(v, i) { ret = Ox.equals(v, obj1[i]); return ret; }); @@ -192,7 +218,6 @@ Ox.equals = function(obj0, obj1) { ret = obj0.toString() == obj1.toString(); } } - Ox.print('Ox.equals', obj0, obj1, ret) return ret; } @@ -203,7 +228,7 @@ Ox.every = function(obj, fn) { true >>> Ox.every({a: 1, b: 2, c: 3}, function(v) { return v == 1; }) false - >>> Ox.every("foo", function(v) { return v == "f"; }) + >>> Ox.every("foo", function(v) { return v == 'f'; }) false >>> Ox.every([true, true, true]) true @@ -213,13 +238,18 @@ Ox.every = function(obj, fn) { }).length == Ox.length(obj); }; -Ox.extend = function(obj) { - Ox.each(Array.prototype.slice.call(arguments, 1), function(i, arg) { - Ox.each(arg, function(key, val) { - obj0[key] = val; +Ox.extend = function() { + /* + >>> Ox.extend({a: 1}, {b: 2}, {c: 3}).c + 3 + */ + var obj = {}; + Ox.forEach(Array.prototype.slice.call(arguments, 1), function(arg, i) { + Ox.forEach(arg, function(val, key) { + obj[key] = val; }); }); - return obj0; + return obj; }; Ox.filter = function(arr, fn) { @@ -277,13 +307,36 @@ Ox.find = function(arr, str) { return ret; } +Ox.forEach = function(obj, fn) { + /* + Ox.forEach() works for arrays, objects and strings, + like $.each(), unlike [].forEach() + The arguments of the iterator function are (value, key), + like [].forEach(), unlike $.each() + >>> Ox.forEach([0, 1, 2], function(v, i) {}) + [0, 1, 2] + >>> Ox.forEach({a: 1, b: 2, c: 3}, function(v, k) {}).a + 1 + >>> Ox.forEach('foo', function(v, i) {}) + 'foo' + */ + var key, isArray = Ox.isArray(obj); + for (key in obj) { + key = isArray ? parseInt(key) : key; + if (fn(obj[key], key) === false) { + break; + } + } + return obj; +}; + Ox.getObjectById = function(arr, id) { /*** >>> Ox.getObjectById([{id: "foo", title: "Foo"}, {id: "bar", title: "Bar"}], "foo").title "Foo" ***/ var ret = null; - Ox.each(arr, function(i, v) { + Ox.forEach(arr, function(v) { if (v.id == id) { ret = v; return false; @@ -298,7 +351,7 @@ Ox.getPositionById = function(arr, id) { 1 ***/ var ret = -1; - Ox.each(arr, function(i, v) { + Ox.forEach(arr, function(v, i) { if (v.id == id) { ret = i; return false; @@ -309,11 +362,11 @@ Ox.getPositionById = function(arr, id) { Ox.keys = function(obj) { /* - >>> Ox.keys({"a": 1, "b": 2, "c": 3}) + >>> Ox.keys({a: 1, b: 2, c: 3}) ["a", "b", "c"] */ var keys = []; - Ox.each(obj, function(k) { + Ox.forEach(obj, function(v, k) { keys.push(k); }); return keys; @@ -325,7 +378,7 @@ Ox.length = function(obj) { 3 */ var length = 0; - Ox.each(obj, function() { + Ox.forEach(obj, function() { length++; }); return length; @@ -338,9 +391,9 @@ Ox.makeArray = function(arr) { ["foo"] >>> Ox.makeArray(["foo"]) ["foo"] - >>> (function() { return Ox.makeArray(arguments); })("foo") + >>> (function() { return Ox.makeArray(arguments); }("foo")) ["foo"] - >>> (function() { return Ox.makeArray(arguments); })(["foo"]) + >>> (function() { return Ox.makeArray(arguments); }(["foo"])) ["foo"] */ // fixme: this doesn't work for numbers @@ -361,9 +414,9 @@ Ox.makeObject = function(arr) { "bar" >>> Ox.makeObject({foo: "bar"}).foo "bar" - >/>> (function() { return Ox.makeObject(arguments); })("foo", "bar").foo // fixme + >/>> (function() { return Ox.makeObject(arguments); }("foo", "bar")).foo // fixme "bar" - >/>> (function() { return Ox.makeObject(arguments); })({foo: "bar"}).foo + >/>> (function() { return Ox.makeObject(arguments); }({foo: "bar"})).foo "bar" */ var obj = {}; @@ -399,7 +452,7 @@ Ox.max = function(obj) { /* >>> Ox.max([-1, 0, 1]) 1 - >>> Ox.max({"a": 1, "b": 2, "c": 3}) + >>> Ox.max({a: 1, b: 2, c: 3}) 3 */ return Math.max.apply(Math, Ox.values(obj)); @@ -409,15 +462,19 @@ Ox.min = function(obj) { /* >>> Ox.min([-1, 0, 1]) -1 - >>> Ox.min({"a": 1, "b": 2, "c": 3}) + >>> Ox.min({a: 1, b: 2, c: 3}) 1 */ return Math.min.apply(Math, Ox.values(obj)); }; Ox.merge = function(arr) { - Ox.each(Array.prototype.slice.call(arguments, 1), function(i, arg) { - Ox.each(arg, function(i, val) { + /* + >>> Ox.merge(['foo'], ['bar'], ['baz']) + ['foo', 'bar', 'baz'] + */ + Ox.forEach(Array.prototype.slice.call(arguments, 1), function(arg) { + Ox.forEach(arg, function(val) { arr.push(val); }); }); @@ -446,19 +503,25 @@ Ox.range = function(start, stop, step) { Ox.serialize = function(obj) { /* - >>> Ox.serialize({a: 0, b: 1}) - a=0&b=1 + >>> Ox.serialize({a: 1, b: 2, c: 3}) + 'a=1&b=2&c=3' */ var arr = []; - Ox.each(obj, function(k, v) { - v !== '' && arr.push(k + '=' + v); + Ox.forEach(obj, function(val, key) { + val !== '' && arr.push(key + '=' + val); }); return arr.join('&'); }; Ox.setPropertyOnce = function(arr, str) { + /* + >>> Ox.setPropertyOnce([{selected: false}, {selected: false}]) + 0 + >>> Ox.setPropertyOnce([{selected: true}, {selected: true}]) + 0 + */ var pos = -1; - Ox.each(arr, function(i, v) { + Ox.forEach(arr, function(v, i) { if (pos == -1 && arr[i][str]) { pos = i; } else if (pos > -1 && arr[i][str]) { @@ -490,7 +553,7 @@ Ox.some = function(obj, fn) { true >>> Ox.some({a: 1, b: 2, c: 3}, function(v) { return v == 1; }) true - >>> Ox.some("foo", function(v) { return v == "f"; }) + >>> Ox.some("foo", function(v) { return v == 'f'; }) true */ return Ox.filter(Ox.values(obj), fn).length > 0; @@ -500,12 +563,12 @@ Ox.sum = function(obj) { /* >>> Ox.sum([-1, 0, 1]) 0 - >>> Ox.sum({"a": 1, "b": 2, "c": 3}) + >>> Ox.sum({a: 1, b: 2, c: 3}) 6 */ var sum = 0; - Ox.each(obj, function(k, v) { - sum += v; + Ox.forEach(obj, function(val) { + sum += val; }); return sum; }; @@ -523,9 +586,13 @@ Ox.unique = function(arr) { }; Ox.unserialize = function(str) { + /* + >>> Ox.unserialize('a=1&b=2&c=3').c + '3' + */ var arr, obj = {}; - Ox.each(str.split('&'), function(i, v) { - arr = v.split('='); + Ox.forEach(str.split('&'), function(val) { + arr = val.split('='); obj[arr[0]] = arr[1]; }); return obj; @@ -533,21 +600,20 @@ Ox.unserialize = function(str) { Ox.values = function(obj) { /* - >>> Ox.values({"a": 1, "b": 2, "c": 3}).join(",") + >>> Ox.values({a: 1, b: 2, c: 3}) [1, 2, 3] - >>> Ox.values([1, 2, 3]).join(",") + >>> Ox.values([1, 2, 3]) [1, 2, 3] */ var values = []; - Ox.each(obj, function(k, v) { - values.push(v); + Ox.forEach(obj, function(val) { + values.push(val); }); return values; }; Ox.zip = function() { /* - // fixme: Ox.each doesn't work here >>> Ox.zip([[0, 1], [2, 3], [4, 5]]) [[0, 2, 4], [1, 3, 5]] >>> Ox.zip([0, 1, 2], [3, 4, 5]) @@ -833,31 +899,32 @@ Ox.canvas = function() { image = isImage ? arguments[0] : { width: arguments[0], height: arguments[1] }; - c.context = (c.canvas = Ox.element("canvas").attr({ + c.context = (c.canvas = Ox.element('canvas').attr({ width: image.width, height: image.height - })[0]).getContext("2d"); + })[0]).getContext('2d'); isImage && c.context.drawImage(image, 0, 0); - c.data = (c.imageData = c.context.getImageData(0, 0, - image.width, image.height)).data; + c.data = (c.imageData = c.context.getImageData( + 0, 0, image.width, image.height + )).data; return c; }; Ox.element = function(str) { /* - >>> Ox.element("div").attr({id: "foo"}).attr("id") - "foo" - >>> Ox.element("div").html("foo").html() - "foo" + >>> Ox.element('div').attr({id: 'foo'}).attr('id') + 'foo' + >>> Ox.element('div').html('foo').html() + 'foo' */ return { - 0: str[0] == "#" ? document.getElementById(str.substr(1)) : + 0: str[0] == '#' ? document.getElementById(str.substr(1)) : document.createElement(str), attr: function() { var args, ret, that = this; if (arguments.length == 1 && Ox.isString(arguments[0])) { ret = this[0].getAttribute(arguments[0]); } else { - Ox.each(Ox.makeObject.apply(this, arguments), function(k, v) { + Ox.forEach(Ox.makeObject.apply(this, arguments), function(v, k) { that[0].setAttribute(k, v); }); ret = this; @@ -885,10 +952,10 @@ Encoding functions (function() { - var aliases = {"I": "1", "L": "1", "O": "0", "U": "V"}, - digits = "0123456789ABCDEFGHJKMNPQRSTVWXYZ"; + var aliases = {'I': '1', 'L': '1', 'O': '0', 'U': 'V'}, + digits = '0123456789ABCDEFGHJKMNPQRSTVWXYZ'; - function max(width, height) { + function cap(width, height) { // returns maximum encoding capacity of an image return parseInt(width * height * 3/8) - 4; } @@ -897,7 +964,7 @@ Encoding functions // returns this, or the next, opaque pixel while (data[px * 4 + 3] < 255) { if (++px * 4 == data.length) { - throwPNGError("de"); + throwPNGError('de'); } } return px; @@ -906,61 +973,65 @@ Encoding functions function xor(byte) { // returns "1"-bits-in-byte % 2 var xor = 0; - $.each(new Array(8), function(i) { // fixme: Ox.each doesn't work + Ox.range(8).forEach(function(i) { xor ^= byte >> i & 1; }); return xor; } function throwPNGError(str) { - throw new RangeError("PNG codec can't " + - (str == "en" ? "encode data" : "decode image")); + throw new RangeError( + 'PNG codec can\'t ' + + (str == 'en' ? 'encode data' : 'decode image') + ); } function throwUTF8Error(byte, pos) { - throw new RangeError("UTF-8 codec can't decode byte 0x" + - byte.toString(16).toUpperCase() + " at position " + pos); + throw new RangeError( + 'UTF-8 codec can\'t decode byte 0x' + + byte.toString(16).toUpperCase() + ' at position ' + pos + ); } Ox.encodeBase32 = function(num) { // see http://www.crockford.com/wrmg/base32.html /* >>> Ox.encodeBase32(15360) - "F00" + 'F00' >>> Ox.encodeBase32(33819) - "110V" + '110V' */ return Ox.map(num.toString(32), function(char) { return digits[parseInt(char, 32)]; - }).join(""); + }).join(''); } Ox.decodeBase32 = function(str) { /* - >>> Ox.decodeBase32("foo") + >>> Ox.decodeBase32('foo') 15360 - >>> Ox.decodeBase32("ilou") + >>> Ox.decodeBase32('ilou') 33819 - >>> Ox.decodeBase32("?").toString() // fixme: toString shouldn't be necessary here - "NaN" + >>> Ox.decodeBase32('?').toString() + 'NaN' */ return parseInt($.map(str.toUpperCase(), function(char) { var index = digits.indexOf(aliases[char] || char); - return (index == -1 ? " " : index).toString(32); - }).join(""), 32); + return (index == -1 ? ' ' : index).toString(32); + }).join(''), 32); } Ox.encodeBase64 = function(num) { /* >>> Ox.encodeBase64(32394) - "foo" + 'foo' */ return btoa(Ox.encodeBase256(num)).replace(/=/g, ""); } Ox.decodeBase64 = function(str) { /* - >>> Ox.decodeBase64("foo") + >>> Ox.decodeBase64('foo') 32394 */ return Ox.decodeBase256(atob(str)); @@ -969,9 +1040,9 @@ Encoding functions Ox.encodeBase128 = function(num) { /* >>> Ox.encodeBase128(1685487) - "foo" + 'foo' */ - var str = ""; + var str = ''; while (num) { str = Ox.char(num & 127) + str; num >>= 7; @@ -981,11 +1052,11 @@ Encoding functions Ox.decodeBase128 = function(str) { /* - >>> Ox.decodeBase128("foo") + >>> Ox.decodeBase128('foo') 1685487 */ var num = 0, len = str.length; - Ox.each(str, function(i, char) { + Ox.forEach(str, function(char, i) { num += char.charCodeAt(0) << (len - i - 1) * 7; }); return num; @@ -994,9 +1065,9 @@ Encoding functions Ox.encodeBase256 = function(num) { /* >>> Ox.encodeBase256(6713199) - "foo" + 'foo' */ - var str = ""; + var str = ''; while (num) { str = Ox.char(num & 255) + str; num >>= 8; @@ -1006,11 +1077,11 @@ Encoding functions Ox.decodeBase256 = function(str) { /* - >>> Ox.decodeBase256("foo") + >>> Ox.decodeBase256('foo') 6713199 */ var num = 0, len = str.length; - Ox.each(str, function(i, char) { + Ox.forEach(str, function(char, i) { num += char.charCodeAt(0) << (len - i - 1) * 8; }); return num; @@ -1025,7 +1096,7 @@ Encoding functions str = Ox.encodeUTF8(str); var len = str.length, c = Ox.canvas(Math.ceil((4 + len) / 3), 1), data; str = Ox.pad(Ox.encodeBase256(len), 4, Ox.char(0)) + str + - Ox.repeat("\u00FF", (4 - len % 4) % 4); // simpler? Ox.pad()? + Ox.repeat('\u00FF', (4 - len % 4) % 4); // simpler? Ox.pad()? /* fixme: why does map not work here? c.data = $.map(c.data, function(v, i) { return i % 4 < 3 ? str.charCodeAt(i - parseInt(i / 4)) : 255; @@ -1035,56 +1106,52 @@ Encoding functions c.data[i] = i % 4 < 3 ? str.charCodeAt(i - parseInt(i / 4)) : 255; } c.context.putImageData(c.imageData, 0, 0); - data = atob(c.canvas.toDataURL().split(",")[1]); - //Ox.print("deflate", len, "->", data.length - 20); + Ox.print(c.canvas.toDataURL()) + data = atob(c.canvas.toDataURL().split(',')[1]); + Ox.print('data', data); return data.substr(8, data.length - 20); } Ox.decodeDeflate = function(str) { var image = new Image(); - image.src = "data:image/png;base64," + btoa("\u0089PNG\r\n\u001A\n" + - str + Ox.repeat("\u0000", 4) + "IEND\u00AEB`\u0082"); - while (!image.width) {} // wait for image data + image.src = 'data:image/png;base64,' + btoa('\u0089PNG\r\n\u001A\n' + + str + Ox.repeat('\u0000', 4) + 'IEND\u00AEB`\u0082'); + Ox.print(image.src); + while (!image.width) {} // block until image data is available str = Ox.map(Ox.canvas(image).data, function(v, i) { - return i % 4 < 3 ? Ox.char(v) : ""; - }).join(""); - //Ox.print(str.length, "len", Ox.decodeBase256(str.substr(0, 4)), str) + return i % 4 < 3 ? Ox.char(v) : ''; + }).join(''); return Ox.decodeUTF8(str.substr(4, Ox.decodeBase256(str.substr(0, 4)))); } - Ox.encodeHTML = function() { + Ox.encodeHTML = function(str) { /* - >>> Ox.encodeHTML("'<\"&\">'") - "'<"&">'" - >>> Ox.encodeHTML("äbçdê") - "äbçdê" + >>> Ox.encodeHTML('\'<"&">\'') + ''<"&">'' + >>> Ox.encodeHTML('äbçdê') + 'äbçdê' */ - var entities = { - '"': """, "&": "&", "'": "'", "<": "<", ">": ">" - }; - return function(str) { - return $.map(Array.prototype.slice.call(str), function(v) { - var code = v.charCodeAt(0); - return code < 128 ? (v in entities ? entities[v] : v) : - "&#x" + Ox.pad(code.toString(16).toUpperCase(), 4) + ";"; - }).join(""); - }; - }(); + return $.map(str, function(v) { + var code = v.charCodeAt(0); + return code < 128 ? (v in Ox.HTML_ENTITIES ? Ox.HTML_ENTITIES[v] : v) : + '&#x' + Ox.pad(code.toString(16).toUpperCase(), 4) + ';'; + }).join(''); + }; Ox.decodeHTML = function(str) { /* - >>> Ox.decodeHTML("'<"&">'") - "'<\"&\">'" - >>> Ox.decodeHTML("'<"&">'") - "'<\"&\">'" - >>> Ox.decodeHTML("äbçdê") - "äbçdê" - >>> Ox.decodeHTML("äbçdê") - "äbçdê" + >>> Ox.decodeHTML(''<"&">'') + '\'<"&">\'' + >>> Ox.decodeHTML(''<"&">'') + '\'<"&">\'' + >>> Ox.decodeHTML('äbçdê') + 'äbçdê' + >>> Ox.decodeHTML('äbçdê') + 'äbçdê' */ // relies on dom, but shorter than using this: // http://www.w3.org/TR/html5/named-character-references.html - return $("
").html(str)[0].childNodes[0].nodeValue; + return $('
').html(str)[0].childNodes[0].nodeValue; }; Ox.encodePNG = function(img, str) { @@ -1102,17 +1169,18 @@ Encoding functions (and flip the second least significant bit, if at all) - write an extra png chunk containing some key */ - str = Ox.encodeDeflate(str); + //str = Ox.encodeDeflate(str); currently broken + str = Ox.encodeUTF8(str); var c = Ox.canvas(img), len = str.length, px = 0; - if (len == 0 || len > max(img.width, img.height)) { - throwPNGError("en") + if (len == 0 || len > cap(img.width, img.height)) { + throwPNGError('en') } len = Ox.pad(Ox.encodeBase256(len), 4, Ox.char(0)); - Ox.each(Ox.map(len + str, function(byte) { - return Ox.map(new Array(8), function(v, i) { + Ox.forEach(Ox.map(len + str, function(byte) { + return Ox.map(Ox.range(8), function(i) { return byte.charCodeAt(0) >> 7 - i & 1; - }).join(""); - }).join(""), function(i, bit) { + }).join(''); + }).join(''), function(bit, i) { var index = parseInt((px = seek(c.data, px)) * 4 + i % 3), byte = c.data[index]; c.data[index] = bit == xor(byte) ? byte : @@ -1125,47 +1193,48 @@ Encoding functions Ox.decodePNG = function(img) { // decodes image, returns string - var data = Ox.canvas(img).data, bits = "", str = "", - px = 0, i = 0; len = 4, flag = false; + var bits = '', data = Ox.canvas(img).data, flag = false, i = 0, + len = 4, max = cap(img.width, img.height), px = 0, str = ''; do { bits += xor(data[parseInt((px = seek(data, px)) * 4 + i % 3)]); px += i % 3 == 2; if (++i % 8 == 0) { str += Ox.char(parseInt(bits, 2)); - bits = ""; + bits = ''; len--; if (len == 0 && !flag) { len = Ox.decodeBase256(str); - if (len <= 0 || len > max(img.width, img.height)) { + if (len <= 0 || len > max) { Ox.print(len); - throwPNGError("de"); + throwPNGError('de'); } - str = ""; + str = ''; flag = true; } } } while (len); try { - return Ox.decodeDeflate(str); + //return Ox.decodeDeflate(str); currently broken + return Ox.decodeUTF8(str); } catch(e) { Ox.print(e.toString()); - throwPNGError("de"); + throwPNGError('de'); } } Ox.encodeUTF8 = function(str) { /* see http://en.wikipedia.org/wiki/UTF-8 - >>> Ox.encodeUTF8("foo") - "foo" - >>> Ox.encodeUTF8("¥€$") - "\u00C2\u00A5\u00E2\u0082\u00AC\u0024" + >>> Ox.encodeUTF8('foo') + 'foo' + >>> Ox.encodeUTF8('¥€$') + '\u00C2\u00A5\u00E2\u0082\u00AC\u0024' */ - return $.map(Array.prototype.slice.call(str), function(char) { // fixme: why not str? - var code = char.charCodeAt(0), - str = ""; + return $.map(Array.prototype.slice.call(str), function(chr) { + var code = chr.charCodeAt(0), + str = ''; if (code < 128) { - str = char; + str = chr; } else if (code < 2048) { str = String.fromCharCode(code >> 6 | 192) + String.fromCharCode(code & 63 | 128); @@ -1175,28 +1244,30 @@ Encoding functions String.fromCharCode(code & 63 | 128); } return str; - }).join(""); + }).join(''); } Ox.decodeUTF8 = function(str) { /* - >>> Ox.decodeUTF8("foo") - "foo" - >>> Ox.decodeUTF8("\u00C2\u00A5\u00E2\u0082\u00AC\u0024") - "¥€$" + >>> Ox.decodeUTF8('foo') + 'foo' + >>> Ox.decodeUTF8('\u00C2\u00A5\u00E2\u0082\u00AC\u0024') + '¥€$' */ var bytes = $.map(str, function(v) { return v.charCodeAt(0); }), i = 0, len = str.length, - str = ""; + str = ''; while (i < len) { if (bytes[i] <= 128) { str += String.fromCharCode(bytes[i]); i++; - } else if (bytes[i] >= 192 && bytes[i] < 240 && - i < len - (bytes[i] < 224 ? 1 : 2)) { + } else if ( + bytes[i] >= 192 && bytes[i] < 240 && + i < len - (bytes[i] < 224 ? 1 : 2) + ) { if (bytes[i + 1] >= 128 && bytes[i + 1] < 192) { if (bytes[i] < 224) { str += String.fromCharCode((bytes[i] & 31) << 6 | @@ -1419,15 +1490,15 @@ Ox.formatDate = function() { Ox.formatDuration = function(sec, dec, format) { /* >>> Ox.formatDuration(123456.789, 3) - 1:10:17:36.789 + "1:10:17:36.789" >>> Ox.formatDuration(12345.6789) - 03:25:46 + "03:25:46" >>> Ox.formatDuration(12345.6789, true) - 0:03:25:46 + "0:03:25:46" >>> Ox.formatDuration(3599.999, 3) - 00:59:59.999 + "00:59:59.999" >>> Ox.formatDuration(3599.999) - 01:00:00 + "01:00:00" */ var format = arguments.length == 3 ? format : (Ox.isString(dec) ? dec : "short"), dec = (arguments.length == 3 || Ox.isNumber(dec)) ? dec : 0, @@ -1483,37 +1554,49 @@ Ox.formatNumber = function(num, dec) { }; Ox.formatPercent = function(num, total, dec) { + /* + >>> Ox.formatPercent(1, 1000, 2) + "0.10%" + */ return Ox.formatNumber(num / total * 100, dec) + '%' }; Ox.formatResolution = function(arr, str) { - return arr[0] + ' x ' + arr[1] + ' ' + str; + /* + >>> Ox.formatResolution([1920, 1080], 'px') + "1920 x 1080 px" + */ + return arr[0] + ' x ' + arr[1] + (str ? ' ' + str : ''); } -Ox.formatString = function (s, args) { - /* Python(ish) string formatting: - * >>> format('{0}', ['zzz']) - * "zzz" - * >>> format('{x}', {x: 1}) - * "1" - */ - var re = /\{([^}]+)\}/g; - return s.replace(re, function(_, match){ return args[match]; }); +Ox.formatString = function (str, obj) { + /* + >>> Ox.formatString('{0}{1}', ['foo', 'bar']) + "foobar" + >>> Ox.formatString('{a}{b}', {a: 'foo', b: 'bar'}) + "foobar" + */ + return str.replace(/\{([^}]+)\}/g, function(str, match) { + return obj[match]; + }); } -Ox.formatValue = function(num, str) { +Ox.formatValue = function(num, str, bin) { /* >>> Ox.formatValue(0, "B") - ??? + "0 KB" >>> Ox.formatValue(123456789, "B") - ??? + "123.5 MB" + >>> Ox.formatValue(1234567890, "B", true) + "1.15 GiB" */ - var arr = ["K", "M", "G", "T", "P"], - len = arr.length, - val = ""; - $.each(arr, function(i, v) { - if (num < Math.pow(1024, i + 2) || i == len - 1) { - val = Ox.formatNumber(num / Math.pow(1024, i + 1), i) + " " + v + str; + var base = bin ? 1024 : 1000, + len = Ox.PREFIXES.length, + val; + Ox.forEach(Ox.PREFIXES, function(chr, i) { + if (num < Math.pow(base, i + 2) || i == len - 1) { + val = Ox.formatNumber(num / Math.pow(base, i + 1), i) + + ' ' + chr + (bin ? 'i' : '') + str; return false; } }); @@ -1551,6 +1634,127 @@ Ox.getMetersPerDegree = function(point) { return Math.cos(point[0] * Math.PI / 180) * Ox.EARTH_CIRCUMFERENCE / 360; }; +/* +================================================================================ +HTML functions +================================================================================ +*/ + +Ox.parseEmailAddresses = function(html) { + return html.replace( + /\b([0-9A-Z\.\+\-_]+@(?:[0-9A-Z\-]+\.)+[A-Z]{2,6})\b/gi, + '$1' + ); +}; + +Ox.parseHTML = (function() { + /* + >>> Ox.parseHTML('http://foo.com, bar') + 'foo.com, bar' + >>> Ox.parseHTML('(see: www.foo.com)') + '(see: www.foo.com)' + >>> Ox.parseHTML('foo@bar.com') + 'foo@bar.com' + >>> Ox.parseHTML('foo') + 'foo' + >>> Ox.parseHTML('foo') + '<a href="javascript:alert()">foo</a>' + >>> Ox.parseHTML('[http://foo.com foo]') + 'foo' + >>> Ox.parseHTML('foo') + '
foo
' + >>> Ox.parseHTML('') + '<script>alert()</script>' + */ + var defaultTags = [ + 'a', 'b', 'blockquote', 'cite', 'code', 'del', + 'em', 'i', 'img', 'ins', 'li', 'ol', 'q', 'rtl', + 's', 'strong', 'sub', 'sup', 'ul', '[]' + ], + parse = { + a: { + ']*?href="(https?:\/\/.+?)".*?>': '', + '<\/a>': '' + }, + img: { + ']*?src="(https?:\/\/.+?)".*?>': '' + }, + rtl: { + '': '
', + '<\/rtl>': '
' + }, + '*': function(tag) { + var ret = {}; + ret['<(/?' + tag + ')>'] = '<{1}>'; + return ret; + } + }, + tab = '\t'; + + return function(html, tags, wikilinks) { + var matches = [], + tags = tags || defaultTags; + html = Ox.clean(html); + if (tags.indexOf('[]') > -1) { + html = html.replace(/\[(https?:\/\/.+?) (.+?)\]/gi, '$2'); + tags = tags.filter(function(tag) { + return tag != '[]'; + }); + } + tags.forEach(function(tag) { + var p = parse[tag] || parse['*'](tag); + Ox.forEach(p, function(replace, regexp) { + html = html.replace(new RegExp(regexp, 'gi'), function() { + matches.push(Ox.formatString(replace, arguments)); + return tab + (matches.length - 1) + tab; + }); + }); + }); + html = Ox.encodeHTML(html); + html = Ox.parseURLs(html); + html = Ox.parseEmailAddresses(html); + matches.forEach(function(match, i) { + html = html.replace(new RegExp(tab + i + tab, 'gi'), match); + }); + html = html.replace(/\n/g, '
\n') + // close extra opening (and remove extra closing) tags + return $('
').html(html).html(); + } + +}()); + +Ox.parseURL = (function() { + // fixme: leak memory, like now, or create every time? ... benchmark?? + var a = document.createElement('a'), + keys = ['hash', 'host', 'hostname', 'origin', + 'pathname', 'port', 'protocol', 'search']; + return function(str) { + var ret = {}; + a.href = str; + keys.forEach(function(key) { + ret[key] = a[key]; + }); + return ret; + }; +}()); + +Ox.parseURLs = function(html) { + return html.replace( + /\b((https?:\/\/|www\.).+?)([\.,:;!\?\)\]]*?(\s|$))/gi, + function(str, url, pre, end) { + url = (pre == 'www.' ? 'http://' : '' ) + url; + return Ox.formatString( + '{host}{end}', + { + end: end, + host: Ox.parseURL(url).hostname, + url: url + } + ); + } + ); +}; + /* ================================================================================ Math functions @@ -1676,7 +1880,7 @@ Ox.basename = function(str) { >>> Ox.basename("foo.bar") "foo.bar" */ - return str.replace(/^.*[\/\\]/g, ""); + return str.replace(/^.*[\/\\]/g, ''); }; Ox.char = String.fromCharCode; @@ -1687,8 +1891,12 @@ Ox.clean = function(str) { "foo bar" >>> Ox.clean(" foo bar ") "foo bar" + >>> Ox.clean(" foo \n bar ") + "foo\nbar" */ - return Ox.trim(str.replace(/\s+/g, " ")); + return Ox.map(str.split('\n'), function(str) { + return Ox.trim(str.replace(/\s+/g, ' ')); + }).join('\n'); }; Ox.contains = function(str, chr) { @@ -1718,6 +1926,14 @@ Ox.highlight = function(txt, str) { }; Ox.isValidEmail = function(str) { + /* + >>> Ox.isValidEmail("foo@bar.com") + true + >>> Ox.isValidEmail("foo.bar@foobar.co.uk") + true + >>> Ox.isValidEmail("foo@bar") + false + */ return !!/^[0-9A-Z\.\+\-_]+@(?:[0-9A-Z\-]+\.)+[A-Z]{2,6}$/i(str); } @@ -1738,7 +1954,8 @@ Ox.pad = function(str, len, pad, pos) { pad = Ox.repeat(pad || "0", len - str.length); pos = pos || "left"; str = pos == "left" ? pad + str : str + pad; - str = pos == "left" ? str.substr(str.length - len, str.length) : + str = pos == "left" ? + str.substr(str.length - len, str.length) : str.substr(0, len); return str; }; @@ -1758,7 +1975,7 @@ Ox.reverse = function(str) { Ox.reverse("foo") oof */ - return str.split("").reverse().join(""); + return str.split('').reverse().join(''); }; Ox.startsWith = function(str, sub) { @@ -1772,9 +1989,9 @@ Ox.startsWith = function(str, sub) { Ox.stripTags = function(str) { /* >>> Ox.stripTags("foo") - foo + "foo" */ - return str.replace(/(<.*?>)/gi, ""); + return str.replace(/(<.*?>)/gi, ''); }; Ox.toCamelCase = function(str) { @@ -1849,7 +2066,7 @@ Ox.trim = function(str) { // is in jQuery Ox.truncate = function(str, len, pad, pos) { /* >>> Ox.truncate("anticonstitutionellement", 16, "...", "center") - anticon...lement + "anticon...lement" */ var pad = pad || {}, pos = pos || "right", @@ -1870,14 +2087,45 @@ Ox.truncate = function(str, len, pad, pos) { return str; }; +Ox.words = function(str) { + /* + >>> Ox.words('He\'s referring to the "ill-conceived" AOL/TimeWarner merger--didn\'t you know?') + "he's,referring,to,the,ill-conceived,aol,timewarner,merger,didn't,you,know" + */ + var arr = str.toLowerCase().split(/\b/), + chr = "-'", + len = arr.length, + startsWithWord = !!/\w/(arr[0]); + arr.forEach(function(v, i) { + // find single occurrences of chars in chr + // that are not at the beginning or end of str + // and join the surrounding words with them + if ( + i > 0 && i < len - 1 && + v.length == 1 && chr.indexOf(v) > -1 + ) { + arr[i + 1] = arr[i - 1] + arr[i] + arr[i + 1]; + arr[i - 1] = arr[i] = ''; + } + }); + // remove elements that have been emptied above + arr = arr.filter(function(v) { + return v.length; + }); + // return words, not spaces or punctuation + return arr.filter(function(v, i) { + return i % 2 == !startsWithWord; + }); +} + Ox.wordwrap = function(str, len, sep, bal, spa) { /* - >>> Ox.wordwrap("Anticonstitutionellement, Paris s'eveille", 25, "
"") - Anticonstitutionellement,
Paris s'eveille + >>> Ox.wordwrap("Anticonstitutionellement, Paris s'eveille", 25, "
") + "Anticonstitutionellement,
Paris s'eveille" >>> Ox.wordwrap("Anticonstitutionellement, Paris s'eveille", 16, "
") - Anticonstitution
ellement, Paris
s'eveille + "Anticonstitution
ellement, Paris
s'eveille" >>> Ox.wordwrap("These are short words", 16, "
", true) - These are
short words + "These are
short words" */ var str = str === null ? '' : str.toString(), len = len || 80, diff --git a/build/js/ox.ui.js b/build/js/ox.ui.js index 5cdb0977..9a707304 100644 --- a/build/js/ox.ui.js +++ b/build/js/ox.ui.js @@ -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, '
') + 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] = $('') + .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 = $('') + .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); diff --git a/tests/png.html b/tests/png.html index 3409fca6..3b06c03b 100644 --- a/tests/png.html +++ b/tests/png.html @@ -12,51 +12,49 @@ diff --git a/tests/tests.js b/tests/tests.js index 01b1d115..e364454b 100644 --- a/tests/tests.js +++ b/tests/tests.js @@ -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 + ": " + - Ox.encodeHTML(command).replace(replace[0], replace[1]) + " " + - (success ? "=" : "!") + "=> " + Ox.encodeHTML(expected.toString()) + - (success ? "" : " ==> " + Ox.encodeHTML(result.toString())) + "" + Ox.basename(script) + ', line ' + l + ': ' + + Ox.encodeHTML(command).replace(replace[0], replace[1]) + ' ' + + (success ? '=' : '!') + '=> ' + Ox.encodeHTML(expected.toString()) + + (success ? '' : ' ==> ' + Ox.encodeHTML(result.toString())) + '' ) .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] + ')))' }); }); }