update index
This commit is contained in:
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);
|
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
159
index.js
|
@ -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>')
|
||||||
|
|
|
@ -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>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
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