| author | Anthony Ly <anthonyly.com@gmail.com> |
| Fri, 24 May 2013 17:24:11 +0200 | |
| changeset 37 | d6fa8041a90b |
| parent 36 | 4c2428524c22 (diff) |
| parent 33 | 8ebe51953418 (current diff) |
| child 38 | 0e6e631718ee |
| child 39 | 3c22235068cf |
| src/metadatacomposer/templates/partial/iri_composer_header.html | file | annotate | diff | comparison | revisions |
--- a/integration/css/style.css Fri May 24 12:06:04 2013 +0200 +++ b/integration/css/style.css Fri May 24 17:24:11 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,19 +88,28 @@ .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;} +.video-wrap{position: relative;} +.annotations-display{} +.annotation-display-view{display:none;text-align:center; line-height:200px;background-color: #fff;position: absolute; width: 200px; margin-left: -100px; height: 200px; margin-top: -100px; top: 50%; left: 50%;} +.list-current-annotations{position: absolute;bottom: 40px; left: 20px; margin: 0;} +.list-current-annotations li{list-style: none; margin-top: 4px;} +.list-current-annotations a{text-align:center; line-height:20px; color:#FFF;display: inline-block; background-color: #589; width: 20px; height: 20px; } +.list-current-annotations a:hover{text-decoration: none;} /* 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 Fri May 24 12:06:04 2013 +0200 +++ b/integration/edition.html Fri May 24 17:24:11 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]--> @@ -56,9 +56,18 @@ </div> <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="video-wrap"> + <div class="main-video"></div> + <div class="annotations-display"> + <div class="annotation-display-view"></div> + <ul class="list-current-annotations"> + + </ul> + </div> + </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 +77,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 +119,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 +161,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"> @@ -251,6 +265,28 @@ </div> </div> </form> + <!-- Son --> + <div class="edit-annotation-title row"> + <h3 class="span3"><i class="icon-volume-up"></i> Son</h3> + </div> + <div class="row annotation-son-content"> + <div class="span6"> + <form class="form-horizontal"> + <div class="control-group"> + <label class="control-label" for="url-source">URL source :</label> + <div class="controls"> + <input type="text" id="url-source" placeholder="http://"> + </div> + </div> + <div class="control-group"> + <label class="control-label" for="embed">Code embed :</label> + <div class="controls"> + <textarea name="" id="embed" cols="30" rows="10"></textarea> + </div> + </div> + </form> + </div> + </div> <!-- vidéo --> <div class="edit-annotation-title row"> <h3 class="span3"><i class="icon-film"></i> Vidéo</h3>
--- a/integration/js/edition.js Fri May 24 12:06:04 2013 +0200 +++ b/integration/js/edition.js Fri May 24 17:24:11 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,19 +46,74 @@ 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{ btnCutChapter.css("left",pos); } + + //annotations view + var currentAnnotationsDisplay = new Array(); + $.each(annotations, function(k, v){ + + if(v.begin <= t && v.end >= t){ + currentAnnotationsDisplay.push(v.id); + if(!$('#item-current-annotation-'+v.id).length){ + var itemAnnotation = + $('<li>') + .attr('id', 'item-current-annotation-'+v.id) + .attr('data-id', v.id) + .append( + $('<a>') + .css('backgroundColor', v.color) + .attr('data-id', v.id) + .attr('href', '#') + .append( + $('<i>').addClass('icon-'+getIcon(v.type)) + ) + ); + $('.list-current-annotations').append(itemAnnotation) + } + } + }); + $.each($('.list-current-annotations li'), function(k, v){ + var idAnnotation = $(this).attr('data-id'), + annotationDisplayView = $('.annotation-display-view'); + if($.inArray(idAnnotation, currentAnnotationsDisplay)<0){//il ne doit plus être affiché + $('#item-current-annotation-'+idAnnotation).remove(); + if(annotationDisplayView.attr('data-id') == idAnnotation && annotationDisplayView.is(":visible")){ + annotationDisplayView.hide(); + } + } + }); + + });//timeupdate });//myProject.onLoad +//display annotation view +$('.list-current-annotations').on('click', 'a', function(e){ + e.preventDefault(); + var annotationDisplayView = $('.annotation-display-view'), + idAnnotation = $(this).attr('data-id'); + var annotation = _.find(annotations, function(c){ return c.id == idAnnotation; }); -//modal + if(annotationDisplayView.attr('data-id') == idAnnotation && annotationDisplayView.is(":visible")){ + annotationDisplayView.hide(); + }else{ + annotationDisplayView + .attr('data-id', idAnnotation) + .css('backgroundColor', annotation.color) + .text(annotation.type) + .show(); + } +}); + +//########### modal + $(document).on('click', 'a.open-modal', function(e){ var diaporama = $(this).attr('data-diaporama'), idAnnotation = $(this).attr('data-id'); @@ -97,24 +153,14 @@ $('.popup').modal('hide'); }); - $(document).on('click','.btn-delete-annotation', function(e){ - e.preventDefault(); - //si c'est une annotation et que la tab est ouverte, on la ferme - var type = $(this).attr('data-type'); - - var idAnnotation = $(this).attr('data-id'); - $('a[href=#annotation-'+idAnnotation+']').closest('li').remove(); - $('.tab-content #annotation'+idAnnotation).remove(); - $('#tab-list-annotation').tab('show'); - - }); + //confirmation suppression $("#modal-confirm").on('click', '#btn-delete-modal', function(e){ }); -//title-editor +//--title-editor $('.project-title-editor ._popover').bind('click',function(e){e.preventDefault()}); $('.project-title-editor ._popover').popover({ html : true, @@ -145,7 +191,7 @@ $('.project-title').html($(this).val()); }); -//--chapter +//######################## chapter //edit $('.list-chapter-wrap').on('click', '.btn-edit-chapter', function(e){ @@ -170,17 +216,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 +287,7 @@ begin : myMedia.currentTime, end : organizeNewChapter(myMedia.currentTime), description : 'description', - keywords : 'tag1,tag2' + keywords : ['tag1','tag2'] }; newChapter(dataChapter); @@ -316,14 +352,80 @@ 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); + renderAnnotation(); + } + + 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); + + return annotation; + } + + 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 +433,38 @@ 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); + } + }); + + //delete annotation + $(document).on('click','.btn-delete-annotation', function(e){ + e.preventDefault(); + + var idAnnotation = $(this).attr('data-id'); + annotations = _(annotations).reject(function(c) { return c.id == idAnnotation; }); + closeTab(idAnnotation); + if(!$(this).hasAttr('data-no-render'))//si on ferme à partir de la tab renderAnnotation sera appelé 2 fois + renderAnnotation(); + + }); + //tab - $('#annotation-tab').on('click', 'a', function(e){ + $('#onglet-annotations').on('click', 'a', function(e){ e.preventDefault(); $(this).tab('show'); }); @@ -350,31 +473,44 @@ $(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 + var currentTimePlusUnMin = 60 * 1000 + myMedia.currentTime, + endAnnotation = (currentTimePlusUnMin<myMedia.duration) ? currentTimePlusUnMin : myMedia.duration; + var dataAnnotation = { + title : 'Nouveau', + begin : myMedia.currentTime, + end : endAnnotation, + description : 'description', + type : type, + keywords : [] + }; + dataView = newAnnotation(dataAnnotation); + renderAnnotation(); + }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); @@ -382,15 +518,16 @@ //particularité selon type switch(type){ - case 'video': iconTab = 'film'; + case 'son': + break; + case 'video': break; case 'text': - iconTab = 'align-left'; $(tabContent).find('.wysiwyg').cleditor(wysiwygConfig); break; - case 'html': iconTab = 'link'; + case 'html': break; - case 'diaporama': iconTab = 'picture'; + case 'diaporama': $(tabContent).find('.number-spin').spin(spinParam); $(tabContent).find('.ui-sortable').sortable({ stop : function(event, ui){ @@ -399,20 +536,63 @@ }); 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 = getIcon(type); + 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() + + function getIcon(type){ + var icon; + switch(type){ + case 'son': icon = 'volume-up'; + break; + case 'video': icon = 'film'; + break; + case 'text': + icon = 'align-left'; + break; + case 'html': icon = 'link'; + break; + case 'diaporama': icon = 'picture'; + break; + } + return icon; + } + + //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 +628,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 +643,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,73 +683,36 @@ }; //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){ - var idSlider = $(this).attr('data-id'); - - $( '#'+ idSlider +'-begin' ).html(debutString); - $( '#'+ idSlider +'-duration' ).html(durationString); - $( '#'+ idSlider +'-end' ).html(endString); - - } -}; - -//milliseconds To 12h12m12s -function millisecondsToString(milliseconds) { - var oneHour = 3600000; - var oneMinute = 60000; - var oneSecond = 1000; - var seconds = 0; - var minutes = 0; - var hours = 0; - var result; - - if (milliseconds >= oneHour) { - hours = Math.floor(milliseconds / oneHour); - } + 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]); - milliseconds = hours > 0 ? (milliseconds - hours * oneHour) : milliseconds; - - if (milliseconds >= oneMinute) { - minutes = Math.floor(milliseconds / oneMinute); - } - - milliseconds = minutes > 0 ? (milliseconds - minutes * oneMinute) : milliseconds; - - if (milliseconds >= oneSecond) { - seconds = Math.floor(milliseconds / oneSecond); - } - - milliseconds = seconds > 0 ? (milliseconds - seconds * oneSecond) : milliseconds; + 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); - if (hours > 0) { - result = (hours > 9 ? hours : "0" + hours) + "h"; - } else { - result = ""; - } + $( '#'+ idSlider +'-begin' ).html(data.begin.toString()); + $( '#'+ idSlider +'-duration' ).html(data.getDuration().toString()); + $( '#'+ idSlider +'-end' ).html(data.end.toString()); - if (minutes > 0) { - result += (minutes > 9 ? minutes : "0" + minutes) + "m"; - } else { - result += "00m"; - } + annotationTimeline.css({ + left : left, + width :width + }); - if (seconds > 0) { - result += (seconds > 9 ? seconds : "0" + seconds) + "s"; - } else { - result += "00s"; - } + } + }; - return result; } //test @@ -569,8 +729,6 @@ $('.slider-duration').slider(configSlider); -$('#annotation-tab a:last-child').tab('show'); - $(".tag-it").tagit(); });//ready \ No newline at end of file
--- a/integration/template.html Fri May 24 12:06:04 2013 +0200 +++ b/integration/template.html Fri May 24 17:24:11 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,51 @@ <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-danger btn-delete-annotation" data-id="{{id}}" data-no-render> + <i class="icon-trash"></i> Delete + </a> + <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-son" type="text/html"> +<div class="edit-annotation-title row"> + <h3 class="span3"><i class="icon-volume-up"></i> Son</h3> +</div> +<div class="row annotation-son-content"> + <div class="span6"> + <form class="form-horizontal"> + <div class="control-group"> + <label class="control-label" for="url-source">URL source :</label> + <div class="controls"> + <input type="text" id="url-source" placeholder="http://"> + </div> + </div> + <div class="control-group"> + <label class="control-label" for="embed">Code embed :</label> + <div class="controls"> + <textarea name="" id="embed" cols="30" rows="10"></textarea> + </div> + </div> + </form> + </div> +</div> +</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 +204,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-annotation"> <i class="icon-trash delete-annotation"></i> </a> </td> @@ -196,7 +234,7 @@ <a href="#" class="btn btn-edit-chapter" data-chapter-id="{{id}}"><i class="icon-pencil"></i></a> </td> <td> - <a data-title="Chapitre 1" data-chapter-id="{{id}}" href="#row-list-chapter-{{id}}" class="btn btn-delete-chapter"><i class="icon-trash delete-annotation"></i></a> + <a data-title="{{title}}" data-chapter-id="{{id}}" href="#row-list-chapter-{{id}}" class="btn btn-delete-chapter"><i class="icon-trash delete-annotation"></i></a> </td> </tr> </table> @@ -206,10 +244,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">