index: update url controller
This commit is contained in:
parent
223d9470a9
commit
d70b996472
1 changed files with 91 additions and 49 deletions
140
index.js
140
index.js
|
@ -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: {}
|
||||||
|
|
Loading…
Reference in a new issue