diff --git a/readme/css/readme.css b/readme/css/readme.css new file mode 100644 index 00000000..444952ae --- /dev/null +++ b/readme/css/readme.css @@ -0,0 +1,27 @@ +.head img { + float: left; + width: 32px; + height: 16px; + margin: 4px 2px 4px 4px; +} +.head div { + float: left; + height: 15px; + padding: 1px 2px 0 2px; + margin: 4px 2px 4px 2px; + background: -webkit-linear-gradient(top, rgb(128, 128, 128), rgb(64, 64, 64)); + font-weight: bold; + font-size: 12px; +} +code { + border: 1px solid rgb(192, 192, 192); + background: rgb(255, 255, 255); +} +.text { + padding: 16px 24px 16px 24px; +} +.title { + font-weight: bold; + font-size: 16px; +} + diff --git a/readme/html/test1.html b/readme/html/test1.html new file mode 100644 index 00000000..d52bc914 --- /dev/null +++ b/readme/html/test1.html @@ -0,0 +1,7 @@ +

This is just a test

+ +

Foo bar baz.

+ +

foo: // this is some code

+ +
blockquote
\ No newline at end of file diff --git a/readme/html/test2.html b/readme/html/test2.html new file mode 100644 index 00000000..c23a4b20 --- /dev/null +++ b/readme/html/test2.html @@ -0,0 +1 @@ +

This is another test, with a longer title

\ No newline at end of file diff --git a/readme/index.html b/readme/index.html new file mode 100644 index 00000000..b045797e --- /dev/null +++ b/readme/index.html @@ -0,0 +1,13 @@ + + + + OxJS - readme + + + + + + + + \ No newline at end of file diff --git a/readme/js/readme.js b/readme/js/readme.js new file mode 100644 index 00000000..217e4fba --- /dev/null +++ b/readme/js/readme.js @@ -0,0 +1,129 @@ +Ox.load('UI', function() { + + var $ui = {}, items = []; + + renderUI(function() { + loadJSON(function(files) { + loadHTML(files, function() { + renderList(); + }); + }); + }); + + function loadJSON(callback) { + Ox.getJSON('json/readme.json', callback); + } + + function loadHTML(files, callback) { + files.forEach(function(file) { + Ox.get('html/' + file.name, function(html) { + var match = html.match(/

(.+)<\/p>/); + items.push({ + date: file.date, + file: file.name, + html: html, + title: match ? match[1] : file + }); + items.length == files.length && callback(items); + }); + }); + } + + function renderUI(callback) { + $ui.logo = $('').attr({href: 'https://oxjs.org'}) + .append( + $('').attr({src: '../source/Ox/png/OxJS64.png'}) + ); + $ui.title = $('').attr({href: 'https://oxjs.org/#readme'}) + .append( + $('

').css({color: 'rgb(192, 192, 192)'}).html('readme') + ); + $ui.bar = Ox.Bar({size: 24}) + .addClass('head') + .append($ui.logo) + .append($ui.title); + $ui.text = Ox.Element().addClass('text'), + $ui.inner = Ox.SplitPanel({ + elements: [ + { + element: Ox.Element(), + resizable: true, + resize: [256, 384, 512], + size: 384 + }, + { + element: $ui.text + } + ], + orientation: 'horizontal' + }); + $ui.outer = Ox.SplitPanel({ + elements: [ + { + element: $ui.bar, + size: 24 + }, + { + element: $ui.inner + } + ], + orientation: 'vertical' + }) + .appendTo(Ox.$body); + callback(); + } + + function renderList() { + Ox.print('?', items) + $ui.list = Ox.TextList({ + columns: [ + { + id: 'file', + unique: true + }, + { + id: 'title', + operator: '+', + title: 'Title', + visible: true, + width: 256 + }, + { + align: 'right', + format: function(value) { + return Ox.formatDate(value, '%B %e, %Y', true); + }, + id: 'date', + operator: '-', + title: 'Date', + visible: true, + width: 128 + } + ], + columnsVisible: true, + items: Ox.api(items, {unique: 'file'}), + max: 1, + min: 1, + selected: [items[0].file], + sort: [{key: 'date', operator: '-'}] + }) + .bindEvent({ + resize: function(data) { + this.resizeColumn('title', data.size - 128); + }, + select: selectText + }); + $ui.inner.replaceElement(0, $ui.list); + selectText({ids: [items[0].file]}); + } + + function selectText(data) { + Ox.print(data) + if (data.ids.length) { + $ui.text.html(Ox.getObject(items, 'file', data.ids[0]).html); + } else { + $ui.text.empty(); + } + } + +}); \ No newline at end of file diff --git a/readme/json/readme.json b/readme/json/readme.json new file mode 100644 index 00000000..7bddac46 --- /dev/null +++ b/readme/json/readme.json @@ -0,0 +1,10 @@ +[ + { + "date": "2012-04-01 04:01:12", + "name": "test2.html" + }, + { + "date": "2012-03-31 03:31:12", + "name": "test1.html" + } +] \ No newline at end of file diff --git a/source/Ox/png/OxJS16.png b/source/Ox/png/OxJS16.png new file mode 100644 index 00000000..da56604f Binary files /dev/null and b/source/Ox/png/OxJS16.png differ diff --git a/source/Ox/png/OxJS256.png b/source/Ox/png/OxJS256.png new file mode 100644 index 00000000..2baeefd2 Binary files /dev/null and b/source/Ox/png/OxJS256.png differ diff --git a/source/Ox/png/OxJS64.png b/source/Ox/png/OxJS64.png new file mode 100644 index 00000000..b8086b7c Binary files /dev/null and b/source/Ox/png/OxJS64.png differ