Specs & functionality for setting range points

spec/specs.js

@@ -163,4 +163,39 @@ describe("Week offset by 2 days", {
     value_of(headings[5].get('abbr')).should_be('Sunday')
     value_of(headings[6].get('abbr')).should_be('Monday')
   }
-})
+});
+
+describe("Ranges", {
+  'before all': function(){
+    setupHTML();
+    Instance = new Timeframe('calendar', { weekOffset: 2 });
+    DateEarlier = new Date(2008, 10, 5, 12);
+    DateLater = new Date(2008, 10, 7, 12);
+  },
+  'after all': function(){
+    teardownHTML();
+  },
+
+  'sets the start of a range if it is empty': function(){
+    Instance.range.empty();
+    Instance.markEndPoint(DateEarlier);
+    value_of(Instance.range.get('start')).should_be(DateEarlier);
+    value_of(Instance.range.get('end')).should_be(null);
+  },
+
+  'sets the end of a range if you already set the start, and are after it': function(){
+    Instance.range.empty();
+    Instance.markEndPoint(DateEarlier);
+    Instance.markEndPoint(DateLater);
+    value_of(Instance.range.get('start')).should_be(DateEarlier);
+    value_of(Instance.range.get('end')).should_be(DateLater);
+  },
+
+  'swaps the endpoints of a range if you mark a point before the start': function(){
+    Instance.range.empty();
+    Instance.markEndPoint(DateLater);
+    Instance.markEndPoint(DateEarlier);
+    value_of(Instance.range.get('start')).should_be(DateEarlier);
+    value_of(Instance.range.get('end')).should_be(DateLater);
+  }
+});

src/timeframe.js

@@ -34,6 +34,10 @@ var Timeframe = new Class({
   fields: {},
   // Keeps a running count of how many months are in this.calendars
   months: 0,
+  // Hash containing the start and end dates for the rnage
+  range: {},
+  isMousedown: false,
+  isDragging: false,
 
   initialize: function(element, options){
     // Setup & Abandon if no element
@@ -55,6 +59,7 @@ var Timeframe = new Class({
     this.options.months.times(this.createCalendar.bind(this));
 
     this.date = new Date();
+    this.range = new Hash();
     this.populate();
     this.register();
   },
@@ -197,6 +202,24 @@ var Timeframe = new Class({
     this.element.adopt(fieldsContainer);
 
     // TODO: this.parseField('start').refreshField('start').parseField('end').refreshField('end').initDate = new Date(this.date);
+  },
+
+  /*
+    Function: markEndPoint
+    Marks a given date as the endpoint for the range
+  */
+  markEndPoint: function(date){
+    // Any endpoints yet?
+    if (this.range.get('start') == null){
+      this.range.set('start', date);
+    // If the date is further than our start date, we just set the end date
+    }else if(this.range.get('start') <  date){
+        this.range.set('end', date);
+    // Otherwise, we swap the dates
+    }else{
+      this.range.set('end', this.range.get('start'));
+      this.range.set('start', date);
+    }
   }
 });
 
@@ -226,7 +249,13 @@ Timeframe.Events = {
 
   // Listens to mousedowns inside this.element
   handleMouseDown: function(event){
-    // TODO
+    var element = $(event.target);
+    var el;
+    // Are we clicking/dragging a date?
+    if (el = element.getParent('td.selectable')){
+      this.isMouseDown = this.isDragging = true;
+      this.markEndPoint(el.retrieve('date'));
+    }
   },
 
   // Listens to mouseovers inside this.element