Flitskikker

Twitter Marquee using Siutsur

Aug 15th, 2013
357
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. // Twitter Marquee
  2. // Source:  http://andreaslagerkvist.com/archives/2011/06/24/how-to-create-a-scrolling-twitter-feed-using-jquery/
  3. // Updated: http://laurib.edicy.co/siutsur-load-tweets-without-oauth
  4.  
  5. var Siutsur=function(){return{load:function(e,t,n){this.c=t;this.ec=n;$("<script />",{src:"//cdn.syndication.twimg.com/widgets/timelines/"+e+"?&lang=en&callback=Siutsur.callback&suppress_response_codes=true&_="+Math.random()}).appendTo(document.head);},callback:function(e){if(e.headers&&e.headers.status==200){var t=$(e.body),n=[],r=t.find(">.stream>.h-feed>li.h-entry");$.each(r,function(e,t){var r=$(t),i=r.children(".permalink"),s=r.find(">.p-author>.profile"),o=s.children(".avatar"),u=r.find(">.e-entry-content>.e-entry-title");var f={id:parseInt(r.data("tweet-id"),10),permalink:i.attr("href"),published:{datetime:i.data("datetime"),label:i.text(),title:i.children("time").attr("title")},title:{regular:u.html(),plain:u.text()},user:{avatar:{bigger:o.attr("data-src-2x"),normal:o.attr("src")},link:s.attr("href"),name:s.find(">.full-name>.p-name").text(),nickname:s.find(">.p-nickname").text()}};n.push(f);});if(this.c){this.c.call(this,n);}}else{if(this.ec){this.ec.call(this);}}}};}();
  6.  
  7. var Twitter = {
  8.     init: function () {
  9.         // Pass in the username you want to display feeds for
  10.         this.insertLatestTweets('unused');
  11.     },
  12.  
  13.     // This replaces the <p>Loading...</p> with the tweets
  14.     insertLatestTweets: function (username) {        
  15.         $(function() {
  16.             Siutsur.load('***YOURWIDGETID***', function(data) {
  17.                 // We'll start by creating a normal marquee-element for the tweets
  18.                 var html = '<marquee behavior="scroll" scrollamount="1" direction="left">';
  19.  
  20.                 // Loop through all the tweets and create a link for each
  21.                 for (var i in data) {
  22.                     html += '<a href="' + data[i].permalink + '" target="_blank">' + data[i].title.plain + ' <i>' + Twitter.daysAgo(data[i].published.datetime) + '</i></a>';
  23.                 }
  24.  
  25.                 html += '</marquee>';
  26.  
  27.                 // Now replace the <p> with our <marquee>-element
  28.                 $('#twitter p').replaceWith(html);
  29.  
  30.                 // The marquee element looks quite shite so we'll use Remy Sharp's plug-in to replace it with a smooth one
  31.                 Twitter.fancyMarquee();
  32.             }, function() {
  33.                 $('#twitter p').replaceWith('<i>Error loading tweets</i>');
  34.             });
  35.         });
  36.     },
  37.  
  38.     // Replaces the marquee-element with a fancy one
  39.     fancyMarquee: function () {
  40.         // Replace the marquee and do some fancy stuff (taken from remy sharp's website)
  41.         $('#twitter marquee').marquee('pointer')
  42.             .mouseover(function () {
  43.                 $(this).trigger('stop');
  44.             })
  45.             .mouseout(function () {
  46.                 $(this).trigger('start');
  47.             })
  48.             .mousemove(function (event) {
  49.                 if ($(this).data('drag') == true) {
  50.                     this.scrollLeft = $(this).data('scrollX') + ($(this).data('x') - event.clientX);
  51.                 }
  52.             })
  53.             .mousedown(function (event) {
  54.                 $(this).data('drag', true).data('x', event.clientX).data('scrollX', this.scrollLeft);
  55.             })
  56.             .mouseup(function () {
  57.                 $(this).data('drag', false);
  58.             });
  59.     },
  60.  
  61.     // Takes a date and return the number of days it's been since said date
  62.     daysAgo: function (date) { 
  63.     var twToday = 'today';
  64.     var twYesterday = 'yesterday';
  65.     var twDay = 'day ago';
  66.     var twDays = 'days ago';
  67.        
  68.         // TODO: Fix date for IE...
  69.         if ($.browser.msie) {
  70.             return twYesterday;
  71.         }
  72.  
  73.         var d = new Date(date).getTime();
  74.         var n = new Date().getTime();
  75.  
  76.         var numDays = Math.round(Math.abs(n - d) / (1000 * 60 * 60 * 24));
  77.         var daysAgo = numDays + ' ' + twDay;
  78.  
  79.         if (numDays == 0) {
  80.             daysAgo = twToday;
  81.         } else if (numDays == 1) {
  82.             daysAgo = twYesterday;
  83.         } else {
  84.             daysAgo = numDays + ' ' + twDays;
  85.         }
  86.  
  87.         return daysAgo;
  88.     }
  89. };
Advertisement
Add Comment
Please, Sign In to add comment