142 lines
4.3 KiB
JavaScript
142 lines
4.3 KiB
JavaScript
const Router = {
|
|
routes: [],
|
|
mode: null,
|
|
root: '/',
|
|
config: function(options) {
|
|
this.mode = options && options.mode && options.mode == 'history' && !!(history.pushState) ? 'history' : 'hash';
|
|
this.root = options && options.root ? '/' + this.clearSlashes(options.root) + '/' : '/';
|
|
return this;
|
|
},
|
|
getFragment: function() {
|
|
let fragment = '';
|
|
if(this.mode === 'history') {
|
|
// fragment = this.clearSlashes(decodeURI(location.pathname + location.search));
|
|
fragment = this.clearSlashes(decodeURI(window.location.href.replace('/#', '').replace(window.location.origin, '/')));
|
|
fragment = fragment.replace(/\?(.*)$/, '');
|
|
fragment = this.root != '/' ? fragment.replace(this.root, '') : fragment;
|
|
} else {
|
|
let match = window.location.href.match(/#(.*)$/);
|
|
fragment = match ? match[1] : '';
|
|
}
|
|
return this.clearSlashes(fragment);
|
|
},
|
|
getParams: function () {
|
|
let query = '';
|
|
if(this.mode === 'history') {
|
|
query = decodeURI(window.location.href.replace('/#', '')).split("?")[1];
|
|
} else {
|
|
let index = window.location.hash.indexOf("?");
|
|
query = (index !== -1) ? window.location.hash.substring(index) : "";
|
|
}
|
|
let _query = {};
|
|
if (typeof query !== "string") {
|
|
return _query;
|
|
}
|
|
if (query[0] === "?") {
|
|
query = query.substring(1);
|
|
}
|
|
query.split("&").forEach(function (row) {
|
|
let parts = row.split("=");
|
|
if (parts[0] !== "") {
|
|
if (parts[1] === undefined) {
|
|
parts[1] = true;
|
|
}
|
|
_query[decodeURIComponent(parts[0])] = decodeURIComponent(parts[1]);
|
|
}
|
|
});
|
|
return _query;
|
|
},
|
|
clearSlashes: function(path) {
|
|
return path.toString().replace(/\/$/, '').replace(/^\//, '');
|
|
},
|
|
add: function(re, handler, options) {
|
|
if(typeof re == 'function') {
|
|
handler = re;
|
|
re = '';
|
|
}
|
|
this.routes.push({ re: re, handler: handler, options: options});
|
|
return this;
|
|
},
|
|
remove: function(param) {
|
|
for(let i=0, r; i < this.routes.length, r = this.routes[i]; i++) {
|
|
if(r.handler === param || r.re.toString() === param.toString()) {
|
|
this.routes.splice(i, 1);
|
|
return this;
|
|
}
|
|
}
|
|
return this;
|
|
},
|
|
flush: function() {
|
|
this.routes = [];
|
|
this.mode = null;
|
|
this.root = '/';
|
|
return this;
|
|
},
|
|
check: function(f) {
|
|
let fragment = f || this.getFragment();
|
|
for(let i=0; i < this.routes.length; i++) {
|
|
let match = fragment.match(this.routes[i].re);
|
|
if(fragment == '' || fragment == '/') match = 'home'.match(this.routes[i].re);
|
|
if(match) {
|
|
match.shift();
|
|
let query = this.getParams();
|
|
this.routes[i].handler.apply({query}, match);
|
|
return this;
|
|
}
|
|
}
|
|
return this;
|
|
},
|
|
listen: function() {
|
|
let self = this;
|
|
let current = self.getFragment();
|
|
let current_query = self.getParams();
|
|
let fn = function() {
|
|
if(current !== self.getFragment()) {
|
|
current = self.getFragment();
|
|
self.check(current);
|
|
}
|
|
// if(current !== self.getFragment() || JSON.stringify(current_query) !== JSON.stringify(self.getParams())) {
|
|
// current = self.getFragment();
|
|
// current_query = self.getParams();
|
|
// self.check(current);
|
|
// }
|
|
}
|
|
clearInterval(this.interval);
|
|
this.interval = setInterval(fn, 50);
|
|
return this;
|
|
},
|
|
navigate: function(path, mode = true) {
|
|
path = path || '';
|
|
if(mode){
|
|
if(this.mode === 'history') {
|
|
history.replaceState({position: window.pageYOffset}, null);
|
|
history.pushState({position: 0}, null, this.root + this.clearSlashes(path));
|
|
} else {
|
|
window.location.href = window.location.href.replace(/#(.*)$/, '') + '#' + path;
|
|
}
|
|
}
|
|
return this;
|
|
},
|
|
update: function(key, value) {
|
|
let url = window.location;
|
|
let URLParams = new URLSearchParams(url.search);
|
|
let RouterParams = Router.getParams();
|
|
URLParams.set(key, value);
|
|
|
|
history.replaceState({position: window.pageYOffset}, null, window.location.origin + window.location.pathname + '?' + URLParams.toString());
|
|
}
|
|
}
|
|
|
|
|
|
window.addEventListener('click', function (event) {
|
|
if (!event.target.matches('[data-route]')) return;
|
|
event.preventDefault();
|
|
Router.navigate((event.target.href).replace(window.location.origin, ''));
|
|
}, false);
|
|
|
|
if(Router.mode === 'history'){
|
|
window.addEventListener('popstate', function (event) {
|
|
if (!history.state.url) return;
|
|
Router.navigate(history.state.url);
|
|
}, false);
|
|
} |