--- a/integration/css/style.css Mon Jun 03 17:47:15 2013 +0200
+++ b/integration/css/style.css Tue Jun 04 12:50:33 2013 +0200
@@ -1,4 +1,8 @@
.wrap{color: #2c3e50;}
+.vignette-projet{position: relative;}
+.vignette-projet:hover a{display: block;}
+.vignette-projet a{ display:none;position: absolute; width: 50%; height: 100%; font-size: 50px; text-align: center; line-height: 140px; text-decoration: none;}
+.vignette-projet a.btn-apercu{right: 0; top: 0;}
header{background-color: #2980b9;height: 60px;border-bottom: 1px solid #E5E5E5;}
header .row > div{margin-bottom: 0; }
h1{color: #FFF;}
@@ -49,8 +53,8 @@
.chapitre-cut-wrap{position: relative; height: 50px; margin-bottom: 10px;}
.btn-cut-chapter{position: absolute;top: 20px;left: 11px; width: 40px;}
.indicateur-chapter, .indicateur-annotation{z-index:100; left:10px; width: 1px; height: 100%;background-color: #000; position: absolute;}
-.chapter-segments {width: 100%; height: 20px; margin: 0;}
-.chapter-segments li{cursor:pointer; float: left; list-style: none; line-height: 20px; height: 20px; text-align: center; overflow: hidden;}
+.chapter-segments {overflow:hidden; width: 100%; height: 20px; margin: 0; position: relative;}
+.chapter-segments li{position: absolute; top: 0; cursor:pointer; float: left; list-style: none; line-height: 20px; height: 20px; text-align: center; overflow: hidden;}
.list-chapter-wrap, .list-annotation-wrap, .section{background-color: #F5F5F5; border: 1px solid #E5E5E5;}
.list-chapter-wrap table, .list-annotation-wrap table{margin-bottom: 0;}
.list-chapter-wrap h4, .form-chapter-edit h4, .list-annotation-wrap h4, .title-section{padding: 10px; border-bottom: 1px solid; margin-bottom: 10px;}
@@ -83,8 +87,8 @@
.html-apercu{overflow: auto; margin-top: 10px;}
.input-image-url{display: none;}
.timeline-annotations-wrap{position: relative;background-color: #202020;}
-.timeline-annotations{width: 460px;height: auto; position: relative; margin: 0; padding: 10px 0;}
-.timeline-annotations li{display: block; width: 460px;height: 10px; position: relative;}
+.timeline-annotations{width: 460px;height: auto; position: relative; margin: 0; padding-top: 4px;}
+.timeline-annotations li{display: block; width: 460px;height: 10px; position: relative; padding-bottom: 4px;}
.timeline-annotations .annotation{width: 10px; height: 10px; background-color: #c0392b; position: absolute; top:0px;}
ul.tagit{margin-left: 10px;-webkit-border-radius: 0px;
-moz-border-radius: 0px;
--- a/integration/edition.html Mon Jun 03 17:47:15 2013 +0200
+++ b/integration/edition.html Tue Jun 04 12:50:33 2013 +0200
@@ -43,7 +43,6 @@
<div class="container">
<div class="row project-head">
<div class="span7">
-
<div class="project-title-editor">
<i class="icon-folder-close-alt"></i>
<span class="project-title">Titre du projet</span> <i class="icon-pencil"></i>
@@ -51,8 +50,8 @@
</div>
<div class="span5 text-right project-action">
- <a href="" class="btn"><i class="icon-eye-open"></i> Voir aperçu</a>
- <a href="" class="btn btn-success"><i class="icon-save"></i> Sauvegarder le projet</a>
+ <a href="#" class="btn disabled btn-apercu-projet"><i class="icon-eye-open"></i> Voir aperçu</a>
+ <a href="#" class="btn btn-success"><i class="icon-save"></i> Sauvegarder le projet</a>
</div>
</div>
<div class="row">
@@ -516,14 +515,14 @@
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Annuler</button>
- <button id="btn-delete-modal" class="btn btn-primary">Supprimer</button>
+ <a id="btn-delete-modal" class="btn btn-primary">Supprimer</a>
</div>
</div>
<div id="templates">
<script id="tpl-head" type="text/html">
<form action="#" class="form-info-general-annotation" style="background-color:{{color}}" data-id="{{id}}">
-
+
<div class="row">
<div class="span3 text-right">
<input type="text" placeholder="Titre de l'annotation.." name="title" value="{{title}}">
@@ -554,7 +553,7 @@
<div data-id="{{id}}" id="" class="slider-duration"></div>
</div>
<div class="span6 text-right">
- <a class="btn btn-danger btn-delete-annotation" data-id="{{id}}" data-no-render>
+ <a class="btn btn-danger btn-delete btn-delete-annotation" data-id="{{id}}" data-no-render>
<i class="icon-trash"></i> Delete
</a>
<a class="btn btn-primary btn-save-annotation" data-id="{{id}}">
@@ -760,14 +759,14 @@
<script id="tpl-list-annotation-row" type="text/html">
<tr id="row-list-annotation-{{id}}" style="background-color : {{color}};">
<td>{{title}}</td>
- <td>{{type}}</td>
+ <td><i class="icon-{{iconTab}}"></i></td>
<td>{{begin}}</td>
<td>{{getDuration}}</td>
<td>{{end}}</td>
<td>
<a href="#" data-id="{{id}}" class="btn btn-edit-annotation" data-type="{{type}}">
<i class="icon-pencil"></i></a>
- <a data-id="{{id}}" data-type="annotation" data-title="{{title}}" href="#row-list-annotation-{{id}}" class="btn btn-delete-annotation">
+ <a data-id="{{id}}" data-type="annotation" data-title="{{title}}" href="#row-list-annotation-{{id}}" class="btn btn-delete btn-delete-annotation">
<i class="icon-trash delete-annotation"></i>
</a>
</td>
@@ -788,7 +787,7 @@
<a href="#" class="btn btn-edit-chapter" data-chapter-id="{{id}}"><i class="icon-pencil"></i></a>
</td>
<td>
- <a data-title="{{title}}" data-chapter-id="{{id}}" href="#row-list-chapter-{{id}}" class="btn btn-delete-chapter"><i class="icon-trash delete-annotation"></i></a>
+ <a data-title="{{title}}" data-chapter-id="{{id}}" href="#row-list-chapter-{{id}}" class="btn btn-delete btn-delete-chapter"><i class="icon-trash delete-annotation"></i></a>
</td>
</tr>
</table>
--- a/integration/home.html Mon Jun 03 17:47:15 2013 +0200
+++ b/integration/home.html Tue Jun 04 12:50:33 2013 +0200
@@ -40,27 +40,51 @@
</div>
<div class="row">
<div class="span2">
- <a href=""><img src="img/140x140.gif" alt=""></a>
+ <div class="vignette-projet">
+ <a class="btn-editer" title="éditer le projet" href="#"><i class="icon-pencil"></i></a>
+ <a class="btn-apercu" title="voir le projet" href="#"><i class="icon-eye-open"></i></a>
+ <img src="img/140x140.gif" alt="">
+ </div>
<h4><a href="">Titre du projet</a></h4>
</div>
<div class="span2">
- <a href=""><img src="img/140x140.gif" alt=""></a>
+ <div class="vignette-projet">
+ <a class="btn-editer" title="éditer le projet" href="#"><i class="icon-pencil"></i></a>
+ <a class="btn-apercu" title="voir le projet" href="#"><i class="icon-eye-open"></i></a>
+ <img src="img/140x140.gif" alt="">
+ </div>
<h4><a href="">Titre du projet</a></h4>
</div>
<div class="span2">
- <a href=""><img src="img/140x140.gif" alt=""></a>
+ <div class="vignette-projet">
+ <a class="btn-editer" title="éditer le projet" href="#"><i class="icon-pencil"></i></a>
+ <a class="btn-apercu" title="voir le projet" href="#"><i class="icon-eye-open"></i></a>
+ <img src="img/140x140.gif" alt="">
+ </div>
<h4><a href="">Titre du projet</a></h4>
</div>
<div class="span2">
- <a href=""><img src="img/140x140.gif" alt=""></a>
+ <div class="vignette-projet">
+ <a class="btn-editer" title="éditer le projet" href="#"><i class="icon-pencil"></i></a>
+ <a class="btn-apercu" title="voir le projet" href="#"><i class="icon-eye-open"></i></a>
+ <img src="img/140x140.gif" alt="">
+ </div>
<h4><a href="">Titre du projet</a></h4>
</div>
<div class="span2">
- <a href=""><img src="img/140x140.gif" alt=""></a>
+ <div class="vignette-projet">
+ <a class="btn-editer" title="éditer le projet" href="#"><i class="icon-pencil"></i></a>
+ <a class="btn-apercu" title="voir le projet" href="#"><i class="icon-eye-open"></i></a>
+ <img src="img/140x140.gif" alt="">
+ </div>
<h4><a href="">Titre du projet</a></h4>
</div>
<div class="span2">
- <a href=""><img src="img/140x140.gif" alt=""></a>
+ <div class="vignette-projet">
+ <a class="btn-editer" title="éditer le projet" href="#"><i class="icon-pencil"></i></a>
+ <a class="btn-apercu" title="voir le projet" href="#"><i class="icon-eye-open"></i></a>
+ <img src="img/140x140.gif" alt="">
+ </div>
<h4><a href="">Titre du projet</a></h4>
</div>
</div>
--- a/integration/js/common.js Mon Jun 03 17:47:15 2013 +0200
+++ b/integration/js/common.js Tue Jun 04 12:50:33 2013 +0200
@@ -40,10 +40,7 @@
if($(this).hasClass('btn-cancel')){
$(this).parents('.popup').modal('hide');
}
- if($(this).hasClass('btn-previsualisation')){
- var imgPrev = $('<img src="img/520x520.gif" alt="" />');
- $('.previsualisation').empty().append(imgPrev);
- }
+
});
//confirmation suppression
@@ -57,11 +54,7 @@
});
$("#modal-confirm").on('shown', function() {
- $("#modal-confirm #btn-delete-modal").focus()
- });
-
- $("#modal-confirm").on('click', '#btn-delete-modal', function(e){
-
+ $("#modal-confirm #btn-delete-modal").focus();
});
});
\ No newline at end of file
--- a/integration/js/edition.js Mon Jun 03 17:47:15 2013 +0200
+++ b/integration/js/edition.js Tue Jun 04 12:50:33 2013 +0200
@@ -181,9 +181,22 @@
//confirmation suppression
$("#modal-confirm").on('click', '#btn-delete-modal', function(e){
+
+ var typeDelete = $(this).attr('data-type-delete'),
+ idAnnotation = $(this).attr('data-id');
+ if(typeDelete == 'chapter' || typeDelete == 'annotation'){
+ e.preventDefault();
+ if(typeDelete == 'chapter') deleteChapter(idAnnotation);
+ if(typeDelete == 'annotation') deleteAnnotation(idAnnotation);
+ }
});
+//--apercu projet
+$(document).on('click', '.btn-apercu-projet.disabled', function(e){
+ e.preventDefault();
+});
+
//--title-editor
$(document).on('click', '.project-title-editor i, .project-title', function () {
var html = $('.project-title').html();
@@ -256,7 +269,12 @@
e.preventDefault();
if(chapters.length == 1){alert('Le projet doit contenir au moins un chapitre.'); return;}
-
+ var idChapter = $(this).attr('data-chapter-id'),
+ 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),
@@ -275,8 +293,31 @@
if($('#form-chapter-edit-'+idChapter).length){
$('#form-chapter-edit-'+idChapter).remove();
}
+*/
+
});
+function deleteChapter(idChapter){
+ $("#modal-confirm").modal('hide')
+ var 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 getRandomColor(){
return global.colors[(global.colorsIndex<global.colors.length) ? global.colorsIndex++ : (global.colorsIndex=0)];
}
@@ -341,8 +382,10 @@
$.each(chapters, function(k, v){
//segments
- var width = Math.floor(v.getDuration() * wChapterSegmentWrap / myMedia.duration),
+ var width = v.getDuration() * wChapterSegmentWrap / myMedia.duration,
+ left = v.begin * wChapterSegmentWrap / myMedia.duration,
segment = $('<li>'+v.title+'</li>').css({
+ left : left,
width : width,
backgroundColor : v.color
}).attr('id', v.id);
@@ -433,6 +476,7 @@
//liste
+ v.iconTab = getIcon(v.type);
var tplAnnotationRow = getTemplate('#tpl-list-annotation-row');
tplAnnotationRow = Mustache.render(tplAnnotationRow, v);
annotationList.append(tplAnnotationRow);
@@ -469,14 +513,25 @@
//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');
+ btnDeleteModal.attr('data-id', idAnnotation);
+ });
- });
+ function deleteAnnotation(idAnnotation){
+ $("#modal-confirm").modal('hide');
+ annotations = _(annotations).reject(function(c) { return c.id == idAnnotation; });
+ closeTab(idAnnotation);
+ renderAnnotation();
+ }
//tab
$('#onglet-annotations').on('click', 'a', function(e){
--- a/integration/js/tangle.js Mon Jun 03 17:47:15 2013 +0200
+++ b/integration/js/tangle.js Tue Jun 04 12:50:33 2013 +0200
@@ -34,11 +34,15 @@
function updateRenderChapter(chapterData){
var segment = $('.chapter-segments li#'+chapterData.id),
wChapterSegmentWrap = $('.chapter-segments').width(),
- wSegmentNew = Math.floor(chapterData.getDuration() * wChapterSegmentWrap / myMedia.duration),
+ wSegmentNew = chapterData.getDuration() * wChapterSegmentWrap / myMedia.duration,
+ lSegmentNew = chapterData.begin * wChapterSegmentWrap / myMedia.duration,
row = $('#row-list-chapter-'+chapterData.id),
form = ($('#form-chapter-edit-'+chapterData.id).length) ? $('#form-chapter-edit-'+chapterData.id) : false;
- segment.width(wSegmentNew);
+ segment.css({
+ width : wSegmentNew,
+ left : lSegmentNew
+ });
row.find('.begin').text(chapterData.begin);
row.find('.duration').text(chapterData.getDuration());
--- a/integration/modal-bibliotheque-video.html Mon Jun 03 17:47:15 2013 +0200
+++ b/integration/modal-bibliotheque-video.html Tue Jun 04 12:50:33 2013 +0200
@@ -9,14 +9,14 @@
<div class="row">
<div class="span2">
<a href="#"
- data-url="https://soundcloud.com/dimitri-platanias/cortigiani-rigoletto-verdi"
+ data-url="http://www.youtube.com/watch?v=zdmqFSoraMA"
data-title="titre de la super vidéo"
data-description="hello world"
>
<img src="img/140x140.gif" alt=""></a>
<h5>
<a href="#"
- data-url="http://www.dailymotion.com/video/xgs10f_the-three-tenors-la-donna-e-mobile_music"
+ data-url="http://www.youtube.com/watch?v=zdmqFSoraMA"
data-title="titre de la super vidéo"
data-description="hello world"
>Titre du média Titre du média Titre du média Titre du média</a>
--- a/integration/modal-image.html Mon Jun 03 17:47:15 2013 +0200
+++ b/integration/modal-image.html Tue Jun 04 12:50:33 2013 +0200
@@ -33,14 +33,12 @@
<label class="control-label" for="media-url-link">URL de l'image :</label>
<div class="controls">
<input type="text" name="title-media" id="media-url-link" placeholder="Titre de l'image..">
- <a href="#" class="btn btn-previsualisation" class="btn"><i class="icon-eye-open"></i> Prévisualiser</a>
</div>
</div>
<div class="control-group input-image-upload">
<label class="control-label" for="media-url-link">Fichier de l'image :</label>
<div class="controls">
<input type="file" name="title-media" id="media-file" placeholder="Titre de l'image..">
- <a href="#" class="btn btn-previsualisation" class="btn"><i class="icon-eye-open"></i> Prévisualiser</a>
</div>
</div>
<div class="control-group">