metadatacomposer: comparison integration/js/edition.js

Mercurial Mercurial > metadatacomposer / comparison

summary | shortlog | changelog | graph | tags | bookmarks | branches | files | changeset | file | latest | revisions | annotate | diff | comparison | raw | help

integration/js/edition.js

changeset 22	0e02c3a28491
parent 21	abd04f346dbe
child 23	2a3159ee4ed0

equal deleted inserted replaced

-:abd04f346dbe
+:0e02c3a28491
 $(function(){
 var global = {
 diaporama : null,
 idAnnotation : null,
-beginCurrentChapter : 0,
+colors : ['#f39c12', '#2ecc71', '#3498db', '#9b59b6',
-mediaDuration : 0,
+'#f1c40f', '#e67e22', '#e74c3c', '#ecf0f1',
-colors : ['#1abc9c', '#3498db', '#9b59b6', '#f1c40f', '#e67e22', '#e74c3c']
+'#16a085', '#27ae60', '#2980b9', '#8e44ad', '#2c3e50',
+'#f39c12', '#d35400', '#c0392b', '#bdc3c7', '#7f8c8d']
 },
+currentChapter = null,
 chapters = [],
 annotations = [];
 myProject.onLoad(function() {
 autostart: true
 }
 );
 myMedia.on("timeupdate", function(t) {
-//init
-global.mediaDuration = myMedia.duration.milliseconds;
 //curseur chapitre
 var wContainer = $('.chapitre-cut-wrap').width() - 1,
 pos = wContainer * t / myMedia.duration,
 btnCutChapter = $('.btn-cut-chapter'),
 btnCutChapter.css("left",(pos - wBtnCutChapter));
 }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 = global.beginCurrentChapter,
+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
 global.diaporama = diaporama;
 }
 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){
 e.preventDefault();
 $('.popup').modal('hide');
 var listDiaporama = $('#'+global.diaporama);
 addImageToDiaporama(listDiaporama);
 $('.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');
-}
 });
 //confirmation suppression
 $("#modal-confirm").on('click', '#btn-delete-modal', function(e){
 $(document).on('keyup', '.project-title-editor-input', function() {
 $('.project-title').html($(this).val());
 });
 //--chapter
-$('.list-chapter-wrap').on('click', '.edit-chapter', function(e){
-e.preventDefault();
+//edit
-var viewChapter = {
+$('.list-chapter-wrap').on('click', '.btn-edit-chapter', function(e){
-titre : 'titre du chapitre',
+e.preventDefault();
-tags : 'tag 1, tag 2, tag 3',
+var idChapter = $(this).attr('data-chapter-id');
-description : 'lorem ipsum'
+loadFormChapter(idChapter);
+currentChapter = _.find(chapters, function(c){ return c.id == 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);
+tpl = Mustache.render(tpl, chapterData);
-$('.form-chapter-edit').empty().append(tpl);
+chapterWrap.empty().append(tpl);
-$('.form-chapter-edit').find('.tag-it').tagit();
+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();
-var formChapter = $('.form-chapter-edit'),
+var title = 'New',
-title = formChapter.find('input[name=title]').val(),
+tags = 'tag',
-tags = formChapter.find('input[name=tags]').val(),
+begin = myMedia.currentTime.milliseconds,
-begin = formChapter.find('input[name=begin]').val(),
+end = organizeNewChapter(begin),
-duration = formChapter.find('input[name=duration]').val(),
+duration = end - begin,
-end = formChapter.find('input[name=end]').val(),
+description = '',
-beginString = millisecondsToString(begin),
-durationString = millisecondsToString(duration),
-endString = millisecondsToString(end),
-description = formChapter.find('textarea[name=description]').val(),
 id = uniqId;
 var dataChapter = {
 title : title,
 tags : tags,
 begin : begin,
 duration : duration,
 end : end,
 description : description,
-beginString : beginString,
+color : global.colors[chapters.length],
-durationString : durationString,
+id : uniqId
-endString : endString,
-id : id
 };
-addChapter(dataChapter);
-});
-function addChapter(dataChapter){
 chapters.push(dataChapter);
+renderChapter();
-//vue liste chapitre
+loadFormChapter(id);
-$.get('template.html', function(templates){
+});
-var tplChapterRow = $(templates).filter('#tpl-chapter-row').html();
-tplChapterRow = Mustache.render(tplChapterRow, dataChapter);
-$('.list-chapter-rows-wrap').append(tplChapterRow);
-updateChapterSegments();
-});
-}
-function updateChapterSegments(){
+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;
+}
+});
+return returnEnd;
+}
+function renderChapter(){
 var chapterSegmentWrap = $('.chapter-segments'),
-wChapterSegmentWrap = chapterSegmentWrap.width();
+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){
-var chapter = v,
+//segments
 color = global.colors[k],
-width = chapter.duration * wChapterSegmentWrap / global.mediaDuration,
+width = Math.floor(v.duration * wChapterSegmentWrap / myMedia.duration.milliseconds),
-segment = $('<li>'+chapter.title+'</li>').css({
+segment = $('<li>'+v.title+'</li>').css({
 width : width,
-backgroundColor : color
+backgroundColor : v.color
-}).attr('id', chapter.id);
+}).attr('id', v.id);
-chapterSegmentWrap.append(segment)
-});
+chapterSegmentWrap.append(segment);
-}
+//liste
-function loadChapters(){
+$.get('template.html', function(templates){
-//nouveau projet, 1 chapitre
+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,
-beginString = millisecondsToString(begin),
-durationString = millisecondsToString(duration),
-endString = millisecondsToString(end),
 description = 'description du chapitre 1',
 id = uniqId;
 var dataChapter = {
 title : title,
 tags : tags,
 begin : begin,
 duration : duration,
 end : end,
 description : description,
-beginString : beginString,
+color : global.colors[chapters.length],
-durationString : durationString,
-endString : endString,
 id : id
 };
-addChapter(dataChapter);
+chapters.push(dataChapter);
-}
+renderChapter();
+}
 //edit annotation
 $('#list-annotations').on('click', 'a.btn-edit-annotation', function(e){
 e.preventDefault();

metadatacomposer