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

improve index page

Browse source
This commit is contained in:
rolux 2012-04-07 16:42:57 +02:00
parent adbecb75a2
commit dfb96e6649
2 changed files with 156 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

90
index.css
View file

@ -1,12 +1,6 @@
body { body {
margin: 0; margin: 0;
} }
body.OxThemeClassic {
background-color: rgb(240, 240, 240);
}
body.OxThemeModern {
background-color: rgb(16, 16, 16);
}
.animate, .loading { .animate, .loading {
position: absolute; position: absolute;
@ -32,26 +26,14 @@ body.OxThemeModern {
margin: auto; margin: auto;
} }
.OxThemeClassic .logo {
box-shadow: 0 0 1px rgb(0, 0, 0)
}
.OxThemeModern .logo {
box-shadow: 0 0 1px rgb(255, 255, 255)
}
.page { .page {
width: 512px; width: 576px;
padding: 32px; padding: 32px;
margin: 16px auto 16px auto; margin: 32px auto 32px auto;
border-width: 1px;
border-style: solid;
border-radius: 8px; border-radius: 8px;
font-size: 14px; font-size: 14px;
line-height: 20px; line-height: 20px;
} }
.page blockquote {
margin-left: 28px;
}
.page code, .page pre { .page code, .page pre {
font-size: 12px; font-size: 12px;
} }
@ -63,23 +45,75 @@ body.OxThemeModern {
font-size: 16px; font-size: 16px;
line-height: 22px; line-height: 22px;
} }
.OxThemeClassic .page {
border-color: rgb(208, 208, 208); .readme .item {
background: rgb(255, 255, 255); padding: 4px 8px 4px 8px;
border-radius: 8px;
margin: 8px;
cursor: pointer;
} }
.OxThemeModern .page { .readme .item.selected {
border-color: rgb(48, 48, 48); cursor: normal;
background: rgb(0, 0, 0);
} }
.readme .item .title {
font-size: 14px;
}
.readme .item .date {
margin-top: 2px;
font-size: 12px;
}
.readme .text {
padding: 8px;
font-size: 14px;
line-height: 20px;
}
.readme .text code, .readme .text pre {
font-size: 12px;
}
.readme .text h1 {
font-size: 18px;
line-height: 24px;
}
.readme .text h2 {
font-size: 16px;
line-height: 22px;
}
.screen { .screen {
width: 100%; width: 100%;
height: 100%; height: 100%;
z-index: 1000; z-index: 1000;
} }
body.OxThemeClassic,
.OxThemeClassic .screen { .OxThemeClassic .screen {
background-color: rgba(240, 240, 240, 1); background-color: rgb(240, 240, 240);
} }
body.OxThemeModern,
.OxThemeModern .screen { .OxThemeModern .screen {
background-color: rgba(16, 16, 16, 1); background-color: rgb(16, 16, 16);
}
.OxThemeClassic .page {
background: rgb(255, 255, 255);
}
.OxThemeModern .page {
background: rgb(0, 0, 0);
}
.OxThemeClassic .logo,
.OxThemeClassic .page {
box-shadow: 0 0 1px rgb(0, 0, 0)
}
.OxThemeModern .logo,
.OxThemeModern .page {
box-shadow: 0 0 1px rgb(255, 255, 255)
}
.OxThemeClassic .readme .item.selected {
background: rgb(224, 224, 224);
}
.OxThemeModern .readme .item.selected {
background: rgb(32, 32, 32);
} }

123
index.js
View file

