--- a/integration/css/style.css Fri Jun 07 12:41:45 2013 +0200
+++ b/integration/css/style.css Fri Jun 07 16:31:42 2013 +0200
@@ -49,7 +49,7 @@
.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{}
+.label-left{text-align: left; padding-left: 10px;}
.chapter-widget-info table{margin: 0; padding-top: 40px; }
.chapter-widget table td{}
.chapter-widget textarea:focus{height: 100px;}
@@ -61,9 +61,9 @@
.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;}
-.add-annotation-wrap, form.form-info-general-annotation{padding: 10px 0;}
-form.form-info-general-annotation ul.tagit {margin-left: 0px;width: 195px;}
-form.form-info-general-annotation textarea{min-height:100px; height: 100px;min-width: 196px;}
+.add-annotation-wrap, .form-info-general-annotation{padding: 10px 0;}
+.form-info-general-annotation ul.tagit {margin-left: 0px;width: 195px;}
+.form-info-general-annotation textarea{min-height:100px; height: 100px;min-width: 196px;}
.add-annotation-wrap {margin-bottom: 20px; padding-top: 0;}
@@ -107,8 +107,9 @@
.annotation-display-view{display:none;text-align:center; line-height:200px;background-color: #fff;position: absolute; width: 200px; margin-left: -100px; height: 200px; margin-top: -100px; top: 50%; left: 50%;}
.list-current-annotations{position: absolute;bottom: 40px; left: 20px; margin: 0;}
.list-current-annotations li{list-style: none; margin-top: 4px;}
-.list-current-annotations a{text-align:center; line-height:20px; color:#FFF;display: inline-block; background-color: #589; width: 20px; height: 20px; }
-.list-current-annotations a:hover{text-decoration: none;}
+.list-current-annotations a{text-decoration: none;line-height:20px; color:#202020;display: inline-block; background-color: #589; height: 20px; padding: 0 4px; }
+.list-current-annotations a span{display: none;}
+.list-current-annotations a:hover span{display: inline-block;}
.annotation-audio-content textarea{max-width: 206px;}
.annotation-links-content .links-form:nth-child(n+2){border-top:1px solid; padding-top: 20px;}
@@ -126,6 +127,13 @@
.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;}
+
+.shadow {
+ -moz-box-shadow: inset 0px 0px 2px 100px #00FFFF;
+ -webkit-box-shadow: inset 0px 0px 2px 100px #00FFFF;
+ box-shadow: inset 0px 0px 2px 100px #00FFFF;
+}
+
/* Tangle */
.time-tangle {
color: #2c3e50; cursor: w-resize; position: relative;
--- a/integration/edition.html Fri Jun 07 12:41:45 2013 +0200
+++ b/integration/edition.html Fri Jun 07 16:31:42 2013 +0200
@@ -527,11 +527,14 @@
<div class="row">
<div class="span3 text-right">
- <input type="text" placeholder="Titre de l'annotation.." name="title" value="{{title}}">
- <textarea id="" name="description">{{description}}</textarea>
+ <label class="label-left" for="head-title">Titre :</label>
+ <input class="label-left" id="head-title" type="text" placeholder="Titre de l'annotation.." name="title" value="{{title}}">
+ <label for="head-description">Description :</label>
+ <textarea id="head-description" name="description">{{description}}</textarea>
</div>
<div class="span3">
- <input type="text" class="tag-it" data-type="annotation" value="{{keywords}}">
+ <label for="head-tags">Tags :</label>
+ <input id="head-tags" type="text" class="tag-it" data-type="annotation" value="{{keywords}}">
<table class="table text-right">
<thead>
<tr>
@@ -552,6 +555,7 @@
</div>
<div class="row">
<div class="span6 text-center">
+ <label class="label-left">Durée :</label>
<div data-id="{{id}}" id="" class="slider-duration"></div>
</div>
<div class="span6 text-right">
@@ -772,7 +776,7 @@
</script>
<script id="tpl-list-annotation-row" type="text/html">
-<tr id="row-list-annotation-{{id}}" style="background-color : {{color}};">
+<tr data-id="{{id}}" id="row-list-annotation-{{id}}" style="background-color : {{color}};">
<td>{{title}}</td>
<td><i class="icon-{{iconTab}}"></i></td>
<td>{{begin}}</td>
@@ -789,7 +793,7 @@
</script>
<script id="tpl-chapter-row" type="text/html">
-<tr id="row-list-chapter-{{id}}" style="background-color : {{color}};">
+<tr class="row-list-chapter" data-id="{{id}}" id="row-list-chapter-{{id}}" style="background-color : {{color}};">
<td class="list-chapter-title">{{title}}</td>
<td class="list-chapter-tags">{{keywords}}</td>
<td class="begin">{{begin}}</td>
@@ -815,8 +819,10 @@
<h4><i class="icon-flag"></i> <i class="icon-pencil"></i> Modifier le chapitre</h4>
<div class="row">
<div class="span3 text-right">
- <input name="title" type="text" value="{{title}}">
- <input name="keywords" type="text" class="tag-it" data-type="chapter" value="{{keywords}}">
+ <label class="label-left" for="chapter-title">Titre :</label>
+ <input id="chapter-title" name="title" type="text" value="{{title}}">
+ <label class="label-left" for="chapter-keywords">Tags :</label>
+ <input id="chapter-keywords" name="keywords" type="text" class="tag-it" data-type="chapter" value="{{keywords}}">
</div>
<div class="span3">
<table class="table text-right">
@@ -830,7 +836,7 @@
<tbody>
<tr>
<td class="span1"><span {{#beginTangle}}class="time-tangle tangle-start begin" data-milliseconds="{{begin.milliseconds}}"{{/beginTangle}}>{{begin}}</span></td>
- <td class="span1"><span>{{getDuration}}</span></td>
+ <td class="span1"><span class="duration">{{getDuration}}</span></td>
<td class="span1"><span {{#endTangle}}class="time-tangle tangle-end end" data-milliseconds="{{end.milliseconds}}"{{/endTangle}}>{{end}}</span></td>
</tr>
</tbody>
@@ -839,7 +845,8 @@
</div>
<div class="row">
<div class="span6 text-center">
- <textarea class="" name="description" id="">{{description}}</textarea>
+ <label class="label-left" for="chapter-description">Description :</label>
+ <textarea class="" name="description" id="chapter-description">{{description}}</textarea>
</div>
</div>
<div class="row">
@@ -856,13 +863,18 @@
</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">
+<a title="{{title}}" style="left:{{left}}px; width:{{width}}px; background-color:{{color}};" data-id="{{id}}" id="annotation-timeline-{{id}}" class="annotation">
<i class="icon-pencil"></i> <span>{{title}}</span>
</a>
</script>
<script id="tpl-item-annotation-display" type="text/html">
-<li id="item-current-annotation-{{id}}" data-id="{{id}}"><a style="background-color: {{color}};" data-id="{{id}}" href="#" title="{{title}}"><i class="icon-align-left"></i></a></li>
+<li data-id="{{id}}">
+ <a id="item-current-annotation-{{id}}" class="item-display-annotation" data-id="{{id}}" style="background-color: {{color}};" data-id="{{id}}" href="#" title="{{title}}">
+ <i class="icon-{{iconTab}}"></i>
+ <span>{{title}}</span>
+ </a>
+</li>
</script>
</div><!-- /#templates -->
--- a/integration/js/edition.js Fri Jun 07 12:41:45 2013 +0200
+++ b/integration/js/edition.js Fri Jun 07 16:31:42 2013 +0200
@@ -1,6 +1,7 @@
var myMedia = undefined,
currentChapter = undefined,
- currentAnnotation = undefined;
+ currentAnnotation = undefined,
+ secMiniChapter = 10;
$(function(){
@@ -24,7 +25,27 @@
}
});
-$('.timeline-annotations').on('click', '.annotation', function(e){
+//survol
+$(document).on('mouseover', '.timeline-annotations .annotation, #list-annotations-rows tr, .item-display-annotation' , function(){
+ if(!$(this).hasClass('shadow')) {
+ var idAnnotation = $(this).attr('data-id');
+ $('#annotation-timeline-'+idAnnotation+', #row-list-annotation-'+idAnnotation+', #item-current-annotation-'+idAnnotation).addClass('shadow');
+ }
+});
+
+$(document).on('mouseover', '.chapter-segment, .row-list-chapter' , function(){
+ if(!$(this).hasClass('shadow')) {
+ var idChapter = $(this).attr('data-id');
+ $('#row-list-chapter-'+idChapter+', #'+idChapter).addClass('shadow');
+ }
+});
+
+$(document).on('mouseout', '.shadow' , function(){
+ $('.shadow').removeClass('shadow');
+});
+
+
+$(document).on('click', '.annotation, .item-display-annotation', function(e){
e.preventDefault();
var idAnnotation = $(this).attr('data-id'),
annotation = _.find(annotations, function(c){ return c.id == idAnnotation; });
@@ -130,6 +151,7 @@
currentAnnotationsDisplay.push(v.id);
if(!$('#item-current-annotation-'+v.id).length){
var itemAnnotation = getTemplate('#tpl-item-annotation-display');
+ v.iconTab = getIcon(v.type);
itemAnnotation = Mustache.render(itemAnnotation, v);
$('.list-current-annotations').append(itemAnnotation)
}
@@ -157,6 +179,7 @@
//display annotation view
$('.list-current-annotations').on('click', 'a', function(e){
e.preventDefault();
+ /*
var annotationDisplayView = $('.annotation-display-view'),
idAnnotation = $(this).attr('data-id');
var annotation = _.find(annotations, function(c){ return c.id == idAnnotation; });
@@ -170,6 +193,7 @@
.text(annotation.type+' : '+annotation.title)
.show();
}
+ */
});
//########### modal
@@ -335,11 +359,16 @@
$('.chapter-widget').on('click', '.btn-cut-chapter', function(e){
e.preventDefault();
-
+ var begin = myMedia.currentTime,
+ end = organizeNewChapter(myMedia.currentTime);
+ if(!end){
+ alert('Les chapitres doivent durer au moins '+secMiniChapter+' secondes');
+ return;
+ }
var dataChapter = {
title : 'New',
- begin : myMedia.currentTime,
- end : organizeNewChapter(myMedia.currentTime),
+ begin : begin,
+ end : end,
description : 'description',
keywords : ['tag1','tag2']
};
@@ -350,11 +379,12 @@
function organizeNewChapter(beginNew){
- var returnEnd;
+ var returnEnd = false;
$.each(chapters, function(k, v){
var begin = v.begin,
end = v.end;
- if(beginNew>=begin && beginNew<=end){
+
+ if(beginNew>=begin && beginNew<=end && end-beginNew>secMiniChapter*1000 && beginNew-begin>secMiniChapter*1000){
returnEnd = new IriSP.Model.Time(end);
v.setEnd(beginNew);
}
@@ -386,7 +416,9 @@
left : left,
width : width,
backgroundColor : v.color
- }).attr('id', v.id);
+ }).attr('id', v.id)
+ .attr('data-id', v.id)
+ .addClass('chapter-segment');
chapterSegmentWrap.append(segment);
@@ -516,6 +548,7 @@
var idAnnotation = $(this).parents('form').attr('data-id');
$('#onglet-title-'+idAnnotation).text(value);
$(this).parents('form').find('.btn-delete-annotation').attr('data-title', value);
+ $('#annotation-timeline-'+ idAnnotation).attr('title', value);
$('#annotation-timeline-'+ idAnnotation+' span').text(value);
}
});
--- a/integration/js/tangle.js Fri Jun 07 12:41:45 2013 +0200
+++ b/integration/js/tangle.js Fri Jun 07 16:31:42 2013 +0200
@@ -45,6 +45,7 @@
});
row.find('.begin').text(chapterData.begin);
+ console.log(chapterData.getDuration())
row.find('.duration').text(chapterData.getDuration());
row.find('.end').text(chapterData.end);
@@ -58,7 +59,8 @@
}
function updateChapterDuration(val, chapterBefore, chapterAfter){
- if (val<=chapterAfter.end && val>=chapterBefore.begin) {
+
+ if (val<=chapterAfter.end && val>=chapterBefore.begin && chapterAfter.end-val>secMiniChapter*1000 && val-chapterBefore.begin>secMiniChapter*1000) {
chapterAfter.setBegin(val);
chapterBefore.setEnd(val);
@@ -83,8 +85,10 @@
var chapterAfter = chapters[indexChapter+1],
chapterBefore = currentChapter;
+
+ updateChapterDuration(val, chapterBefore, chapterAfter);
+
- updateChapterDuration(val, chapterBefore, chapterAfter);
});
/*
$(".tangle-start")