From a58350a29ebd423a369ee03d68e27e28afc46cf5 Mon Sep 17 00:00:00 2001 From: rolux Date: Sat, 7 May 2011 19:25:34 +0200 Subject: [PATCH] add test browser --- demos/test/app.html | 16 -- demos/test/app.js | 44 --- demos/test/index.html | 595 +-------------------------------------- demos/test/js/test.js | 97 +++++++ demos/test/list.css | 8 - demos/test/list.html | 12 - demos/test/list.js | 637 ------------------------------------------ demos/test/menu.html | 10 - demos/test/menu.js | 150 ---------- demos/test/png/b.png | Bin 2792 -> 0 bytes demos/test/png/g.png | Bin 2792 -> 0 bytes demos/test/png/r.png | Bin 2792 -> 0 bytes demos/test/test.html | 9 - demos/test/test.js | 232 --------------- source/Ox.js | 101 ++++--- 15 files changed, 160 insertions(+), 1751 deletions(-) delete mode 100644 demos/test/app.html delete mode 100644 demos/test/app.js create mode 100644 demos/test/js/test.js delete mode 100644 demos/test/list.css delete mode 100644 demos/test/list.html delete mode 100644 demos/test/list.js delete mode 100644 demos/test/menu.html delete mode 100644 demos/test/menu.js delete mode 100644 demos/test/png/b.png delete mode 100644 demos/test/png/g.png delete mode 100644 demos/test/png/r.png delete mode 100644 demos/test/test.html delete mode 100644 demos/test/test.js diff --git a/demos/test/app.html b/demos/test/app.html deleted file mode 100644 index 3c654b33..00000000 --- a/demos/test/app.html +++ /dev/null @@ -1,16 +0,0 @@ - - - - - - - - - -
- [32] Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit amet, consectetur, adipisci[ng] velit, sed quia non numquam [do] eius modi tempora inci[di]dunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur? -
- [33] At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id, quod maxime placeat, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. -
- - diff --git a/demos/test/app.js b/demos/test/app.js deleted file mode 100644 index fb24f9f0..00000000 --- a/demos/test/app.js +++ /dev/null @@ -1,44 +0,0 @@ -Ox.UI(function() { - var app = new Ox.App({ - requestURL: "http://blackbook.local:8000/api/" - }), - $dialog = new Ox.Dialog({ - title: "Application Error", - buttons: [ - { - value: "Change Title", - click: function() { - Ox.print("click to change title") - $dialog.options({ - title: "New Title" - }); - $dialog.$buttons[0].toggleDisabled(); - } - }, - { - value: "Close", - click: function() { - $dialog.close(); - } - } - ] - }); - app.request("error"); - //app.request("hello"); - /* - app.request("login", {"username": "test", "password": "test"}, function(result) { - Ox.print(result); - if (result.status.code == 200) { - Ox.print(result); - app.request("preferences", function(result) { - Ox.print(result.data.preferences); - }); - } - else if (result.status.code == 403) { - alert(403); - //$dialog.open(); - } else if (result.status.code == 500) { - } - }); - */ -}); diff --git a/demos/test/index.html b/demos/test/index.html index c5c1d049..efa2045b 100644 --- a/demos/test/index.html +++ b/demos/test/index.html @@ -1,595 +1,10 @@ - + + OxJS Test Demo - - - - + + - + \ No newline at end of file diff --git a/demos/test/js/test.js b/demos/test/js/test.js new file mode 100644 index 00000000..791f52ce --- /dev/null +++ b/demos/test/js/test.js @@ -0,0 +1,97 @@ +Ox.load('UI', { + debug: true, + theme: 'classic' +}, function() { + var colors = [ + [[255, 64, 64], [224, 32, 32]], + [[64, 192, 64], [32, 160, 32]] + ], + gradients = [ + '-moz-linear-gradient(', + '-webkit-gradient(linear, ' + ]; + var $foo = $('
') + .css({ + width: window.innerWidth, + height: window.innerHeight, + overflowY: 'scroll' + }) + .appendTo(Ox.UI.$body); + Ox.test(Ox.PATH + 'Ox.js', function(tests) { + var total = tests.length, + succeeded = tests.filter(function(test) { + return test.success; + }).length, + failed = total - succeeded, + names = Ox.unique(tests.map(function(test) { + return test.name; + })).sort(); + testsByName = {}; + tests.forEach(function(test) { + if (!(test.name in testsByName)) { + testsByName[test.name] = []; + } + testsByName[test.name].push(test); + }); + getBar(total == succeeded) + .html( + '' + total + ' tests, ' + + succeeded + ' succeeded, ' + failed + ' failed' + ) + .appendTo($foo); + names.forEach(function(name) { + var tests = testsByName[name], + total = tests.length, + succeeded = tests.filter(function(test) { + return test.success; + }).length, + failed = total - succeeded, + classname = name.replace('.', ''); + getBar(total == succeeded) + .html( + '' + name + ' — ' + total + + ' test' + (total == 1 ? '' : 's') + ', ' + + succeeded + ' succeeded, ' + failed + ' failed' + ) + .click(function() { + $('.' + classname).toggle(); + }) + .appendTo($foo); + tests.forEach(function(test) { + getBar(test.success, true) + .addClass(classname) + .html( + Ox.repeat(' ', 4) + + '> ' + Ox.encodeHTML(test.statement) + ' ==> ' + + Ox.encodeHTML(test.actual) + + (test.success ? '' : ' !=> ' + Ox.encodeHTML(test.expected)) + ) + .hide() + .appendTo($foo); + }); + }); + }); + function getBar(success, darker) { + var $div = $('
') + .css({ + width: window.innerWidth - Ox.UI.SCROLLBAR_SIZE, + height: '15px', + padding: '4px 8px 4px 8px', + fontFamily: 'Menlo, Monaco, Courier', + fontSize: '12px' + }); + gradients.forEach(function(gradient) { + $div.css({ + background: gradient + 'left top, left bottom, from(rgb(' + + getColor(success, 0) + ')), to(rgb(' + + getColor(success, 1) + ')))' + }); + }); + function getColor(success, i) { + return colors[+success][i].map(function(color) { + return color - (darker || 0) * 32; + }).join(', ') + } + return $div; + } +}); \ No newline at end of file diff --git a/demos/test/list.css b/demos/test/list.css deleted file mode 100644 index bb75e1db..00000000 --- a/demos/test/list.css +++ /dev/null @@ -1,8 +0,0 @@ -#statusBar { - text-align: center; -} -#totals { - margin-top: 2px; - font-size: 9px; - color: rgb(192, 192, 192); -} \ No newline at end of file diff --git a/demos/test/list.html b/demos/test/list.html deleted file mode 100644 index d23034e1..00000000 --- a/demos/test/list.html +++ /dev/null @@ -1,12 +0,0 @@ - - - - oxjs List Demo - - - - - - - - diff --git a/demos/test/list.js b/demos/test/list.js deleted file mode 100644 index 1ad65c81..00000000 --- a/demos/test/list.js +++ /dev/null @@ -1,637 +0,0 @@ -Ox.UI(function() { - Ox.theme("modern"); - var $body = $("body"), - $document = $(document), - app = new Ox.App({ - // requestURL: "http://blackbook.local:8000/api/" - requestURL: "http://lion.oil21.org:8000/api/" - }), - findCondition = {}, - groups = [ - { - conditions: [], - id: "director", - title: "Director" - }, - { - conditions: [], - id: "country", - title: "Country" - }, - { - conditions: [], - id: "year", - title: "Year" - }, - { - conditions: [], - id: "language", - title: "Language" - }, - { - conditions: [], - id: "genre", - title: "Genre" - } - ], - $group = [], - elements = [], - rightPanelWidth = $document.width() - 256; - - $.each(groups, function(i, v) { - var size = rightPanelWidth / 5 + (rightPanelWidth % 5 > i); - $group[i] = new Ox.TextList({ - columns: [ - { - align: "left", - id: "name", - operator: v.id == "year" ? "-" : "+", - title: v.title, - unique: true, - visible: true, - width: size - 40 - ($.browser.mozilla ? 16 : 12) - }, - { - align: "right", - id: "items", - operator: "-", - title: "#", - visible: true, - width: 40 - } - ], - id: "group_" + v.id, - request: function(options) { - delete options.keys; - app.request("find", $.extend(options, { - group: v.id, - query: constructQuery() - }), options.callback); - }, - sort: [ - { - key: v.id == "year" ? "name" : "items", - operator: "-" - } - ] - }); - elements.push({ - element: $group[i], - resizable: true, - size: size - }); - }); - - var $groupsInnerPanel = new Ox.SplitPanel({ - elements: [ - elements[1], - elements[2], - elements[3] - ], - orientation: "horizontal" - }), - - $groupsOuterPanel = new Ox.SplitPanel({ - elements: [ - elements[0], - { - element: $groupsInnerPanel - }, - elements[4] - ], - orientation: "horizontal" - }) - - $list = constructList("text"); - - $toolBar = Ox.Bar({ - size: 24 - }), - - $button = Ox.Button({ - id: "groupsButton", - value: ["Show Groups", "Hide Groups"] - }).css({ - float: "left", - margin: "4px" - }).width(80).appendTo($toolBar), - - $select = Ox.Select({ - id: "viewSelect", - items: [ - { - checked: true, - id: "list", - title: "View as List" - }, - { - id: "icons", - title: "View as Icons" - }, - { - id: "clips", - title: "View with Clips" - }, - { - id: "timelines", - title: "View with Timelines" - }, - { - id: "maps", - title: "View with Maps" - }, - { - id: "calendars", - title: "View with Calendars" - }, - { - id: "clip", - title: "View as Clips" - }, - { - id: "map", - title: "View on Map" - }, - { - id: "calendar", - title: "View on Calendar" - }, - ] - }).css({ - float: "left", - margin: "4px" - }).width(120).appendTo($toolBar); - - $input = new Ox.Input({ - autocomplete: function(key, value, callback) { - Ox.print("autocomplete", key, value); - value === "" && Ox.print("Warning: autocomplete function should never be called with empty value"); - if (key == "all") { - callback(); - } else { - app.request("find", { - keys: [key], - query: { - conditions: [ - { - key: key, - value: value, - operator: "" - } - ], - operator: "" - }, - sort: [ - { - key: key, - operator: "+" - } - ], - range: [0, 10] - }, function(result) { - Ox.print("calling callback", result.data.items) - callback($.map(result.data.items, function(v) { - return v.title; - })) - }); - } - }, - clear: true, - highlight: true, - id: "find", - label: [ - { id: "all", title: "Find: All" }, - { id: "title", title: "Find: Title" }, - { id: "director", title: "Find: Director" }, - { id: "country", title: "Find: Country" }, - { id: "year", title: "Find: Year" }, - { id: "language", title: "Find: Language" }, - { id: "writer", title: "Find: Writer" }, - { id: "producer", title: "Find: Producer" }, - { id: "cinematographer", title: "Find: Cinematographer" }, - { id: "editor", title: "Find: Editor" }, - { id: "actor", title: "Find: Actor" }, - { id: "character", title: "Find: Character" }, - { id: "name", title: "Find: Name" }, - { id: "genre", title: "Find: Genre" }, - { id: "keyword", title: "Find: Keyword" }, - { id: "summary", title: "Find: Summary" }, - { id: "dialog", title: "Find: Dialog" } - ], - labelWidth: 85 - }).css({ - float: "right", - margin: "4px" - }).width(300).appendTo($toolBar); - - $contentPanel = new Ox.SplitPanel({ - elements: [ - { - element: $groupsOuterPanel, - size: 128 - }, - { - element: $list - } - ], - orientation: "vertical" - }), - - $statusBar = new Ox.Bar({ - size: 16 - }).attr({ - id: "statusBar" - }), - - $totals = new Ox.Element() - .attr({ - id: "totals" - }) - .appendTo($statusBar), - - $leftPanel = new Ox.Container(), - - $rightPanel = new Ox.SplitPanel({ - elements: [ - { - element: $toolBar, - size: 24 - }, - { - element: $contentPanel - }, - { - element: $statusBar, - size: 16 - } - ], - orientation: "vertical" - }), - - $loadingIcon = new Ox.LoadingIcon({ - size: "medium" - }); - - $mainMenu = new Ox.MainMenu({ - extras: [ - $loadingIcon - ], - menus: [ - { - id: "oxdb", - title: "OxDB", - items: [ - { id: "about", title: "About" } - ] - }, - { - id: "sort", - title: "Sort", - items: [ - { id: "sort_movies", title: "Sort Movies by", items: [ - { checked: false, group: "sort_movies", id: "title", title: "Title"}, - { checked: false, group: "sort_movies", id: "director", title: "Director" }, - { checked: false, group: "sort_movies", id: "country", title: "Country" }, - { checked: true, group: "sort_movies", id: "year", title: "Year" }, - { checked: false, group: "sort_movies", id: "language", title: "Language" }, - { checked: false, group: "sort_movies", id: "runtime", title: "Runtime" }, - { checked: false, group: "sort_movies", id: "genre", title: "Genre" }, - ] }, - { id: "order_movies", title: "Order Movies", items: [ - { checked: false, group: "order_movies", id: "ascending", title: "Ascending"}, - { checked: true, group: "order_movies", id: "descending", title: "Descending" }, - ] } - ] - }, - { - id: "debug", - title: "Debug", - items: [ - { id: "show_query", title: "Show Query" } - ] - } - ], - size: "medium" - }), - - $mainPanel = new Ox.SplitPanel({ - elements: [ - { - element: $leftPanel, - size: 256 - }, - { - element: $rightPanel - } - ] - }), - - $appPanel = Ox.SplitPanel({ - elements: [ - { - element: $mainMenu, - size: 20 - }, - { - element: $mainPanel - } - ], - orientation: "vertical" - }).appendTo($body); - - Ox.Request.requests() && $loadingIcon.start(); - Ox.Event.bind(null, "requestStart", function() { - Ox.print("start") - $loadingIcon.start(); - }); - Ox.Event.bind(null, "requestStop", function() { - Ox.print("stop") - $loadingIcon.stop(); - }); - - Ox.Event.bind(null, "change_viewSelect", function(event, data) { - $list.replaceWith(constructList(data.id)); - }); - - Ox.Event.bind(null, "submit_find", function(event, data) { - findCondition = { - key: data.key == "all" ? "" : data.key, - value: data.value, - operator: "" - }; - $.each(groups, function(i, group) { - groups[i].conditions = []; - $group[i].options({ - request: function(options) { - delete options.keys; - return app.request("find", $.extend(options, { - group: group.id, - query: constructQuery(group.id) - }), options.callback); - } - }); - }); - $list.options({ - request: function(options) { - return app.request("find", $.extend(options, { - query: constructQuery() - }), options.callback); - } - }) - }); - - $.each(groups, function(i, group) { - Ox.Event.bind(null, "select_group_" + group.id, function(event, data) { - $list.options({ - request: function(options) { - groups[i].conditions = $.map(data.ids, function(v) { - return { - key: group.id, - value: v, - operator: "=" - }; - }); - return app.request("find", $.extend(options, { - query: constructQuery() - }), options.callback); - } - }); - $.each(groups, function(i_, group_) { - if (i_ != i) { - $group[i_].options({ - request: function(options) { - delete options.keys; - return app.request("find", $.extend(options, { - group: group_.id, - query: constructQuery(group_.id) - }), options.callback); - } - }); - } - }); - }); - }); - Ox.Event.bind(null, "change_sort_movies", function(event, data) { - - }); - Ox.Event.bind(null, "load_list", function(event, data) { - $totals.html(constructStatus({ - "total": data, - "selected": {} - })); - var html = [ - Ox.formatNumber(data.items) + " movie" + (data.items != 1 ? "s" : ""), - Ox.formatDuration(data.runtime, "medium"), - data.files + " file" + (data.files != 1 ? "s" : ""), - Ox.formatDuration(data.duration, "short"), - Ox.formatValue(data.size, "B"), - Ox.formatValue(data.pixels, "px") - ]; - $totals.html("Total: " + constructStatus(data) + " — Selected: " + constructStatus({ - duration: 0, - files: 0, - items: 0, - pixels: 0, - runtime: 0, - size: 0 - })); - }); - Ox.Event.bind(null, "sort_list", function(event, data) { - - }); - Ox.Event.bind(null, "select_list", function(event, data) { - - }); - Ox.Event.bind(null, "click_show_query", function(event, data) { - var query = constructQuery(), - html = "Conditions

" + $.map(query.conditions, function(v) { - return v.key + " " + v.operator + " " + v.value; - }).join("
") + "

Operator: " + query.operator, - $dialog = new Ox.Dialog({ - title: "Show Query", - buttons: [ - { - value: "Close", - click: function() { - $dialog.close(); - } - } - ] - }) - .append(html) - .open(); - }); - - function constructList(view) { - var $list; - if (view == "text") { - $list = new Ox.TextList({ - columns: [ - { - align: "left", - id: "id", - operator: "+", - title: "ID", - unique: true, - visible: true, - width: 80 - }, - { - align: "left", - id: "title", - operator: "+", - title: "Title", - visible: true, - width: 160 - }, - { - align: "left", - id: "director", - operator: "+", - title: "Director", - visible: true, - width: 160 - }, - { - align: "left", - id: "country", - operator: "+", - title: "Country", - visible: true, - width: 120 - }, - { - align: "right", - id: "year", - operator: "-", - title: "Year", - visible: true, - width: 60 - }, - { - align: "left", - id: "language", - operator: "+", - title: "Language", - visible: true, - width: 120 - }, - { - align: "right", - id: "runtime", - operator: "-", - title: "Runtime", - visible: true, - width: 80 - }, - { - align: "left", - id: "genre", - operator: "+", - title: "Genre", - visible: true, - width: 120 - }, - { - align: "right", - id: "rating", - operator: "-", - title: "Rating", - width: 80 - }, - { - align: "right", - id: "votes", - operator: "-", - title: "Votes", - width: 80 - } - ], - id: "list", - request: function(options) { - app.request("find", $.extend(options, { - query: constructQuery() - }), options.callback); - }, - sort: [ - { - key: "director", - operator: "+" - } - ] - }); - } else if (view == "icons") { - $list = new Ox.IconList({ - id: "list", - item: function(data, sort, size) { - return { - height: data.posterHeight, - id: data["id"], - info: data[$.inArray(sort[0].key, ["title", "director"]) > -1 ? "year" : sort[0].key], - title: data.title + (data.director ? " (" + data.director + ")" : ""), - url: "http://0xdb.org/" + data.id + "/poster." + size + "." + "jpg", - width: data.posterWidth - }; - }, - keys: ["director", "id", "posterHeight", "posterWidth", "posterURL", "title"], - request: function(options) { - app.request("find", $.extend(options, { - query: constructQuery() - }), options.callback); - }, - size: 128, - sort: [ - { - key: "director", - operator: "+" - } - ], - unique: "id" - }); - } - return $list; - } - - function constructQuery(groupId) { - var conditions = $.merge(!Ox.isUndefined(findCondition.key) ? [findCondition] : [], $.map(groups, function(v, i) { - if (v.id != groupId) { - return v.conditions; - } - })); - /* - Ox.print("conditions", conditions, "groups conditions", $.map(groups, function(v) { - return v.conditions; - })); - */ - return { - conditions: conditions, - operator: conditions.length ? "," : "" - }; - } - - function constructStatus(data) { - var html = []; - $.each(data, function(k, v) { - html.push(Ox.toTitleCase(k) + ": " + [ - Ox.formatNumber(data.items) + " movie" + (data.items != 1 ? "s" : ""), - Ox.formatDuration(data.runtime, "medium"), - data.files + " file" + (data.files != 1 ? "s" : ""), - Ox.formatDuration(data.duration, "short"), - Ox.formatValue(data.size, "B"), - Ox.formatValue(data.pixels, "px") - ].join(", ")); - }) - return html.join(" — "); - - } - - function getGroupById(id) { // unused - $.each(groups, function(i, v) { - if (v.id == id) { - return i; - } - }); - return -1; - } - -}); diff --git a/demos/test/menu.html b/demos/test/menu.html deleted file mode 100644 index 6051602b..00000000 --- a/demos/test/menu.html +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - - - - diff --git a/demos/test/menu.js b/demos/test/menu.js deleted file mode 100644 index 38803d32..00000000 --- a/demos/test/menu.js +++ /dev/null @@ -1,150 +0,0 @@ -Ox.UI(function() { - var button = new Ox.Button({ - value: "First", - }).css({ - position: "absolute", - left: "16px", - top: "16px", - width: "64px", - textAlign: "left" - }).appendTo($("body")), - menu = new Ox.Menu({ - element: button, - id: "select", - items: [ - { - checked: true, - group: "123", - id: "first", - title: "First" - }, - { - checked: false, - group: "123", - id: "second", - title: "Second" - }, - { - checked: false, - group: "123", - id: "third", - title: "Third" - }, - {}, - { - checked: false, - group: "123", - id: "fourth", - title: "Fourth" - }, - { - checked: false, - disabled: true, - group: "123", - id: "fifth", - title: "Fifth" - }, - { - checked: false, - group: "123", - id: "sixth", - title: "Sixth" - }, - {}, - { - id: "more", - items: [ - { - checked: true, - group: "789", - id: "seventh", - title: "Seventh" - }, - { - checked: false, - group: "789", - id: "eighth", - title: "Eighth" - }, - { - checked: false, - group: "789", - id: "ninth", - title: "Ninth" - }, - ], - title: "More", - }, - { - id: "even_more", - items: [ - { - checked: true, - group: "101112", - id: "tenth", - title: "Tenth" - }, - { - checked: false, - group: "101112", - id: "eleventh", - title: "Eleventh" - }, - { - checked: false, - group: "101112", - id: "twelfth", - title: "Twelfth" - }, - ], - title: "Even More" - }, - { - id: "nothing_more", - items: [ - { - disabled: true, - id: "nothing", - title: "Nothing" - } - ], - title: "Nothing More" - }, - {}, - { - id: "foo", - title: "Foo" - }, - { - id: "bar", - title: "Bar" - }, - { - id: "baz", - title: "Baz" - } - ] - }); - button - .click(function() { - $(this).blur(); // fix for firefox - menu.toggleMenu(); - }) - .bindEvent("OxClickMenu." + menu.id, function(event, data) { - button.options({ - value: data.value - }); - }); - $select = $("