slightly more functional url controller
This commit is contained in:
parent
606497fbdd
commit
79fb1fb968
1 changed files with 75 additions and 67 deletions
142
index.js
142
index.js
|
@ -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();
|
||||||
|
|
Loading…
Reference in a new issue