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 62	42919bf5d4e1
parent 58	9e14b6f964fe
child 70	2542e988f80c

equal deleted inserted replaced

-:9e14b6f964fe
+:42919bf5d4e1
 annotations = [];
 $(function(){
 var global = {
-idAnnotation : null,
 colorsIndex : 0,
 colors :
 ['#f39c12', '#2ecc71', '#3498db', '#9b59b6',
-'#f1c40f', '#e67e22', '#e74c3c', '#ecf0f1',
+'#f1c40f', '#e67e22', '#e74c3c',
 '#16a085', '#27ae60', '#2980b9', '#8e44ad',
-'#f39c12', '#d35400', '#c0392b', '#bdc3c7']
+'#d35400', '#c0392b', '#bdc3c7']
 };
 //position de la video setCurrentTime
 $(".indicateur-annotation").draggable({
 });
 myProject.onLoad(function() {
 $(".project-title").text(myProject.title);
+$('.project-title-nav').text(myProject.title);
 myMedia = myProject.getCurrentMedia();
 //load Chapitre
 var _chapters = myProject.getAnnotationsByTypeTitle("chapitrage");
 if(_chapters.length){
 renderAnnotation();
 }
 });
 }
-//chargement des chapitres et annotations existants
-//  loadInitChapters();
-//loadInitAnnotation();
 IriSP.htmlPlayer(
 myMedia,
 $(".main-video"),
 {
 });
 //########### modal
 $(document).on('click', 'a.open-modal', function(e){
-var idAnnotation = $(this).attr('data-id');
-if(idAnnotation !== undefined){
-global.idAnnotation = idAnnotation;
-}
 });
 //edition image
 $('.popup').on('change', '#media-type-select', function(e){
 var typeImage = $(this).val();
 $("#modal-confirm").on('click', '#btn-delete-modal', function(e){
 });
 //--title-editor
-$('.project-title-editor ._popover').bind('click',function(e){e.preventDefault()});
+$(document).on('click', '.project-title-editor i, .project-title', function () {
-$('.project-title-editor ._popover').popover({
+var html = $('.project-title').html();
-html : true,
+var input = $('<input type="text" />');
-content : function(){
+input.val(html);
-var previousValue = $('.project-title').text(),
+$('.project-title').replaceWith(input);
-formInput =
+input.focus();
-'<form action="#" class="project-title-editor-form">'+
+});
-'<input type="text" class="project-title-editor-input" value="'+previousValue+'">'+
+$(document).on('blur', '.project-title-editor input', function(){
-'</form>';
+var newTitle = $(this).val();
-return formInput;
+myProject.title = newTitle;
-}
+$(this).replaceWith('<span class="project-title">'+newTitle+'</span></td>');
-});
+$('.project-title-nav').text(newTitle);
+});
-$('body').on('click', function (e) {
-$('._popover').each(function () {
-if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
-$(this).popover('hide');
-}
-});
-});
-$('body').on('submit', '.project-title-editor-form', function(e){
-e.preventDefault();
-$('._popover').popover('hide');
-});
-$(document).on('keyup', '.project-title-editor-input', function() {
-$('.project-title').html($(this).val());
-});
 //######################## chapter
 //edit
 $('.list-chapter-wrap').on('click', '.btn-edit-chapter', function(e){
 endTangle = (indexChapter<(chapters.length-1)) ? true : false;
 currentChapter.beginTangle = beginTangle;
 currentChapter.endTangle = endTangle;
-$.get('template.html', function(templates){
+var tpl = getTemplate('#tpl-chapter-edit');
-var tpl = $(templates).filter('#tpl-chapter-edit').html();
 tpl = Mustache.render(tpl, currentChapter);
 chapterWrap.empty().append(tpl);
 chapterWrap.find('.tag-it').tagit(tagitParam);
-});
 myMedia.setCurrentTime(currentChapter.begin);
 }
+function getTemplate(idTpl){
+return $('#templates').find(idTpl).html();
+}
 //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;}
 return c.begin;
 });
 chapterSegmentWrap.empty();
 chapterList.empty();
-$.get('template.html', function(templates){
 $.each(chapters, function(k, v){
 //segments
 var width = Math.floor(v.getDuration() * wChapterSegmentWrap / myMedia.duration),
 segment = $('<li>'+v.title+'</li>').css({
 }).attr('id', v.id);
 chapterSegmentWrap.append(segment);
 //liste
-var tplChapterRow = $(templates).filter('#tpl-chapter-row').html();
+var tplChapterRow = getTemplate('#tpl-chapter-row');
 tplChapterRow = Mustache.render(tplChapterRow, v);
 chapterList.append(tplChapterRow);
 });
-});
 }//renderChapter()
