Day 32 - Old School Twitter Retweet

Modify the Twitter web interface to provide the old school “RT” functionality that many other Twitter clients provide.

ruleset a60x532 {
  meta {
    name "old-school-retweet"
    description <<
      old-school-retweet
    >>
    author "Mike Grace"
    logging on
  }

  dispatch {
    domain "twitter.com"
  }

  global {
    css <<
      .old-school-enabled .old-school-rt {
         background: url("http://a2.twimg.com/a/1294279085/phoenix/img/sprite-icons.png") no-repeat scroll 0 0 transparent;
         background-position: -176px 0;
         display: inline-block;
         margin-bottom: -3px;
         margin-right: 3px;
         position: relative;
         vertical-align: baseline;
         height: 12px;
         margin: 0 2px;
         outline: medium none;
         text-indent: -99999px;
         width: 15px;
      }
    >>;
  }

  rule twitter_page_loaded {
    select when pageview "twitter\.com"
    pre {
      oldSchool =<<
        <a class="old-school-retweet-action" href="#"><span><span class="old-school-rt"></span><b>RT</b></span></a>
      >>;
    }
    {
      emit <|
        $K(".stream-item").live("mouseenter", function() {
          var $tweet = $K(this);
          if ( $tweet.hasClass("old-school-enabled") == false ) {
            $tweet.addClass("old-school-enabled").find(".tweet-actions").append(oldSchool);

            $tweet.find(".old-school-retweet-action").click(function() {
              var tweet = $K(this).parents(".tweet-content").find(".tweet-text").text();
              var name = $K(this).parents(".tweet-content").find(".tweet-screen-name").text();
              var retweet = "RT @"+name+" "+tweet;
              $("#new-tweet").trigger("click");
              $K(".draggable textarea.twitter-anywhere-tweet-box-editor").val(retweet).focus();
              $K("#tweet_dialog a.tweet-button.button.disabled").removeClass("disabled");
            });
          };
        });
      |>;
    }
  }
}

• 38 html to emulate same style/layout as other twitter action buttons
• 43 add the RT button when a user mouses over a tweet
• 45 only add the button if it hasn’t already been done
• 48 bind click handler to newly added RT button
• 49 get the tweet text when the RT button is clicked
• 50 get the username of the tweeter the tweet came from
• 51 build new tweet in RT style
• 52 use Twitter’s jquery to trigger a click on the new tweet button
• 53 put the cursor in the tweet box and put the RT in the box
• 54 enable the tweet button so user doesn’t have to type before being allowed to tweet

Tweet moused over after running app on Twitter.com as a Chrome extension

Get the extension to try it out yourself! (Chrome / Firefox / IE)

Gratuitous day 32 Grace face

About these ads