update index

index.css

@@ -99,9 +99,11 @@ body.OxThemeModern,
     background-color: rgb(16, 16, 16);
 }
 
+.OxThemeClassic .OxLabel.label,
 .OxThemeClassic .page {
     background-color: rgb(255, 255, 255);
 }
+.OxThemeModern .OxLabel.label,
 .OxThemeModern .page {
     background-color: rgb(0, 0, 0);
 }
@@ -123,4 +125,3 @@ body.OxThemeModern,
 .OxThemeModern .readme .OxSyntaxHighlighter {
     box-shadow: 0 0 1px rgb(255, 255, 255)
 }
-

index.js

@@ -39,6 +39,7 @@ Ox.load(function() {
             });
         },
         data: {
+            html: {},
             pages: [
                 {id: 'about', title: 'About'},
                 {id: 'readme', title: 'Readme'},
@@ -57,20 +58,20 @@ Ox.load(function() {
                 css = home ? {
                     top: middle + 16 + 'px',
                     left: center - 128 + 'px',
-                    width: '240px',
+                    width: '242px',
-                    height: '14px',
+                    height: '16px',
-                    fontSize: '11px',
+                    fontSize: '12px',
                     opacity: 1
                 } : {
-                    top: '26px',
+                    top: '35px',
                     left: '4px',
-                    width: '32px',
+                    width: '40px',
                     height: '4px',
                     fontSize: '1px',
                     opacity: 0
                 }
             } else if (element == 'loading') {
-                css.top = middle + 40 + 'px'
+                css.top = middle + 52 + 'px'
             } else if (element == 'logo') {
                 css = home || !app.state.loaded ? {
                     left: center - 128 + 'px',
@@ -80,12 +81,12 @@ Ox.load(function() {
                 } : {
                     top: '8px',
                     left: '8px',
-                    width: '32px',
+                    width: '48px',
-                    height: '16px'
+                    height: '24px'
                 };
             } else if (element == 'menu') {
                 css = home ? {
-                    top: middle + 48 + 'px',
+                    top: middle + 56 + 'px',
                     left: Math.ceil(center - app.$ui.menu.width() / 2) + 'px'
                 } : {
                     top: '8px',
@@ -95,7 +96,7 @@ Ox.load(function() {
                 css.opacity = home ? 1 : 0;
             } else if (element == 'switch') {
                 css = home ? {
-                    top: middle + 80 + 'px',
+                    top: middle + 96 + 'px',
                     right: Math.floor(center - app.$ui.switch.width() / 2) + 'px'
                 } : {
                     top: '8px',
@@ -126,6 +127,7 @@ Ox.load(function() {
             return src;
         },
         history: {},
+        html: {},
         init: function() {
             app.loadScreen(function() {
                 app.loadData(function() {
@@ -208,7 +210,13 @@ Ox.load(function() {
         loadData: function(callback) {
             Ox.getJSON('index.json', function(data) {
                 app.data = Ox.extend(app.data, data);
-                callback();                
+                app.data.pages.forEach(function(page) {
+                    var id = page.id == 'doc' ? 'documentation' : page.id;
+                    Ox.get('readme/html/_' + (id) + '.html', function(html) {
+                        app.html[id] = html;
+                        Ox.len(app.html) == app.data.pages.length && callback();
+                    });
+                })
             });
         },
         loadScreen: function(callback) {
@@ -229,6 +237,22 @@ Ox.load(function() {
                 resize: app.resize
             });
         },
+        patchButtonGroup: function($buttonGroup) {
+            $buttonGroup.find('.OxButton').css({
+                height: '22px',
+                fontSize: '12px'
+            });
+            $buttonGroup.find('.OxButton:first-child').css({
+                //paddingLeft: '9px',
+                borderTopLeftRadius: '6px',
+                borderBottomLeftRadius: '6px'
+            });
+            $buttonGroup.find('.OxButton:last-child').css({
+                //paddingRight: '9px',
+                borderTopRightRadius: '6px',
+                borderBottomRightRadius: '6px'
+            });
+        },
         re: {
             code: [
                 new RegExp(
@@ -295,6 +319,7 @@ Ox.load(function() {
         ui: {
             doc: function() {
                 return Ox.DocPanel({
+                        element: app.html.documentation,
                         files: app.data.documentation,
                         getModule: function(item) {
                             var file = item.file.replace(/^dev\//, '');
@@ -306,6 +331,14 @@ Ox.load(function() {
                         },
                         path: 'dev/',
                         replace: [app.re.code],
+                        selected: ''
+                    })
+                    .bindEvent({
+                        select: function(data) {
+                            app.url.set(
+                                'doc' + (data.id ? '/' + data.id : '')
+                            )
+                        }
                     });
             },
             examples: function() {
@@ -332,6 +365,11 @@ Ox.load(function() {
                         width: 256
                     })
                     .addClass('label animate')
+                    .css({
+                        paddingTop: '4px',
+                        paddingBottom: '4px',
+                        borderRadius: '6px'
+                    })
                     .bind({
                         click: app.toggle
                     });
@@ -349,7 +387,7 @@ Ox.load(function() {
                     .css(app.getCSS('logo'));
             },
             menu: function() {
-                return Ox.ButtonGroup({
+                var $menu = Ox.ButtonGroup({
                         buttons: app.data.pages,
                         min: 0,
                         selectable: true,
@@ -360,30 +398,35 @@ Ox.load(function() {
                             data.value && app.url.set(data.value);
                         }
                     })
+                app.patchButtonGroup($menu);
+                return $menu;
             },
             page: function(page, replace) {
                 var $element = Ox.Container();
-                Ox.get('readme/html/_' + page + '.html', function(html) {
                 $('<div>')
                     .addClass('OxSerif page')
-                        .html(html.replace(app.re.version[0], app.re.version[1]))
+                    .html(app.html[page].replace(app.re.version[0], app.re.version[1]))
                     .appendTo($element);
-                });
                 return $element;
             },
             panel: function() {
-                return Ox.TabPanel({
+                var $panel = Ox.TabPanel({
                             content: function(id) {
                                 return app.$ui[id] = app.ui[id] ? app.ui[id]() : app.ui.page(id);
                             },
-                    size: 32,
+                            size: 40,
                             tabs: app.data.pages
                         })
                         .bindEvent({
                             change: function(data) {
                                 app.state.loaded && app.url.set(data.selected);
                             }
+                        }),
+                    $buttonGroup = $panel.find('.OxButtonGroup').css({
+                        top: '8px'
                     });
+                app.patchButtonGroup($buttonGroup);
+                return $panel;
             },
             readme: function() {
                 var $list = Ox.Container().css({overflowY: 'scroll'}),
@@ -452,7 +495,7 @@ Ox.load(function() {
                 return Ox.$('<div>').addClass('screen animate');
             },
             switch: function() {
-                return Ox.ButtonGroup({
+                var $switch = Ox.ButtonGroup({
                         buttons: [
                             {id: 'classic', title: 'Light'},
                             {id: 'modern', title: 'Dark'}
@@ -466,6 +509,8 @@ Ox.load(function() {
                             app.setTheme(data.value);
                         }
                     });
+                app.patchButtonGroup($switch);
+                return $switch;
             },
             warning: function() {
                 return $('<div>')

readme/html/_about.html

@@ -1,8 +1,8 @@
-<h1>OxJS &mdash; A JavaScript Library for Web Applications</h1>
+<h1><b>OxJS &mdash; A JavaScript Library for Web Applications</b></h1>
 
 <p>TL;DR: <b>OxJS</b> will be out soon. But it already works. <a href="https://0xDB.org">See it in action</a>!</b></p>
 
-<p><b>OxJS</b> is a new JavaScript library. It was originially developed as part of <a href="pan.do/ra">pan.do/ra</a>, and is currently awaiting its first proper release. While it still has bugs, holes, design errors and lots of cruft, some parts of it may already be useful for a more general audience.</p>
+<p><b>OxJS</b> (pronounced oh-ex-jay-ess) is a new JavaScript library. It was originially developed as part of <a href="pan.do/ra">pan.do/ra</a>, and is currently awaiting its first proper release. While it still has bugs, holes, design errors and lots of cruft, some parts of it may already be useful for a more general audience.</p>
 
 <p>The core of <b>OxJS</b> is <code>Ox.js</code>, a general-purpose utility library (think underscore.js, but quite different). It provides <a href="#">lots</a> <a href="#">of</a> <a href="#">tools</a> <a href="#">for</a> <a href="#">dealing</a> <a href="#">with</a> <a href="#doc/Ox.formatDate">dates</a>, <a href="#doc/Ox.asinh">has</a> <a href="#doc/Ox.deg">all</a> <a href="#doc/Ox.log">the</a> <a href="#doc/Ox.mod">missing</a> <a href="#doc/Ox.rad">Math</a> <a href="#doc/Ox.sinh">functions</a> (<a href="#">plus</a> <a href="#">some</a> <a href="#">for</a> <a href="#">geographic</a> <a href="#">coordinates</a>), methods like <a href="#doc/Ox.range">range</a> or <a href="#doc/Ox.sub">sub</a> for those who like Python (and even <a href="#doc/Ox.forEach">some</a> <a href="#doc/Ox.loop">options</a> for those who never want to write a <code>for</code> loop again), can <a href="#doc/Ox.tokenize">tokenize</a> and <a href="#doc/Ox.minify">minify</a> JavaScript, comes with its own <a href="#doc/Ox.doc">documentation format</a>, including <a href="#doc/Ox.test">inline tests</a>, and can do about <a href="#readme/23_cool_things_you_can_do_with_oxjs">23 other cool things</a>.</p>
 

readme/html/_documentation.html

@@ -0,0 +1,2 @@
+<h1>Documentation</h1>
+<p>Generated with <a href="#documentation/Ox.doc"><code>Ox.doc</code></a>. Please note that parts of it may still be incomplete, incorrect or in flux.</p>

readme/html/_examples.html

@@ -0,0 +1,2 @@
+<h1>Examples</h1>
+<p>...</p>

readme/html/_readme.html

@@ -0,0 +1,2 @@
+<h1>Readme</h1>
+<p>The missing blog. The missing FAQ. The missing manual.</p>