--- a/src/metadatacomposer/static/metadatacomposer/js/edition.js Mon May 27 16:24:42 2013 +0200
+++ b/src/metadatacomposer/static/metadatacomposer/js/edition.js Mon May 27 16:39:16 2013 +0200
@@ -1,5 +1,6 @@
var myMedia = null,
currentChapter = null,
+ currentAnnotation = null,
chapters = [],
annotations = [];
@@ -17,15 +18,15 @@
};
-
-
myProject.onLoad(function() {
$(".project-title").text(myProject.title);
myMedia = myProject.getCurrentMedia();
+ //chargement des chapitres et annotations existants
loadInitChapters();
+ loadInitAnnotation()
IriSP.htmlPlayer(
myMedia,
@@ -45,19 +46,74 @@
pos = wContainer * t / myMedia.duration,
btnCutChapter = $('.btn-cut-chapter'),
wBtnCutChapter = btnCutChapter.outerWidth();
-
- $(".indicateur-chapter").css("left",pos);
+
+ $(".indicateur-chapter, .indicateur-annotation").css("left",pos);
if(pos+wBtnCutChapter>wContainer){
btnCutChapter.css("left",(pos - wBtnCutChapter));
}else{
btnCutChapter.css("left",pos);
}
+
+ //annotations view
+ var currentAnnotationsDisplay = new Array();
+ $.each(annotations, function(k, v){
+
+ if(v.begin <= t && v.end >= t){
+ currentAnnotationsDisplay.push(v.id);
+ if(!$('#item-current-annotation-'+v.id).length){
+ var itemAnnotation =
+ $('<li>')
+ .attr('id', 'item-current-annotation-'+v.id)
+ .attr('data-id', v.id)
+ .append(
+ $('<a>')
+ .css('backgroundColor', v.color)
+ .attr('data-id', v.id)
+ .attr('href', '#')
+ .append(
+ $('<i>').addClass('icon-'+getIcon(v.type))
+ )
+ );
+ $('.list-current-annotations').append(itemAnnotation)
+ }
+ }
+ });
+ $.each($('.list-current-annotations li'), function(k, v){
+ var idAnnotation = $(this).attr('data-id'),
+ annotationDisplayView = $('.annotation-display-view');
+ if($.inArray(idAnnotation, currentAnnotationsDisplay)<0){//il ne doit plus être affiché
+ $('#item-current-annotation-'+idAnnotation).remove();
+ if(annotationDisplayView.attr('data-id') == idAnnotation && annotationDisplayView.is(":visible")){
+ annotationDisplayView.hide();
+ }
+ }
+ });
+
+
});//timeupdate
});//myProject.onLoad
+//display annotation view
+$('.list-current-annotations').on('click', 'a', function(e){
+ e.preventDefault();
+ var annotationDisplayView = $('.annotation-display-view'),
+ idAnnotation = $(this).attr('data-id');
+ var annotation = _.find(annotations, function(c){ return c.id == idAnnotation; });
-//modal
+ if(annotationDisplayView.attr('data-id') == idAnnotation && annotationDisplayView.is(":visible")){
+ annotationDisplayView.hide();
+ }else{
+ annotationDisplayView
+ .attr('data-id', idAnnotation)
+ .css('backgroundColor', annotation.color)
+ .text(annotation.type)
+ .show();
+ }
+});
+
+//########### modal
+
$(document).on('click', 'a.open-modal', function(e){
var diaporama = $(this).attr('data-diaporama'),
idAnnotation = $(this).attr('data-id');
@@ -83,8 +139,9 @@
e.preventDefault();
$('.popup').modal('hide');
$.get('template.html', function(templates){
- var videoWrap = $('#'+global.idAnnotation).find('.annotation-video-content'),
+ var videoWrap = $('#tab-'+global.idAnnotation).find('.annotation-video-content'),
tplVideo = $(templates).filter('#tpl-video-row').html();
+ console.log(videoWrap)
videoWrap.empty().append(tplVideo);
});
@@ -97,24 +154,14 @@
$('.popup').modal('hide');
});
- $(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');
-
- 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){
});
-//title-editor
+//--title-editor
$('.project-title-editor ._popover').bind('click',function(e){e.preventDefault()});
$('.project-title-editor ._popover').popover({
html : true,
@@ -145,7 +192,7 @@
$('.project-title').html($(this).val());
});
-//--chapter
+//######################## chapter
//edit
$('.list-chapter-wrap').on('click', '.btn-edit-chapter', function(e){
@@ -170,17 +217,7 @@
}
});
- function onTagItChange(e, ui) {
- var idChapter = $(this).parents('form').attr('data-chapter-id'),
- value = $('input[name=keywords]').val();
- currentChapter.keywords = value;
- $('#row-list-chapter-'+idChapter).find('.list-chapter-tags').text(value);
- }
- var tagitParam = {
- afterTagRemoved : onTagItChange,
- afterTagAdded : onTagItChange
- }
function loadFormChapter(idChapter){
currentChapter = _.find(chapters, function(c){ return c.id == idChapter; });
@@ -251,7 +288,7 @@
begin : myMedia.currentTime,
end : organizeNewChapter(myMedia.currentTime),
description : 'description',
- keywords : 'tag1,tag2'
+ keywords : ['tag1','tag2']
};
newChapter(dataChapter);
@@ -316,14 +353,81 @@
begin : 0,
end : myMedia.duration,
description : 'description',
- keywords : 'tag1,tag2'
+ 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);
+ annotation.setEnd(dataAnnotation.end);
+ annotation.title = dataAnnotation.title;
+ annotation.description = dataAnnotation.description;
+ annotation.type = dataAnnotation.type;
+ annotation.color = global.colors[(global.colorsIndex<global.colors.length) ? global.colorsIndex++ : (global.colorsIndex=0)];
+ annotation.keywords = dataAnnotation.keywords;
+ annotation.content = getContentAnnotationByType(dataAnnotation.type);
+
+ annotations.push(annotation);
+
+ return annotation;
+ }
+
+ function renderAnnotation(){
+ var timeline = $('.timeline-annotations'),
+ wTimeline = timeline.width(),
+ annotationList = $('#list-annotations-rows');
+
+ annotations = _.sortBy(annotations, function(c){
+ return c.begin;
+ });
+
+ timeline.empty();
+ annotationList.empty();
+
+ $.each(annotations, function(k, v){
+
+ //timeline
+ var width = Math.floor(v.getDuration() * wTimeline / myMedia.duration),
+ left = Math.floor(v.begin * wTimeline / myMedia.duration),
+ segment = $('<div>').css({
+ left : left,
+ width : width,
+ backgroundColor : v.color
+ }).addClass('annotation').attr('id', 'annotation-timeline-'+v.id);
+
+ timeline.append(segment);
+
+ //liste
+ $.get('template.html', function(templates){
+ var tplAnnotationRow = $(templates).filter('#tpl-list-annotation-row').html();
+ tplAnnotationRow = Mustache.render(tplAnnotationRow, v);
+ annotationList.append(tplAnnotationRow);
+
+ });
+
+ });
+ }
//edit annotation
$('#list-annotations').on('click', 'a.btn-edit-annotation', function(e){
@@ -331,17 +435,38 @@
var idAnnotation = $(this).attr('data-id');
//si il est déjà ouvert
- if($('#annotation-'+idAnnotation).length){
- $('a[href=#annotation-'+idAnnotation+']').tab('show');
+ if($('#tab-annotation-'+idAnnotation).length){
+ $('a[href=#tab-annotation-'+idAnnotation+']').tab('show');
}else{
- var typeAnnotation = $(this).attr('data-type'),
- data = {id:idAnnotation};
- openNewTab(typeAnnotation, data);
+ var data = _.find(annotations, function(c){ return c.id == idAnnotation; });
+ openTab(data.type, data);
}
});
+ $('.tab-content').on('keyup', 'input[name=title], textarea', function(e){
+ var name = $(this).attr('name'),
+ value = $(this).val();
+ currentAnnotation[name] = value;
+ if(name == 'title'){
+ var idAnnotation = $(this).parents('form').attr('data-id');
+ $('#onglet-title-'+idAnnotation).text(value);
+ }
+ });
+
+ //delete annotation
+ $(document).on('click','.btn-delete-annotation', function(e){
+ e.preventDefault();
+
+ var idAnnotation = $(this).attr('data-id');
+ annotations = _(annotations).reject(function(c) { return c.id == idAnnotation; });
+ closeTab(idAnnotation);
+ if(!$(this).hasAttr('data-no-render'))//si on ferme à partir de la tab renderAnnotation sera appelé 2 fois
+ renderAnnotation();
+
+ });
+
//tab
- $('#annotation-tab').on('click', 'a', function(e){
+ $('#onglet-annotations').on('click', 'a', function(e){
e.preventDefault();
$(this).tab('show');
});
@@ -350,31 +475,44 @@
$(document).on('click', '.open-tab', function(e){
e.preventDefault();
var type = $(this).attr('data-type');
- var data = $(this).attr('data-data'); // à définir
- openNewTab(type);
+ openTab(type);
});
- function openNewTab(type, data){
+ function openTab(type, data){
+
+ var dataView;
+ if(_.isUndefined(data)){//nouveau
+ var currentTimePlusUnMin = 60 * 1000 + myMedia.currentTime,
+ endAnnotation = (currentTimePlusUnMin<myMedia.duration) ? currentTimePlusUnMin : myMedia.duration;
+ var dataAnnotation = {
+ title : 'Nouveau',
+ begin : myMedia.currentTime,
+ end : endAnnotation,
+ description : 'description',
+ type : type,
+ keywords : []
+ };
+ dataView = newAnnotation(dataAnnotation);
+ renderAnnotation();
+ }else{//édition
+ dataView = data;
+ }
- var uniqId = 'id' + (new Date()).getTime(),
- idAnnotation = (data !== undefined) ? data.id : uniqId,
- tabContent = $('<div class="tab-pane" id="annotation-'+idAnnotation+'"></div>'),
+ var idAnnotation = dataView.id,
+ 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 view = {
- titre : "un titre mustache",
- id : uniqId
- };
var tplHead = $(templates).filter('#tpl-head').html();
- var output = Mustache.render(tplHead, view);
+ var output = Mustache.render(tplHead, dataView);
$(tabContent).append(output);
- $(tabContent).find(".slider-duration").slider(configSlider);
-
+ $(tabContent).find(".slider-duration").slider(configSlider(dataView));
+ $(tabContent).find('.tag-it').tagit(tagitParam);
//type
- var viewType = {id : uniqId};
+ var viewType = {id : idAnnotation};
var tpl = $(templates).filter('#tpl-'+type).html();
tpl = Mustache.render(tpl, viewType);
$(tabContent).append(tpl);
@@ -382,15 +520,16 @@
//particularité selon type
switch(type){
- case 'video': iconTab = 'film';
+ case 'sound':
+ break;
+ case 'video':
break;
case 'text':
- iconTab = 'align-left';
- $(tabContent).find('.wysiwyg').cleditor(wysiwygConfig);
+ var cledit = $(tabContent).find('.wysiwyg').cleditor(wysiwygConfig)[0];
break;
- case 'html': iconTab = 'link';
+ case 'links':
break;
- case 'diaporama': iconTab = 'picture';
+ case 'slideshow':
$(tabContent).find('.number-spin').spin(spinParam);
$(tabContent).find('.ui-sortable').sortable({
stop : function(event, ui){
@@ -399,20 +538,65 @@
});
break;
}
- $(".nav-tabs li:last-child").after('<li><a href="#annotation-'+idAnnotation+'"><i class="icon-'+iconTab+'"></i> New <span class="close-tab">×</span></a></li>');
- $('a[href=#annotation-'+idAnnotation+']').tab('show');
+
+ dataView.iconTab = getIcon(type);
+ var tplOnglet = $(templates).filter('#tpl-onglet').html();
+ var onglet = Mustache.render(tplOnglet, dataView);
+
+ $(".nav-tabs li:last-child").after(onglet);
+ $('a[href=#tab-annotation-'+idAnnotation+']').tab('show');
});
- }//openNewTab()
+ }//openTab()
+
+ function getIcon(type){
+ var icon;
+ switch(type){
+ case 'sound': icon = 'volume-up';
+ break;
+ case 'video': icon = 'film';
+ break;
+ case 'text':
+ icon = 'align-left';
+ break;
+ case 'html': icon = 'code';
+ break;
+ case 'links': icon = 'link';
+ break;
+ case 'slideshow': icon = 'picture';
+ break;
+ }
+ return icon;
+ }
+
+ //définit currentAnnotation quand la tab s'ouvre
+ $('#onglet-annotations').on('show', 'a[data-toggle="annotation"]', function (e) {
+ var idAnnotation = $(e.target).attr('data-id');
+ currentAnnotation = _.find(annotations, function(c){ return c.id == idAnnotation; });
+ });
+
+ //rafraichit annotations au retour sur la liste
+ $('#onglet-annotations').on('show', 'a[data-toggle="list-annotations"]', function (e) {
+ renderAnnotation();
+ });
//fermer tab
- $('#annotation-tab').on('click', 'span.close-tab', function(e){
+ $('#onglet-annotations').on('click', 'span.close-tab', function(e){
e.preventDefault();e.stopPropagation();
- var idTab = $(this).parents('a').attr('href');
- $(this).closest('li').remove();
- $('.tab-content '+idTab).remove();
- $('#tab-list-annotation').tab('show');
+ var idAnnotation = $(this).parents('a').attr('data-id');
+ closeTab(idAnnotation);
});
+ $('.tab-content').on('click', '.btn-save-annotation', function(e){
+ e.preventDefault();
+ var idAnnotation = $(this).attr('data-id');
+ closeTab(idAnnotation);
+ });
+
+ function closeTab(idAnnotation){
+ $('#onglet-'+idAnnotation).remove();
+ $('.tab-content #tab-annotation-'+idAnnotation).remove();
+ $('#tab-list-annotation').tab('show');
+ }
//diaporama
function addImageToDiaporama(diaporama){
@@ -448,11 +632,7 @@
-//sauvegarder annotation
-$('.tab-content').on('click', '.btn-save-annotation', function(e){
- e.preventDefault();
- var idAnnotation = $(this).attr('data-id');
-});
+
//annotation html
$('.tab-content').on('click', '.btn-html-apercu', function(e){
@@ -464,17 +644,44 @@
apercuWrap.empty().html(htmlTextarea.val());
});
+//annotation texte
+$(document).on('keyup', ".cleditorMain iframe", function(){
+
+ var v = $(this).text(); // or .html() if desired
+ $('#x').html(v);
+});
//annotation > diaporama (spin)
-//config
+//################ config
+
+//tagit
+function onTagItChange(e, ui) {
+ var tagitType = $(this).attr('data-type'),
+ value = $(this).val();
+
+ if(tagitType == 'chapter'){
+ var idChapter = $(this).parents('form').attr('data-chapter-id');
+ currentChapter.keywords = value.split(',');
+ $('#row-list-chapter-'+idChapter).find('.list-chapter-tags').text(value);
+ }else{
+ currentAnnotation.keywords = value.split(',');
+ }
+
+}
+
+var tagitParam = {
+ afterTagRemoved : onTagItChange,
+ afterTagAdded : onTagItChange
+}
+
//CLEditor annotation > text (wysiwyg)
//http://premiumsoftware.net/cleditor/docs/GettingStarted.html#optionalParameters
var wysiwygConfig = {
width: 456,
height: 250,
controls: "bold italic underline strikethrough | font size " +
- "style | color highlight removeformat | bullets numbering | outdent ",
+ "style | color highlight removeformat | bullets numbering | source",
fonts: "Arial,Arial Black,Comic Sans MS,Courier New,Narrow,Garamond," +
"Georgia,Impact,Sans Serif,Serif,Tahoma,Trebuchet MS,Verdana",
sizes: "1,2,3,4,5,6,7",
@@ -482,81 +689,97 @@
["Header 3", "<h3>"], ["Header 4","<h4>"], ["Header 5","<h5>"],
["Header 6","<h6>"]],
docType: '<!DOCTYPE HTML>',
- bodyStyle: "margin:0; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;"
-};
+ bodyStyle: "margin:0; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;",
+ updateTextArea : function(text){
-//slider
-var configSlider = {
- range: true,
- values: [ 0, 1*60*1000 ],
- min: 0,
- max: 10*60*1000,
- slide: function( event, ui ) {
-
- var debutString = millisecondsToString(ui.values[0]);
- var endString = millisecondsToString(ui.values[1]);
- var durationString = millisecondsToString(ui.values[1] - ui.values[0]);
-
- var idSlider = $(this).attr('data-id');
-
- $( '#'+ idSlider +'-begin' ).html(debutString);
- $( '#'+ idSlider +'-duration' ).html(durationString);
- $( '#'+ idSlider +'-end' ).html(endString);
-
+ return text;
+ },
+ updateFrame: function(text){
+
+ return text;
}
};
-//milliseconds To 12h12m12s
-function millisecondsToString(milliseconds) {
- var oneHour = 3600000;
- var oneMinute = 60000;
- var oneSecond = 1000;
- var seconds = 0;
- var minutes = 0;
- var hours = 0;
- var result;
+//slider
+function configSlider(data){
- if (milliseconds >= oneHour) {
- hours = Math.floor(milliseconds / oneHour);
- }
-
- milliseconds = hours > 0 ? (milliseconds - hours * oneHour) : milliseconds;
-
- if (milliseconds >= oneMinute) {
- minutes = Math.floor(milliseconds / oneMinute);
- }
-
- milliseconds = minutes > 0 ? (milliseconds - minutes * oneMinute) : milliseconds;
+ return {
+ range: true,
+ values: [ data.begin.milliseconds, data.end.milliseconds ],
+ min: 0,
+ max: myMedia.duration.milliseconds,
+ slide: function( event, ui ) {
+
+ data.setBegin(ui.values[0]);
+ data.setEnd(ui.values[1]);
- if (milliseconds >= oneSecond) {
- seconds = Math.floor(milliseconds / oneSecond);
- }
-
- milliseconds = seconds > 0 ? (milliseconds - seconds * oneSecond) : milliseconds;
-
- if (hours > 0) {
- result = (hours > 9 ? hours : "0" + hours) + "h";
- } else {
- result = "";
- }
+ var idSlider = $(this).attr('data-id'),
+ wTimeline = $('.timeline-annotations').width(),
+ annotationTimeline = $('#annotation-timeline-'+ data.id),
+ width = Math.floor(data.getDuration() * wTimeline / myMedia.duration),
+ left = Math.floor(data.begin * wTimeline / myMedia.duration);
- if (minutes > 0) {
- result += (minutes > 9 ? minutes : "0" + minutes) + "m";
- } else {
- result += "00m";
- }
+ $( '#'+ idSlider +'-begin' ).html(data.begin.toString());
+ $( '#'+ idSlider +'-duration' ).html(data.getDuration().toString());
+ $( '#'+ idSlider +'-end' ).html(data.end.toString());
- if (seconds > 0) {
- result += (seconds > 9 ? seconds : "0" + seconds) + "s";
- } else {
- result += "00s";
- }
+ annotationTimeline.css({
+ left : left,
+ width :width
+ });
- return result;
+ }
+ };
+
}
+function getContentAnnotationByType(type){
+ var content;
+ switch(type){
+ case 'sound':
+ content = {
+ mimetype : "application/x-ldt-sound",
+ url : "",
+ embedcode : ""
+ };
+ break;
+ case 'video':
+ content = {
+ mimetype : "application/x-ldt-video",
+ url : "",
+ embedcode : ""
+ };
+ break;
+ case 'text':
+ content = {
+ mimetype : "application/x-ldt-text",
+ markup : "html",
+ text : ""
+ };
+ break;
+ case 'links':
+ content = {
+ mimetype : "application/x-ldt-links",
+ markup : "html",
+ links : []
+ };
+ break;
+ case 'slideshow':
+ content = {
+ mimetype : "application/x-ldt-slideshow",
+ duration : 1,
+ autostart : false,
+ images : []
+ };
+ break;
+ }
+ return content;
+}//getContentAnnotationByType
+
+
//test
-$(".wysiwyg").cleditor(wysiwygConfig);
+a = $(".wysiwyg").cleditor(wysiwygConfig);
+
$('.number-spin').spin(spinParam);
@@ -569,8 +792,6 @@
$('.slider-duration').slider(configSlider);
-$('#annotation-tab a:last-child').tab('show');
-
$(".tag-it").tagit();
});//ready
\ No newline at end of file