index: update url controller

This commit is contained in:
rolux 2012-07-05 21:37:17 +02:00
parent 223d9470a9
commit d70b996472

140
index.js
View file

@ -33,7 +33,7 @@ Ox.load(/^https?:\/\/(www\.)?oxjs\.org\//.test(
var app = window.oxjs = { var app = window.oxjs = {
$ui: {}, $ui: {},
animate: function() { animate: function() {
var home = app.url.get().page == ''; var home = app.url.parse().page == '';
app.state.animating = true; app.state.animating = true;
if (home) { if (home) {
app.$ui.logo.attr({src: app.getSRC('logo')}); app.$ui.logo.attr({src: app.getSRC('logo')});
@ -96,7 +96,7 @@ Ox.load(/^https?:\/\/(www\.)?oxjs\.org\//.test(
db: Ox.localStorage('OxJS'), db: Ox.localStorage('OxJS'),
getCSS: function(element) { getCSS: function(element) {
var css = {}, var css = {},
home = app.url.get().page == '', home = app.url.parse().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') {
@ -174,16 +174,16 @@ Ox.load(/^https?:\/\/(www\.)?oxjs\.org\//.test(
}); });
}, },
load: function(browserSupported) { load: function(browserSupported) {
var url = app.url.get(); var data = app.url.parse();
app.user.page = url.page; app.user.page = data.page;
if (url.item && url.page in app.user.item) { if (data.item && data.page in app.user.item) {
app.user.item[url.page] = url.item; app.user.item[data.page] = data.item;
} }
app.db(app.user); app.db(app.user);
app.$ui.panel = app.ui.panel() app.$ui.panel = app.ui.panel()
.select(app.user.page) .select(app.user.page)
.appendTo(Ox.$body); .appendTo(Ox.$body);
// jqueryfy so that we can animate // jquerify 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);
}); });
@ -202,7 +202,7 @@ Ox.load(/^https?:\/\/(www\.)?oxjs\.org\//.test(
app.load(true); app.load(true);
} }
}); });
} else if (!url.page) { } else if (!data.page) {
app.$ui.logo app.$ui.logo
.css({cursor: 'pointer'}) .css({cursor: 'pointer'})
.on({click: app.toggle}); .on({click: app.toggle});
@ -235,7 +235,7 @@ Ox.load(/^https?:\/\/(www\.)?oxjs\.org\//.test(
.animate({opacity: 1}, 500); .animate({opacity: 1}, 500);
}); });
} }
Ox.$window.on({hashchange: app.urlchange}); Ox.$window.on({hashchange: app.url.change});
app.state.loaded = true; app.state.loaded = true;
}, },
loadData: function(callback) { loadData: function(callback) {
@ -390,8 +390,8 @@ Ox.load(/^https?:\/\/(www\.)?oxjs\.org\//.test(
loaded: false loaded: false
}, },
toggle: function() { toggle: function() {
!app.state.animating && app.url.set( !app.state.animating && app.url.push(
app.url.get().page ? { app.url.parse().page ? {
page: '', page: '',
item: '' item: ''
} : { } : {
@ -434,15 +434,11 @@ Ox.load(/^https?:\/\/(www\.)?oxjs\.org\//.test(
}) })
.bindEvent({ .bindEvent({
example: function(data) { example: function(data) {
app.url.set({ app.url.push({page: 'examples', item: data.id});
page: 'examples',
item: {examples: data.id}
});
}, },
select: function(data) { select: function(data) {
app.user.item.doc = data.id; app.user.item.doc = data.id;
app.db(app.user); app.url.push();
app.url.set();
} }
}) })
.bindEventOnce({ .bindEventOnce({
@ -464,6 +460,7 @@ Ox.load(/^https?:\/\/(www\.)?oxjs\.org\//.test(
}) })
.html(app.data.html.examples), .html(app.data.html.examples),
examples: app.data.examples, examples: app.data.examples,
mode: app.url.parse().mode || 'source',
path: 'examples/', path: 'examples/',
references: /\b(Ox\.[\w\$]+(?=\W))/g, references: /\b(Ox\.[\w\$]+(?=\W))/g,
replaceCode: [app.re.code], replaceCode: [app.re.code],
@ -471,10 +468,16 @@ Ox.load(/^https?:\/\/(www\.)?oxjs\.org\//.test(
selected: app.user.item.examples selected: app.user.item.examples
}) })
.bindEvent({ .bindEvent({
change: function(data) {
app.url.push({
page: 'examples',
item: app.user.item.examples,
mode: data.value == 'live' ? 'live' : ''
});
},
select: function(data) { select: function(data) {
app.user.item.examples = data.id; app.user.item.examples = data.id;
app.db(app.user); app.url.push();
app.url.set();
} }
}); });
}, },
@ -513,7 +516,7 @@ Ox.load(/^https?:\/\/(www\.)?oxjs\.org\//.test(
.addClass('menu animate') .addClass('menu animate')
.bindEvent({ .bindEvent({
change: function(data) { change: function(data) {
data.value && app.url.set({page: data.value}); data.value && app.url.push({page: data.value});
} }
}) })
); );
@ -540,8 +543,7 @@ Ox.load(/^https?:\/\/(www\.)?oxjs\.org\//.test(
change: function(data) { change: function(data) {
if (app.state.loaded) { if (app.state.loaded) {
app.user.page = data.selected; app.user.page = data.selected;
app.db(app.user); app.url.push();
app.url.set();
} }
} }
}); });
@ -628,8 +630,7 @@ Ox.load(/^https?:\/\/(www\.)?oxjs\.org\//.test(
}); });
}); });
app.user.item.readme = id; app.user.item.readme = id;
app.db(app.user); app.url.push();
app.url.set();
} }
return $panel; return $panel;
}, },
@ -659,33 +660,74 @@ Ox.load(/^https?:\/\/(www\.)?oxjs\.org\//.test(
} }
}, },
url: { url: {
get: function() { change: function() {
var split = window.location.hash.slice(1).split('/'); var data = app.url.parse();
return {page: split[0], item: split[1] || ''}; app.user.previousPage = app.user.page;
app.user.page = data.page;
if (data.page in app.user.item) {
app.user.item[data.page] = data.item;
}
app.db(app.user);
if (app.user.page != app.user.previousPage) {
app.$ui.panel.select(app.user.page);
}
if (app.user.page) {
app.$ui[app.user.page].options(Ox.extend({
selected: data.item
}, app.user.page == 'examples' ? {
mode: data.mode || 'source'
} : {}));
}
if (!app.user.page || !app.user.previousPage) {
app.animate();
}
Ox.print('URL CHANGE', JSON.stringify(data));
}, },
set: function(data) { format: function(data) {
data = data || app.user; var hash = '';
window.location.hash = data.page + ( data = data || {
data.item && data.item[data.page] page: app.user.page,
? '/' + data.item[data.page] : '' item: app.user.item[app.user.page] || ''
); };
if (data.page) {
hash = '#' + data.page;
if (data.item && data.page in app.user.item) {
hash += '/' + data.item;
if (data.page == 'examples' && data.mode == 'live') {
hash += '/live';
}
}
}
Ox.print('URL FORMAT', JSON.stringify(data), hash);
return hash;
},
parse: function(hash) {
hash = hash || window.location.hash;
var data = {}, formattedHash, split = hash.slice(1).split('/');
data.page = Ox.getObjectById(app.data.pages, split[0])
? split[0] : '';
data.item = data.page in app.user.item && split[1]
? split[1] : '';
data.mode = data.page == 'examples' && split[2] == 'live'
? 'live' : '';
Ox.print('URL PARSE', hash, JSON.stringify(data))
formattedHash = app.url.format(data);
hash != formattedHash && app.url.replace(formattedHash);
return data;
},
push: function(data) {
Ox.print('PUSH', JSON.stringify(data))
window.location.hash = app.url.format(data);
return app;
},
replace: function(hash) {
var location = window.location;
if (history.replaceState) {
history.replaceState(
{}, '', location.origin + location.pathname + hash
);
}
return app; return app;
}
},
urlchange: function() {
var url = app.url.get();
app.user.previousPage = app.user.page;
app.user.page = url.page;
if (url.item && url.page in app.user.item) {
app.user.item[url.page] = url.item;
}
app.db(app.user);
if (app.user.page != app.user.previousPage) {
app.$ui.panel.select(app.user.page);
}
url.page && app.$ui[url.page].options({selected: url.item});
if (!app.user.page || !app.user.previousPage) {
app.animate();
} }
}, },
user: {} user: {}