timeline_setter 0.3.0 → 0.3.1

data/public/javascripts/timeline-setter.js

@@ -5,7 +5,7 @@
   var TimelineSetter = window.TimelineSetter = (window.TimelineSetter || {});
 
   // Current version of `TimelineSetter`
-  TimelineSetter.VERSION = "0.3.0";
+  TimelineSetter.VERSION = "0.3.1";
 
   // Mixins
   // ------
@@ -81,7 +81,7 @@
       drag = {x: e.pageX};
       e.type = "dragstart";
       obj.el.trigger(e);
-    };
+    }
 
     // The user is interacting; capture the offset and trigger a `dragging` event.
     function mousemove(e){
@@ -93,7 +93,7 @@
       });
       drag = { x: (e.pageX || e.touches[0].pageX) };
       obj.el.trigger(e);
-    };
+    }
 
     // We're done tracking the movement set drag back to `null` for the next event.
     function mouseup(e){
@@ -101,7 +101,7 @@
       drag = null;
       e.type = "dragend";
       obj.el.trigger(e);
-    };
+    }
 
     if (!touchInit) {
       // Bind on mouse events if we have a mouse...
@@ -123,7 +123,7 @@
 
       obj.el.bind("touchmove", mousemove);
       obj.el.bind("touchend", mouseup);
-    };
+    }
   };
 
 
@@ -140,11 +140,11 @@
       if (safari){
         var negative = delta < 0 ? -1 : 1;
         delta = Math.log(Math.abs(delta)) * negative * 2;
-      };
+      }
       e.type = "scrolled";
       e.deltaX = delta;
       obj.el.trigger(e);
-    };
+    }
 
     obj.el.bind("mousewheel DOMMouseScroll", mousewheel);
   };
