iframe modal used for content preview
authorcavaliet
Wed, 05 Jun 2013 11:56:20 +0200
changeset 78 5dddae65a99a
parent 77 0e4fa3991906
child 79 5dfa74fcec4b
child 80 9115f9cba3a5
iframe modal used for content preview
integration/js/common.js
src/metadatacomposer/static/metadatacomposer/js/common.js
src/metadatacomposer/templates/metadatacomposer_home.html
src/metadatacomposer/templates/metadatacomposer_project_list.html
src/metadatacomposer/templates/metadatacomposer_resource_list.html
src/metadatacomposer/templates/partial/resource_content_list.html
--- a/integration/js/common.js	Tue Jun 04 17:17:17 2013 +0200
+++ b/integration/js/common.js	Wed Jun 05 11:56:20 2013 +0200
@@ -12,6 +12,7 @@
             modalTitleInfo = $(this).attr('data-title'),
             hideBibliotheque = $(this).hasAttr('data-hide-bibliotheque') ? true : false,
             hideAddNew = $(this).hasAttr('data-hide-add-new') ? true : false,
+            isIframe = $(this).hasAttr('data-iframe') ? true : false,
             titleFront;
 
         switch(typeMedia){
@@ -19,15 +20,25 @@
             case 'image' : titleFront = '<i class="icon-picture"></i> Image - '+modalTitleInfo; break;
         }
         $('#modal-template .modal-header h3').html(titleFront);
-
-        $("#modal-template .modal-body").load(modalRemote, function() { 
-            $("#modal-template").modal("show"); 
+        
+        if(isIframe){
             if(hideBibliotheque)
                 $("#modal-template").find(".bibliotheque-link").hide();
             if(hideAddNew)
                 $("#modal-template").find(".add-new").hide();
-        });
 
+            $("#modal-template .modal-body").html('<iframe src="' + modalRemote + '" seamless="seamless" width="580" height="440"></iframe>');
+            $("#modal-template").modal("show");
+        }
+        else{
+            $("#modal-template .modal-body").load(modalRemote, function() { 
+                $("#modal-template").modal("show"); 
+                if(hideBibliotheque)
+                    $("#modal-template").find(".bibliotheque-link").hide();
+                if(hideAddNew)
+                    $("#modal-template").find(".add-new").hide();
+            });
+        }
     });
 
     $('.popup').on('click', '.popup-content a', function(e){
@@ -43,6 +54,11 @@
 
     });
 
+// empty modal when closed
+      $("#modal-template .modal-header .close").click(function(e){
+          $("#modal-template .modal-body").html('');
+      });
+
 //confirmation suppression
     $(document).on('click','.btn-delete', function(e){
         e.preventDefault();
--- a/src/metadatacomposer/static/metadatacomposer/js/common.js	Tue Jun 04 17:17:17 2013 +0200
+++ b/src/metadatacomposer/static/metadatacomposer/js/common.js	Wed Jun 05 11:56:20 2013 +0200
@@ -12,6 +12,7 @@
             modalTitleInfo = $(this).attr('data-title'),
             hideBibliotheque = $(this).hasAttr('data-hide-bibliotheque') ? true : false,
             hideAddNew = $(this).hasAttr('data-hide-add-new') ? true : false,
+            isIframe = $(this).hasAttr('data-iframe') ? true : false,
             titleFront;
 
         switch(typeMedia){
@@ -19,15 +20,25 @@
             case 'image' : titleFront = '<i class="icon-picture"></i> Image - '+modalTitleInfo; break;
         }
         $('#modal-template .modal-header h3').html(titleFront);
-
-        $("#modal-template .modal-body").load(modalRemote, function() { 
-            $("#modal-template").modal("show"); 
+        
+        if(isIframe){
             if(hideBibliotheque)
                 $("#modal-template").find(".bibliotheque-link").hide();
             if(hideAddNew)
                 $("#modal-template").find(".add-new").hide();
-        });
 
+            $("#modal-template .modal-body").html('<iframe src="' + modalRemote + '" seamless="seamless" width="580" height="440"></iframe>');
+            $("#modal-template").modal("show");
+        }
+        else{
+            $("#modal-template .modal-body").load(modalRemote, function() { 
+                $("#modal-template").modal("show"); 
+                if(hideBibliotheque)
+                    $("#modal-template").find(".bibliotheque-link").hide();
+                if(hideAddNew)
+                    $("#modal-template").find(".add-new").hide();
+            });
+        }
     });
 
     $('.popup').on('click', '.popup-content a', function(e){
@@ -43,6 +54,11 @@
 
     });
 
