Merge with facc7cc5c7f0457ee36d5d71b3fc93e363348032
authorRaphael Velt <raph.velt@gmail.com>
Wed, 14 Dec 2011 18:23:08 +0100
changeset 412 97c082990f8d
parent 408 4141c5821c98 (diff)
parent 410 bf5cf5a9e737 (current diff)
child 413 972af2c4af80
child 414 e2c1a2386124
Merge with facc7cc5c7f0457ee36d5d71b3fc93e363348032
web/res/css/tweetcast.css
web/res/js-tweetcast/live-polemic.js
--- a/web/client.php	Wed Dec 14 12:46:53 2011 +0100
+++ b/web/client.php	Wed Dec 14 18:23:08 2011 +0100
@@ -48,7 +48,7 @@
   <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     <title>Live Video and Annotation</title>
-    <meta http-equiv="X-UA-Compatible" content="IE=8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=9" />
 
     <!-- FONT -->
     <link href='<?php echo(registry_url('PT-Sans_Narrow','font'))?>' rel='stylesheet' type='text/css'>
@@ -71,11 +71,17 @@
 
     <script type="text/javascript">
     l10n = { "rechercher" : "<?php echo $translate->_('Rechercher'); ?>" }
+    
+    function add_grammar(value) {
+        var _st = $('#status'),
+            _val = _st.val();
+        _st.val( _val + ( _val[_val.length - 1] == " " ? "" : " " ) + value ).change();
+    }
+    
     $(document).ready(function() {
         
         $("#accordeon li.acctitre").click(function() {
-            $("#accordeon li.acctexte").slideUp();
-            $(this).next().dequeue().slideDown();
+            $("#accordeon li.acctexte").slideToggle();
         })
 
             //$("txt").hide();
@@ -85,12 +91,6 @@
             $("#IDENTIFIER").click(function() {
                 document.location.href="<?php echo(URL_ROOT.$rep); ?>/client.php?CONNECT=true";
             });
-
-
-            function add_grammar(value) {
-                $('#status').val($('#status').val()+value+" ");
-                $('#status').change();
-            }
             
             // BUTTONS
             $(".tweetButton").click(function() {
@@ -173,6 +173,7 @@
             <div id="colgauche">
                 <div class="barre">
                     <img id="headlogo" src="<?php echo($head_logo); ?>" width="171" height="63" />
+                    <div id="minilogo"></div>
                     <ul class="menu">
                         <li>
                             <a href="<?php echo(URL_ROOT); ?>" class="menuLink">
@@ -306,9 +307,24 @@
                         <p><?php echo($translate->_('config__description')); ?></p>
                     </li>
                     <li class="acctitre">
-                        <h3><?php echo $translate->_('Tagcloud'); ?></h3>
+                        <h3><?php echo($translate->_('keywords')); ?></h3>
                     </li>
-                    <li class="acctexte hidden" id="motscles"></li>
+                    <li class="acctexte hidden">
+                        <div class="accsubtitle">
+                            <div class="aroundsubtitle">
+                                <h4><?php echo($translate->_('suggested')); ?></h4>
+                            </div>
+                        </div>
+                        <div class="tagcloud" id="suggkw"></div>
+                    </li>
+                    <li class="acctexte hidden">
+                        <div class="accsubtitle">
+                            <div class="aroundsubtitle">
+                                <h4><?php echo($translate->_('contextual')); ?></h4>
+                            </div>
+                        </div>
+                        <div class="tagcloud" id="motscles"></div>
+                    </li>
                 </ul>
             </div>
             <div class="footer">
@@ -326,5 +342,9 @@
             <div id="hovercontent"></div>
             <div id="hoverarrow"></div>
         </div>
+        <ul id="hoverkw">
+            <li><a id="hkwsearch" href="#"><?php echo $translate->_('Rechercher'); ?></a></li>
+            <li><a id="hkwtweet" href="#"><?php echo $translate->_('addToTweet'); ?></a></li>
+        </ul>
   </body>
 </html>
\ No newline at end of file
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/web/config.js.tmpl	Wed Dec 14 18:23:08 2011 +0100
@@ -0,0 +1,65 @@
+var tracking_keywords = [ "#rsln" ],
+    suggested_keywords = [
+        "confiance",
+        "croyance",
+        "crédit",
+        "trace",
+        "foi",
+        "risque", 
+        "assurance", 
+        "démocratie", 
+        "expertise",
+        "catastrophe",
+        "transparence", 
+        "politique"
+    ],
+    annotations = {
+        "default" : {
+            "colors" : {
+                "tweet" : "#ffffff",
+                "timeline" : "#585858",
+                "h" : 0,
+                "s" : 0
+            }
+        },
+        "positive" : {
+            "display_name" : "++",
+            "keywords" : [ /\+\+/ ],
+            "colors" : {
+                "tweet" : "#c5e7cd",
+                "timeline" : "#1D973D",
+                "h" : .3,
+                "s" : .65
+            }
+        },
+        "negative" : {
+            "display_name" : "--",
+            "keywords" : [ /\-\-/ ],
+            "colors" : {
+                "tweet" : "#f6ced0",
+                "timeline" : "#CE0A15",
+                "h" : 0,
+                "s" : .8
+            }
+        },
+        "reference" : {
+            "display_name" : "==",
+            "keywords" : [ /\=\=/ ],
+            "colors" : {
+                "tweet" : "#ecedc1",
+                "timeline" : "#C5A62D",
+                "h" : .16,
+                "s" : .8
+            }
+        },
+        "question" : {
+            "display_name" : "??",
+            "keywords" : [ /\?\?/ ],
+            "colors" : {
+                "tweet" : "#bfdbec",
+                "timeline" : "#036AAE",
+                "h" : .6,
+                "s" : .8
+            }
+        }
+    }
Binary file web/res/css/twcx-img/bgdWriter.png has changed
Binary file web/res/css/twcx-img/bgdWriterDisconnect.png has changed
Binary file web/res/css/twcx-img/lefttt.png has changed
--- a/web/res/css/tweetcast.css	Wed Dec 14 12:46:53 2011 +0100
+++ b/web/res/css/tweetcast.css	Wed Dec 14 18:23:08 2011 +0100
@@ -60,7 +60,7 @@
 }
 
 #container {
-    width: 960px; margin: 0 auto;
+    position: relative; width: 960px; margin: 0 auto;
 }
 
 #colgauche {
@@ -86,6 +86,12 @@
     float: left; margin-right: 10px;
 }
 
+#minilogo {
+  background: url("../../images/pol_color.gif") left top no-repeat;
+  width: 46px; height: 5px; left: 99px; top: 55px;
+  position: absolute; z-index: 9;
+}
+
 .menu {
     border-left: 1px solid #C3C3C3;
     float: left;
@@ -118,28 +124,28 @@
     width: 430px; padding: 10px; background: #efefef;
 }
 .loginbutton{
-    margin: 10px auto; height: 60px; width: 330px; padding:5px;
-    background: url(../../images/tweetWriterBgdUnconnect.gif) no-repeat;
-    border: none; color:#fff;
+    margin: 10px 0; height: 45px; width: 420px; padding:5px;
+    background: url(twcx-img/bgdWriterDisconnect.png) no-repeat;
+    border: none; color:#fff; font-size: 12px;
 }
 .loginlink{
     text-decoration:none;
     color:#fff;
 }
 textarea {
-    display: block; margin: 10px auto; height: 60px; width: 330px; padding:5px;
-    background: url(../../images/tweetWriterBgdTxtArea.gif) no-repeat;
-    border: none; resize: none;
+    display: block; margin: 10px 0; height: 45px; width: 420px; padding:5px;
+    background: url(twcx-img/bgdWriter.png) no-repeat;
+    border: none; resize: none; font-size: 14px; font-family: 'PT Sans', Helvetica, Arial, sans-serif;
 }
 
 a#sendTweet {
     background: transparent url('../../images/bg_button_a_w.png') no-repeat top right;
     color: #444; display: block; font-size: 12px; height: 24px; line-height: 14px;
