# HG changeset patch
# User Anthony Ly <anthonyly.com@gmail.com>
# Date 1368787290 -7200
# Node ID abd04f346dbec021d995d9c0ae9823807dbe8b14
# Parent  16b482c153fd14cb9e3218d739de5a74fcacb701
delete row on enter key press  in modal

diff -r 16b482c153fd -r abd04f346dbe integration/css/style.css
--- 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
diff -r 16b482c153fd -r abd04f346dbe integration/edition.html
--- 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>
diff -r 16b482c153fd -r abd04f346dbe integration/js/common.js
--- 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');
diff -r 16b482c153fd -r abd04f346dbe integration/js/edition.js
--- 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
diff -r 16b482c153fd -r abd04f346dbe integration/template.html
--- 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