-//init
-function loadInitChapters(){//nouveau projet, 1 chapitre
-var dataChapter = {
-title : 'New',
-begin : 0,
-end : myMedia.duration,
-description : 'description',
-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);
 annotations = _.sortBy(annotations, function(c){
 return c.begin;
 });
-timeline.empty();
+timeline.empty().append('<li>');
 annotationList.empty();
 $.each(annotations, function(k, v){
 //timeline
 segment = $('<div>').css({
 left : left,
 width : width,
 backgroundColor : v.color
 }).addClass('annotation').attr('id', 'annotation-timeline-'+v.id);
-timeline.append(segment);
+var isInTimeline = false;
+$.each(timeline.find('li'), function(a, b){
+if(isInTimeline) return;
+var row = $(this);
+if(row.children().length){
+var canBeInRow = true;
+$.each(row.find('.annotation'), function(c, d){
+var oAL = parseInt($(d).css('left')),
+oAR = oAL + $(d).width(),
+segmentR = left + width;
+if(oAL<=left && oAR>=left || oAL<=segmentR && oAR>= segmentR){
+canBeInRow = false;
+}
+});
+if(canBeInRow){
+row.append(segment);
+isInTimeline = true;
+}
+}else{
+row.append(segment);
+isInTimeline = true;
+}
+});
+if(!isInTimeline){
+timeline.append('<li>');
+timeline.find('li:last-child').append(segment);
+}
 //liste
-$.get('template.html', function(templates){
+var tplAnnotationRow = getTemplate('#tpl-list-annotation-row');
-var tplAnnotationRow = $(templates).filter('#tpl-list-annotation-row').html();
 tplAnnotationRow = Mustache.render(tplAnnotationRow, v);
 annotationList.append(tplAnnotationRow);
-});
 });
-}
+}//renderAnnotation
 //edit annotation
 $('#list-annotations').on('click', 'a.btn-edit-annotation', function(e){
 e.preventDefault();
 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 tplHead = $(templates).filter('#tpl-head').html();
+var tplHead = getTemplate('#tpl-head');
 var output = Mustache.render(tplHead, dataView);
 $(tabContent).append(output);
 $(tabContent).find(".slider-duration").slider(configSlider(dataView));
 $(tabContent).find('.tag-it').tagit(tagitParam);
 //type
 var viewType = {
 id : idAnnotation,
 content : dataView.content
 };
-var tpl = $(templates).filter('#tpl-'+type).html();
+var tpl = getTemplate('#tpl-'+type);
 tpl = Mustache.render(tpl, viewType);
 $(tabContent).append(tpl);
 $('.tab-content').append(tabContent);
 case 'audio':
 break;
 case 'video':
 if(viewType.content.url != ""){
-/*
-var videoWrap = $(tabContent).find('.annotation-video-content'),
+var videoWrap = $(tabContent).find('.annotation-video-content');
-tplVideo = $(templates).filter('#tpl-video-row').html();
-tplVideo = Mustache.render(tplVideo, viewType.content);
-videoWrap.empty().append(tplVideo);
-var videoWrap = $(tabContent).find(".video-container"),
-src = viewType.content.url;
-getVideoPlayer(src, videoWrap);
-*/
-var videoWrap = $(tabContent).find('.annotation-video-content');
 renderVideoInfo(videoWrap, viewType.content);
 }
 }
 break;
 }
 dataView.iconTab = getIcon(type);
-var tplOnglet = $(templates).filter('#tpl-onglet').html();
+var tplOnglet = getTemplate('#tpl-onglet');
 var onglet = Mustache.render(tplOnglet, dataView);
 $(".nav-tabs li:last-child").after(onglet);
 $('a[href=#tab-annotation-'+idAnnotation+']').tab('show');
