add first version of readme

2012-03-30 13:04:23 +02:00 · 2012-03-30 13:04:23 +02:00 · 9032821f14
commit 9032821f14
parent 044da383db
9 changed files with 187 additions and 0 deletions
--- a/readme/js/readme.js
+++ 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 class="title">(.+)<\/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 = $('<a>').attr({href: 'https://oxjs.org'})
+            .append(
+                $('<img>').attr({src: '../source/Ox/png/OxJS64.png'})
+            );
+        $ui.title = $('<a>').attr({href: 'https://oxjs.org/#readme'})
+            .append(
+                $('<div>').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();
+        }
+    }
+
+});