Ajout du preview des resultats de recherche
authorveltr
Wed, 25 Jan 2012 19:20:55 +0100
changeset 454 958e8d29293c
parent 453 a6ea89e72f41
child 455 1bec286c88aa
child 458 5d35581192cb
child 461 7f189d7b9d5a
Ajout du preview des resultats de recherche
src/ldt/ldt/ldt_utils/templates/front/front_search_results.html
src/ldt/ldt/static/ldt/css/front_search.css
src/ldt/ldt/static/ldt/js/Ldt_front_search_results.js
--- a/src/ldt/ldt/ldt_utils/templates/front/front_search_results.html	Wed Jan 25 17:59:42 2012 +0100
+++ b/src/ldt/ldt/ldt_utils/templates/front/front_search_results.html	Wed Jan 25 19:20:55 2012 +0100
@@ -28,7 +28,6 @@
                     "id" : '{{segment.element_id}}',
                     "begin" : {{segment.start_ts}},
                     "duration" : {{segment.duration}},
-                    "cutting_id" : '{{segment.cutting_id}}',
                 },{% endfor %}
             ],
             "stats" : [{{ res.content.stat_annotation }}],
@@ -36,7 +35,6 @@
     ];
     
     var global_csrf_token = "{{ csrf_token }}";
-
     
 </script>
 <script src="{{LDT_MEDIA_PREFIX}}js/Ldt_front_search_results.js" type="text/javascript"></script>
@@ -95,7 +93,15 @@
                         </div>
                         <h4 class="title_segment"><a class="blue under" href="{% url ldt.ldt_utils.views.front.annot_content segment.iri_id segment.project_id segment.cutting_id %}#id={{segment.element_id}}" title="{% trans 'view this annotation in the player' %}">
                           {% 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.start_ts|str_duration:"::" }} - {% trans "duration" %} : {{ segment.duration|str_duration:"::" }}</h4>
+                        <p class="text_segment">{% if segment.context %}{{ segment.context }}{% endif %}<br/>{% trans "Begin" %} : {{ segment.start_ts|str_duration:"::" }} - {% trans "duration" %} : {{ segment.duration|str_duration:"::" }}</p>
+                        <div class="hidden_preview">
+                            {% thumbnail res.content.image "300x200" format="PNG" crop="center" as im %}<img src="{{ im.url }}" class="img_media" width="{{ im.width }}" height="{{ im.height }}" %}">{% endthumbnail %}
+                            <h4><a class="pink under b" href="{% url ldt.ldt_utils.views.front.annot_content segment.iri_id segment.project_id segment.cutting_id %}#id={{segment.element_id}}" title="{% trans 'view this annotation in the player' %}">
+                            {% if segment.title %}{{ segment.title }}{% else %}{% trans "No title" %}{% endif %}</a></h4>
+                            <p class="bigmargin">{{ segment.abstract }}</p>
+                            <h5>Tags:</h5>
+                            <p class="result_taglist b fl">{{ segment.tags }}</p>
+                        </div>
                     </li>
                 {% endfor %}
                 </ul>
@@ -138,8 +144,7 @@
 <!-- Right column -->
 <!-- APERÇU DU RÉSULTAT -->
     <td id="result_preview">
-        <h4>ICI PREVIEW ?</h4>
-        <p class="bigmargin">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem …</p>
+        
     </td>
   </tr>
 </table>
--- a/src/ldt/ldt/static/ldt/css/front_search.css	Wed Jan 25 17:59:42 2012 +0100
+++ b/src/ldt/ldt/static/ldt/css/front_search.css	Wed Jan 25 19:20:55 2012 +0100
@@ -33,7 +33,7 @@
 }
 
 #resultats_options {
-    font-family: "DIN-Light", Helvetica, Arial, sans-serif; float: right; padding: 0 20px; margin: 4px 0; font-size: 19px; background:url(./imgs/fl_bas.png) right 80% no-repeat; color: #0068c4;
+    float: right; padding: 0 20px; margin: 4px 0; font-size: 19px; background:url(./imgs/fl_bas.png) right 80% no-repeat; color: #0068c4;
 }
 
 /* TITRE DU MÉDIA */
@@ -51,7 +51,7 @@
 }
 
 .h3_result_media h3 {
-    font-family: "DIN-Bold", Helvetica, Arial, sans-serif; font-weight: 800; margin: 2px 0 0 2px;
+    font-weight: 800; margin: 2px 0 0 2px;
 }
 
 div.duree_result_media {
@@ -108,6 +108,10 @@
     width: 630px; margin: 0 0 10px; padding: 0 0 5px; text-align: right; border-bottom: 1px solid #d0d0d0;
 }
 
+.hidden_preview {
+    display: none;
+}
+
 /* PAGINATION DES RESULTATS */
 
 #result_pagination {
@@ -117,7 +121,8 @@
 /* APERÇU À DROITE */
 
 #result_preview {
-    width: 300px; height: 100%; border-right: 1px solid #484848; background: #fbfafa; vertical-align: top; padding: 38px 9px 0 10px;
+    width: 300px; height: 100%; border-right: 1px solid #484848; background: #fbfafa;
+    vertical-align: top; padding: 38px 9px 0 10px; display: none;
 }
 
 #preview_metadataplayer {
--- a/src/ldt/ldt/static/ldt/js/Ldt_front_search_results.js	Wed Jan 25 17:59:42 2012 +0100
+++ b/src/ldt/ldt/static/ldt/js/Ldt_front_search_results.js	Wed Jan 25 19:20:55 2012 +0100
@@ -59,10 +59,20 @@
             $("#re_" + _id).attr({
             	"opacity" : ".9",
             });
+            $("li.li_segment").removeClass("selected");
             $("#li_" + _id).addClass("selected");
+            $("#result_preview").show().html($("#li_" + _id + " div.hidden_preview").html());
+            $("#result_preview .result_taglist")
+                .html(
+                    $("#result_preview .result_taglist").html()
+                        .split(";")
+                        .map(function(t) { return t.replace(/(^[\s]+|[\s]+$)/g,"") })
+                        .filter(function(t) { return t.length; })
+                        .map(function(t) { return '<span class="under pink">' + t + '</span>'; })
+                        .join(', ')
+                    )
         }).mouseout(function() {
             var _id = this.id.substr(3);
-            $("#li_" + _id).removeClass("selected");
             $("#li_" + _id + " .color_zone").css({
             	"opacity" : ".5",
             });
@@ -71,20 +81,5 @@
             }).css({
                 "opacity" : ".5",
             });
-        }).click(function() {
-        	var url = annot_preview_url.replace('__CONTENT_IRI_ID__', "ctt_iri_id");
-        	url = url.replace('__PROJECT_ID__', "project_id");
-        	url = url.replace('__CUTTING_ID__', "cutting_id");
-        	url = url.replace('__ANNOT_ID__', "annot_id");
-        	$.ajax({
-                url: url,
-                type: 'GET',
-                data: {csrfmiddlewaretoken:global_csrf_token},
-                // bug with jquery >= 1.5, "json" adds a callback so we don't specify dataType
-                //dataType: 'json',
-                success: function(data, status, request) {
-                	$("#result_preview").html(data);
-                }
-            });
         });
     });
\ No newline at end of file