diff options
| -rw-r--r-- | sass/parts/_banner.scss | 42 | ||||
| -rw-r--r-- | source/_includes/banner.html | 8 | ||||
| -rw-r--r-- | source/_includes/custom/after_footer.html | 2 | ||||
| -rw-r--r-- | source/javascripts/banner.js | 103 | ||||
| -rw-r--r-- | source/javascripts/twitter.js | 88 |
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 |