From 919f119422e5f0b52b1685dca97e95c074e010d4 Mon Sep 17 00:00:00 2001 From: rolux Date: Sun, 8 Apr 2012 20:18:25 +0200 Subject: [PATCH] update index --- index.css | 3 +- index.js | 159 ++++++++++++++++++++------------ readme/html/_about.html | 4 +- readme/html/_documentation.html | 2 + readme/html/_examples.html | 2 + readme/html/_readme.html | 2 + 6 files changed, 112 insertions(+), 60 deletions(-) create mode 100644 readme/html/_documentation.html create mode 100644 readme/html/_examples.html create mode 100644 readme/html/_readme.html diff --git a/index.css b/index.css index a88042b7..f821afd6 100644 --- a/index.css +++ b/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) } - diff --git a/index.js b/index.js index 66f143b2..5755eebb 100644 --- a/index.js +++ b/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', - height: '14px', - fontSize: '11px', + width: '242px', + height: '16px', + 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', - height: '16px' + width: '48px', + 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,18 +319,27 @@ Ox.load(function() { ui: { doc: function() { return Ox.DocPanel({ - files: app.data.documentation, - getModule: function(item) { - var file = item.file.replace(/^dev\//, ''); - return file.split('/')[0]; - }, - getSection: function(item) { - var file = item.file.replace(/^dev\//, ''); - return item.section || file.split('/')[2].split('.')[0]; - }, - path: 'dev/', - replace: [app.re.code], - }); + element: app.html.documentation, + files: app.data.documentation, + getModule: function(item) { + var file = item.file.replace(/^dev\//, ''); + return file.split('/')[0]; + }, + getSection: function(item) { + var file = item.file.replace(/^dev\//, ''); + return item.section || file.split('/')[2].split('.')[0]; + }, + path: 'dev/', + replace: [app.re.code], + selected: '' + }) + .bindEvent({ + select: function(data) { + app.url.set( + 'doc' + (data.id ? '/' + data.id : '') + ) + } + }); }, examples: function() { return Ox.ExamplePanel({ @@ -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) { - $('
') - .addClass('OxSerif page') - .html(html.replace(app.re.version[0], app.re.version[1])) - .appendTo($element); - }); + $('
') + .addClass('OxSerif page') + .html(app.html[page].replace(app.re.version[0], app.re.version[1])) + .appendTo($element); return $element; }, panel: function() { - return Ox.TabPanel({ - content: function(id) { - return app.$ui[id] = app.ui[id] ? app.ui[id]() : app.ui.page(id); - }, - size: 32, - tabs: app.data.pages - }) - .bindEvent({ - change: function(data) { - app.state.loaded && app.url.set(data.selected); - } - }); + var $panel = Ox.TabPanel({ + content: function(id) { + return app.$ui[id] = app.ui[id] ? app.ui[id]() : app.ui.page(id); + }, + 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'}), @@ -399,21 +442,21 @@ Ox.load(function() { .addClass('readme'); app.data.readme.forEach(function(item, i) { var $item = $('
') - .addClass('item') - .attr({id: 'readme_' + item.id}) - .css({ - width: 224 - Ox.UI.SCROLLBAR_SIZE + 'px' - }) - .bind({ - click: function(e) { - if (!$(this).is('.selected')) { - selectItem(item.id); - } else if (e.metaKey) { - selectItem(); + .addClass('item') + .attr({id: 'readme_' + item.id}) + .css({ + width: 224 - Ox.UI.SCROLLBAR_SIZE + 'px' + }) + .bind({ + click: function(e) { + if (!$(this).is('.selected')) { + selectItem(item.id); + } else if (e.metaKey) { + selectItem(); + } } - } - }) - .appendTo($list); + }) + .appendTo($list); $('
') .addClass('OxSerif title') .html(item.title) @@ -452,7 +495,7 @@ Ox.load(function() { return Ox.$('
').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 $('
') diff --git a/readme/html/_about.html b/readme/html/_about.html index da29a77b..5fee8016 100644 --- a/readme/html/_about.html +++ b/readme/html/_about.html @@ -1,8 +1,8 @@ -

OxJS — A JavaScript Library for Web Applications

+

OxJS — A JavaScript Library for Web Applications

TL;DR: OxJS will be out soon. But it already works. See it in action!

-

OxJS is a new JavaScript library. It was originially developed as part of pan.do/ra, 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.

+

OxJS (pronounced oh-ex-jay-ess) is a new JavaScript library. It was originially developed as part of pan.do/ra, 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.

The core of OxJS is Ox.js, a general-purpose utility library (think underscore.js, but quite different). It provides lots of tools for dealing with dates, has all the missing Math functions (plus some for geographic coordinates), methods like range or sub for those who like Python (and even some options for those who never want to write a for loop again), can tokenize and minify JavaScript, comes with its own documentation format, including inline tests, and can do about 23 other cool things.

diff --git a/readme/html/_documentation.html b/readme/html/_documentation.html new file mode 100644 index 00000000..224d377c --- /dev/null +++ b/readme/html/_documentation.html @@ -0,0 +1,2 @@ +

Documentation

+

Generated with Ox.doc. Please note that parts of it may still be incomplete, incorrect or in flux.

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

Examples

+

...

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

Readme

+

The missing blog. The missing FAQ. The missing manual.

\ No newline at end of file