| author | Anthony Ly <anthonyly.com@gmail.com> |
| Thu, 23 May 2013 18:11:55 +0200 | |
| changeset 34 | e3a17ec94cd8 |
| parent 29 | ec6a5592c617 |
| child 35 | 6eb0de10e9f8 |
--- 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 {
--- 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 @@ <html> <head> <meta charset="utf-8"> - <title>Aix - Back office > Liste des projets</title> + <title>Aix - Back office > Edition</title> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> @@ -57,8 +57,9 @@ <div class="row"> <div class="span6"> <div class="main-video"></div> - <div class="timeline-annotation-widget"> - <div class="annotation" style="left:20%"></div> + <div class="timeline-annotations-wrap"> + <div class="indicateur-annotation"></div> + <div class="timeline-annotations"></div> </div> <!-- chapter-widget --> <div class="chapter-widget"> @@ -68,7 +69,7 @@ <div class="indicateur-chapter"></div> <ul class="chapter-segments"></ul> - <a href="#" class="btn btn-primary btn-cut-chapter"><i class="icon-flag"></i> Nouveau chapitre</a> + <a href="#" class="btn btn-primary btn-cut-chapter"><i class="icon-flag"></i> <i class="icon-cut"></i></a> </div> </div> <div class="chapter-widget-info"> @@ -110,7 +111,7 @@ --> </div> <div class="list-chapter-wrap"> - <h4><i class="icon-flag"></i> Liste des chapitres</h4> + <h4><i class="icon-flag"></i> <i class="icon-th-list"></i> Liste des chapitres</h4> <table class="table"> <thead> <tr> @@ -152,64 +153,69 @@ </div> <div class="span6 col-right"> <!-- tab --> - <ul class="nav nav-tabs" id="annotation-tab"> - <li class="active"><a id="tab-list-annotation" href="#list-annotations"><i class="icon-bookmark"></i> Annotations</a></li> + <ul class="nav nav-tabs" id="onglet-annotations"> + <li class="active"><a data-toggle="list-annotations" id="tab-list-annotation" href="#list-annotations"><i class="icon-bookmark"></i> Annotations</a></li> <li><a href="#annotation-azerty"><i class="icon-film"></i> All <span class="close-tab">×</span></a> </li> </ul> <div class="tab-content"> <!-- liste annotations --> <div class="tab-pane active" id="list-annotations"> - <div class="add-annotation-wrap"> - <strong><i class="icon-plus"></i> Ajouter :</strong> - <a href="#" data-type="video" class="btn open-tab"><i class="icon-film"></i> Vidéo</a> - <a href="#" data-type="diaporama" class="btn open-tab"><i class="icon-picture"></i> Diaporama</a> - <a href="#" data-type="text" class="btn open-tab"><i class="icon-align-left"></i> Texte</a> - <a href="#" data-type="html" class="btn open-tab"><i class="icon-link"></i> Html</a> + <div class="add-annotation-wrap section"> + <h4 class="title-section"><i class="icon-bookmark"></i> <i class="icon-plus"></i> Ajouter une annotation de type</h4> + <div class="text-center"> + <a href="#" data-type="son" class="btn open-tab"><i class="icon-volume-up"></i> Son</a> + <a href="#" data-type="video" class="btn open-tab"><i class="icon-film"></i> Vidéo</a> + <a href="#" data-type="diaporama" class="btn open-tab"><i class="icon-picture"></i> Diaporama</a> + <a href="#" data-type="text" class="btn open-tab"><i class="icon-align-left"></i> Texte</a> + <a href="#" data-type="html" class="btn open-tab"><i class="icon-link"></i> Html</a> + </div> </div> - <h4>Liste des annotations</h4> - <table class="table table-striped"> - <thead> - <tr> - <th>Titre</th> - <th>Type</th> - <th>Début</th> - <th>Durée</th> - <th>Fin</th> - <th>Actions</th> - </tr> - </thead> - <tbody> - <tr id="row-list-annotation-id1"> - <td>Titre annotation</td> - <td>Vidéo</td> - <td>4:26</td> - <td>4:26</td> - <td>4:26</td> - <td> - <a href="#" data-id="annotation-123" class="btn btn-edit-annotation" data-type="video"> - <i class="icon-pencil"></i></a> - <a data-id="annotation-123" data-type="annotation" data-title="Annotation XYZ" href="#row-list-annotation-id1" class="btn btn-delete"> - <i class="icon-trash delete-annotation"></i> - </a> - </td> - </tr> - <tr id="row-list-annotation-id2"> - <td>Titre annotation</td> - <td>Diaporama</td> - <td>4:26</td> - <td>4:26</td> - <td>4:26</td> - <td> - <a href="#" data-id="annotation-456" class="btn btn-edit-annotation" data-type="diaporama"> - <i class="icon-pencil "></i></a> - <a data-id="annotation-456" data-type="annotation" data-title="Annotation XYZ" href="#row-list-annotation-id2" class="btn btn-delete"> - <i class="icon-trash delete-annotation"></i> - </a> - </td> - </tr> - </tbody> - </table> + <div class="list-annotation-wrap"> + <h4><i class="icon-bookmark"></i> <i class="icon-th-list"></i> Liste des annotations</h4> + <table class="table"> + <thead> + <tr> + <th>Titre</th> + <th>Type</th> + <th>Début</th> + <th>Durée</th> + <th>Fin</th> + <th>Actions</th> + </tr> + </thead> + <tbody id="list-annotations-rows"> + <tr id="row-list-annotation-id1"> + <td>Titre annotation</td> + <td>Vidéo</td> + <td>4:26</td> + <td>4:26</td> + <td>4:26</td> + <td> + <a href="#" data-id="annotation-123" class="btn btn-edit-annotation" data-type="video"> + <i class="icon-pencil"></i></a> + <a data-id="annotation-123" data-type="annotation" data-title="Annotation XYZ" href="#row-list-annotation-id1" class="btn btn-delete"> + <i class="icon-trash delete-annotation"></i> + </a> + </td> + </tr> + <tr id="row-list-annotation-id2"> + <td>Titre annotation</td> + <td>Diaporama</td> + <td>4:26</td> + <td>4:26</td> + <td>4:26</td> + <td> + <a href="#" data-id="annotation-456" class="btn btn-edit-annotation" data-type="diaporama"> + <i class="icon-pencil "></i></a> + <a data-id="annotation-456" data-type="annotation" data-title="Annotation XYZ" href="#row-list-annotation-id2" class="btn btn-delete"> + <i class="icon-trash delete-annotation"></i> + </a> + </td> + </tr> + </tbody> + </table> + </div> </div> <!-- exemple annotation all --> <div class="tab-pane" id="annotation-azerty">
--- 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<global.colors.length) ? global.colorsIndex++ : (global.colorsIndex=0)]; + annotation.keywords = dataAnnotation.keywords; + + annotations.push(annotation); + renderAnnotation(); + } + + function renderAnnotation(){ + var timeline = $('.timeline-annotations'), + wTimeline = timeline.width(), + annotationList = $('#list-annotations-rows'); + + annotations = _.sortBy(annotations, function(c){ + return c.begin; + }); + + timeline.empty(); + annotationList.empty(); + + $.each(annotations, function(k, v){ + + //timeline + var width = Math.floor(v.getDuration() * wTimeline / myMedia.duration), + left = Math.floor(v.begin * wTimeline / myMedia.duration), + segment = $('<div>').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 = $('<div class="tab-pane" id="annotation-'+idAnnotation+'"></div>'), + var idAnnotation = dataView.id, + tabContent = $('<div class="tab-pane" id="tab-annotation-'+idAnnotation+'"></div>'), 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('<li><a href="#annotation-'+idAnnotation+'"><i class="icon-'+iconTab+'"></i> New <span class="close-tab">×</span></a></li>'); - $('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();
--- 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 @@ <script id="tpl-head" type="text/html"> -<form action="#" class="form-info-general-annotation"> +<form action="#" class="form-info-general-annotation" style="background-color:{{color}}" data-id="{{id}}"> + <div class="row"> <div class="span3 text-right"> - <input type="text" placeholder="Titre de l'annotation.." value="{{titre}}"> - <textarea name="" id=""></textarea> + <input type="text" placeholder="Titre de l'annotation.." name="title" value="{{title}}"> + <textarea id="" name="description">{{description}}</textarea> </div> <div class="span3"> - <input type="text" placeholder="Titre de l'annotation.."> + <input type="text" class="tag-it" data-type="annotation" value="{{keywords}}"> <table class="table text-right"> <thead> <tr> @@ -17,9 +18,9 @@ </thead> <tbody> <tr> - <td id="{{id}}-begin" class="span1">4:20</td> - <td id="{{id}}-duration" class="span1">4:20</td> - <td id="{{id}}-end" class="span1">4:20</td> + <td id="{{id}}-begin" class="span1">{{begin}}</td> + <td id="{{id}}-duration" class="span1">{{getDuration}}</td> + <td id="{{id}}-end" class="span1">{{end}}</td> </tr> </tbody> </table> @@ -30,14 +31,24 @@ <div data-id="{{id}}" id="" class="slider-duration"></div> </div> <div class="span6 text-right"> - <button data-id="{{id}}" type="submit" class="btn btn-primary btn-save-annotation"> - <i class="icon-save"></i> Enregistrer annotation - </button> + <a class="btn btn-primary btn-save-annotation" data-id="{{id}}"> + <i class="icon-ok"></i> Ok + </a> </div> </div> </form> </script> +<script id="tpl-onglet" type="text/html"> +<li id="onglet-{{id}}"> + <a data-id="{{id}}" data-toggle="annotation" href="#tab-annotation-{{id}}"> + <i class="icon-{{iconTab}}"></i> + <span id="onglet-title-{{id}}">{{title}}</span> + <span class="close-tab">×</span> + </a> +</li> +</script> + <script id="tpl-video" type="text/html"> <div class="edit-annotation-title row"> <h3 class="span3"><i class="icon-film"></i> Vidéo</h3> @@ -166,16 +177,16 @@ </script> <script id="tpl-list-annotation-row" type="text/html"> -<tr id="row-list-annotation-{{id}}"> - <td>Titre annotation</td> - <td>Vidéo</td> - <td>4:26</td> - <td>4:26</td> - <td>4:26</td> +<tr id="row-list-annotation-{{id}}" style="background-color : {{color}};"> + <td>{{title}}</td> + <td>{{type}}</td> + <td>{{begin}}</td> + <td>{{getDuration}}</td> + <td>{{end}}</td> <td> - <a href="#" data-id="annotation-{{id}}" class="btn btn-edit-annotation" data-type="video"> + <a href="#" data-id="{{id}}" class="btn btn-edit-annotation" data-type="{{type}}"> <i class="icon-pencil"></i></a> - <a data-id="annotation-{{id}}" data-type="annotation" data-title="Annotation XYZ" href="#row-list-annotation-{{id}}" class="btn btn-delete btn-delete-annotation"> + <a data-id="{{id}}" data-type="annotation" data-title="{{title}}" href="#row-list-annotation-{{id}}" class="btn btn-delete btn-delete-annotation"> <i class="icon-trash delete-annotation"></i> </a> </td> @@ -206,10 +217,11 @@ <script id="tpl-chapter-edit" type="text/html"> <form data-chapter-id="{{id}}" id="form-chapter-edit-{{id}}" action="#" class="form-chapter-edit" style="background-color:{{color}}"> + <h4><i class="icon-flag"></i> <i class="icon-pencil"></i> Modifier le chapitre</h4> <div class="row"> <div class="span3 text-right"> <input name="title" type="text" value="{{title}}"> - <input name="keywords" type="text" class="tag-it" value="{{keywords}}"> + <input name="keywords" type="text" class="tag-it" data-type="chapter" value="{{keywords}}"> </div> <div class="span3"> <table class="table text-right">