update js and modal views
authorcavaliet
Thu, 16 May 2013 18:11:00 +0200
changeset 19 6a3d8d05e3fb
parent 18 16b482c153fd
child 20 64a77e529f23
update js and modal views
src/metadatacomposer/static/metadatacomposer/js/edition.js
src/metadatacomposer/static/metadatacomposer/js/projet.js
src/metadatacomposer/templates/metadatacomposer_modal_image.html
src/metadatacomposer/templates/metadatacomposer_modal_video.html
src/metadatacomposer/templates/metadatacomposer_project_list.html
src/metadatacomposer/templates/metadatacomposer_resource_list.html
src/metadatacomposer/templates/partial/resource_content_list.html
src/metadatacomposer/urls.py
src/metadatacomposer/views.py
--- a/src/metadatacomposer/static/metadatacomposer/js/edition.js	Thu May 16 18:03:54 2013 +0200
+++ b/src/metadatacomposer/static/metadatacomposer/js/edition.js	Thu May 16 18:11:00 2013 +0200
@@ -3,7 +3,46 @@
 var global = {
     diaporama : null,
     idAnnotation : null
-};
+},
+chapitres = [],
+annotations = [];
+
+myProject.onLoad(function() {
+
+    $(".project-title").text(myProject.title);
+    
+    myMedia = myProject.getCurrentMedia();
+    
+    IriSP.htmlPlayer(
+        myMedia,
+        $(".main-video"),
+        {
+            width: 460,
+            height: 345,
+            controls: true,
+            autostart: true
+        }
+    );
+
+    myMedia.on("timeupdate", function(t) {
+
+        //curseur chapitre
+        var pos = $(".chapitre-cut-wrap").width() * t / myMedia.duration,
+            wContainer = $('.chapitre-cut-wrap').width(),
+            btnCutChapter = $('.btn-cut-chapter'),
+            wBtnCutChapter = btnCutChapter.outerWidth();
+            
+        $(".indicateur-chapter").css("left",pos);
+        if(pos+wBtnCutChapter>wContainer){
+            btnCutChapter.css("left",(pos - wBtnCutChapter));
+        }else{
+            btnCutChapter.css("left",pos);
+        }
+            
+    });//timeupdate
+    
+});//myProject.onLoad
+
 
 //modal
     $(document).on('click', 'a.open-modal', function(e){
@@ -91,7 +130,7 @@
         $('.project-title').html($(this).val());
     });
 
