twitter

5 files changed, 137 insertions, 106 deletions

diff --git a/sass/parts/_banner.scss b/sass/parts/_banner.scss
index a17b9d6..c8b11dd 100644
--- a/sass/parts/_banner.scss
+++ b/sass/parts/_banner.scss
@@ -1,5 +1,45 @@
 #banner{
-	color: $font-main;
+	color: #999;
 	padding: 30px 0;
+	line-height: 30px;
+	text-align: center;
+	position: relative;
+	display: none;
 	@include border-shadow();
+	&:hover{
+		a{
+			color: $main;
+		}
+	}
+	a{
+		color: #999;
+		@include transition(0.3s);
+		&:hover{
+			text-decoration: underline;
+		}
+	}
+	small{
+		position: absolute;
+		right: 0;
+		bottom: 0;
+	}
+	.container{
+		height: 30px;
+		overflow: hidden;
+		position: relative;
+		display: none;
+		.feed{
+			list-style: none;
+			position: absolute;
+			top: 0;
+			width: 100%;
+			li{
+				position: relative;
+				small{
+					position: absolute;
+					right: 0;
+				}
+			}
+		}
+	}
 }
\ No newline at end of file
diff --git a/source/_includes/banner.html b/source/_includes/banner.html
index 7da6092..5839bd4 100644
--- a/source/_includes/banner.html
+++ b/source/_includes/banner.html
@@ -1 +1,7 @@
-<div id="banner" class="inner"></div>
\ No newline at end of file
+<div id="banner" class="inner">
+	<div class="container">
+		<ul class="feed"></ul>
+	</div>
+	<small><a href="http://twitter.com/tommy351">tommy351</a> @ <a href="http://twitter.com">Twitter</a></small>
+	<div class="loading">載入中...</div>
+</div>
\ No newline at end of file
diff --git a/source/_includes/custom/after_footer.html b/source/_includes/custom/after_footer.html
index f3bec2f..5e3eaa8 100644
--- a/source/_includes/custom/after_footer.html
+++ b/source/_includes/custom/after_footer.html
@@ -1,2 +1,2 @@
 <script src="{{ root_url }}/javascripts/jquery.easing.1.3.js"></script>