@ -28,14 +28,23 @@ Ox.load(function() {
}); });
app.$ui.panel.find('.OxButtonGroup').css({opacity: 1}); app.$ui.panel.find('.OxButtonGroup').css({opacity: 1});
app.$ui.screen.hide(); app.$ui.screen.hide();
app.$ui.label.show(); app.$ui.label.hide();
app.$ui.menu.hide().options({value: ''}); app.$ui.menu.hide().options({value: ''});
} }
} : void 0 } : void 0
); );
}); });
}, },
data: {}, data: {
sections: [
{id: 'about', title: 'About'},
{id: 'readme', title: 'Readme'},
{id: 'examples', title: 'Examples'},
{id: 'doc', title: 'Documentation'},
{id: 'downloads', title: 'Downloads'},
{id: 'development', title: 'Development'}
]
},
getCSS: function(element) { getCSS: function(element) {
var css = {}, var css = {},
home = !app.url.get(), home = !app.url.get(),
@ -123,7 +132,7 @@ Ox.load(function() {
app.$ui.panel = app.ui.panel() app.$ui.panel = app.ui.panel()
.select(app.user('url')) .select(app.user('url'))
.appendTo(Ox.$body); .appendTo(Ox.$body);
// jqueryfy // jqueryfy so that we can animate
['screen', 'logo', 'loading'].forEach(function(element) { ['screen', 'logo', 'loading'].forEach(function(element) {
app.$ui[element] = $('.' + element); app.$ui[element] = $('.' + element);
}); });
@ -177,7 +186,7 @@ Ox.load(function() {
}, },
loadData: function(callback) { loadData: function(callback) {
Ox.getJSON('index.json', function(data) { Ox.getJSON('index.json', function(data) {
app.data = data; app.data = Ox.extend(app.data, data);
callback(); callback();
}); });
}, },
@ -219,6 +228,16 @@ Ox.load(function() {
comment: [ comment: [
/\b(Ox\.\w+)\b/g, /\b(Ox\.\w+)\b/g,
'<a href="#doc/$1" class="OxMonospace doclink">$1</a>' '<a href="#doc/$1" class="OxMonospace doclink">$1</a>'
],
version: [
'{version}',
function() {
return (
/:\/\/oxjs.org\//.test(window.location.href)
? 'The latest version is'
: 'You\'re currently running version'
) + ' <code>' + app.data.version + '.</code>'
}
] ]
}, },
resize: function() { resize: function() {
@ -228,15 +247,6 @@ Ox.load(function() {
app.$ui[element] && app.$ui[element].css(app.getCSS(element)); app.$ui[element] && app.$ui[element].css(app.getCSS(element));
}); });
}, },
sections: [
{id: 'about', title: 'About'},
{id: 'readme', title: 'Readme'},
{id: 'examples', title: 'Examples'},
{id: 'doc', title: 'Documentation'},
{id: 'downloads', title: 'Downloads'},
{id: 'development', title: 'Development'},
{id: 'contact', title: 'Contact'}
],
setTheme: function(theme) { setTheme: function(theme) {
app.user({theme: theme}); app.user({theme: theme});
(Ox.$('#icon') || Ox.$('<link>').attr({ (Ox.$('#icon') || Ox.$('<link>').attr({
@ -246,9 +256,9 @@ Ox.load(function() {
}).appendTo(Ox.$('head'))).attr({ }).appendTo(Ox.$('head'))).attr({
href: app.getSRC('icon') href: app.getSRC('icon')
}); });
app.$ui.logo && app.$ui.logo.attr({ app.$ui.logo && app.$ui.logo
src: app.getSRC('logo') .attr({src: app.getSRC('logo')})
}).css(app.getCSS('logo')); .css(app.getCSS('logo'));
Ox.Theme Ox.Theme
? Ox.Theme(theme) ? Ox.Theme(theme)
: Ox.$('body').addClass('OxTheme' + Ox.toTitleCase(theme) : Ox.$('body').addClass('OxTheme' + Ox.toTitleCase(theme)
@ -314,7 +324,7 @@ Ox.load(function() {
}, },
menu: function() { menu: function() {
return Ox.ButtonGroup({ return Ox.ButtonGroup({
buttons: app.sections, buttons: app.data.sections,
min: 0, min: 0,
selectable: true, selectable: true,
}) })
@ -325,12 +335,12 @@ Ox.load(function() {
} }
}) })
}, },
page: function(page) { page: function(page, replace) {
var $element = Ox.Container(); var $element = Ox.Container();
Ox.get('readme/html/_' + page + '.html', function(html) { Ox.get('readme/html/_' + page + '.html', function(html) {
$('<div>') $('<div>')
.addClass('OxSerif page') .addClass('OxSerif page')
.html(html) .html(html.replace(app.re.version[0], app.re.version[1]))
.appendTo($element); .appendTo($element);
}); });
return $element; return $element;
@ -341,15 +351,7 @@ Ox.load(function() {
return app.ui[id] ? app.ui[id]() : app.ui.page(id); return app.ui[id] ? app.ui[id]() : app.ui.page(id);
}, },
size: 32, size: 32,
tabs: [ tabs: app.data.sections
{id: 'about', title: 'About'},
{id: 'readme', title: 'Readme'},
{id: 'examples', title: 'Examples'},
{id: 'doc', title: 'Documentation'},
{id: 'downloads', title: 'Downloads'},
{id: 'dev', title: 'Development'},
{id: 'contact', title: 'Contact'}
]
}) })
.bindEvent({ .bindEvent({
change: function(data) { change: function(data) {
@ -358,7 +360,70 @@ Ox.load(function() {
}); });
}, },
readme: function() { readme: function() {
return Ox.Element(); var $list = Ox.Container().css({overflowY: 'scroll'}),
$text = Ox.Container().addClass('OxSerif text'),
$panel = Ox.SplitPanel({
elements: [
{element: $list, size: 256},
{element: $text}
],
orientation: 'horizontal'
})
.addClass('readme');
app.data.readme.forEach(function(item, i) {
var $item = $('<div>')
.addClass('item')
.css({
width: 224 - Ox.UI.SCROLLBAR_SIZE + 'px'
})
.bind({
click: function(e) {
var $this = $(this);
if (!$this.is('.selected')) {
selectItem(item.id, $this);
} else if (e.metaKey) {
selectItem(null, $this);
}
}
})
.appendTo($list);
$('<div>')
.addClass('OxSerif title')
.html(item.title)
.appendTo($item);
$('<div>')
.addClass('OxSerif OxLight date')
.html(Ox.formatDate(item.date, '%B %e, %Y', true))
.appendTo($item);
});
function selectItem(id, $element) {
$('.readme .item.selected').removeClass('selected');
if (id) {
$element.addClass('selected');
Ox.get('readme/html/' + id + '.html', function(html) {
$text.html(html);
$text.find('.code').each(function() {
var $this = $(this);
$this.replaceWith(
Ox.SyntaxHighlighter({
source: $this.text()
})
.attr({id: $this.attr('id')})
/*
.css({
border: '1px solid rgb(192, 192, 192)'
})
*/
);
});
});
app.url.push('readme/' + id);
} else {
$text.empty();
app.url.push('readme');
}
}
return $panel;
}, },
screen: function() { screen: function() {
return Ox.$('<div>').addClass('screen animate'); return Ox.$('<div>').addClass('screen animate');