+// empty modal when closed
+      $("#modal-template .modal-header .close").click(function(e){
+          $("#modal-template .modal-body").html('');
+      });
+
 //confirmation suppression
     $(document).on('click','.btn-delete', function(e){
         e.preventDefault();
--- a/src/metadatacomposer/templates/metadatacomposer_home.html	Tue Jun 04 17:17:17 2013 +0200
+++ b/src/metadatacomposer/templates/metadatacomposer_home.html	Wed Jun 05 11:56:20 2013 +0200
@@ -98,7 +98,7 @@
                 <div class="row">
                   {% for c in contents %}
                     <div class="span2">
-                        <a href="{% url 'embediframe_page' %}?content_id={{ c.iri_id }}" data-type-media="video" data-title="{{ c.title }}" class="open-modal" data-hide-add-new>
+                        <a href="{% url 'embediframe_page' %}?content_id={{ c.iri_id }}" data-type-media="video" data-title="{{ c.title }}" class="open-modal" data-hide-add-new data-iframe>
                             {% thumbnail c.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>{{ c.title }}</h4></a>
                     </div>
--- a/src/metadatacomposer/templates/metadatacomposer_project_list.html	Tue Jun 04 17:17:17 2013 +0200
+++ b/src/metadatacomposer/templates/metadatacomposer_project_list.html	Wed Jun 05 11:56:20 2013 +0200
@@ -35,7 +35,7 @@
                         <tr>
                             <td>{% thumbnail p.image "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>{{ p.title }}</td>
-                            <td>{% with c=p.contents.all|first %}<a href="{% url 'embediframe_page' %}?content_id={{ c.iri_id }}" data-type-media="video" data-title="{{ c.title }}" class="open-modal" data-hide-add-new>{{ c.title }}</a>{% endwith %}</td>
+                            <td>{% with c=p.contents.all|first %}<a href="{% url 'embediframe_page' %}?content_id={{ c.iri_id }}" data-type-media="video" data-title="{{ c.title }}" class="open-modal" data-hide-add-new data-iframe>{{ c.title }}</a>{% endwith %}</td>
                             <td>{{ p.modification_date|date:"Y/m/d" }}</td>
                             <td>
                                 <form action="#">
--- a/src/metadatacomposer/templates/metadatacomposer_resource_list.html	Tue Jun 04 17:17:17 2013 +0200
+++ b/src/metadatacomposer/templates/metadatacomposer_resource_list.html	Wed Jun 05 11:56:20 2013 +0200
@@ -20,7 +20,7 @@
                             <h3 class="span8"><i class="icon-picture"></i> Liste des images</h3>
                             <div class="span4 wrap-btn-add">
                                 <a data-type-media="image" data-title="Ajouter une image" class="btn btn-success open-modal" 
-                                href="{% url 'composer_modal_image' branding=branding %}" >
+                                href="{% url 'composer_modal_image' branding=branding %}" data-hide-bibliotheque>
                                     Ajouter une image <i class="icon-plus-sign"></i>
                                 </a>
                             </div>
@@ -35,7 +35,8 @@
                             <div class="row article-title">
                                 <h3 class="span8"><i class="icon-film"></i> Liste des vidéos</h3>
                                 <div class="span4 wrap-btn-add">
-                                    <a data-type-media="video" data-title="Ajouter une vidéo" class="btn btn-success open-modal" href="{% url 'composer_modal_content' branding=branding %}">
+                                    <a data-type-media="video" data-title="Ajouter une vidéo" class="btn btn-success open-modal" 
+                                    href="{% url 'composer_modal_content' branding=branding %}" data-hide-bibliotheque>
                                         Ajouter une vidéo <i class="icon-plus-sign"></i>
                                     </a>
                                 </div>
--- a/src/metadatacomposer/templates/partial/resource_content_list.html	Tue Jun 04 17:17:17 2013 +0200
+++ b/src/metadatacomposer/templates/partial/resource_content_list.html	Wed Jun 05 11:56:20 2013 +0200
@@ -16,7 +16,7 @@
                                   {% for res in content_results %}
                                     <tr id="row-list-ressources-video-id{{ forloop.counter }}">
                                         <td>
-                                            <a href="{% url 'embediframe_page' %}?content_id={{ res.content.iri_id }}" data-type-media="video" data-title="{{ res.content.title }}" class="open-modal" data-hide-add-new>
+                                            <a href="{% url 'embediframe_page' %}?content_id={{ res.content.iri_id }}" data-type-media="video" data-title="{{ res.content.title }}" class="open-modal" data-hide-add-new data-iframe>
                                             {% thumbnail res.content.image "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>
                                         </td>
                                         <td>{{ res.content.title }}</td>