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);
}
.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)
}

159
index.js
View file

@ -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) {
$('<div>')
.addClass('OxSerif page')
.html(html.replace(app.re.version[0], app.re.version[1]))
.appendTo($element);
});
$('<div>')
.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 = $('<div>')
.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);
$('<div>')
.addClass('OxSerif title')
.html(item.title)
@ -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>')

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

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>