--- a/integration/js/edition.js Wed May 29 11:39:49 2013 +0200
+++ b/integration/js/edition.js Wed May 29 18:14:23 2013 +0200
@@ -17,17 +17,23 @@
};
+//position de la video setCurrentTime
+$(".indicateur-annotation").draggable({
+ axis: "x",
+ containment: "parent",
+ drag: function(e, ui) {
+ var t = myMedia.duration * parseInt(ui.helper.css("left")) / ( $(".timeline-annotations").width() - 2 * ui.helper.width() );
+ myMedia.setCurrentTime(t);
+ }
+});
+$('.timeline-annotations').bind('click', function(e){
+ var x = e.pageX - $(this).offset().left;
+ myMedia.setCurrentTime(myMedia.duration * x / $(this).width());
+});
myProject.onLoad(function() {
-
-
-
-//load Annotations
-myProject.getAnnotationsByTypeTitle("annotations");
-
-
$(".project-title").text(myProject.title);
myMedia = myProject.getCurrentMedia();
@@ -36,20 +42,36 @@
var _chapters = myProject.getAnnotationsByTypeTitle("chapitrage");
if(_chapters.length){
$.each(_chapters, function(k, v){
- var render = false;
+ v.color = getRandomColor();
+ chapters.push(v);
if((k+1) == _chapters.length){
- render = true;
+ renderChapter();
}
- newChapter(v, render);
+ });
+}
+
+//load Annotations
+var _annotations = myProject.getAnnotationsByTypeTitle("annotations");
+if(_annotations.length){
+ $.each(_annotations, function(k, v){
+
+ v.color = getRandomColor();
+ var type = v.content.mimetype.split('-');
+ type = type[type.length-1]
+ v.type = type;
+
+ annotations.push(v);
+ if((k+1) == _annotations.length){
+ renderAnnotation();
+ }
+
});
}
-
-
//chargement des chapitres et annotations existants
// loadInitChapters();
- loadInitAnnotation();
+ //loadInitAnnotation();
IriSP.htmlPlayer(
myMedia,
@@ -164,21 +186,7 @@
//select on bibliotheque
- //video
- $('.popup').on('click', '.bibliotheque-video a', function(e){
- e.preventDefault();
-
- var url = $(this).attr('href');
- currentAnnotation.content.url = url;
-
- $('.popup').modal('hide');
- $.get('template.html', function(templates){
- var videoWrap = $('#tab-'+global.idAnnotation).find('.annotation-video-content'),
- tplVideo = $(templates).filter('#tpl-video-row').html();
- videoWrap.empty().append(tplVideo);
- });
-
- });
+
//confirmation suppression
@@ -245,6 +253,9 @@
function loadFormChapter(idChapter){
+
+
+
currentChapter = _.find(chapters, function(c){ return c.id == idChapter; });
var chapterWrap = $('.chapter-widget-info'),
indexChapter = _.indexOf(chapters, currentChapter),
@@ -260,6 +271,8 @@
chapterWrap.empty().append(tpl);
chapterWrap.find('.tag-it').tagit(tagitParam);
});
+
+ myMedia.setCurrentTime(currentChapter.begin);
}
@@ -289,6 +302,9 @@
}
});
+function getRandomColor(){
+ return global.colors[(global.colorsIndex<global.colors.length) ? global.colorsIndex++ : (global.colorsIndex=0)];
+}
//nouveau chapitre
function newChapter(dataChapter, render){
var chapter = new IriSP.Model.Annotation(false, myProject);
@@ -298,10 +314,10 @@
chapter.title = dataChapter.title;
chapter.description = dataChapter.description;
chapter.keywords = dataChapter.keywords;
- chapter.color = global.colors[(global.colorsIndex<global.colors.length) ? global.colorsIndex++ : (global.colorsIndex=0)];
+ chapter.color = getRandomColor();
chapters.push(chapter);
- if(render){renderChapter();}
+ renderChapter();
loadFormChapter(chapter.id);
}
@@ -346,30 +362,25 @@
chapterSegmentWrap.empty();
chapterList.empty();
+ $.get('template.html', function(templates){
+ $.each(chapters, function(k, v){
- $.each(chapters, function(k, v){
- //form
- if($('#form-chapter-edit-'+v.id).length){
- loadFormChapter(v.id);
- }
- //segments
- var width = Math.floor(v.getDuration() * wChapterSegmentWrap / myMedia.duration),
- segment = $('<li>'+v.title+'</li>').css({
- width : width,
- backgroundColor : v.color
- }).attr('id', v.id);
-
- chapterSegmentWrap.append(segment);
+ //segments
+ var width = Math.floor(v.getDuration() * wChapterSegmentWrap / myMedia.duration),
+ segment = $('<li>'+v.title+'</li>').css({
+ width : width,
+ backgroundColor : v.color
+ }).attr('id', v.id);
+
+ chapterSegmentWrap.append(segment);
- //liste
- $.get('template.html', function(templates){
+ //liste
var tplChapterRow = $(templates).filter('#tpl-chapter-row').html();
tplChapterRow = Mustache.render(tplChapterRow, v);
chapterList.append(tplChapterRow);
-
});
});
- }
+ }//renderChapter()
//init
function loadInitChapters(){//nouveau projet, 1 chapitre
@@ -555,11 +566,24 @@
case 'video':
if(viewType.content.url != ""){
+ /*
var videoWrap = $(tabContent).find('.annotation-video-content'),
tplVideo = $(templates).filter('#tpl-video-row').html();
+ tplVideo = Mustache.render(tplVideo, viewType.content);
videoWrap.empty().append(tplVideo);
+
+
+ var videoWrap = $(tabContent).find(".video-container"),
+ src = viewType.content.url;
+ getVideoPlayer(src, videoWrap);
+*/
+ var videoWrap = $(tabContent).find('.annotation-video-content');
+ renderVideoInfo(videoWrap, viewType.content);
+
}
+
+
break;
case 'text':
var cledit = $(tabContent).find('.wysiwyg').cleditor(wysiwygConfig)[0];
@@ -580,9 +604,17 @@
$(tabContent).find('.number-spin').spin(spinParam);
$(tabContent).find('.ui-sortable').sortable({
+ start: function (event, ui) {
+ $(ui.item).data("startindex", ui.item.index());
+ },
stop : function(event, ui){
disabledBtnSortable($(this));
- }
+ },
+ update : function(event, ui){
+ var oldIndex = ui.item.data("startindex"),
+ newIndex = ui.item.index();
+ currentAnnotation.content.images.move(oldIndex, newIndex);
+ },
});
var diaporama = $(tabContent).find('#diaporama-'+idAnnotation),
images = viewType.content.images;
@@ -653,18 +685,62 @@
$('#tab-list-annotation').tab('show');
}
+//video
+ function renderVideoInfo(videoWrap, dataVideo){
+ $.get('template.html', function(templates){
+ var tplVideo = $(templates).filter('#tpl-video-row').html();
+ tplVideo = Mustache.render(tplVideo, dataVideo);
+
+ videoWrap.empty().append(tplVideo);
+
+ videoWrap = videoWrap.find(".video-container");
+ getVideoPlayer(dataVideo.url, videoWrap);
+ });
+ }
+ $('.popup').on('click', '.bibliotheque-video a', function(e){
+ e.preventDefault();
+
+ var url = $(this).attr('data-url'),
+ title = $(this).attr('data-title'),
+ description = $(this).attr('data-description');
+
+ currentAnnotation.content.url = url;
+ currentAnnotation.content.title = title;
+ currentAnnotation.content.description = description;
+
+ $('.popup').modal('hide');
+
+ var videoWrap = $('#tab-annotation-'+currentAnnotation.id).find('.annotation-video-content');
+ renderVideoInfo(videoWrap, currentAnnotation.content);
+/*
+ $.get('template.html', function(templates){
+ var videoWrap = $('#tab-annotation-'+currentAnnotation.id).find('.annotation-video-content'),
+ tplVideo = $(templates).filter('#tpl-video-row').html();
+ tplVideo = Mustache.render(tplVideo, currentAnnotation.content);
+ videoWrap.empty().append(tplVideo);
+
+ var videoWrap = videoWrap.find(".video-container"),
+ src = url;
+ getVideoPlayer(src, videoWrap);
+ });
+*/
+
+ });
+
//diaporama
//bibliotheque
$('.popup').on('click', '.bibliotheque-image a', function(e){
e.preventDefault();
- var url = $(this).attr('href'),
+ var url = $(this).attr('data-url'),
+ title = $(this).attr('data-title'),
+ description = $(this).attr('data-description'),
image = {
id : currentAnnotation.id,
url : url,
- title : 'titre image',
- description : 'description azerty'
+ title : title,
+ description : description
};
currentAnnotation.content.images.push(image);
@@ -686,6 +762,7 @@
$(document).on('click', '.ui-sortable .btn-sort', function(e){
e.preventDefault();
var row = $(this).parents('tr.row-image-diaporama'),
+ oldIndex = row.index(),
listDiaporama = $(this).parents('.list-image-diaporama');
if($(this).hasClass('down'))
@@ -693,9 +770,21 @@
else if($(this).hasClass('up'))
row.insertBefore(row.prev());
+ var newIndex = row.index();
+ currentAnnotation.content.images.move(oldIndex, newIndex);
+
disabledBtnSortable(listDiaporama);
});
+ $('.tab-content').on('click','.btn-delete-image', function(e){
+ e.preventDefault();
+ var rowImage = $(this).parents('tr.row-image-diaporama'),
+ index = rowImage.index();
+
+ rowImage.remove();
+ currentAnnotation.content.images.splice(index, 1);
+ });
+
function disabledBtnSortable(listDiaporama){
listDiaporama.find('.btn-sort.disabled').removeClass('disabled');
listDiaporama.find('tr.row-image-diaporama:first-child').find('.btn-sort.up').addClass('disabled');
@@ -734,7 +823,7 @@
var urlLink = $(v).find('.url-link').val(),
titleLink = $(v).find('.title-link').val(),
link = {
- uri : urlLink,
+ url : urlLink,
title : titleLink
};
links.push(link);
@@ -901,6 +990,8 @@
}//getContentAnnotationByType
+
+
//test
//a = $(".wysiwyg").cleditor(wysiwygConfig);
@@ -927,4 +1018,130 @@
e.preventDefault();
console.log(chapters.length + ' chapitres',chapters);
});
-});//ready
\ No newline at end of file
+});//ready
+
+Array.prototype.move = function (old_index, new_index) {
+ if (new_index >= this.length) {
+ var k = new_index - this.length;
+ while ((k--) + 1) {
+ this.push(undefined);
+ }
+ }
+ this.splice(new_index, 0, this.splice(old_index, 1)[0]);
+ return this; // for testing purposes
+};
+
+
+function getVideoPlayer(src, videoWrap){
+
+ var youtubeTemplate = _.template(
+ '<iframe width="<%- width %>" height="<%- height %>" src="http://www.youtube.com/embed/<%- ytid %>?rel=0&autoplay=<%- autoplay %>" frameborder="0"></iframe>'
+ );
+
+ var htmlTemplate = _.template(
+ '<<%- type %> width="<%- width %>" controls="true" autoplay="<%- autoplay %>" src="<%- src %>"/>'
+ );
+
+ var mediaW = 460,
+ mediaH = 345,
+ autoplay = false;
+
+
+ if (/^(https?:\/\/)?(www\.)?youtu\.?be/.test(src)) {
+ var urlparts = src.split(/[?&]/g),
+ ytid = "",
+ vtest = /^v=/;
+ urlparts.slice(1).forEach(function(p) {
+ if (/^v=/.test(p)) {
+ ytid = p.replace(vtest,"");
+ }
+ });
+ if (!ytid) {
+ ytid = (urlparts[0].match(/[^\/]+$/) || [""])[0];
+ }
+ videoWrap.html(youtubeTemplate({
+ ytid: ytid,
+ width: mediaW,
+ height: mediaH,
+ autoplay: autoplay
+ }));
+ return;
+ }
+
+ if (/^(https?:\/\/)?(www\.)?vimeo/.test(src)) {
+ $.ajax({
+ url: "http://vimeo.com/api/oembed.json",
+ dataType: "jsonp",
+ data: {
+ width: mediaW,
+ height: mediaH,
+ url: src,
+ autoplay: autoplay,
+ color: "be4477",
+ portrait: false,
+ title: false,
+ byline: false
+ },
+ success: function(data) {
+ videoWrap.html(data.html);
+ }
+ });
+ return;
+ }
+
+ if (/^(https?:\/\/)?(www\.)?dailymotion/.test(src)) {
+ $.ajax({
+ url: "http://www.dailymotion.com/services/oembed",
+ dataType: "jsonp",
+ data: {
+ format: "json",
+ maxwidth: mediaW,
+ maxheight: mediaH,
+ url: src
+ },
+ success: function(data) {
+ videoWrap.html(data.html);
+ }
+ });
+ return;
+ }
+
+ if (/^(https?:\/\/)?(www\.)?soundcloud\.com/.test(src)) {
+ $.ajax({
+ url: "http://soundcloud.com/oembed",
+ dataType: "jsonp",
+ data: {
+ format: "js",
+ show_comments: false,
+ auto_play: autoplay,
+ show_artwork: false,
+ url: src,
+ color: "63be6c"
+ },
+ success: function(data) {
+ videoWrap.html(data.html);
+ }
+ });
+ return;
+ }
+
+ var extension = (src.match(/\.([\d\w]+)$/) || ["",""])[1],
+ mimetype = 'video' + "/" + extension,
+ fallbacks = { "video/webm": "mp4", "video/mp4": "webm" },
+ canPlay = document.createElement("video").canPlayType(mimetype);
+
+ if (!canPlay) {
+ src = src.replace(/\.[\d\w]+$/,"." + fallbacks[mimetype]);
+ }
+
+ console.log(mimetype, canPlay, src);
+
+ videoWrap.html(htmlTemplate({
+ type: 'video',
+ src: src,
+ width: mediaW,
+ height: mediaH,
+ autoplay: "" + autoplay
+ }));
+
+}
\ No newline at end of file