metadatacomposer: comparison integration/js/edition.js

Mercurial Mercurial > metadatacomposer / comparison

summary | shortlog | changelog | graph | tags | bookmarks | branches | files | changeset | file | latest | revisions | annotate | diff | comparison | raw | help

integration/js/edition.js

changeset 105	8645721dd9fc
parent 102	172abe53cf6c
child 107	f354d24e08ca

equal deleted inserted replaced

-:1c163781996b
+:8645721dd9fc
 var myMedia = undefined,
 currentChapter = undefined,
 currentAnnotation = undefined,
+currentSlider = undefined,
 secMiniChapter = 10;
 $(function(){
 var global = {
 e.preventDefault();
 });
 //--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);
 $('.project-title').replaceWith(input);
 input.focus().keypress(function(e){
 var idChapter = $(this).attr('id');
 loadFormChapter(idChapter);
 });
 $('.chapter-widget-info').on('keyup', 'input[name=title], textarea', function(e){
-disabledPreview();
 var name = $(this).attr('name'),
 value = $(this).val();
 currentChapter[name] = value;
 if(name == 'title'){
 function loadFormChapter(idChapter){
-disabledPreview();
 currentChapter = _.find(chapters, function(c){ return c.id == idChapter; });
 var chapterWrap = $('.chapter-widget-info'),
 indexChapter = _.indexOf(chapters, currentChapter),
 e.preventDefault();
 $('.form-chapter-edit').remove();
 })
 function deleteChapter(idChapter){
-disabledPreview();
 $("#modal-confirm").modal('hide');
 var chapter = _.find(chapters, function(c){ return c.id == idChapter; }),
 indexChapter = _.indexOf(chapters, chapter),
 chapterModify;
 if(indexChapter == 0){
 return returnEnd;
 }
 function renderChapter(){
-disabledPreview();
 var chapterSegmentWrap = $('.chapter-segments'),
 wChapterSegmentWrap = chapterSegmentWrap.width(),
 chapterList = $('.list-chapter-rows-wrap');
 return annotation;
 }
 function renderAnnotation(){
-disabledPreview();
 var timeline = $('.timeline-annotations'),
 wTimeline = timeline.width(),
 annotationList = $('#list-annotations-rows');
 }//renderAnnotation
 //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){
 $('a[href=#tab-annotation-'+idAnnotation+']').tab('show');
 }else{
 openTab(data.type, data);
 }
 });
 $('.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;
 if(name == 'title'){
 var idAnnotation = $(this).parents('form').attr('data-id');
 btnDeleteModal.attr('data-type-delete', 'annotation');
 btnDeleteModal.attr('data-id', idAnnotation);
 });
 function deleteAnnotation(idAnnotation){
-disabledPreview();
 $("#modal-confirm").modal('hide');
 annotations.removeId(idAnnotation);
 myProject.getAnnotations().removeId(idAnnotation, true);
 closeTab(idAnnotation);
 renderAnnotation();
 //head commun à tous
 var tplHead = getTemplate('#tpl-head');
 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
 var viewType = {
 id : idAnnotation,
 //définit currentAnnotation quand la tab s'ouvre
 $('#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);
 });
 //rafraichit annotations au retour sur la liste
 $('#onglet-annotations').on('show', 'a[data-toggle="list-annotations"]', function (e) {
 if(!isNaN(value)){
 currentAnnotation.content.slideduration = value * 1000;
 }
 });
+$('.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());
 $.ajax({
 type: "POST",
 contentType: "application/cinelab",
 headers: {
 "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"));
 }
 });
 });
 }
 }
 var tagitParam = {
+allowSpaces: true,
 afterTagRemoved : onTagItChange,
 afterTagAdded : onTagItChange
 }
 //CLEditor annotation > text (wysiwyg)
 wTimeline = $('.timeline-annotations').width(),
 annotationTimeline = $('#annotation-timeline-'+ data.id),
 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,
 width :width
 });
 }
 return content;
 }//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){
 e.preventDefault();
 console.log(chapters.length + ' chapitres',chapters);

metadatacomposer