-    float:right; margin: 0 45px 0 50px; padding: 0 18px 0 0; text-decoration: none;
+    float:right; margin-left: 50px; padding: 0 18px 0 0; text-decoration: none;
 }
 a#sendTweet span {
     background: transparent url('../../images/bg_button_span_w.png') no-repeat; display: block; height: 14px;
-    padding: 5px 0 5px 18px;
+    padding: 5px 6px 5px 24px;
 }
 a#sendTweet:hover, a#sendTweet:active {
     background-position: right -24px;
@@ -148,7 +154,7 @@
     background-position: 0 -24px;
 }
 a.tweetButton { 
-    float:right; margin: 2px 5px 0 0; width:32px; height:20px; text-decoration: none; font: normal 12px;
+    float:right; margin: 2px 10px 0 0; width:32px; height:20px; text-decoration: none; font: normal 12px;
     color: #444; text-align:center; cursor: pointer; cursor: hand;
 }
 
@@ -166,7 +172,7 @@
 }
 
 #tweetCounter{
-    float: left; background: transparent; border: none;font-weight:bold; margin: 2px 0 0 42px; padding: 0;
+    float: left; background: transparent; border: none;font-weight:bold; margin-top: 2px; padding: 0;
 }
 .tweetCounterNegative{
     color:red;
@@ -398,7 +404,7 @@
 }
 
 #accordeon h3 {