-//chapter
+//--chapter
     $('.list-chapter-wrap').on('click', '.edit-chapter', function(e){
         e.preventDefault();
         var viewChapter = {
@@ -109,6 +148,7 @@
     //nouveau chapitre
     $('.chapter-widget').on('click', '.btn-cut-chapter', function(e){
         e.preventDefault();
+
         var uniqId = 'id' + (new Date()).getTime();
         $.get('template.html', function(templates){
             var viewChapterRow = {
@@ -120,6 +160,9 @@
         });
     });
 
+    function addChapter(data){
+
+    }
     
     //edit annotation
     $('#list-annotations').on('click', 'a.btn-edit-annotation', function(e){
@@ -261,11 +304,7 @@
 });
 
 //annotation > diaporama (spin)
-var spinParam = {
-    imageBasePath :'lib/spin/img/',
-    max:60,
-    min:0
-};
+
 
 //config
 //CLEditor annotation > text (wysiwyg)
@@ -371,4 +410,4 @@
 
 $('#annotation-tab a:last-child').tab('show');
 
-});
\ No newline at end of file
+});//ready
\ No newline at end of file
--- a/src/metadatacomposer/static/metadatacomposer/js/projet.js	Thu May 16 18:03:54 2013 +0200
+++ b/src/metadatacomposer/static/metadatacomposer/js/projet.js	Thu May 16 18:11:00 2013 +0200
@@ -6,7 +6,7 @@
 
 //ZeroClipboard (fonctionne sous localhost)
     var clip = new ZeroClipboard( $('.clipboard'), {
-      moviePath: "lib/ZeroClipboard/ZeroClipboard.swf"
+      moviePath: ZeroClipboardMoviePath
     });
     clip.on( 'complete', function(client, args) {
       alert("Copied text to clipboard: " + args.text );
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/metadatacomposer/templates/metadatacomposer_modal_image.html	Thu May 16 18:11:00 2013 +0200
@@ -0,0 +1,59 @@
+{% load static %}
+<div class="row">
+    <div class="span3">
+        <ul class="modal-menu">
+            <li class="bibliotheque-link"><a data-type-media="image" data-title="Bibliothèque" class="btn open-modal" href="modal-bibliotheque-image.html"><i class="icon-folder-open"></i> Bibliothèque</a></li>
+            <li><a class="btn active" tabindex="-1" href="#"><i class="icon-plus-sign"></i> Ajouter une image</a></li>
+        </ul>
+    </div>
+    <div class="span8 offset1 popup-content">
+    <h4>Informations et source de l'image</h4>
+    <form class="form-horizontal" action="#" enctype="multipart/form-data" method="post">
+        <div class="control-group">
+            <label class="control-label" for="media-title">Titre :</label>
+            <div class="controls">
+                <input type="text" name="title-media" id="media-title" placeholder="Titre de l'image..">
+            </div>
+        </div>
+        <div class="control-group">
+            <label class="control-label" for="media-description">Description :</label>
+            <div class="controls">
+                <textarea name="" id="media-description"></textarea>
+            </div>
+        </div>
+        <div class="control-group">
+            <label class="control-label" for="media-type-select">Type de la source :</label>
+            <div class="controls">
+                <select name="" id="media-type-select">
+                    <option value="url">URL</option>
+                    <option value="upload" selected>Upload</option>
+                </select>
+            </div>
+        </div>
+        <div class="control-group input-image-url">
+            <label class="control-label" for="media-url-link">URL de l'image :</label>
+            <div class="controls">
+                <input type="text" name="title-media" id="media-url-link" placeholder="Titre de l'image..">
+                <a href="#" class="btn btn-previsualisation" class="btn"><i class="icon-eye-open"></i> Prévisualiser</a>
+            </div>
+        </div>
+        <div class="control-group input-image-upload">
+            <label class="control-label" for="media-url-link">Fichier de l'image :</label>
+            <div class="controls">
+                <input type="file" name="title-media" id="media-file" placeholder="Titre de l'image..">
+                <a href="#" class="btn btn-previsualisation" class="btn"><i class="icon-eye-open"></i> Prévisualiser</a>
+            </div>
+        </div>
+        <div class="control-group">
+            <div class="controls previsualisation">
+            </div>
+        </div>
+        <div class="control-group">
+            <div class="controls">
+                <a href="#" class="btn-cancel btn btn-inverse"><i class="icon-reply" data-dismiss="modal" aria-hidden="true"></i> Annuler</a>
+                <button type="submit" class="btn btn-success"><i class="icon-save"></i> Sauvegarder</button>
+            </div>
+        </div>
+    </form>
+    </div>
+</div>
\ No newline at end of file
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/metadatacomposer/templates/metadatacomposer_modal_video.html	Thu May 16 18:11:00 2013 +0200
@@ -0,0 +1,53 @@
+{% load static %}
+<div class="row">
+    <div class="span3">
+        <ul class="modal-menu">
+            <li class="bibliotheque-link"><a data-type-media="video" data-title="Bibliothèque" class="btn open-modal" href="modal-bibliotheque-video.html"><i class="icon-folder-open"></i> Bibliothèque</a></li>
+            <li><a class="btn active" tabindex="-1" href="#"><i class="icon-plus-sign"></i> Ajouter une video</a></li>
+        </ul>
+    </div>
+    <div class="span8 offset1 popup-content">
+
+    <form class="row" action="#" method="post">
+        <h4 class="span8">Informations sur la vidéo</h4>
+        <div class="span4">
+            
+            <label for="title-media-video">Titre :</label>
+            <input type="text" id="title-media-video" name="">
+            <label for="description-title-media">Description :</label>
+            <textarea name="" id="description-title-media"></textarea>
+        </div>
+        <div class="span4">
+            <label for="">Durée de la vidéo :</label>
+            <div class="select-duration">
+                <input pattern="[0-9]*" name="" type="text" id="video-hour" class="number-spin span1" value="1">
+                <label for="video-hour">H</label>
+                <input pattern="[0-9]*" name="" type="text" id="video-minute" class="number-spin span1" value="1">
+                <label for="video-minute">M</label>
+                <input pattern="[0-9]*" name="" type="text" id="video-seconde" class="number-spin span1" value="1">
+                <label for="video-seconde">S</label>
+            </div>
+            <label for="">Vignette de la vidéo :</label>
+            <input type="file">
+        </div>
+        <div class="span8">
+            <h4>Source de la vidéo</h4>
+            <label for="">URL de la vidéo :</label>
+            <input type="text" class="input-xxlarge" placeholder="http://youtu.be">
+            <div class="control-group">
+                <div class="controls">
+                    <a href="#" class="btn-cancel btn btn-inverse"><i class="icon-reply" data-dismiss="modal" aria-hidden="true"></i> Annuler</a>
+                    <button type="submit" class="btn btn-success"><i class="icon-save"></i> Sauvegarder</button>
+                </div>
+            </div>
+        </div>
+    </form>
+    </div>
+</div>
+<script type="text/javascript">
+$('.select-duration .number-spin').spin({
+    imageBasePath :"{% static 'metadatacomposer/lib/spin/img/' %}",
+    max:60,
+    min:0
+});
+</script>
\ No newline at end of file
--- a/src/metadatacomposer/templates/metadatacomposer_project_list.html	Thu May 16 18:03:54 2013 +0200
+++ b/src/metadatacomposer/templates/metadatacomposer_project_list.html	Thu May 16 18:11:00 2013 +0200
@@ -87,4 +87,7 @@
 {% block js_page %}
     <script src="{% static 'metadatacomposer/lib/ZeroClipboard/ZeroClipboard.min.js' %}"></script>
     <script src="{% static 'metadatacomposer/js/projet.js' %}"></script>
+    <script>
+        var ZeroClipboardMoviePath = "{% static 'metadatacomposer/lib/ZeroClipboard/ZeroClipboard.swf' %}";
+    </script>
 {% endblock %}
--- a/src/metadatacomposer/templates/metadatacomposer_resource_list.html	Thu May 16 18:03:54 2013 +0200
+++ b/src/metadatacomposer/templates/metadatacomposer_resource_list.html	Thu May 16 18:11:00 2013 +0200
@@ -19,7 +19,7 @@
                         <div class="row article-title">
                             <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="modal-image.html">
+                                <a data-type-media="image" data-title="Ajouter une image" class="btn btn-success open-modal" href="{% url composer_modal_image branding=branding %}">
                                     Ajouter une image <i class="icon-plus-sign"></i>
                                 </a>
                             </div>
@@ -48,7 +48,7 @@
                                     </td>
                                     <td>14/03/2014</td>
                                     <td>
-                                        <a data-type-media="image" data-title="Modifier une image" class="btn open-modal" href="modal-image.html"><i class="icon-pencil"></i></a>
+                                        <a data-type-media="image" data-title="Modifier une image" class="btn open-modal" href="{% url composer_modal_image branding=branding %}"><i class="icon-pencil"></i></a>
                                         <a class="btn btn-delete" data-title="Titre du média" href="#row-list-ressources-image-id1">
                                             <i class="icon-remove"></i>
                                         </a>
@@ -66,7 +66,7 @@
                                     </td>
                                     <td>14/03/2014</td>
                                     <td>
-                                        <a data-type-media="image" data-title="Modifier une image" class="btn open-modal" href="modal-image.html"><i class="icon-pencil"></i></a>
+                                        <a data-type-media="image" data-title="Modifier une image" class="btn open-modal" href="{% url composer_modal_image branding=branding %}"><i class="icon-pencil"></i></a>
                                         <a class="btn btn-delete" data-title="Titre du média" href="#row-list-ressources-image-id2">
                                             <i class="icon-remove"></i>
                                         </a>
@@ -92,7 +92,7 @@
                             <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="modal-video.html">
+                                    <a data-type-media="video" data-title="Ajouter une vidéo" class="btn btn-success open-modal" href="{% url composer_modal_video branding=branding %}">
                                         Ajouter une vidéo <i class="icon-plus-sign"></i>
                                     </a>
                                 </div>
--- a/src/metadatacomposer/templates/partial/resource_content_list.html	Thu May 16 18:03:54 2013 +0200
+++ b/src/metadatacomposer/templates/partial/resource_content_list.html	Thu May 16 18:11:00 2013 +0200
@@ -26,7 +26,7 @@
                                         </td>
                                         <td>{{ res.content.update_date|date:"Y/m/d" }}</td>
                                         <td>
-                                            <a data-type-media="video" data-title="Modifier une vidéo" class="btn open-modal" href="modal-video.html"><i class="icon-pencil"></i></a>
+                                            <a data-type-media="video" data-title="Modifier une vidéo" class="btn open-modal" href="{% url composer_modal_video branding=branding %}"><i class="icon-pencil"></i></a>
                                             <a class="btn btn-delete" data-title="Titre du média" href="#row-list-ressources-video-id1">
                                             <i class="icon-remove"></i>
                                         </a>
--- a/src/metadatacomposer/urls.py	Thu May 16 18:03:54 2013 +0200
+++ b/src/metadatacomposer/urls.py	Thu May 16 18:11:00 2013 +0200
@@ -1,12 +1,15 @@
 from django.conf.urls.defaults import patterns, url
 from metadatacomposer.views import MetadataComposerHome, MetadataComposerProjectList,\
-    MetadataComposerResourceList, MetadataComposerContentPagination
+    MetadataComposerResourceList, MetadataComposerContentPagination,\
+    MetadataComposerModalVideo, MetadataComposerModalImage
 
 urlpatterns = patterns('',
     url(r'^jsi18n/(?P<packages>\S+?)/$', 'django.views.i18n.javascript_catalog', name='jsi18n'),
     url(r'^(?P<branding>.*)/projectlist/$', MetadataComposerProjectList.as_view(), name="composer_project_list"),
     url(r'^(?P<branding>.*)/resourcelist/$', MetadataComposerResourceList.as_view(), name="composer_resource_list"),
     url(r'^(?P<branding>.*)/contentpage/$', MetadataComposerContentPagination.as_view(), name="composer_content_page"),
+    url(r'^(?P<branding>.*)/modalvideo/$', MetadataComposerModalVideo.as_view(), name="composer_modal_video"),
+    url(r'^(?P<branding>.*)/modalimage/$', MetadataComposerModalImage.as_view(), name="composer_modal_image"),
     url(r'^(?P<branding>.*)/$', MetadataComposerHome.as_view(), name="composer_home"),
     url(r'^$', MetadataComposerHome.as_view(), name="composer_home"),
 )
--- a/src/metadatacomposer/views.py	Thu May 16 18:03:54 2013 +0200
+++ b/src/metadatacomposer/views.py	Thu May 16 18:11:00 2013 +0200
@@ -143,4 +143,36 @@
     
     results.object_list = results_object_list
     return results
+
+
+
+class MetadataComposerModalVideo(TemplateResponseMixin, MetadataComposerContextView):
+    
+    def get_template_names(self):
+        return "metadatacomposer_modal_video.html"
+    
+    @method_decorator(login_required)
+    def dispatch(self, *args, **kwargs):
+        return super(MetadataComposerModalVideo, self).dispatch(*args, **kwargs)
+    
+    def get(self, request, branding="iri", **kwargs):
+        self.branding = branding
+        context = self.get_context_dict(request)
+        return self.render_to_response(context)
+
+
+
+class MetadataComposerModalImage(TemplateResponseMixin, MetadataComposerContextView):
+    
+    def get_template_names(self):
+        return "metadatacomposer_modal_image.html"
+    
+    @method_decorator(login_required)
+    def dispatch(self, *args, **kwargs):
+        return super(MetadataComposerModalImage, self).dispatch(*args, **kwargs)
+    
+    def get(self, request, branding="iri", **kwargs):
+        self.branding = branding
+        context = self.get_context_dict(request)
+        return self.render_to_response(context)
     
\ No newline at end of file