v1.0.0
This commit is contained in:
@@ -1,142 +1,165 @@
|
||||
/**
|
||||
* SPA Router v1.0.0
|
||||
* -----------------
|
||||
* Легкий роутер для односторінкових застосунків з підтримкою:
|
||||
* - History та hash режимів
|
||||
* - Параметрів маршруту та query-параметрів
|
||||
* - Делегування посилань та збереження прокрутки
|
||||
*
|
||||
* Використання:
|
||||
* Router.config({ mode: 'history', root: '/' }).listen().delegateLinks();
|
||||
*
|
||||
* Автор: Rozenrod (https://github.com/rozenrod)
|
||||
* Ліцензія: MIT
|
||||
*/
|
||||
|
||||
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());
|
||||
}
|
||||
}
|
||||
routes: [], // Список маршрутів (шаблон + обробник)
|
||||
mode: 'history', // Режим: 'history' або 'hash'
|
||||
root: '/', // Корінь додатку
|
||||
|
||||
// Налаштування роутера
|
||||
config({ mode = 'hash', root = '/' } = {}) {
|
||||
const cleanRoot = '/' + this.clearSlashes(root) + '/';
|
||||
// Якщо браузер підтримує history API та mode === 'history' — використовуємо його
|
||||
this.mode = (mode === 'history' && history.pushState) ? 'history' : 'hash';
|
||||
// Захист від абсолютних URL (наприклад, http://...)
|
||||
this.root = cleanRoot.startsWith('http') ? '/' : cleanRoot;
|
||||
return this;
|
||||
},
|
||||
|
||||
window.addEventListener('click', function (event) {
|
||||
if (!event.target.matches('[data-route]')) return;
|
||||
event.preventDefault();
|
||||
Router.navigate((event.target.href).replace(window.location.origin, ''));
|
||||
}, false);
|
||||
// Прибирає слеші на початку та в кінці шляху
|
||||
clearSlashes(path) {
|
||||
return path.toString().replace(/^\/+|\/+$/g, '');
|
||||
},
|
||||
|
||||
if(Router.mode === 'history'){
|
||||
window.addEventListener('popstate', function (event) {
|
||||
if (!history.state.url) return;
|
||||
Router.navigate(history.state.url);
|
||||
}, false);
|
||||
}
|
||||
// Отримує поточний фрагмент (частину URL після root або після #)
|
||||
getFragment() {
|
||||
let fragment = '';
|
||||
if (this.mode === 'history') {
|
||||
fragment = decodeURI(location.pathname + location.search);
|
||||
fragment = fragment.replace(this.root, '').split('?')[0];
|
||||
} else {
|
||||
fragment = location.hash.slice(1).split('?')[0];
|
||||
}
|
||||
return this.clearSlashes(fragment);
|
||||
},
|
||||
|
||||
// Отримує query-параметри з URL
|
||||
getParams() {
|
||||
let query = this.mode === 'history' ? location.search : location.hash.split('?')[1] || '';
|
||||
const params = {};
|
||||
new URLSearchParams(query).forEach((v, k) => params[k] = v);
|
||||
return params;
|
||||
},
|
||||
|
||||
// Додає новий маршрут
|
||||
add(re, handler, options) {
|
||||
if (typeof re === 'function') {
|
||||
handler = re;
|
||||
re = '';
|
||||
}
|
||||
this.routes.push({ re, handler, options });
|
||||
return this;
|
||||
},
|
||||
|
||||
// Видаляє маршрут за функцією або шаблоном
|
||||
remove(param) {
|
||||
this.routes = this.routes.filter(r =>
|
||||
r.handler !== param && r.re.toString() !== param.toString()
|
||||
);
|
||||
return this;
|
||||
},
|
||||
|
||||
// Очищує усі маршрути та скидає режим
|
||||
flush() {
|
||||
this.routes = [];
|
||||
this.mode = 'hash';
|
||||
this.root = '/';
|
||||
return this;
|
||||
},
|
||||
|
||||
// Перевіряє фрагмент та викликає відповідний обробник маршруту
|
||||
check(fragment = this.getFragment()) {
|
||||
const query = this.getParams();
|
||||
for (const { re, handler } of this.routes) {
|
||||
const match = (fragment || 'home').match(re);
|
||||
if (match) {
|
||||
handler.apply({ query }, match.slice(1));
|
||||
|
||||
// Прокрутка до елемента з id, якщо є #hash
|
||||
if (location.hash.length > 1) {
|
||||
const el = document.getElementById(location.hash.slice(1));
|
||||
if (el) el.scrollIntoView({ behavior: 'smooth' });
|
||||
}
|
||||
|
||||
return this;
|
||||
}
|
||||
}
|
||||
return this;
|
||||
},
|
||||
|
||||
// Слухає зміни URL
|
||||
listen() {
|
||||
const onChange = (e) => {
|
||||
this.check();
|
||||
|
||||
// Витягуємо позицію прокрутки зі стану історії
|
||||
const pos = e?.state?.scroll;
|
||||
if (pos) {
|
||||
setTimeout(() => {
|
||||
window.scrollTo(pos.x, pos.y);
|
||||
}, 50);
|
||||
}
|
||||
};
|
||||
if (this.mode === 'history') {
|
||||
window.addEventListener('popstate', onChange);
|
||||
} else {
|
||||
window.addEventListener('hashchange', onChange);
|
||||
}
|
||||
return this;
|
||||
},
|
||||
|
||||
// Делегування кліків по посиланнях з data-route
|
||||
delegateLinks() {
|
||||
window.addEventListener('click', (e) => {
|
||||
const target = e.target.closest('[data-route]');
|
||||
if (!target || !target.href) return;
|
||||
|
||||
const path = target.href.replace(location.origin, '');
|
||||
if (path === this.getFragment()) return;
|
||||
|
||||
e.preventDefault();
|
||||
this.navigate(path); // Викликає навігацію без перезавантаження сторінки
|
||||
});
|
||||
return this;
|
||||
},
|
||||
|
||||
// Навігація до нового шляху (push або replace)
|
||||
navigate(path = '', push = true, update = true) {
|
||||
const scroll = { x: window.scrollX, y: window.scrollY };
|
||||
history.replaceState({ scroll }, '', location.href);
|
||||
|
||||
if (this.mode === 'history') {
|
||||
const url = new URL(path, location.origin);
|
||||
const relativePath = url.pathname + url.search + url.hash;
|
||||
history[push ? 'pushState' : 'replaceState']({}, '', relativePath);
|
||||
} else {
|
||||
location.hash = this.clearSlashes(path);
|
||||
}
|
||||
|
||||
if(update == true) {
|
||||
window.scrollTo(0, 0); // Скидуємо прокрутку при переході
|
||||
this.check();
|
||||
}
|
||||
return this;
|
||||
},
|
||||
|
||||
// Оновлює query-параметр у поточному URL
|
||||
update(key, value) {
|
||||
const params = new URLSearchParams(location.search);
|
||||
params.set(key, value);
|
||||
const newUrl = location.origin + location.pathname + '?' + params.toString();
|
||||
history.replaceState({ position: window.pageYOffset }, '', newUrl);
|
||||
}
|
||||
};
|
||||
Reference in New Issue
Block a user