# HG changeset patch
# User veltr
# Date 1326386218 -3600
# Node ID 0059750178bcb5255c9499bdd742242a3a476065
# Parent  e8973c3fcc9ccf1ec7e725e4e72fb334005e9797
Replaced sparkline by Raphael.js

diff -r e8973c3fcc9c -r 0059750178bc src/ldt/ldt/ldt_utils/templates/front/front_search_results.html
--- a/src/ldt/ldt/ldt_utils/templates/front/front_search_results.html	Thu Jan 12 12:00:06 2012 +0100
+++ b/src/ldt/ldt/ldt_utils/templates/front/front_search_results.html	Thu Jan 12 17:36:58 2012 +0100
@@ -8,7 +8,7 @@
 {% block js_import %}
 {{block.super}}
 <script src="{{LDT_MEDIA_PREFIX}}js/jquery.min.js" type="text/javascript"/></script>
-<script src="{{LDT_MEDIA_PREFIX}}js/jquery.sparkline.min.js" type="text/javascript"/></script>
+<script src="{{LDT_MEDIA_PREFIX}}js/raphael.js" type="text/javascript"/></script>
 {% endblock %}
 
 {% block css_import %}
@@ -21,21 +21,76 @@
 
 
 <script type="text/javascript">
+    var _medias = [ {% for res in results.object_list %}
+        {
+            "iri_id" : '{{ res.content.iri_id }}',
+            "duration" : {{ res.content.duration }},
+            "segments" : [ {% for segment in res.list %}
+                {
+                    "id" : '{{segment.element_id}}',
+                    "begin" : {{segment.begin}},
+                    "duration" : {{segment.duration}},
+                },{% endfor %}
+            ],
+            "stats" : [{{ res.content.stat_annotation }}],
+        },{% endfor %}
+    ];
+    function getRect(_el) {
+        var _sid = _el.id.substr(3);
+        for (var _i = 0; _i < _medias.length; _i++) {
+            for (var _j = 0; _j < _medias[_i].segments.length; _j++) {
+                if (_medias[_i].segments[_j].id == _sid) {
+                    return _medias[_i].segments[_j].rect;
+                }
+            }
+        }
+    }
     $(document).ready(function () {
-    	
-        $('.graph_annotation').sparkline('html', {width: '340px',
-        										  height:'25px',
-        										  minSpotColor: false,
-        										  maxSpotColor: false,
-        										  spotColor: false,
-        										  lineWidth: '0px',
-        										  fillColor: '#adadad',
-        										  lineColor: '#adadad'}); 
-
-        /* Use 'html' instead of an array of values to pass options 
-        to a sparkline with data in the tag */
+        $('.graph_annotation').each(function(_i) {
+            var _values = _medias[_i].stats,
+                _nb = _values.length,
+                _max = _values.reduce(function(_a,_b) {
+                    return Math.max(_a,_b);
+                }, 0),
+                _x = function(_p) {
+                    return _p * 340 / _nb;
+                },
+                _y = function(_p) {
+                    return 25 * ( 1 - _p / _max );
+                },
+                _d = _values.map(function(_v,_k) {
+                    return ( _k == 0 ?
+                        "M" + _x(_k) + " " + _y(_v) :
+                        "C" + _x(_k-.5) + " " + _y(_values[_k - 1])
+                        + " " + + _x(_k-.5) + " " + _y(_v)
+                        + " " + + _x(_k) + " " + _y(_v)
+                        ) ;
+                }).join("") + "L340 25L0 25";
+            this.innerHTML = '';
+            var _paper = new Raphael(this);
+            _paper.path(_d).attr({
+                "fill" : "#adadad",
+                "stroke" : "none"
+            });
+            var _x = function(_p) {
+                return _p * 340 / _medias[_i].duration;
+            };
+            for (var _j = 0; _j < _medias[_i].segments.length; _j++) {
+                var _s = _medias[_i].segments[_j];
+                _s.rect = _paper.rect(_x(_s.begin),0,_x(_s.duration),25).attr({
+                    "fill" : "rgb(244,154,245)",
+                    "opacity" : .3,
+                    "stroke" : "none"
+                });
+            }
+        });
+        $("li.li_segment").mouseover(function() {
+            getRect(this).attr("opacity",.9);
+        }).mouseout(function() {
+            getRect(this).attr("opacity",.3);
+        });
     });
-</script>	
+</script>    
 
 
 {% if msg %}
@@ -76,9 +131,7 @@
                         <p>{{res.content.duration|str_duration:"::"}}</p>
                     </div>
                     <div class="graphe_result_media">
