1.3.1 • Published 6 years ago
trickr v1.3.1
Trickr
Trickr is Fake Router based on History.js. you don't need multiple HTML files. just write Only one HTML and Page Element.
Installation
with Node.js
npm install --save trickr
with Bower
bower install --save trickr
Release
1.1.0
Router.get
,Router.post
, Addingredirect(path, state)
parameterRouter.anchor
is able to other tags, Usingdata-method
,data-href
Request.post
,Request.get
return Promise- Fix
formData
parameter name tostate
- Adding middleware register
Router.middleware(callback)
1.2.0
formData
is added again. It is separated fromstate
1.3.0
Router.middleware
Callback parameter;formData
,redirect
,state
,params
,request
,Router.get
,Router.post
Set specific route middlewareRequest.get
,Request.post
is not static function anymore! \ you can userequest
parameter in Route callback.request.get
,request.post
Callback parameter; RemovingTrickr.Router
, Adding Request Parameter
Basic usage
Inlucde trickr scripts with history.js in .html
<div id="wrapper">
<main id="main" role="main">
<h1> INDEX </h1>
<a href="/user">user</a>
</main>
<section id="user">
<h1> USER </h1>
</section>
</div>
<script src="bower_components/history.js/scripts/bundled/html4+html5/native.history.js"></script>
<script src="bower_components/trickr/dist/trickr.min.js"></script>
<script>
const router = new Router();
router.get('/user', '#user', function() {
// callback...
let h1 = document.getElementsByTagName('h1')[0].innerHTML;
console.log(h1); // USER
});
router.init('/', '#wrapper', '#main', function() {
// callback...
let h1 = document.getElementsByTagName('h1')[0].innerHTML;
console.log(h1); // INDEX
// anchor
let anchor = document.getElementsByTagName('a')[0];
router.anchor(anchor);
});
</script>
with javascript framework such as Vue, React, Angular
const trickr = require('trickr');
/** Trickr Router **/
const router = new trickr.Router();
// ...
Methods
Router
Router.init(base: string, wrapper: string, index: string, callback: Function)
You must call Router.init
for initialing Router.
Parameters
- base: string - Base location path.
- wrapper : Selector of wrapper element which is included index, and page elements.
- index: Selector of index element.
- callback: Callback before removing page elements.
Usage
<div id="wrapper">
<div id="main">
<!-- ... -->
</div>
<!-- Page Elements... -->
</div>
Router.init('/', '#wrapper', '#main', function() {
// ...
})
Router.get(path: string, selector: string, callback: Function, middlewares: Array)
Parameters
- path: Route path.
- selector: Page element.
- callback: Callback after loading page element.
- middlewares: Route middlewares.
Usage
<div id="wrapper">
<!-- Main Element... -->
<div id="user">
<!-- Page Content ... -->
</div>
</div>
Router.get('/user', '#user', function() {
// ...
}, [ /* middleware: Function */ ])
Router.post(path: string, callback: Function, middlewares: Array)
Parameters
- path: Route path.
- callback: Callback after request.
- middlewares: Route middlewares.
Usage
Router.post('/user/create', function() {
// ...
}, [ /* middleware: Function */ ])
Router.use(path: string, router: Trickr.Router)
Parameters
- path: Route base path.
- router: The router which will be combined.
Usage
const user = require('./user');
// path.join('/user', __ROUTE_PATH__)
Router.use('/user', user);
Router.middleware(callback: Function)
Setting global middleware. \
You can use parameters such as formData
, redirect
. \
must return boolean
for next middleware, or route callback.
Parameters
- callback: middleware before Rouing.
Usage
Router.middleware(function() {
// ...
return true;
})
Router.anchor(el: Element)
Setting anchor for Route.
Parameters
- el: HTML Element.
Usage
<!-- http://__DOMAIN__/__BASE__/user?name=foo -->
<a href="/user?name=foo" id="#user-btn">user</a>
<!-- with data Attributes -->
<span id="#user-btn" data-href="/user?name=foo" data-method="get" style="cursor:pointer;">user</span>
Router.get('/user', '#user', function({ params }) {
// { name: foo }
console.log(params);
})
Router.init(/* ... */, function() {
Router.anchor(document.getElementById('#user-btn'));
});
Router.form(el: Element)
Setting form for Route.
Parameters
- el: HTML
form
Element.
Usage
<!-- form -->
<form method="post" action="/user" id="user-form">
<input type="text" placeholder="search..." name="search">
<input type="submit">
</form>
Router.post('/user', function({ formData }) {
// { search: __SEARCH_VALUE__ }
console.log(formData)
})
Router.init(/* ... */, function() {
Router.form(document.getElementById('#user-form'));
});
Request
Request.get(path: string, params: object): string
'get' Request.
Parameters
- path: Route path.
- params: Parameters.
Return
string
: HTML String
Usage
Router.post('/user/create', function({ request }) {
request.get('/user/profile', { /* Parameters */ }).then(function(res) {
// HTML String; Page element of '/user/profile'
console.log(res)
})
})
Router.get('/user/profile', '#profile', function({ params }) {
// Parameters
console.log(params);
})
Request.post(path: string, params: object): object
'post' Request.
Parameters
- path: Route path.
- params: Parameters.
Return
- Object:
callback
in post callback
Usage
Router.post('/user/create', function({ request }) {
request.post('/user/profile', { /* Parameters */ }).then(function(res) {
// object
console.log(res)
})
})
Router.post('/user/profile', function({ callback, params }) {
// Parameters
console.log(params);
callback({ /* Response */ })
})
Parameters
URL Params
usage
<!-- http://__DOMAIN__/__BASE__/user?name=foo -->
<a href="/user?name=foo">user</a>
<!-- with data Attributes -->
<span data-href="/user?name=foo" data-method="get" style="cursor:pointer;">user</span>
// params
Router.get('/user', '#user', function({ params }) {
// { name: foo }
console.log(params);
});
Router.init('/', '#wrapper', '#main', function() {
let anchor = document.getElementsByTagName('a')[0];
Router.anchor(anchor);
anchor = document.getElementsByTagName('span')[0];
router.anchor(anchor);
});
Callback
When use post route, provided callback
usage
// callback
Router.post('/user', function({ callback }) {
callback({
name: 'foo'
});
});
Router.get('/user', '#user', function({ request }) {
request.post('/user').then(function(res) {
// { name: foo }
console.log(res);
});
});
formData
When use form
tag in HTML, provided formData
usage
<!-- form -->
<form method="get" action="/user">
<input type="text" placeholder="search..." name="search">
<input type="submit">
</form>
// formData
Router.get('/user', '#user', function({ formData }) {
// { search: __VALUE__ }
console.log(formData);
});
Router.init('/', '#wrapper', '#main', function() {
// form
let form = document.getElementsByTagName('form')[0];
Router.form(form);
});
Redirect
in Router.get
, Router.post
usage
// redirect
Router.get('/user', '#user', function({ redirect }) {
redirect('/', null);
});
State
When use redirect
with state, is provided state
usage
Router.get('/user', '#user', function({ redirect }) {
// redirect
redirect('/user/list', { /** .. */ })
});
Router.get('/user/list', '#userList', function({ state }) {
/** ... */
console.log(state)
})
Request
usage
Router.post('/user/create', function({ request }) {
request.post('/user/profile', { /* Parameters */ }).then(function(res) {
// object
console.log(res)
})
})
Router.post('/user/profile', function({ callback, params }) {
// Parameters
console.log(params);
callback({ /* Response */ })
})
License
MIT