Permalink
Browse files

add map slider view

  • Loading branch information...
1 parent fe55562 commit 73056d04d42bd4097486c8321f7ebbe9d796e068 @atogle atogle committed Jun 20, 2012
Showing with 62 additions and 6 deletions.
  1. +4 −4 css/style.css
  2. +2 −2 index.html
  3. +56 −0 js/views.js
View
@@ -94,14 +94,14 @@ body {
}
/* Slider */
-#dot-slider {
+.dot-slider {
background: transparent url("mapslider.png") no-repeat left center !important;
border:none;
height:130px;
width:680px;
}
-#dot-slider .ui-slider-handle {
+.dot-slider .ui-slider-handle {
background: transparent url("mapslider-handle.png") no-repeat center center !important;
width: 49px;
height:49px;
@@ -111,11 +111,11 @@ body {
cursor: url(https://mail.google.com/mail/images/2/openhand.cur), default !important;
}
-#dot-slider .ui-slider-handle.grabbed {
+.dot-slider .ui-slider-handle.grabbed {
cursor: url(https://mail.google.com/mail/images/2/closedhand.cur), default !important;
}
-#dot-slider-container {
+.dot-slider-container {
padding: 1em 0;
position: relative;
}
View
@@ -25,9 +25,9 @@ <h3 class="dot-title">This is a title</h3>
</div>
<div id="dot-slider-container">
- <div id="dot-feedback-activity-bottom" class="dot-feedback-activity"></div>
+ <div class="dot-feedback-activity"></div>
<div class="dot-tooltip">A Tooltip!</div>
- <div id="dot-slider"></div>
+ <div class="dot-slider"></div>
</div>
</div>
View
@@ -0,0 +1,56 @@
+var Fitzgerald = Fitzgerald || {};
+
+(function(F) {
+ // F.View = Backbone.View.extend({
+ // el: '',
+ // initialize: function(){},
+ // render: function(){}
+ // });
+
+ // The map slider view
+ F.NavigatorView = Backbone.View.extend({
+ el: '.dot-slider',
+ initialize: function(){
+ // Render thyself when the data shows up
+ this.model.bind('reset', this.render, this);
+ },
+ render: function() {
+ var self = this;
+
+ $(self.el).slider({
+ max: self.model.length,
+ slide: function(evt, ui) {
+ $(F).trigger('updatelocation', [ui.value, ui.value/self.model.length]);
+ },
+ stop: function(evt, ui) {
+ $(ui.handle).removeClass('grabbed');
+ }
+ });
+
+ // Change to the grabbed icon
+ $('.ui-slider-handle', self.el).mousedown(function(){
+ $(this).addClass('grabbed');
+ });
+ }
+ });
+
+ F.AppView = Backbone.View.extend({
+ el: '',
+ initialize: function(){
+ this.model = new F.IntersectionCollection();
+
+ // The map slider
+ this.mapSliderView = new F.NavigatorView({
+ model: this.model
+ });
+
+ // Fetch the intersection records
+ this.model.fetch();
+ },
+ render: function(){
+
+ }
+ });
+
+ new F.AppView();
+})(Fitzgerald);

0 comments on commit 73056d0

Please sign in to comment.