modal image view, add project from project library
authorcavaliet
Tue, 04 Jun 2013 12:38:08 +0200
changeset 73 cf9ff1447944
parent 72 132e14ee5173
child 75 c6d543b0f0b6
modal image view, add project from project library
src/metadatacomposer/static/metadatacomposer/js/common.js
src/metadatacomposer/static/metadatacomposer/js/edition.js
src/metadatacomposer/templates/metadatacomposer_edit.html
src/metadatacomposer/templates/metadatacomposer_home.html
src/metadatacomposer/templates/metadatacomposer_modal_image.html
src/metadatacomposer/templates/metadatacomposer_project_list.html
src/metadatacomposer/templates/partial/resource_image_list.html
src/metadatacomposer/views.py
--- a/src/metadatacomposer/static/metadatacomposer/js/common.js	Mon Jun 03 18:05:01 2013 +0200
+++ b/src/metadatacomposer/static/metadatacomposer/js/common.js	Tue Jun 04 12:38:08 2013 +0200
@@ -40,10 +40,6 @@
         if($(this).hasClass('btn-cancel')){
             $(this).parents('.popup').modal('hide');
         }
-        if($(this).hasClass('btn-previsualisation')){
-            var imgPrev = $('<img src="img/520x520.gif" alt="" />');
-            $('.previsualisation').empty().append(imgPrev);
-        }
     });
 
 //confirmation suppression
--- a/src/metadatacomposer/static/metadatacomposer/js/edition.js	Mon Jun 03 18:05:01 2013 +0200
+++ b/src/metadatacomposer/static/metadatacomposer/js/edition.js	Tue Jun 04 12:38:08 2013 +0200
@@ -79,10 +79,10 @@
             url_transform: function(src) {
                 return [{
                     type: "video/mp4",
-                    src: src.replace(/\.[\d\w]+$/,'.mp4')
+                    src: src.replace(/\.[\d\w]+$/,'.mp4').replace('rtmp://media.iri.centrepompidou.fr/ddc_player', 'http://media.iri.centrepompidou.fr')
                 }, {
                     type: "video/webm",
-                    src: src.replace(/\.[\d\w]+$/,'.webm')
+                    src: src.replace(/\.[\d\w]+$/,'.webm').replace('rtmp://media.iri.centrepompidou.fr/ddc_player', 'http://media.iri.centrepompidou.fr')
                 }];
             }
         }
--- a/src/metadatacomposer/templates/metadatacomposer_edit.html	Mon Jun 03 18:05:01 2013 +0200
+++ b/src/metadatacomposer/templates/metadatacomposer_edit.html	Tue Jun 04 12:38:08 2013 +0200
@@ -50,7 +50,7 @@
 
                     </div>
                     <div class="span5 text-right project-action">
-                        <a href="{% url 'composer_preview_player' branding=branding ldt_id=ldt_id %}" class="btn"><i class="icon-eye-open"></i> Voir aperçu</a>
+                        <a href="{% url 'composer_preview_player' branding=branding ldt_id=ldt_id %}" class="btn" style="pointer-events:none; cursor:default;"><i class="icon-eye-open"></i> Voir aperçu</a>
                         <a href="#" class="btn btn-success"><i class="icon-save"></i> Sauvegarder le projet</a>
                     </div>
                 </div>
@@ -341,7 +341,7 @@
                                 </div>
                                 <div class="row annotation-video-content">
                                     <div class="span6">
-                                        <img src="img/460x345.gif" alt="">
+                                        <img src="{% static 'metadatacomposer/img/460x345.gif' %}" alt="">
                                         <table class="table">
                                             <tbody>
                                                 <tr>
@@ -427,7 +427,7 @@
                                             </thead>
                                             <tbody id="diaporama-id1" class="list-image-diaporama ui-sortable">
                                                 <tr id="rid-id1" class="row-image-diaporama">
-                                                    <td><img src="img/60x60.gif" alt=""> </td>
+                                                    <td><img src="{% static 'metadatacomposer/img/60x60.gif' %}" alt=""> </td>
                                                     <td>Titre annotation 1</td>
                                                     <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis aliquid non placeat consequuntur fugit minima.</td>
                                                     <td>
@@ -444,7 +444,7 @@
                                                     </td>
                                                 </tr>
                                                 <tr id="rid-id2" class="row-image-diaporama">
-                                                    <td><img src="img/60x60.gif" alt=""> </td>
+                                                    <td><img src="{% static 'metadatacomposer/img/60x60.gif' %}" alt=""> </td>
                                                     <td>Titre annotation 2</td>
                                                     <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis aliquid non placeat consequuntur fugit minima.</td>
                                                     <td>