-    font-size: 16px; font-weight: bold; color: #666;
+    font-size: 16px; font-weight: bold; color: #555555;
 }
 
 #accordeon p {
@@ -406,7 +412,27 @@
 }
 
 #accordeon li {
-    float: left; width: 480px; margin: 0 1px 1px 1px; padding: 4px; border: 1px solid #ffffff;
+    float: left; width: 480px; margin: 0 1px 1px 1px; padding: 4px; border: 1px solid #ffffff; position: relative;
+}
+
+#accordeon span {
+    padding: 2px; cursor: pointer; cursor: hand;
+}
+
+div.accsubtitle {
+    position: absolute; top: 0; left: 0; width: 20px; height: 100%; background: #e0e0e0; border-right: 1px solid #999999; overflow: hidden;
+}
+
+div.aroundsubtitle {
+    position: absolute; top: 50%; left: 0; width: 0; height: 0; -moz-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg);
+}
+
+.aroundsubtitle h4 {
+    position: absolute; top: 0; left: -75px; width: 150px; height: 20px; font-size: 13px; font-weight: bold; text-align: center; color: #555555;
+}
+
+div.tagcloud {
+    width: 460px; text-align: center; margin-left: 20px;
 }
 
 li.acctitre {
@@ -419,12 +445,18 @@
 
 /* Tag Cloud */
 
-#motscles {
-    text-align: center;
+#hoverkw {
+    list-style: none; position: absolute; width: 86px; height: 39px; font-size: 14px; line-height: 19px;
+    background: url(twcx-img/lefttt.png); padding: 5px 13px 5px 5px; text-align: center; display: none;
+    margin-left: -104px; margin-top: -24px;
 }
 
-#motscles span {
-    padding: 2px; cursor: pointer; cursor: hand;
+#hoverkw a {
+    text-decoration: none; color: #222222;
+}
+
+#hoverkw a:hover {
+    color: #0099FF; text-decoration: underline;
 }
 
 /* Footer */
--- a/web/res/js-tweetcast/live-polemic.js	Wed Dec 14 12:46:53 2011 +0100
+++ b/web/res/js-tweetcast/live-polemic.js	Wed Dec 14 18:23:08 2011 +0100
@@ -467,6 +467,63 @@
     return res;
 }
 
+function mouseoverkw() {
+    var _jel = $(this),
+        _off = _jel.offset();
+    _jel.css({
+        color: "#0099ff"
+    });
+    $("#hoverkw")
+        .css({
+            "left" : _off.left + "px",
+            "top" : ( parseInt(_off.top) + ~~ (_jel.height() / 2) )  + "px",
+            "display" : "block"
+        })
+        .attr("kw", _jel.text());
+}
+
+function mouseoutkw() {
+    $("#hoverkw").hide();
+    $(this).css({
+        color: "#000000"
+    });
+}
+
+function makeTagCloud(tab, div) {
+    var minfreq = _(tab).min( function(a) { return a.freq} ).freq,
+        maxfreq = Math.max(minfreq + .1, _(tab).max( function(a) { return a.freq} ).freq),
+        echfreq = 8 / Math.sqrt( maxfreq - minfreq ),
+        html = '';
+    _(tab).each(function(_j) {
+        var maxann = 0,
+            ann = "default";
+        for (var k in _j.annotations) {
+            if (_j.annotations[k] == maxann) {
+                ann = "default";
+            }
+            if (_j.annotations[k] > maxann) {
+                ann = k;
+                maxann = _j.annotations[k];
+            }
+        }
+        if (ann == "default") {
+            var coul = '';
+        } else {
+            var c = getColor(ann, .6),
+                coul = "background: rgba(" + [ Math.floor(c.r), Math.floor(c.g), Math.floor(c.b), ( _j.annotations[ann] / _j.freq )].join(',') + ")";
+        }
+        var fontsize = Math.floor( ( 12 + Math.sqrt( _j.freq - minfreq ) * echfreq ) );
+        html += '<span style="line-height: ' + (8 + fontsize) + 'px; font-size: ' + fontsize + 'px;' + coul + '">' + _j.word + '</span> ';
+    });
+    $(div).html(html);
+    $(div + " span")
+        .mouseover(mouseoverkw)
+        .mouseout(mouseoutkw)
+        .click(function() {
+            $("#hoverkw").toggle();
+        });
+}
+
 function updateDisplay() {
     if (!twCx.tweets) {
         return;
@@ -498,7 +555,19 @@
             p = (twCx.followLast ? twCx.idIndex.length - 1 : 0);
         }
     }