-});
 }//openTab()
 function getIcon(type){
 var icon;
 switch(type){
 case 'audio': icon = 'volume-up';
 break;
 case 'video': icon = 'film';
 break;
-case 'text':
+case 'text': icon = 'align-left';
-icon = 'align-left';
 break;
 case 'html': icon = 'code';
 break;
 case 'links': icon = 'link';
 break;
 $('#tab-list-annotation').tab('show');
 }
 //video
 function renderVideoInfo(videoWrap, dataVideo){
-$.get('template.html', function(templates){
-var tplVideo = $(templates).filter('#tpl-video-row').html();
+var tplVideo = getTemplate('#tpl-video-row');
 tplVideo = Mustache.render(tplVideo, dataVideo);
 videoWrap.empty().append(tplVideo);
 videoWrap = videoWrap.find(".video-container");
 getVideoPlayer(dataVideo.url, videoWrap);
-});
 }
 $('.popup').on('click', '.bibliotheque-video a', function(e){
 e.preventDefault();
 var url = $(this).attr('data-url'),
 $('.popup').modal('hide');
 var videoWrap = $('#tab-annotation-'+currentAnnotation.id).find('.annotation-video-content');
 renderVideoInfo(videoWrap, currentAnnotation.content);
-/*
-$.get('template.html', function(templates){
-var videoWrap = $('#tab-annotation-'+currentAnnotation.id).find('.annotation-video-content'),
-tplVideo = $(templates).filter('#tpl-video-row').html();
-tplVideo = Mustache.render(tplVideo, currentAnnotation.content);
-videoWrap.empty().append(tplVideo);
-var videoWrap = videoWrap.find(".video-container"),
-src = url;
-getVideoPlayer(src, videoWrap);
-});
-*/
 });
 //diaporama
 addImageToDiaporama(listDiaporama, image);
 $('.popup').modal('hide');
 });
 function addImageToDiaporama(diaporama, dataView){
-$.get('template.html', function(templates){
-var tplDiapo = $(templates).filter('#tpl-diaporama-row').html();
+var tplDiapo = getTemplate('#tpl-diaporama-row');
 tplDiapo = Mustache.render(tplDiapo, dataView);
 diaporama.append(tplDiapo);
 disabledBtnSortable(diaporama);
-});
 };
 //bouton up / down
 $(document).on('click', '.ui-sortable .btn-sort', function(e){
 e.preventDefault();
 addLinkRow(tbody);
 });
 $('.tab-content').on('click', '.delete-link', function(e){
 e.preventDefault();
 var row = $(this).parents('tr'),
-tbody = $(this).find('tbody');
+tbody = $(this).parents('tbody');
 row.remove();
 updateLinks(tbody);
 });
 function addLinkRow(tbody, dataView){
-$.get('template.html', function(templates){
 //head commun à tous
-var tplLinkRow = $(templates).filter('#tpl-links-row').html();
+var tplLinkRow = getTemplate('#tpl-links-row');
 var output = Mustache.render(tplLinkRow, dataView);
 tbody.append(output);
-});
 }
 $('.tab-content').on('keyup', '.links-rows input', function(e){
 var tbody = $(this).parents('.links-rows');
 updateLinks(tbody);
 });
 function updateLinks(tbody){
 links = new Array();
 $.each(tbody.find('tr'), function(k, v){
 var urlLink = $(v).find('.url-link').val(),
 titleLink = $(v).find('.title-link').val(),
 link = {
 url : urlLink,
 title : titleLink
 };
 links.push(link);
 });
 currentAnnotation.content.links = links;
 }
-//annotation html
-/*
-$('.tab-content').on('click', '.btn-html-apercu', function(e){
-e.preventDefault();
-var apercuWrap = $(this).parents('.edit-annotation-html').find('.html-apercu'),
-htmlTextarea = $(this).parents('.edit-annotation-html').find('textarea');
-apercuWrap.empty().html(htmlTextarea.val());
-});
-*/
 //annotation audio
 $('.tab-content').on('keyup', '.annotation-audio-content input, .annotation-audio-content textarea', function(){
 var name = $(this).attr('name'),
 value = $(this).val();
 var autostart = $(this).attr('data-autostart');
 if(autostart == "true"){ autostart = true;}
 else {autostart = false;}
 currentAnnotation.content.autostart = autostart;
 });
 $('.tab-content').on('change keyup', '.config-diaporama input[name=duration]', function(){
 var value = $(this).val();
 if(!isNaN(value)){
 currentAnnotation.content.duration = value;
 }
 };
 //slider
 function configSlider(data){
 return {
 range: true,
 values: [ data.begin.milliseconds, data.end.milliseconds ],
 min: 0,
 max: myMedia.duration.milliseconds,
 annotationTimeline.css({
 left : left,
 width :width
 });
+},
+stop : function(){
+renderAnnotation()
 }
 };
 }
+//init annotation content data
 function getContentAnnotationByType(type){
 var content;
 switch(type){
 case 'audio':
 content = {
 //test
-//a = $(".wysiwyg").cleditor(wysiwygConfig);
-$('.number-spin').spin(spinParam);
-disabledBtnSortable($('.ui-sortable'))
-$('.ui-sortable').sortable({
-stop : function(event, ui){
-disabledBtnSortable($(this));
-}
-});
-$('.slider-duration').slider(configSlider);
-$(".tag-it").tagit();
 $('.log-annotations').bind('click', function(e){
 e.preventDefault();
 console.log(annotations.length + ' annotations', annotations);
 });
 $('.log-chapters').bind('click', function(e){
 e.preventDefault();
 console.log(chapters.length + ' chapitres',chapters);
 });
 });//ready
+//Utilitaires
 Array.prototype.move = function (old_index, new_index) {
 if (new_index >= this.length) {
 var k = new_index - this.length;
 while ((k--) + 1) {
 this.push(undefined);
 }
 }
 this.splice(new_index, 0, this.splice(old_index, 1)[0]);
-return this; // for testing purposes
+return this;
 };
 function getVideoPlayer(src, videoWrap){
 width: mediaW,
 height: mediaH,
 autoplay: "" + autoplay
 }));
-}
+}//getVideoPlayer

metadatacomposer