-                    	<span class="graph_annotation">
-                    	{{ res.content.stat_annotation }}
-                    	</span>
+                        <span class="graph_annotation"></span>
                         <!--  <img src="img/placeholder_media_graph.png" width="340" height="25" alt="graph de volume" />-->
                     </div>
                 </div>
@@ -86,7 +139,7 @@
             <!-- Segments du média -->
                 <ul class="floatlist list_segments">
                 {% for segment in res.list %}
-                    <li class="li_segment">
+                    <li class="li_segment" id="li_{{segment.element_id}}">
                         <div class="left_segment">
                             <div class="color_zone" style="background: #f49af5;"></div>
                             <a href="{% url ldt.ldt_utils.views.lignesdetemps.index_segment segment.project_id segment.iri_id segment.ensemble_id segment.decoupage_id segment.element_id %}"><img src="{{LDT_MEDIA_PREFIX}}img/annot_icon_80x45.png" width="80" height="45" /></a>
@@ -96,8 +149,8 @@
                           {% if segment.title %}{{ segment.title }}{% else %}{% trans "No title" %}{% endif %}</a></h4>
                         <p class="text_segment">{% if segment.context %}{{ segment.context }}{% endif %}<br/>{% trans "Begin" %} : {{ segment.begin|str_duration:"::" }} - {% trans "duration" %} : {{ segment.duration|str_duration:"::" }}</h4>
                     </li>
-	                <!--li class="segmentinfos" ><span  class="" title="{% trans 'open ldt' %}"><a class="ldt_link_open_ldt" href="{% url ldt.ldt_utils.views.lignesdetemps.index_segment segment.project_id segment.iri_id segment.ensemble_id segment.decoupage_id segment.element_id %}"-->
-	                </li>
+                    <!--li class="segmentinfos" ><span  class="" title="{% trans 'open ldt' %}"><a class="ldt_link_open_ldt" href="{% url ldt.ldt_utils.views.lignesdetemps.index_segment segment.project_id segment.iri_id segment.ensemble_id segment.decoupage_id segment.element_id %}"-->
+                    </li>
                 {% endfor %}
                 </ul>
             </li>
@@ -108,29 +161,29 @@
         <li id="result_pagination">
             <p>
             {% if results.has_previous %}
-	            <a class="blue under" href="{% url ldt.ldt_utils.views.front.search_listing %}?page={{ results.previous_page_number }}">{% trans "previous" %}</a>
-	            .
-	        {% endif %}
-	        {% if results.paginator.num_pages > 1 %}
-	        <span class="current">
-	            {% for i in results.paginator.num_pages|get_range %}
-	            <span class="current">
-	                {% if i|add:'1' == results.number %}
-	                <span class="pink">{{i|add:'1'}}</span>
-	                {% else %}
-	                <a class="blue under" href="{% url ldt.ldt_utils.views.front.search_listing %}?page={{i|add:'1'}}">{{i|add:'1'}}</a>
-	                {% endif %}
-	                {% if i|add:'1' < results.paginator.num_pages and 1 < results.paginator.num_pages %}
-	                .
+                <a class="blue under" href="{% url ldt.ldt_utils.views.front.search_listing %}?page={{ results.previous_page_number }}">{% trans "previous" %}</a>
+                .
+            {% endif %}
+            {% if results.paginator.num_pages > 1 %}
+            <span class="current">
+                {% for i in results.paginator.num_pages|get_range %}
+                <span class="current">
+                    {% if i|add:'1' == results.number %}
+                    <span class="pink">{{i|add:'1'}}</span>
+                    {% else %}
+                    <a class="blue under" href="{% url ldt.ldt_utils.views.front.search_listing %}?page={{i|add:'1'}}">{{i|add:'1'}}</a>
                     {% endif %}
-	            </span>
-	            {% endfor %}
-	        </span>
-	        {% endif %}
-	        {% if results.has_next %}
-	            .
-	            <a class="blue under" href="{% url ldt.ldt_utils.views.front.search_listing %}?page={{ results.next_page_number }}">{% trans "next" %}</a>
-	        {% endif %}
+                    {% if i|add:'1' < results.paginator.num_pages and 1 < results.paginator.num_pages %}
+                    .
+                    {% endif %}
+                </span>
+                {% endfor %}
+            </span>
+            {% endif %}
+            {% if results.has_next %}
+                .
+                <a class="blue under" href="{% url ldt.ldt_utils.views.front.search_listing %}?page={{ results.next_page_number }}">{% trans "next" %}</a>
+            {% endif %}
             </p>
         </li>
       <!-- Fin Pagination -->