Skip to content

Instantly share code, notes, and snippets.

@wilsonpage
Created November 26, 2011 12:32
Show Gist options
  • Save wilsonpage/1395581 to your computer and use it in GitHub Desktop.
Save wilsonpage/1395581 to your computer and use it in GitHub Desktop.
Example router module
define([
'jQuery',
'Underscore',
'Backbone',
'modules/feed',
'modules/files',
'modules/members',
'modules/misc/GBL',
'modules/misc/lightbox'
], function($, _, Backbone, Feed, Files, Members, GBL, Lightbox){
// Exports
var Router = {};
// Locals
var el = {};
/**
* NoRefreshLinks
*
* This prevents the default operation of link submission for any anchor with a 'data-href' attr
* Usage: <a data-href='/path/to/somewhere'>Link</a>
*
*/
var hijackLink = function(e){
// preventDefault is good because it can be called at the start
// return false has to be called at the end and in this case prevents
// you find identifying errors. Blog Post on it: http://wilsonpage.tumblr.com/post/12201825238/event-preventdefault-vs-return-false
e.preventDefault();
var href = $(this).attr('href');// TODO: This may break in IE due to incorrect href attr returned
href = href.slice(1, href.length);
// use backbone to shift url
Router.Routes.navigate(href, true);
};
/**
* NavigateTo
*
*/
var navigateTo = function(view, options){
//console.log(view)
// get the correct column, return if no coumn found
var col = el.columns.filter('#' + view + '-column');
// return if no column is found
if(!col.length){return 'No col found'}
var index = el.columns.index(col),// find the index of this column
pxMargin = -(index * col.width()),// calculate distance to move
options = options || {};// if no options passed in assign enty object
// deciding whether to show transition or not. If a transition has not been
// defined then set the transition value depending on whether there is a view or not.
// If it is defined then use that value.
options.transition = (options.transition==undefined) ? (GBL.view!=undefined) : options.transition;
// close any open lightboxes
//Lightbox.closeAll();
//
col.css({height: 'auto'});
el.columns.not(col).css({height: 300 });// TODO: this hight should not be hard coded here
if(options.transition){// if transition:
// transtion CSS3 or JS
(Modernizr.csstransitions) ?
el.columnWrapper.css({ left:pxMargin }) :
el.columnWrapper.animate({ left:pxMargin }, 500);
}else{// if no transition:
// add the .no-tranistions class to prevent css3 transition
el.columnWrapper.addClass('no-transitions')
// adjust css
el.columnWrapper.css({ left:pxMargin });
// remove the .no-transitions class 600ms later
setTimeout(function(){
el.columnWrapper.removeClass('no-transitions');
},600);
}
// add the new $1-view clas to the #site-wrap
$('#site-wrap')
.removeClass("feed-view files-view members-view")
.addClass(view + '-view');
};
// ROUTES
var Routes = Backbone.Router.extend({
// Route Definitions
routes: {
'' : 'feed',
'feed' : 'feed',
'files' : 'files',
'members' : 'members',
':view/:itemID' : 'viewItem',
// Default
'*actions' : 'feed'
},
feed: function() {
Feed.show();
navigateTo('feed');
GBL.view = 'feed';
},
files: function() {
Files.show();
navigateTo('files');
GBL.view = 'files';
},
members: function() {
Members.show();
navigateTo('members');
GBL.view = 'members';
},
viewItem: function(view, itemID) {
if(!GBL.view){ this[view]() };// TODO: If no view is loaded: load the view associated with this item
switch(view){
case'feed': break;
case'files': new Files.LightboxView(itemID); break;
case'members': new Members.Views.Profile(itemID); break;
}
}
});
// INIT
Router.init = function(){
el.columnWrapper = $('#column-wrapper');
el.columns = $('.main-column');
Router.Routes = new Routes;
Backbone.history.start({pushState: true});
$('a.push').live('click', hijackLink);
// if no view has loaded yet, load the default view
if(!GBL.view){Router.Routes.navigate('', true) }
};
// return Exports
return Router;
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment