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

updating index.js

Browse source
This commit is contained in:
rolux 2012-04-08 14:48:07 +02:00
parent e7f132f121
commit 706af769a8
2 changed files with 101 additions and 90 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
index.css
View file

@ -100,19 +100,10 @@ body.OxThemeModern,
} }
.OxThemeClassic .page { .OxThemeClassic .page {
background: rgb(255, 255, 255); background-color: rgb(255, 255, 255);
} }
.OxThemeModern .page { .OxThemeModern .page {
background: rgb(0, 0, 0); background-color: 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 { .OxThemeClassic .readme .item.selected {
@ -121,3 +112,15 @@ body.OxThemeModern,
.OxThemeModern .readme .item.selected { .OxThemeModern .readme .item.selected {
background: rgb(32, 32, 32); background: rgb(32, 32, 32);
} }
.OxThemeClassic .logo,
.OxThemeClassic .page,
.OxThemeClassic .readme .OxSyntaxHighlighter {
box-shadow: 0 0 1px rgb(0, 0, 0)
}
.OxThemeModern .logo,
.OxThemeModern .page,
.OxThemeModern .readme .OxSyntaxHighlighter {
box-shadow: 0 0 1px rgb(255, 255, 255)
}

146
index.js
View file

@ -2,8 +2,9 @@ Ox.load(function() {
var app = { var app = {
$ui: {}, $ui: {},
animate: function() { animate: function(callback) {
var home = !app.url.get(); var home = !app.url.get();
app.state.animating = true;
if (home) { if (home) {
app.$ui.logo.attr({ app.$ui.logo.attr({
src: app.getSRC('logo') src: app.getSRC('logo')
@ -11,10 +12,10 @@ Ox.load(function() {
app.$ui.screen.show(); app.$ui.screen.show();
app.$ui.label.show(); app.$ui.label.show();
app.$ui.menu.options({value: ''}).show(); app.$ui.menu.options({value: ''}).show();
app.$ui.panel.find('.OxButtonGroup').css({opacity: 0});
} else { } else {
app.$ui.menu.options({value: app.user('url').split('/')[0]}); app.$ui.menu.options({value: app.user('url').split('/')[0]});
} }
app.$ui.panel.find('.OxButtonGroup').css({opacity: 0});
[ [
'screen', 'logo', 'label', 'menu', 'switch' 'screen', 'logo', 'label', 'menu', 'switch'
].forEach(function(element) { ].forEach(function(element) {
@ -31,12 +32,14 @@ Ox.load(function() {
app.$ui.label.hide(); app.$ui.label.hide();
app.$ui.menu.hide().options({value: ''}); app.$ui.menu.hide().options({value: ''});
} }
app.state.animating = false;
callback();
} : void 0 } : void 0
); );
}); });
}, },
data: { data: {
sections: [ pages: [
{id: 'about', title: 'About'}, {id: 'about', title: 'About'},
{id: 'readme', title: 'Readme'}, {id: 'readme', title: 'Readme'},
{id: 'examples', title: 'Examples'}, {id: 'examples', title: 'Examples'},
@ -55,19 +58,21 @@ Ox.load(function() {
top: middle + 16 + 'px', top: middle + 16 + 'px',
left: center - 128 + 'px', left: center - 128 + 'px',
width: '240px', width: '240px',
height: '14px',
fontSize: '11px', fontSize: '11px',
opacity: 1 opacity: 1
} : { } : {
top: '26px', top: '26px',
left: '4px', left: '4px',
width: '32px', width: '32px',
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 + 40 + 'px'
} else if (element == 'logo') { } else if (element == 'logo') {
css = home || !app.loaded ? { css = home || !app.state.loaded ? {
left: center - 128 + 'px', left: center - 128 + 'px',
top: middle - 128 + 'px', top: middle - 128 + 'px',
width: '256px', width: '256px',
@ -115,11 +120,12 @@ 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 src = 'source/Ox.UI/themes/' + theme + '/png/logo'
+ '/png/logo' + (home || !app.loaded ? 128 : 16) + '.png' + (home || !app.state.loaded ? 128 : 16) + '.png'
} }
return src; return src;
}, },
history: {},
init: function() { init: function() {
app.loadScreen(function() { app.loadScreen(function() {
app.loadData(function() { app.loadData(function() {
@ -135,7 +141,7 @@ Ox.load(function() {
app.user({url: 'about'}); app.user({url: 'about'});
} }
app.$ui.panel = app.ui.panel() app.$ui.panel = app.ui.panel()
.select(app.user('url')) .select(app.url.parse(app.user('url')).page)
.appendTo(Ox.$body); .appendTo(Ox.$body);
// jqueryfy so that we can animate // jqueryfy so that we can animate
['screen', 'logo', 'loading'].forEach(function(element) { ['screen', 'logo', 'loading'].forEach(function(element) {
@ -160,9 +166,7 @@ Ox.load(function() {
app.$ui.logo app.$ui.logo
.css({cursor: 'pointer'}) .css({cursor: 'pointer'})
.bind({ .bind({
click: function() { click: app.toggle
app.url.set(app.url.get() ? '' : app.user('url'));
}
}); });
['label', 'menu', 'switch'].forEach(function(element) { ['label', 'menu', 'switch'].forEach(function(element) {
app.$ui[element] = app.ui[element]() app.$ui[element] = app.ui[element]()
@ -175,9 +179,8 @@ Ox.load(function() {
} else { } else {
['label', 'menu', 'switch'].forEach(function(element) { ['label', 'menu', 'switch'].forEach(function(element) {
app.$ui[element] = app.ui[element]().appendTo(Ox.$body); app.$ui[element] = app.ui[element]().appendTo(Ox.$body);
app.$ui[element].css(app.getCSS(element)); app.$ui[element].css(app.getCSS(element)).hide();
}); });
app.$ui.menu.hide();
app.$ui.screen.animate({opacity: 0}, 500, function() { app.$ui.screen.animate({opacity: 0}, 500, function() {
app.$ui.screen.hide(); app.$ui.screen.hide();
}); });
@ -189,17 +192,18 @@ Ox.load(function() {
app.$ui.logo app.$ui.logo
.css({cursor: 'pointer'}) .css({cursor: 'pointer'})
.bind({ .bind({
click: function() { click: app.toggle
app.url.set(app.url.get() ? '' : app.user('url'));
}
}); });
}); });
app.$ui.switch.css({opacity: 0}).show().animate({
opacity: 1
}, 500);
}); });
} }
Ox.$window.bind({ Ox.$window.bind({
hashchange: app.urlchange hashchange: app.urlchange
}); });
app.loaded = true; app.state.loaded = true;
}, },
loadData: function(callback) { loadData: function(callback) {
Ox.getJSON('index.json', function(data) { Ox.getJSON('index.json', function(data) {
@ -207,7 +211,6 @@ Ox.load(function() {
callback(); callback();
}); });
}, },
loaded: false,
loadScreen: function(callback) { loadScreen: function(callback) {
app.setTheme(app.user('theme') || 'classic'); app.setTheme(app.user('theme') || 'classic');
app.$ui.screen = app.ui.screen(); app.$ui.screen = app.ui.screen();
@ -226,7 +229,6 @@ Ox.load(function() {
resize: app.resize resize: app.resize
}); });
}, },
previousURL: '',
re: { re: {
code: [ code: [
new RegExp( new RegExp(
@ -281,6 +283,15 @@ Ox.load(function() {
: Ox.$('body').addClass('OxTheme' + Ox.toTitleCase(theme) : Ox.$('body').addClass('OxTheme' + Ox.toTitleCase(theme)
); );
}, },
state: {
animating: false,
loaded: false
},
toggle: function() {
!app.state.animating && app.url.set(
app.url.get() ? '' : app.user('url')
);
},
ui: { ui: {
doc: function() { doc: function() {
return Ox.DocPanel({ return Ox.DocPanel({
@ -308,7 +319,7 @@ Ox.load(function() {
}) })
.bindEvent({ .bindEvent({
select: function(data) { select: function(data) {
app.url.push( app.url.set(
'examples' + (data.id ? '/' + data.id : '') 'examples' + (data.id ? '/' + data.id : '')
) )
} }
@ -321,10 +332,8 @@ Ox.load(function() {
width: 256 width: 256
}) })
.addClass('label animate') .addClass('label animate')
.bindEvent({ .bind({
anyclick: function() { click: app.toggle
app.url.set(app.url.get() ? '' : app.user('url'));
}
}); });
}, },
loading: function() { loading: function() {
@ -341,7 +350,7 @@ Ox.load(function() {
}, },
menu: function() { menu: function() {
return Ox.ButtonGroup({ return Ox.ButtonGroup({
buttons: app.data.sections, buttons: app.data.pages,
min: 0, min: 0,
selectable: true, selectable: true,
}) })
@ -365,41 +374,42 @@ Ox.load(function() {
panel: function() { panel: function() {
return Ox.TabPanel({ return Ox.TabPanel({
content: function(id) { content: function(id) {
return 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: 32,
tabs: app.data.sections tabs: app.data.pages
}) })
.bindEvent({ .bindEvent({
change: function(data) { change: function(data) {
app.url.push(data.selected); app.state.loaded && app.url.set(data.selected);
} }
}); });
}, },
readme: function() { readme: function() {
var $list = Ox.Container().css({overflowY: 'scroll'}), var $list = Ox.Container().css({overflowY: 'scroll'}),
$text = Ox.Container().addClass('OxSerif text'), $text = Ox.Container().addClass('OxSerif text'),
$panel = Ox.SplitPanel({ self = {},
that = Ox.SplitPanel({
elements: [ elements: [
{element: $list, size: 256}, {element: $list, size: 256},
{element: $text} {element: $text}
], ],
orientation: 'horizontal' orientation: 'horizontal'
}) }, self)
.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})
.css({ .css({
width: 224 - Ox.UI.SCROLLBAR_SIZE + 'px' width: 224 - Ox.UI.SCROLLBAR_SIZE + 'px'
}) })
.bind({ .bind({
click: function(e) { click: function(e) {
var $this = $(this); if (!$(this).is('.selected')) {
if (!$this.is('.selected')) { selectItem(item.id);
selectItem(item.id, $this);
} else if (e.metaKey) { } else if (e.metaKey) {
selectItem(null, $this); selectItem();
} }
} }
}) })
@ -413,11 +423,11 @@ Ox.load(function() {
.html(Ox.formatDate(item.date, '%B %e, %Y', true)) .html(Ox.formatDate(item.date, '%B %e, %Y', true))
.appendTo($item); .appendTo($item);
}); });
function selectItem(id, $element) { selectItem(self.options.selected);
function selectItem(id) {
$('.readme .item.selected').removeClass('selected'); $('.readme .item.selected').removeClass('selected');
if (id) { id && $('#readme_' + id).addClass('selected');
$element.addClass('selected'); Ox.get('readme/html/' + (id || '_readme') + '.html', function(html) {
Ox.get('readme/html/' + id + '.html', function(html) {
$text.html(html); $text.html(html);
$text.find('.code').each(function() { $text.find('.code').each(function() {
var $this = $(this); var $this = $(this);
@ -426,21 +436,17 @@ Ox.load(function() {
source: $this.text() source: $this.text()
}) })
.attr({id: $this.attr('id')}) .attr({id: $this.attr('id')})
/*
.css({
border: '1px solid rgb(192, 192, 192)'
})
*/
); );
}); });
}); });
app.url.push('readme/' + id); app.url.set('readme' + (id ? '/' + id : ''));
} else { }
$text.empty(); self.setOption = function(key, value) {
app.url.push('readme'); if (key == 'selected') {
selectItem(value);
} }
} }
return $panel; return that;
}, },
screen: function() { screen: function() {
return Ox.$('<div>').addClass('screen animate'); return Ox.$('<div>').addClass('screen animate');
@ -476,38 +482,40 @@ Ox.load(function() {
get: function() { get: function() {
return window.location.hash.substr(1); return window.location.hash.substr(1);
}, },
push: function(url) { parse: function(url) {
history.pushState({}, '', '#' + url); var split = (
url && app.user({url: url}); url === void 0 ? app.url.get() : url
return app; ).split('/');
return {page: split[0], item: split[1] || ''};
}, },
set: function() { set: function(url) {
window.location.hash = '#' + arguments[0]; window.location.hash = '#' + url;
return app; return app;
} }
}, },
urlchange: function() { urlchange: function() {
var url = app.url.get(), var url = app.url.get(),
section = url.split('/')[0]; current = app.url.parse(url);
url && app.user({url: url}); url && app.user({url: url});
Ox.print( Ox.print(JSON.stringify({
'url', url, 'current': current,
'section', section, 'history': app.history,
'prev', app.previousURL, 'user.url': app.user('url')
'sect', app.previousURL.split('/')[0], }, null, ' '));
'user url', app.user('url') if (current.page != app.history.page) {
); app.$ui.panel.select(current.page);
if (section != app.previousURL.split('/')[0]) {
app.$ui.panel.select(section);
} }
app[!url || !app.previousURL ? 'animate' : 'void'](function() { if (Ox.in(['readme', 'examples', 'doc'], current.page)) {
app.previousURL = url; Ox.print('cp',current.page, current.item)
app.$ui[current.page].options({selected: current.item});
}
(!current.page || !app.history.page ? app.animate : Ox.void)(function() {
//app.url.replace(url);
app.history = current;
Ox.print('CALLBACK, HISTORY', app.history)
}); });
}, },
user: Ox.localStorage('OxJS'), user: Ox.localStorage('OxJS')
void: function(callback) {
callback();
}
}; };
app.init(); app.init();