2012-03-09 05:02:49 +00:00
|
|
|
$(function() {
|
2012-06-04 04:20:05 +00:00
|
|
|
var firstInHistory = true;
|
2012-03-09 05:02:49 +00:00
|
|
|
|
2012-06-04 04:20:05 +00:00
|
|
|
var MainView = Backbone.View.extend({
|
|
|
|
el: $("div.container"),
|
2012-03-09 05:02:49 +00:00
|
|
|
|
2012-06-04 04:20:05 +00:00
|
|
|
modalTemplate: _.template($("#modal-template").html()),
|
2012-03-09 05:02:49 +00:00
|
|
|
|
2012-06-04 04:20:05 +00:00
|
|
|
events:{
|
|
|
|
"click ul.the-icons > li": "iconClicked"
|
|
|
|
},
|
2012-03-09 05:02:49 +00:00
|
|
|
|
2012-06-04 04:20:05 +00:00
|
|
|
iconClicked: function(event) {
|
|
|
|
event.preventDefault();
|
2012-03-09 05:02:49 +00:00
|
|
|
|
2012-06-04 04:20:05 +00:00
|
|
|
var $item = $(event.currentTarget);
|
|
|
|
var $iconName = $item.find("i").attr("class");
|
|
|
|
|
|
|
|
mainRouter.navigate("icon/" + $iconName, {trigger: true});
|
|
|
|
firstInHistory = false;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
var MainRouter = Backbone.Router.extend({
|
|
|
|
routes: {
|
|
|
|
"icon/:iconName": "showIcon"
|
|
|
|
},
|
|
|
|
|
|
|
|
showIcon: function(iconName) {
|
|
|
|
var $modal = $(mainView.modalTemplate({"iconName": iconName}));
|
|
|
|
|
|
|
|
$modal.modal("show");
|
|
|
|
$modal.on('hidden', function () {
|
|
|
|
$modal.remove();
|
|
|
|
if (firstInHistory) {
|
|
|
|
mainRouter.navigate("/", {trigger: false});
|
|
|
|
firstInHistory = false;
|
|
|
|
} else {
|
|
|
|
window.history.back();
|
2012-03-09 05:02:49 +00:00
|
|
|
}
|
2012-06-04 04:20:05 +00:00
|
|
|
})
|
|
|
|
}
|
|
|
|
});
|
2012-03-09 05:02:49 +00:00
|
|
|
|
2012-06-04 04:20:05 +00:00
|
|
|
var mainView = new MainView();
|
|
|
|
var mainRouter = new MainRouter();
|
|
|
|
Backbone.history.start({pushState : false});
|
2012-03-09 05:02:49 +00:00
|
|
|
});
|