-
+    
+    
+    if (suggested_keywords && suggested_keywords.length) {
+        var _skw = suggested_keywords.map(function(_e) {
+            return {
+                "word" : _e,
+                "rgxp" : new RegExp(_e, "im"),
+                "freq" : 0,
+                "annotations" : {}
+            }
+        })
+    }
+    
     var l = tweets.length,
         lines = 0,
         ppy = 0,
@@ -507,9 +576,24 @@
         localWords = {};
     
     function pushTweet(tp, className) {
+        
         if (tp < l && tp >= 0) {
-            html += tweetToHtml(tweets[tp], className)
+            
+            if (_skw) {
+                _(_skw).each(function(_k) {
+                    if (tweets[tp].text.search(_k.rgxp) != -1) {
+                        _k.freq++;
+                        _(tweets[tp].annotations).each(function(_a) {
+                            _k.annotations[_a] = 1 + ( _k.annotations[_a] || 0 )
+                        })
+                    }
+                });
+            }
+            
+            html += tweetToHtml(tweets[tp], className);
+            
             tweetsOnDisplay.push(tp);
+            
             for (var i in tweets[tp].words) {
                 var w = tweets[tp].words[i];
                 if (localWords[w]) {
@@ -582,6 +666,9 @@
             tlBuffer = html;
         }
         
+        if (_skw) {
+            makeTagCloud(_skw, "#suggkw");
+        }
         /* Recherche des mots pertinents correspondant à la sélection */
         
         var tab = _(localWords).map(function(v, k) {
@@ -598,32 +685,7 @@
         if (tab.length) {
             
             tab = _(tab).sortBy( function(a) { return ( - a.score ) }).slice(0,20);
-            var minfreq = _(tab).min( function(a) { return a.freq} ).freq,
-                maxfreq = Math.max(minfreq + .1, _(tab).max( function(a) { return a.freq} ).freq),
-                echfreq = 8 / Math.sqrt( maxfreq - minfreq ),
-                html = '';
-            for (var j in tab) {
-                var maxann = 0,
-                    ann = "default";
-                for (var k in tab[j].annotations) {
-                    if (tab[j].annotations[k] == maxann) {
-                        ann = "default";
-                    }
-                    if (tab[j].annotations[k] > maxann) {
-                        ann = k;
-                        maxann = tab[j].annotations[k];
-                    }
-                }
-                if (ann == "default") {
-                    var coul = '';
-                } else {
-                    var c = getColor(ann, .6),
-                        coul = "background: rgba(" + [ Math.floor(c.r), Math.floor(c.g), Math.floor(c.b), ( tab[j].annotations[ann] / tab[j].freq )].join(',') + ")";
-                }
-                var fontsize = Math.floor( ( 12 + Math.sqrt( tab[j].freq - minfreq ) * echfreq ) );
-                html += '<span style="line-height: ' + (8 + fontsize) + 'px; font-size: ' + fontsize + 'px;' + coul + '" onclick="filtrerTexte(\'' + tab[j].word.replace(/('|")/g, '\\$1') + '\')">' + tab[j].word + '</span> ';
-            }
-            $("#motscles").html(html);
+            makeTagCloud(tab,"#motscles");
         } else {
             $("#motscles").html('');
         }
@@ -753,14 +815,14 @@
 function filtrerAnnotation(annotation) {
     if (annotations[annotation]) {
         effectuerFiltrage(annotations[annotation].display_name,
-            new RegExp( "(" + annotations[annotation].keywords.map(function(a) { return a.source }).join("|") + ")", "gi" ) );
+            new RegExp( "(" + annotations[annotation].keywords.map(function(a) { return a.source }).join("|") + ")", "gim" ) );
     } else {
         effectuerFiltrage('', null)
     }
 }
 
 function filtrerTexte(valeur) {
-    effectuerFiltrage( valeur, valeur ? new RegExp("(" + valeur.replace(/(\W)/g, '\\$1') + ")" ,'gi') : null );
+    effectuerFiltrage( valeur, valeur ? new RegExp("(" + valeur.replace(/(\W)/g, '\\$1') + ")" ,'gim') : null );
 }
 
 function effectuerFiltrage(filtreTexte, tabRegexp) {
@@ -904,15 +966,13 @@
     $("#timeline").mousemove(function(evt) {
         twCx.tlMouseMoved = true;
         clicTl(evt);
-    });
-    $("#timeline").mousedown(function(evt) {
+    }).mousedown(function(evt) {
         twCx.tlMouseClicked = true;
         twCx.tlMouseMoved = false;
         var o = $(this).offset();
         twCx.refMouse = { x : evt.pageX - o.left, y : evt.pageY - o.top };
         twCx.refPosTl = tlPosTweet(tweetById(twCx.position)) || twCx.refMouse;
-    });
-    $("#timeline").mouseup(function(evt) {
+    }).mouseup(function(evt) {
         clicTl(evt);
         twCx.tlMouseClicked = false;
         twCx.tlMouseMoved = false;
@@ -924,8 +984,7 @@
             $(this).val("");
         }
         $(this).attr("class","");
-    });
-    $("#inp_q").focusout(function() {
+    }).focusout(function() {
         focusOutRecherche();
     });
     $("#inp_reset").click(function() {
@@ -946,6 +1005,24 @@
         }
         return false;
     });
+    $("#hoverkw").mouseover(function() {
+        $(this).dequeue().show();
+    }).mouseout(function() {
+        $(this).hide();
+    });
+    
+    $("#hkwsearch").click(function() {
+        var _hkw = $("#hoverkw");
+        filtrerTexte(_hkw.attr("kw"));
+        _hkw.hide();
+        return false;
+    });
+    $("#hkwtweet").click(function() {
+        var _hkw = $("#hoverkw");
+        add_grammar(_hkw.attr("kw"));
+        _hkw.hide();
+        return false;
+    });
     
     setInterval(function() {
         var sc = $("#scrollcont");
--- a/web/traduction.php	Wed Dec 14 12:46:53 2011 +0100
+++ b/web/traduction.php	Wed Dec 14 18:23:08 2011 +0100
@@ -146,13 +146,15 @@
 				// Polemic Tweet Tweetcast (rv)
 				
 				"Rechercher" => "Rechercher",
-				"Tagcloud" => "Nuage de mots-clés contextuel",
 				"SearchByPolemic" => "Rechercher par polémique",
 				"Agree" => "accord",
 				"Disagree" => "désaccord",
 				"Question" => "question",
-				"Reference" => "référence"
-				
+				"Reference" => "référence",
+                "addToTweet" => "Tweeter",
+                "keywords" => "Mots-clés",
+                "suggested" => "Suggérés",
+                "contextual" => "Contextuels"
 				);
                               
 $english = array(
@@ -286,12 +288,15 @@
                 // Polemic Tweet Tweetcast (rv)
                 
                 "Rechercher" => "Search",
-                "Tagcloud" => "Contextual keyword cloud",
                 "SearchByPolemic" => "Search by polemic",
                 "Agree" => "agree",
                 "Disagree" => "disagree",
                 "Question" => "question",
-                "Reference" => "reference"
+                "Reference" => "reference",
+                "addToTweet" => "Tweet it",
+                "keywords" => "Keywords",
+                "suggested" => "Suggested",
+                "contextual" => "Contextual"
 				);
                 
 $japan = array(
@@ -417,11 +422,14 @@
                 // Polemic Tweet Tweetcast (rv)
                 
                 "Rechercher" => "Search",
-                "Tagcloud" => "Contextual keyword cloud",
                 "SearchByPolemic" => "Search by polemic",
                 "Agree" => "agree",
                 "Disagree" => "disagree",
                 "Question" => "question",
-                "Reference" => "reference"
+                "Reference" => "reference",
+                "addToTweet" => "Tweet it",
+                "keywords" => "Keywords",
+                "suggested" => "Suggested",
+                "contextual" => "Contextual"
 );
 ?>
\ No newline at end of file