nice dynamic arrows

This commit is contained in:
Peter Cottle 2012-12-24 12:35:09 -08:00
parent cab63cbce0
commit 7acde81510
4 changed files with 40 additions and 17 deletions

View file

@ -8685,7 +8685,10 @@ var LeftRightView = PositiveNegativeBase.extend({
this.destination = options.destination; this.destination = options.destination;
this.navEvents = options.events; this.navEvents = options.events;
this.JSON = {}; this.JSON = {
showLeft: (options.showLeft === undefined) ? true : options.showLeft,
lastNav: (options.lastNav === undefined) ? false : options.lastNav
};
this.render(); this.render();
} }
@ -13791,21 +13794,23 @@ var MultiView = Backbone.View.extend({
return view; return view;
}, },
addNavToView: function(view) { addNavToView: function(view, index) {
var leftRight = new LeftRightView({ var leftRight = new LeftRightView({
events: this.navEvents, events: this.navEvents,
// we want the arrows to be on the same level as the content (not // we want the arrows to be on the same level as the content (not
// beneath), so we go one level up with getDestination() // beneath), so we go one level up with getDestination()
destination: view.getDestination() destination: view.getDestination(),
showLeft: (index !== 0),
lastNav: (index === this.childViewJSONs.length - 1)
}); });
}, },
render: function() { render: function() {
// go through each and render... show the first // go through each and render... show the first
_.each(this.childViewJSONs, function(childViewJSON) { _.each(this.childViewJSONs, function(childViewJSON, index) {
var childView = this.createChildView(childViewJSON); var childView = this.createChildView(childViewJSON);
this.childViews.push(childView); this.childViews.push(childView);
this.addNavToView(childView); this.addNavToView(childView, index);
}, this); }, this);
this.showViewIndex(this.currentIndex); this.showViewIndex(this.currentIndex);
@ -16892,7 +16897,10 @@ var LeftRightView = PositiveNegativeBase.extend({
this.destination = options.destination; this.destination = options.destination;
this.navEvents = options.events; this.navEvents = options.events;
this.JSON = {}; this.JSON = {
showLeft: (options.showLeft === undefined) ? true : options.showLeft,
lastNav: (options.lastNav === undefined) ? false : options.lastNav
};
this.render(); this.render();
} }
@ -17099,21 +17107,23 @@ var MultiView = Backbone.View.extend({
return view; return view;
}, },
addNavToView: function(view) { addNavToView: function(view, index) {
var leftRight = new LeftRightView({ var leftRight = new LeftRightView({
events: this.navEvents, events: this.navEvents,
// we want the arrows to be on the same level as the content (not // we want the arrows to be on the same level as the content (not
// beneath), so we go one level up with getDestination() // beneath), so we go one level up with getDestination()
destination: view.getDestination() destination: view.getDestination(),
showLeft: (index !== 0),
lastNav: (index === this.childViewJSONs.length - 1)
}); });
}, },
render: function() { render: function() {
// go through each and render... show the first // go through each and render... show the first
_.each(this.childViewJSONs, function(childViewJSON) { _.each(this.childViewJSONs, function(childViewJSON, index) {
var childView = this.createChildView(childViewJSON); var childView = this.createChildView(childViewJSON);
this.childViews.push(childView); this.childViews.push(childView);
this.addNavToView(childView); this.addNavToView(childView, index);
}, this); }, this);
this.showViewIndex(this.currentIndex); this.showViewIndex(this.currentIndex);

View file

@ -160,11 +160,19 @@
</script> </script>
<script type="text/html" id="left-right-template"> <script type="text/html" id="left-right-template">
<% if (showLeft) { %>
<div class="box left"> <div class="box left">
<% } else { %>
<div class="box left" style="opacity: 0; cursor: default">
<% } %>
<i class="icon-circle-arrow-left"></i> <i class="icon-circle-arrow-left"></i>
</div> </div>
<div class="box right"> <div class="box right">
<% if (!lastNav) { %>
<i class="icon-circle-arrow-right"></i> <i class="icon-circle-arrow-right"></i>
<% } else { %>
<i class="icon-ok"></i>
<% } %>
</div> </div>
</script> </script>

View file

@ -89,7 +89,10 @@ var LeftRightView = PositiveNegativeBase.extend({
this.destination = options.destination; this.destination = options.destination;
this.navEvents = options.events; this.navEvents = options.events;
this.JSON = {}; this.JSON = {
showLeft: (options.showLeft === undefined) ? true : options.showLeft,
lastNav: (options.lastNav === undefined) ? false : options.lastNav
};
this.render(); this.render();
} }

View file

@ -91,21 +91,23 @@ var MultiView = Backbone.View.extend({
return view; return view;
}, },
addNavToView: function(view) { addNavToView: function(view, index) {
var leftRight = new LeftRightView({ var leftRight = new LeftRightView({
events: this.navEvents, events: this.navEvents,
// we want the arrows to be on the same level as the content (not // we want the arrows to be on the same level as the content (not
// beneath), so we go one level up with getDestination() // beneath), so we go one level up with getDestination()
destination: view.getDestination() destination: view.getDestination(),
showLeft: (index !== 0),
lastNav: (index === this.childViewJSONs.length - 1)
}); });
}, },
render: function() { render: function() {
// go through each and render... show the first // go through each and render... show the first
_.each(this.childViewJSONs, function(childViewJSON) { _.each(this.childViewJSONs, function(childViewJSON, index) {
var childView = this.createChildView(childViewJSON); var childView = this.createChildView(childViewJSON);
this.childViews.push(childView); this.childViews.push(childView);
this.addNavToView(childView); this.addNavToView(childView, index);
}, this); }, this);
this.showViewIndex(this.currentIndex); this.showViewIndex(this.currentIndex);