From da83d2cce8abee3935c1ddcf5179f89f4e10613e Mon Sep 17 00:00:00 2001
From: hotoo <hotoo.cn@gmail.com>
Date: Fri, 26 Sep 2014 16:30:49 +0800
Subject: [PATCH] Add timeline document title

---
 examples/data.mdown  |  2 +-
 examples/mockup.md   |  1 +
 examples/timeline.md |  2 +-
 markline.js          |  2 +-
 timeline.css         | 10 ++++++++++
 timeline.js          | 11 ++++++++++-
 6 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/examples/data.mdown b/examples/data.mdown
index 3c32673..7cf8dc9 100644
--- a/examples/data.mdown
+++ b/examples/data.mdown
@@ -1,5 +1,5 @@
 
-# Demo
+# Demo Timeline
 
 ----
 
diff --git a/examples/mockup.md b/examples/mockup.md
index 07ed71f..bf98fcd 100644
--- a/examples/mockup.md
+++ b/examples/mockup.md
@@ -7,6 +7,7 @@
 
 <link rel="stylesheet" href="../timeline.css" type="text/css" media="screen" charset="utf-8">
 <div id="demo" class="markline">
+  <header>Static Demo</header>
   <div class="dates">
     <ol>
       <li>1983</li>
diff --git a/examples/timeline.md b/examples/timeline.md
index 7158330..482bd67 100644
--- a/examples/timeline.md
+++ b/examples/timeline.md
@@ -10,7 +10,7 @@
 
 ````javascript
 seajs.use('../timeline', function(Markline) {
-  var line = new Markline("#demo", {
+  var line = new Markline("#demo", "DEMO", {
     "default": [
       {
         "name": "text",
diff --git a/markline.js b/markline.js
index 5827f72..e2d2f30 100644
--- a/markline.js
+++ b/markline.js
@@ -124,7 +124,7 @@ Markline.prototype.render = function(){
   $.get(this._datafile, function(markdown){
     var data = parse(markdown);
 
-    var timeline = new Timeline(me.element, data.data);
+    var timeline = new Timeline(me.element, data.title, data.data);
     timeline.render();
   });
 };
diff --git a/timeline.css b/timeline.css
index fa45134..092b4c7 100644
--- a/timeline.css
+++ b/timeline.css
@@ -10,6 +10,16 @@
   overflow: auto;
 }
 
+.markline > header {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  margin: 0 0 10px 30px;
+  font-size: 1.3em;
+  color: #999;
+  white-space:nowrap;
+}
+
 .markline > .dates {
   position: absolute;
   top: 0;
diff --git a/timeline.js b/timeline.js
index 557c110..d0f3511 100644
--- a/timeline.js
+++ b/timeline.js
@@ -6,8 +6,9 @@ var offset_top = 20;
 
 var year_width = 100;
 
-function Markline (element, data) {
+function Markline (element, title, data) {
   this._element = $(element);
+  this.title = title;
   this._data = data;
 }
 
@@ -156,12 +157,20 @@ Markline.prototype.render = function(){
   this._element.addClass("markline");
   this._element.on("scroll", function(evt){
     var that = $(this);
+
+    var title = $("> header", this);
+    title.css({
+      "left": that.scrollLeft(),
+      "bottom": -that.scrollTop()
+    });
+
     var head = $(".dates", this);
     head.css({"top": that.scrollTop()});
 
     var groups = $(".groups > label", this);
     groups.css({"left": that.scrollLeft() - 90});
   });
+  this._element.append(['<header>', this.title, '</header>'].join(""));
   this._element.append(head_dates.join(""));
   this._element.append(body_events.join(""));
   $(".dates > ol > li", this._element).height($(".events", this.element).height() + offset_top);