--- a/client/podium-cp-tweets.html Wed Feb 15 18:59:57 2012 +0100
+++ b/client/podium-cp-tweets.html Thu Feb 16 12:24:18 2012 +0100
@@ -9,72 +9,98 @@
<link rel="stylesheet" href="css/controlpanel.css" />
<style type="text/css">
#podium-container {
- width: 800px;
- margin: 200px auto 0;
+ position: absolute;
+ width: 1480px;
+ top: 600px;
+ left: 400px;
}
#podium {
width: 100%;
height: 300px;
- cursor: pointer;
}
#podium-labels {
- float: left;
+ position: absolute;
width: 100%;
- clear: both;
- margin-top: 20px;
+ top: 320px;
}
#podium-labels li {
float: left;
- width: 200px;
+ width: 25%;
color: #ffffff;
text-align: center;
- font-size: 28px;
+ font-size: 42px;
+ }
+ #podium-chiffres {
+ position: absolute;
+ width: 100%;
+ top: 240px;
+ }
+ #podium-chiffres li {
+ float: left;
+ width: 25%;
+ color: #000000;
+ text-align: center;
+ font-size: 50px;
font-weight: bold;
}
+
+
+ #btv-tweet {
+ position: absolute;
+ left: 775px;
+ top: 250px;
+ width: 650px;
+ background: #0031ff;
+ padding: 40px;
+ color: #ffffff;
+ font-size: 42px;
+ display: none;
+ }
+ .btv-tweet-image {
+ width: 100px;
+ height: 100px;
+ margin: 0 30px 30px 0;
+ float: left;
+ }
+ .btv-tweet-screen-name {
+ font-weight: bold;
+ }
+ .btv-tweet-name {
+ margin: 10px 0;
+ }
+ .btv-tweet-text {
+ clear: both;
+ }
</style>
<script type="text/javascript" src="lib/jquery.min.js"></script>
<script type="text/javascript" src="js/podium.js"></script>
<script type="text/javascript" src="js/tweetsource.js"></script>
<script type="text/javascript">
- var tzero = new Date();
- $(function() {
- setInterval(function() {
- var _t = Math.floor((new Date() - tzero)/1000),
- _s = _t % 60,
- _m = Math.floor(_t/60) % 60,
- _h = Math.floor(_t/3600);
- $("#btv-cp-temps").html(
- _h + ':' + (_m < 10 ? '0' : '') + _m + ':' + (_s < 10 ? '0' : '') + _s
- )
- }, 500);
- var _keywords = ['Sarkozy', 'Hollande', 'candidat', 'politique']
- myTweetSource = new Btv_TweetSource({
- keywords: _keywords
- });
- myPodium = new Btv_Podium([0,0,0,0]);
- myTweetSource.setTweetsCallback(function() {
- var _filtered = this.afterDate(tzero);
- $("#btv-cp-nb-tweets").html(_filtered.count());
- var _counts = [];
- for (var _i = 0; _i < _keywords.length; _i++) {
- _counts.push(_filtered.search(_keywords[_i]).count());
- }
- myPodium.update(_counts);
- $('#btv-cp-liste-tweets-tout').html(
- _filtered.reverse().slice(0,20).map(function(_t) {
- return '<li onclick="addTweet(\''
- + _t.id_str
- + '\'); return false;"><a title="Ajouter à la sélection" href="#"><span class="btv-cp-tweet-date">'
- + _t.created_at.match(/\d+:\d+:\d+/)[0]
- + '</span> <span class="btv-cp-tweet-from">@'
- + _t.from_user
- + '</span> <span class="btv-cp-tweet-text">'
- + _t.text
- + '</span><div class="btv-cp-tweet-button btv-cp-tweet-add"></div></a></li>'
- }).join('')
- )
- });
- });
+ var tzero = new Date() - 120000;
+
+ function updateLastTweets() {
+ var _filtered = myTweetSource.afterDate(tzero),
+ _txtFilter = $("#btv-cp-champ-filtre").val(),
+ _reFilter = null;
+ if (_txtFilter.length > 1) {
+ _filtered = _filtered.search(_txtFilter);
+ _reFilter = new RegExp('(' + _txtFilter.replace(/\W/gim,'\\$1') + ')','gim');
+ }
+ $('#btv-cp-liste-tweets-tout').html(
+ _filtered.reverse().slice(0,20).map(function(_t) {
+ return '<li onclick="addTweet(\''
+ + _t.id_str
+ + '\'); return false;"><a title="Ajouter à la sélection" href="#"><span class="btv-cp-tweet-date">'
+ + _t.created_at.match(/\d+:\d+:\d+/)[0]
+ + '</span> <span class="btv-cp-tweet-from">'
+ + ( _reFilter ? ('@' + _t.from_user).replace(_reFilter, '<span class="btv-cp-highlight">$1</span>') : ('@' + _t.from_user) )
+ + '</span> <span class="btv-cp-tweet-text">'
+ + ( _reFilter ? _t.text.replace(_reFilter, '<span class="btv-cp-highlight">$1</span>') : _t.text )
+ + '</span><div class="btv-cp-tweet-button btv-cp-tweet-add"></div></a></li>'
+ }).join('')
+ );
+ }
+
function addTweet(tweetId) {
var _t = myTweetSource.tweetById(tweetId);
if (_t) {
@@ -91,55 +117,124 @@
);
}
}
+
+ function showTweet(tweetId) {
+ var _t = myTweetSource.tweetById(tweetId);
+ if (_t) {
+ $("#btv-tweet").html('<img class="btv-tweet-image" src="'
+ + _t.profile_image_url
+ + '" /><p class="btv-tweet-screen-name">'
+ + _t.from_user
+ + '</p><p class="btv-tweet-name">'
+ + _t.from_user_name
+ +'</p><p class="btv-tweet-text">'
+ + _t.text
+ +'</p>').show();
+ $(".btv-cp-hide-tweets").show();
+ }
+ }
+
+ $(function() {
+ setInterval(function() {
+ var _t = Math.floor((new Date() - tzero)/1000),
+ _s = _t % 60,
+ _m = Math.floor(_t/60) % 60,
+ _h = Math.floor(_t/3600);
+ $("#btv-cp-temps").html(
+ _h + ':' + (_m < 10 ? '0' : '') + _m + ':' + (_s < 10 ? '0' : '') + _s
+ )
+ }, 500);
+ myPodium = new Btv_Podium([0,0,0,0]);
+
+ var _keywords = ['Sarkozy', 'Hollande', 'candidat', 'France'];
+
+ $("#podium-labels").html(_keywords.map(function(_w) {
+ return '<li>' + _w + '</li>'
+ }).join(""));
+
+ myTweetSource = new Btv_TweetSource({
+ keywords: _keywords
+ });
+
+ myTweetSource.setTweetsCallback(function() {
+ var _filtered = this.afterDate(tzero);
+ $("#btv-cp-nb-tweets").html(_filtered.count());
+ var _counts = [];
+ for (var _i = 0; _i < _keywords.length; _i++) {
+ _counts.push(_filtered.search(_keywords[_i]).count());
+ }
+ updateLastTweets();
+ myPodium.update(_counts);
+ $("#podium-chiffres").html(_counts.map(function(_c) {
+ return '<li>' + _c + '</li>'
+ }).join(""));
+ });
+
+ $("#btv-cp-champ-filtre").keyup(function() {
+ updateLastTweets();
+ });
+ $("#btv-cp-clear-filtre").click(function() {
+ $("#btv-cp-champ-filtre").val("");
+ updateLastTweets();
+ return false;
+ });
+ $("#btv-tweet, .btv-cp-hide-tweets").click(function() {
+ $("#btv-tweet, .btv-cp-hide-tweets").hide();
+ })
+ });
+
</script>
</head>
<body>
- <div id="btv-cp-container">
- <div class="btv-cp-line">
- <div class="btv-cp-element">
- <h2>Bubble <b>TV</b></h2>
- </div>
- <div class="btv-cp-element" id="btv-cp-cont-filtre">
- <h3>Rechercher/Filtrer</h3>
- <input id="btv-cp-champ-filtre" />
- <a href="#" id="btv-cp-clear-filtre">x</a>
- </div>
- <div class="btv-cp-element">
- <h3>Derniers tweets</h3>
- <ul class="btv-cp-liste-tweets" id="btv-cp-liste-tweets-tout">
- </ul>
- </div>
- <div class="btv-cp-element">
- <h3>Tweets sélectionnés</h3>
- <ul class="btv-cp-liste-tweets" id="btv-cp-liste-tweets-selection">
- </ul>
- </div>
- <div class="btv-cp-element btv-cp-cont-pause" id="btv-cp-cont-pause-amont">
- <h3>Arrivée des tweets</h3>
- <a class="btv-cp-play-pause btv-cp-status-pause" href="#"></a>
- </div>
- <div class="btv-cp-element btv-cp-cont-pause" id="btv-cp-cont-pause-aval">
- <h3>Purge des colonnes</h3>
- <a class="btv-cp-play-pause btv-cp-status-pause" href="#"></a>
- </div>
- <div class="btv-cp-element btv-cp-compteur">
- <h3>Nombre de tweets</h3>
- <h4 id="btv-cp-nb-tweets"></h4>
- </div>
- <div class="btv-cp-element btv-cp-compteur">
- <h3>Temps écoulé</h3>
- <h4 id="btv-cp-temps">0:00:00</h4>
+ <div id="btv-global-container">
+ <div id="btv-cp-container">
+ <div class="btv-cp-line">
+ <div class="btv-cp-element">
+ <h2>Bubble <b>TV</b></h2>
+ </div>
+ <div class="btv-cp-element" id="btv-cp-cont-filtre">
+ <h3>Rechercher/Filtrer</h3>
+ <input id="btv-cp-champ-filtre" />
+ <a href="#" id="btv-cp-clear-filtre">x</a>
+ </div>
+ <div class="btv-cp-element btv-cp-cont-liste">
+ <h3>Derniers tweets</h3>
+ <ul class="btv-cp-liste-tweets" id="btv-cp-liste-tweets-tout">
+ </ul>
+ </div>
+ <div class="btv-cp-element btv-cp-cont-liste">
+ <h3>Tweets sélectionnés</h3>
+ <ul class="btv-cp-liste-tweets" id="btv-cp-liste-tweets-selection">
+ </ul>
+ <a class="btv-cp-hide-tweets" href="#" style="display: none;">Cacher le tweet à l'écran</a>
+ </div>
+ <div class="btv-cp-element btv-cp-cont-pause" id="btv-cp-cont-pause-amont">
+ <h3>Arrivée des tweets</h3>
+ <a class="btv-cp-play-pause btv-cp-status-pause" href="#"></a>
+ </div>
+ <div class="btv-cp-element btv-cp-cont-pause" id="btv-cp-cont-pause-aval">
+ <h3>Purge des colonnes</h3>
+ <a class="btv-cp-play-pause btv-cp-status-pause" href="#"></a>
+ </div>
+ <div class="btv-cp-element btv-cp-compteur">
+ <h3>Nombre de tweets</h3>
+ <h4 id="btv-cp-nb-tweets"></h4>
+ </div>
+ <div class="btv-cp-element btv-cp-compteur">
+ <h3>Temps écoulé</h3>
+ <h4 id="btv-cp-temps">0:00:00</h4>
+ </div>
</div>
</div>
- </div>
- <div id="podium-container">
- <div id="podium"></div>
- <ul id="podium-labels">
- <li>Sarkozy</li>
- <li>Hollande</li>
- <li>candidat</li>
- <li>politique</li>
- </ul>
+ <div id="podium-container">
+ <div id="podium"></div>
+ <ul id="podium-chiffres">
+ </ul>
+ <ul id="podium-labels">
+ </ul>
+ </div>
+ <div id="btv-tweet">
+ </div>
</div>
</body>
</html>