Skip to content
BranchesTags

Latest commit

History

47 Commits

Folders and files

NameName
Last commit message
Last commit date
tests
tests
README.markdown
README.markdown
path.js
path.js
path.min.js
path.min.js

Repository files navigation

PathJS

PathJS is a lightweight, client-side routing library that allows you to create "single page" applications using Hashbangs and/or HTML5 pushState.

Features

  • Lightweight
  • Supports the HTML5 History API, the 'onhashchange' method, and graceful degredation
  • Supports root routes, rescue methods, paramaterized routes, optional route components (dynamic routes), and Aspect Oriented Programming
  • Well Tested (tests available in the ./tests directory)
  • Compatible with all major browsers (Tested on Firefox 3.6, Firefox 4.0, Firefox 5.0, Chrome 9, Opera 11, IE7, IE8, IE9)
  • Independant of all third party libraries, but plays nice with all of them

Using PathJS - A Brief Example

function clearPanel(){
// You can put some code in here to do fancy DOM transitions, such as fade-out or slide-in.
}
Path.map("#/users").to(function(){
alert("Users!");
});
Path.map("#/comments").to(function(){
alert("Comments!");
}).enter(clearPanel);
Path.map("#/posts").to(function(){
alert("Posts!");
}).enter(clearPanel);
Path.root("#/posts");
Path.listen();

Documentation and Tips

Any of the examples above confuse you? Read up on the details in the wiki.

Examples

You can find examples on the official Github Page.

Running Tests

To run the tests, simply navigate to the ./tests folder and open the HTML file in your browser. Please note that the HTML5 History API is not compatible with the file:// protocol, and to run the tests in the tests/pushstate folder, you will need to run them through a webserver such as nginx or Apache.

Next Steps

  • Adding support for "after" callbacks
  • Deprecating the "enter" callback in favour of "before"

Pull Requests

To make a pull request, please do the following:

  • Mention what specific version of PathJS you were using when you encountered the issue/added the feature. This can be accessed by doing Path.version in a debugger console
  • Provide a pastie or gist that demonstrates the bug/feature
  • Make sure you update the test suite with your changes. All tests must pass
  • Make sure to update the minified version of the source
  • Do not modify the Path.version attribute. I will modify that manually when merging the request

Disclaimer

This code is provided with no warranty. While I strive to maintain backwards compatibility, the code is still under active development. As this is the case, some revisions may break break compatibility with earlier versions of the library. Please keep this in mind when using PathJS.

Copyright and Licensing

Copyright (c) 2011 Mike Trpcic, released under the MIT license.

About

Simple, lightweight routing for web browsers

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors

, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all 
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
GitHub - medmemara/pathjs: Simple, lightweight routing for web browsers · GitHub
Skip to content
BranchesTags
Latest commit
History
47 Commits
Folders and files
NameName
Last commit message
Last commit date
tests
tests
README.markdown
README.markdown
path.js
path.js
path.min.js
path.min.js
Repository files navigation
PathJS
PathJS is a lightweight, client-side routing library that allows you to create "single page" applications using Hashbangs and/or HTML5 pushState.
Features
  • Lightweight
  • Supports the HTML5 History API, the 'onhashchange' method, and graceful degredation
  • Supports root routes, rescue methods, paramaterized routes, optional route components (dynamic routes), and Aspect Oriented Programming
  • Well Tested (tests available in the ./tests directory)
  • Compatible with all major browsers (Tested on Firefox 3.6, Firefox 4.0, Firefox 5.0, Chrome 9, Opera 11, IE7, IE8, IE9)
  • Independant of all third party libraries, but plays nice with all of them
Using PathJS - A Brief Example
function clearPanel(){
// You can put some code in here to do fancy DOM transitions, such as fade-out or slide-in.
}
Path.map("#/users").to(function(){
alert("Users!");
});
Path.map("#/comments").to(function(){
alert("Comments!");
}).enter(clearPanel);
Path.map("#/posts").to(function(){
alert("Posts!");
}).enter(clearPanel);
Path.root("#/posts");
Path.listen();

