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

slightly more functional url controller

Browse source
This commit is contained in:
rolux 2012-04-16 09:13:42 +02:00
parent 606497fbdd
commit 79fb1fb968
1 changed files with 75 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

142
index.js
View file

@ -2,8 +2,8 @@ Ox.load(function() {
var app = { var app = {
$ui: {}, $ui: {},
animate: function(callback) { animate: function() {
var home = !app.url.get(); var home = app.url.get().page == '';
app.state.animating = true; app.state.animating = true;
if (home) { if (home) {
app.$ui.logo.attr({ app.$ui.logo.attr({
@ -13,7 +13,7 @@ Ox.load(function() {
app.$ui.label.show(); app.$ui.label.show();
app.$ui.menu.options({value: ''}).show(); app.$ui.menu.options({value: ''}).show();
} else { } else {
app.$ui.menu.options({value: app.user('url').split('/')[0]}); app.$ui.menu.options({value: app.user.page});
} }
app.$ui.panel.find('.OxButtonGroup').css({opacity: 0}); app.$ui.panel.find('.OxButtonGroup').css({opacity: 0});
[ [
@ -33,7 +33,6 @@ Ox.load(function() {
app.$ui.menu.hide().options({value: ''}); app.$ui.menu.hide().options({value: ''});
} }
app.state.animating = false; app.state.animating = false;
callback();
} : void 0 } : void 0
); );
}); });
@ -47,11 +46,17 @@ Ox.load(function() {
{id: 'doc', title: 'Documentation'}, {id: 'doc', title: 'Documentation'},
{id: 'downloads', title: 'Downloads'}, {id: 'downloads', title: 'Downloads'},
{id: 'development', title: 'Development'} {id: 'development', title: 'Development'}
] ],
user: {
item: {doc: '', examples: '', readme: ''},
page: '',
previousPage: 'about'
}
}, },
db: Ox.localStorage('OxJS'),
getCSS: function(element) { getCSS: function(element) {
var css = {}, var css = {},
home = !app.url.get(), home = app.url.get().page == '',
center = Math.floor(window.innerWidth / 2), center = Math.floor(window.innerWidth / 2),
middle = Math.floor(window.innerHeight / 2); middle = Math.floor(window.innerHeight / 2);
if (element == 'label') { if (element == 'label') {
@ -114,8 +119,8 @@ Ox.load(function() {
}, },
getSRC: function(element) { getSRC: function(element) {
var src, var src,
home = !app.url.get(), home = app.url.get().page == '',
theme = app.user('theme'); theme = app.user.theme;
if (element == 'icon') { if (element == 'icon') {
src = 'source/Ox.UI/themes/' + theme src = 'source/Ox.UI/themes/' + theme
+ '/png/icon16.png'; + '/png/icon16.png';
@ -128,7 +133,6 @@ Ox.load(function() {
} }
return src; return src;
}, },
history: {},
html: {}, html: {},
init: function() { init: function() {
app.loadScreen(function() { app.loadScreen(function() {
@ -139,13 +143,14 @@ Ox.load(function() {
}, },
load: function(browserSupported) { load: function(browserSupported) {
var url = app.url.get(); var url = app.url.get();
if (url) { app.user = Ox.extend(app.data.user, app.db())
app.user({url: url}) app.user.page = url.page;
} else if (!app.user('url')) { if (url.item && url.page in app.user.item) {
app.user({url: 'about'}); app.user.item[url.page] = url.item;
} }
app.db(app.user);
app.$ui.panel = app.ui.panel() app.$ui.panel = app.ui.panel()
.select(app.url.parse(app.user('url')).page) .select(app.user.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) {
@ -166,7 +171,7 @@ Ox.load(function() {
app.load(true); app.load(true);
} }
}); });
} else if (!url) { } else if (!url.page) {
app.$ui.logo app.$ui.logo
.css({cursor: 'pointer'}) .css({cursor: 'pointer'})
.bind({ .bind({
@ -222,7 +227,7 @@ Ox.load(function() {
}); });
}, },
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();
app.$ui.loading = app.ui.loading(); app.$ui.loading = app.ui.loading();
app.$ui.logo = app.ui.logo() app.$ui.logo = app.ui.logo()
@ -295,7 +300,8 @@ Ox.load(function() {
}); });
}, },
setTheme: function(theme) { setTheme: function(theme) {
app.user({theme: theme}); app.user.theme = theme;
app.db(app.user);
(Ox.$('#icon') || Ox.$('<link>').attr({ (Ox.$('#icon') || Ox.$('<link>').attr({
id: 'icon', id: 'icon',
rel: 'shortcut icon', rel: 'shortcut icon',
@ -317,7 +323,14 @@ Ox.load(function() {
}, },
toggle: function() { toggle: function() {
!app.state.animating && app.url.set( !app.state.animating && app.url.set(
app.url.get() ? '' : app.user('url') app.url.get().page ? {
page: '',
item: ''
} : {
page: app.user.previousPage,
item: app.user.previousPage in app.user.item
? app.user.item[app.user.previousPage] : ''
}
); );
}, },
ui: { ui: {
@ -341,13 +354,14 @@ Ox.load(function() {
}, },
items: app.data.docItems || void 0, items: app.data.docItems || void 0,
path: 'dev/', path: 'dev/',
replace: [app.re.code] replace: [app.re.code],
selected: app.user.item.doc
}) })
.bindEvent({ .bindEvent({
select: function(data) { select: function(data) {
app.url.set( app.user.item.doc = data.id;
'doc' + (data.id ? '/' + data.id : '') app.db(app.user);
) app.url.set();
} }
}) })
.bindEventOnce({ .bindEventOnce({
@ -370,13 +384,13 @@ Ox.load(function() {
path: 'examples/', path: 'examples/',
replaceCode: [app.re.code], replaceCode: [app.re.code],
replaceComment: [app.re.comment], replaceComment: [app.re.comment],
selected: '' selected: app.user.item.examples
}) })
.bindEvent({ .bindEvent({
select: function(data) { select: function(data) {
app.url.set( app.user.item.examples = data.id;
'examples' + (data.id ? '/' + data.id : '') app.db(app.user);
) app.url.set();
} }
}); });
}, },
@ -417,7 +431,9 @@ Ox.load(function() {
.addClass('menu animate') .addClass('menu animate')
.bindEvent({ .bindEvent({
change: function(data) { change: function(data) {
data.value && app.url.set(data.value); if (data.value) {
app.url.set({page: data.value});
}
} }
}) })
app.patchButtonGroup($menu); app.patchButtonGroup($menu);
@ -434,14 +450,19 @@ Ox.load(function() {
panel: function() { panel: function() {
var $panel = 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: 36, size: 36,
tabs: app.data.pages tabs: app.data.pages
}) })
.bindEvent({ .bindEvent({
change: function(data) { change: function(data) {
app.state.loaded && app.url.set(data.selected); if (app.state.loaded) {
app.user.page = data.selected;
app.db(app.user);
app.url.set();
}
} }
}), }),
$buttonGroup = $panel.find('.OxButtonGroup').css({ $buttonGroup = $panel.find('.OxButtonGroup').css({
@ -488,7 +509,7 @@ 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);
}); });
selectItem(self.options.selected); selectItem(app.user.item.readme);
function selectItem(id) { function selectItem(id) {
$('.readme .item.selected').removeClass('selected'); $('.readme .item.selected').removeClass('selected');
id && $('#readme_' + id).addClass('selected'); id && $('#readme_' + id).addClass('selected');
@ -514,7 +535,9 @@ Ox.load(function() {
); );
}); });
}); });
app.url.set('readme' + (id ? '/' + id : '')); app.user.item.readme = id;
app.db(app.user);
app.url.set();
} }
self.setOption = function(key, value) { self.setOption = function(key, value) {
if (key == 'selected') { if (key == 'selected') {
@ -533,7 +556,7 @@ Ox.load(function() {
{id: 'modern', title: 'Dark'} {id: 'modern', title: 'Dark'}
], ],
selectable: true, selectable: true,
value: app.user('theme') value: app.user.theme
}) })
.addClass('switch animate') .addClass('switch animate')
.bindEvent({ .bindEvent({
@ -557,51 +580,36 @@ Ox.load(function() {
}, },
url: { url: {
get: function() { get: function() {
return window.location.hash.substr(1); var split = window.location.hash.substr(1).split('/');
},
parse: function(url) {
var split = (
url === void 0 ? app.url.get() : url
).split('/');
return {page: split[0], item: split[1] || ''}; return {page: split[0], item: split[1] || ''};
}, },
set: function(url) { set: function(data) {
window.location.hash = '#' + url; data = data || app.user;
window.location.hash = data.page + (
data.item && data.item[data.page] ? '/' + data.item[data.page] : ''
);
return app; return app;
} }
}, },
urlchange: function() { urlchange: function() {
var url = app.url.get(), var url = app.url.get();
current = app.url.parse(url); app.user.previousPage = app.user.page;
url && app.user({url: url}); app.user.page = url.page;
Ox.print(JSON.stringify({ if (url.item && url.page in app.user.item) {
'current': current, app.user.item[url.page] = url.item;
'history': app.history,
'user.url': app.user('url')
}, null, ' '));
if (current.page != app.history.page) {
app.$ui.panel.select(current.page);
} }
//if (current.item != app.history.item) { app.db(app.user);
if (current.item) { if (app.user.page != app.user.previousPage) {
Ox.print('setting selected!') app.$ui.panel.select(app.user.page);
app.$ui[current.page].options({selected: current.item});
} }
/* if (url.item) {
if (Ox.in(['readme', 'examples', 'doc'], current.page)) { app.$ui[url.page].options({selected: url.item});
Ox.print('cp',current.page, current.item) }
app.$ui[current.page].options({selected: current.item}); if (!app.user.page || !app.user.previousPage) {
app.animate();
} }
*/
(!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: {}
}; };
app.init(); app.init();