partial.js client-side routing

Framework supports the HTML 5 History API, for older browsers (IE8+) URL hashtag is automatically enabled. This plugin is a little big cannon for the web development. Works best with jQuery.

easy to use
minified only 9.5 kB (without GZIP compression)
great functionality
great use
works in IE 8+
no dependencies
DEMO EXAMPLE

MUST SEE:

Simple example

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

// framework === global variable

framework.route('/homepage/', view_homepage, ['contact']);
framework.route('/services/', view_services, ['contact']);
framework.route('/contact/', view_contact, ['empty']);
framework.route('/products/{category}/', view_products, ['latest']);

// ===========================
// DEFINE PARTIAL CONTENT
// ===========================

framework.partial('contact', function() {
    $('#panel').html('PANEL CONTACT');
});

framework.partial('empty', function() {
    $('#panel').html('PANEL EMPTY');
});

framework.partial('latest', function() {
    $('#panel').html('PANEL LATEST');
});

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

function view_homepage() {
    $('#content').html('HOMEPAGE');
}

function view_services() {
    $('#content').html('SERVICES');
}

function view_contact() {
    $('#content').html('CONTACT');
}

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

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

framework.on('ready', function() {
    $('.menu').on('click', 'a', function(e) {
        e.preventDefault();
        e.stopPropagation();
        framework.redirect($(this).attr('href'));
    });
    framework.redirect('/homepage/');
});

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

Properties

framework.isModernBrowser;

{Boolean} - Supports browser HistoryAPI?

framework.url;

{String} - Current URL address.

console.log(framework.url);

framework.version;

{Number} - Current framework version.

console.log(framework.version);

framework.history;

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

console.log(framework.history);

framework.errors;

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

console.log(framework.errors);

framework.global;

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

framework.global.secret = 'AbcaDUIAZ349';
framework.global.name = 'partial.js';

framework.repository;

{Empty Object} - Temporary object for the current location. After redirecting is the repository object cleared.

framework.repository.title = 'partial.js title';

framework.model;

{Object} - model for the current location.

framework.redirect('/new-url/', { name: 'partial.js '});

// --> view

function view_new_url() {
	// this === framework
	var self = this;
	console.log(self.model);
}

framework.isReady;

{Boolean} - Is framework ready??

console.log(framework.isReady);

framework.isRefresh;

{Boolean} - Is refresh?

function view() {
	var self = this;
	// --> self.refresh();
	console.log(self.isRefresh);
}

framework.get;

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

// ---> /current-page/?q=partial.js
console.log(framework.get.q);

## Methods

framework.route(path, fn, [partials], [once])

Create a route.

framework.route('/', view_homepage);
framework.route('/products/{category}/', view_products, ['latest']);

framework.partial(name, fn)

Create a partial content

framework.partial('latest', function() {
	console.log('latest products');
});

framework.redirect(url, [model])

Redirect.

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

// or

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

framework.back()

History back.

framework.back();

framework.refresh()

Refresh current page.

framework.refresh();

Events

framework.on('ready')

Is framework ready?

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

framework.on('location')

Capture a new location.

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

framework.on('error')

Capture an error.

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

framework.on('status')

Capture an HTTP status.

framework.on('status', function(code, message) {

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

});

saksoy / partial.js-clientside Goto Github PK

partial.js-clientside's Introduction