1 var myMedia = null, |
1 var myMedia = undefined, |
2 currentChapter = null, |
2 currentChapter = undefined, |
3 currentAnnotation = null, |
3 currentAnnotation = undefined, |
4 chapters = [], |
4 chapters = [], |
5 annotations = []; |
5 annotations = []; |
6 |
6 |
7 $(function(){ |
7 $(function(){ |
8 |
8 |
9 var global = { |
9 var global = { |
10 colorsIndex : 0, |
10 colorsIndex : 0, |
11 colors : |
11 colors : |
12 ['#f39c12', '#2ecc71', '#3498db', '#9b59b6', |
12 ['#1abc9c', '#3498db', '#9b59b6', '#2ecc71', |
13 '#f1c40f', '#e67e22', '#e74c3c', |
13 '#f1c40f', '#ecf0f1', '#e67e22', '#e74c3c', '#95a5a6', |
14 '#16a085', '#27ae60', '#2980b9', '#8e44ad', |
14 '#16a085', '#2980b9', '#8e44ad', '#27ae60', |
15 '#d35400', '#c0392b', '#bdc3c7'] |
15 '#f39c12', '#c0392b', '#bdc3c7', '#d35400', '#7f8c8d'] |
16 }; |
16 }; |
17 |
17 |
18 |
18 |
19 //position de la video setCurrentTime |
19 //position de la video setCurrentTime |
20 $(".indicateur-annotation").draggable({ |
20 $(".indicateur-annotation").draggable({ |
100 if(pos+wBtnCutChapter>wContainer){ |
100 if(pos+wBtnCutChapter>wContainer){ |
101 btnCutChapter.css("left",(pos - wBtnCutChapter)); |
101 btnCutChapter.css("left",(pos - wBtnCutChapter)); |
102 }else{ |
102 }else{ |
103 btnCutChapter.css("left",pos); |
103 btnCutChapter.css("left",pos); |
104 } |
104 } |
105 |
|
106 //annotations view |
105 //annotations view |
107 var currentAnnotationsDisplay = new Array(); |
106 refreshAnnotationDisplay(t); |
108 $.each(annotations, function(k, v){ |
107 |
109 |
108 });//timeupdate |
110 if(v.begin <= t && v.end >= t){ |
109 |
111 currentAnnotationsDisplay.push(v.id); |
110 });//myProject.onLoad |
112 if(!$('#item-current-annotation-'+v.id).length){ |
111 |
113 var itemAnnotation = |
112 function refreshAnnotationDisplay(t){ |
114 $('<li>') |
113 |
115 .attr('id', 'item-current-annotation-'+v.id) |
114 var currentAnnotationsDisplay = new Array(); |
116 .attr('data-id', v.id) |
115 $.each(annotations, function(k, v){ |
117 .append( |
116 |
118 $('<a>') |
117 if(v.begin <= t && v.end >= t){ |
119 .css('backgroundColor', v.color) |
118 currentAnnotationsDisplay.push(v.id); |
120 .attr('data-id', v.id) |
119 if(!$('#item-current-annotation-'+v.id).length){ |
121 .attr('href', '#') |
120 var itemAnnotation = |
122 .append( |
121 $('<li>') |
123 $('<i>').addClass('icon-'+getIcon(v.type)) |
122 .attr('id', 'item-current-annotation-'+v.id) |
124 ) |
123 .attr('data-id', v.id) |
125 ); |
124 .append( |
126 $('.list-current-annotations').append(itemAnnotation) |
125 $('<a>') |
127 } |
126 .css('backgroundColor', v.color) |
|
127 .attr('data-id', v.id) |
|
128 .attr('href', '#') |
|
129 .append( |
|
130 $('<i>').addClass('icon-'+getIcon(v.type)) |
|
131 ) |
|
132 ); |
|
133 $('.list-current-annotations').append(itemAnnotation) |
128 } |
134 } |
129 }); |
135 } |
130 $.each($('.list-current-annotations li'), function(k, v){ |
136 }); |
131 var idAnnotation = $(this).attr('data-id'), |
137 $.each($('.list-current-annotations li'), function(k, v){ |
132 annotationDisplayView = $('.annotation-display-view'); |
138 var idAnnotation = $(this).attr('data-id'), |
133 if($.inArray(idAnnotation, currentAnnotationsDisplay)<0){//il ne doit plus être affiché |
139 annotationDisplayView = $('.annotation-display-view'); |
134 $('#item-current-annotation-'+idAnnotation).remove(); |
140 if($.inArray(idAnnotation, currentAnnotationsDisplay)<0){//il ne doit plus être affiché |
135 if(annotationDisplayView.attr('data-id') == idAnnotation && annotationDisplayView.is(":visible")){ |
141 $('#item-current-annotation-'+idAnnotation).remove(); |
136 annotationDisplayView.hide(); |
142 if(annotationDisplayView.attr('data-id') == idAnnotation && annotationDisplayView.is(":visible")){ |
137 } |
143 annotationDisplayView.hide(); |
138 } |
144 } |
139 }); |
145 } |
140 |
146 }); |
141 |
147 if(currentAnnotation !== undefined){ |
142 });//timeupdate |
148 showCurrentAnnotationInTimeline(currentAnnotation.id); |
143 |
149 } |
144 });//myProject.onLoad |
150 } |
145 |
151 |
|
152 function showCurrentAnnotationInTimeline(idAnnotation){ |
|
153 $('.timeline-annotations .annotation').empty(); |
|
154 $('#annotation-timeline-'+idAnnotation).text('en cours'); |
|
155 } |
146 //display annotation view |
156 //display annotation view |
147 $('.list-current-annotations').on('click', 'a', function(e){ |
157 $('.list-current-annotations').on('click', 'a', function(e){ |
148 e.preventDefault(); |
158 e.preventDefault(); |
149 var annotationDisplayView = $('.annotation-display-view'), |
159 var annotationDisplayView = $('.annotation-display-view'), |
150 idAnnotation = $(this).attr('data-id'); |
160 idAnnotation = $(this).attr('data-id'); |
201 $(document).on('click', '.project-title-editor i, .project-title', function () { |
208 $(document).on('click', '.project-title-editor i, .project-title', function () { |
202 var html = $('.project-title').html(); |
209 var html = $('.project-title').html(); |
203 var input = $('<input type="text" />'); |
210 var input = $('<input type="text" />'); |
204 input.val(html); |
211 input.val(html); |
205 $('.project-title').replaceWith(input); |
212 $('.project-title').replaceWith(input); |
206 input.focus(); |
213 input.focus().keypress(function(e){ |
|
214 code = (e.keyCode ? e.keyCode : e.which); |
|
215 if (code == 13) $(this).blur(); |
|
216 }); |
207 }); |
217 }); |
208 $(document).on('blur', '.project-title-editor input', function(){ |
218 $(document).on('blur', '.project-title-editor input', function(){ |
209 var newTitle = $(this).val(); |
219 var newTitle = $(this).val(); |
210 myProject.title = newTitle; |
220 myProject.title = newTitle; |
211 $(this).replaceWith('<span class="project-title">'+newTitle+'</span></td>'); |
221 $(this).replaceWith('<span class="project-title">'+newTitle+'</span></td>'); |
498 var data = _.find(annotations, function(c){ return c.id == idAnnotation; }); |
508 var data = _.find(annotations, function(c){ return c.id == idAnnotation; }); |
499 openTab(data.type, data); |
509 openTab(data.type, data); |
500 } |
510 } |
501 }); |
511 }); |
502 |
512 |
503 $('.tab-content').on('keyup', 'input[name=title], textarea', function(e){ |
513 $('.tab-content').on('keyup', '.form-info-general-annotation input[name=title], .form-info-general-annotation textarea', function(e){ |
504 var name = $(this).attr('name'), |
514 var name = $(this).attr('name'), |
505 value = $(this).val(); |
515 value = $(this).val(); |
506 currentAnnotation[name] = value; |
516 currentAnnotation[name] = value; |
507 if(name == 'title'){ |
517 if(name == 'title'){ |
508 var idAnnotation = $(this).parents('form').attr('data-id'); |
518 var idAnnotation = $(this).parents('form').attr('data-id'); |
569 var idAnnotation = dataView.id, |
579 var idAnnotation = dataView.id, |
570 tabContent = $('<div class="tab-pane" id="tab-annotation-'+idAnnotation+'"></div>'), |
580 tabContent = $('<div class="tab-pane" id="tab-annotation-'+idAnnotation+'"></div>'), |
571 iconTab; |
581 iconTab; |
572 |
582 |
573 currentAnnotation = _.find(annotations, function(c){ return c.id == idAnnotation; }); |
583 currentAnnotation = _.find(annotations, function(c){ return c.id == idAnnotation; }); |
574 |
584 showCurrentAnnotationInTimeline(idAnnotation); |
575 |
|
576 |
|
577 //head commun à tous |
585 //head commun à tous |
578 var tplHead = getTemplate('#tpl-head'); |
586 var tplHead = getTemplate('#tpl-head'); |
579 var output = Mustache.render(tplHead, dataView); |
587 var output = Mustache.render(tplHead, dataView); |
580 $(tabContent).append(output); |
588 $(tabContent).append(output); |
581 $(tabContent).find(".slider-duration").slider(configSlider(dataView)); |
589 $(tabContent).find(".slider-duration").slider(configSlider(dataView)); |
|
590 $(tabContent).find(".ui-slider-range.ui-widget-header.ui-corner-all").css('background', dataView.color); |
582 $(tabContent).find('.tag-it').tagit(tagitParam); |
591 $(tabContent).find('.tag-it').tagit(tagitParam); |
583 //type |
592 //type |
584 var viewType = { |
593 var viewType = { |
585 id : idAnnotation, |
594 id : idAnnotation, |
586 content : dataView.content |
595 content : dataView.content |
678 |
687 |
679 //définit currentAnnotation quand la tab s'ouvre |
688 //définit currentAnnotation quand la tab s'ouvre |
680 $('#onglet-annotations').on('show', 'a[data-toggle="annotation"]', function (e) { |
689 $('#onglet-annotations').on('show', 'a[data-toggle="annotation"]', function (e) { |
681 var idAnnotation = $(e.target).attr('data-id'); |
690 var idAnnotation = $(e.target).attr('data-id'); |
682 currentAnnotation = _.find(annotations, function(c){ return c.id == idAnnotation; }); |
691 currentAnnotation = _.find(annotations, function(c){ return c.id == idAnnotation; }); |
|
692 showCurrentAnnotationInTimeline(idAnnotation); |
683 }); |
693 }); |
684 |
694 |
685 //rafraichit annotations au retour sur la liste |
695 //rafraichit annotations au retour sur la liste |
686 $('#onglet-annotations').on('show', 'a[data-toggle="list-annotations"]', function (e) { |
696 $('#onglet-annotations').on('show', 'a[data-toggle="list-annotations"]', function (e) { |
|
697 currentAnnotation = undefined; |
687 renderAnnotation(); |
698 renderAnnotation(); |
688 }); |
699 }); |
689 |
700 |
690 //fermer tab |
701 //fermer tab |
691 $('#onglet-annotations').on('click', 'span.close-tab', function(e){ |
702 $('#onglet-annotations').on('click', 'span.close-tab', function(e){ |
765 tplDiapo = Mustache.render(tplDiapo, dataView); |
776 tplDiapo = Mustache.render(tplDiapo, dataView); |
766 diaporama.append(tplDiapo); |
777 diaporama.append(tplDiapo); |
767 disabledBtnSortable(diaporama); |
778 disabledBtnSortable(diaporama); |
768 |
779 |
769 }; |
780 }; |
|
781 |
|
782 //edit title / description |
|
783 $('.tab-content').on('click', '.title-slideshow-row', function(){ |
|
784 if($(this).find('input').length) return; |
|
785 var html = $(this).find('span').html(); |
|
786 var input = $('<input type="text" />').addClass('input-mini').attr('name', 'title'); |
|
787 input.val(html); |
|
788 $(this).find('span').replaceWith(input); |
|
789 input.focus().keypress(function(e){ |
|
790 code = (e.keyCode ? e.keyCode : e.which); |
|
791 if (code == 13) $(this).blur(); |
|
792 }); |
|
793 }); |
|
794 |
|
795 $('.tab-content').on('click', '.description-slideshow-row', function(){ |
|
796 if($(this).find('textarea').length) return; |
|
797 var html = $(this).find('span').html(); |
|
798 var input = $('<textarea>').attr('name', 'description'); |
|
799 input.val(html); |
|
800 $(this).find('span').replaceWith(input); |
|
801 input.focus().keypress(function(e){ |
|
802 code = (e.keyCode ? e.keyCode : e.which); |
|
803 if (code == 13) $(this).blur(); |
|
804 }); |
|
805 }); |
|
806 |
|
807 $(document).on('blur', '.title-slideshow-row input, .description-slideshow-row textarea', function(){ |
|
808 var newValue = $(this).val(), |
|
809 name = $(this).attr('name'), |
|
810 span = $('<span>').html(newValue), |
|
811 indexRow = $(this).parents('.row-image-diaporama').index(); |
|
812 $(this).replaceWith(span); |
|
813 |
|
814 currentAnnotation.content.images[indexRow][name] = newValue; |
|
815 }); |
770 |
816 |
771 //bouton up / down |
817 //bouton up / down |
772 $(document).on('click', '.ui-sortable .btn-sort', function(e){ |
818 $(document).on('click', '.ui-sortable .btn-sort', function(e){ |
773 e.preventDefault(); |
819 e.preventDefault(); |
774 var row = $(this).parents('tr.row-image-diaporama'), |
820 var row = $(this).parents('tr.row-image-diaporama'), |