Skip to content
master
Switch branches/tags
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 

MIT License

Support

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']);

// ROLES + OPTIONS
// v4.0 for jComponent and v3.0 classic version
jRouting.route('/secure/area/', view_products, ['auth', '@rolename1', '@rolename2', { custom: 'options' }]);

jRouting.middleware('auth', function(next, options, roles) {
    console.log(options);
    // --> { custom: 'options' }
    console.log(roles);
    // --> ['rolename1', 'rolename2']
});


// 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, options, roles) {
    // 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

About

Great routing mechanism for client-side web applications

Topics

Resources

License

Packages

No packages published