@@ -461,7 +461,7 @@
                                                     </td>
                                                 </tr>
                                                 <tr id="rid-id3" class="row-image-diaporama">
-                                                    <td><img src="img/60x60.gif" alt=""> </td>
+                                                    <td><img src="{% static 'metadatacomposer/img/60x60.gif' %}" alt=""> </td>
                                                     <td>Titre annotation 3</td>
                                                     <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis aliquid non placeat consequuntur fugit minima.</td>
                                                     <td>
--- a/src/metadatacomposer/templates/metadatacomposer_home.html	Mon Jun 03 18:05:01 2013 +0200
+++ b/src/metadatacomposer/templates/metadatacomposer_home.html	Tue Jun 04 12:38:08 2013 +0200
@@ -57,7 +57,7 @@
                 <div class="row">
                   {% for p in projects %}
                     <div class="span2">
-                        <a href="#">{% thumbnail p.image "140x140" crop="center" format="PNG" as im %}<img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" />{% empty %}<img src="{% static 'metadatacomposer/img/140x140.gif' %}" width="140px" height="140px" />{% endthumbnail %}
+                        <a href="{% url 'composer_edit' branding=branding ldt_id=p.ldt_id %}">{% thumbnail p.image "140x140" crop="center" format="PNG" as im %}<img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" />{% empty %}<img src="{% static 'metadatacomposer/img/140x140.gif' %}" width="140px" height="140px" />{% endthumbnail %}
                         <h4>{{ p.title }}</h4></a>
                     </div>
                   {% endfor %}
@@ -75,9 +75,21 @@
                 <div class="row">
                   {% for i in images %}
                     <div class="span2">
-                        <a href="">{% thumbnail i.image_file "140x140" crop="center" format="PNG" as im %}<img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" />{% empty %}<img src="{% static 'metadatacomposer/img/140x140.gif' %}" width="140px" height="140px" />{% endthumbnail %}
+                        <a href="#image{{ i.pk }}" role="button" data-toggle="modal">{% thumbnail i.image_file "140x140" crop="center" format="PNG" as im %}<img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" />{% empty %}<img src="{% static 'metadatacomposer/img/140x140.gif' %}" width="140px" height="140px" />{% endthumbnail %}
                         <h4>{{ i.title }}</h4></a>
                     </div>
+                    <div id="image{{ i.pk }}" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="image{{ i.pk }}label" aria-hidden="true">
+					   <div class="modal-header">
+					       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
+					       <h3 id="image{{ i.pk }}label">{{ i.title }}</h3>
+					   </div>
+					   <div class="modal-body" style="max-height: 500px;">
+					       <img src="{% url 'composer_image' branding=branding image_pk=i.pk %}?maxwidth=530&maxheight=500" />
+					   </div>
+					   <div class="modal-footer">
+					       <button class="btn" data-dismiss="modal" aria-hidden="true">Fermer</button>
+					   </div>
+					</div>
                   {% endfor %}
                 </div>
             </article>
--- a/src/metadatacomposer/templates/metadatacomposer_modal_image.html	Mon Jun 03 18:05:01 2013 +0200
+++ b/src/metadatacomposer/templates/metadatacomposer_modal_image.html	Tue Jun 04 12:38:08 2013 +0200
@@ -46,7 +46,7 @@
             <label class="control-label" for="media-url-link">Fichier de l'image :<br/>(jpg, png)</label>
             <div class="controls">
                 <input type="file" name="image_file" id="id_image_file" accept="image/jpeg, image/png"/>
-                <a href="#" class="btn btn-previsualisation" class="btn"><i class="icon-eye-open"></i> Prévisualiser</a>
+                <!--a href="#" class="btn btn-previsualisation" class="btn"><i class="icon-eye-open"></i> Prévisualiser</a-->
                 {% if form.image_file.value %}
                 <p>Image actuelle :</p>
                 {% thumbnail form.image_file.value "100" crop="center" format="PNG" as im %}<img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" />{% empty %}<img src="{% static 'metadatacomposer/img/60x60.gif' %}" width="60px" height="60px" />{% endthumbnail %}
--- a/src/metadatacomposer/templates/metadatacomposer_project_list.html	Mon Jun 03 18:05:01 2013 +0200
+++ b/src/metadatacomposer/templates/metadatacomposer_project_list.html	Tue Jun 04 12:38:08 2013 +0200
@@ -12,7 +12,11 @@
             <article class="container">
                 <div class="row article-title">
                     <h3 class="span8"><i class="icon-file"></i> Liste des projets</h3>
