43 //curseur chapitre |
44 //curseur chapitre |
44 var wContainer = $('.chapitre-cut-wrap').width() - 1, |
45 var wContainer = $('.chapitre-cut-wrap').width() - 1, |
45 pos = wContainer * t / myMedia.duration, |
46 pos = wContainer * t / myMedia.duration, |
46 btnCutChapter = $('.btn-cut-chapter'), |
47 btnCutChapter = $('.btn-cut-chapter'), |
47 wBtnCutChapter = btnCutChapter.outerWidth(); |
48 wBtnCutChapter = btnCutChapter.outerWidth(); |
48 |
49 |
49 $(".indicateur-chapter").css("left",pos); |
50 $(".indicateur-chapter, .indicateur-annotation").css("left",pos); |
50 if(pos+wBtnCutChapter>wContainer){ |
51 if(pos+wBtnCutChapter>wContainer){ |
51 btnCutChapter.css("left",(pos - wBtnCutChapter)); |
52 btnCutChapter.css("left",(pos - wBtnCutChapter)); |
52 }else{ |
53 }else{ |
53 btnCutChapter.css("left",pos); |
54 btnCutChapter.css("left",pos); |
54 } |
55 } |
55 });//timeupdate |
56 });//timeupdate |
56 |
57 |
57 });//myProject.onLoad |
58 });//myProject.onLoad |
58 |
59 |
59 |
60 |
60 //modal |
61 //--modal |
61 $(document).on('click', 'a.open-modal', function(e){ |
62 $(document).on('click', 'a.open-modal', function(e){ |
62 var diaporama = $(this).attr('data-diaporama'), |
63 var diaporama = $(this).attr('data-diaporama'), |
63 idAnnotation = $(this).attr('data-id'); |
64 idAnnotation = $(this).attr('data-id'); |
64 |
65 |
65 if(diaporama !== undefined){ |
66 if(diaporama !== undefined){ |
101 e.preventDefault(); |
102 e.preventDefault(); |
102 //si c'est une annotation et que la tab est ouverte, on la ferme |
103 //si c'est une annotation et que la tab est ouverte, on la ferme |
103 var type = $(this).attr('data-type'); |
104 var type = $(this).attr('data-type'); |
104 |
105 |
105 var idAnnotation = $(this).attr('data-id'); |
106 var idAnnotation = $(this).attr('data-id'); |
106 $('a[href=#annotation-'+idAnnotation+']').closest('li').remove(); |
107 $('a[href=#tab-annotation-'+idAnnotation+']').closest('li').remove(); |
107 $('.tab-content #annotation'+idAnnotation).remove(); |
108 $('.tab-content #annotation'+idAnnotation).remove(); |
108 $('#tab-list-annotation').tab('show'); |
109 $('#tab-list-annotation').tab('show'); |
109 |
110 |
110 }); |
111 }); |
111 |
112 |
112 //confirmation suppression |
113 //confirmation suppression |
113 $("#modal-confirm").on('click', '#btn-delete-modal', function(e){ |
114 $("#modal-confirm").on('click', '#btn-delete-modal', function(e){ |
114 |
115 |
115 }); |
116 }); |
116 |
117 |
117 //title-editor |
118 //--title-editor |
118 $('.project-title-editor ._popover').bind('click',function(e){e.preventDefault()}); |
119 $('.project-title-editor ._popover').bind('click',function(e){e.preventDefault()}); |
119 $('.project-title-editor ._popover').popover({ |
120 $('.project-title-editor ._popover').popover({ |
120 html : true, |
121 html : true, |
121 content : function(){ |
122 content : function(){ |
122 var previousValue = $('.project-title').text(), |
123 var previousValue = $('.project-title').text(), |
314 var dataChapter = { |
305 var dataChapter = { |
315 title : 'New', |
306 title : 'New', |
316 begin : 0, |
307 begin : 0, |
317 end : myMedia.duration, |
308 end : myMedia.duration, |
318 description : 'description', |
309 description : 'description', |
319 keywords : 'tag1,tag2' |
310 keywords : ['tag1','tag2'] |
320 }; |
311 }; |
321 |
312 |
322 newChapter(dataChapter); |
313 newChapter(dataChapter); |
323 } |
314 } |
324 |
315 |
325 |
316 |
326 |
317 //######################## annotation |
|
318 |
|
319 function loadInitAnnotation(){//nouveau projet, 1 chapitre |
|
320 var dataAnnotation = { |
|
321 title : 'Titre azerty', |
|
322 begin : myMedia.duration/5, |
|
323 end : myMedia.duration/3, |
|
324 description : 'description', |
|
325 type : 'video', |
|
326 keywords : ['ideal', 'tag'] |
|
327 }; |
|
328 |
|
329 newAnnotation(dataAnnotation); |
|
330 } |
|
331 |
|
332 function newAnnotation(dataAnnotation){ |
|
333 var annotation = new IriSP.Model.Annotation(false, myProject); |
|
334 annotation.setMedia(myMedia.id); |
|
335 annotation.setBegin(dataAnnotation.begin); |
|
336 annotation.setEnd(dataAnnotation.end); |
|
337 annotation.title = dataAnnotation.title; |
|
338 annotation.description = dataAnnotation.description; |
|
339 annotation.type = dataAnnotation.type; |
|
340 annotation.color = global.colors[(global.colorsIndex<global.colors.length) ? global.colorsIndex++ : (global.colorsIndex=0)]; |
|
341 annotation.keywords = dataAnnotation.keywords; |
|
342 |
|
343 annotations.push(annotation); |
|
344 renderAnnotation(); |
|
345 } |
|
346 |
|
347 function renderAnnotation(){ |
|
348 var timeline = $('.timeline-annotations'), |
|
349 wTimeline = timeline.width(), |
|
350 annotationList = $('#list-annotations-rows'); |
|
351 |
|
352 annotations = _.sortBy(annotations, function(c){ |
|
353 return c.begin; |
|
354 }); |
|
355 |
|
356 timeline.empty(); |
|
357 annotationList.empty(); |
|
358 |
|
359 $.each(annotations, function(k, v){ |
|
360 |
|
361 //timeline |
|
362 var width = Math.floor(v.getDuration() * wTimeline / myMedia.duration), |
|
363 left = Math.floor(v.begin * wTimeline / myMedia.duration), |
|
364 segment = $('<div>').css({ |
|
365 left : left, |
|
366 width : width, |
|
367 backgroundColor : v.color |
|
368 }).addClass('annotation').attr('id', 'annotation-timeline-'+v.id); |
|
369 |
|
370 timeline.append(segment); |
|
371 |
|
372 //liste |
|
373 $.get('template.html', function(templates){ |
|
374 var tplAnnotationRow = $(templates).filter('#tpl-list-annotation-row').html(); |
|
375 tplAnnotationRow = Mustache.render(tplAnnotationRow, v); |
|
376 annotationList.append(tplAnnotationRow); |
|
377 |
|
378 }); |
|
379 |
|
380 }); |
|
381 } |
327 |
382 |
328 //edit annotation |
383 //edit annotation |
329 $('#list-annotations').on('click', 'a.btn-edit-annotation', function(e){ |
384 $('#list-annotations').on('click', 'a.btn-edit-annotation', function(e){ |
330 e.preventDefault(); |
385 e.preventDefault(); |
331 |
386 |
332 var idAnnotation = $(this).attr('data-id'); |
387 var idAnnotation = $(this).attr('data-id'); |
333 //si il est déjà ouvert |
388 //si il est déjà ouvert |
334 if($('#annotation-'+idAnnotation).length){ |
389 if($('#tab-annotation-'+idAnnotation).length){ |
335 $('a[href=#annotation-'+idAnnotation+']').tab('show'); |
390 $('a[href=#tab-annotation-'+idAnnotation+']').tab('show'); |
336 }else{ |
391 }else{ |
337 var typeAnnotation = $(this).attr('data-type'), |
392 var data = _.find(annotations, function(c){ return c.id == idAnnotation; }); |
338 data = {id:idAnnotation}; |
393 openTab(data.type, data); |
339 openNewTab(typeAnnotation, data); |
|
340 } |
394 } |
341 }); |
395 }); |
342 |
396 |
|
397 $('.tab-content').on('keyup', 'input[name=title], textarea', function(e){ |
|
398 var name = $(this).attr('name'), |
|
399 value = $(this).val(); |
|
400 currentAnnotation[name] = value; |
|
401 if(name == 'title'){ |
|
402 var idAnnotation = $(this).parents('form').attr('data-id'); |
|
403 $('#onglet-title-'+idAnnotation).text(value); |
|
404 } |
|
405 }); |
|
406 |
343 //tab |
407 //tab |
344 $('#annotation-tab').on('click', 'a', function(e){ |
408 $('#onglet-annotations').on('click', 'a', function(e){ |
345 e.preventDefault(); |
409 e.preventDefault(); |
346 $(this).tab('show'); |
410 $(this).tab('show'); |
347 }); |
411 }); |
348 |
412 |
349 //ouvrir tab |
413 //ouvrir tab |
350 $(document).on('click', '.open-tab', function(e){ |
414 $(document).on('click', '.open-tab', function(e){ |
351 e.preventDefault(); |
415 e.preventDefault(); |
352 var type = $(this).attr('data-type'); |
416 var type = $(this).attr('data-type'); |
353 var data = $(this).attr('data-data'); // à définir |
417 openTab(type); |
354 openNewTab(type); |
418 }); |
355 }); |
419 |
356 |
420 function openTab(type, data){ |
357 function openNewTab(type, data){ |
421 |
358 |
422 var dataView = {}; |
359 var uniqId = 'id' + (new Date()).getTime(), |
423 if(_.isUndefined(data)){//nouveau |
360 idAnnotation = (data !== undefined) ? data.id : uniqId, |
424 dataView.id = 'id' + (new Date()).getTime(); |
361 tabContent = $('<div class="tab-pane" id="annotation-'+idAnnotation+'"></div>'), |
425 dataView.title = 'New'; |
|
426 }else{//édition |
|
427 dataView = data; |
|
428 } |
|
429 |
|
430 var idAnnotation = dataView.id, |
|
431 tabContent = $('<div class="tab-pane" id="tab-annotation-'+idAnnotation+'"></div>'), |
362 iconTab; |
432 iconTab; |
363 |
433 |
|
434 currentAnnotation = _.find(annotations, function(c){ return c.id == idAnnotation; }); |
364 |
435 |
365 $.get('template.html', function(templates){ |
436 $.get('template.html', function(templates){ |
366 //head commun à tous |
437 //head commun à tous |
367 var view = { |
|
368 titre : "un titre mustache", |
|
369 id : uniqId |
|
370 }; |
|
371 var tplHead = $(templates).filter('#tpl-head').html(); |
438 var tplHead = $(templates).filter('#tpl-head').html(); |
372 var output = Mustache.render(tplHead, view); |
439 var output = Mustache.render(tplHead, dataView); |
373 $(tabContent).append(output); |
440 $(tabContent).append(output); |
374 $(tabContent).find(".slider-duration").slider(configSlider); |
441 $(tabContent).find(".slider-duration").slider(configSlider(dataView)); |
375 |
442 $(tabContent).find('.tag-it').tagit(tagitParam); |
376 //type |
443 //type |
377 var viewType = {id : uniqId}; |
444 var viewType = {id : idAnnotation}; |
378 var tpl = $(templates).filter('#tpl-'+type).html(); |
445 var tpl = $(templates).filter('#tpl-'+type).html(); |
379 tpl = Mustache.render(tpl, viewType); |
446 tpl = Mustache.render(tpl, viewType); |
380 $(tabContent).append(tpl); |
447 $(tabContent).append(tpl); |
381 $('.tab-content').append(tabContent); |
448 $('.tab-content').append(tabContent); |
382 |
449 |
397 disabledBtnSortable($(this)); |
464 disabledBtnSortable($(this)); |
398 } |
465 } |
399 }); |
466 }); |
400 break; |
467 break; |
401 } |
468 } |
402 $(".nav-tabs li:last-child").after('<li><a href="#annotation-'+idAnnotation+'"><i class="icon-'+iconTab+'"></i> New <span class="close-tab">×</span></a></li>'); |
469 |
403 $('a[href=#annotation-'+idAnnotation+']').tab('show'); |
470 dataView.iconTab = iconTab; |
404 }); |
471 var tplOnglet = $(templates).filter('#tpl-onglet').html(); |
405 }//openNewTab() |
472 var onglet = Mustache.render(tplOnglet, dataView); |
|
473 |
|
474 $(".nav-tabs li:last-child").after(onglet); |
|
475 $('a[href=#tab-annotation-'+idAnnotation+']').tab('show'); |
|
476 }); |
|
477 }//openTab() |
|
478 |
|
479 //définit currentAnnotation quand la tab s'ouvre |
|
480 $('#onglet-annotations').on('show', 'a[data-toggle="annotation"]', function (e) { |
|
481 var idAnnotation = $(e.target).attr('data-id'); |
|
482 currentAnnotation = _.find(annotations, function(c){ return c.id == idAnnotation; }); |
|
483 }); |
|
484 |
|
485 //rafraichit annotations au retour sur la liste |
|
486 $('#onglet-annotations').on('show', 'a[data-toggle="list-annotations"]', function (e) { |
|
487 renderAnnotation(); |
|
488 }); |
406 |
489 |
407 //fermer tab |
490 //fermer tab |
408 $('#annotation-tab').on('click', 'span.close-tab', function(e){ |
491 $('#onglet-annotations').on('click', 'span.close-tab', function(e){ |
409 e.preventDefault();e.stopPropagation(); |
492 e.preventDefault();e.stopPropagation(); |
410 var idTab = $(this).parents('a').attr('href'); |
493 var idAnnotation = $(this).parents('a').attr('data-id'); |
411 $(this).closest('li').remove(); |
494 closeTab(idAnnotation); |
412 $('.tab-content '+idTab).remove(); |
495 }); |
|
496 |
|
497 $('.tab-content').on('click', '.btn-save-annotation', function(e){ |
|
498 e.preventDefault(); |
|
499 var idAnnotation = $(this).attr('data-id'); |
|
500 closeTab(idAnnotation); |
|
501 }); |
|
502 |
|
503 function closeTab(idAnnotation){ |
|
504 $('#onglet-'+idAnnotation).remove(); |
|
505 $('.tab-content #tab-annotation-'+idAnnotation).remove(); |
413 $('#tab-list-annotation').tab('show'); |
506 $('#tab-list-annotation').tab('show'); |
414 }); |
507 } |
415 |
|
416 |
508 |
417 //diaporama |
509 //diaporama |
418 function addImageToDiaporama(diaporama){ |
510 function addImageToDiaporama(diaporama){ |
419 $.get('template.html', function(templates){ |
511 $.get('template.html', function(templates){ |
420 var tplDiapo = $(templates).filter('#tpl-diaporama-row').html(), |
512 var tplDiapo = $(templates).filter('#tpl-diaporama-row').html(), |
484 docType: '<!DOCTYPE HTML>', |
593 docType: '<!DOCTYPE HTML>', |
485 bodyStyle: "margin:0; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;" |
594 bodyStyle: "margin:0; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;" |
486 }; |
595 }; |
487 |
596 |
488 //slider |
597 //slider |
489 var configSlider = { |
598 function configSlider(data){ |
490 range: true, |
599 |
491 values: [ 0, 1*60*1000 ], |
600 return { |
492 min: 0, |
601 range: true, |
493 max: 10*60*1000, |
602 values: [ data.begin.milliseconds, data.end.milliseconds ], |
494 slide: function( event, ui ) { |
603 min: 0, |
495 |
604 max: myMedia.duration.milliseconds, |
496 var debutString = millisecondsToString(ui.values[0]); |
605 slide: function( event, ui ) { |
497 var endString = millisecondsToString(ui.values[1]); |
606 |
498 var durationString = millisecondsToString(ui.values[1] - ui.values[0]); |
607 data.setBegin(ui.values[0]); |
499 |
608 data.setEnd(ui.values[1]); |
500 var idSlider = $(this).attr('data-id'); |
609 |
501 |
610 var idSlider = $(this).attr('data-id'), |
502 $( '#'+ idSlider +'-begin' ).html(debutString); |
611 wTimeline = $('.timeline-annotations').width(), |
503 $( '#'+ idSlider +'-duration' ).html(durationString); |
612 annotationTimeline = $('#annotation-timeline-'+ data.id), |
504 $( '#'+ idSlider +'-end' ).html(endString); |
613 width = Math.floor(data.getDuration() * wTimeline / myMedia.duration), |
505 |
614 left = Math.floor(data.begin * wTimeline / myMedia.duration); |
506 } |
615 |
507 }; |
616 $( '#'+ idSlider +'-begin' ).html(data.begin.toString()); |
508 |
617 $( '#'+ idSlider +'-duration' ).html(data.getDuration().toString()); |
|
618 $( '#'+ idSlider +'-end' ).html(data.end.toString()); |
|
619 |
|
620 annotationTimeline.css({ |
|
621 left : left, |
|
622 width :width |
|
623 }); |
|
624 |
|
625 } |
|
626 }; |
|
627 |
|
628 } |
509 //milliseconds To 12h12m12s |
629 //milliseconds To 12h12m12s |
510 function millisecondsToString(milliseconds) { |
630 function millisecondsToString(milliseconds) { |
511 var oneHour = 3600000; |
631 var oneHour = 3600000; |
512 var oneMinute = 60000; |
632 var oneMinute = 60000; |
513 var oneSecond = 1000; |
633 var oneSecond = 1000; |