--- a/integration/css/style.css Thu May 16 18:03:54 2013 +0200
+++ b/integration/css/style.css Fri May 17 12:41:30 2013 +0200
@@ -51,8 +51,7 @@
.btn-cut-chapter{position: absolute;bottom: 0;left: 11px;}
.indicateur-chapter{z-index:100; left:10px; width: 1px; height: 100%;background-color: #e74c3c; position: absolute;}
.chapter-segments {width: 100%; height: 20px; background-color: #856; margin: 0;}
-.chapter-segments li{ width:50%; background-color: #f1c40f;float: left; list-style: none; line-height: 20px; height: 20px; text-align: center;}
-.chapter-segments li:last-child{background-color: #27ae60;}
+.chapter-segments li{float: left; list-style: none; line-height: 20px; height: 20px; text-align: center;}
.list-chapter-wrap{background-color: #3498db;}
.list-chapter-wrap h4{padding: 10px; border-bottom: 1px solid; margin-bottom: 10px;}
.add-annotation-wrap, form.form-info-general-annotation{padding: 10px 0; background-color: #1abc9c;}
@@ -80,4 +79,7 @@
.html-apercu{overflow: auto; margin-top: 10px;}
.input-image-url{display: none;}
.timeline-annotation-widget{width: 460px;height: 40px;background-color: #ecf0f1; position: relative;}
-.timeline-annotation-widget .annotation{width: 10px; height: 10px; background-color: #c0392b; position: absolute; top:15px;}
\ No newline at end of file
+.timeline-annotation-widget .annotation{width: 10px; height: 10px; background-color: #c0392b; position: absolute; top:15px;}
+ul.tagit{margin-left: 10px;-webkit-border-radius: 0px;
+-moz-border-radius: 0px;
+border-radius: 0px;}
\ No newline at end of file
--- a/integration/edition.html Thu May 16 18:03:54 2013 +0200
+++ b/integration/edition.html Fri May 17 12:41:30 2013 +0200
@@ -66,10 +66,7 @@
<div class="span6 chapitre-cut-wrap">
<div class="indicateur-chapter"></div>
- <ul class="chapter-segments">
- <li>chapitre 1</li>
- <li>chapitre azerty</li>
- </ul>
+ <ul class="chapter-segments"></ul>
<a href="#" class="btn btn-primary btn-cut-chapter"><i class="icon-flag"></i> Nouveau chapitre</a>
</div>
@@ -78,12 +75,14 @@
<form action="#" class="form-chapter-edit">
<div class="row">
<div class="span3 text-right">
- <input type="text">
- <input type="text" class="tag-it">
+ <input name="title" type="text">
+ <input name="tags" type="text" class="tag-it">
</div>
<div class="span3">
+ <input type="hidden" name="begin">
+ <input type="hidden" name="duration">
+ <input type="hidden" name="end">
<table class="table text-right">
-
<thead>
<tr>
<th class="span1">Début</th>
@@ -93,9 +92,9 @@
</thead>
<tbody>
<tr>
- <td class="span1">4:20</td>
- <td class="span1">4:20</td>
- <td class="span1">4:20</td>
+ <td class="span1 begin">4:20</td>
+ <td class="span1 duration">4:20</td>
+ <td class="span1 end">4:20</td>
</tr>
</tbody>
</table>
@@ -103,7 +102,7 @@
</div>
<div class="row">
<div class="span6 text-center">
- <textarea class="" name="" id=""></textarea>
+ <textarea class="" name="description" id=""></textarea>
</div>
</div>
</form>
@@ -122,6 +121,7 @@
</tr>
</thead>
<tbody class="list-chapter-rows-wrap">
+ <!--
<tr id="row-list-chapter-id1">
<td>Titre d'un chapitre</td>
<td>Tags, Tags, Tags</td>
@@ -141,6 +141,7 @@
</table>
</td>
</tr>
+ -->
</tbody>
</table>
</div>
--- a/integration/js/common.js Thu May 16 18:03:54 2013 +0200
+++ b/integration/js/common.js Fri May 17 12:41:30 2013 +0200
@@ -44,11 +44,15 @@
var titleMedia = $(this).attr('data-title'),
textModal = $('<p>Êtes-vous sûr de vouloir supprimer <strong>'+titleMedia+'</strong> ?</p>'),
eltDelete = $(this).attr('href');
- $("#modal-confirm #btn-delete-modal").attr('data-id-elt-delete', eltDelete);
+ $("#modal-confirm #btn-delete-modal").attr('data-id-elt-delete', eltDelete).focus();
$("#modal-confirm .modal-body").empty().append(textModal);
$("#modal-confirm").modal('show');
});
+ $("#modal-confirm").on('shown', function() {
+ $("#modal-confirm #btn-delete-modal").focus()
+ });
+
$("#modal-confirm").on('click', '#btn-delete-modal', function(e){
e.preventDefault();
var idEltDelete = $(this).attr('data-id-elt-delete');
--- a/integration/js/edition.js Thu May 16 18:03:54 2013 +0200
+++ b/integration/js/edition.js Fri May 17 12:41:30 2013 +0200
@@ -2,9 +2,12 @@
var global = {
diaporama : null,
- idAnnotation : null
+ idAnnotation : null,
+ beginCurrentChapter : 0,
+ mediaDuration : 0,
+ colors : ['#1abc9c', '#3498db', '#9b59b6', '#f1c40f', '#e67e22', '#e74c3c']
},
-chapitres = [],
+chapters = [],
annotations = [];
myProject.onLoad(function() {
@@ -13,6 +16,8 @@
myMedia = myProject.getCurrentMedia();
+ loadChapters();
+
IriSP.htmlPlayer(
myMedia,
$(".main-video"),
@@ -26,9 +31,12 @@
myMedia.on("timeupdate", function(t) {
+ //init
+ global.mediaDuration = myMedia.duration.milliseconds;
+
//curseur chapitre
- var pos = $(".chapitre-cut-wrap").width() * t / myMedia.duration,
- wContainer = $('.chapitre-cut-wrap').width(),
+ var wContainer = $('.chapitre-cut-wrap').width() - 1,
+ pos = wContainer * t / myMedia.duration,
btnCutChapter = $('.btn-cut-chapter'),
wBtnCutChapter = btnCutChapter.outerWidth();
@@ -38,7 +46,25 @@
}else{
btnCutChapter.css("left",pos);
}
-
+
+ //chapitre edit
+ var formChapter = $('.form-chapter-edit'),
+ inputBeginChapter = formChapter.find('input[name=begin]'),
+ inputDurationChapter = formChapter.find('input[name=duration]'),
+ inputEndChapter = formChapter.find('input[name=end]'),
+ viewBeginChapter = formChapter.find('.begin'),
+ viewDurationChapter = formChapter.find('.duration'),
+ viewEndChapter = formChapter.find('.end'),
+ timeBegin = global.beginCurrentChapter,
+ timeEnd = t.milliseconds,
+ timeDuration = timeEnd - timeBegin;
+
+ inputBeginChapter.val(timeBegin);
+ inputEndChapter.val(timeEnd);
+ inputDurationChapter.val(timeDuration);
+ viewBeginChapter.html(millisecondsToString(timeBegin));
+ viewDurationChapter.html(millisecondsToString(timeDuration));
+ viewEndChapter.html(millisecondsToString(timeEnd));
});//timeupdate
});//myProject.onLoad
@@ -143,6 +169,7 @@
var tpl = $(templates).filter('#tpl-chapter-edit').html();
var tpl = Mustache.render(tpl, viewChapter);
$('.form-chapter-edit').empty().append(tpl);
+ $('.form-chapter-edit').find('.tag-it').tagit();
});
});
//nouveau chapitre
@@ -150,20 +177,97 @@
e.preventDefault();
var uniqId = 'id' + (new Date()).getTime();
- $.get('template.html', function(templates){
- var viewChapterRow = {
- id : uniqId
- };
- var tpl = $(templates).filter('#tpl-chapter-row').html();
- var tpl = Mustache.render(tpl, viewChapterRow);
- $('.list-chapter-rows-wrap').append(tpl);
- });
+
+ var formChapter = $('.form-chapter-edit'),
+ title = formChapter.find('input[name=title]').val(),
+ tags = formChapter.find('input[name=tags]').val(),
+ begin = formChapter.find('input[name=begin]').val(),
+ duration = formChapter.find('input[name=duration]').val(),
+ end = formChapter.find('input[name=end]').val(),
+ beginString = millisecondsToString(begin),
+ durationString = millisecondsToString(duration),
+ endString = millisecondsToString(end),
+ description = formChapter.find('textarea[name=description]').val(),
+ id = uniqId;
+
+ var dataChapter = {
+ title : title,
+ tags : tags,
+ begin : begin,
+ duration : duration,
+ end : end,
+ description : description,
+ beginString : beginString,
+ durationString : durationString,
+ endString : endString,
+ id : id
+ };
+
+ addChapter(dataChapter);
});
- function addChapter(data){
+ function addChapter(dataChapter){
+ chapters.push(dataChapter);
+
+ //vue liste chapitre
+ $.get('template.html', function(templates){
+ var tplChapterRow = $(templates).filter('#tpl-chapter-row').html();
+ tplChapterRow = Mustache.render(tplChapterRow, dataChapter);
+ $('.list-chapter-rows-wrap').append(tplChapterRow);
+
+ updateChapterSegments();
+ });
}
+ function updateChapterSegments(){
+ var chapterSegmentWrap = $('.chapter-segments'),
+ wChapterSegmentWrap = chapterSegmentWrap.width();
+ chapterSegmentWrap.empty();
+
+ $.each(chapters, function(k, v){
+ var chapter = v,
+ color = global.colors[k],
+ width = chapter.duration * wChapterSegmentWrap / global.mediaDuration,
+ segment = $('<li>'+chapter.title+'</li>').css({
+ width : width,
+ backgroundColor : color
+ }).attr('id', chapter.id);
+ chapterSegmentWrap.append(segment)
+ });
+ }
+
+ function loadChapters(){
+ //nouveau projet, 1 chapitre
+ var uniqId = 'id' + (new Date()).getTime();
+
+ var title = 'chapitre 1',
+ tags = 'tag1,tag2',
+ begin = 0,
+ duration = myMedia.duration.milliseconds,
+ end = myMedia.duration.milliseconds,
+ beginString = millisecondsToString(begin),
+ durationString = millisecondsToString(duration),
+ endString = millisecondsToString(end),
+ description = 'description du chapitre 1',
+ id = uniqId;
+
+ var dataChapter = {
+ title : title,
+ tags : tags,
+ begin : begin,
+ duration : duration,
+ end : end,
+ description : description,
+ beginString : beginString,
+ durationString : durationString,
+ endString : endString,
+ id : id
+ };
+
+ addChapter(dataChapter);
+ }
+
//edit annotation
$('#list-annotations').on('click', 'a.btn-edit-annotation', function(e){
e.preventDefault();
@@ -410,4 +514,6 @@
$('#annotation-tab a:last-child').tab('show');
+$(".tag-it").tagit();
+
});//ready
\ No newline at end of file
--- a/integration/template.html Thu May 16 18:03:54 2013 +0200
+++ b/integration/template.html Fri May 17 12:41:30 2013 +0200
@@ -184,16 +184,16 @@
<script id="tpl-chapter-row" type="text/html">
<tr id="row-list-chapter-{{id}}">
- <td>Titre chapitre</td>
- <td>Tags, Tags, Tags</td>
- <td>79:55</td>
- <td>79:55</td>
- <td>79:55</td>
+ <td>{{title}}</td>
+ <td>{{tags}}</td>
+ <td>{{beginString}}</td>
+ <td>{{durationString}}</td>
+ <td>{{endString}}</td>
<td>
<table>
<tr>
<td>
- <a href="" class="btn edit-chapter"><i class="icon-pencil"></i></a>
+ <a href="#" class="btn edit-chapter"><i class="icon-pencil"></i></a>
</td>
<td>
<a data-title="Chapitre 1" href="#row-list-chapter-{{id}}" class="btn btn-delete"><i class="icon-trash delete-annotation"></i></a>
@@ -207,12 +207,14 @@
<script id="tpl-chapter-edit" type="text/html">
<div class="row">
<div class="span3 text-right">
- <input type="text" value="{{titre}}">
- <input type="text" value="{{tags}}">
+ <input name="title" type="text" value="{{title}}">
+ <input name="tags" type="text" class="tag-it" value="{{tags}}">
</div>
<div class="span3">
+ <input type="hidden" name="begin" value="{{begin}}">
+ <input type="hidden" name="duration" value="{{duration}}">
+ <input type="hidden" name="end" value="{{end}}">
<table class="table text-right">
-
<thead>
<tr>
<th class="span1">Début</th>
@@ -222,9 +224,9 @@
</thead>
<tbody>
<tr>
- <td class="span1">4:20</td>
- <td class="span1">4:20</td>
- <td class="span1">4:20</td>
+ <td class="span1 begin"></td>
+ <td class="span1 duration"></td>
+ <td class="span1 end"></td>
</tr>
</tbody>
</table>
@@ -232,7 +234,7 @@
</div>
<div class="row">
<div class="span6 text-center">
- <textarea name="">{{description}}</textarea>
+ <textarea class="" name="description" id="">{{description}}</textarea>
</div>
</div>
</script>
\ No newline at end of file