-<script src="{{ root_url }}/javascripts/banner.js"></script>
\ No newline at end of file
+<script src="{{ root_url }}/javascripts/twitter.js"></script>
\ No newline at end of file
diff --git a/source/javascripts/banner.js b/source/javascripts/banner.js
deleted file mode 100644
index e380b15..0000000
--- a/source/javascripts/banner.js
+++ /dev/null
@@ -1,103 +0,0 @@
-(function($){
-	var banner = $('#banner');
-	banner.children('.error').hide();
-
-	var loaded = function(length){
-		var images = banner.find('img'),
-			dots = banner.children('.dots'),
-			width = banner.children('.image').width(),
-			fragment = document.createDocumentFragment(),
-			count = 0,
-			trigger = false,
-			timer;
-		
-		images.each(function(i){
-			$(this).css('left', width*i);
-
-			var item = document.createElement('li');
-			$(item).click(function(){
-				shift(i);
-			});
-			if (i == 0) $(item).addClass('current');
-			fragment.appendChild(item);
-		});
-
-		dots.append(fragment);
-
-		var shift = function(i){
-			if (trigger == false){
-				var gap = width * (i - count);
-				trigger = true;
-
-				banner.find('.wrap').animate({left: '-='+gap}, 1000, 'easeOutQuart', function(){
-					dots.children('li').eq(count).removeClass('current');
-					dots.children('li').eq(i).addClass('current');
-					banner.children('')
-					count = i;
-					main();
-					trigger = false;
-				});
-			} else {
-				return false;
-			}
-		};
-
-		var prev = function(){
-			para = count == 0 ? length - 1 : count - 1;
-			shift(para);
-		};
-
-		var next = function(){
-			shift((count+1)%length);
-		};
-
-		var main = function(){
-			clearTimeout(timer);
-			timer = setTimeout(next, 10000);
-		};
-
-		banner.on({
-			'mouseenter': function(){
-				clearTimeout(timer);
-			},
-			'mouseleave': function(){
-				main();
-			}
-		}).on('click', '.prev', prev).on('click', '.next', next);
-
-		main();
-	};
-
-	var random = function(){
-		return (Math.round(Math.random())-0.5);
-	};
-
-	$.ajax({
-		url: 'https://picasaweb.google.com/data/feed/api/user/105931860008509594725/albumid/5663590803175839297?alt=json&callback=?',
-		dataType: 'json',
-		type: 'GET',
-		success: function(json){
-			var fragment = document.createDocumentFragment(),
-				arr = [];
-
-			$(json.feed.entry).each(function(i, data){
-				var link = data.media$group.media$thumbnail[0].url.replace(/\/\w\d+(-\w\d*)*\/([^\/]+)$/, '/s0/$2');
-				arr.push(link);
-			});
-
-			arr.sort(random);
-			var length = arr.length;
-
-			for (var i=0; i<length; i++){
-				var item = document.createElement('img');
-				item.src = arr[i];
-				fragment.appendChild(item);
-			}
-
-			banner.find('.wrap').append(fragment).children('img').eq(0).load(function(){
-				banner.children('.loading').fadeOut(500);
-				loaded(length);
-			});
-		}
-	});
-})(jQuery);
\ No newline at end of file
diff --git a/source/javascripts/twitter.js b/source/javascripts/twitter.js
new file mode 100644
index 0000000..5a7b9d5
--- /dev/null
+++ b/source/javascripts/twitter.js
@@ -0,0 +1,88 @@
+(function($){
+	var banner = $('#banner'),
+		feed = banner.find('.feed'),
+		interval = 10000,
+		speed = 500;
+
+	var linkify = function(text){
+		text = text.replace(/(https?:\/\/)([\w\-:;?&=+.%#\/]+)/gi, '<a href="$1$2">$2</a>').replace(/(^|\W)@(\w+)/g, '$1<a href="http://twitter.com/$2">@$2</a>').replace(/(^|\W)#(\w+)/g, '$1<a href="http://search.twitter.com/search?q=%23$2">#$2</a>');
+
+		return text;
+	}
+
+	var relativeDate = function(date){
+		if (navigator.appName === 'Microsoft Internet Explorer') return '';
+
+		var unit = {
+			now: '現在',
+			minute: '1 分鐘前',
+			minutes: ' 分鐘前',
+			hour: '1 小時前',
+			hours: ' 小時前',
+			day: '昨天',
+			days: ' 天前',
+			week: '1 週前',
+			weeks: ' 週前'
+		};
+
+		var current = new Date(),
+			tweet = new Date(date),
+			diff = (((current.getTime() + (1 * 60000)) - tweet.getTime()) / 1000),
+			day_diff = Math.floor(diff / 86400);
+		
+		if (day_diff == 0){
+			if (diff < 60) return unit.now;
+			else if (diff < 120) return unit.minute;
+			else if (diff < 3600) return Math.floor(diff / 60) + unit.minutes;
+			else if (diff < 7200) return unit.hour;
+			else if (diff < 86400) return Math.floor(diff / 3600) + unit.hours;
+			else return '';
+		} else if (day_diff == 1) {
+			return unit.day;
+		} else if (day_diff < 7) {
+			return day_diff + unit.days;
+		} else if (day_diff == 7) {
+			return unit.week;
+		} else if (day_diff > 7) {
+			return Math.ceil(day_diff / 7) + unit.weeks;
+		} else {
+			return '';
+		}
+	}
+
+	banner.show();
+
+	$.getJSON('http://twitter.com/status/user_timeline/tommy351.json?count=10&callback=?', function(json){
+		var length = json.length,
+			fragment = document.createDocumentFragment(),
+			counts = 0,
+			timeout;
+
+		for (var i=0; i<length; i++){
+			var item = document.createElement('li');
+			item.innerHTML = linkify(json[i].text) + '<small>'+relativeDate(json[i].created_at)+'</small>';
+			fragment.appendChild(item);
+		}
+
+		var play = function(){
+			timeout = setTimeout(function(){
+				feed.animate({top: '-='+30}, speed, function(){
+					$(this).append($(this).children().eq(counts).clone());
+					counts++;
+					play();
+				});
+			}, interval);
+		}
+
+		var pause = function(){
+			clearTimeout(timeout);
+		}
+
+		banner.on('mouseenter', pause).on('mouseleave', play)
+		.children('.loading').hide().end()
+		.children('.container').show()
+		.children('.feed').append(fragment);
+
+		play();
+	});
+})(jQuery);
\ No newline at end of file