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