@@ -221,6 +221,14 @@
   Intervals.dateStr = function(timestamp, interval) {
     var d = new Intervals.dateFormats(timestamp);
     switch (interval) {
+      case "Millennium":
+        return d.year;
+      case "Quincentenary":
+        return d.year;
+      case "Century":
+        return d.year;
+      case "HalfCentury":
+        return d.year;
       case "Decade":
         return d.year;
       case "Lustrum":
@@ -235,6 +243,10 @@
         return d.date;
       case "Hours":
         return d.hourWithMinutes;
+      case "HalfHour":
+        return d.hourWithMinutes;
+      case "QuarterHour":
+        return d.hourWithMinutes;
       case "Minutes":
         return d.hourWithMinutes;
       case "Seconds":
@@ -245,19 +257,51 @@
   Intervals.prototype = {
     // Sane estimates of date ranges for the `isAtLeastA` test.
     INTERVALS : {
-      Decade   : 315360000000,
-      Lustrum  : 157680000000,
-      FullYear : 31536000000,
-      Month    : 2592000000,
-      Week     : 604800000,
-      Date     : 86400000,
-      Hours    : 3600000,
-      Minutes  : 60000,
-      Seconds  : 1000
+      Millennium    : 69379200000000,  // 2200 years is the trigger
+      Quincentenary : 34689600000000, // 1100 years is the trigger
+      Century       : 9460800000000,  // 300 years is the trigger
+      HalfCentury   : 3153600000000,  // 100 years is the trigger
+      Decade        : 315360000000,
+      Lustrum       : 157680000000,
+      FullYear      : 31536000000,
+      Month         : 2592000000,
+      Week          : 604800000,
+      Date          : 86400000,
+      Hours         : 3600000,
+      HalfHour      : 1800000,
+      QuarterHour   : 900000,
+      Minutes       : 60000,
+      Seconds       : 1000 // 1,000 millliseconds equals on second
     },
 
     // The order used when testing where exactly a timespan falls.
-    INTERVAL_ORDER : ['Seconds','Minutes','Hours','Date','Week','Month','FullYear','Lustrum','Decade'],
+    INTERVAL_ORDER : [
+        'Seconds',
+        'Minutes',
+        'QuarterHour',
+        'HalfHour',
+        'Hours',
+        'Date',
+        'Week',
+        'Month',
+        'FullYear',
+        'Lustrum',
+        'Decade',
+        'HalfCentury',
+        'Century',
+        'Quincentenary',
+        'Millennium'
+    ],
+
+    // The year adjustment used for supra-year intervals.
+    YEAR_FRACTIONS : {
+      Millenium     : 1000,
+      Quincentenary : 500,
+      Century       : 100,
+      HalfCentury   : 50,
+      Decade        : 10,
+      Lustrum       : 5
+    },
 
     // A test to find the appropriate range of intervals, for example if a range of
     // timestamps only spans hours this will return true when called with `"Hours"`.
@@ -278,22 +322,16 @@
       return this.INTERVALS[this.INTERVAL_ORDER[this.idx]];
     },
 
-    // Return the first year of the decade a Date belongs to as an integer.
-    // Decades are defined in the conventional (ie. 60s) sense,
-    // instead of the more precise mathematical method that starts
-    // with year one. For example, the current decade runs from 2010-2019.
-    // And if you pass in the year 2010 or 2015 you'll get 2010 back.
-    getDecade : function(date) {
-      return (date.getFullYear() / 10 | 0) * 10;
+    // Floor the year to a given epoch.
+    getYearFloor : function(date, intvl){
+      var fudge = this.YEAR_FRACTIONS[intvl] || 1;
+      return (date.getFullYear() / fudge | 0) * fudge;
     },
 
-    // Returns the first year of the five year "lustrum" a Date belongs to
-    // as an integer. A lustrum is a fancy Roman word for a "five-year period."
-    // You can read more about it [here](http://en.wikipedia.org/wiki/Lustrum).
-    // This all means that if you pass in the year 2011 you'll get 2010 back.
-    // And if you pass in the year 1997 you'll get 1995 back.
-    getLustrum : function(date) {
-      return (date.getFullYear() / 5 | 0) * 5;
+    // Return a date with the year set to the next interval in a given epoch.
+    getYearCeil : function(date, intvl){
+      if(this.YEAR_FRACTIONS[intvl]) return this.getYearFloor(date, intvl) + this.YEAR_FRACTIONS[intvl];
+      return date.getFullYear();
     },
 
     // Return a Date object rounded down to the previous Sunday, a.k.a. the first day of the week.
@@ -310,6 +348,23 @@
       return thisDate;
     },
 
+    // Return the half of the hour this date belongs to. Anything before 30 min.
+    // past the hour comes back as zero. Anything after comes back as 30.
+    getHalfHour: function(date) {
+      return date.getMinutes() > 30 ? 30 : 0;
+    },
+
+    // Return the quarter of the hour this date belongs to. Anything before 15 min.
+    // past the hour comes back as zero; 15-30 comes back as 15; 30-45 as 30;
+    // 45-60 as 45.
+    getQuarterHour: function(date) {
+      var minutes = date.getMinutes();
+      if (minutes < 15) return 0;
+      if (minutes < 30) return 15;
+      if (minutes < 45) return 30;
+      return 45;
+    },
+
     // Zero out a date from the current interval down to seconds.
     floor : function(ts){
       var date  = new Date(ts);
@@ -319,22 +374,22 @@
                   idx;
 
       // Zero the special extensions, and adjust as idx necessary.
+      date.setFullYear(this.getYearFloor(date, intvl));
       switch(intvl){
-        case 'Decade':
-          date.setFullYear(this.getDecade(date));
-          break;
-        case 'Lustrum':
-          date.setFullYear(this.getLustrum(date));
-          break;
         case 'Week':
           date.setDate(this.getWeekFloor(date).getDate());
           idx = _.indexOf(this.INTERVAL_ORDER, 'Week');
+        case 'HalfHour':
+          date.setMinutes(this.getHalfHour(date));
+        case 'QuarterHour':
+          date.setMinutes(this.getQuarterHour(date));
       }
 
       // Zero out the rest
       while(idx--){
         intvl = this.INTERVAL_ORDER[idx];
-        if(intvl !== 'Week') date["set" + intvl](intvl === "Date" ? 1 : 0);
+        if (!(_.include(['Week', 'HalfHour', 'QuarterHour'].concat(_.keys(this.YEAR_FRACTIONS)), intvl)))
+          date["set" + intvl](intvl === "Date" ? 1 : 0);
       }
 
       return date.getTime();
@@ -344,18 +399,21 @@
     ceil : function(ts){
       var date = new Date(this.floor(ts));
       var intvl = this.INTERVAL_ORDER[this.idx];
+
+      date.setFullYear(this.getYearCeil(date, intvl));
       switch(intvl){
-        case 'Decade':
-          date.setFullYear(this.getDecade(date) + 10);
-          break;
-        case 'Lustrum':
-          date.setFullYear(this.getLustrum(date) + 5);
-          break;
         case 'Week':
           date.setTime(this.getWeekCeil(date).getTime());
           break;
+        case 'HalfHour':
+          date.setMinutes(this.getHalfHour(date) + 30);
+          break;
+        case 'QuarterHour':
+          date.setMinutes(this.getQuarterHour(date) + 15);
+          break;
         default:
-          date["set" + intvl](date["get" + intvl]() + 1);
+          if (!(_.include(['Week', 'HalfHour', 'QuarterHour'].concat(_.keys(this.YEAR_FRACTIONS)), intvl)))
+            date["set" + intvl](date["get" + intvl]() + 1);
       }
       return date.getTime();
     },
@@ -470,9 +528,9 @@
     // are the formatters we override.
     //
     //      formatter : function(d, defaults) {
-    //        defaults.months = ['enero', 'febrero', 'marzo', 
-    //                          'abril', 'mayo', 'junio', 'julio', 
-    //                          'agosto', 'septiembre', 'octubre', 
+    //        defaults.months = ['enero', 'febrero', 'marzo',
+    //                          'abril', 'mayo', 'junio', 'julio',
+    //                          'agosto', 'septiembre', 'octubre',
     //                          'noviembre', 'diciembre'];
     //        return defaults;
     //      }
@@ -540,12 +598,12 @@
         this.series.push(this.bySid[card.series]);
       }
       var series = this.bySid[card.series];
-      series.add(card);
+      var crd = series.add(card);
 
       this.bounds.extend(series.max());
       this.bounds.extend(series.min());
 
-      this.trigger('cardAdd', card);
+      this.trigger('cardAdd', card, crd);
     }
   });
 
