0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

update index

Browse source
This commit is contained in:
rolux 2012-04-08 20:18:25 +02:00
parent ad75054336
commit 919f119422
6 changed files with 112 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
index.css
View file

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

159
index.js
View file

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

4
readme/html/_about.html
View file

@ -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>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> <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>

2
readme/html/_documentation.html Normal file
View file

@ -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>

2
readme/html/_examples.html Normal file
View file

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

2
readme/html/_readme.html Normal file
View file

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