--- a/integration/js/edition.js Mon Jun 10 18:02:41 2013 +0200
+++ b/integration/js/edition.js Tue Jun 11 10:43:19 2013 +0200
@@ -1,30 +1,29 @@
-var myMedia = undefined,
- currentChapter = undefined,
- currentAnnotation = undefined,
- currentSlider = undefined,
- secMiniChapter = 10;
-
-
-
-
$(function(){
+ var myMedia = undefined,
+ currentChapter = undefined,
+ currentAnnotation = undefined,
+ currentSlider = undefined,
+ secMiniChapter = 10;
+
+/* Colors */
var annotationsColors = {
'video' : '#BE4477',
'text' : '#5E90CB',
'slideshow' : '#F69058',
'audio' : '#63BE6C',
'links' : '#8985BB'
- }
-
- var global = {
- colorsIndex : 0,
- colors :
- ['#FF6138', '#FFFF9D', '#BEEB9F', '#79BD8F', '#00A388',
+ },
+ colorsRangeIndex = 0,
+ colorsRange = [
+ '#FF6138', '#FFFF9D', '#BEEB9F', '#79BD8F', '#00A388',
'#1695A3', '#ACF0F2', '#F3FFE2', '#EB7F00', '#FF8000',
'#FFD933', '#CCCC52', '#8FB359', '#FFD393', '#F54F29'
- ]
- };
+ ];
+
+ function getRandomColor(){
+ return colorsRange[(colorsRangeIndex<colorsRange.length) ? colorsRangeIndex++ : (colorsRangeIndex=0)];
+ }
function getTemplate(idTpl){
return $('#templates').find(idTpl).html();
@@ -38,6 +37,7 @@
myMedia = myProject.getCurrentMedia();
+ //load Chapitre
var anntypes = myProject.getAnnotationTypes().searchByTitle("chapitrage");
if (!anntypes.length) {
chapterAnnType = new IriSP.Model.AnnotationType(false, myProject);
@@ -47,7 +47,6 @@
chapterAnnType = anntypes[0];
}
- //load Chapitre
chapters = chapterAnnType.getAnnotations();
if(!chapters.length){
var dataChapter = {
@@ -83,7 +82,7 @@
});
renderAnnotation();
-
+ //player
IriSP.htmlPlayer(
myMedia,
$(".main-video"),
@@ -105,7 +104,6 @@
);
myMedia.on("timeupdate", function(t) {
-
//curseur chapitre
var wContainer = $('.chapitre-cut-wrap').width() - 1,
pos = wContainer * t / myMedia.duration,
@@ -118,17 +116,17 @@
}else{
btnCutChapter.css("left",pos);
}
- $('.info-time').text(t)
- //annotations view
+ $('.info-time').text(t);
+
+ //display annotations
refreshAnnotationDisplay(t);
-
});//timeupdate
});//myProject.onLoad
/* Display annotation in timeline */
- //survol
+ //hover
$(document).on('mouseover', '.timeline-annotations .annotation, #list-annotations-rows tr, .item-display-annotation' , function(){
if(!$(this).hasClass('shadow')) {
var idAnnotation = $(this).attr('data-id');
@@ -214,8 +212,6 @@
}
});
-
-
/* Title project */
$(document).on('click', '.project-title-editor i, .project-title', function () {
@@ -247,11 +243,6 @@
loadFormChapter(idChapter);
});
- $('.chapter-segments').on('click', 'li', function(){
- var idChapter = $(this).attr('id');
- loadFormChapter(idChapter);
- });
-
$('.chapter-widget-info').on('keyup', 'input[name=title], textarea', function(e){
var name = $(this).attr('name'),
value = $(this).val();
@@ -265,6 +256,12 @@
disabledPreview();
});
+ //form chapter
+ $('.chapter-segments').on('click', 'li', function(){
+ var idChapter = $(this).attr('id');
+ loadFormChapter(idChapter);
+ });
+
function loadFormChapter(idChapter){
currentChapter = _.find(chapters, function(c){ return c.id == idChapter; });
var chapterWrap = $('.chapter-widget-info'),
@@ -283,6 +280,12 @@
myMedia.setCurrentTime(currentChapter.begin);
}
+ //close chapter form
+ $(document).on('click', '.btn-ok-chapter', function(e){
+ e.preventDefault();
+ $('.form-chapter-edit').remove();
+ });
+
//delete chapter
$(document).on('click', '.btn-delete-chapter', function(e){
e.preventDefault();
@@ -305,10 +308,6 @@
$("#modal-confirm").modal('show');
});
- $(document).on('click', '.btn-ok-chapter', function(e){
- e.preventDefault();
- $('.form-chapter-edit').remove();
- });
function deleteChapter(idChapter){
@@ -334,10 +333,7 @@
disabledPreview();
}
- function getRandomColor(){
- return global.colors[(global.colorsIndex<global.colors.length) ? global.colorsIndex++ : (global.colorsIndex=0)];
- }
- //nouveau chapitre
+ //new chapter
function newChapter(dataChapter, render){
var chapter = new IriSP.Model.Annotation(false, myProject);
chapter.setMedia(myMedia.id);
@@ -377,7 +373,6 @@
};
newChapter(dataChapter, true);
-
});
function organizeNewChapter(beginNew){
@@ -455,9 +450,51 @@
return annotation;
}
+ //annotation content data init
+ function getContentAnnotationByType(type){
+ var content;
+ switch(type){
+ case 'audio':
+ content = {
+ mimetype : "application/x-ldt-audio",
+ 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",
+ links : []
+ };
+ break;
+ case 'slideshow':
+ content = {
+ mimetype : "application/x-ldt-slideshow",
+ slideduration : 1000,
+ autostart : false,
+ images : []
+ };
+ break;
+ }
+ return content;
+ }
+
function renderAnnotation(){
-
var timeline = $('.timeline-annotations'),
wTimeline = timeline.width(),
annotationList = $('#list-annotations-rows');
@@ -514,16 +551,12 @@
timeline.find('li:last-child').append(segment);
}
-
//liste
v.iconTab = getIcon(v.type);
var tplAnnotationRow = getTemplate('#tpl-list-annotation-row');
tplAnnotationRow = Mustache.render(tplAnnotationRow, v);
annotationList.append(tplAnnotationRow);
-
});
-
-
}//renderAnnotation
//edit annotation
@@ -541,7 +574,6 @@
});
$('.tab-content').on('keyup', '.form-info-general-annotation input[name=title], .form-info-general-annotation textarea', function(e){
-
var name = $(this).attr('name'),
value = $(this).val();
currentAnnotation[name] = value;
@@ -582,7 +614,7 @@
$(this).tab('show');
});
- //ouvrir tab
+ //open tab
$(document).on('click', '.open-tab', function(e){
e.preventDefault();
var type = $(this).attr('data-type');
@@ -592,8 +624,7 @@
function openTab(type, data){
var dataView, isNew = false;
- if(_.isUndefined(data)){//nouveau
-
+ if(_.isUndefined(data)){//new
var currentTimePlusUnMin = 60 * 1000 + myMedia.currentTime,
endAnnotation = (currentTimePlusUnMin<myMedia.duration) ? currentTimePlusUnMin : myMedia.duration;
var dataAnnotation = {
@@ -607,7 +638,7 @@
dataView = newAnnotation(dataAnnotation);
renderAnnotation();
isNew = true;
- }else{//édition
+ }else{//edition
dataView = data;
}
@@ -637,7 +668,7 @@
$(tabContent).append(tpl);
$('.tab-content').append(tabContent);
- //particularité selon type
+ //data by type
switch(type){
case 'audio':
break;
@@ -704,7 +735,7 @@
if(isNew){$(tabContent).find('.head-title').focus();}
- }//openTab()
+ }//openTab
function getIcon(type){
var icon;
@@ -725,7 +756,7 @@
return icon;
}
- //définit currentAnnotation quand la tab s'ouvre
+ //define currentAnnotation by open tab
$('#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; });
@@ -733,13 +764,19 @@
showCurrentAnnotationInTimeline(idAnnotation);
});
- //rafraichit annotations au retour sur la liste
+ //refresh annotation data view when back on annotation list tab
$('#onglet-annotations').on('show', 'a[data-toggle="list-annotations"]', function (e) {
currentAnnotation = undefined;
renderAnnotation();
});
- //fermer tab
+ //close tab
+ function closeTab(idAnnotation){
+ $('#onglet-'+idAnnotation).remove();
+ $('.tab-content #tab-annotation-'+idAnnotation).remove();
+ $('#tab-list-annotation').tab('show');
+ }
+
$('#onglet-annotations').on('click', 'span.close-tab', function(e){
e.preventDefault();e.stopPropagation();
var idAnnotation = $(this).parents('a').attr('data-id');
@@ -752,15 +789,9 @@
closeTab(idAnnotation);
});
- function closeTab(idAnnotation){
- $('#onglet-'+idAnnotation).remove();
- $('.tab-content #tab-annotation-'+idAnnotation).remove();
- $('#tab-list-annotation').tab('show');
- }
+/* Video */
- //video
function renderVideoInfo(videoWrap, dataVideo){
-
var tplVideo = getTemplate('#tpl-video-row');
tplVideo = Mustache.render(tplVideo, dataVideo);
@@ -768,8 +799,9 @@
videoWrap = videoWrap.find(".video-container");
getVideoPlayer(dataVideo.url, videoWrap);
-
}
+
+ //select video on modal
$('.popup').on('click', '.bibliotheque-video a:not(.pagination a)', function(e){
e.preventDefault();
@@ -797,7 +829,7 @@
/* Slideshow */
- //bibliotheque
+ //select image on modal
$('.popup').on('click', '.bibliotheque-image a:not(.pagination a)', function(e){
e.preventDefault();
@@ -819,15 +851,13 @@
});
function addImageToDiaporama(diaporama, dataView){
-
var tplDiapo = getTemplate('#tpl-diaporama-row');
tplDiapo = Mustache.render(tplDiapo, dataView);
diaporama.append(tplDiapo);
disabledBtnSortable(diaporama);
-
};
- //edit title / description
+ //edit
$('.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(),
@@ -861,7 +891,7 @@
disabledPreview();
});
- //bouton up / down
+ //button up / down
$(document).on('click', '.ui-sortable .btn-sort', function(e){
e.preventDefault();
var row = $(this).parents('tr.row-image-diaporama'),
@@ -880,6 +910,13 @@
disabledPreview();
});
+ function disabledBtnSortable(listDiaporama){
+ listDiaporama.find('.btn-sort.disabled').removeClass('disabled');
+ listDiaporama.find('tr.row-image-diaporama:first-child').find('.btn-sort.up').addClass('disabled');
+ listDiaporama.find('tr.row-image-diaporama:last-child').find('.btn-sort.down').addClass('disabled');
+ }
+
+ //delete image on slideshow
$('.tab-content').on('click','.btn-delete-image', function(e){
e.preventDefault();
var rowImage = $(this).parents('tr.row-image-diaporama'),
@@ -890,18 +927,23 @@
disabledPreview();
});
- function disabledBtnSortable(listDiaporama){
- listDiaporama.find('.btn-sort.disabled').removeClass('disabled');
- listDiaporama.find('tr.row-image-diaporama:first-child').find('.btn-sort.up').addClass('disabled');
- listDiaporama.find('tr.row-image-diaporama:last-child').find('.btn-sort.down').addClass('disabled');
+/* Links */
+
+ //add
+ function addLinkRow(tbody, dataView){
+ var tplLinkRow = getTemplate('#tpl-links-row');
+ var output = Mustache.render(tplLinkRow, dataView);
+ tbody.append(output);
+
}
- //links
$('.tab-content').on('click', '.add-link', function(e){
e.preventDefault();
var tbody = $(this).parents('tfoot').siblings('tbody');
addLinkRow(tbody);
});
+
+ //delete
$('.tab-content').on('click', '.delete-link', function(e){
e.preventDefault();
var row = $(this).parents('tr'),
@@ -910,18 +952,13 @@
row.remove();
updateLinks(tbody);
});
- function addLinkRow(tbody, dataView){
-
- //head commun à tous
- var tplLinkRow = getTemplate('#tpl-links-row');
- var output = Mustache.render(tplLinkRow, dataView);
- tbody.append(output);
-
- }
+
+ //edit
$('.tab-content').on('keyup', '.links-rows input', function(e){
var tbody = $(this).parents('.links-rows');
updateLinks(tbody);
});
+
function updateLinks(tbody){
links = new Array();
@@ -938,9 +975,13 @@
currentAnnotation.content.links = links;
disabledPreview();
}
+
$('.tab-content').on('focus', '.url-link', function(){
var td = $(this).parents('td');
- if(td.hasClass('error')) td.removeClass('error')
+ if(td.hasClass('error')) {
+ td.removeClass('error');
+ td.find('.help-inline').hide();
+ }
});
$('.tab-content').on('blur', '.url-link', function(){
@@ -948,6 +989,7 @@
td = $(this).parents('td');
if(!isValidLink(url)){
td.addClass('error');
+ td.find('.help-inline').show();
}
});
@@ -955,7 +997,26 @@
return /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/.test(url);
}
- //annotation audio
+ //autostart
+ $('.tab-content').on('click', '.btn-autostart', function(){
+ var autostart = $(this).attr('data-autostart');
+ if(autostart == "true"){ autostart = true;}
+ else {autostart = false;}
+ disabledPreview();
+ currentAnnotation.content.autostart = autostart;
+ });
+
+ //duration
+ $('.tab-content').on('change keyup', '.config-diaporama input[name=duration]', function(){
+ var value = $(this).val();
+ if(!isNaN(value)){
+ disabledPreview();
+ currentAnnotation.content.slideduration = value * 1000;
+ }
+ });
+
+/* Audio */
+
$('.tab-content').on('keyup', '.annotation-audio-content input, .annotation-audio-content textarea', function(){
var name = $(this).attr('name'),
value = $(this).val();
@@ -964,25 +1025,8 @@
disabledPreview();
});
- //annotation slideshow
- $('.tab-content').on('click', '.btn-autostart', function(){
- var autostart = $(this).attr('data-autostart');
- if(autostart == "true"){ autostart = true;}
- else {autostart = false;}
- disabledPreview();
- currentAnnotation.content.autostart = autostart;
- });
+/* Save project */
- $('.tab-content').on('change keyup', '.config-diaporama input[name=duration]', function(){
- var value = $(this).val();
- if(!isNaN(value)){
- disabledPreview();
- currentAnnotation.content.slideduration = value * 1000;
- }
- });
-
-
- //save project
$('.btn-save-project').bind('click', function(e){
e.preventDefault();
if($(this).hasClass('disabled')) return;
@@ -1027,7 +1071,7 @@
e.preventDefault();
});
- //alert
+ //alert save info
$('.alert').bind('close', function (e) {
e.preventDefault();
$(this).hide();
@@ -1037,7 +1081,9 @@
$('.alert').hide();
$('.'+className).show();
}
-//################ config
+
+/* Config */
+
//tagit
function onTagItChange(e, ui) {
var tagitType = $(this).attr('data-type'),
@@ -1060,7 +1106,7 @@
afterTagAdded : onTagItChange
}
- //CLEditor annotation > text (wysiwyg) http://premiumsoftware.net/cleditor/docs/GettingStarted.html#optionalParameters
+ //CLEditor (wysiwyg) http://premiumsoftware.net/cleditor/docs/GettingStarted.html#optionalParameters
var wysiwygConfig = {
width: 450,
height: 250,
@@ -1128,49 +1174,6 @@
};
}
- //init annotation content data
- function getContentAnnotationByType(type){
- var content;
- switch(type){
- case 'audio':
- content = {
- mimetype : "application/x-ldt-audio",
- 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",
- links : []
- };
- break;
- case 'slideshow':
- content = {
- mimetype : "application/x-ldt-slideshow",
- slideduration : 1000,
- autostart : false,
- images : []
- };
- break;
- }
- return content;
- }//getContentAnnotationByType
-
//unload
$(window).on("beforeunload", onLeave);
function onLeave(){
@@ -1184,26 +1187,6 @@
tangleStartVal,
tangleHasMoved;
- $('.chapter-widget-info').on('mousedown', '.time-tangle', function(evt){
- activeTangle = $(this);
- activeTangle.addClass("active");
- tangleStartVal = +activeTangle.attr("data-milliseconds");
- tangleStartX = evt.pageX;
- tangleHasMoved = false;
- $(this).parents('td').siblings('td').find(".time-tangle").addClass("deactivate");
- return false;
- });
-
- $('.tab-content').on('mousedown', '.time-tangle', function(evt){
- activeTangle = $(this);
- activeTangle.addClass("active");
- tangleStartVal = +activeTangle.attr("data-milliseconds");
- tangleStartX = evt.pageX;
- tangleHasMoved = false;
- $(this).parents('td').siblings('td').find(".time-tangle").addClass("deactivate");
- return false;
- });
-
$(document)
.mousemove(function(evt) {
if (activeTangle) {
@@ -1216,7 +1199,7 @@
.mouseup(function() {
if (activeTangle) {
- if(activeTangle.hasClass('slider-tangle')){
+ if(activeTangle.hasClass('slider-tangle')){//annotation
renderAnnotation();
refreshAnnotationDisplay(myMedia.getCurrentTime());
}
@@ -1226,6 +1209,16 @@
});
//chapters
+ $('.chapter-widget-info').on('mousedown', '.time-tangle', function(evt){
+ activeTangle = $(this);
+ activeTangle.addClass("active");
+ tangleStartVal = +activeTangle.attr("data-milliseconds");
+ tangleStartX = evt.pageX;
+ tangleHasMoved = false;
+ $(this).parents('td').siblings('td').find(".time-tangle").addClass("deactivate");
+ return false;
+ });
+
function updateRenderChapter(chapterData){
var segment = $('.chapter-segments li#'+chapterData.id),
wChapterSegmentWrap = $('.chapter-segments').width(),
@@ -1285,7 +1278,16 @@
updateChapterDuration(val, chapterBefore, chapterAfter);
});
-//annotations
+ //annotations
+ $('.tab-content').on('mousedown', '.time-tangle', function(evt){
+ activeTangle = $(this);
+ activeTangle.addClass("active");
+ tangleStartVal = +activeTangle.attr("data-milliseconds");
+ tangleStartX = evt.pageX;
+ tangleHasMoved = false;
+ $(this).parents('td').siblings('td').find(".time-tangle").addClass("deactivate");
+ return false;
+ });
$('.tab-content').on('valuechange', '.tangle-start', function(evt, val){
var max = currentSlider.slider('values')[1],
@@ -1334,21 +1336,10 @@
}
}
- //test
- $('.log-annotations').bind('click', function(e){
- e.preventDefault();
- console.log(annotations.length + ' annotations', annotations);
- currentSlider.slider( "values", 0, 55 );
- });
-
- $('.log-chapters').bind('click', function(e){
- e.preventDefault();
- console.log(chapters.length + ' chapitres',chapters);
- });
-
});//ready
-//Utilitaires
+/* Utility */
+
Array.prototype.move = function (old_index, new_index) {
if (new_index >= this.length) {
var k = new_index - this.length;