-                    <div class="span4 wrap-btn-add"><a data-type-media="video" data-title="Bibliothèque" class="btn btn-success open-modal" href="modal-bibliotheque.html">Ajouter un projet <i class="icon-plus-sign"></i></a></div>
+                    <div class="span4 wrap-btn-add">
+                        <a data-type-media="video" data-title="Ajouter un projet" class="btn btn-success open-modal" 
+                            href="{% url 'composer_modal_content_library' branding=branding %}?mode=create" data-hide-add-new>
+                            Ajouter un projet <i class="icon-plus-sign"></i></a>
+                    </div>
                 </div>
                 <table class="row table table-striped">
                     <thead>
@@ -99,6 +103,13 @@
             <a id="btn-delete-modal" class="btn btn-primary">Supprimer</a>
         </div>
     </div>
+    <div id="modal-template" class="modal hide fade popup" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+        <div class="modal-header">
+            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
+            <h3></h3>
+        </div>
+        <div class="modal-body"></div>
+    </div>
 {% endblock %}
 {% block js_page %}
     <script src="{% static 'metadatacomposer/lib/ZeroClipboard/ZeroClipboard.min.js' %}"></script>
--- a/src/metadatacomposer/templates/partial/resource_image_list.html	Mon Jun 03 18:05:01 2013 +0200
+++ b/src/metadatacomposer/templates/partial/resource_image_list.html	Tue Jun 04 12:38:08 2013 +0200
@@ -15,7 +15,21 @@
                             <tbody class="liste">
                               {% for res in image_results %}
                                 <tr id="row-list-ressources-image-id{{ forloop.counter }}">
-                                    <td>{% thumbnail res.image_file "60x60" crop="center" format="PNG" as im %}<img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" />{% empty %}<img src="{% static 'metadatacomposer/img/60x60.gif' %}" width="60px" height="60px" />{% endthumbnail %}</td>
+                                    <td>
+                                        <a href="#image{{ res.pk }}" role="button" data-toggle="modal">{% thumbnail res.image_file "60x60" crop="center" format="PNG" as im %}<img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" />{% empty %}<img src="{% static 'metadatacomposer/img/60x60.gif' %}" width="60px" height="60px" />{% endthumbnail %}</a>
+					                    <div id="image{{ res.pk }}" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="image{{ res.pk }}label" aria-hidden="true">
+					                       <div class="modal-header">
+					                           <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
+					                           <h3 id="image{{ res.pk }}label">{{ res.title }}</h3>
+					                       </div>
+					                       <div class="modal-body" style="max-height: 500px;">
+					                           <img src="{% url 'composer_image' branding=branding image_pk=res.pk %}?maxwidth=530&maxheight=500" />
+					                       </div>
+					                       <div class="modal-footer">
+					                           <button class="btn" data-dismiss="modal" aria-hidden="true">Fermer</button>
+					                       </div>
+					                    </div>
+                                    </td>
                                     <td>{{ res.title }}</td>
                                     <td>
                                         <!--ul>
--- a/src/metadatacomposer/views.py	Mon Jun 03 18:05:01 2013 +0200
+++ b/src/metadatacomposer/views.py	Tue Jun 04 12:38:08 2013 +0200
@@ -447,12 +447,12 @@
                 image_file = get_thumbnail(os.path.join(settings.MEDIA_ROOT, image.image_file.path), width+'x'+height, crop='center', format='PNG', quality=99)
             elif maxwidth and maxheight:
                 # We compare wanted format with image's format and we resize W or H
-                if (image.image_file.width/image.image_file.width) < (maxwidth/maxheight):
+                if (float(image.image_file.width)/float(image.image_file.height)) > (float(maxwidth)/float(maxheight)):
+                    # Image ratio > wanted ratio, we resize with fixed width
+                    image_file = get_thumbnail(os.path.join(settings.MEDIA_ROOT, image.image_file.path), str(maxwidth), crop='center', format='PNG', quality=99)
+                else:
                     # Image ratio < wanted ratio, we resize with fixed height
                     image_file = get_thumbnail(os.path.join(settings.MEDIA_ROOT, image.image_file.path), 'x'+str(maxheight), crop='center', format='PNG', quality=99)
-                else:
-                    # Image ratio > wanted ratio, we resize with fixed width
-                    image_file = get_thumbnail(os.path.join(settings.MEDIA_ROOT, image.image_file.path), str(maxwidth), crop='center', format='PNG', quality=99)
             if image_file:
                 image_data = image_file.read()
         return HttpResponse(image_data, mimetype="image/png")