# HG changeset patch # User Anthony Ly # Date 1369325515 -7200 # Node ID e3a17ec94cd82b82561bc24f779695bc24098ffe # Parent ec6a5592c617a0abd3e75791952ce5dceab276c6 edition annotation first part diff -r ec6a5592c617 -r e3a17ec94cd8 integration/css/style.css --- a/integration/css/style.css Wed May 22 17:10:38 2013 +0200 +++ b/integration/css/style.css Thu May 23 18:11:55 2013 +0200 @@ -36,7 +36,7 @@ .project-title-editor{line-height: 28px; } .project-title-editor-form{margin: 0;} .project-action a:last-child{margin-right: 20px;} -.chapter-widget-info{} +.chapter-widget-info{margin-bottom: 20px;} .chapter-widget form{ margin: 0;} .chapter-widget input, .form-info-general-annotation input, .form-info-general-annotation textarea{width: 196px; max-width: 196px; } .chapter-widget textarea{width: 426px; max-width: 426px; min-width: 426px; height: 20px; @@ -44,19 +44,28 @@ -moz-transition: height .3s ease; transition: height .3s ease; } -.form-chapter-edit{padding-top: 10px;} +.form-chapter-edit{} + .chapter-widget-info table{margin: 0; padding-top: 40px; } .chapter-widget table td{} .chapter-widget textarea:focus{height: 100px;} .chapitre-cut-wrap{position: relative; height: 50px; margin-bottom: 10px;} .btn-cut-chapter{position: absolute;top: 20px;left: 11px;} -.indicateur-chapter{z-index:100; left:10px; width: 1px; height: 100%;background-color: #000; position: absolute;} +.indicateur-chapter, .indicateur-annotation{z-index:100; left:10px; width: 1px; height: 100%;background-color: #000; position: absolute;} .chapter-segments {width: 100%; height: 20px; margin: 0;} .chapter-segments li{cursor:pointer; float: left; list-style: none; line-height: 20px; height: 20px; text-align: center; overflow: hidden;} -.list-chapter-wrap{} -.list-chapter-wrap h4{padding: 10px; border-bottom: 1px solid; margin-bottom: 10px;} -.add-annotation-wrap, form.form-info-general-annotation{padding: 10px 0; background-color: #1abc9c;} -.add-annotation-wrap strong{padding-left: 10px;} +.list-chapter-wrap, .list-annotation-wrap, .section{background-color: #F5F5F5; border: 1px solid #E5E5E5;} +.list-chapter-wrap table, .list-annotation-wrap table{margin-bottom: 0;} +.list-chapter-wrap h4, .form-chapter-edit h4, .list-annotation-wrap h4, .title-section{padding: 10px; border-bottom: 1px solid; margin-bottom: 10px;} +.add-annotation-wrap, form.form-info-general-annotation{padding: 10px 0;} +form.form-info-general-annotation ul.tagit { + margin-left: 0px; + width: 195px; +} +form.form-info-general-annotation textarea{min-height:100px; height: 100px;min-width: 196px;} + +.add-annotation-wrap {margin-bottom: 20px; padding-top: 0;} + .slider-duration{width: 435px;display: inline-block; margin-bottom: 10px;} .btn-save-annotation{margin-right: 10px;} .edit-annotation-diaporama{} @@ -79,8 +88,9 @@ .close-tab:hover{color:#2c3e50;} .html-apercu{overflow: auto; margin-top: 10px;} .input-image-url{display: none;} -.timeline-annotation-widget{width: 460px;height: 40px;background-color: #ecf0f1; position: relative;} -.timeline-annotation-widget .annotation{width: 10px; height: 10px; background-color: #c0392b; position: absolute; top:15px;} +.timeline-annotations-wrap{position: relative;background-color: #ecf0f1;} +.timeline-annotations{width: 460px;height: 40px; position: relative;} +.timeline-annotations .annotation{width: 10px; height: 10px; background-color: #c0392b; position: absolute; top:15px;} ul.tagit{margin-left: 10px;-webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px;} @@ -88,10 +98,11 @@ /* Tangle */ .time-tangle { color: #2c3e50; cursor: w-resize; position: relative; + border-bottom: 1px dashed #2c3e50; } .time-tangle:hover, .time-tangle.active { - color: #c0392b; border-bottom: 1px dashed #2c3e50; + color: #c0392b; } .time-tangle:hover:after, .time-tangle.active:after { diff -r ec6a5592c617 -r e3a17ec94cd8 integration/edition.html --- a/integration/edition.html Wed May 22 17:10:38 2013 +0200 +++ b/integration/edition.html Thu May 23 18:11:55 2013 +0200 @@ -2,7 +2,7 @@ - Aix - Back office > Liste des projets + Aix - Back office > Edition @@ -57,8 +57,9 @@
-
-
+
+
+
@@ -68,7 +69,7 @@
    - Nouveau chapitre +
    @@ -110,7 +111,7 @@ -->
    -

    Liste des chapitres

    +

    Liste des chapitres

    @@ -152,64 +153,69 @@
    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    TitreTypeDébutDuréeFinActions
    Titre annotationVidéo4:264:264:26 - - - - - -
    Titre annotationDiaporama4:264:264:26 - - - - - -
    +
    +

    Liste des annotations

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    TitreTypeDébutDuréeFinActions
    Titre annotationVidéo4:264:264:26 + + + + + +
    Titre annotationDiaporama4:264:264:26 + + + + + +
    +
    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(); diff -r ec6a5592c617 -r e3a17ec94cd8 integration/template.html --- a/integration/template.html Wed May 22 17:10:38 2013 +0200 +++ b/integration/template.html Thu May 23 18:11:55 2013 +0200 @@ -1,12 +1,13 @@ + +