--- a/integration/css/style.css Thu Jun 06 17:35:51 2013 +0200
+++ b/integration/css/style.css Fri Jun 07 11:31:34 2013 +0200
@@ -43,9 +43,9 @@
.project-title-editor-form{margin: 0;}
.project-action a:last-child{margin-right: 20px;}
.chapter-widget-info{margin-bottom: 20px;}
-.chapter-widget form{ margin: 0;}
+.chapter-widget form{ margin: 0; padding-bottom: 10px;}
#list-annotations{ background-color: #fff;}
-.form-info-general-annotation{ border-bottom: 1px solid #bdc3c7;}
+.form-info-general-annotation{ }
.chapter-widget input, .form-info-general-annotation input, .form-info-general-annotation textarea{width: 196px; max-width: 196px; }
.chapter-widget textarea{width: 426px; max-width: 426px; min-width: 426px; height: 20px;-webkit-transition: height .3s ease;-moz-transition: height .3s ease;transition: height .3s ease;}
.form-chapter-edit{}
@@ -92,7 +92,8 @@
.timeline-annotations-wrap{position: relative;background-color: #202020;}
.timeline-annotations{width: 460px;height: auto; position: relative; margin: 0; padding-top: 4px;}
.timeline-annotations li{display: block; width: 460px;height: 12px; position: relative; padding-bottom: 4px;}
-.timeline-annotations .annotation{ color:#000; text-align:center; font-size : 10px; overflow: hidden; line-height: 12px; width: 10px; height: 12px; background-color: #c0392b; position: absolute; top:0px;}
+.timeline-annotations .annotation{cursor: pointer; display:block; text-decoration:none; color:#000; text-align:center; font-size : 10px; overflow: hidden; line-height: 12px; width: 10px; height: 12px; background-color: #c0392b; position: absolute; top:0px;}
+.timeline-annotations .annotation span{display: none;}
ul.tagit{margin-left: 10px;-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;}
@@ -120,6 +121,7 @@
.description-slideshow-row{word-wrap: break-word; width: 180px; }
.description-slideshow-row span{max-height: 100px; display: inline-block; overflow: auto;}
.description-slideshow-row textarea{width: 164px; max-width: 164px; height: 100px;}
+.label-modify-video, .label-add-video{display: none;}
/* Tangle */
.time-tangle {
color: #2c3e50; cursor: w-resize; position: relative;
--- a/integration/edition.html Thu Jun 06 17:35:51 2013 +0200
+++ b/integration/edition.html Fri Jun 07 11:31:34 2013 +0200
@@ -337,7 +337,7 @@
<div class="edit-annotation-title row">
<h3 class="span3"><i class="icon-film"></i> Vidéo</h3>
<span class="span3">
- Ajouter une vidéo
+ <span class="label-add-video">Ajouter une vidéo </span>
<a data-type-media="video" data-id="annotation-azerty" data-title="Ajouter une vidéo" class="btn btn-success open-modal" href="modal-bibliotheque-video.html"><i class="icon-plus"></i></a>
</span>
</div>
@@ -604,7 +604,8 @@
<div class="edit-annotation-title row">
<h3 class="span3"><i class="icon-film"></i> Vidéo</h3>
<span class="span3">
- Ajouter une vidéo
+ <span class="label-add-video">Ajouter une vidéo</span>
+ <span class="label-modify-video">Modifier la vidéo</span>
<a data-id="annotation-{{id}}" data-type-media="video" data-title="Ajouter une vidéo" class="btn btn-success open-modal" href="modal-bibliotheque-video.html" data-hide-add-new><i class="icon-plus"></i></a>
</span>
</div>
@@ -841,8 +842,24 @@
<textarea class="" name="description" id="">{{description}}</textarea>
</div>
</div>
+ <div class="row">
+ <div class="span6 text-right">
+ <a class="btn btn-danger btn-delete btn-delete-annotation" data-title="{{title}}" data-id="{{id}}" data-no-render>
+ <i class="icon-trash"></i> Delete
+ </a>
+ <a class="btn btn-primary btn-save-annotation" data-id="{{id}}">
+ <i class="icon-ok"></i> Ok
+ </a>
+ </div>
+ </div>
</form>
</script>
+
+<script id="tpl-annotation-in-timeline" type="text/html">
+<a style="left:{{left}}px; width:{{width}}px; background-color:{{color}};" data-id="{{id}}" id="annotation-timeline-{{id}}" class="annotation">
+ <span><i class="icon-pencil"></i> édition en cours</span>
+</a>
+</script>
</div><!-- /#templates -->
<script src="lib/jquery-1.9.1.min.js"></script>
--- a/integration/js/edition.js Thu Jun 06 17:35:51 2013 +0200
+++ b/integration/js/edition.js Fri Jun 07 11:31:34 2013 +0200
@@ -26,8 +26,10 @@
$('.timeline-annotations').on('click', '.annotation', function(e){
e.preventDefault();
-
- myMedia.setCurrentTime(myMedia.duration * x / $(this).width());
+ var idAnnotation = $(this).attr('data-id'),
+ annotation = _.find(annotations, function(c){ return c.id == idAnnotation; });
+ myMedia.setCurrentTime(annotation.begin);
+ openTab(annotation.type, annotation);
});
myProject.onLoad(function() {
@@ -155,8 +157,8 @@
}
function showCurrentAnnotationInTimeline(idAnnotation){
- $('.timeline-annotations .annotation').empty();
- $('#annotation-timeline-'+idAnnotation).html('<i class="icon-pencil"></i> '+textCurrentAnnotationEditT);
+ $('.timeline-annotations .annotation span').hide();
+ $('#annotation-timeline-'+idAnnotation+' span').show();
}
//display annotation view
$('.list-current-annotations').on('click', 'a', function(e){
@@ -440,14 +442,24 @@
//timeline
var width = Math.floor(v.getDuration() * wTimeline / myMedia.duration),
left = Math.floor(v.begin * wTimeline / myMedia.duration),
- segment = $('<div>').css({
+ dataAnntim = {
+ left : left,
+ width : width,
+ color : v.color,
+ id : v.id
+ },
+ segment = getTemplate('#tpl-annotation-in-timeline');
+ segment = Mustache.render(segment, dataAnntim);
+
+ /*
+ segment = $('<a>').css({
left : left,
width : width,
backgroundColor : v.color
}).addClass('annotation')
.attr('data-id', v.id)
.attr('id', 'annotation-timeline-'+v.id);
-
+ */
var isInTimeline = false;
$.each(timeline.find('li'), function(a, b){
if(isInTimeline) return;
@@ -596,9 +608,14 @@
case 'audio':
break;
case 'video':
+ var labelModify = $(tabContent).find('.label-modify-video'),
+ labelAdd = $(tabContent).find('.label-add-video');
if(viewType.content.url != ""){
var videoWrap = $(tabContent).find('.annotation-video-content');
renderVideoInfo(videoWrap, viewType.content);
+ labelModify.show();
+ }else{
+ labelAdd.show();
}
break;
case 'text':
@@ -729,6 +746,12 @@
var videoWrap = $('#tab-annotation-'+currentAnnotation.id).find('.annotation-video-content');
renderVideoInfo(videoWrap, currentAnnotation.content);
+
+ var labelModify = $('#tab-annotation-'+currentAnnotation.id).find('.label-modify-video'),
+ labelAdd = $('#tab-annotation-'+currentAnnotation.id).find('.label-add-video');
+
+ labelModify.show();
+ labelAdd.hide();
});