@@ -663,6 +721,7 @@
     add : function(card){
       var crd = new Card(card, this);
       this.cards.push(crd);
+      return crd;
     },
 
     // The comparing function for `max` and `min`.
@@ -715,12 +774,13 @@
     this.series.bind("hideNotch", this.toggleNotch);
     this.series.bind("showNotch", this.toggleNotch);
     this.timeline.bind("render", this.render);
-    this.timeline.bar.bind("flip", this.flip);
+    this.timeline.bar.bind("move", this.flip);
     this.id = [
       this.get('timestamp'),
       this.get('description').split(/ /)[0].replace(/[^a-zA-Z\-]/g,"")
     ].join("-");
     this.timeline.cards.push(this);
+    this.template = window.JST.card;
   };
 
   Card.prototype = _.extend(Card.prototype, {
@@ -750,7 +810,7 @@
       var tRightEdge  = this.timeline.$(".timeline_setter").offset().left + this.timeline.$(".timeline_setter").width();
       var margin      = this.el.css("margin-left") === this.originalMargin;
       var flippable   = this.$(".TS-item").width() < this.timeline.$(".timeline_setter").width() / 2;
-      var offTimeline = this.el.position().left - this.$(".TS-item").width() < 0;
+      var offTimeline = (this.el.offset().left - this.el.parent().offset().left) - this.$(".TS-item").width() < 0;
 
       // If the card's right edge is more than the timeline's right edge and
       // it's never been flipped before and it won't go off the timeline when
@@ -775,7 +835,7 @@
       var that = this;
       this.hideActiveCard();
       if (!this.el) {
-        this.el = $(JST.card({card: this}));
+        this.el = $(this.template({card: this}));
 
         // create a `this.$` scoped to its card.
         queryable(this, this.el);
@@ -931,7 +991,7 @@
 
   // The TimelineSetter JS API allows you to listen to certain
   // timeline events, and activate cards programmatically.
-  // To take advantage of it, assign the timeline boot function to a variable 
+  // To take advantage of it, assign the timeline boot function to a variable
   // like so:
   //
   //     var currentTimeline = TimelineSetter.Timeline.boot(
@@ -940,7 +1000,7 @@
   //
   // then call methods on the `currentTimeline.api` object
   //
-  //     currentTimeline.api.onLoad(function() { 
+  //     currentTimeline.api.onLoad(function() {
   //       console.log("I'm ready");
   //     });
   //
@@ -1006,8 +1066,8 @@
   // and a formatter function for dates. All of these are optional.
   //
   // We also initialize a new API object for each timeline, accessible via the
-  // timeline variable's `api` method (e.g. `currentTimeline.api`) and look for 
-  // how many timelines are globally on the page for keydown purposes. We'll only 
+  // timeline variable's `api` method (e.g. `currentTimeline.api`) and look for
+  // how many timelines are globally on the page for keydown purposes. We'll only
   // bind keydowns globally if there's only one timeline on the page.
   Timeline.boot = function(data, config) {
     var timeline = TimelineSetter.timeline = new Timeline(data, config || {});