--- 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 -->