| author | Anthony Ly <anthonyly.com@gmail.com> |
| Tue, 21 May 2013 17:41:31 +0200 | |
| changeset 24 | 11a3be0689fc |
| parent 23 | 2a3159ee4ed0 (diff) |
| parent 20 | 64a77e529f23 (current diff) |
| child 25 | ab966883a458 |
--- a/integration/css/style.css Tue May 21 14:54:41 2013 +0200 +++ b/integration/css/style.css Tue May 21 17:41:31 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{background-color:#e74c3c; padding: 10px 0; margin-bottom: 20px;} +.chapter-widget-info{} .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,16 +44,16 @@ -moz-transition: height .3s ease; transition: height .3s ease; } +.form-chapter-edit{padding-top: 10px;} .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: 60px;} -.btn-cut-chapter{position: absolute;bottom: 0;left: 11px;} -.indicateur-chapter{z-index:100; left:10px; width: 1px; height: 100%;background-color: #e74c3c; position: absolute;} -.chapter-segments {width: 100%; height: 20px; background-color: #856; margin: 0;} -.chapter-segments li{ width:50%; background-color: #f1c40f;float: left; list-style: none; line-height: 20px; height: 20px; text-align: center;} -.chapter-segments li:last-child{background-color: #27ae60;} -.list-chapter-wrap{background-color: #3498db;} +.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;} +.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;} @@ -80,4 +80,7 @@ .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;} \ No newline at end of file +.timeline-annotation-widget .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;} \ No newline at end of file
--- a/integration/edition.html Tue May 21 14:54:41 2013 +0200 +++ b/integration/edition.html Tue May 21 17:41:31 2013 +0200 @@ -66,24 +66,24 @@ <div class="span6 chapitre-cut-wrap"> <div class="indicateur-chapter"></div> - <ul class="chapter-segments"> - <li>chapitre 1</li> - <li>chapitre azerty</li> - </ul> + <ul class="chapter-segments"></ul> <a href="#" class="btn btn-primary btn-cut-chapter"><i class="icon-flag"></i> Nouveau chapitre</a> </div> </div> <div class="chapter-widget-info"> + <!-- <form action="#" class="form-chapter-edit"> <div class="row"> <div class="span3 text-right"> - <input type="text"> - <input type="text" class="tag-it"> + <input name="title" type="text"> + <input name="tags" type="text" class="tag-it"> </div> <div class="span3"> + <input type="hidden" name="begin"> + <input type="hidden" name="duration"> + <input type="hidden" name="end"> <table class="table text-right"> - <thead> <tr> <th class="span1">Début</th> @@ -93,9 +93,9 @@ </thead> <tbody> <tr> - <td class="span1">4:20</td> - <td class="span1">4:20</td> - <td class="span1">4:20</td> + <td class="span1 begin">4:20</td> + <td class="span1 duration">4:20</td> + <td class="span1 end">4:20</td> </tr> </tbody> </table> @@ -103,10 +103,11 @@ </div> <div class="row"> <div class="span6 text-center"> - <textarea class="" name="" id=""></textarea> + <textarea class="" name="description" id=""></textarea> </div> </div> </form> + --> </div> <div class="list-chapter-wrap"> <h4><i class="icon-flag"></i> Liste des chapitres</h4> @@ -122,6 +123,7 @@ </tr> </thead> <tbody class="list-chapter-rows-wrap"> + <!-- <tr id="row-list-chapter-id1"> <td>Titre d'un chapitre</td> <td>Tags, Tags, Tags</td> @@ -141,6 +143,7 @@ </table> </td> </tr> + --> </tbody> </table> </div> @@ -445,6 +448,7 @@ <script src="js/metadataplayer-core.js"></script> <script src="js/ldt-serializer.js"></script> <script src="js/common.js"></script> + <script src="js/tangle.js"></script> <script src="js/edition.js"></script> <script>
--- a/integration/js/common.js Tue May 21 14:54:41 2013 +0200 +++ b/integration/js/common.js Tue May 21 17:41:31 2013 +0200 @@ -44,11 +44,15 @@ var titleMedia = $(this).attr('data-title'), textModal = $('<p>Êtes-vous sûr de vouloir supprimer <strong>'+titleMedia+'</strong> ?</p>'), eltDelete = $(this).attr('href'); - $("#modal-confirm #btn-delete-modal").attr('data-id-elt-delete', eltDelete); + $("#modal-confirm #btn-delete-modal").attr('data-id-elt-delete', eltDelete).focus(); $("#modal-confirm .modal-body").empty().append(textModal); $("#modal-confirm").modal('show'); }); + $("#modal-confirm").on('shown', function() { + $("#modal-confirm #btn-delete-modal").focus() + }); + $("#modal-confirm").on('click', '#btn-delete-modal', function(e){ e.preventDefault(); var idEltDelete = $(this).attr('data-id-elt-delete');
--- a/integration/js/edition.js Tue May 21 14:54:41 2013 +0200 +++ b/integration/js/edition.js Tue May 21 17:41:31 2013 +0200 @@ -2,9 +2,14 @@ var global = { diaporama : null, - idAnnotation : null + idAnnotation : null, + colors : ['#f39c12', '#2ecc71', '#3498db', '#9b59b6', + '#f1c40f', '#e67e22', '#e74c3c', '#ecf0f1', + '#16a085', '#27ae60', '#2980b9', '#8e44ad', '#2c3e50', + '#f39c12', '#d35400', '#c0392b', '#bdc3c7', '#7f8c8d'] }, -chapitres = [], +currentChapter = null, +chapters = [], annotations = []; myProject.onLoad(function() { @@ -13,6 +18,8 @@ myMedia = myProject.getCurrentMedia(); + loadChapters(); + IriSP.htmlPlayer( myMedia, $(".main-video"), @@ -27,8 +34,8 @@ myMedia.on("timeupdate", function(t) { //curseur chapitre - var pos = $(".chapitre-cut-wrap").width() * t / myMedia.duration, - wContainer = $('.chapitre-cut-wrap').width(), + var wContainer = $('.chapitre-cut-wrap').width() - 1, + pos = wContainer * t / myMedia.duration, btnCutChapter = $('.btn-cut-chapter'), wBtnCutChapter = btnCutChapter.outerWidth(); @@ -38,7 +45,27 @@ }else{ btnCutChapter.css("left",pos); } - + + /* + //chapitre edit + var formChapter = $('.form-chapter-edit'), + inputBeginChapter = formChapter.find('input[name=begin]'), + inputDurationChapter = formChapter.find('input[name=duration]'), + inputEndChapter = formChapter.find('input[name=end]'), + viewBeginChapter = formChapter.find('.begin'), + viewDurationChapter = formChapter.find('.duration'), + viewEndChapter = formChapter.find('.end'), + timeBegin = 0, + timeEnd = t.milliseconds, + timeDuration = timeEnd - timeBegin; + + inputBeginChapter.val(timeBegin); + inputEndChapter.val(timeEnd); + inputDurationChapter.val(timeDuration); + viewBeginChapter.html(millisecondsToString(timeBegin)); + viewDurationChapter.html(millisecondsToString(timeDuration)); + viewEndChapter.html(millisecondsToString(timeEnd)); + */ });//timeupdate });//myProject.onLoad @@ -55,13 +82,15 @@ if(idAnnotation !== undefined){ global.idAnnotation = idAnnotation; } - }) + }); + //edition image $('.popup').on('change', '#media-type-select', function(e){ var typeImage = $(this).val(); $('.input-image-url, .input-image-upload').hide(); $('.input-image-'+typeImage).show(); }); + //bibliotheque //video $('.popup').on('click', '.bibliotheque-video a', function(e){ @@ -82,16 +111,16 @@ $('.popup').modal('hide'); }); - $(document).on('click','.btn-delete', function(e){ + $(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'); - if(type == 'annotation'){ - var idAnnotation = $(this).attr('data-id'); - $('a[href=#annotation-'+idAnnotation+']').closest('li').remove(); - $('.tab-content #annotation'+idAnnotation).remove(); - $('#tab-list-annotation').tab('show'); - } + + 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 @@ -131,39 +160,200 @@ }); //--chapter - $('.list-chapter-wrap').on('click', '.edit-chapter', function(e){ + +//edit + $('.list-chapter-wrap').on('click', '.btn-edit-chapter', function(e){ e.preventDefault(); - var viewChapter = { - titre : 'titre du chapitre', - tags : 'tag 1, tag 2, tag 3', - description : 'lorem ipsum' + var idChapter = $(this).attr('data-chapter-id'); + loadFormChapter(idChapter); + currentChapter = _.find(chapters, function(c){ return c.id == idChapter; }); + }); + + $('.chapter-segments').on('click', 'li', function(){ + var idChapter = $(this).attr('id'); + loadFormChapter(idChapter); + }); + + $('.chapter-widget-info').on('keyup', 'input[name=title], textarea', function(e){ + var name = $(this).attr('name'), + value = $(this).val(); + currentChapter[name] = value; + if(name == 'title'){ + var idChapter = $(this).parents('form').attr('data-chapter-id'); + $('.chapter-segments').find('#'+idChapter).text(value); + $('#row-list-chapter-'+idChapter).find('td:first').text(value); } - + }); + + function onTagItChange(e, ui) { + var idChapter = $(this).parents('form').attr('data-chapter-id'), + value = $('input[name=tags]').val(); + currentChapter.tags = value; + $('#row-list-chapter-'+idChapter).find('.list-chapter-tags').text(value); + } + + var tagitParam = { + afterTagRemoved : onTagItChange, + afterTagAdded : onTagItChange + } + + function loadFormChapter(idChapter){ + var chapterData = _.find(chapters, function(c){ return c.id == idChapter; }), + chapterWrap = $('.chapter-widget-info'); + + currentChapter = chapterData; + $.get('template.html', function(templates){ var tpl = $(templates).filter('#tpl-chapter-edit').html(); - var tpl = Mustache.render(tpl, viewChapter); - $('.form-chapter-edit').empty().append(tpl); + tpl = Mustache.render(tpl, chapterData); + chapterWrap.empty().append(tpl); + chapterWrap.find('.tag-it').tagit(tagitParam); }); - }); - //nouveau chapitre + } + + +//supprimer +$('.list-chapter-wrap').on('click', '.btn-delete-chapter', function(e){ + e.preventDefault(); + + if(chapters.length == 1){alert('Le projet doit contenir au moins un chapitre.'); return;} + var idChapter = $(this).attr('data-chapter-id'), + chapter = _.find(chapters, function(c){ return c.id == idChapter; }), + indexChapter = _.indexOf(chapters, chapter), + chapterModify; + if(indexChapter == 0){ + chapterModify = chapters[1]; + chapterModify.begin = 0; + chapterModify.duration = chapterModify.end; + }else{ + chapterModify = chapters[indexChapter-1]; + chapterModify.end = chapter.end; + chapterModify.duration = chapterModify.end - chapterModify.begin; + } + chapters = _(chapters).reject(function(c) { return c.id == idChapter; }); + renderChapter(); + //si le formulaire est visible + if($('#form-chapter-edit-'+idChapter).length){ + $('#form-chapter-edit-'+idChapter).remove(); + } +}); + +//nouveau chapitre $('.chapter-widget').on('click', '.btn-cut-chapter', function(e){ e.preventDefault(); var uniqId = 'id' + (new Date()).getTime(); - $.get('template.html', function(templates){ - var viewChapterRow = { - id : uniqId - }; - var tpl = $(templates).filter('#tpl-chapter-row').html(); - var tpl = Mustache.render(tpl, viewChapterRow); - $('.list-chapter-rows-wrap').append(tpl); + + var title = 'New', + tags = 'tag', + begin = myMedia.currentTime.milliseconds, + end = organizeNewChapter(begin), + duration = end - begin, + description = '', + id = uniqId; + + var dataChapter = { + title : title, + tags : tags, + begin : begin, + duration : duration, + end : end, + description : description, + color : global.colors[chapters.length], + id : uniqId + }; + + chapters.push(dataChapter); + renderChapter(); + loadFormChapter(id); + }); + + function organizeNewChapter(beginNew){ + + var returnEnd; + $.each(chapters, function(k, v){ + var begin = v.begin, + end = v.end; + if(beginNew>=begin && beginNew<=end){ + v.end = beginNew; + v.duration = v.end - v.begin; + returnEnd = end; + } }); - }); - - function addChapter(data){ - + return returnEnd; } + function renderChapter(){ + var chapterSegmentWrap = $('.chapter-segments'), + wChapterSegmentWrap = chapterSegmentWrap.width(), + chapterList = $('.list-chapter-rows-wrap'); + + chapters = _.sortBy(chapters, function(c){ + return c.begin; + }); + + chapterSegmentWrap.empty(); + chapterList.empty(); + + $.each(chapters, function(k, v){ + + //segments + color = global.colors[k], + width = Math.floor(v.duration * wChapterSegmentWrap / myMedia.duration.milliseconds), + segment = $('<li>'+v.title+'</li>').css({ + width : width, + backgroundColor : v.color + }).attr('id', v.id); + + chapterSegmentWrap.append(segment); + + //liste + $.get('template.html', function(templates){ + + v.beginString = millisecondsToString(v.begin); + v.durationString = millisecondsToString(v.duration); + v.endString = millisecondsToString(v.end); + + var tplChapterRow = $(templates).filter('#tpl-chapter-row').html(); + tplChapterRow = Mustache.render(tplChapterRow, v); + chapterList.append(tplChapterRow); + + }); + }); + } + +//init + function loadChapters(){//nouveau projet, 1 chapitre + + var uniqId = 'id' + (new Date()).getTime(); + + var title = 'chapitre 1', + tags = 'tag1,tag2', + begin = 0, + duration = myMedia.duration.milliseconds, + end = myMedia.duration.milliseconds, + description = 'description du chapitre 1', + id = uniqId; + + var dataChapter = { + title : title, + tags : tags, + begin : begin, + duration : duration, + end : end, + description : description, + color : global.colors[chapters.length], + id : id + }; + + chapters.push(dataChapter); + renderChapter(); + } + + + + + //edit annotation $('#list-annotations').on('click', 'a.btn-edit-annotation', function(e){ e.preventDefault(); @@ -410,4 +600,6 @@ $('#annotation-tab a:last-child').tab('show'); +$(".tag-it").tagit(); + });//ready \ No newline at end of file
--- a/integration/template.html Tue May 21 14:54:41 2013 +0200 +++ b/integration/template.html Tue May 21 17:41:31 2013 +0200 @@ -175,7 +175,7 @@ <td> <a href="#" data-id="annotation-{{id}}" class="btn btn-edit-annotation" data-type="video"> <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"> + <a data-id="annotation-{{id}}" data-type="annotation" data-title="Annotation XYZ" href="#row-list-annotation-{{id}}" class="btn btn-delete btn-delete-annotation"> <i class="icon-trash delete-annotation"></i> </a> </td> @@ -183,20 +183,20 @@ </script> <script id="tpl-chapter-row" type="text/html"> -<tr id="row-list-chapter-{{id}}"> - <td>Titre chapitre</td> - <td>Tags, Tags, Tags</td> - <td>79:55</td> - <td>79:55</td> - <td>79:55</td> +<tr id="row-list-chapter-{{id}}" style="background-color : {{color}};"> + <td class="list-chapter-title">{{title}}</td> + <td class="list-chapter-tags">{{tags}}</td> + <td>{{beginString}}</td> + <td>{{durationString}}</td> + <td>{{endString}}</td> <td> <table> <tr> <td> - <a href="" class="btn edit-chapter"><i class="icon-pencil"></i></a> + <a href="#" class="btn btn-edit-chapter" data-chapter-id="{{id}}"><i class="icon-pencil"></i></a> </td> <td> - <a data-title="Chapitre 1" href="#row-list-chapter-{{id}}" class="btn btn-delete"><i class="icon-trash delete-annotation"></i></a> + <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> </td> </tr> </table> @@ -205,34 +205,40 @@ </script> <script id="tpl-chapter-edit" type="text/html"> -<div class="row"> - <div class="span3 text-right"> - <input type="text" value="{{titre}}"> - <input type="text" value="{{tags}}"> +<form data-chapter-id="{{id}}" id="form-chapter-edit-{{id}}" action="#" class="form-chapter-edit" style="background-color:{{color}}"> + <div class="row"> + <div class="span3 text-right"> + <input name="title" type="text" value="{{title}}"> + <input name="tags" type="text" class="tag-it" value="{{tags}}"> + </div> + <div class="span3"> + <!-- + <input type="hidden" name="begin" value="{{begin}}"> + <input type="hidden" name="duration" value="{{duration}}"> + <input type="hidden" name="end" value="{{end}}"> + --> + <table class="table text-right"> + <thead> + <tr> + <th class="span1 ">Début</th> + <th class="span1">Durée</th> + <th class="span1">Fin</th> + </tr> + </thead> + <tbody> + <tr> + <td class="span1 begin time-tangle">{{beginString}}</td> + <td class="span1 duration">{{durationString}}</td> + <td class="span1 end">{{endString}}</td> + </tr> + </tbody> + </table> + </div> </div> - <div class="span3"> - <table class="table text-right"> - - <thead> - <tr> - <th class="span1">Début</th> - <th class="span1">Durée</th> - <th class="span1">Fin</th> - </tr> - </thead> - <tbody> - <tr> - <td class="span1">4:20</td> - <td class="span1">4:20</td> - <td class="span1">4:20</td> - </tr> - </tbody> - </table> + <div class="row"> + <div class="span6 text-center"> + <textarea class="" name="description" id="">{{description}}</textarea> + </div> </div> -</div> -<div class="row"> - <div class="span6 text-center"> - <textarea name="">{{description}}</textarea> - </div> -</div> +</form> </script> \ No newline at end of file