https://github.com/sauldoescode/tinyrouter
Tiny Front End Router for use in any modern website
https://github.com/sauldoescode/tinyrouter
Last synced: 8 months ago
JSON representation
Tiny Front End Router for use in any modern website
- Host: GitHub
- URL: https://github.com/sauldoescode/tinyrouter
- Owner: SaulDoesCode
- License: mit
- Created: 2015-10-20T18:37:45.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2016-12-24T18:47:05.000Z (about 9 years ago)
- Last Synced: 2025-02-23T09:43:28.960Z (12 months ago)
- Language: JavaScript
- Size: 4.88 KB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# TinyRouter
Tiny Front End Router for use in any modern website
#### Quick Use
##### How Handle a URL hash
``` javascript
router.handle("#anyHashOrLink", () => {
// do something when that hash/link has been called
});
```
##### set the Document Title
``` javascript
router.setTitle("My Awesome Website Title");
```
##### Open a link
``` javascript
// router.open( _link_ , _optional-boolean-for-newtab_);
// Opens the link in the same window
router.open("/awesome-link");
// Opens the link in a new tab
router.open("http://www.some-other-site.meh",true); // notice the second parameter is just true, this opens the link in a new tab
//
```
##### Make an Element a click-able link
Some arbitrary HTML
``` html
Fancy Link
```
then in your JavaScript file
``` javascript
// Any CSS selector will work
router.makeLink("#myfancybutton","www.fancylink.com"); // This will change the window location on click of the element
// Make link open in new tab - add in true as the second parameter
router.makeLink("#myfancybutton","www.fancylink.com" , true );
// What if it should open on a different event type ? - add in a third parameter with the desired event type
// any of the usual addEventListener types should work
router.makeLink("#myfancybutton","www.fancylink.com" , true , "dblclick");
```
Alternative Way of making an element a click-able link , simply add a ` link="URL" ` attribute to the element
here's an example
``` html
Fancy Navigation Link
```
##### Set a View On an Element
Some Site HTML
``` html
```
Your JavaScript
``` javascript
var NewsView = `
This Just In New Tiny Router Micro toolkit rocks the crowd
Lorem Ipsum ...
`;
router.handle("#news", () => {
// select the element to recieve the view with a CSS selector
router.setView('.important-content',NewsView); // This will set the contents of the element to NewsView
});
// or Fetch the View from a URL
router.handle("#news", () => {
// select the element to recieve the view with a CSS selector
router.fetchView('.important-content',"/news-service");
// This will set the contents of the element to the response of the url
});
//also optional caching available for the router.fetchView function
router.fetchView('.important-content',"/news-service", true /* set cache to true */ , "identifier");
/* cache identifier (can be anything) */
```