4 currentSlider = undefined, |
4 currentSlider = undefined, |
5 secMiniChapter = 10; |
5 secMiniChapter = 10; |
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 ['#1abc9c', '#3498db', '#9b59b6', '#2ecc71', |
12 ['#1abc9c', '#3498db', '#9b59b6', '#2ecc71', |
13 '#f1c40f', '#ecf0f1', '#e67e22', '#e74c3c', '#95a5a6', |
13 '#f1c40f', '#ecf0f1', '#e67e22', '#e74c3c', '#95a5a6', |
14 '#16a085', '#2980b9', '#8e44ad', '#27ae60', |
14 '#16a085', '#2980b9', '#8e44ad', '#27ae60', |
15 '#f39c12', '#c0392b', '#bdc3c7', '#d35400', '#7f8c8d'] |
15 '#f39c12', '#c0392b', '#bdc3c7', '#d35400', '#7f8c8d'] |
16 }; |
16 }; |
17 |
17 |
18 |
18 function getTemplate(idTpl){ |
19 //position de la video setCurrentTime |
19 return $('#templates').find(idTpl).html(); |
20 $(".indicateur-annotation").draggable({ |
20 } |
21 axis: "x", |
21 |
22 containment: "parent", |
22 myProject.onLoad(function() { |
23 drag: function(e, ui) { |
23 myProject.regenerateTags = true; |
24 var t = myMedia.duration * parseInt(ui.helper.css("left")) / ( $(".timeline-annotations").width() - 2 * ui.helper.width() ); |
24 |
25 myMedia.setCurrentTime(t); |
25 $(".project-title").text(myProject.title); |
26 } |
26 $('.project-title-nav').text(myProject.title); |
27 }); |
27 |
28 |
28 myMedia = myProject.getCurrentMedia(); |
29 //survol |
29 |
30 $(document).on('mouseover', '.timeline-annotations .annotation, #list-annotations-rows tr, .item-display-annotation' , function(){ |
30 var anntypes = myProject.getAnnotationTypes().searchByTitle("chapitrage"); |
31 if(!$(this).hasClass('shadow')) { |
31 if (!anntypes.length) { |
32 var idAnnotation = $(this).attr('data-id'); |
32 chapterAnnType = new IriSP.AnnotationType(false, myProject); |
33 $('#annotation-timeline-'+idAnnotation+', #row-list-annotation-'+idAnnotation+', #item-current-annotation-'+idAnnotation).addClass('shadow'); |
33 chapterAnnType.title = "chapitrage"; |
34 } |
34 } else { |
35 }); |
35 chapterAnnType = anntypes[0]; |
36 |
36 } |
37 $(document).on('mouseover', '.chapter-segment, .row-list-chapter' , function(){ |
37 |
38 if(!$(this).hasClass('shadow')) { |
38 //load Chapitre |
39 var idChapter = $(this).attr('data-id'); |
39 chapters = chapterAnnType.getAnnotations(); |
40 $('#row-list-chapter-'+idChapter+', #'+idChapter+', #form-chapter-edit-'+idChapter).addClass('shadow'); |
40 $.each(chapters, function(k, v){ |
41 } |
41 v.color = getRandomColor(); |
42 }); |
42 }); |
43 |
43 renderChapter(); |
44 $(document).on('mouseout', '.shadow' , function(){ |
44 |
45 $('.shadow').removeClass('shadow'); |
45 //load Annotations |
46 }); |
46 var anntypes = myProject.getAnnotationTypes().searchByTitle("annotations"); |
47 |
47 if (!anntypes.length) { |
48 |
48 annotationsAnnType = new IriSP.AnnotationType(false, myProject); |
49 $(document).on('click', '.annotation, .item-display-annotation', function(e){ |
49 annotationsAnnType.title = "annotations"; |
50 e.preventDefault(); |
50 } else { |
51 var idAnnotation = $(this).attr('data-id'), |
51 annotationsAnnType = anntypes[0]; |
52 annotation = _.find(annotations, function(c){ return c.id == idAnnotation; }); |
52 } |
53 myMedia.setCurrentTime(annotation.begin); |
53 |
54 if($('#tab-annotation-'+idAnnotation).length){ |
54 annotations = annotationsAnnType.getAnnotations(); |
55 $('a[href=#tab-annotation-'+idAnnotation+']').tab('show'); |
55 $.each(annotations, function(k, v){ |
56 }else{ |
56 var type = v.content.mimetype.split('-'); |
57 openTab(annotation.type, annotation); |
57 type = type[type.length-1] |
58 } |
58 v.type = type; |
59 }); |
59 v.color = getRandomColor(); |
60 |
60 }); |
61 myProject.onLoad(function() { |
61 renderAnnotation(); |
62 myProject.regenerateTags = true; |
62 |
63 |
63 |
64 $(".project-title").text(myProject.title); |
64 IriSP.htmlPlayer( |
65 $('.project-title-nav').text(myProject.title); |
65 myMedia, |
66 |
66 $(".main-video"), |
67 myMedia = myProject.getCurrentMedia(); |
67 { |
68 |
68 width: 460, |
69 var anntypes = myProject.getAnnotationTypes().searchByTitle("chapitrage"); |
69 height: 345, |
70 if (!anntypes.length) { |
70 controls: true, |
71 chapterAnnType = new IriSP.AnnotationType(false, myProject); |
71 autostart: true, |
72 chapterAnnType.title = "chapitrage"; |
72 url_transform: function(src) { |
73 } else { |
73 return [{ |
74 chapterAnnType = anntypes[0]; |
74 type: "video/mp4", |
75 } |
75 src: src.replace(/\.[\d\w]+$/,'.mp4').replace('rtmp://media.iri.centrepompidou.fr/ddc_player', 'http://media.iri.centrepompidou.fr') |
76 |
76 }, { |
77 //load Chapitre |
77 type: "video/webm", |
78 |
78 src: src.replace(/\.[\d\w]+$/,'.webm').replace('rtmp://media.iri.centrepompidou.fr/ddc_player', 'http://media.iri.centrepompidou.fr') |
79 chapters = chapterAnnType.getAnnotations(); |
79 }]; |
80 $.each(chapters, function(k, v){ |
80 } |
81 v.color = getRandomColor(); |
|
82 }); |
|
83 renderChapter(); |
|
84 |
|
85 //load Annotations |
|
86 var anntypes = myProject.getAnnotationTypes().searchByTitle("annotations"); |
|
87 if (!anntypes.length) { |
|
88 annotationsAnnType = new IriSP.AnnotationType(false, myProject); |
|
89 annotationsAnnType.title = "annotations"; |
|
90 } else { |
|
91 annotationsAnnType = anntypes[0]; |
|
92 } |
|
93 |
|
94 annotations = annotationsAnnType.getAnnotations(); |
|
95 $.each(annotations, function(k, v){ |
|
96 var type = v.content.mimetype.split('-'); |
|
97 type = type[type.length-1] |
|
98 v.type = type; |
|
99 v.color = getRandomColor(); |
|
100 }); |
|
101 renderAnnotation(); |
|
102 |
|
103 |
|
104 IriSP.htmlPlayer( |
|
105 myMedia, |
|
106 $(".main-video"), |
|
107 { |
|
108 width: 460, |
|
109 height: 345, |
|
110 controls: true, |
|
111 autostart: true, |
|
112 url_transform: function(src) { |
|
113 return [{ |
|
114 type: "video/mp4", |
|
115 src: src.replace(/\.[\d\w]+$/,'.mp4').replace('rtmp://media.iri.centrepompidou.fr/ddc_player', 'http://media.iri.centrepompidou.fr') |
|
116 }, { |
|
117 type: "video/webm", |
|
118 src: src.replace(/\.[\d\w]+$/,'.webm').replace('rtmp://media.iri.centrepompidou.fr/ddc_player', 'http://media.iri.centrepompidou.fr') |
|
119 }]; |
|
120 } |
81 } |
121 } |
82 ); |
122 ); |
83 |
123 |
84 myMedia.on("timeupdate", function(t) { |
124 myMedia.on("timeupdate", function(t) { |
85 |
125 |
86 //curseur chapitre |
126 //curseur chapitre |
87 var wContainer = $('.chapitre-cut-wrap').width() - 1, |
127 var wContainer = $('.chapitre-cut-wrap').width() - 1, |
88 pos = wContainer * t / myMedia.duration, |
128 pos = wContainer * t / myMedia.duration, |
89 btnCutChapter = $('.btn-cut-chapter'), |
129 btnCutChapter = $('.btn-cut-chapter'), |
90 wBtnCutChapter = btnCutChapter.outerWidth(); |
130 wBtnCutChapter = btnCutChapter.outerWidth(); |
91 |
|
92 $(".indicateur-chapter, .indicateur-annotation").css("left",pos); |
|
93 if(pos+wBtnCutChapter>wContainer){ |
|
94 btnCutChapter.css("left",(pos - wBtnCutChapter)); |
|
95 }else{ |
|
96 btnCutChapter.css("left",pos); |
|
97 } |
|
98 $('.info-time').text(t) |
|
99 //annotations view |
|
100 refreshAnnotationDisplay(t); |
|
101 |
|
102 });//timeupdate |
131 |
103 |
132 $(".indicateur-chapter, .indicateur-annotation").css("left",pos); |
104 });//myProject.onLoad |
133 if(pos+wBtnCutChapter>wContainer){ |
105 |
134 btnCutChapter.css("left",(pos - wBtnCutChapter)); |
106 /* Display annotation in timeline */ |
|
107 |
|
108 //survol |
|
109 $(document).on('mouseover', '.timeline-annotations .annotation, #list-annotations-rows tr, .item-display-annotation' , function(){ |
|
110 if(!$(this).hasClass('shadow')) { |
|
111 var idAnnotation = $(this).attr('data-id'); |
|
112 $('#annotation-timeline-'+idAnnotation+', #row-list-annotation-'+idAnnotation+', #item-current-annotation-'+idAnnotation).addClass('shadow'); |
|
113 } |
|
114 }); |
|
115 |
|
116 $(document).on('mouseover', '.chapter-segment, .row-list-chapter' , function(){ |
|
117 if(!$(this).hasClass('shadow')) { |
|
118 var idChapter = $(this).attr('data-id'); |
|
119 $('#row-list-chapter-'+idChapter+', #'+idChapter+', #form-chapter-edit-'+idChapter).addClass('shadow'); |
|
120 } |
|
121 }); |
|
122 |
|
123 $(document).on('mouseout', '.shadow' , function(){ |
|
124 $('.shadow').removeClass('shadow'); |
|
125 }); |
|
126 |
|
127 $(document).on('click', '.annotation, .item-display-annotation', function(e){ |
|
128 e.preventDefault(); |
|
129 var idAnnotation = $(this).attr('data-id'), |
|
130 annotation = _.find(annotations, function(c){ return c.id == idAnnotation; }); |
|
131 myMedia.setCurrentTime(annotation.begin); |
|
132 if($('#tab-annotation-'+idAnnotation).length){ |
|
133 $('a[href=#tab-annotation-'+idAnnotation+']').tab('show'); |
135 }else{ |
134 }else{ |
136 btnCutChapter.css("left",pos); |
135 openTab(annotation.type, annotation); |
137 } |
136 } |
138 $('.info-time').text(t) |
137 }); |
139 //annotations view |
138 |
140 refreshAnnotationDisplay(t); |
139 function refreshAnnotationDisplay(t){ |
141 |
140 var currentAnnotationsDisplay = new Array(); |
142 });//timeupdate |
141 $.each(annotations, function(k, v){ |
143 |
142 |
144 });//myProject.onLoad |
143 if(v.begin <= t && v.end >= t){ |
145 |
144 currentAnnotationsDisplay.push(v.id); |
146 function refreshAnnotationDisplay(t){ |
145 if(!$('#item-current-annotation-'+v.id).length){ |
147 |
146 var itemAnnotation = getTemplate('#tpl-item-annotation-display'); |
148 var currentAnnotationsDisplay = new Array(); |
147 v.iconTab = getIcon(v.type); |
149 $.each(annotations, function(k, v){ |
148 itemAnnotation = Mustache.render(itemAnnotation, v); |
150 |
149 $('.list-current-annotations').append(itemAnnotation) |
151 if(v.begin <= t && v.end >= t){ |
150 } |
152 currentAnnotationsDisplay.push(v.id); |
|
153 if(!$('#item-current-annotation-'+v.id).length){ |
|
154 var itemAnnotation = getTemplate('#tpl-item-annotation-display'); |
|
155 v.iconTab = getIcon(v.type); |
|
156 itemAnnotation = Mustache.render(itemAnnotation, v); |
|
157 $('.list-current-annotations').append(itemAnnotation) |
|
158 } |
151 } |
159 } |
152 }); |
160 }); |
153 |
161 $.each($('.list-current-annotations li'), function(k, v){ |
154 $.each($('.list-current-annotations li'), function(k, v){ |
162 var idAnnotation = $(this).attr('data-id'), |
155 var idAnnotation = $(this).attr('data-id'), |
163 annotationDisplayView = $('.annotation-display-view'); |
156 annotationDisplayView = $('.annotation-display-view'); |
164 if($.inArray(idAnnotation, currentAnnotationsDisplay)<0){//il ne doit plus être affiché |
157 if($.inArray(idAnnotation, currentAnnotationsDisplay)<0){//il ne doit plus être affiché |
165 $('#item-current-annotation-'+idAnnotation).remove(); |
158 $('#item-current-annotation-'+idAnnotation).remove(); |
166 if(annotationDisplayView.attr('data-id') == idAnnotation && annotationDisplayView.is(":visible")){ |
159 if(annotationDisplayView.attr('data-id') == idAnnotation && annotationDisplayView.is(":visible")){ |
167 annotationDisplayView.hide(); |
160 annotationDisplayView.hide(); |
|
161 } |
168 } |
162 } |
169 } |
163 }); |
170 }); |
164 if(currentAnnotation !== undefined){ |
171 if(currentAnnotation !== undefined){ |
165 showCurrentAnnotationInTimeline(currentAnnotation.id); |
172 showCurrentAnnotationInTimeline(currentAnnotation.id); |
166 } |
173 } |
167 } |
174 } |
168 |
175 |
169 function showCurrentAnnotationInTimeline(idAnnotation){ |
176 function showCurrentAnnotationInTimeline(idAnnotation){ |
170 $('.annotation').removeClass('editing'); |
177 $('.annotation').removeClass('editing'); |
171 $('#annotation-timeline-'+idAnnotation).addClass('editing'); |
178 $('#annotation-timeline-'+idAnnotation).addClass('editing'); |
172 } |
179 } |
173 |
180 //display annotation view |
174 $('.list-current-annotations').on('click', 'a', function(e){ |
181 $('.list-current-annotations').on('click', 'a', function(e){ |
175 e.preventDefault(); |
182 e.preventDefault(); |
176 }); |
183 /* |
177 |
184 var annotationDisplayView = $('.annotation-display-view'), |
178 |
185 idAnnotation = $(this).attr('data-id'); |
179 /* Modal */ |
186 var annotation = _.find(annotations, function(c){ return c.id == idAnnotation; }); |
|
187 |
|
188 if(annotationDisplayView.attr('data-id') == idAnnotation && annotationDisplayView.is(":visible")){ |
|
189 annotationDisplayView.hide(); |
|
190 }else{ |
|
191 annotationDisplayView |
|
192 .attr('data-id', idAnnotation) |
|
193 .css('backgroundColor', annotation.color) |
|
194 .text(annotation.type+' : '+annotation.title) |
|
195 .show(); |
|
196 } |
|
197 */ |
|
198 }); |
|
199 |
|
200 //########### modal |
|
201 |
|
202 $(document).on('click', 'a.open-modal', function(e){ |
|
203 |
|
204 }); |
|
205 |
|
206 //select on bibliotheque |
|
207 |
180 |
208 //confirmation suppression |
181 //confirmation suppression |
209 $("#modal-confirm").on('click', '#btn-delete-modal', function(e){ |
182 $("#modal-confirm").on('click', '#btn-delete-modal', function(e){ |
210 |
183 |
211 var typeDelete = $(this).attr('data-type-delete'), |
184 var typeDelete = $(this).attr('data-type-delete'), |
293 chapterWrap.find('.tag-it').tagit(tagitParam); |
258 chapterWrap.find('.tag-it').tagit(tagitParam); |
294 |
259 |
295 myMedia.setCurrentTime(currentChapter.begin); |
260 myMedia.setCurrentTime(currentChapter.begin); |
296 } |
261 } |
297 |
262 |
298 function getTemplate(idTpl){ |
263 //delete chapter |
299 return $('#templates').find(idTpl).html(); |
264 $(document).on('click', '.btn-delete-chapter', function(e){ |
300 } |
265 e.preventDefault(); |
301 //supprimer |
266 |
302 $(document).on('click', '.btn-delete-chapter', function(e){ |
267 if(chapters.length == 1){ |
303 e.preventDefault(); |
268 $('#modal-alert .alert-message').hide(); |
304 |
269 $('#modal-alert #alert-chapter-number').show(); |
305 if(chapters.length == 1){ |
270 $('#modal-alert').modal('show'); |
306 $('#modal-alert .alert-message').hide(); |
271 return; |
307 $('#modal-alert #alert-chapter-number').show(); |
272 } |
308 $('#modal-alert').modal('show'); |
273 var idChapter = $(this).attr('data-chapter-id'), |
309 return; |
274 btnDeleteModal = $("#modal-confirm #btn-delete-modal"); |
310 } |
275 btnDeleteModal.attr('data-type-delete', 'chapter'); |
311 var idChapter = $(this).attr('data-chapter-id'), |
276 btnDeleteModal.attr('data-id', idChapter); |
312 btnDeleteModal = $("#modal-confirm #btn-delete-modal"); |
277 |
313 btnDeleteModal.attr('data-type-delete', 'chapter'); |
278 var titleMedia = $(this).attr('data-title'), |
314 btnDeleteModal.attr('data-id', idChapter); |
279 urlDelete = $(this).attr('href'); |
315 |
280 $("#modal-confirm #btn-delete-modal").attr('href', urlDelete).focus(); |
316 var titleMedia = $(this).attr('data-title'), |
281 $("#modal-confirm .modal-body").find('.titleMedia').text(titleMedia); |
317 urlDelete = $(this).attr('href'); |
282 $("#modal-confirm").modal('show'); |
318 $("#modal-confirm #btn-delete-modal").attr('href', urlDelete).focus(); |
283 |
319 $("#modal-confirm .modal-body").find('.titleMedia').text(titleMedia); |
284 }); |
320 $("#modal-confirm").modal('show'); |
285 $(document).on('click', '.btn-ok-chapter', function(e){ |
321 |
286 e.preventDefault(); |
322 }); |
287 $('.form-chapter-edit').remove(); |
323 $(document).on('click', '.btn-ok-chapter', function(e){ |
288 }); |
324 e.preventDefault(); |
289 |
325 $('.form-chapter-edit').remove(); |
290 function deleteChapter(idChapter){ |
326 }) |
291 |
327 |
292 $("#modal-confirm").modal('hide'); |
328 function deleteChapter(idChapter){ |
293 var chapter = _.find(chapters, function(c){ return c.id == idChapter; }), |
329 |
294 indexChapter = _.indexOf(chapters, chapter), |
330 $("#modal-confirm").modal('hide'); |
295 chapterModify; |
331 var chapter = _.find(chapters, function(c){ return c.id == idChapter; }), |
296 if(indexChapter == 0){ |
332 indexChapter = _.indexOf(chapters, chapter), |
297 chapterModify = chapters[1]; |
333 chapterModify; |
298 chapterModify.setBegin(0); |
334 if(indexChapter == 0){ |
299 }else{ |
335 chapterModify = chapters[1]; |
300 chapterModify = chapters[indexChapter-1]; |
336 chapterModify.setBegin(0); |
301 //var newEnd = new IriSP.Model.Time(chapter.end) |
337 }else{ |
302 chapterModify.setEnd(chapter.end); |
338 chapterModify = chapters[indexChapter-1]; |
303 } |
339 //var newEnd = new IriSP.Model.Time(chapter.end) |
304 chapters.removeId(idChapter); |
340 chapterModify.setEnd(chapter.end); |
305 myProject.getAnnotations().removeId(idChapter, true); |
341 } |
306 renderChapter(); |
342 chapters.removeId(idChapter); |
307 //si le formulaire est visible |
343 myProject.getAnnotations().removeId(idChapter, true); |
308 if($('#form-chapter-edit-'+idChapter).length){ |
344 renderChapter(); |
309 $('#form-chapter-edit-'+idChapter).remove(); |
345 //si le formulaire est visible |
310 } |
346 if($('#form-chapter-edit-'+idChapter).length){ |
311 disabledPreview(); |
347 $('#form-chapter-edit-'+idChapter).remove(); |
312 } |
348 } |
313 |
349 } |
314 function getRandomColor(){ |
350 |
315 return global.colors[(global.colorsIndex<global.colors.length) ? global.colorsIndex++ : (global.colorsIndex=0)]; |
351 function getRandomColor(){ |
316 } |
352 return global.colors[(global.colorsIndex<global.colors.length) ? global.colorsIndex++ : (global.colorsIndex=0)]; |
317 //nouveau chapitre |
353 } |
|
354 //nouveau chapitre |
|
355 function newChapter(dataChapter, render){ |
318 function newChapter(dataChapter, render){ |
356 var chapter = new IriSP.Model.Annotation(false, myProject); |
319 var chapter = new IriSP.Model.Annotation(false, myProject); |
357 chapter.setMedia(myMedia.id); |
320 chapter.setMedia(myMedia.id); |
358 chapter.setBegin(dataChapter.begin); |
321 chapter.setBegin(dataChapter.begin); |
359 chapter.setEnd(dataChapter.end); |
322 chapter.setEnd(dataChapter.end); |
878 |
848 |
879 var newIndex = row.index(); |
849 var newIndex = row.index(); |
880 currentAnnotation.content.images.move(oldIndex, newIndex); |
850 currentAnnotation.content.images.move(oldIndex, newIndex); |
881 |
851 |
882 disabledBtnSortable(listDiaporama); |
852 disabledBtnSortable(listDiaporama); |
|
853 disabledPreview(); |
883 }); |
854 }); |
884 |
855 |
885 $('.tab-content').on('click','.btn-delete-image', function(e){ |
856 $('.tab-content').on('click','.btn-delete-image', function(e){ |
886 e.preventDefault(); |
857 e.preventDefault(); |
887 var rowImage = $(this).parents('tr.row-image-diaporama'), |
858 var rowImage = $(this).parents('tr.row-image-diaporama'), |
888 index = rowImage.index(); |
859 index = rowImage.index(); |
889 |
860 |
890 rowImage.remove(); |
861 rowImage.remove(); |
891 currentAnnotation.content.images.splice(index, 1); |
862 currentAnnotation.content.images.splice(index, 1); |
|
863 disabledPreview(); |
892 }); |
864 }); |
893 |
865 |
894 function disabledBtnSortable(listDiaporama){ |
866 function disabledBtnSortable(listDiaporama){ |
895 listDiaporama.find('.btn-sort.disabled').removeClass('disabled'); |
867 listDiaporama.find('.btn-sort.disabled').removeClass('disabled'); |
896 listDiaporama.find('tr.row-image-diaporama:first-child').find('.btn-sort.up').addClass('disabled'); |
868 listDiaporama.find('tr.row-image-diaporama:first-child').find('.btn-sort.up').addClass('disabled'); |
897 listDiaporama.find('tr.row-image-diaporama:last-child').find('.btn-sort.down').addClass('disabled'); |
869 listDiaporama.find('tr.row-image-diaporama:last-child').find('.btn-sort.down').addClass('disabled'); |
898 } |
870 } |
899 |
871 |
900 |
872 //links |
901 //links |
873 $('.tab-content').on('click', '.add-link', function(e){ |
902 $('.tab-content').on('click', '.add-link', function(e){ |
874 e.preventDefault(); |
903 e.preventDefault(); |
875 var tbody = $(this).parents('tfoot').siblings('tbody'); |
904 var tbody = $(this).parents('tfoot').siblings('tbody'); |
876 addLinkRow(tbody); |
905 addLinkRow(tbody); |
877 }); |
906 }); |
878 $('.tab-content').on('click', '.delete-link', function(e){ |
907 $('.tab-content').on('click', '.delete-link', function(e){ |
879 e.preventDefault(); |
908 e.preventDefault(); |
880 var row = $(this).parents('tr'), |
909 var row = $(this).parents('tr'), |
881 tbody = $(this).parents('tbody'); |
910 tbody = $(this).parents('tbody'); |
882 |
911 |
883 row.remove(); |
912 row.remove(); |
884 updateLinks(tbody); |
913 updateLinks(tbody); |
885 }); |
914 }); |
886 function addLinkRow(tbody, dataView){ |
915 function addLinkRow(tbody, dataView){ |
887 |
916 |
888 //head commun à tous |
917 //head commun à tous |
889 var tplLinkRow = getTemplate('#tpl-links-row'); |
918 var tplLinkRow = getTemplate('#tpl-links-row'); |
890 var output = Mustache.render(tplLinkRow, dataView); |
919 var output = Mustache.render(tplLinkRow, dataView); |
891 tbody.append(output); |
920 tbody.append(output); |
892 |
921 |
893 } |
922 } |
894 $('.tab-content').on('keyup', '.links-rows input', function(e){ |
923 $('.tab-content').on('keyup', '.links-rows input', function(e){ |
895 var tbody = $(this).parents('.links-rows'); |
924 var tbody = $(this).parents('.links-rows'); |
896 updateLinks(tbody); |
925 updateLinks(tbody); |
897 }); |
926 }); |
898 function updateLinks(tbody){ |
927 function updateLinks(tbody){ |
899 links = new Array(); |
928 links = new Array(); |
900 |
929 |
901 $.each(tbody.find('tr'), function(k, v){ |
930 $.each(tbody.find('tr'), function(k, v){ |
902 var urlLink = $(v).find('.url-link').val(), |
931 var urlLink = $(v).find('.url-link').val(), |
903 titleLink = $(v).find('.title-link').val(), |
932 titleLink = $(v).find('.title-link').val(), |
904 link = { |
933 link = { |
905 url : urlLink, |
934 url : urlLink, |
906 title : titleLink |
935 title : titleLink |
907 }; |
936 }; |
908 links.push(link); |
937 links.push(link); |
909 |
938 |
910 }); |
939 }); |
911 currentAnnotation.content.links = links; |
940 currentAnnotation.content.links = links; |
912 disabledPreview(); |
941 } |
913 } |
942 |
914 |
943 //annotation audio |
915 //annotation audio |
944 $('.tab-content').on('keyup', '.annotation-audio-content input, .annotation-audio-content textarea', function(){ |
916 $('.tab-content').on('keyup', '.annotation-audio-content input, .annotation-audio-content textarea', function(){ |
945 var name = $(this).attr('name'), |
917 var name = $(this).attr('name'), |
946 value = $(this).val(); |
918 value = $(this).val(); |
947 |
919 |
948 currentAnnotation.content[name] = value; |
920 currentAnnotation.content[name] = value; |
949 }); |
921 disabledPreview(); |
950 |
922 }); |
951 //annotation slideshow |
923 |
952 $('.tab-content').on('click', '.btn-autostart', function(){ |
924 //annotation slideshow |
953 var autostart = $(this).attr('data-autostart'); |
925 $('.tab-content').on('click', '.btn-autostart', function(){ |
954 if(autostart == "true"){ autostart = true;} |
926 var autostart = $(this).attr('data-autostart'); |
955 else {autostart = false;} |
927 if(autostart == "true"){ autostart = true;} |
956 currentAnnotation.content.autostart = autostart; |
928 else {autostart = false;} |
957 }); |
929 disabledPreview(); |
958 |
930 currentAnnotation.content.autostart = autostart; |
959 $('.tab-content').on('change keyup', '.config-diaporama input[name=duration]', function(){ |
931 }); |
960 var value = $(this).val(); |
932 |
961 if(!isNaN(value)){ |
933 $('.tab-content').on('change keyup', '.config-diaporama input[name=duration]', function(){ |
962 currentAnnotation.content.slideduration = value * 1000; |
934 var value = $(this).val(); |
963 } |
935 if(!isNaN(value)){ |
964 }); |
936 disabledPreview(); |
965 |
937 currentAnnotation.content.slideduration = value * 1000; |
966 $('.alert').bind('close', function (e) { |
938 } |
967 e.preventDefault(); |
939 }); |
968 $(this).hide(); |
940 |
969 }); |
941 |
970 |
942 //save project |
971 function showAlertByClassName(className){ |
943 $('.btn-save-project').bind('click', function(e){ |
972 $('.alert').hide(); |
944 e.preventDefault(); |
973 $('.'+className).show(); |
945 if($(this).hasClass('disabled')) return; |
974 } |
946 |
975 //save project |
947 showAlertByClassName('save-load'); |
976 |
948 var that = this; |
977 $('.btn-save-project').bind('click', function(e){ |
949 $(this).addClass('disabled'); |
978 e.preventDefault(); |
950 |
979 if($(this).hasClass('disabled')) return; |
951 console.log(myProject.serialize()); |
980 |
952 |
981 showAlertByClassName('save-load'); |
953 $.ajax({ |
982 $(this).addClass('disabled'); |
954 type: "POST", |
983 |
955 url: urlSaveProject, |
984 console.log(myProject.serialize()); |
956 data: myProject.serialize(), |
985 |
957 contentType: "application/cinelab", |
986 $.ajax({ |
958 headers: { |
987 type: "POST", |
959 "X-CSRFToken": tokenSaveProject |
988 url: urlSaveProject, |
960 }, |
989 data: myProject.serialize(), |
961 success: function(data, status, request){ |
990 contentType: "application/cinelab", |
962 showAlertByClassName('save-ok'); |
991 headers: { |
963 $('.btn-apercu-projet').removeClass('disabled'); |
992 "X-CSRFToken": tokenSaveProject |
964 console.log('data : ', data); |
|
965 console.log('status : ', status); |
|
966 console.log('request : ', request); |
|
967 |
|
968 }, |
|
969 error: function(jqXHR, textStatus, errorThrown){ |
|
970 showAlertByClassName('save-error'); |
|
971 //alert(gettext("Server error\nYour hashcut couldn't be published")); |
|
972 }, |
|
973 complete : function(){ |
|
974 $(that).removeClass('disabled'); |
|
975 } |
|
976 }); |
|
977 }); |
|
978 |
|
979 //disabled preview |
|
980 function disabledPreview(){ |
|
981 if(!$('.btn-apercu-projet').hasClass('disabled'))$('.btn-apercu-projet').addClass('disabled'); |
|
982 } |
|
983 $(document).on('click', '.btn-apercu-projet.disabled', function(e){ |
|
984 e.preventDefault(); |
|
985 }); |
|
986 |
|
987 //alert |
|
988 $('.alert').bind('close', function (e) { |
|
989 e.preventDefault(); |
|
990 $(this).hide(); |
|
991 }); |
|
992 |
|
993 function showAlertByClassName(className){ |
|
994 $('.alert').hide(); |
|
995 $('.'+className).show(); |
|
996 } |
|
997 //################ config |
|
998 //tagit |
|
999 function onTagItChange(e, ui) { |
|
1000 var tagitType = $(this).attr('data-type'), |
|
1001 value = $(this).val(); |
|
1002 |
|
1003 disabledPreview(); |
|
1004 |
|
1005 if(tagitType == 'chapter'){ |
|
1006 var idChapter = $(this).parents('form').attr('data-chapter-id'); |
|
1007 currentChapter.keywords = value.split(','); |
|
1008 $('#row-list-chapter-'+idChapter).find('.list-chapter-tags').text(value); |
|
1009 }else{ |
|
1010 currentAnnotation.keywords = value.split(','); |
|
1011 } |
|
1012 } |
|
1013 |
|
1014 var tagitParam = { |
|
1015 allowSpaces: true, |
|
1016 afterTagRemoved : onTagItChange, |
|
1017 afterTagAdded : onTagItChange |
|
1018 } |
|
1019 |
|
1020 //CLEditor annotation > text (wysiwyg) http://premiumsoftware.net/cleditor/docs/GettingStarted.html#optionalParameters |
|
1021 var wysiwygConfig = { |
|
1022 width: 450, |
|
1023 height: 250, |
|
1024 controls: "bold italic underline strikethrough | font size " + |
|
1025 "style | color highlight removeformat | bullets numbering | source", |
|
1026 fonts: "Arial,Arial Black,Comic Sans MS,Courier New,Narrow,Garamond," + |
|
1027 "Georgia,Impact,Sans Serif,Serif,Tahoma,Trebuchet MS,Verdana", |
|
1028 sizes: "1,2,3,4,5,6,7", |
|
1029 styles: [["Paragraph", "<p>"], ["Header 2", "<h2>"], |
|
1030 ["Header 3", "<h3>"], ["Header 4","<h4>"], ["Header 5","<h5>"], |
|
1031 ["Header 6","<h6>"]], |
|
1032 docType: '<!DOCTYPE HTML>', |
|
1033 bodyStyle: "margin:0; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;", |
|
1034 updateTextArea : function(text){ |
|
1035 disabledPreview(); |
|
1036 currentAnnotation.content.text = text; |
|
1037 return text; |
993 }, |
1038 }, |
994 success: function(data, status, request){ |
1039 updateFrame: function(text){ |
995 showAlertByClassName('save-ok'); |
1040 disabledPreview(); |
996 $(this).removeClass('disabled'); |
1041 currentAnnotation.content.text = text; |
997 $('.btn-apercu-projet').removeClass('disabled'); |
1042 return text; |
998 console.log('data : ', data); |
|
999 console.log('status : ', status); |
|
1000 console.log('request : ', request); |
|
1001 |
|
1002 }, |
|
1003 error: function(jqXHR, textStatus, errorThrown){ |
|
1004 showAlertByClassName('save-error'); |
|
1005 $(this).removeClass('disabled'); |
|
1006 //alert(gettext("Server error\nYour hashcut couldn't be published")); |
|
1007 } |
|
1008 }); |
|
1009 |
|
1010 |
|
1011 }); |
|
1012 |
|
1013 function disabledPreview(){ |
|
1014 if(!$('.btn-apercu-projet').hasClass('disabled'))$('.btn-apercu-projet').addClass('disabled'); |
|
1015 } |
|
1016 |
|
1017 //################ config |
|
1018 //tagit |
|
1019 function onTagItChange(e, ui) { |
|
1020 var tagitType = $(this).attr('data-type'), |
|
1021 value = $(this).val(); |
|
1022 |
|
1023 if(tagitType == 'chapter'){ |
|
1024 var idChapter = $(this).parents('form').attr('data-chapter-id'); |
|
1025 currentChapter.keywords = value.split(','); |
|
1026 $('#row-list-chapter-'+idChapter).find('.list-chapter-tags').text(value); |
|
1027 }else{ |
|
1028 currentAnnotation.keywords = value.split(','); |
|
1029 } |
|
1030 |
|
1031 } |
|
1032 |
|
1033 var tagitParam = { |
|
1034 allowSpaces: true, |
|
1035 afterTagRemoved : onTagItChange, |
|
1036 afterTagAdded : onTagItChange |
|
1037 } |
|
1038 |
|
1039 //CLEditor annotation > text (wysiwyg) |
|
1040 //http://premiumsoftware.net/cleditor/docs/GettingStarted.html#optionalParameters |
|
1041 var wysiwygConfig = { |
|
1042 width: 450, |
|
1043 height: 250, |
|
1044 controls: "bold italic underline strikethrough | font size " + |
|
1045 "style | color highlight removeformat | bullets numbering | source", |
|
1046 fonts: "Arial,Arial Black,Comic Sans MS,Courier New,Narrow,Garamond," + |
|
1047 "Georgia,Impact,Sans Serif,Serif,Tahoma,Trebuchet MS,Verdana", |
|
1048 sizes: "1,2,3,4,5,6,7", |
|
1049 styles: [["Paragraph", "<p>"], ["Header 2", "<h2>"], |
|
1050 ["Header 3", "<h3>"], ["Header 4","<h4>"], ["Header 5","<h5>"], |
|
1051 ["Header 6","<h6>"]], |
|
1052 docType: '<!DOCTYPE HTML>', |
|
1053 bodyStyle: "margin:0; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;", |
|
1054 updateTextArea : function(text){ |
|
1055 currentAnnotation.content.text = text; |
|
1056 return text; |
|
1057 }, |
|
1058 updateFrame: function(text){ |
|
1059 currentAnnotation.content.text = text; |
|
1060 return text; |
|
1061 } |
|
1062 }; |
|
1063 |
|
1064 //slider |
|
1065 function configSlider(data){ |
|
1066 return { |
|
1067 range: true, |
|
1068 values: [ data.begin.milliseconds, data.end.milliseconds ], |
|
1069 min: 0, |
|
1070 max: myMedia.duration.milliseconds, |
|
1071 slide: function( event, ui ) { |
|
1072 |
|
1073 data.setBegin(ui.values[0]); |
|
1074 data.setEnd(ui.values[1]); |
|
1075 |
|
1076 var idSlider = $(this).attr('data-id'), |
|
1077 wTimeline = $('.timeline-annotations').width(), |
|
1078 annotationTimeline = $('#annotation-timeline-'+ data.id), |
|
1079 width = Math.floor(data.getDuration() * wTimeline / myMedia.duration), |
|
1080 left = Math.floor(data.begin * wTimeline / myMedia.duration); |
|
1081 |
|
1082 $( '#'+ idSlider +'-begin span' ).html(data.begin.toString()); |
|
1083 $( '#'+ idSlider +'-begin span' ).attr('data-milliseconds', data.begin); |
|
1084 $( '#'+ idSlider +'-duration' ).html(data.getDuration().toString()); |
|
1085 $( '#'+ idSlider +'-end span' ).html(data.end.toString()); |
|
1086 $( '#'+ idSlider +'-end span' ).attr('data-milliseconds', data.end); |
|
1087 |
|
1088 annotationTimeline.css({ |
|
1089 left : left, |
|
1090 width :width |
|
1091 }); |
|
1092 }, |
|
1093 start : function(){ |
|
1094 var idSlider = $(this).attr('data-id'), |
|
1095 annotationTimeline = $('#annotation-timeline-'+ data.id); |
|
1096 annotationTimeline.css('z-index',100); |
|
1097 }, |
|
1098 stop : function(){ |
|
1099 renderAnnotation(); |
|
1100 refreshAnnotationDisplay(myMedia.getCurrentTime()); |
|
1101 } |
1043 } |
1102 }; |
1044 }; |
1103 } |
1045 |
1104 |
1046 //slider |
1105 //init annotation content data |
1047 function configSlider(data){ |
1106 function getContentAnnotationByType(type){ |
1048 return { |
1107 var content; |
1049 range: true, |
1108 switch(type){ |
1050 values: [ data.begin.milliseconds, data.end.milliseconds ], |
1109 case 'audio': |
1051 min: 0, |
1110 content = { |
1052 max: myMedia.duration.milliseconds, |
1111 mimetype : "application/x-ldt-audio", |
1053 slide: function( event, ui ) { |
1112 url : "", |
1054 |
1113 embedcode : "" |
1055 data.setBegin(ui.values[0]); |
1114 }; |
1056 data.setEnd(ui.values[1]); |
1115 break; |
1057 |
1116 case 'video': |
1058 var idSlider = $(this).attr('data-id'), |
1117 content = { |
1059 wTimeline = $('.timeline-annotations').width(), |
1118 mimetype : "application/x-ldt-video", |
1060 annotationTimeline = $('#annotation-timeline-'+ data.id), |
1119 url : "", |
1061 width = Math.floor(data.getDuration() * wTimeline / myMedia.duration), |
1120 embedcode : "" |
1062 left = Math.floor(data.begin * wTimeline / myMedia.duration); |
1121 }; |
1063 |
1122 break; |
1064 $( '#'+ idSlider +'-begin span' ).html(data.begin.toString()); |
1123 case 'text': |
1065 $( '#'+ idSlider +'-begin span' ).attr('data-milliseconds', data.begin); |
1124 content = { |
1066 $( '#'+ idSlider +'-duration' ).html(data.getDuration().toString()); |
1125 mimetype : "application/x-ldt-text", |
1067 $( '#'+ idSlider +'-end span' ).html(data.end.toString()); |
1126 markup : "html", |
1068 $( '#'+ idSlider +'-end span' ).attr('data-milliseconds', data.end); |
1127 text : "" |
1069 |
1128 }; |
1070 annotationTimeline.css({ |
1129 break; |
1071 left : left, |
1130 case 'links': |
1072 width :width |
1131 content = { |
1073 }); |
1132 mimetype : "application/x-ldt-links", |
1074 }, |
1133 links : [] |
1075 start : function(){ |
1134 }; |
1076 var idSlider = $(this).attr('data-id'), |
1135 break; |
1077 annotationTimeline = $('#annotation-timeline-'+ data.id); |
1136 case 'slideshow': |
1078 annotationTimeline.css('z-index',100); |
1137 content = { |
1079 disabledPreview(); |
1138 mimetype : "application/x-ldt-slideshow", |
1080 }, |
1139 slideduration : 1000, |
1081 stop : function(){ |
1140 autostart : false, |
1082 renderAnnotation(); |
1141 images : [] |
1083 refreshAnnotationDisplay(myMedia.getCurrentTime()); |
1142 }; |
1084 } |
1143 break; |
1085 }; |
1144 } |
1086 } |
1145 return content; |
1087 |
1146 }//getContentAnnotationByType |
1088 //init annotation content data |
1147 |
1089 function getContentAnnotationByType(type){ |
|
1090 var content; |
|
1091 switch(type){ |
|
1092 case 'audio': |
|
1093 content = { |
|
1094 mimetype : "application/x-ldt-audio", |
|
1095 url : "", |
|
1096 embedcode : "" |
|
1097 }; |
|
1098 break; |
|
1099 case 'video': |
|
1100 content = { |
|
1101 mimetype : "application/x-ldt-video", |
|
1102 url : "", |
|
1103 embedcode : "" |
|
1104 }; |
|
1105 break; |
|
1106 case 'text': |
|
1107 content = { |
|
1108 mimetype : "application/x-ldt-text", |
|
1109 markup : "html", |
|
1110 text : "" |
|
1111 }; |
|
1112 break; |
|
1113 case 'links': |
|
1114 content = { |
|
1115 mimetype : "application/x-ldt-links", |
|
1116 links : [] |
|
1117 }; |
|
1118 break; |
|
1119 case 'slideshow': |
|
1120 content = { |
|
1121 mimetype : "application/x-ldt-slideshow", |
|
1122 slideduration : 1000, |
|
1123 autostart : false, |
|
1124 images : [] |
|
1125 }; |
|
1126 break; |
|
1127 } |
|
1128 return content; |
|
1129 }//getContentAnnotationByType |
|
1130 |
|
1131 //unload |
|
1132 $(window).on("beforeunload", onLeave); |
|
1133 function onLeave(){ |
|
1134 if($('.btn-apercu-projet').hasClass('disabled')) return "You have unsaved changes"; |
|
1135 } |
1148 |
1136 |
1149 /* Tangles */ |
1137 /* Tangles */ |
1150 var tangleMsPerPixel = 100, |
1138 var tangleMsPerPixel = 100, |
1151 activeTangle, |
1139 activeTangle, |
1152 tangleStartX, |
1140 tangleStartX, |