diff -r ec6a5592c617 -r e3a17ec94cd8 integration/js/edition.js --- a/integration/js/edition.js Wed May 22 17:10:38 2013 +0200 +++ b/integration/js/edition.js Thu May 23 18:11:55 2013 +0200 @@ -1,5 +1,6 @@ var myMedia = null, currentChapter = null, + currentAnnotation = null, chapters = [], annotations = []; @@ -17,15 +18,15 @@ }; - - myProject.onLoad(function() { $(".project-title").text(myProject.title); myMedia = myProject.getCurrentMedia(); + //chargement des chapitres et annotations existants loadInitChapters(); + loadInitAnnotation() IriSP.htmlPlayer( myMedia, @@ -45,8 +46,8 @@ pos = wContainer * t / myMedia.duration, btnCutChapter = $('.btn-cut-chapter'), wBtnCutChapter = btnCutChapter.outerWidth(); - - $(".indicateur-chapter").css("left",pos); + + $(".indicateur-chapter, .indicateur-annotation").css("left",pos); if(pos+wBtnCutChapter>wContainer){ btnCutChapter.css("left",(pos - wBtnCutChapter)); }else{ @@ -57,7 +58,7 @@ });//myProject.onLoad -//modal +//--modal $(document).on('click', 'a.open-modal', function(e){ var diaporama = $(this).attr('data-diaporama'), idAnnotation = $(this).attr('data-id'); @@ -103,7 +104,7 @@ var type = $(this).attr('data-type'); var idAnnotation = $(this).attr('data-id'); - $('a[href=#annotation-'+idAnnotation+']').closest('li').remove(); + $('a[href=#tab-annotation-'+idAnnotation+']').closest('li').remove(); $('.tab-content #annotation'+idAnnotation).remove(); $('#tab-list-annotation').tab('show'); @@ -114,7 +115,7 @@ }); -//title-editor +//--title-editor $('.project-title-editor ._popover').bind('click',function(e){e.preventDefault()}); $('.project-title-editor ._popover').popover({ html : true, @@ -145,7 +146,7 @@ $('.project-title').html($(this).val()); }); -//--chapter +//######################## chapter //edit $('.list-chapter-wrap').on('click', '.btn-edit-chapter', function(e){ @@ -170,17 +171,7 @@ } }); - function onTagItChange(e, ui) { - var idChapter = $(this).parents('form').attr('data-chapter-id'), - value = $('input[name=keywords]').val(); - currentChapter.keywords = value; - $('#row-list-chapter-'+idChapter).find('.list-chapter-tags').text(value); - } - var tagitParam = { - afterTagRemoved : onTagItChange, - afterTagAdded : onTagItChange - } function loadFormChapter(idChapter){ currentChapter = _.find(chapters, function(c){ return c.id == idChapter; }); @@ -251,7 +242,7 @@ begin : myMedia.currentTime, end : organizeNewChapter(myMedia.currentTime), description : 'description', - keywords : 'tag1,tag2' + keywords : ['tag1','tag2'] }; newChapter(dataChapter); @@ -316,14 +307,78 @@ begin : 0, end : myMedia.duration, description : 'description', - keywords : 'tag1,tag2' + keywords : ['tag1','tag2'] }; newChapter(dataChapter); } +//######################## annotation + + function loadInitAnnotation(){//nouveau projet, 1 chapitre + var dataAnnotation = { + title : 'Titre azerty', + begin : myMedia.duration/5, + end : myMedia.duration/3, + description : 'description', + type : 'video', + keywords : ['ideal', 'tag'] + }; + newAnnotation(dataAnnotation); + } + + function newAnnotation(dataAnnotation){ + var annotation = new IriSP.Model.Annotation(false, myProject); + annotation.setMedia(myMedia.id); + annotation.setBegin(dataAnnotation.begin); + annotation.setEnd(dataAnnotation.end); + annotation.title = dataAnnotation.title; + annotation.description = dataAnnotation.description; + annotation.type = dataAnnotation.type; + annotation.color = global.colors[(global.colorsIndex').css({ + left : left, + width : width, + backgroundColor : v.color + }).addClass('annotation').attr('id', 'annotation-timeline-'+v.id); + + timeline.append(segment); + + //liste + $.get('template.html', function(templates){ + var tplAnnotationRow = $(templates).filter('#tpl-list-annotation-row').html(); + tplAnnotationRow = Mustache.render(tplAnnotationRow, v); + annotationList.append(tplAnnotationRow); + + }); + + }); + } //edit annotation $('#list-annotations').on('click', 'a.btn-edit-annotation', function(e){ @@ -331,17 +386,26 @@ var idAnnotation = $(this).attr('data-id'); //si il est déjà ouvert - if($('#annotation-'+idAnnotation).length){ - $('a[href=#annotation-'+idAnnotation+']').tab('show'); + if($('#tab-annotation-'+idAnnotation).length){ + $('a[href=#tab-annotation-'+idAnnotation+']').tab('show'); }else{ - var typeAnnotation = $(this).attr('data-type'), - data = {id:idAnnotation}; - openNewTab(typeAnnotation, data); + var data = _.find(annotations, function(c){ return c.id == idAnnotation; }); + openTab(data.type, data); } }); + $('.tab-content').on('keyup', 'input[name=title], textarea', function(e){ + var name = $(this).attr('name'), + value = $(this).val(); + currentAnnotation[name] = value; + if(name == 'title'){ + var idAnnotation = $(this).parents('form').attr('data-id'); + $('#onglet-title-'+idAnnotation).text(value); + } + }); + //tab - $('#annotation-tab').on('click', 'a', function(e){ + $('#onglet-annotations').on('click', 'a', function(e){ e.preventDefault(); $(this).tab('show'); }); @@ -350,31 +414,34 @@ $(document).on('click', '.open-tab', function(e){ e.preventDefault(); var type = $(this).attr('data-type'); - var data = $(this).attr('data-data'); // à définir - openNewTab(type); + openTab(type); }); - function openNewTab(type, data){ + function openTab(type, data){ + + var dataView = {}; + if(_.isUndefined(data)){//nouveau + dataView.id = 'id' + (new Date()).getTime(); + dataView.title = 'New'; + }else{//édition + dataView = data; + } - var uniqId = 'id' + (new Date()).getTime(), - idAnnotation = (data !== undefined) ? data.id : uniqId, - tabContent = $('
'), + var idAnnotation = dataView.id, + tabContent = $('
'), iconTab; + currentAnnotation = _.find(annotations, function(c){ return c.id == idAnnotation; }); $.get('template.html', function(templates){ //head commun à tous - var view = { - titre : "un titre mustache", - id : uniqId - }; var tplHead = $(templates).filter('#tpl-head').html(); - var output = Mustache.render(tplHead, view); + var output = Mustache.render(tplHead, dataView); $(tabContent).append(output); - $(tabContent).find(".slider-duration").slider(configSlider); - + $(tabContent).find(".slider-duration").slider(configSlider(dataView)); + $(tabContent).find('.tag-it').tagit(tagitParam); //type - var viewType = {id : uniqId}; + var viewType = {id : idAnnotation}; var tpl = $(templates).filter('#tpl-'+type).html(); tpl = Mustache.render(tpl, viewType); $(tabContent).append(tpl); @@ -399,20 +466,45 @@ }); break; } - $(".nav-tabs li:last-child").after('
  • New ×
    • '); - $('a[href=#annotation-'+idAnnotation+']').tab('show'); + + dataView.iconTab = iconTab; + var tplOnglet = $(templates).filter('#tpl-onglet').html(); + var onglet = Mustache.render(tplOnglet, dataView); + + $(".nav-tabs li:last-child").after(onglet); + $('a[href=#tab-annotation-'+idAnnotation+']').tab('show'); }); - }//openNewTab() + }//openTab() + + //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; }); + }); + + //rafraichit annotations au retour sur la liste + $('#onglet-annotations').on('show', 'a[data-toggle="list-annotations"]', function (e) { + renderAnnotation(); + }); //fermer tab - $('#annotation-tab').on('click', 'span.close-tab', function(e){ + $('#onglet-annotations').on('click', 'span.close-tab', function(e){ e.preventDefault();e.stopPropagation(); - var idTab = $(this).parents('a').attr('href'); - $(this).closest('li').remove(); - $('.tab-content '+idTab).remove(); - $('#tab-list-annotation').tab('show'); + var idAnnotation = $(this).parents('a').attr('data-id'); + closeTab(idAnnotation); }); + $('.tab-content').on('click', '.btn-save-annotation', function(e){ + e.preventDefault(); + var idAnnotation = $(this).attr('data-id'); + closeTab(idAnnotation); + }); + + function closeTab(idAnnotation){ + $('#onglet-'+idAnnotation).remove(); + $('.tab-content #tab-annotation-'+idAnnotation).remove(); + $('#tab-list-annotation').tab('show'); + } //diaporama function addImageToDiaporama(diaporama){ @@ -448,11 +540,7 @@ -//sauvegarder annotation -$('.tab-content').on('click', '.btn-save-annotation', function(e){ - e.preventDefault(); - var idAnnotation = $(this).attr('data-id'); -}); + //annotation html $('.tab-content').on('click', '.btn-html-apercu', function(e){ @@ -467,7 +555,28 @@ //annotation > diaporama (spin) -//config +//################ config + +//tagit +function onTagItChange(e, ui) { + var tagitType = $(this).attr('data-type'), + value = $(this).val(); + + if(tagitType == 'chapter'){ + var idChapter = $(this).parents('form').attr('data-chapter-id'); + currentChapter.keywords = value.split(','); + $('#row-list-chapter-'+idChapter).find('.list-chapter-tags').text(value); + }else{ + currentAnnotation.keywords = value.split(','); + } + +} + +var tagitParam = { + afterTagRemoved : onTagItChange, + afterTagAdded : onTagItChange +} + //CLEditor annotation > text (wysiwyg) //http://premiumsoftware.net/cleditor/docs/GettingStarted.html#optionalParameters var wysiwygConfig = { @@ -486,26 +595,37 @@ }; //slider -var configSlider = { - range: true, - values: [ 0, 1*60*1000 ], - min: 0, - max: 10*60*1000, - slide: function( event, ui ) { - - var debutString = millisecondsToString(ui.values[0]); - var endString = millisecondsToString(ui.values[1]); - var durationString = millisecondsToString(ui.values[1] - ui.values[0]); +function configSlider(data){ + + return { + range: true, + values: [ data.begin.milliseconds, data.end.milliseconds ], + min: 0, + max: myMedia.duration.milliseconds, + slide: function( event, ui ) { + + data.setBegin(ui.values[0]); + data.setEnd(ui.values[1]); - var idSlider = $(this).attr('data-id'); - - $( '#'+ idSlider +'-begin' ).html(debutString); - $( '#'+ idSlider +'-duration' ).html(durationString); - $( '#'+ idSlider +'-end' ).html(endString); - - } -}; + var idSlider = $(this).attr('data-id'), + 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 +'-duration' ).html(data.getDuration().toString()); + $( '#'+ idSlider +'-end' ).html(data.end.toString()); + annotationTimeline.css({ + left : left, + width :width + }); + + } + }; + +} //milliseconds To 12h12m12s function millisecondsToString(milliseconds) { var oneHour = 3600000; @@ -569,7 +689,9 @@ $('.slider-duration').slider(configSlider); -$('#annotation-tab a:last-child').tab('show'); + + + $(".tag-it").tagit();