Great routing mechanism for client-side web applications
JavaScript Shell
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
jrouting.js
jrouting.min.js
license.txt
minify.sh
readme.md

readme.md

MIT License

Support Donate

jRouting

The library supports the HTML 5 History API only. This plugin is a little big cannon for the web development. Works only with jQuery.

YOU MUST SEE:

Simple example

// ===========================
// DEFINE ROUTING
// ===========================

// jRouting === global variable
jRouting.route('/homepage/', view_homepage, init_homepage);
jRouting.route('/products/{category}/', view_products, ['data']);

// Supports HASHTAG routes
jRouting.route('#users', view_homepage, init_homepage);
jRouting.route('#products', view_homepage, init_homepage);
// jRouting.redirect('#users');

// ===========================
// DEFINE MIDDLEWARE
// ===========================

jRouting.middleware('data', function(next) {
    next();
    // next(new Error('Some error'))
    // IMPORTANT: jRouting won't execute any next middleware and a target route
});

// ===========================
// DEFINE VIEWS
// ===========================

function view_homepage() {
    var self = this;
    // self === jRouting
    $('#content').html('HOMEPAGE');
}

function init_homepage(next) {
    // is executed one time
    next();
}

function view_products(category) {
    // self === jRouting
    $('#content').html('PRODUCTS –> ' + category);
}

// ===========================
// DEFINE EVENTS
// ===========================

jRouting.on('location', function(url) {
     var menu = $('.menu');
     menu.find('.selected').removeClass('selected');
     menu.find('a[href="' + url + '"]').parent().addClass('selected');
});

Properties

jRouting.url;

{String} - Current URL address.

console.log(jRouting.url);

jRouting.version;

{Number} - Current framework version.

console.log(jRouting.version);

jRouting.history;

{String Array} - History list (LIMIT_HISTORY === 100).

console.log(jRouting.history);

jRouting.errors;

{String Array} - Error list (LIMIT_HISTORY_ERROR === 100).

console.log(jRouting.errors);

jRouting.global;

{Empty object} - Temporary global object for storing a temporary data.

jRouting.global.secret = 'AbcaDUIAZ349';
jRouting.global.name = 'total.js';

jRouting.repository;

{Empty Object} - A temporary object for the current location. This property remembers last state for the URL.

jRouting.repository.title = 'jRouting';

jRouting.model;

{Object} - model for the current location.

jRouting.redirect('/new-url/', { name: 'jRouting '});

// --> view

function view_new_url() {
    var self = this;
    console.log(self.model); // --> model.name: jRouting
}

jRouting.query;

{Object} - Get the current params from the URL address (url -> query). After redirect or refresh are params re-loaded.

// ---> /current-page/?q=jComponent
console.log(jRouting.query.q);

 Methods

jRouting.route(path, fn, [middleware], [init])

Create a route.

jRouting.route('/', view_homepage);
jRouting.route('/products/{category}/', view_products, ['middleware']);
jRouting.route('/products/{category}/', view_products, ['middleware'], function(next) {
    // initialization function
    next();
});

// OR
ROUTE('/', view_homepage);

jRouting.middleware(name, fn)

Create a middleware

jRouting.middleware('latest', function(next) {
    // continue
    next();
});

jRouting.redirect(url, [model])

Redirect.

jRouting.redirect('/products/shoes/');

// or

jRouting.redirect('/products/shoes/', { from: 'jeans', latest: true, custom: 'model' });

jRouting.prev()

Returns the previouse URL address.

console.log(jRouting.prev());

jRouting.back()

Goes back to previous URL.

jRouting.back();

jRouting.refresh()

Refresh the current page.

jRouting.refresh();

Events

jRouting.on('ready')

Is the library ready?

jRouting.once('ready', function() {
    console.log('I\'m ready');
    jRouting.redirect('/homepage/');
});

jRouting.on('location')

Captures a new location.

jRouting.on('location', function(url) {
    console.log('new location --->', url);
});

jRouting.on('error')

Captures some error.

jRouting.on('error', function(error, url, description) {
    console.log('ERROR --->', error, url, description);
});

jRouting.on('status')

Captures a HTTP error.

jRouting.on('status', function(code, message) {
    switch (code) {
        case 404:
            console.log('NOT FOUND', message);
            break;
        case 500:
            console.log('INTERNAL ERROR', message);
            break;
    }
});

Assign links to jRouting

IMPORTANT: doesn't work with hashtags. Hashtags doesn't need a prevention for redirecting.

jR.clientside('a.jrouting');

// or
// <div class="jrouting" data-jr="/homepage/">CLICK ON ME</div>
jR.clientside('div.jrouting');

Alias: jRouting is too long as word

// use alias:
// jR === jRouting
jR.route('/', ...);

+v1.3.0 Async loading

<script async src="jquery.min.js"></script>
<script async src="jrouting.min.js"></script>
if (!window.jRoute)
    window.jRoute = [];

window.jRoute.push(function() {
    jRouting.route('/', function() {
        console.log('Classic route');
    });        

    jRouting.route('#hashtag', function() {
        console.log('Hashtag');
    });
});

 Contact

Peter Širka - www.petersirka.eu / petersirka@gmail.com