diff --git a/LICENSE.txt b/LICENSE.txt new file mode 100755 index 0000000..bfea61e --- /dev/null +++ b/LICENSE.txt @@ -0,0 +1,20 @@ +Copyright (c) 2008-2012 Todd Matthews & Steve Purcell + +Permission is hereby granted, free of charge, to any person obtaining +a copy of this software and associated documentation files (the +"Software"), to deal in the Software without restriction, including +without limitation the rights to use, copy, modify, merge, publish, +distribute, sublicense, and/or sell copies of the Software, and to +permit persons to whom the Software is furnished to do so, subject to +the following conditions: + +The above copyright notice and this permission notice shall be +included in all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF +MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND +NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE +LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION +OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION +WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. diff --git a/README.md b/README.md index 6099ba1..f54e99b 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,16 @@ -tweetwidget -=========== +Sea of Clouds - Twitter Widget +======================= + +A twitter widget, based on the 'Sea of Clouds' script. The most often used +options can be configured in the `config.yml` file. If you wish to change either +the default CSS or the default javascript, you should copy the files from +`SeaOfCloudsWidget/assets` to another file in that same folder. That way, they +will not be overwritten when you update the extension. + +
+
+
+ + + -Tweetwidget is a twitter widget, based on the 'Sea of Clouds' Tweet! script. \ No newline at end of file diff --git a/assets/index.css b/assets/index.css new file mode 100755 index 0000000..108b2f7 --- /dev/null +++ b/assets/index.css @@ -0,0 +1,69 @@ +body { + background-color: #008D99; + color: white; + font: 15px/1.3 arial, sans-serif; + margin: 0 auto; + width: 480px; + padding: 30px; + text-align: left; } + +h1 { + font-size: 240%; + margin-bottom: -.5em; } +h2, p, ul, code { + margin-bottom: 1em; } +h2 a { + color: #fff; } +h3 { + font-size: 140%; + margin-bottom: .4em; } +ul { + padding-left: 2em; } + ul li { + list-style-type: square; + margin-left: 0;} +a { + color: #8ADEE2; } +.demo a.num { + color: white; +} +code, .example { + padding: .5em; + display: block; + overflow-x: auto;} +code { + margin-left: 1em;} +code, .code, .example { + background-color: #0C717A; + color: #fff; + font-size: 85%; + font-family: courier, monospace; } + code a, .code a { + color: #fff; } +.show-code { + display: block; + font-size: 75%; + margin: 1em 0;} +.copyright { + font-family: verdana, sans-serif; + font-size: 75%; + margin-top: 8em; } + .copyright span { + color: #8ADEE2; } +.download h4 { + font-size: 120%; + margin-top: -.5em; + color: #8ADEE2; } +.twoot { + padding-top: 3em; } +.query { + margin-bottom: 2em; } +.notice { + background-color: #8adee2; + color: #444; + border: solid 2px #fff; + padding: 0 1em; +} +.notice a { + color: #444; +} \ No newline at end of file diff --git a/assets/index.html b/assets/index.html new file mode 100755 index 0000000..c131b30 --- /dev/null +++ b/assets/index.html @@ -0,0 +1,406 @@ + + + + + Tweet! A simple jQuery widget plugin to put Twitter on your site + + + + + + + +

Tweet!

+

put twitter on your website with tweet!, an unobtrusive javascript plugin for jquery.

+ +

Check out the script in action at seaofclouds.com, and see the following demos.

+ +
+

Important note about Twitter's API changes

+

+ Twitter's decision + to discontinue + their unauthenticated v1.0 API means that this widget will + stop working + at some + time in 2013 -- Twitter wants your only option for on-page + widgets to be their own Embedded Timelines. +

+

+ Please read the + corresponding support issue + for more information and possible current/future + workarounds. +

+
+ +

Examples

+ +
+

#1 - Displaying three tweets from the seaofclouds twitter feed:

+ 
+      jQuery(function($){
+        $(".tweet").tweet({
+          join_text: "auto",
+          username: "seaofclouds",
+          avatar_size: 48,
+          count: 3,
+          auto_join_text_default: " we said, ",
+          auto_join_text_ed: " we ",
+          auto_join_text_ing: " we were ",
+          auto_join_text_reply: " we replied ",
+          auto_join_text_url: " we were checking out ",
+          loading_text: "loading tweets..."
+        });
+      });
+
+
+
+ +
+

#2 - Displaying up to four tweets with the query "tweet.seaofclouds.com": +
+ (You can use any query supported by Twitter search) +

+ 
+      jQuery(function($){
+        $("#query").tweet({
+          avatar_size: 32,
+          count: 4,
+          query: "tweet.seaofclouds.com",
+          loading_text: "searching twitter..."
+        });
+      });
+
+
+
+ +
+

#3 - Displaying up to three links with the search query "from:seaofclouds http":

+ 
+      jQuery(function($){
+        $("#userandquery").tweet({
+          count: 3,
+          query: "from:seaofclouds http",
+          loading_text: "searching twitter..."
+        });
+      });
+
+
+
+ +
+

#4 - Displaying four tweets from the two users "seaofclouds" and "laughingsquid", refreshing every 60 seconds:

+

(Note that it's more reliable to display multiple users' tweets by using a list - see below)

+ 
+      jQuery(function($){
+        $("#fromtwo").tweet({
+          avatar_size: 32,
+          count: 4,
+          username: ["seaofclouds", "laughingsquid"],
+          loading_text: "searching twitter...",
+          refresh_interval: 60
+        });
+      });
+
+
+
+ +
+

#5 - Displaying tweets from users on the 'team' list of 'twitter':

+ 
+      jQuery(function($){
+        $("#list").tweet({
+          avatar_size: 32,
+          count: 4,
+          username: "twitter",
+          list: "team",
+          loading_text: "loading list..."
+        });
+      });
+
+
+
+ +
+

#6 - Displaying the user sanityinc's favorite tweets, and using a handler + for tweet's "loaded" event to make links open in a new window:

+ 
+      jQuery(function($){
+        $("#favorites").tweet({
+          avatar_size: 32,
+          count: 3,
+          username: "sanityinc",
+          favorites: true,
+          loading_text: "loading list..."
+        }).bind("loaded",function(){$(this).find("a").attr("target","_blank");});
+      });
+
+
+
+ +
+

#7 - Fetch 20 tweets, but filter out @replies, and display only 3:

+ 
+      jQuery(function($){
+        $("#filter").tweet({
+          avatar_size: 32,
+          count: 3,
+          fetch: 20,
+          filter: function(t){ return ! /^@\w+/.test(t.tweet_raw_text); },
+          username: "sanityinc"
+        });
+      });
+
+
+
+ +
+

#8 - Customize the layout to eliminate the date stamps and avatars, add an action (aka "web intent") link, + and make it open in a popup window:

+ 
+      jQuery(function($){
+        $("#custom").tweet({
+          avatar_size: 32,
+          count: 4,
+          username: "seaofclouds",
+          template: "{text} » {retweet_action}"
+        });
+      }).bind("loaded", function(){
+        $(this).find("a.tweet_action").click(function(ev) {
+          window.open(this.href, "Retweet",
+                      'menubar=0,resizable=0,width=550,height=420,top=200,left=400');
+          ev.preventDefault();
+        });
+      });
+
+
+
+ +
+

#9 - Adding a message when no tweets matching 'somerandomstring' are found:

+ 
+      jQuery(function($){
+        $("#empty").tweet({
+          avatar_size: 32,
+          count: 4,
+          query: rnd,
+          loading_text: "searching twitter..."
+        }).bind("empty", function() { $(this).append("No matching tweets found"); });
+      });
+
+
+
+ + +
+

#10 - use button to page forwards and backwards (note the HTML structure required -- please view the source):

+ 
+      jQuery(function($){
+        var options = {
+          username: "seaofclouds",
+          page: 1,
+          avatar_size: 32,
+          count: 4,
+          fetch: 5, // 1 + count
+          loading_text: "loading ..."
+        };
+
+        var widget = $("#paging .widget"),
+          next = $("#paging .next"),
+          prev = $("#paging .prev");
+
+        var enable = function(el, yes) {
+          yes ? $(el).removeAttr('disabled') :
+                $(el).attr('disabled', true);
+        };
+
+        var stepClick = function(incr) {
+          return function() {
+            options.page = options.page + incr;
+            enable(this, false);
+            widget.tweet(options);
+          };
+        };
+
+        next.bind("checkstate", function() {
+          enable(this, widget.find("li").length == options.count)
+        }).click(stepClick(1));
+
+        prev.bind("checkstate", function() {
+          enable(this, options.page > 1)
+        }).click(stepClick(-1));
+
+        widget.tweet(options).bind("loaded", function() { next.add(prev).trigger("checkstate"); });
+      });
+
+
+
+
+ + + +
+
+
+ +
+

#11 - display one tweet at a time like a ticker:

+ 
+      jQuery(function($){
+        $("#ticker").tweet({
+          username: "seaofclouds",
+          page: 1,
+          avatar_size: 32,
+          count: 20,
+          loading_text: "loading ..."
+        }).bind("loaded", function() {
+          var ul = $(this).find(".tweet_list");
+          var ticker = function() {
+            setTimeout(function() {
+              var top = ul.position().top;
+              var h = ul.height();
+              var incr = (h / ul.children().length);
+              var newTop = top - incr;
+              if (h + newTop <= 0) newTop = 0;
+              ul.animate( {top: newTop}, 500 );
+              ticker();
+            }, 5000);
+          };
+          ticker();
+        });
+      });
+
+ +
+
+ +

Features

+ + +

NOTE: Some users have reported that they do not show up in Twitter's search results.

+ +
+

Download

+

+ + + + +

+
+ +

Usage

+

1. Get JQuery. In these examples, we use Google's AJAX Libraries API. +

2. include jQuery and jquery.tweet.js files in your template's <head>.

+ + <script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
+ <script language="javascript" src="/tweet/jquery.tweet.js" type="text/javascript"></script> + +

3. Also in <head>, Initialize tweet! on page load with your Username and other options

+ + <script type='text/javascript'>
+     jQuery(function($){
+         $(".tweet").tweet({
+             username: "seaofclouds",
+             join_text: "auto",
+             avatar_size: 32,
+             count: 3,
+             auto_join_text_default: "we said,",
+             auto_join_text_ed: "we",
+             auto_join_text_ing: "we were",
+             auto_join_text_reply: "we replied to",
+             auto_join_text_url: "we were checking out",
+             loading_text: "loading tweets..."
+         });
+     });
+ </script> + +

4. In <body>, include a placeholder for your tweets. They'll get loaded in via JSON. How fancy!

+ + <div class="tweet"></div> + +

5. Style with our stylesheet in <head>, or modify as you like!

+ + <link href="jquery.tweet.css" media="all" rel="stylesheet" type="text/css"/> + + +

Contribute

+

Bring your code slinging skills to Github and help us develop new features for tweet!

+ + git clone git://github.com/seaofclouds/tweet.git + + Fork me on GitHub +

+ Report bugs and request features in Github Issues +

+

Licensed under the MIT

+ + http://www.opensource.org/licenses/mit-license.php + +

something nifty from seaofclouds™ & sanityinc.com | contribute

+ + diff --git a/assets/jquery.tweet.css b/assets/jquery.tweet.css new file mode 100755 index 0000000..618039b --- /dev/null +++ b/assets/jquery.tweet.css @@ -0,0 +1,37 @@ +/* Note: do not change this file. If you wish to modify it, copy it, and set the correct name in this extension's config.yml */ +.tweet, .query { + /* font: 120% Georgia, serif; + color: #085258; */ +} + +.tweet_list { + list-style: none; + margin: 0; + padding: 0; + overflow-y: hidden; + /* background-color: #8ADEE2; */ +} + +.tweet_list li { + overflow-y: auto; + overflow-x: hidden; + padding: 0.5em; + list-style-type: none; + font-size: 90%; +} + +.tweet_list li a { + color: #0C717A; +} + +.tweet_list .tweet_even { + background-color: rgba(0, 0, 0, 0.1); +} + +.tweet_list .tweet_avatar { + padding-right: .5em; float: left; +} + +.tweet_list .tweet_avatar img { + vertical-align: middle; +} diff --git a/assets/jquery.tweet.js b/assets/jquery.tweet.js new file mode 100755 index 0000000..125c21b --- /dev/null +++ b/assets/jquery.tweet.js @@ -0,0 +1,264 @@ +// jquery.tweet.js - See http://tweet.seaofclouds.com/ or https://github.com/seaofclouds/tweet for more info +// Copyright (c) 2008-2012 Todd Matthews & Steve Purcell +(function (factory) { + if (typeof define === 'function' && define.amd) + define(['jquery'], factory); // AMD support for RequireJS etc. + else + factory(jQuery); +}(function ($) { + $.fn.tweet = function(o){ + var s = $.extend({ + username: null, // [string or array] required unless using the 'query' option; one or more twitter screen names (use 'list' option for multiple names, where possible) + list: null, // [string] optional name of list belonging to username + favorites: false, // [boolean] display the user's favorites instead of his tweets + query: null, // [string] optional search query (see also: http://search.twitter.com/operators) + avatar_size: null, // [integer] height and width of avatar if displayed (48px max) + count: 3, // [integer] how many tweets to display? + fetch: null, // [integer] how many tweets to fetch via the API (set this higher than 'count' if using the 'filter' option) + page: 1, // [integer] which page of results to fetch (if count != fetch, you'll get unexpected results) + retweets: true, // [boolean] whether to fetch (official) retweets (not supported in all display modes) + intro_text: null, // [string] do you want text BEFORE your your tweets? + outro_text: null, // [string] do you want text AFTER your tweets? + join_text: null, // [string] optional text in between date and tweet, try setting to "auto" + auto_join_text_default: " I said, ", // [string] auto text for non verb: "I said" bullocks + auto_join_text_ed: " I ", // [string] auto text for past tense: "I" surfed + auto_join_text_ing: " I am ", // [string] auto tense for present tense: "I was" surfing + auto_join_text_reply: " I replied to ", // [string] auto tense for replies: "I replied to" @someone "with" + auto_join_text_url: " I was looking at ", // [string] auto tense for urls: "I was looking at" http:... + loading_text: null, // [string] optional loading text, displayed while tweets load + refresh_interval: null, // [integer] optional number of seconds after which to reload tweets + twitter_url: "twitter.com", // [string] custom twitter url, if any (apigee, etc.) + twitter_api_url: "api.twitter.com", // [string] custom twitter api url, if any (apigee, etc.) + twitter_search_url: "search.twitter.com", // [string] custom twitter search url, if any (apigee, etc.) + template: "{avatar}{time}{join} {text}", // [string or function] template used to construct each tweet
  • - see code for available vars + comparator: function(tweet1, tweet2) { // [function] comparator used to sort tweets (see Array.sort) + return tweet2.tweet_time - tweet1.tweet_time; + }, + filter: function(tweet) { // [function] whether or not to include a particular tweet (be sure to also set 'fetch') + return true; + } + // You can attach callbacks to the following events using jQuery's standard .bind() mechanism: + // "loaded" -- triggered when tweets have been fetched and rendered + }, o); + + // See http://daringfireball.net/2010/07/improved_regex_for_matching_urls + var url_regexp = /\b((?:https?:\/\/|www\d{0,3}[.]|[a-z0-9.\-]+[.][a-z]{2,4}\/)(?:[^\s()<>]+|\(([^\s()<>]+|(\([^\s()<>]+\)))*\))+(?:\(([^\s()<>]+|(\([^\s()<>]+\)))*\)|[^\s`!()\[\]{};:'".,<>?«»“”‘’]))/gi; + + // Expand values inside simple string templates with {placeholders} + function t(template, info) { + if (typeof template === "string") { + var result = template; + for(var key in info) { + var val = info[key]; + result = result.split('{'+key+'}').join(val === null ? '' : val); + } + return result; + } else return template(info); + } + // Export the t function for use when passing a function as the 'template' option + $.extend({tweet: {t: t}}); + + function replacer (regex, replacement) { + return function() { + var returning = []; + this.each(function() { + returning.push(this.replace(regex, replacement)); + }); + return $(returning); + }; + } + + function escapeHTML(s) { + return s.replace(//g,"^>"); + } + + $.fn.extend({ + linkUser: replacer(/(^|[\W])@(\w+)/gi, "$1@$2"), + // Support various latin1 (\u00**) and arabic (\u06**) alphanumeric chars + linkHash: replacer(/(?:^| )[\#]+([\w\u00c0-\u00d6\u00d8-\u00f6\u00f8-\u00ff\u0600-\u06ff]+)/gi, + ' #$1'), + makeHeart: replacer(/(<)+[3]/gi, "♥") + }); + + function linkURLs(text, entities) { + return text.replace(url_regexp, function(match) { + var url = (/^[a-z]+:/i).test(match) ? match : "http://"+match; + var text = match; + for(var i = 0; i < entities.length; ++i) { + var entity = entities[i]; + if (entity.url === url && entity.expanded_url) { + url = entity.expanded_url; + text = entity.display_url; + break; + } + } + return ""+escapeHTML(text)+""; + }); + } + + function parse_date(date_str) { + // The non-search twitter APIs return inconsistently-formatted dates, which Date.parse + // cannot handle in IE. We therefore perform the following transformation: + // "Wed Apr 29 08:53:31 +0000 2009" => "Wed, Apr 29 2009 08:53:31 +0000" + return Date.parse(date_str.replace(/^([a-z]{3})( [a-z]{3} \d\d?)(.*)( \d{4})$/i, '$1,$2$4$3')); + } + + function extract_relative_time(date) { + var toInt = function(val) { return parseInt(val, 10); }; + var relative_to = new Date(); + var delta = toInt((relative_to.getTime() - date) / 1000); + if (delta < 1) delta = 0; + return { + days: toInt(delta / 86400), + hours: toInt(delta / 3600), + minutes: toInt(delta / 60), + seconds: toInt(delta) + }; + } + + function format_relative_time(time_ago) { + if ( time_ago.days > 2 ) return 'about ' + time_ago.days + ' days ago'; + if ( time_ago.hours > 24 ) return 'about a day ago'; + if ( time_ago.hours > 2 ) return 'about ' + time_ago.hours + ' hours ago'; + if ( time_ago.minutes > 45 ) return 'about an hour ago'; + if ( time_ago.minutes > 2 ) return 'about ' + time_ago.minutes + ' minutes ago'; + if ( time_ago.seconds > 1 ) return 'about ' + time_ago.seconds + ' seconds ago'; + return 'just now'; + } + + function build_auto_join_text(text) { + if (text.match(/^(@([A-Za-z0-9-_]+)) .*/i)) { + return s.auto_join_text_reply; + } else if (text.match(url_regexp)) { + return s.auto_join_text_url; + } else if (text.match(/^((\w+ed)|just) .*/im)) { + return s.auto_join_text_ed; + } else if (text.match(/^(\w*ing) .*/i)) { + return s.auto_join_text_ing; + } else { + return s.auto_join_text_default; + } + } + + function build_api_url() { + var proto = ('https:' === document.location.protocol ? 'https:' : 'http:'); + var count = (s.fetch === null) ? s.count : s.fetch; + var common_params = '&include_entities=1&callback=?'; + if (s.list) { + return proto+"//"+s.twitter_api_url+"/1/"+s.username[0]+"/lists/"+s.list+"/statuses.json?page="+s.page+"&per_page="+count+common_params; + } else if (s.favorites) { + return proto+"//"+s.twitter_api_url+"/1/favorites.json?screen_name="+s.username[0]+"&page="+s.page+"&count="+count+common_params; + } else if (s.query === null && s.username.length === 1) { + return proto+'//'+s.twitter_api_url+'/1/statuses/user_timeline.json?screen_name='+s.username[0]+'&count='+count+(s.retweets ? '&include_rts=1' : '')+'&page='+s.page+common_params; + } else { + var query = (s.query || 'from:'+s.username.join(' OR from:')); + return proto+'//'+s.twitter_search_url+'/search.json?&q='+encodeURIComponent(query)+'&rpp='+count+'&page='+s.page+common_params; + } + } + + function extract_avatar_url(item, secure) { + if (secure) { + return ('user' in item) ? + item.user.profile_image_url_https : + extract_avatar_url(item, false). + replace(/^http:\/\/[a-z0-9]{1,3}\.twimg\.com\//, "https://s3.amazonaws.com/twitter_production/"); + } else { + return item.profile_image_url || item.user.profile_image_url; + } + } + + // Convert twitter API objects into data available for + // constructing each tweet
  • using a template + function extract_template_data(item){ + var o = {}; + o.item = item; + o.source = item.source; + o.screen_name = item.from_user || item.user.screen_name; + // The actual user name is not returned by all Twitter APIs, so please do not + // file an issue if it is empty: + o.name = item.from_user_name || item.user.name; + o.retweet = typeof(item.retweeted_status) != 'undefined'; + + o.tweet_time = parse_date(item.created_at); + o.join_text = s.join_text === "auto" ? build_auto_join_text(item.text) : s.join_text; + o.tweet_id = item.id_str; + o.twitter_base = "http://"+s.twitter_url+"/"; + o.user_url = o.twitter_base+o.screen_name; + o.tweet_url = o.user_url+"/status/"+o.tweet_id; + o.reply_url = o.twitter_base+"intent/tweet?in_reply_to="+o.tweet_id; + o.retweet_url = o.twitter_base+"intent/retweet?tweet_id="+o.tweet_id; + o.favorite_url = o.twitter_base+"intent/favorite?tweet_id="+o.tweet_id; + o.retweeted_screen_name = o.retweet && item.retweeted_status.user.screen_name; + o.tweet_relative_time = format_relative_time(extract_relative_time(o.tweet_time)); + o.entities = item.entities ? (item.entities.urls || []).concat(item.entities.media || []) : []; + o.tweet_raw_text = o.retweet ? ('RT @'+o.retweeted_screen_name+' '+item.retweeted_status.text) : item.text; // avoid '...' in long retweets + o.tweet_text = $([linkURLs(o.tweet_raw_text, o.entities)]).linkUser().linkHash()[0]; + o.retweeted_tweet_text = $([linkURLs(item.text, o.entities)]).linkUser().linkHash()[0]; + o.tweet_text_fancy = $([o.tweet_text]).makeHeart()[0]; + + o.avatar_size = s.avatar_size; + o.avatar_url = extract_avatar_url(o.retweet ? item.retweeted_status : item, (document.location.protocol === 'https:')); + o.avatar_screen_name = o.retweet ? o.retweeted_screen_name : o.screen_name; + o.avatar_profile_url = o.twitter_base+o.avatar_screen_name; + + // Default spans, and pre-formatted blocks for common layouts + o.user = t('{screen_name}', o); + o.join = s.join_text ? t('{join_text}', o) : ''; + o.avatar = o.avatar_size ? + t('{avatar_screen_name}\'s avatar', o) : ''; + o.time = t('{tweet_relative_time}', o); + o.text = t('{tweet_text_fancy}', o); + o.retweeted_text = t('{retweeted_tweet_text}', o); + o.reply_action = t('reply', o); + o.retweet_action = t('retweet', o); + o.favorite_action = t('favorite', o); + return o; + } + + function render_tweets(widget, tweets) { + var list = $('