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-09 10:36:25 +02:00
parent abfea74565
commit 99dfdfd224
5 changed files with 86 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
index.css
View file

@ -7,7 +7,7 @@ body {
z-index: 1001; z-index: 1001;
} }
.OxCode .doclink { .OxSyntaxHighlighter .doclink {
text-decoration: underline; text-decoration: underline;
} }
.OxComment .doclink { .OxComment .doclink {
@ -18,6 +18,12 @@ body {
text-decoration: underline; text-decoration: underline;
} }
.OxThemeClassic .OxLabel.label,
.OxThemeModern .OxLabel.label {
border-color: transparent;
background-color: transparent;
}
.loading { .loading {
left: 0; left: 0;
right: 0; right: 0;
@ -31,7 +37,9 @@ body {
padding: 32px; padding: 32px;
margin: 32px auto 32px auto; margin: 32px auto 32px auto;
border-radius: 8px; border-radius: 8px;
font-size: 14px; //font-size: 14px;
//line-height: 20px;
font-size: 13px;
line-height: 20px; line-height: 20px;
} }
.page code, .page pre { .page code, .page pre {
@ -63,7 +71,7 @@ body {
font-size: 12px; font-size: 12px;
} }
.readme .text { .readme .text {
padding: 8px; padding: 16px;
font-size: 14px; font-size: 14px;
line-height: 20px; line-height: 20px;
} }
@ -92,18 +100,16 @@ body {
body.OxThemeClassic, body.OxThemeClassic,
.OxThemeClassic .screen { .OxThemeClassic .screen {
background-color: rgb(240, 240, 240); background-color: rgb(224, 224, 224);
} }
body.OxThemeModern, body.OxThemeModern,
.OxThemeModern .screen { .OxThemeModern .screen {
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);
} }
@ -118,10 +124,10 @@ body.OxThemeModern,
.OxThemeClassic .logo, .OxThemeClassic .logo,
.OxThemeClassic .page, .OxThemeClassic .page,
.OxThemeClassic .readme .OxSyntaxHighlighter { .OxThemeClassic .readme .OxSyntaxHighlighter {
box-shadow: 0 0 1px rgb(0, 0, 0) box-shadow: 0 0 1px rgb(160, 160, 160)
} }
.OxThemeModern .logo, .OxThemeModern .logo,
.OxThemeModern .page, .OxThemeModern .page,
.OxThemeModern .readme .OxSyntaxHighlighter { .OxThemeModern .readme .OxSyntaxHighlighter {
box-shadow: 0 0 1px rgb(255, 255, 255) box-shadow: 0 0 1px rgb(96, 96, 96)
} }

82
index.js
View file

@ -77,19 +77,21 @@ Ox.load(function() {
left: center - 128 + 'px', left: center - 128 + 'px',
top: middle - 128 + 'px', top: middle - 128 + 'px',
width: '256px', width: '256px',
height: '128px' height: '128px',
borderRadius: '32px'
} : { } : {
top: '8px', top: '6px',
left: '8px', left: '6px',
width: '48px', width: '48px',
height: '24px' height: '24px',
borderRadius: '6px'
}; };
} else if (element == 'menu') { } else if (element == 'menu') {
css = home ? { css = home ? {
top: middle + 56 + '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: '6px',
left: Math.ceil(center - app.$ui.menu.width() / 2) + 'px' left: Math.ceil(center - app.$ui.menu.width() / 2) + 'px'
}; };
} else if (element == 'screen') { } else if (element == 'screen') {
@ -99,8 +101,8 @@ Ox.load(function() {
top: middle + 96 + '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: '6px',
right: '8px' right: '6px'
}; };
} else if (element == 'warning') { } else if (element == 'warning') {
css = { css = {
@ -121,8 +123,8 @@ Ox.load(function() {
src = 'source/Ox.UI/themes/' + theme src = 'source/Ox.UI/themes/' + theme
+ '/svg/symbolLoadingAnimated.svg' + '/svg/symbolLoadingAnimated.svg'
} else if (element == 'logo') { } else if (element == 'logo') {
src = 'source/Ox.UI/themes/' + theme + '/png/logo' src = 'source/Ox.UI/themes/' + theme
+ (home || !app.state.loaded ? 128 : 16) + '.png' + '/png/logo128.png'
} }
return src; return src;
}, },
@ -240,7 +242,9 @@ Ox.load(function() {
patchButtonGroup: function($buttonGroup) { patchButtonGroup: function($buttonGroup) {
$buttonGroup.find('.OxButton').css({ $buttonGroup.find('.OxButton').css({
height: '22px', height: '22px',
fontSize: '12px' paddingLeft: '8px',
paddingRight: '8px',
fontSize: '13px'
}); });
$buttonGroup.find('.OxButton:first-child').css({ $buttonGroup.find('.OxButton:first-child').css({
//paddingLeft: '9px', //paddingLeft: '9px',
@ -257,10 +261,10 @@ Ox.load(function() {
code: [ code: [
new RegExp( new RegExp(
'<span class="OxIdentifier">Ox</span>' '<span class="OxIdentifier">Ox</span>'
+ '(<span class="OxOperator">\.</span>' + '(<span class="OxOperator">\\.</span>'
+ '<span class="OxIdentifier">UI</span>)?' + '<span class="OxIdentifier">UI</span>)?'
+ '<span class="OxOperator">\.</span>' + '<span class="OxOperator">\\.</span>'
+ '<span class="OxIdentifier">([\\$\\w]+)<\/span>', + '<span class="Ox\\w+">([\\$\\w]+)<\\/span>',
'g' 'g'
), ),
function (str) { function (str) {
@ -319,8 +323,14 @@ Ox.load(function() {
ui: { ui: {
doc: function() { doc: function() {
return Ox.DocPanel({ return Ox.DocPanel({
element: app.html.documentation, element: $('<div>')
files: app.data.documentation, .addClass('Ox___Serif page')
.css({
margin: '32px',
width: window.innerWidth - 640 + 'px'
})
.html(app.html.documentation),
files: app.data.docItems ? void 0 : app.data.documentation,
getModule: function(item) { getModule: function(item) {
var file = item.file.replace(/^dev\//, ''); var file = item.file.replace(/^dev\//, '');
return file.split('/')[0]; return file.split('/')[0];
@ -329,9 +339,9 @@ Ox.load(function() {
var file = item.file.replace(/^dev\//, ''); var file = item.file.replace(/^dev\//, '');
return item.section || file.split('/')[2].split('.')[0]; return item.section || file.split('/')[2].split('.')[0];
}, },
items: app.data.docItems || void 0,
path: 'dev/', path: 'dev/',
replace: [app.re.code], replace: [app.re.code]
selected: ''
}) })
.bindEvent({ .bindEvent({
select: function(data) { select: function(data) {
@ -339,10 +349,22 @@ Ox.load(function() {
'doc' + (data.id ? '/' + data.id : '') 'doc' + (data.id ? '/' + data.id : '')
) )
} }
})
.bindEventOnce({
load: function(data) {
app.data.docItems = data.items;
}
}); });
}, },
examples: function() { examples: function() {
return Ox.ExamplePanel({ return Ox.ExamplePanel({
element: $('<div>')
.addClass('Ox___Serif page')
.css({
margin: '32px',
width: window.innerWidth - 640 + 'px'
})
.html(app.html.examples),
examples: app.data.examples, examples: app.data.examples,
keywords: /\b(Ox\.[\w]+)\b/g, keywords: /\b(Ox\.[\w]+)\b/g,
path: 'examples/', path: 'examples/',
@ -404,7 +426,7 @@ Ox.load(function() {
page: function(page, replace) { page: function(page, replace) {
var $element = Ox.Container(); var $element = Ox.Container();
$('<div>') $('<div>')
.addClass('OxSerif page') .addClass('Ox____Serif page')
.html(app.html[page].replace(app.re.version[0], app.re.version[1])) .html(app.html[page].replace(app.re.version[0], app.re.version[1]))
.appendTo($element); .appendTo($element);
return $element; return $element;
@ -414,7 +436,7 @@ Ox.load(function() {
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: 40, size: 36,
tabs: app.data.pages tabs: app.data.pages
}) })
.bindEvent({ .bindEvent({
@ -423,7 +445,7 @@ Ox.load(function() {
} }
}), }),
$buttonGroup = $panel.find('.OxButtonGroup').css({ $buttonGroup = $panel.find('.OxButtonGroup').css({
top: '8px' top: '6px'
}); });
app.patchButtonGroup($buttonGroup); app.patchButtonGroup($buttonGroup);
return $panel; return $panel;
@ -471,8 +493,18 @@ Ox.load(function() {
$('.readme .item.selected').removeClass('selected'); $('.readme .item.selected').removeClass('selected');
id && $('#readme_' + id).addClass('selected'); id && $('#readme_' + id).addClass('selected');
Ox.get('readme/html/' + (id || '_readme') + '.html', function(html) { Ox.get('readme/html/' + (id || '_readme') + '.html', function(html) {
$text.html(html); $text.empty()
$text.find('.code').each(function() { .append(
id ? html
: $('<div>')
.addClass('Ox___Serif page')
.css({
margin: '16px',
width: window.innerWidth - 640 + 'px'
})
.html(html)
)
.find('.code').each(function() {
var $this = $(this); var $this = $(this);
$this.replaceWith( $this.replaceWith(
Ox.SyntaxHighlighter({ Ox.SyntaxHighlighter({
@ -550,10 +582,16 @@ Ox.load(function() {
if (current.page != app.history.page) { if (current.page != app.history.page) {
app.$ui.panel.select(current.page); app.$ui.panel.select(current.page);
} }
if (current.item != app.history.item) {
Ox.print('setting selected!')
app.$ui[current.page].options({selected: current.item});
}
/*
if (Ox.in(['readme', 'examples', 'doc'], current.page)) { if (Ox.in(['readme', 'examples', 'doc'], current.page)) {
Ox.print('cp',current.page, current.item) Ox.print('cp',current.page, current.item)
app.$ui[current.page].options({selected: current.item}); app.$ui[current.page].options({selected: current.item});
} }
*/
(!current.page || !app.history.page ? app.animate : Ox.void)(function() { (!current.page || !app.history.page ? app.animate : Ox.void)(function() {
//app.url.replace(url); //app.url.replace(url);
app.history = current; app.history = current;

4
readme/html/_documentation.html
View file

@ -1,2 +1,2 @@
<h1>Documentation</h1> <h1><b>Documentation</b></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> <p>Generated with <a href="#doc/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
View file

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

2
readme/html/_readme.html
View file

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