Documentation and Tips
Any of the examples above confuse you? Read up on the details in the wiki.
Examples
You can find examples on the official Github Page.
Running Tests
To run the tests, simply navigate to the ./tests folder and open the HTML file in your browser. Please note that the HTML5 History API is not compatible with the
file:// protocol, and to run the tests in the tests/pushstate folder, you will need to run them through a webserver such as nginx or Apache.
Next Steps
  • Adding support for "after" callbacks
  • Deprecating the "enter" callback in favour of "before"
Pull Requests
To make a pull request, please do the following:
  • Mention what specific version of PathJS you were using when you encountered the issue/added the feature. This can be accessed by doing Path.version in a debugger console
  • Provide a pastie or gist that demonstrates the bug/feature
  • Make sure you update the test suite with your changes. All tests must pass
  • Make sure to update the minified version of the source
  • Do not modify the Path.version attribute. I will modify that manually when merging the request
Disclaimer
This code is provided with no warranty. While I strive to maintain backwards compatibility, the code is still under active development. As this is the case, some revisions may break break compatibility with earlier versions of the library. Please keep this in mind when using PathJS.
Copyright and Licensing
Copyright (c) 2011 Mike Trpcic, released under the MIT license.
About
Simple, lightweight routing for web browsers
Resources
Readme
Activity
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Force GitHub README to respect dark mode
(function() {
var style = document.createElement('style');
style.textContent = '
.markdown-body {
color-scheme: dark light;
}
.markdown-body pre { background: #161b22 !important; }
.markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }
.markdown-body table th, .markdown-body table td { border-color: #30363d !important; }
.markdown-body img { background: #0d1117; }
.markdown-body blockquote { border-left-color: #8b949e; }
.markdown-body hr { border-color: #30363d; }
';
document.head.appendChild(style);
})();
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - medmemara/pathjs: Simple, lightweight routing for web browsers · GitHub
Skip to content
BranchesTags
Latest commit
History
47 Commits
Folders and files
NameName
Last commit message
Last commit date
tests
tests
README.markdown
README.markdown
path.js
path.js
path.min.js
path.min.js
Repository files navigation
PathJS
PathJS is a lightweight, client-side routing library that allows you to create "single page" applications using Hashbangs and/or HTML5 pushState.
Features
  • Lightweight
  • Supports the HTML5 History API, the 'onhashchange' method, and graceful degredation
  • Supports root routes, rescue methods, paramaterized routes, optional route components (dynamic routes), and Aspect Oriented Programming
  • Well Tested (tests available in the ./tests directory)
  • Compatible with all major browsers (Tested on Firefox 3.6, Firefox 4.0, Firefox 5.0, Chrome 9, Opera 11, IE7, IE8, IE9)
  • Independant of all third party libraries, but plays nice with all of them
Using PathJS - A Brief Example
function clearPanel(){
// You can put some code in here to do fancy DOM transitions, such as fade-out or slide-in.
}
Path.map("#/users").to(function(){
alert("Users!");
});
Path.map("#/comments").to(function(){
alert("Comments!");
}).enter(clearPanel);
Path.map("#/posts").to(function(){
alert("Posts!");
}).enter(clearPanel);
Path.root("#/posts");
Path.listen();

Documentation and Tips
Any of the examples above confuse you? Read up on the details in the wiki.
Examples
You can find examples on the official Github Page.
Running Tests
To run the tests, simply navigate to the ./tests folder and open the HTML file in your browser. Please note that the HTML5 History API is not compatible with the
file:// protocol, and to run the tests in the tests/pushstate folder, you will need to run them through a webserver such as nginx or Apache.
Next Steps
  • Adding support for "after" callbacks
  • Deprecating the "enter" callback in favour of "before"
Pull Requests
To make a pull request, please do the following:
  • Mention what specific version of PathJS you were using when you encountered the issue/added the feature. This can be accessed by doing Path.version in a debugger console
  • Provide a pastie or gist that demonstrates the bug/feature
  • Make sure you update the test suite with your changes. All tests must pass
  • Make sure to update the minified version of the source
  • Do not modify the Path.version attribute. I will modify that manually when merging the request
Disclaimer
This code is provided with no warranty. While I strive to maintain backwards compatibility, the code is still under active development. As this is the case, some revisions may break break compatibility with earlier versions of the library. Please keep this in mind when using PathJS.
Copyright and Licensing
Copyright (c) 2011 Mike Trpcic, released under the MIT license.
About
Simple, lightweight routing for web browsers
Resources
Readme
Activity
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Highlight search terms from Google/DuckDuckGo/Bing referrer
(function() {
var ref = document.referrer;
var terms = [];
if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {
var url = new URL(ref);
var q = url.searchParams.get('q') || url.searchParams.get('p');
if (q) {
terms = q.split(/\s+/).filter(function(t) { return t.length > 2; });
}
}
if (terms.length === 0) return;
var style = document.createElement('style');
style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';
document.head.appendChild(style);
function highlight(node) {
if (node.nodeType === 3) { // text node
var text = node.textContent;
var found = false;
terms.forEach(function(term) {
var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi');
if (regex.test(text)) {
found = true;
var frag = document.createDocumentFragment();
var parts = text.split(regex);
parts.forEach(function(part, i) {
if (i % 2 === 0) {
frag.appendChild(document.createTextNode(part));
} else {
var span = document.createElement('span');
span.className = 'userscript-highlight';
span.textContent = part;
frag.appendChild(span);
}
});
node.parentNode.replaceChild(frag, node);
}
});
} else if (node.nodeType === 1 && node.childNodes) { // element
var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];
if (!skipTags.includes(node.tagName)) {
Array.from(node.childNodes).forEach(highlight);
}
}
}
highlight(document.body);
// Re-highlight on dynamic content
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1 || node.nodeType === 3) highlight(node);
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - medmemara/pathjs: Simple, lightweight routing for web browsers · GitHub
Skip to content
BranchesTags
Latest commit
History
47 Commits
Folders and files
NameName
Last commit message
Last commit date
tests
tests
README.markdown
README.markdown
path.js
path.js
path.min.js
path.min.js
Repository files navigation
PathJS
PathJS is a lightweight, client-side routing library that allows you to create "single page" applications using Hashbangs and/or HTML5 pushState.
Features
  • Lightweight
  • Supports the HTML5 History API, the 'onhashchange' method, and graceful degredation
  • Supports root routes, rescue methods, paramaterized routes, optional route components (dynamic routes), and Aspect Oriented Programming
  • Well Tested (tests available in the ./tests directory)
  • Compatible with all major browsers (Tested on Firefox 3.6, Firefox 4.0, Firefox 5.0, Chrome 9, Opera 11, IE7, IE8, IE9)
  • Independant of all third party libraries, but plays nice with all of them
Using PathJS - A Brief Example
function clearPanel(){
// You can put some code in here to do fancy DOM transitions, such as fade-out or slide-in.
}
Path.map("#/users").to(function(){
alert("Users!");
});
Path.map("#/comments").to(function(){
alert("Comments!");
}).enter(clearPanel);
Path.map("#/posts").to(function(){
alert("Posts!");
}).enter(clearPanel);
Path.root("#/posts");
Path.listen();

Documentation and Tips
Any of the examples above confuse you? Read up on the details in the wiki.
Examples
You can find examples on the official Github Page.
Running Tests
To run the tests, simply navigate to the ./tests folder and open the HTML file in your browser. Please note that the HTML5 History API is not compatible with the
file:// protocol, and to run the tests in the tests/pushstate folder, you will need to run them through a webserver such as nginx or Apache.
Next Steps
  • Adding support for "after" callbacks
  • Deprecating the "enter" callback in favour of "before"
Pull Requests
To make a pull request, please do the following:
  • Mention what specific version of PathJS you were using when you encountered the issue/added the feature. This can be accessed by doing Path.version in a debugger console
  • Provide a pastie or gist that demonstrates the bug/feature
  • Make sure you update the test suite with your changes. All tests must pass
  • Make sure to update the minified version of the source
  • Do not modify the Path.version attribute. I will modify that manually when merging the request
Disclaimer
This code is provided with no warranty. While I strive to maintain backwards compatibility, the code is still under active development. As this is the case, some revisions may break break compatibility with earlier versions of the library. Please keep this in mind when using PathJS.
Copyright and Licensing
Copyright (c) 2011 Mike Trpcic, released under the MIT license.
About
Simple, lightweight routing for web browsers
Resources
Readme
Activity
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Strip utm_, fbclid, gclid, etc. from all links on page
(function() {
var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',
'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',
'ref', 'ref_src', 'source', 'medium', 'campaign'];
function cleanUrl(url) {
try {
var u = new URL(url, window.location.origin);
var changed = false;
trackingParams.forEach(function(p) {
if (u.searchParams.has(p)) {
u.searchParams.delete(p);
changed = true;
}
});
return changed ? u.toString() : url;
} catch (e) {
return url;
}
}
function cleanLinks() {
document.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
cleanLinks();
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1) {
if (node.tagName === 'A') cleanLinks();
node.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '
GitHub - medmemara/pathjs: Simple, lightweight routing for web browsers · GitHub
Skip to content
BranchesTags
Latest commit
History
47 Commits
Folders and files
NameName
Last commit message
Last commit date
tests
tests
README.markdown
README.markdown
path.js
path.js
path.min.js
path.min.js
Repository files navigation
PathJS
PathJS is a lightweight, client-side routing library that allows you to create "single page" applications using Hashbangs and/or HTML5 pushState.
Features
  • Lightweight
  • Supports the HTML5 History API, the 'onhashchange' method, and graceful degredation
  • Supports root routes, rescue methods, paramaterized routes, optional route components (dynamic routes), and Aspect Oriented Programming
  • Well Tested (tests available in the ./tests directory)
  • Compatible with all major browsers (Tested on Firefox 3.6, Firefox 4.0, Firefox 5.0, Chrome 9, Opera 11, IE7, IE8, IE9)
  • Independant of all third party libraries, but plays nice with all of them
Using PathJS - A Brief Example
function clearPanel(){
// You can put some code in here to do fancy DOM transitions, such as fade-out or slide-in.
}
Path.map("#/users").to(function(){
alert("Users!");
});
Path.map("#/comments").to(function(){
alert("Comments!");
}).enter(clearPanel);
Path.map("#/posts").to(function(){
alert("Posts!");
}).enter(clearPanel);
Path.root("#/posts");
Path.listen();

Documentation and Tips
Any of the examples above confuse you? Read up on the details in the wiki.
Examples
You can find examples on the official Github Page.
Running Tests
To run the tests, simply navigate to the ./tests folder and open the HTML file in your browser. Please note that the HTML5 History API is not compatible with the
file:// protocol, and to run the tests in the tests/pushstate folder, you will need to run them through a webserver such as nginx or Apache.
Next Steps
  • Adding support for "after" callbacks
  • Deprecating the "enter" callback in favour of "before"
Pull Requests
To make a pull request, please do the following:
  • Mention what specific version of PathJS you were using when you encountered the issue/added the feature. This can be accessed by doing Path.version in a debugger console
  • Provide a pastie or gist that demonstrates the bug/feature
  • Make sure you update the test suite with your changes. All tests must pass
  • Make sure to update the minified version of the source
  • Do not modify the Path.version attribute. I will modify that manually when merging the request
Disclaimer
This code is provided with no warranty. While I strive to maintain backwards compatibility, the code is still under active development. As this is the case, some revisions may break break compatibility with earlier versions of the library. Please keep this in mind when using PathJS.
Copyright and Licensing
Copyright (c) 2011 Mike Trpcic, released under the MIT license.
About
Simple, lightweight routing for web browsers
Resources
Readme
Activity
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Auto-enable theater mode on YouTube
(function() {
function tryTheater() {
var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]');
if (btn && !btn.classList.contains('activated')) {
btn.click();
}
}
// Try immediately
tryTheater();
// Try after navigation (SPA)
var lastUrl = location.href;
setInterval(function() {
if (location.href !== lastUrl) {
lastUrl = location.href;
setTimeout(tryTheater, 500);
}
}, 1000);
// Also try on player load
var observer = new MutationObserver(tryTheater);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - medmemara/pathjs: Simple, lightweight routing for web browsers · GitHub
Skip to content
BranchesTags
Latest commit
History
47 Commits
Folders and files
NameName
Last commit message
Last commit date
tests
tests
README.markdown
README.markdown
path.js
path.js
path.min.js
path.min.js
Repository files navigation
PathJS
PathJS is a lightweight, client-side routing library that allows you to create "single page" applications using Hashbangs and/or HTML5 pushState.
Features
  • Lightweight
  • Supports the HTML5 History API, the 'onhashchange' method, and graceful degredation
  • Supports root routes, rescue methods, paramaterized routes, optional route components (dynamic routes), and Aspect Oriented Programming
  • Well Tested (tests available in the ./tests directory)
  • Compatible with all major browsers (Tested on Firefox 3.6, Firefox 4.0, Firefox 5.0, Chrome 9, Opera 11, IE7, IE8, IE9)
  • Independant of all third party libraries, but plays nice with all of them
Using PathJS - A Brief Example
function clearPanel(){
// You can put some code in here to do fancy DOM transitions, such as fade-out or slide-in.
}
Path.map("#/users").to(function(){
alert("Users!");
});
Path.map("#/comments").to(function(){
alert("Comments!");
}).enter(clearPanel);
Path.map("#/posts").to(function(){
alert("Posts!");
}).enter(clearPanel);
Path.root("#/posts");
Path.listen();

Documentation and Tips
Any of the examples above confuse you? Read up on the details in the wiki.
Examples
You can find examples on the official Github Page.
Running Tests
To run the tests, simply navigate to the ./tests folder and open the HTML file in your browser. Please note that the HTML5 History API is not compatible with the
file:// protocol, and to run the tests in the tests/pushstate folder, you will need to run them through a webserver such as nginx or Apache.
Next Steps
  • Adding support for "after" callbacks
  • Deprecating the "enter" callback in favour of "before"
Pull Requests
To make a pull request, please do the following:
  • Mention what specific version of PathJS you were using when you encountered the issue/added the feature. This can be accessed by doing Path.version in a debugger console
  • Provide a pastie or gist that demonstrates the bug/feature
  • Make sure you update the test suite with your changes. All tests must pass
  • Make sure to update the minified version of the source
  • Do not modify the Path.version attribute. I will modify that manually when merging the request
Disclaimer
This code is provided with no warranty. While I strive to maintain backwards compatibility, the code is still under active development. As this is the case, some revisions may break break compatibility with earlier versions of the library. Please keep this in mind when using PathJS.
Copyright and Licensing
Copyright (c) 2011 Mike Trpcic, released under the MIT license.
About
Simple, lightweight routing for web browsers
Resources
Readme
Activity
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Remove or un-stick sticky/fixed headers that block content
(function() {
function unstick() {
document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) {
if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {
el.style.position = 'static';
el.style.top = 'auto';
el.style.zIndex = 'auto';
}
});
}
unstick();
var observer = new MutationObserver(unstick);
observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
})();
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - medmemara/pathjs: Simple, lightweight routing for web browsers · GitHub
Skip to content
BranchesTags
Latest commit
History
47 Commits
Folders and files
NameName
Last commit message
Last commit date
tests
tests
README.markdown
README.markdown
path.js
path.js
path.min.js
path.min.js
Repository files navigation
PathJS
PathJS is a lightweight, client-side routing library that allows you to create "single page" applications using Hashbangs and/or HTML5 pushState.
Features
  • Lightweight
  • Supports the HTML5 History API, the 'onhashchange' method, and graceful degredation
  • Supports root routes, rescue methods, paramaterized routes, optional route components (dynamic routes), and Aspect Oriented Programming
  • Well Tested (tests available in the ./tests directory)
  • Compatible with all major browsers (Tested on Firefox 3.6, Firefox 4.0, Firefox 5.0, Chrome 9, Opera 11, IE7, IE8, IE9)
  • Independant of all third party libraries, but plays nice with all of them
Using PathJS - A Brief Example
function clearPanel(){
// You can put some code in here to do fancy DOM transitions, such as fade-out or slide-in.
}
Path.map("#/users").to(function(){
alert("Users!");
});
Path.map("#/comments").to(function(){
alert("Comments!");
}).enter(clearPanel);
Path.map("#/posts").to(function(){
alert("Posts!");
}).enter(clearPanel);
Path.root("#/posts");
Path.listen();

Documentation and Tips
Any of the examples above confuse you? Read up on the details in the wiki.
Examples
You can find examples on the official Github Page.
Running Tests
To run the tests, simply navigate to the ./tests folder and open the HTML file in your browser. Please note that the HTML5 History API is not compatible with the
file:// protocol, and to run the tests in the tests/pushstate folder, you will need to run them through a webserver such as nginx or Apache.
Next Steps
  • Adding support for "after" callbacks
  • Deprecating the "enter" callback in favour of "before"
Pull Requests
To make a pull request, please do the following:
  • Mention what specific version of PathJS you were using when you encountered the issue/added the feature. This can be accessed by doing Path.version in a debugger console
  • Provide a pastie or gist that demonstrates the bug/feature
  • Make sure you update the test suite with your changes. All tests must pass
  • Make sure to update the minified version of the source
  • Do not modify the Path.version attribute. I will modify that manually when merging the request
Disclaimer
This code is provided with no warranty. While I strive to maintain backwards compatibility, the code is still under active development. As this is the case, some revisions may break break compatibility with earlier versions of the library. Please keep this in mind when using PathJS.
Copyright and Licensing
Copyright (c) 2011 Mike Trpcic, released under the MIT license.
About
Simple, lightweight routing for web browsers
Resources
Readme
Activity
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Universal Dark Mode - works on any site
(function() {
var enabled = true;
function applyDarkMode() {
if (!enabled) return;
// Create style element if it doesn't exist
var style = document.getElementById('universal-dark-mode-style');
if (!style) {
style = document.createElement('style');
style.id = 'universal-dark-mode-style';
document.head.appendChild(style);
}
// Dark mode CSS - inverts colors but preserves images/video
style.textContent = '
/* Invert everything except media */
html {
filter: invert(1) hue-rotate(180deg) !important;
background: #1a1a2e !important;
}
/* Restore images, videos, iframes, canvas */
img, video, iframe, canvas, svg, picture, [style*="background-image"] {
filter: invert(1) hue-rotate(180deg) !important;
}
/* Preserve specific elements that should not be inverted */
.no-dark-mode, .no-dark-mode *,
[data-theme="light"], [data-theme="light"],
.ace_editor, .ace_editor *,
.CodeMirror, .CodeMirror *,
.monaco-editor, .monaco-editor *,
.markdown-body pre, .markdown-body pre *,
.highlight, .highlight *,
pre code, pre code * {
filter: none !important;
}
/* Fix common UI elements */
.modal, .popup, .dropdown-menu, .tooltip, .popover {
filter: invert(1) hue-rotate(180deg) !important;
background: #2d2d44 !important;
border-color: #444 !important;
}
/* Scrollbars */
::-webkit-scrollbar { background: #1a1a2e !important; }
::-webkit-scrollbar-thumb { background: #444 !important; }
::-webkit-scrollbar-thumb:hover { background: #555 !important; }
/* Selection */
::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
';
}
function removeDarkMode() {
var style = document.getElementById('universal-dark-mode-style');
if (style) style.remove();
}
// Toggle with Alt+Shift+D
document.addEventListener('keydown', function(e) {
if (e.altKey && e.shiftKey && e.key === 'D') {
e.preventDefault();
enabled = !enabled;
if (enabled) {
applyDarkMode();
console.log('[Universal Dark Mode] Enabled');
} else {
removeDarkMode();
console.log('[Universal Dark Mode] Disabled');
}
}
});
// Apply on load
applyDarkMode();
// Re-apply on dynamic content
var observer = new MutationObserver(function(mutations) {
if (enabled && !document.getElementById('universal-dark-mode-style')) {
applyDarkMode();
}
});
observer.observe(document.head, { childList: true });
console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');
})();
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();
GitHub - medmemara/pathjs: Simple, lightweight routing for web browsers · GitHub
Skip to content
BranchesTags
Latest commit
History
47 Commits
Folders and files
NameName
Last commit message
Last commit date
tests
tests
README.markdown
README.markdown
path.js
path.js
path.min.js
path.min.js
Repository files navigation
PathJS
PathJS is a lightweight, client-side routing library that allows you to create "single page" applications using Hashbangs and/or HTML5 pushState.
Features
  • Lightweight
  • Supports the HTML5 History API, the 'onhashchange' method, and graceful degredation
  • Supports root routes, rescue methods, paramaterized routes, optional route components (dynamic routes), and Aspect Oriented Programming
  • Well Tested (tests available in the ./tests directory)
  • Compatible with all major browsers (Tested on Firefox 3.6, Firefox 4.0, Firefox 5.0, Chrome 9, Opera 11, IE7, IE8, IE9)
  • Independant of all third party libraries, but plays nice with all of them
Using PathJS - A Brief Example
function clearPanel(){
// You can put some code in here to do fancy DOM transitions, such as fade-out or slide-in.
}
Path.map("#/users").to(function(){
alert("Users!");
});
Path.map("#/comments").to(function(){
alert("Comments!");
}).enter(clearPanel);
Path.map("#/posts").to(function(){
alert("Posts!");
}).enter(clearPanel);
Path.root("#/posts");
Path.listen();

Documentation and Tips
Any of the examples above confuse you? Read up on the details in the wiki.
Examples
You can find examples on the official Github Page.
Running Tests
To run the tests, simply navigate to the ./tests folder and open the HTML file in your browser. Please note that the HTML5 History API is not compatible with the
file:// protocol, and to run the tests in the tests/pushstate folder, you will need to run them through a webserver such as nginx or Apache.
Next Steps
  • Adding support for "after" callbacks
  • Deprecating the "enter" callback in favour of "before"
Pull Requests
To make a pull request, please do the following:
  • Mention what specific version of PathJS you were using when you encountered the issue/added the feature. This can be accessed by doing Path.version in a debugger console
  • Provide a pastie or gist that demonstrates the bug/feature
  • Make sure you update the test suite with your changes. All tests must pass
  • Make sure to update the minified version of the source
  • Do not modify the Path.version attribute. I will modify that manually when merging the request
Disclaimer
This code is provided with no warranty. While I strive to maintain backwards compatibility, the code is still under active development. As this is the case, some revisions may break break compatibility with earlier versions of the library. Please keep this in mind when using PathJS.
Copyright and Licensing
Copyright (c) 2011 Mike Trpcic, released under the MIT license.
About
Simple, lightweight routing for web browsers
Resources
Readme
Activity
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors