--- a/integration/js/edition.js Wed May 22 17:10:38 2013 +0200
+++ b/integration/js/edition.js Thu May 23 18:11:55 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,8 +46,8 @@
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{
@@ -57,7 +58,7 @@
});//myProject.onLoad
-//modal
+//--modal
$(document).on('click', 'a.open-modal', function(e){
var diaporama = $(this).attr('data-diaporama'),
idAnnotation = $(this).attr('data-id');
@@ -103,7 +104,7 @@
var type = $(this).attr('data-type');
var idAnnotation = $(this).attr('data-id');
- $('a[href=#annotation-'+idAnnotation+']').closest('li').remove();
+ $('a[href=#tab-annotation-'+idAnnotation+']').closest('li').remove();
$('.tab-content #annotation'+idAnnotation).remove();
$('#tab-list-annotation').tab('show');
@@ -114,7 +115,7 @@
});
-//title-editor
+//--title-editor
$('.project-title-editor ._popover').bind('click',function(e){e.preventDefault()});
$('.project-title-editor ._popover').popover({
html : true,
@@ -145,7 +146,7 @@
$('.project-title').html($(this).val());
});
-//--chapter
+//######################## chapter
//edit
$('.list-chapter-wrap').on('click', '.btn-edit-chapter', function(e){
@@ -170,17 +171,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 +242,7 @@
begin : myMedia.currentTime,
end : organizeNewChapter(myMedia.currentTime),
description : 'description',
- keywords : 'tag1,tag2'
+ keywords : ['tag1','tag2']
};
newChapter(dataChapter);
@@ -316,14 +307,78 @@
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);
+ }
+
+ 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;
+
+ annotations.push(annotation);
+ renderAnnotation();
+ }
+
+ 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 +386,26 @@
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);
+ }
+ });
+
//tab
- $('#annotation-tab').on('click', 'a', function(e){
+ $('#onglet-annotations').on('click', 'a', function(e){
e.preventDefault();
$(this).tab('show');
});
@@ -350,31 +414,34 @@
$(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
+ dataView.id = 'id' + (new Date()).getTime();
+ dataView.title = 'New';
+ }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);
@@ -399,20 +466,45 @@
});
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 = iconTab;
+ 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()
+
+ //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 +540,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){
@@ -467,7 +555,28 @@
//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 = {
@@ -486,26 +595,37 @@
};
//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]);
+function configSlider(data){
+
+ 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]);
- var idSlider = $(this).attr('data-id');
-
- $( '#'+ idSlider +'-begin' ).html(debutString);
- $( '#'+ idSlider +'-duration' ).html(durationString);
- $( '#'+ idSlider +'-end' ).html(endString);
-
- }
-};
+ 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);
+
+ $( '#'+ idSlider +'-begin' ).html(data.begin.toString());
+ $( '#'+ idSlider +'-duration' ).html(data.getDuration().toString());
+ $( '#'+ idSlider +'-end' ).html(data.end.toString());
+ annotationTimeline.css({
+ left : left,
+ width :width
+ });
+
+ }
+ };
+
+}
//milliseconds To 12h12m12s
function millisecondsToString(milliseconds) {
var oneHour = 3600000;
@@ -569,7 +689,9 @@
$('.slider-duration').slider(configSlider);
-$('#annotation-tab a:last-child').tab('show');
+
+
+
$(".tag-it").tagit();