--- a/integration/js/edition.js Thu Jun 06 12:43:10 2013 +0200
+++ b/integration/js/edition.js Thu Jun 06 15:00:21 2013 +0200
@@ -1,8 +1,6 @@
var myMedia = undefined,
currentChapter = undefined,
- currentAnnotation = undefined,
- chapters = [],
- annotations = [];
+ currentAnnotation = undefined;
$(function(){
@@ -38,35 +36,40 @@
myMedia = myProject.getCurrentMedia();
+ var anntypes = myProject.getAnnotationTypes().searchByTitle("chapitrage");
+ if (!anntypes.length) {
+ chapterAnnType = new IriSP.AnnotationType(false, myProject);
+ chapterAnnType.title = "chapitrage";
+ } else {
+ chapterAnnType = anntypes[0];
+ }
+
//load Chapitre
-var _chapters = myProject.getAnnotationsByTypeTitle("chapitrage");
-if(_chapters.length){
- $.each(_chapters, function(k, v){
+
+ chapters = chapterAnnType.getAnnotations();
+ $.each(chapters, function(k, v){
v.color = getRandomColor();
- chapters.push(v);
- if((k+1) == _chapters.length){
- renderChapter();
- }
});
-}
+ renderChapter();
//load Annotations
-var _annotations = myProject.getAnnotationsByTypeTitle("annotations");
-if(_annotations.length){
- $.each(_annotations, function(k, v){
+ var anntypes = myProject.getAnnotationTypes().searchByTitle("annotations");
+ if (!anntypes.length) {
+ annotationsAnnType = new IriSP.AnnotationType(false, myProject);
+ annotationsAnnType.title = "annotations";
+ } else {
+ annotationsAnnType = anntypes[0];
+ }
- v.color = getRandomColor();
+ annotations = annotationsAnnType.getAnnotations();
+ $.each(annotations, function(k, v){
var type = v.content.mimetype.split('-');
type = type[type.length-1]
v.type = type;
+ v.color = getRandomColor();
+ });
+ renderAnnotation();
- annotations.push(v);
- if((k+1) == _annotations.length){
- renderAnnotation();
- }
-
- });
-}
IriSP.htmlPlayer(
myMedia,
@@ -102,6 +105,7 @@
}else{
btnCutChapter.css("left",pos);
}
+ $('.info-time').text(t)
//annotations view
refreshAnnotationDisplay(t);
@@ -151,7 +155,7 @@
function showCurrentAnnotationInTimeline(idAnnotation){
$('.timeline-annotations .annotation').empty();
- $('#annotation-timeline-'+idAnnotation).text('en cours');
+ $('#annotation-timeline-'+idAnnotation).html('<i class="icon-pencil"></i> '+textCurrentAnnotationEditT);
}
//display annotation view
$('.list-current-annotations').on('click', 'a', function(e){
@@ -166,7 +170,7 @@
annotationDisplayView
.attr('data-id', idAnnotation)
.css('backgroundColor', annotation.color)
- .text(annotation.type)
+ .text(annotation.type+' : '+annotation.title)
.show();
}
});
@@ -177,13 +181,6 @@
});
-//edition image
- $('.popup').on('change', '#media-type-select', function(e){
- var typeImage = $(this).val();
- $('.input-image-url, .input-image-upload').hide();
- $('.input-image-'+typeImage).show();
- });
-
//select on bibliotheque
//confirmation suppression
@@ -206,6 +203,7 @@
//--title-editor
$(document).on('click', '.project-title-editor i, .project-title', function () {
+ disabledPreview();
var html = $('.project-title').html();
var input = $('<input type="text" />');
input.val(html);
@@ -238,6 +236,8 @@
});
$('.chapter-widget-info').on('keyup', 'input[name=title], textarea', function(e){
+ disabledPreview();
+
var name = $(this).attr('name'),
value = $(this).val();
currentChapter[name] = value;
@@ -252,6 +252,7 @@
function loadFormChapter(idChapter){
+ disabledPreview();
currentChapter = _.find(chapters, function(c){ return c.id == idChapter; });
@@ -283,32 +284,12 @@
btnDeleteModal = $("#modal-confirm #btn-delete-modal");
btnDeleteModal.attr('data-type-delete', 'chapter');
btnDeleteModal.attr('data-id', idChapter);
- // $("#modal-confirm #btn-delete-modal").attr('onclick', 'deleteChapter("'+idChapter+'")')
-/*
- var idChapter = $(this).attr('data-chapter-id'),
- chapter = _.find(chapters, function(c){ return c.id == idChapter; }),
- indexChapter = _.indexOf(chapters, chapter),
- chapterModify;
- if(indexChapter == 0){
- chapterModify = chapters[1];
- chapterModify.setBegin(0);
- }else{
- chapterModify = chapters[indexChapter-1];
- //var newEnd = new IriSP.Model.Time(chapter.end)
- chapterModify.setEnd(chapter.end);
- }
- chapters = _(chapters).reject(function(c) { return c.id == idChapter; });
- renderChapter();
- //si le formulaire est visible
- if($('#form-chapter-edit-'+idChapter).length){
- $('#form-chapter-edit-'+idChapter).remove();
- }
-*/
});
function deleteChapter(idChapter){
- $("#modal-confirm").modal('hide')
+ disabledPreview();
+ $("#modal-confirm").modal('hide');
var chapter = _.find(chapters, function(c){ return c.id == idChapter; }),
indexChapter = _.indexOf(chapters, chapter),
chapterModify;
@@ -337,6 +318,7 @@
chapter.setMedia(myMedia.id);
chapter.setBegin(dataChapter.begin);
chapter.setEnd(dataChapter.end);
+ chapter.setAnnotationType(chapterAnnType.id);
chapter.title = dataChapter.title;
chapter.description = dataChapter.description;
chapter.keywords = dataChapter.keywords;
@@ -378,6 +360,8 @@
}
function renderChapter(){
+ disabledPreview();
+
var chapterSegmentWrap = $('.chapter-segments'),
wChapterSegmentWrap = chapterSegmentWrap.width(),
chapterList = $('.list-chapter-rows-wrap');
@@ -417,6 +401,7 @@
function newAnnotation(dataAnnotation){
var annotation = new IriSP.Model.Annotation(false, myProject);
+ annotation.setAnnotationType(annotationsAnnType.id);
annotation.setMedia(myMedia.id);
annotation.setBegin(dataAnnotation.begin);
annotation.setEnd(dataAnnotation.end);
@@ -433,6 +418,8 @@
}
function renderAnnotation(){
+ disabledPreview();
+
var timeline = $('.timeline-annotations'),
wTimeline = timeline.width(),
annotationList = $('#list-annotations-rows');
@@ -499,7 +486,7 @@
//edit annotation
$('#list-annotations').on('click', 'a.btn-edit-annotation', function(e){
e.preventDefault();
-
+ disabledPreview();
var idAnnotation = $(this).attr('data-id');
//si il est déjà ouvert
if($('#tab-annotation-'+idAnnotation).length){
@@ -511,6 +498,7 @@
});
$('.tab-content').on('keyup', '.form-info-general-annotation input[name=title], .form-info-general-annotation textarea', function(e){
+ disabledPreview();
var name = $(this).attr('name'),
value = $(this).val();
currentAnnotation[name] = value;
@@ -523,13 +511,7 @@
//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();
- */
+
var idAnnotation = $(this).attr('data-id'),
btnDeleteModal = $("#modal-confirm #btn-delete-modal");
btnDeleteModal.attr('data-type-delete', 'annotation');
@@ -537,6 +519,7 @@
});
function deleteAnnotation(idAnnotation){
+ disabledPreview();
$("#modal-confirm").modal('hide');
annotations = _(annotations).reject(function(c) { return c.id == idAnnotation; });
closeTab(idAnnotation);
@@ -557,7 +540,7 @@
});
function openTab(type, data){
-
+
var dataView;
if(_.isUndefined(data)){//nouveau
var currentTimePlusUnMin = 60 * 1000 + myMedia.currentTime,
@@ -605,16 +588,10 @@
case 'audio':
break;
case 'video':
-
if(viewType.content.url != ""){
-
var videoWrap = $(tabContent).find('.annotation-video-content');
renderVideoInfo(videoWrap, viewType.content);
-
}
-
-
-
break;
case 'text':
var cledit = $(tabContent).find('.wysiwyg').cleditor(wysiwygConfig)[0];
@@ -632,7 +609,7 @@
break;
case 'slideshow':
-
+ $(tabContent).find('.number-spin').val(dataView.content.slideduration/1000);
$(tabContent).find('.number-spin').spin(spinParam);
$(tabContent).find('.ui-sortable').sortable({
start: function (event, ui) {
@@ -780,22 +757,12 @@
};
//edit title / description
- $('.tab-content').on('click', '.title-slideshow-row', function(){
+ $('.tab-content').on('click', '.title-slideshow-row, .description-slideshow-row, .video-title-edit, .video-description-edit', function(){
if($(this).find('input').length) return;
- var html = $(this).find('span').html();
- var input = $('<input type="text" />').addClass('input-mini').attr('name', 'title');
- input.val(html);
- $(this).find('span').replaceWith(input);
- input.focus().keypress(function(e){
- code = (e.keyCode ? e.keyCode : e.which);
- if (code == 13) $(this).blur();
- });
- });
-
- $('.tab-content').on('click', '.description-slideshow-row', function(){
- if($(this).find('textarea').length) return;
- var html = $(this).find('span').html();
- var input = $('<textarea>').attr('name', 'description');
+ var html = $(this).find('span').html(),
+ inputType = $(this).attr('data-input'),
+ name = $(this).attr('data-name'),
+ input = $('<'+inputType+'>').attr('name', name);
input.val(html);
$(this).find('span').replaceWith(input);
input.focus().keypress(function(e){
@@ -810,8 +777,15 @@
span = $('<span>').html(newValue),
indexRow = $(this).parents('.row-image-diaporama').index();
$(this).replaceWith(span);
+ currentAnnotation.content.images[indexRow][name] = newValue;
+ });
- currentAnnotation.content.images[indexRow][name] = newValue;
+ $(document).on('blur', '.video-title-edit input, .video-description-edit textarea', function(){
+ var newValue = $(this).val(),
+ name = $(this).attr('name'),
+ span = $('<span>').html(newValue);
+ $(this).replaceWith(span);
+ currentAnnotation.content[name] = newValue;
});
//bouton up / down
@@ -909,10 +883,42 @@
$('.tab-content').on('change keyup', '.config-diaporama input[name=duration]', function(){
var value = $(this).val();
if(!isNaN(value)){
- currentAnnotation.content.duration = value;
+ currentAnnotation.content.slideduration = value * 1000;
}
});
+//save project
+$('.btn-save-project').bind('click', function(e){
+ $('.btn-apercu-projet').removeClass('disabled');
+
+ console.log(myProject.serialize().length);
+/*
+ $.ajax({
+ type: "POST",
+ url: urlSaveProject,
+ data: myProject.serialize(),
+ contentType: "application/cinelab",
+ headers: {
+ //"X-CSRFToken": options.csrf_token
+ },
+ success: function(data, status, request){
+ console.log('data : ', data);
+ console.log('status : ', status);
+ console.log('request : ', request);
+
+ },
+ error: function(jqXHR, textStatus, errorThrown){
+ alert(gettext("Server error\nYour hashcut couldn't be published"));
+ }
+ });
+*/
+
+});
+
+function disabledPreview(){
+ if(!$('.btn-apercu-projet').hasClass('disabled'))$('.btn-apercu-projet').addClass('disabled');
+}
+
//################ config
//tagit
function onTagItChange(e, ui) {
@@ -937,7 +943,7 @@
//CLEditor annotation > text (wysiwyg)
//http://premiumsoftware.net/cleditor/docs/GettingStarted.html#optionalParameters
var wysiwygConfig = {
- width: 456,
+ width: 450,
height: 250,
controls: "bold italic underline strikethrough | font size " +
"style | color highlight removeformat | bullets numbering | source",
@@ -1032,7 +1038,7 @@
case 'slideshow':
content = {
mimetype : "application/x-ldt-slideshow",
- duration : 1,
+ slideduration : 1000,
autostart : false,
images : []
};
@@ -1070,7 +1076,6 @@
return this;
};
-
function getVideoPlayer(src, videoWrap){
var youtubeTemplate = _.template(
--- a/integration/modal-bibliotheque-image.html Thu Jun 06 12:43:10 2013 +0200
+++ b/integration/modal-bibliotheque-image.html Thu Jun 06 15:00:21 2013 +0200
@@ -11,78 +11,131 @@
<a href="#"
data-url="http://upload.wikimedia.org/wikipedia/commons/8/81/Waves_lajolla.jpg"
data-title="splash!!!"
- data-description="lorem"
+ data-description="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam"
><img src="http://upload.wikimedia.org/wikipedia/commons/8/81/Waves_lajolla.jpg" alt=""></a>
<h5>
- <a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit. </a>
+ <a href="#"
+ data-url="http://upload.wikimedia.org/wikipedia/commons/8/81/Waves_lajolla.jpg"
+ data-title="splash!!!"
+ data-description="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam"
+ >splash!!!</a>
</h5>
</div>
<div class="span2">
- <a href="#"><img src="img/140x140.gif" alt=""></a>
+ <a href="#"
+ data-url="http://upload.wikimedia.org/wikipedia/commons/8/81/Waves_lajolla.jpg"
+ data-title="splash!!!"
+ data-description="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam"
+ ><img src="http://upload.wikimedia.org/wikipedia/commons/8/81/Waves_lajolla.jpg" alt=""></a>
<h5>
- <a href="#">Titre du média</a>
+ <a href="#"
+ data-url="http://upload.wikimedia.org/wikipedia/commons/8/81/Waves_lajolla.jpg"
+ data-title="splash!!!"
+ data-description="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam"
+ >splash!!!</a>
</h5>
</div>
<div class="span2">
- <a href="#"><img src="img/140x140.gif" alt=""></a>
+ <a href="#"
+ data-url="http://upload.wikimedia.org/wikipedia/commons/8/81/Waves_lajolla.jpg"
+ data-title="splash!!!"
+ data-description="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam"
+ ><img src="http://upload.wikimedia.org/wikipedia/commons/8/81/Waves_lajolla.jpg" alt=""></a>
<h5>
- <a href="#">Titre du média</a>
+ <a href="#"
+ data-url="http://upload.wikimedia.org/wikipedia/commons/8/81/Waves_lajolla.jpg"
+ data-title="splash!!!"
+ data-description="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam"
+ >splash!!!</a>
</h5>
</div>
<div class="span2">
- <a href="#"><img src="img/140x140.gif" alt=""></a>
+ <a href="#"
+ data-url="http://upload.wikimedia.org/wikipedia/commons/8/81/Waves_lajolla.jpg"
+ data-title="splash!!!"
+ data-description="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam"
+ ><img src="http://upload.wikimedia.org/wikipedia/commons/8/81/Waves_lajolla.jpg" alt=""></a>
<h5>
- <a href="#">Titre du média</a>
- </h5>
- </div>
- <div class="span2">
- <a href="#"><img src="img/140x140.gif" alt=""></a>
- <h5>
- <a href="#">Titre du Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam amet voluptatum repellendus soluta debitis at aliquid vitae facilis sint quisquam quos aut numquam culpa iste voluptatibus quidem esse. Molestiae pariatur? média</a>
+ <a href="#"
+ data-url="http://upload.wikimedia.org/wikipedia/commons/8/81/Waves_lajolla.jpg"
+ data-title="splash!!!"
+ data-description="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam"
+ >splash!!!</a>
</h5>
</div>
<div class="span2">
- <a href="#"><img src="img/140x140.gif" alt=""></a>
+ <a href="#"
+ data-url="http://upload.wikimedia.org/wikipedia/commons/8/81/Waves_lajolla.jpg"
+ data-title="splash!!!"
+ data-description="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam"
+ ><img src="http://upload.wikimedia.org/wikipedia/commons/8/81/Waves_lajolla.jpg" alt=""></a>
<h5>
- <a href="#">Titre du média</a>
+ <a href="#"
+ data-url="http://upload.wikimedia.org/wikipedia/commons/8/81/Waves_lajolla.jpg"
+ data-title="splash!!!"
+ data-description="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam"
+ >splash!!!</a>
</h5>
</div>
<div class="span2">
- <a href="#"><img src="img/140x140.gif" alt=""></a>
+ <a href="#"
+ data-url="http://upload.wikimedia.org/wikipedia/commons/8/81/Waves_lajolla.jpg"
+ data-title="splash!!!"
+ data-description="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam"
+ ><img src="http://upload.wikimedia.org/wikipedia/commons/8/81/Waves_lajolla.jpg" alt=""></a>
<h5>
- <a href="#">Titre du Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo praesentium repellat iure non ullam earum quaerat? Sapiente numquam optio eius quae error voluptatem perferendis aspernatur nam temporibus? Assumenda aliquid ipsam!média</a>
- </h5>
- </div>
- <div class="span2">
- <a href="#"><img src="img/140x140.gif" alt=""></a>
- <h5>
- <a href="#">Titre du média</a>
+ <a href="#"
+ data-url="http://upload.wikimedia.org/wikipedia/commons/8/81/Waves_lajolla.jpg"
+ data-title="splash!!!"
+ data-description="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam"
+ >splash!!!</a>
</h5>
</div>
<div class="span2">
- <a href="#"><img src="img/140x140.gif" alt=""></a>
+ <a href="#"
+ data-url="http://upload.wikimedia.org/wikipedia/commons/8/81/Waves_lajolla.jpg"
+ data-title="splash!!!"
+ data-description="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam"
+ ><img src="http://upload.wikimedia.org/wikipedia/commons/8/81/Waves_lajolla.jpg" alt=""></a>
<h5>
- <a href="#">Titre du média</a>
- </h5>
- </div>
- <div class="span2">
- <a href="#"><img src="img/140x140.gif" alt=""></a>
- <h5>
- <a href="#">Titre du média</a>
+ <a href="#"
+ data-url="http://upload.wikimedia.org/wikipedia/commons/8/81/Waves_lajolla.jpg"
+ data-title="splash!!!"
+ data-description="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam"
+ >splash!!!</a>
</h5>
</div>
<div class="span2">
- <a href="#"><img src="img/140x140.gif" alt=""></a>
+ <a href="#"
+ data-url="http://upload.wikimedia.org/wikipedia/commons/8/81/Waves_lajolla.jpg"
+ data-title="splash!!!"
+ data-description="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam"
+ ><img src="http://upload.wikimedia.org/wikipedia/commons/8/81/Waves_lajolla.jpg" alt=""></a>
<h5>
- <a href="#">Titre du média</a>
+ <a href="#"
+ data-url="http://upload.wikimedia.org/wikipedia/commons/8/81/Waves_lajolla.jpg"
+ data-title="splash!!!"
+ data-description="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam"
+ >splash!!!</a>
</h5>
</div>
- <div class="span2">
- <a href="#"><img src="img/140x140.gif" alt=""></a>
- <h5>
- <a href="#">Titre du Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla recusandae iusto libero ipsam sed atque quis maxime laborum est consequuntur ut possimus aspernatur quas nobis maiores veniam officiis alias error.média</a>
- </h5>
- </div>
+
</div>
<div class="pagination">
<ul>