Skip to content

Instantly share code, notes, and snippets.

@elffey
Created May 27, 2011 18:48
Show Gist options
  • Save elffey/995890 to your computer and use it in GitHub Desktop.
Save elffey/995890 to your computer and use it in GitHub Desktop.
Simple navigation/routes/statechart
MyApp.menuController = SC.ArrayController.create({
allowsEmptySelection: NO,
allowsMultipleSelection: NO,
content: [
SC.Object.create({
name: 'Dashboard',
route: 'dashboard',
relatedView: 'dashboard'
}),
SC.Object.create({
name: 'News',
route: 'news',
relatedView: 'news'
}),
SC.Object.create({
name: 'Files',
route: 'files',
relatedView: 'files'
})
],
selectionChanged: function() {
if(this.hasSelection()) {
MyApp.Router.setRoute(this.get('selection').firstObject().route);
}
}.observes('MyApp.menuController.selection'),
select: function(view) {
var item = this.get('content').findProperty('relatedView', view);
if(item) {
this.selectObject(item);
}
}
});
MyApp.mainPage = SC.Page.design({
showModule: function(newViewName) {
var container = this.getPath('mainPane.wrapper.content.mainSplit.bottomRightView');
container.set('nowShowing', newViewName + 'View');
},
mainPane: SC.MainPane.design({
childViews: 'wrapper'.w(),
wrapper: SC.View.design({
layerId: 'wrapper',
layout: { top: 0, bottom: 0, left: 0, right: 0 },
childViews: 'header content footer'.w(),
header: MyApp.HeaderView,
content: SC.View.design({
layerId: 'content',
layout: { top: 200, bottom: 0, left: 0, right: 0 },
childViews: 'mainSplit'.w(),
mainSplit: SC.SplitView.design({
layerId: 'main-split',
classNames: 'main-split'.w(),
layout: { left: 0, top: 0, right: 0, bottom: 36 },
layoutDirection: SC.LAYOUT_HORIZONTAL,
autoresizeBehavior: SC.RESIZE_BOTTOM_RIGHT,
defaultThickness: 125,
topLeftMinThickness: 125,
dividerThickness: 6,
topLeftView: SC.ScrollView.design({
layerId: 'navigation-container',
contentView: MyApp.NavigationView
}),
dividerView: SC.SplitDividerView,
bottomRightView: SC.ContainerView.design({
layerId: 'main-content-container',
nowShowing: 'dashboardView'
})
})
}),
footer: MyApp.FooterView
})
}),
dashboardView: MyApp.DashboardView,
newsView: MyApp.NewsView,
filesView: MyApp.FilesView
});
MyApp.Router = SC.Object.create({
routeChanged: function(route) {
MyApp.statechart.sendEvent('routeChanged', route);
},
setRoute: function(route) {
SC.routes.set('location', route);
}
});
MyApp.DashboardState = SC.State.design({
enterState: function() {
MyApp.Router.setRoute('dashboard');
MyApp.menuController.select('dashboard');
MyApp.mainPage.showModule('dashboard');
}
});
MyApp.LoggedInState = SC.State.design({
initialSubstate: 'dashboard',
enterState: function() {
MyApp.getPath('mainPage.mainPane').append();
},
exitState: function() {
MyApp.getPath('mainPage.mainPane').remove();
},
routeChanged: function(route) {
var url = route.url;
var routes = {
dashboard: 'dashboard',
news: 'news',
files: 'files'
};
if(routes[url]) {
MyApp.statechart.gotoState(routes[url]);
}
},
dashboard: SC.State.plugin('MyApp.DashboardState'),
news: SC.State.plugin('MyApp.NewsState'),
files: SC.State.plugin('MyApp.FilesState')
});
MyApp.MenuView = SC.SourceListView.design({
layerId: 'navigation',
actOnSelect: YES,
contentValueKey: 'name',
contentBinding: 'MyApp.menuController.arrangedObjects',
selectionBinding: 'MyApp.menuController.selection',
canReorderContent: NO
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment