timeline_setter 0.1.0 → 0.1.1

data/documentation/TimelineSetter/CLI.html

@@ -237,6 +237,27 @@ A new instance of CLI.
   
 
   
+    <span class="summary_desc"><div class='inline'></div></span>
+  
+</li>
+
+      
+        <li class="public ">
+  <span class="summary_signature">
+    
+      <a href="#timeline_page_path-instance_method" title="#timeline_page_path (instance method)">- (Object) <strong>timeline_page_path</strong> </a>
+    
+
+    
+  </span>
+  
+  
+  
+  
+  
+  
+
+  
     <span class="summary_desc"><div class='inline'></div></span>
   
 </li>
@@ -308,10 +329,6 @@ A new instance of CLI
       <pre class="lines">
 
 
-68
-69
-70
-71
 72
 73
 74
@@ -323,17 +340,21 @@ A new instance of CLI
 80
 81
 82
-83</pre>
+83
+84
+85
+86
+87</pre>
     </td>
     <td>
-      <pre class="code"><span class="info file"># File 'lib/timeline_setter/cli.rb', line 68</span>
+      <pre class="code"><span class="info file"># File 'lib/timeline_setter/cli.rb', line 72</span>
 
 <span class='def def kw'>def</span> <span class='compile! fid id'>compile!</span>
   <span class='if if kw'>if</span> <span class='@options ivar id'>@options</span><span class='lbrack token'>[</span><span class='symbol val'>:assets</span><span class='rbrack token'>]</span>
     <span class='FileUtils constant id'>FileUtils</span><span class='dot token'>.</span><span class='cp_r identifier id'>cp_r</span><span class='lparen token'>(</span><span class='Dir constant id'>Dir</span><span class='dot token'>.</span><span class='glob identifier id'>glob</span><span class='lparen token'>(</span><span class='dstring node'>&quot;#{TimelineSetter::ROOT}/public/*&quot;</span><span class='rparen token'>)</span><span class='comma token'>,</span> <span class='outdir identifier id'>outdir</span><span class='rparen token'>)</span>
   <span class='end end kw'>end</span>
 
-  <span class='File constant id'>File</span><span class='dot token'>.</span><span class='open identifier id'>open</span><span class='lparen token'>(</span><span class='outdir identifier id'>outdir</span> <span class='plus op'>+</span> <span class='string val'>'timeline.html'</span><span class='comma token'>,</span> <span class='string val'>'w+'</span><span class='rparen token'>)</span> <span class='do do kw'>do</span> <span class='bitor op'>|</span><span class='doc identifier id'>doc</span><span class='bitor op'>|</span>
+  <span class='File constant id'>File</span><span class='dot token'>.</span><span class='open identifier id'>open</span><span class='lparen token'>(</span><span class='timeline_page_path identifier id'>timeline_page_path</span><span class='comma token'>,</span> <span class='string val'>'w+'</span><span class='rparen token'>)</span> <span class='do do kw'>do</span> <span class='bitor op'>|</span><span class='doc identifier id'>doc</span><span class='bitor op'>|</span>
     <span class='doc identifier id'>doc</span><span class='dot token'>.</span><span class='write identifier id'>write</span> <span class='html identifier id'>html</span>
   <span class='end end kw'>end</span>
 
@@ -341,7 +362,7 @@ A new instance of CLI
 
   <span class='if if kw'>if</span> <span class='@options ivar id'>@options</span><span class='lbrack token'>[</span><span class='symbol val'>:open</span><span class='rbrack token'>]</span>
     <span class='puts identifier id'>puts</span> <span class='string val'>&quot;== Opening ...&quot;</span>
-    <span class='dxstring node'>%x{ open #{outdir}timeline.html }</span>
+    <span class='dxstring node'>%x[ open #{timeline_page_path} ]</span>
   <span class='end end kw'>end</span>
 <span class='end end kw'>end</span>
 </pre>
@@ -559,6 +580,35 @@ A new instance of CLI
     </td>
   </tr>
 </table>
+</div>
+    
+      <div class="method_details ">
+  <p class="signature " id="timeline_page_path-instance_method">
+  
+    - (<tt>Object</tt>) <strong>timeline_page_path</strong> 
+  
+
+  
+</p><table class="source_code">
+  <tr>
+    <td>
+      <pre class="lines">
+
+
+68
+69
+70</pre>
+    </td>
+    <td>
+      <pre class="code"><span class="info file"># File 'lib/timeline_setter/cli.rb', line 68</span>
+
+<span class='def def kw'>def</span> <span class='timeline_page_path identifier id'>timeline_page_path</span>
+  <span class='File constant id'>File</span><span class='dot token'>.</span><span class='join identifier id'>join</span><span class='lparen token'>(</span><span class='outdir identifier id'>outdir</span><span class='comma token'>,</span> <span class='string val'>'timeline.html'</span><span class='rparen token'>)</span>
+<span class='end end kw'>end</span>
+</pre>
+    </td>
+  </tr>
+</table>
 </div>
     
   </div>
@@ -566,7 +616,7 @@ A new instance of CLI
 </div>
     
     <div id="footer">
-  Generated on Mon Apr  4 11:05:25 2011 by 
+  Generated on Wed Apr  6 10:07:07 2011 by 
   <a href="http://yardoc.org" title="Yay! A Ruby Documentation Tool" target="_parent">yard</a>
   0.6.5 (ruby-1.8.7).
 </div>

data/documentation/TimelineSetter/Parser.html

@@ -276,7 +276,7 @@ Returns the value of attribute events
 </div>
     
     <div id="footer">
-  Generated on Mon Apr  4 11:05:24 2011 by 
+  Generated on Wed Apr  6 10:07:08 2011 by 
   <a href="http://yardoc.org" title="Yay! A Ruby Documentation Tool" target="_parent">yard</a>
   0.6.5 (ruby-1.8.7).
 </div>

data/documentation/TimelineSetter/Timeline.html

@@ -504,7 +504,7 @@ the events hash to JSON to stick into our HTML.
 </div>
     
     <div id="footer">
-  Generated on Mon Apr  4 11:05:24 2011 by 
+  Generated on Wed Apr  6 10:07:08 2011 by 
   <a href="http://yardoc.org" title="Yay! A Ruby Documentation Tool" target="_parent">yard</a>
   0.6.5 (ruby-1.8.7).
 </div>

data/documentation/TimelineSetter.html

@@ -103,7 +103,7 @@
 </div>
     
     <div id="footer">
-  Generated on Mon Apr  4 11:05:25 2011 by 
+  Generated on Wed Apr  6 10:07:08 2011 by 
   <a href="http://yardoc.org" title="Yay! A Ruby Documentation Tool" target="_parent">yard</a>
   0.6.5 (ruby-1.8.7).
 </div>

data/documentation/_index.html

@@ -123,7 +123,7 @@
 </div>
     
     <div id="footer">
-  Generated on Mon Apr  4 11:05:22 2011 by 
+  Generated on Wed Apr  6 10:07:06 2011 by 
   <a href="http://yardoc.org" title="Yay! A Ruby Documentation Tool" target="_parent">yard</a>
   0.6.5 (ruby-1.8.7).
 </div>

data/documentation/file.README.html

@@ -61,7 +61,7 @@
 </div></div>
     
     <div id="footer">
-  Generated on Mon Apr  4 11:05:22 2011 by 
+  Generated on Wed Apr  6 10:07:06 2011 by 
   <a href="http://yardoc.org" title="Yay! A Ruby Documentation Tool" target="_parent">yard</a>
   0.6.5 (ruby-1.8.7).
 </div>

data/documentation/index.html

@@ -61,7 +61,7 @@
 </div></div>
     
     <div id="footer">
-  Generated on Mon Apr  4 11:05:22 2011 by 
+  Generated on Wed Apr  6 10:07:06 2011 by 
   <a href="http://yardoc.org" title="Yay! A Ruby Documentation Tool" target="_parent">yard</a>
   0.6.5 (ruby-1.8.7).
 </div>

data/documentation/method_list.html

@@ -61,17 +61,17 @@
   
 
   <li class="r1 ">
-    <span class='object_link'><a href="TimelineSetter/Timeline.html#initialize-instance_method" title="TimelineSetter::Timeline#initialize (method)">#initialize</a></span> 
+    <span class='object_link'><a href="TimelineSetter/CLI.html#initialize-instance_method" title="TimelineSetter::CLI#initialize (method)">#initialize</a></span> 
     
-      <small>TimelineSetter::Timeline</small>
+      <small>TimelineSetter::CLI</small>
     
   </li>
   
 
   <li class="r2 ">
-    <span class='object_link'><a href="TimelineSetter/CLI.html#initialize-instance_method" title="TimelineSetter::CLI#initialize (method)">#initialize</a></span> 
+    <span class='object_link'><a href="TimelineSetter/Timeline.html#initialize-instance_method" title="TimelineSetter::Timeline#initialize (method)">#initialize</a></span> 
     
-      <small>TimelineSetter::CLI</small>
+      <small>TimelineSetter::Timeline</small>
     
   </li>
   
@@ -133,6 +133,14 @@
   
 
   <li class="r2 ">
+    <span class='object_link'><a href="TimelineSetter/CLI.html#timeline_page_path-instance_method" title="TimelineSetter::CLI#timeline_page_path (method)">#timeline_page_path</a></span> 
+    
+      <small>TimelineSetter::CLI</small>
+    
+  </li>
+  
+
+  <li class="r1 ">
     <span class='object_link'><a href="TimelineSetter/Timeline.html#tmpl-instance_method" title="TimelineSetter::Timeline#tmpl (method)">#tmpl</a></span> 
     
       <small>TimelineSetter::Timeline</small>
@@ -140,7 +148,7 @@
   </li>
   
 
-  <li class="r1 ">
+  <li class="r2 ">
     <span class='object_link'><a href="TimelineSetter/Timeline.html#to_json-instance_method" title="TimelineSetter::Timeline#to_json (method)">#to_json</a></span> 
     
       <small>TimelineSetter::Timeline</small>

data/documentation/top-level-namespace.html

@@ -79,7 +79,7 @@
 </div>
     
     <div id="footer">
-  Generated on Mon Apr  4 11:05:25 2011 by 
+  Generated on Wed Apr  6 10:07:08 2011 by 
   <a href="http://yardoc.org" title="Yay! A Ruby Documentation Tool" target="_parent">yard</a>
   0.6.5 (ruby-1.8.7).
 </div>

data/index.html

@@ -180,7 +180,7 @@ supporting assets if applicable) within the current directory.</p>
 
 <p>TimelineSetter looks for certain column names in your CSV file in order to
 generate a timeline. All columns are required, though as you&rsquo;ll see, some of
-them can be left blank. Here&rsquo;s a summary of each column and its significance:</p>
+them can be left blank (see a <a href="https://github.com/propublica/timeline-setter/blob/master/spec/test_data.csv">sample CSV</a>). Here&rsquo;s a summary of each column and its significance:</p>
 
 <p><a id="date-csv"></a></p>
 
@@ -230,7 +230,7 @@ best not to assign a name.</p>
 <p>Any arbitrary HTML that will be inserted above <code>description</code>. This
 field may contain image tags, YouTube tags, etc. &mdash; nearly everything except
 <code>&lt;script&gt;</code> tags. If you choose to use JavaScript, you must do it inside an
-iframe and call that iframe inside this field.</p>
+iframe and call that iframe inside this field. <strong>Note</strong>: If you put an image or iframe in this field, make sure to set <code>height</code> and <code>width</code> attributes, or the card may not extend around the image.</p>
 
 <p><a id="deployment"></a></p>
 
@@ -343,6 +343,7 @@ Feb. 21, 1952 and Jan. 26, 1957, as shown
 
 <ul>
 <li>In the Wild: <a href="http://www.propublica.org/special/tbi-psycho-platoon-timeline">ProPublica: How One Blast Affected Five Soldiers</a></li>
+<li>In the Wild: <a href="http://www.talkingpointsmemo.com/interactive/2011/04/the-wisconsin-union-struggle-timeline.php">TPM: The Wisconsin Union Struggle Timeline</a></li>
 </ul>
 
 

data/lib/timeline_setter/cli.rb

@@ -63,13 +63,17 @@ module TimelineSetter
     def outdir
       @options[:output] ? @options[:output] : "#{`pwd`.strip}/"
     end
+    
+    def timeline_page_path
+      File.join(outdir, 'timeline.html')
+    end
 
     def compile!
       if @options[:assets]
         FileUtils.cp_r(Dir.glob("#{TimelineSetter::ROOT}/public/*"), outdir)
       end
 
-      File.open(outdir + 'timeline.html', 'w+') do |doc|
+      File.open(timeline_page_path, 'w+') do |doc|
         doc.write html
       end
 
@@ -77,7 +81,7 @@ module TimelineSetter
 
       if @options[:open]
         puts "== Opening ..."
-        %x{ open #{outdir}timeline.html }
+        %x[ open #{timeline_page_path} ]
       end
     end
 

data/lib/timeline_setter/timeline.rb

@@ -10,7 +10,7 @@ module TimelineSetter
     # Convert human dates to timestamps, sort the hash by timestamp, and
     # convert the events hash to JSON to stick into our HTML.
     def to_json
-      @events.collect {|r| r[:timestamp] = Time.parse(r[:date]).to_i * 1000 }.sort{|a,b| b[:timestamp] <=> a[:timestamp]}
+      @events.each {|r| r[:timestamp] = Time.parse(r[:date]).to_i * 1000 }
       @events.to_json
     end
 

data/lib/timeline_setter/version.rb

@@ -1,3 +1,3 @@
 module TimelineSetter
-  VERSION = "0.1.0"
+  VERSION = "0.1.1"
 end

data/public/javascripts/timeline-setter.js

@@ -21,7 +21,7 @@
 
     // Invoke all callbacks registered to the object with `bind`.
     obj.trigger = function(){
-      if(!this._callbacks) return;
+      if (!this._callbacks) return;
       for(var i = 0; callback = this._callbacks[i]; i++)
         callback.apply(this, arguments);
     };
@@ -37,9 +37,9 @@
     // message passing. So each registered callback first checks to see if the
     // event fired matches the event it is listening for.
     obj.move = function(e){
-      if(!e.type === "move" || !e.deltaX) return;
+      if (!e.type === "move" || !e.deltaX) return;
 
-      if(_.isUndefined(this.currOffset)) this.currOffset = 0;
+      if (_.isUndefined(this.currOffset)) this.currOffset = 0;
       this.currOffset += e.deltaX;
       this.el.css({"left" : this.currOffset});
     };
@@ -48,7 +48,7 @@
     // in order to zoom the Timeline all that's needed is to increase or decrease
     // the percentage width.
     obj.zoom = function(e){
-      if(!e.type === "zoom") return;
+      if (!e.type === "zoom") return;
       this.el.css({ "width": e.width });
     };
   };
@@ -60,7 +60,7 @@
 
   // Check to see if we're on a mobile device.
   var touchInit = 'ontouchstart' in document;
-  if(touchInit) jQuery.event.props.push("touches");
+  if (touchInit) jQuery.event.props.push("touches");
 
   // The `draggable` plugin tracks changes in X offsets due to mouse movement
   // or finger gestures and proxies associated events on a particular element.
@@ -78,7 +78,7 @@
 
     // The user is interacting; capture the offset and trigger a `dragging` event.
     function mousemove(e){
-      if(!drag) return;
+      if (!drag) return;
       e.preventDefault();
       e.type = "dragging";
       e = _.extend(e, {
@@ -90,13 +90,13 @@
 
     // We're done tracking the movement set drag back to `null` for the next event.
     function mouseup(e){
-      if(!drag) return;
+      if (!drag) return;
       drag = null;
       e.type = "dragend";
       obj.el.trigger(e);
     };
 
-    if(!touchInit) {
+    if (!touchInit) {
       // Bind on mouse events if we have a mouse...
       obj.el.bind("mousedown", mousedown);
 
@@ -130,7 +130,7 @@
     function mousewheel(e){
       e.preventDefault();
       var delta = (e.wheelDelta || -e.detail);
-      if(safari){
+      if (safari){
         var negative = delta < 0 ? -1 : 1;
         delta = Math.log(Math.abs(delta)) * negative * 2;
       };
@@ -288,7 +288,7 @@
     var events = Array.prototype.slice.call(arguments, 2);
     _.each(events, function(ev){
       origin.bind(function(e){
-        if(e.type === ev && listener[ev])
+        if (e.type === ev && listener[ev])
           listener[ev](e);
       });
     });
@@ -302,7 +302,7 @@
   // Simple function to strip suffixes like `"px"` and return a clean integer for
   // use.
   var cleanNumber = function(str){
-    return parseInt(str.replace(/^[^+\-\d]?([+\-]\d+)?.*$/, "$1"), 10);
+    return parseInt(str.replace(/^[^+\-\d]?([+\-]?\d+)?.*$/, "$1"), 10);
   };
 
   // Zero pad a number less than 10 and return a 2 digit value.
@@ -362,7 +362,7 @@
   // takes a json array of card representations and then builds series, calculates
   // intervals `sync`s the `Bar` and `CardContainer` objects and triggers the
   // `render` event.
-  var Timeline = TimelineSetter.Timeline = function(data) {
+  var Timeline = TimelineSetter.Timeline = function(data) {    
     data = data.sort(function(a, b){ return a.timestamp - b.timestamp; });
     this.bySid    = {};
     this.series   = [];
@@ -394,12 +394,13 @@
     // in the `bySid` object add it. Then add a card to the `Series` and extend
     // the global `bounds`.
     add : function(card){
-      if(!(card.series in this.bySid)){
+      if (!(card.series in this.bySid)){
         this.bySid[card.series] = new Series(card, this);
         this.series.push(this.bySid[card.series]);
       }
       var series = this.bySid[card.series];
       series.add(card);
+      
       this.bounds.extend(series.max());
       this.bounds.extend(series.min());
     }
@@ -441,11 +442,11 @@
       var pOffset = parent.offset().left;
       var offset  = this.el.offset().left;
       var width   = this.el.width();
-      if(_.isUndefined(e.deltaX)) e.deltaX = 0;
+      if (_.isUndefined(e.deltaX)) e.deltaX = 0;
 
-      if(offset + width + e.deltaX < pOffset + parent.width())
+      if (offset + width + e.deltaX < pOffset + parent.width())
         e.deltaX = (pOffset + parent.width()) - (offset + width);
-      if(offset + e.deltaX > pOffset)
+      if (offset + e.deltaX > pOffset)
         e.deltaX = pOffset - offset;
 
       e.type = "move";
@@ -543,8 +544,8 @@
     // Create and append the label to `.TS-series_nav_container` and bind up
     // `hideNotches` and `showNotches`.
     render : function(e){
-      if(!e.type === "render") return;
-      if(this.name.length === 0) return;
+      if (!e.type === "render") return;
+      if (this.name.length === 0) return;
       this.el = $(this.template(this));
       $(".TS-series_nav_container").append(this.el);
       this.el.toggle(this.hideNotches, this.showNotches);
@@ -567,12 +568,13 @@
     this.timestamp = card.timestamp;
     this.attributes = card;
     this.attributes.topcolor = series.color;
+    
     this.template = template("#TS-card_tmpl");
     this.ntemplate = template("#TS-notch_tmpl");
-    _.bindAll(this, "render", "activate", "position", "setPermalink", "toggleNotch");
+    _.bindAll(this, "render", "activate", "flip", "setPermalink", "toggleNotch");
     this.series.bind(this.toggleNotch);
     this.series.timeline.bind(this.render);
-    this.series.timeline.bar.bind(this.position);
+    this.series.timeline.bar.bind(this.flip);
     this.id = [
       this.get('timestamp'),
       this.get('description').split(/ /)[0].replace(/[^a-zA-Z\-]/g,"")
@@ -594,7 +596,7 @@
     // `Bar` and binds a click handler so it can be activated. if the `Card`'s id
     // is currently selected via `window.location.hash` it's activated.
     render : function(e){
-      if(!e.type === "render") return;
+      if (!e.type === "render") return;
       this.offset = this.series.timeline.bounds.project(this.timestamp, 100);
       var html = this.ntemplate(this.attributes);
       this.notch = $(html).css({"left": this.offset + "%"});
@@ -603,55 +605,36 @@
       if (history.get() === this.id) this.activate();
     },
 
-    // As the `Bar` moves each card checks to see if it's outside the viewport,
+    // As the `Bar` moves the current card checks to see if it's outside the viewport,
     // if it is the card is flipped so as to be visible for the longest period
-    // of time.
-    position : function(e) {
-      if (e.type !== "move" || !this.el) return;
-      var onBarEdge = this.cardOffset().onBarEdge;
-
-      switch(onBarEdge) {
-        case 'right':
-          this.el.css({"margin-left": -(this.cardOffset().item.width() + 7)});
-          this.$(".TS-css_arrow").css("left", this.cardOffset().item.width());
-          break;
-        case 'default':
-          this.el.css({"margin-left": this.originalMargin});
-          this.$(".TS-css_arrow").css("left", 0);
+    // of time. The magic number here (7) is half the width of the css arrow.
+    flip : function(e) {
+      if (e.type !== "move" || !this.el || !this.el.is(":visible")) return;
+      var rightEdge   = this.$(".TS-item").offset().left + this.$(".TS-item").width();
+      var tRightEdge  = $("#timeline_setter").offset().left + $("#timeline_setter").width();
+      var margin      = this.el.css("margin-left") === this.originalMargin;
+      var flippable   = this.$(".TS-item").width() < $("#timeline_setter").width() / 2;
+      var offTimeline = this.el.position().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
+      // flipped. We'll flip it.
+      if (tRightEdge - rightEdge < 0 && margin && !offTimeline) {
+        this.el.css({"margin-left": -(this.$(".TS-item").width() + 7)});
+        this.$(".TS-css_arrow").css({"left" : this.$(".TS-item").width()});
+        // Otherwise, if the card is off the left side of the timeline and we have
+        // flipped it before and the card's width is less than half of the width
+        // of the whole timeline, we'll flip it to the default position.
+      } else if (this.el.offset().left - $("#timeline_setter").offset().left < 0 && !margin && flippable) {
+        this.el.css({"margin-left": this.originalMargin});
+        this.$(".TS-css_arrow").css({"left": 0});
       }
     },
 
-    // A utility function to suss out whether the card is fully viewable.
-    cardOffset : function() {
-      if (!this.el) return { onBarEdge : false };
-
-      var that = this;
-      var item = this.el.children(".TS-item");
-      var currentMargin = this.el.css("margin-left");
-      var timeline = $("#timeline_setter");
-      var right = (this.el.offset().left + item.width()) - (timeline.offset().left + timeline.width());
-      var left = (this.el.offset().left) - timeline.offset().left;
-
-      return {
-        item : item,
-        onBarEdge : (right > 0 && currentMargin === that.originalMargin) ?
-                      'right' :
-                    (left < 0 && that.el.css("margin-left") !== that.originalMargin) ?
-                      'default' :
-                    (left < 0 && that.el.css("margin-left") === that.originalMargin) ?
-                      'left' :
-                      false
-      };
-    },
-
     // The first time a card is activated it renders its `template` and appends
-    // its element to the `Bar`. After doing so it moves the `Bar` if its
-    // element isn't currently visible. For ie each card sets the width of
-    // `.TS-item_label` to the maximum width of the card's children, or
-    // if that is less than the `.TS-item_year` element's width, `.TS-item_label`
-    // gets `.TS-item_year`s width. Which is a funny way of saying, if you'd
-    // like to set the width of the card as a whole, fiddle with `.TS-item_year`s
-    // width.
+    // its element to the `Bar`. After doing so it sets the width if `.TS-item_label`
+    // and moves the `Bar` if its element outside the visible portion of the
+    // timeline.
     activate : function(e){
       this.hideActiveCard();
       if (!this.el) {
@@ -660,36 +643,47 @@
         $("#TS-card_scroller_inner").append(this.el);
         this.originalMargin = this.el.css("margin-left");
         this.el.delegate(".TS-permalink", "click", this.setPermalink);
+        // Reactivate if there are images in the html so we can recalculate
+        // widths and position accordingly.
+        this.$("img").load(this.activate);
       }
-
       this.el.show().addClass(("TS-card_active"));
-
+      this.notch.addClass("TS-notch_active");
+      this.setWidth();
+      
+      // In the case that the card is outside the bounds the wrong way when 
+      // it's flipped, we'll take care of it here before we move the actual
+      // card. 
+      this.flip($.Event("move"));
+      this.move();
+    },
+    
+    // For Internet Explorer each card sets the width of` .TS-item_label` to
+    // the maximum width of the card's children, or if that is less than the
+    // `.TS-item_year` element's width, `.TS-item_label` gets `.TS-item_year`s
+    // width. Which is a funny way of saying, if you'd like to set the width of
+    // the card as a whole, fiddle with `.TS-item_year`s width.
+    setWidth : function(){
       var max = _.max(_.toArray(this.$(".TS-item_user_html").children()), function(el){ return $(el).width(); });
-      if($(max).width() > this.$(".TS-item_year").width()){
+      if ($(max).width() > this.$(".TS-item_year").width()) {
         this.$(".TS-item_label").css("width", $(max).width());
       } else {
         this.$(".TS-item_label").css("width", this.$(".TS-item_year").width());
       }
-
-      this.moveBarWithCard();
-      this.notch.addClass("TS-notch_active");
     },
 
-    // Move the `Bar` if the `Card`'s element isn't visible.
-    moveBarWithCard : function() {
+    // Move the `Bar` if the card is outside the visible region on activation.
+    move : function() {
       var e = $.Event('moving');
-      var onBarEdge = this.cardOffset().onBarEdge;
-
-      switch(onBarEdge) {
-        case 'right':
-          e.deltaX = -(this.cardOffset().item.width());
-          this.series.timeline.bar.moving(e);
-          break;
-        case 'left':
-          e.deltaX = (this.cardOffset().item.width());
-          this.series.timeline.bar.moving(e);
+      var offset  = this.$(".TS-item").offset();
+      var toffset = $("#timeline_setter").offset();
+      if (offset.left < toffset.left) {
+        e.deltaX = toffset.left - offset.left + cleanNumber(this.$(".TS-item").css("padding-left"));
+        this.series.timeline.bar.moving(e);
+      } else if (offset.left + this.$(".TS-item").outerWidth() > toffset.left + $("#timeline_setter").width()) {
+        e.deltaX = toffset.left + $("#timeline_setter").width() - (offset.left + this.$(".TS-item").outerWidth());
+        this.series.timeline.bar.moving(e);
       }
-      this.position($.Event('move'));
     },
 
     // The click handler to set the current hash to the `Card`'s id.
@@ -705,10 +699,10 @@
 
     // An event listener to toggle this notche on and off via `Series`.
     toggleNotch : function(e){
-      switch(e.type) {
+      switch (e.type) {
         case "hideNotch":
           this.notch.hide().removeClass("TS-notch_active").addClass("TS-series_inactive");
-          if(this.el) this.el.hide();
+          if (this.el) this.el.hide();
           return;
         case "showNotch":
           this.notch.removeClass("TS-series_inactive").show();
@@ -782,7 +776,7 @@
       } else {
         el = (curCardIdx > 0 ? notches.eq(curCardIdx - 1) : false);
       }
-      if(!el) return;
+      if (!el) return;
       el.trigger("click");
     }
   });
@@ -799,7 +793,9 @@
   // and binding to `"keydown"`.
   Timeline.boot = function(data) {
     $(function(){
+      
       TimelineSetter.timeline = new Timeline(data);
+      
       new Zoom("in");
       new Zoom("out");
       var chooseNext = new Chooser("next");