From d3b064cf56fa934073ad071ede4ec1ab312348f6 Mon Sep 17 00:00:00 2001 From: SkyArrow Date: Wed, 25 Jan 2012 01:05:19 +0800 Subject: twitter --- sass/parts/_banner.scss | 42 +++++++++++- source/_includes/banner.html | 8 ++- source/_includes/custom/after_footer.html | 2 +- source/javascripts/banner.js | 103 ------------------------------ source/javascripts/twitter.js | 88 +++++++++++++++++++++++++ 5 files changed, 137 insertions(+), 106 deletions(-) delete mode 100644 source/javascripts/banner.js create mode 100644 source/javascripts/twitter.js 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 @@ - \ No newline at end of file + \ 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 @@ - \ No newline at end of file + \ 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$2').replace(/(^|\W)@(\w+)/g, '$1@$2').replace(/(^|\W)#(\w+)/g, '$1#$2'); + + 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'+relativeDate(json[i].created_at)+''; + 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 -- cgit v1.1-2-g2b99