Skip to content

Commit

Permalink
stashing tweeze
Browse files Browse the repository at this point in the history
  • Loading branch information
@weisjohn
weisjohn committed Jun 20, 2012
1 parent 4f45834 commit 1a30447
Showing 1 changed file with 180 additions and 0 deletions.
180 changes: 180 additions & 0 deletions tweeze/index.html
View file
@@ -0,0 +1,180 @@
<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!-- Consider adding a manifest.appcache: h5bp.com/d/Offline -->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">

<!-- Use the .htaccess and remove these lines to avoid edge case issues.
More info: h5bp.com/b/378 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title>Basic Twitter Hook</title>
<meta name="description" content="">
<meta name="author" content="">

<!-- Mobile viewport optimized: j.mp/bplateviewport -->
<meta name="viewport" content="width=device-width,initial-scale=1">

<!-- Place favicon.ico and apple-touch-icon.png in the root directory: mathiasbynens.be/notes/touch-icons -->

<!-- <link rel="stylesheet" href="css/style.css"> -->

<!-- More ideas for your <head> here: h5bp.com/d/head-Tips -->

<!-- All JavaScript at the bottom, except this Modernizr build incl. Respond.js
Respond is a polyfill for min/max-width media queries. Modernizr enables HTML5 elements & feature detects;
for optimal performance, create your own custom Modernizr build: www.modernizr.com/download/ -->
<!-- <script src="js/libs/modernizr-2.0.6.min.js"></script> -->

<style type="text/css">

/* simple styles */
body { font-family: Arial; font-size: 14px; background: #EEEEEE; }
.code { font-family: 'Courier New'; background: #CCCCCC; display: inline; padding: 0px 3px; }

.box p { min-height: 60px; }


/* stuff to pull out for the plugin */
.box { width: 350px; margin: 20px; float: left; border: 2px solid #CCCCC; border-radius: 5px; }
.box ul { padding-left: 0px; }
.box ul li { display: block; padding: 20px; border: 1px solid #CCCCCC; }

.tweeze .user { display: block; }
.tweeze .text { }
.tweeze .time { display: block; }


</style>

</head>

<body>

<div id="container">
<header>

</header>
<div id="main" role="main">

<h2>jQuery.tweeze.js</h2>

<p> A jQuery plugin to help retrieve content from the Twitter Search API. </p>

<h3>Features</h3>
<ul>
<li>Extremely flexible configuration.</li>
<li>Pretty dates (thanks <a href="http://ejohn.org/blog/javascript-pretty-date/">John Resig</a>!)</li>
<li>Linkified tweets (thanks <a href="http://davidwalsh.name/linkify-twitter-feed">Jeremy Parrish (rrish.org)</a></li>
</ul>

<h3>TODO: stuff that's coming</h3>
<ul>
<li>Smart filters to avoid triggering Search API complexity requirements.</li>
<li>Browser-based caching of tweets via HTML5 LocalStorage (avoids rate limiting).</li>
<li>Animations to load in new tweets.</li>
</ul>

<h3>TODO: stuff that should be in any self-respecting twitter plugin</h3>
<ul>
<li>showing avatars</li>
</ul>

<div class="box">
<h4>Simple Feed</h4>
<p>Tweets coming from a single user, that is <span class="code">@twitter</span>. Usernames are not shown.</p>
<ul id="hook_1"></ul>
</div>

<div class="box">
<h4>Multi-User Feed</h4>
<p> Multiple users passed into Twitter Search API. (A few developers that I follow.) </p>
<ul id="hook_2"></ul>
</div>

<!--
<div class="box">
<h4>Filtered User Feed</h4>
<p> Many more users than the Twitter Search API would allow, so we search directed to a user <span class="code">@RWD</span> and then filter. (You could easily use a <span class="code">#hashtag</span>) </p>
<ul id="hook_3"></ul>
</div>
-->

<div class="box">
<h4>Multiple requests</h4>
<p> Let's say a number of users are spamming on your particular <span class="code">#hashtag</span>. In this setup, we make a few requests to get a larger number of results. </p>
<ul id="hook_4"></ul>
</div>


</div>
<footer>

</footer>
</div> <!--! end of #container -->


<!-- JavaScript at the bottom for fast page loading -->

<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.6.2.js"><\/script>')</script>


<!-- scripts concatenated and minified via build script -->
<script defer src="js/jquery.tweeze.js"></script>

<script type="text/javascript">

$(function() {

$("#hook_1").tweeze({
usernames : {
'from' : ['twitter'],
}
});

$("#hook_2").tweeze({
usernames : {
'from' : ['rem', 'paul_irish', 'ajpiano'],
},
show_senders : true
});

$("#hook_3").tweeze({
usernames : {
'from' : [ 'RWD', 'bdconf', 'brad_frost', 'smashingmag' ]
},
search_term : 'RWD',
show_senders : true,
on_complete : function() {
console.log('tweets retrieved');
}
});


$("#hook_4").tweeze({
usernames : {
'from' : ['BamaVSPINK', 'UAPINK', 'PINK_ASU', 'VSPINKUofArk', 'AuburnPINK', 'BinghamptonPINK', 'VSPINKCal', 'CinciPINK', 'CUBuffsLovePINK', 'UF_PINK', 'FAMUVSPINK', 'VSPINKFSU', 'VSPINKUGA', 'GtechPink', 'HUPINKREPS', 'IlliniPINK', 'VSPINK_IU', 'VSPINKuiowa', 'KU_PINK', 'UKVSPINK', 'PinkatUofL', 'PINKLSUTigers', 'VSPINKMichigan', 'MSUPINK', 'PINKMizzou', 'PINK_HUSKERS', 'vspinkNYU', 'OklahomaVSPINK', 'VSPINK_Okstate', 'OleMissPINK', 'OregonPINK', 'oregonstatePINK', 'PINKPSU', 'PITTVSPINK', 'VSPINKatPurdue', 'RUTGERSVSPINK', 'USFPINK', 'SpelmanPINK', 'VSPinkStanford', 'PINKatSU', 'TexasVSPINK', 'AggiePINK', 'TxTechVSPINK', 'UCFPINK', 'VSPINKUCLA', 'UCONNPINK', 'VSPINKumiami', 'VolsLovePINK', 'VSPINKUtes', 'VSPinkUVA', 'vsPINKuw', 'USC_PINK', 'VSPINKVT', 'WazzuPink', 'vspinkwvu', 'VSPINK_SCONNIE']
},
min_size : 5,
rpp : 100,
search_term : 'PINKReps',
show_senders : true
});


});

</script>

<!-- end scripts -->



</body>
</html>

0 comments on commit 1a30447

Please sign in to comment.