update index
This commit is contained in:
rolux
parent
ad75054336
commit
919f119422
6 changed files with 112 additions and 60 deletions
|
|
@ -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)
|
||||
}
|
||||
|
||||
|
|
|
|||
81
index.js
81
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,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>')
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
<h1>OxJS — A JavaScript Library for Web Applications</h1>
|
||||
<h1><b>OxJS — 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
2
readme/html/_documentation.html
Normal 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
2
readme/html/_examples.html
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
<h1>Examples</h1>
|
||||
<p>...</p>
|
||||
2
readme/html/_readme.html
Normal file
2
readme/html/_readme.html
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
<h1>Readme</h1>
|
||||
<p>The missing blog. The missing FAQ. The missing manual.</p>
|
||||
Loading…
Reference in a new issue