# HG changeset patch
# User Anthony Ly <anthonyly.com@gmail.com>
# Date 1370862683 -7200
# Node ID 8645721dd9fc840da84062c181e66793b5ca25ab
# Parent  1c163781996b40d983f1372a968bd06ede9cdd90
tangle on annotation

diff -r 1c163781996b -r 8645721dd9fc integration/css/style.css
--- a/integration/css/style.css	Fri Jun 07 17:56:50 2013 +0200
+++ b/integration/css/style.css	Mon Jun 10 13:11:23 2013 +0200
@@ -132,6 +132,7 @@
     background-color: #00FFFF !important;
 }
 .alert-message{display: none;}
+.alert{display: none;}
 
 /* Tangle */
 .time-tangle {
diff -r 1c163781996b -r 8645721dd9fc integration/edition.html
--- a/integration/edition.html	Fri Jun 07 17:56:50 2013 +0200
+++ b/integration/edition.html	Mon Jun 10 13:11:23 2013 +0200
@@ -39,8 +39,23 @@
 				</div>
 			</div>
 		</header>
+
 		<section>
 			<div class="container">
+				<div class="row alerts">
+					<div class="save-load alert alert-info fade in">
+						<button type="button" class="close" data-dismiss="alert">&times;</button>
+	    				<i class="icon-spinner icon-spin"></i> Enregistrement du projet en cours...
+	    			</div>
+    			    <div class="save-ok  alert alert-success fade in">
+    			    	<button type="button" class="close" data-dismiss="alert">&times;</button>
+				    	<i class="icon-save"></i> Le projet a bien été sauvegardé !
+				    </div>
+				    <div class="save-error alert alert-error fade in">
+				    	<button type="button" class="close" data-dismiss="alert">&times;</button>
+				    	<i class="icon-warning-sign"></i> Une erreur est survenue lors de la sauvegarde du projet.
+				    </div>
+    			</div>
 				<div class="row project-head">
 					<div class="span7">
 						<div class="project-title-editor">
@@ -50,10 +65,11 @@
 
 					</div>
 					<div class="span5 text-right project-action">
-						<a href="#" class="btn disabled btn-apercu-projet"><i class="icon-eye-open"></i> Voir aperçu</a>
+						<a href="#" class="btn btn-apercu-projet"><i class="icon-eye-open"></i> Voir aperçu</a>
 						<a href="#" class="btn btn-success btn-save-project"><i class="icon-save"></i> Sauvegarder le projet</a>
 					</div>
 				</div>
+				
 				<div class="row">
 					<div class="span6">
 						<div class="video-wrap">
@@ -559,9 +575,13 @@
 				</thead>
 				<tbody>
 					<tr>
-						<td id="{{id}}-begin" class="span1">{{begin}}</td>
+						<td id="{{id}}-begin" class="span1">
+							<span data-milliseconds="{{begin.milliseconds}}" class="time-tangle tangle-start slider-tangle">{{begin}}</span>
+						</td>
 						<td id="{{id}}-duration" class="span1">{{getDuration}}</td>
-						<td id="{{id}}-end" class="span1">{{end}}</td>
+						<td id="{{id}}-end" class="span1">
+							<span data-milliseconds="{{end.milliseconds}}" class="time-tangle tangle-end slider-tangle">{{end}}</span>
+						</td>
 					</tr>
 				</tbody>
 			</table>
@@ -906,7 +926,6 @@
     <script src="js/metadataplayer-core.js"></script>
     <script src="js/ldt-serializer.js"></script>
 	<script src="js/common.js"></script>
-	<script src="js/tangle.js"></script>
     <script src="js/edition.js"></script>
     <script>
     
@@ -918,8 +937,6 @@
 
 	var urlSaveProject = '';
 
-	var textCurrentAnnotationEditT = "en cours d'édition";
-
 
     /* Initialisation du metadataplayer avec un projet vide */
     var myDir = new IriSP.Model.Directory(),
diff -r 1c163781996b -r 8645721dd9fc integration/js/edition.js
--- a/integration/js/edition.js	Fri Jun 07 17:56:50 2013 +0200
+++ b/integration/js/edition.js	Mon Jun 10 13:11:23 2013 +0200
@@ -1,6 +1,7 @@
 var myMedia = undefined,
     currentChapter = undefined,
     currentAnnotation = undefined,
+    currentSlider = undefined,
     secMiniChapter = 10;
 
 $(function(){
@@ -224,7 +225,7 @@
 
 //--title-editor
     $(document).on('click', '.project-title-editor i, .project-title', function () {
-        disabledPreview();
+        
         var html = $('.project-title').html();
         var input = $('<input type="text" />');
         input.val(html);
@@ -257,7 +258,7 @@
     });
 
     $('.chapter-widget-info').on('keyup', 'input[name=title], textarea', function(e){
-        disabledPreview();
+        
 
         var name = $(this).attr('name'),
             value = $(this).val();
@@ -274,7 +275,7 @@
 
     function loadFormChapter(idChapter){
 
-        disabledPreview();
+        
         
 
         currentChapter = _.find(chapters, function(c){ return c.id == idChapter; });
@@ -325,7 +326,7 @@
 })
 
 function deleteChapter(idChapter){
-    disabledPreview();
+    
     $("#modal-confirm").modal('hide');
     var chapter = _.find(chapters, function(c){ return c.id == idChapter; }),
         indexChapter = _.indexOf(chapters, chapter),
@@ -408,7 +409,7 @@
     }
     
     function renderChapter(){
-        disabledPreview();
+        
 
         var chapterSegmentWrap = $('.chapter-segments'),
             wChapterSegmentWrap = chapterSegmentWrap.width(),
@@ -469,7 +470,7 @@
     }
 
     function renderAnnotation(){
-        disabledPreview();
+        
 
         var timeline = $('.timeline-annotations'),
             wTimeline = timeline.width(),
@@ -542,7 +543,7 @@
     //edit annotation
     $('#list-annotations').on('click', 'a.btn-edit-annotation', function(e){
         e.preventDefault();
-        disabledPreview();
+        
         var idAnnotation = $(this).attr('data-id');
         //si il est déjà ouvert
         if($('#tab-annotation-'+idAnnotation).length){
@@ -554,7 +555,7 @@
     });
 
     $('.tab-content').on('keyup', '.form-info-general-annotation input[name=title], .form-info-general-annotation textarea', function(e){
-        disabledPreview();
+        
         var name = $(this).attr('name'),
             value = $(this).val();
         currentAnnotation[name] = value;
@@ -578,7 +579,7 @@
     });
 
     function deleteAnnotation(idAnnotation){
-        disabledPreview();
+        
         $("#modal-confirm").modal('hide');
         annotations.removeId(idAnnotation);
         myProject.getAnnotations().removeId(idAnnotation, true);
@@ -631,6 +632,7 @@
             var output = Mustache.render(tplHead, dataView);
             $(tabContent).append(output);
             $(tabContent).find(".slider-duration").slider(configSlider(dataView));
+            currentSlider = $(tabContent).find(".slider-duration");
             $(tabContent).find(".ui-slider-range.ui-widget-header.ui-corner-all").css('background', dataView.color);
             $(tabContent).find('.tag-it').tagit(tagitParam);
             //type
@@ -734,6 +736,7 @@
     $('#onglet-annotations').on('show', 'a[data-toggle="annotation"]', function (e) {
         var idAnnotation = $(e.target).attr('data-id');
         currentAnnotation = _.find(annotations, function(c){ return c.id == idAnnotation; });
+        currentSlider = $('#tab-annotation-'+idAnnotation).find(".slider-duration");
         showCurrentAnnotationInTimeline(idAnnotation);
     });
 
@@ -960,9 +963,23 @@
     }
 });
 
+$('.alert').bind('close', function (e) {
+    e.preventDefault();
+    $(this).hide();
+});
+
+function showAlertByClassName(className){
+    $('.alert').hide();
+    $('.'+className).show();
+}
 //save project
+
 $('.btn-save-project').bind('click', function(e){
-    $('.btn-apercu-projet').removeClass('disabled');
+    e.preventDefault();
+    if($(this).hasClass('disabled')) return;
+
+    showAlertByClassName('save-load');
+    $(this).addClass('disabled');
 
     console.log(myProject.serialize());
 
@@ -975,13 +992,18 @@
             "X-CSRFToken": tokenSaveProject
         },
         success: function(data, status, request){
+            showAlertByClassName('save-ok');
+            $(this).removeClass('disabled');
+            $('.btn-apercu-projet').removeClass('disabled');
             console.log('data : ', data);
             console.log('status : ', status);
             console.log('request : ', request);
 
         },
         error: function(jqXHR, textStatus, errorThrown){
-            alert(gettext("Server error\nYour hashcut couldn't be published"));
+            showAlertByClassName('save-error');
+            $(this).removeClass('disabled');
+            //alert(gettext("Server error\nYour hashcut couldn't be published"));
         }
     });
 
@@ -1009,6 +1031,7 @@
 }
 
 var tagitParam = {
+    allowSpaces: true,
     afterTagRemoved : onTagItChange,
     afterTagAdded : onTagItChange
 }
@@ -1056,9 +1079,11 @@
                 width = Math.floor(data.getDuration() * wTimeline / myMedia.duration),
                 left = Math.floor(data.begin * wTimeline / myMedia.duration);
 
-            $( '#'+ idSlider +'-begin' ).html(data.begin.toString());
+            $( '#'+ idSlider +'-begin span' ).html(data.begin.toString());
+            $( '#'+ idSlider +'-begin span' ).attr('data-milliseconds', data.begin);
             $( '#'+ idSlider +'-duration' ).html(data.getDuration().toString());
-            $( '#'+ idSlider +'-end' ).html(data.end.toString());
+            $( '#'+ idSlider +'-end span' ).html(data.end.toString());
+            $( '#'+ idSlider +'-end span' ).attr('data-milliseconds', data.end);
 
             annotationTimeline.css({
                 left : left,
@@ -1121,13 +1146,169 @@
 }//getContentAnnotationByType
 
 
+/* Tangles */
+    var tangleMsPerPixel = 100,
+        activeTangle,
+        tangleStartX,
+        tangleStartVal,
+        tangleHasMoved;
+    
+    $('.chapter-widget-info').on('mousedown', '.time-tangle', function(evt){
+        activeTangle = $(this);
+        activeTangle.addClass("active");
+        tangleStartVal = +activeTangle.attr("data-milliseconds");
+        tangleStartX = evt.pageX;
+        tangleHasMoved = false;
+        $(this).parents('td').siblings('td').find(".time-tangle").addClass("deactivate");
+        return false;
+    });
 
+    $('.tab-content').on('mousedown', '.time-tangle', function(evt){
+        activeTangle = $(this);
+        activeTangle.addClass("active");
+        tangleStartVal = +activeTangle.attr("data-milliseconds");
+        tangleStartX = evt.pageX;
+        tangleHasMoved = false;
+        $(this).parents('td').siblings('td').find(".time-tangle").addClass("deactivate");
+        return false;
+    });
+
+    $(document)
+        .mousemove(function(evt) {
+            if (activeTangle) {
+                tangleHasMoved = true;
+                var newval = new IriSP.Model.Time(tangleMsPerPixel * (evt.pageX - tangleStartX) + tangleStartVal);
+                activeTangle.trigger("valuechange", newval);
+                return false;
+            }
+        })
+        .mouseup(function() {
+
+            if (activeTangle) {
+                if(activeTangle.hasClass('slider-tangle')){
+                    renderAnnotation();
+                    refreshAnnotationDisplay(myMedia.getCurrentTime());
+                }
+                $(".time-tangle").removeClass("active deactivate");
+                activeTangle = undefined;
+            }
+        });
+
+//chapters
+
+    function updateRenderChapter(chapterData){
+        var segment = $('.chapter-segments li#'+chapterData.id),
+            wChapterSegmentWrap = $('.chapter-segments').width(),
+            wSegmentNew = chapterData.getDuration() * wChapterSegmentWrap / myMedia.duration,
+            lSegmentNew = chapterData.begin * wChapterSegmentWrap / myMedia.duration,
+            row = $('#row-list-chapter-'+chapterData.id),
+            form = ($('#form-chapter-edit-'+chapterData.id).length) ? $('#form-chapter-edit-'+chapterData.id) : false;
+
+        segment.css({
+            width : wSegmentNew,
+            left : lSegmentNew
+        });
+
+        row.find('.begin').text(chapterData.begin);
+        console.log(chapterData.getDuration())
+        row.find('.duration').text(chapterData.getDuration());
+        row.find('.end').text(chapterData.end);
+
+        if(form){
+            form.find('.begin').text(chapterData.begin);
+            form.find('.begin').attr('data-milliseconds',chapterData.begin);
+            form.find('.duration').text(chapterData.getDuration());
+            form.find('.end').text(chapterData.end);
+            form.find('.end').attr('data-milliseconds',chapterData.end);
+        }
+    }
+
+    function updateChapterDuration(val, chapterBefore, chapterAfter){
+
+        if (val<=chapterAfter.end && val>=chapterBefore.begin && chapterAfter.end-val>secMiniChapter*1000 && val-chapterBefore.begin>secMiniChapter*1000) {
+            chapterAfter.setBegin(val);
+            chapterBefore.setEnd(val);
+
+            updateRenderChapter(chapterAfter);
+            updateRenderChapter(chapterBefore);
+        }
+    }
+
+    $('.chapter-widget-info').on('valuechange', '.tangle-start', function(evt, val){
+        var indexChapter = _.indexOf(chapters, currentChapter);
+        if(indexChapter == 0 || chapters.length<=1) return;
+        
+        var chapterBefore = chapters[indexChapter-1],
+            chapterAfter = currentChapter;
+
+        updateChapterDuration(val, chapterBefore, chapterAfter);
+    });
+
+    $('.chapter-widget-info').on('valuechange', '.tangle-end', function(evt, val){
+        var indexChapter = _.indexOf(chapters, currentChapter);
+        if(indexChapter == chapters.length-1 || chapters.length<=1) return;
+        
+        var chapterAfter = chapters[indexChapter+1],
+            chapterBefore = currentChapter;
+
+            updateChapterDuration(val, chapterBefore, chapterAfter);
+    });
+
+//annotations
+
+    $('.tab-content').on('valuechange', '.tangle-start', function(evt, val){
+        var max = currentSlider.slider('values')[1],
+            min = 0,
+            beginOrEnd = 'begin';
+
+        updateAnnotationDuration(val, min, max, beginOrEnd);
+    });
+
+    $('.tab-content').on('valuechange', '.tangle-end', function(evt, val){
+        var max = myMedia.duration,
+            min = currentSlider.slider('values')[0],
+            beginOrEnd = 'end';
+
+        updateAnnotationDuration(val, min, max, beginOrEnd);
+    });
+
+    function updateAnnotationDuration(val, min, max, beginOrEnd){
+        var idAnnotation = currentAnnotation.id,
+            tabAnnotation = $('#tab-annotation-'+idAnnotation),
+            spanTangleStart = tabAnnotation.find('.tangle-start'),
+            spanTangleEnd = tabAnnotation.find('.tangle-end'),
+            spanDuration = tabAnnotation.find('#'+idAnnotation+'-duration');
+
+        if(val<max && val>min){
+            if(beginOrEnd == 'begin'){currentAnnotation.setBegin(val);}
+            if(beginOrEnd == 'end'){currentAnnotation.setEnd(val);}
+
+            spanTangleStart.html(currentAnnotation.begin.toString());
+            spanTangleStart.attr('data-milliseconds', currentAnnotation.begin);
+            spanDuration.html(currentAnnotation.getDuration().toString());
+            spanTangleEnd.html(currentAnnotation.end.toString());
+            spanTangleEnd.attr('data-milliseconds', currentAnnotation.end);
+
+            var wTimeline = $('.timeline-annotations').width(),
+            annotationTimeline = $('#annotation-timeline-'+ idAnnotation),
+            width = Math.floor(currentAnnotation.getDuration() * wTimeline / myMedia.duration),
+            left = Math.floor(currentAnnotation.begin * wTimeline / myMedia.duration);
+
+            annotationTimeline.css({
+                left : left,
+                width :width
+            });
+            currentSlider.slider('values', [currentAnnotation.begin, currentAnnotation.end])
+        }
+    }
+/* /Tangles */ 
 
 //test
 
 $('.log-annotations').bind('click', function(e){
     e.preventDefault();
     console.log(annotations.length + ' annotations', annotations);
+    currentSlider.slider( "values", 0, 55 );
 });
 
 $('.log-chapters').bind('click', function(e){
diff -r 1c163781996b -r 8645721dd9fc integration/js/tangle.js
--- a/integration/js/tangle.js	Fri Jun 07 17:56:50 2013 +0200
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,124 +0,0 @@
-/* Tangles */
-    var tangleMsPerPixel = 100,
-        activeTangle,
-        tangleStartX,
-        tangleStartVal,
-        tangleHasMoved;
-    
-    $('.chapter-widget-info').on('mousedown', '.time-tangle', function(evt){
-        activeTangle = $(this);
-        activeTangle.addClass("active");
-        tangleStartVal = +activeTangle.attr("data-milliseconds");
-        tangleStartX = evt.pageX;
-        tangleHasMoved = false;
-        $(this).parents('td').siblings('td').find(".time-tangle").addClass("deactivate");
-        return false;
-    });
-
-    $(document)
-        .mousemove(function(evt) {
-            if (activeTangle) {
-                tangleHasMoved = true;
-                var newval = new IriSP.Model.Time(tangleMsPerPixel * (evt.pageX - tangleStartX) + tangleStartVal);
-                activeTangle.trigger("valuechange", newval);
-                return false;
-            }
-        })
-        .mouseup(function() {
-            if (activeTangle) {
-                $(".time-tangle").removeClass("active deactivate");
-                activeTangle = undefined;
-            }
-        });
-
-    function updateRenderChapter(chapterData){
-        var segment = $('.chapter-segments li#'+chapterData.id),
-            wChapterSegmentWrap = $('.chapter-segments').width(),
-            wSegmentNew = chapterData.getDuration() * wChapterSegmentWrap / myMedia.duration,
-            lSegmentNew = chapterData.begin * wChapterSegmentWrap / myMedia.duration,
-            row = $('#row-list-chapter-'+chapterData.id),
-            form = ($('#form-chapter-edit-'+chapterData.id).length) ? $('#form-chapter-edit-'+chapterData.id) : false;
-
-        segment.css({
-            width : wSegmentNew,
-            left : lSegmentNew
-        });
-
-        row.find('.begin').text(chapterData.begin);
-        console.log(chapterData.getDuration())
-        row.find('.duration').text(chapterData.getDuration());
-        row.find('.end').text(chapterData.end);
-
-        if(form){
-            form.find('.begin').text(chapterData.begin);
-            form.find('.begin').attr('data-milliseconds',chapterData.begin);
-            form.find('.duration').text(chapterData.getDuration());
-            form.find('.end').text(chapterData.end);
-            form.find('.end').attr('data-milliseconds',chapterData.end);
-        }
-    }
-
-    function updateChapterDuration(val, chapterBefore, chapterAfter){
-
-        if (val<=chapterAfter.end && val>=chapterBefore.begin && chapterAfter.end-val>secMiniChapter*1000 && val-chapterBefore.begin>secMiniChapter*1000) {
-            chapterAfter.setBegin(val);
-            chapterBefore.setEnd(val);
-
-            updateRenderChapter(chapterAfter);
-            updateRenderChapter(chapterBefore);
-        }
-    }
-
-    $('.chapter-widget-info').on('valuechange', '.tangle-start', function(evt, val){
-        var indexChapter = _.indexOf(chapters, currentChapter);
-        if(indexChapter == 0 || chapters.length<=1) return;
-        
-        var chapterBefore = chapters[indexChapter-1],
-            chapterAfter = currentChapter;
-
-        updateChapterDuration(val, chapterBefore, chapterAfter);
-    });
-
-    $('.chapter-widget-info').on('valuechange', '.tangle-end', function(evt, val){
-        var indexChapter = _.indexOf(chapters, currentChapter);
-        if(indexChapter == chapters.length-1 || chapters.length<=1) return;
-        
-        var chapterAfter = chapters[indexChapter+1],
-            chapterBefore = currentChapter;
-
-            updateChapterDuration(val, chapterBefore, chapterAfter);
-
-        
-    });
-    /*
-    $(".tangle-start")
-        .mouseup(function(evt) {
-
-            if (!tangleHasMoved && currentMedia && currentSegment) {
-                currentMedia.setCurrentTime(currentSegment.begin);
-            }
-        })
-        .on("valuechange", function(evt, val) {
-
-            if (currentMedia && currentSegment) {
-                currentSegment.setBegin(val);
-            }
-        });
-
-    $(".tangle-end")
-        .mouseup(function(evt) {
-            if (!tangleHasMoved && currentMedia && currentSegment) {
-                currentMedia.setCurrentTime(currentSegment.end);
-            }
-        })
-        .on("valuechange", function(evt, val) {
-            if (currentMedia && currentSegment) {
-                currentSegment.setEnd(val);
-            }
-        });
-    $(".tangle-duration").on("valuechange", function(evt, val) {
-        if (currentMedia && currentSegment) {
-            currentSegment.setDuration(val);
-        }
-       
-    }); */
\ No newline at end of file