--- a/integration/css/style.css Tue Jun 11 10:43:19 2013 +0200
+++ b/integration/css/style.css Tue Jun 11 15:46:43 2013 +0200
@@ -75,25 +75,23 @@
.table td{vertical-align: middle;}
.table td td{padding: 1px; border: none;}
.table td td a{width: 12px;display: block;}
-.config-diaporama{color: #FFF;}
-.config-diaporama form{background-color: #34495e; padding: 4px 0; margin: 0; overflow: hidden; line-height: 28px;}
-.config-diaporama form label{display: inline-block; padding-left: 10px;}
-.config-diaporama form input{margin-bottom: 0;}
+.config-slideshow{color: #FFF;}
+.config-slideshow form{background-color: #34495e; padding: 4px 0; margin: 0; overflow: hidden; line-height: 28px;}
+.config-slideshow form label{display: inline-block; padding-left: 10px;}
+.config-slideshow form input{margin-bottom: 0;}
.edit-annotation-text textarea{max-width: 446px;}
-.wysiwyg-wrap{overflow: hidden; }
+.wysiwyg-wrap{overflow: hidden; padding: 0 0 2px 2px; }
.ui-slider-handle.ui-state-default.ui-corner-all{border-radius: 0;}
.edit-annotation-html textarea{max-width: 446px;width:446px; }
.close-tab{vertical-align: super; margin-left: 8px; color: #c0392b; cursor: pointer; font-size: 12px; line-height: 14px;}
.close-tab:hover{color:#2c3e50;}
.html-apercu{overflow: auto; margin-top: 10px;}
-.input-image-url{display: none;}
.slider-duration.ui-slider.ui-slider-horizontal.ui-widget.ui-widget-content.ui-corner-all{ background: #202020;}
.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{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, .timeline-annotations .annotation i{display: none;}
-.timeline-annotations .annotation:hover span,
+.annotation:hover span,
.annotation.editing span,
.annotation.editing i{display: inline;}
ul.tagit{margin-left: 10px;-webkit-border-radius: 0px;-moz-border-radius: 0px;border-radius: 0px;}
@@ -102,7 +100,6 @@
.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-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;}
@@ -110,17 +107,31 @@
td.begin, td.duration, td.end{max-width: 40px;}
td.image-slideshow-row img{width: 60px; height: 60px;}
.project-title-editor input{margin-bottom: 0;}
-#templates{display: none;}
.title-slideshow-row{word-wrap: break-word;width: 76px;}
.title-slideshow-row input{width: 70px;}
.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;}
-.shadow {background-color: #54D0ED !important;}
+
+a.open-tab{text-shadow:none;}
+a.open-tab:hover{background-color: #E6E6E6;}
+.open-tab.video{background-color: #BE4477;}
+.open-tab.text{background-color:#5E90CB;}
+.open-tab.slideshow{background-color:#F69058;}
+.open-tab.audio{background-color:#63BE6C;}
+.open-tab.links{background-color:#8985BB;}
+
+.input-image-url,
+.annotation span, .annotation i,
+.label-modify-video, .label-add-video,
+#templates,
+.list-current-annotations a span,
.alert-message,
.alert,
.links-rows .help-inline{display: none;}
+
+.shadow {background-color: #54D0ED !important;}
+
/* Tangle */
.time-tangle {color: #2c3e50; cursor: w-resize; position: relative;border-bottom: 1px dashed #2c3e50;}
.time-tangle:hover,
@@ -130,13 +141,6 @@
.time-tangle.deactivate:hover {border: none; color: #2c3e50;}
.time-tangle.deactivate:hover:after {display: none;}
-a.open-tab{text-shadow:none;}
-a.open-tab:hover{background-color: #E6E6E6;}
-.open-tab.video{background-color: #BE4477;}
-.open-tab.text{background-color:#5E90CB;}
-.open-tab.slideshow{background-color:#F69058;}
-.open-tab.audio{background-color:#63BE6C;}
-.open-tab.links{background-color:#8985BB;}
.loader {
background: url(../img/loader.gif) center no-repeat;
background-size: 25px 25px;
--- a/integration/edition.html Tue Jun 11 10:43:19 2013 +0200
+++ b/integration/edition.html Tue Jun 11 15:46:43 2013 +0200
@@ -124,7 +124,6 @@
<!-- tab -->
<ul class="nav nav-tabs" id="onglet-annotations">
<li class="active"><a data-toggle="list-annotations" id="tab-list-annotation" href="#list-annotations"><i class="icon-bookmark"></i> Annotations</a></li>
- <!--<li><a href="#annotation-azerty"><i class="icon-film"></i> All <span class="close-tab">×</span></a> </li>-->
</ul>
<div class="tab-content">
@@ -246,8 +245,8 @@
</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>
+ <label class="label-left" for="slider-{{id}}">Durée :</label>
+ <div data-id="{{id}}" id="slider-{{id}}" class="slider-duration"></div>
</div>
<div class="span6 text-right">
<a class="btn btn-danger btn-delete btn-delete-annotation" data-title="{{title}}" data-id="{{id}}" data-no-render>
@@ -301,27 +300,9 @@
<span class="span3">
<span class="label-add-video">Ajouter une vidéo <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>
<span class="label-modify-video">Modifier la vidéo <a data-id="annotation-{{id}}" data-type-media="video" data-title="Modifier la vidéo" class="btn btn-success open-modal" href="modal-bibliotheque-video.html" data-hide-add-new><i class="icon-pencil"></i></a></span>
-
</span>
</div>
-<div class="row annotation-video-content">
-
-</div>
-</script>
-
-<script id="tpl-html" type="text/html">
-<div class="edit-annotation-title row">
- <h3 class="span3"><i class="icon-link"></i> Html</h3>
-</div>
-<div class="row edit-annotation-html">
- <div class="span6">
- <textarea class="" name="" id="" cols="30" rows="10"></textarea>
- </div>
- <div class="span6 text-right">
- <a href="#" class="btn btn-html-apercu"><i class="icon-eye-open"></i> Aperçu</a>
- </div>
- <div class="html-apercu span6"></div>
-</div>
+<div class="row annotation-video-content"></div>
</script>
<script id="tpl-text" type="text/html">
@@ -330,7 +311,7 @@
</div>
<div class="row">
<div class="span6 wysiwyg-wrap">
- <textarea class="wysiwyg" name="" id="" cols="30" rows="10">{{content.text}}</textarea>
+ <textarea class="wysiwyg" cols="30" rows="10">{{content.text}}</textarea>
</div>
</div>
</script>
@@ -340,21 +321,21 @@
<h3 class="span3"><i class="icon-picture"></i> Diaporama</h3>
<span class="span3">
Ajouter une image
- <a data-type-media="image" data-diaporama="diaporama-{{id}}" data-title="Ajouter une image" class="btn btn-success open-modal" href="modal-bibliotheque-image.html" data-hide-add-new><i class="icon-plus"></i></a>
+ <a data-type-media="image" data-slideshow="slideshow-{{id}}" data-title="Ajouter une image" class="btn btn-success open-modal" href="modal-bibliotheque-image.html" data-hide-add-new><i class="icon-plus"></i></a>
</span>
</div>
-<div class="row config-diaporama">
- <form action="">
+<div class="row config-slideshow">
+ <form action="#">
<div class="span3">
- <label for="">Diaporama :</label>
+ <label>Diaporama :</label>
<div class="btn-group" data-toggle="buttons-radio">
<button type="button" data-autostart="false" class="{{^content.autostart}}active{{/content.autostart}} btn btn-primary btn-autostart">Manuel</button>
<button type="button" class="{{#content.autostart}}active{{/content.autostart}} btn btn-primary btn-autostart" data-autostart="true">Auto</button>
</div>
</div>
<div class="span3">
- <label for="">Durée image : </label>
- <input pattern="[0-9]*" class="span1 number-spin" type="text" name="duration" value="{{content.slideduration}}"> sec
+ <label for="duration-slideshow-{{id}}">Durée image : </label>
+ <input id="duration-slideshow-{{id}}" pattern="[0-9]*" class="span1 number-spin" type="text" name="duration" value="{{content.slideduration}}"> sec
</div>
</form>
</div>
@@ -369,8 +350,7 @@
<th>Actions</th>
</tr>
</thead>
- <tbody id="diaporama-{{id}}" class="list-image-diaporama ui-sortable">
-
+ <tbody id="slideshow-{{id}}" class="list-image-slideshow ui-sortable">
</tbody>
</table>
</div>
@@ -392,9 +372,7 @@
<th>Actions</th>
</tr>
</thead>
- <tbody data-id="{{id}}" class="links-rows">
-
- </tbody>
+ <tbody data-id="{{id}}" class="links-rows"></tbody>
<tfoot>
<tr>
<td colspan="3"><a class="btn btn-success add-link" href="#"><i class="icon-plus"></i> Ajouter un lien</a></td>
@@ -420,9 +398,9 @@
</tr>
</script>
-<script id="tpl-diaporama-row" type="text/html">
-<tr id="rid-{{ridid}}" class="row-image-diaporama">
- <td class="image-slideshow-row"><img data-url="{{url}}" src="{{url}}?width=60&height=60" alt=""> </td>
+<script id="tpl-slideshow-row" type="text/html">
+<tr id="rid-{{ridid}}" class="row-image-slideshow">
+ <td class="image-slideshow-row"><img data-url="{{url}}" src="{{url}}?width=60&height=60" alt="{{title}}"> </td>
<td class="title-slideshow-row" data-input="input" data-name="title">
<span>{{title}}</span> <i class="icon-pencil"></i>
</td>
@@ -449,24 +427,6 @@
<script id="tpl-video-row" type="text/html">
<div class="span6">
<div class="video-container"></div>
- <!--
- <table class="table">
- <tbody>
- <tr>
- <th>Titre</th>
- <td class="video-title-edit" data-input="input" data-name="title">
- <span>{{title}}</span> <i class="icon-pencil"></i>
- </td>
- </tr>
- <tr>
- <th>Description</th>
- <td class="video-description-edit" data-input="textarea" data-name="description">
- <span>{{description}}</span> <i class="icon-pencil"></i>
- </td>
- </tr>
- </tbody>
- </table>
- -->
</div>
</script>
@@ -514,10 +474,10 @@
<h4><i class="icon-flag"></i> <i class="icon-pencil"></i> Modifier le chapitre</h4>
<div class="row">
<div class="span3 text-right">
- <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}}">
+ <label class="label-left" for="chapter-title-{{id}}">Titre :</label>
+ <input id="chapter-title-{{id}}" class="chapter-title" name="title" type="text" value="{{title}}">
+ <label class="label-left" for="chapter-keywords-{{id}}">Tags :</label>
+ <input id="chapter-keywords-{{id}}" name="keywords" type="text" class="tag-it" data-type="chapter" value="{{keywords}}">
</div>
<div class="span3">
<table class="table text-right">
@@ -540,8 +500,8 @@
</div>
<div class="row">
<div class="span6 text-center">
- <label class="label-left" for="chapter-description">Description :</label>
- <textarea class="" name="description" id="chapter-description">{{description}}</textarea>
+ <label class="label-left" for="chapter-description-{{id}}">Description :</label>
+ <textarea name="description" id="{{title}}">{{description}}</textarea>
</div>
</div>
<div class="row">
@@ -598,15 +558,13 @@
var urlSaveProject = '';
-
/* Initialisation du metadataplayer avec un projet vide */
var myDir = new IriSP.Model.Directory(),
myProject = myDir.remoteSource({
- url: "data/rigoletto.json",
- serializer: IriSP.serializers.ldt
- });
+ url: "data/rigoletto.json",
+ serializer: IriSP.serializers.ldt
+ });
-
</script>
</body>
</html>
\ No newline at end of file
--- a/integration/js/edition.js Tue Jun 11 10:43:19 2013 +0200
+++ b/integration/js/edition.js Tue Jun 11 15:46:43 2013 +0200
@@ -130,7 +130,7 @@
$(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');
+ $('#tab-annotation-'+idAnnotation+', #annotation-timeline-'+idAnnotation+', #row-list-annotation-'+idAnnotation+', #item-current-annotation-'+idAnnotation).addClass('shadow');
}
});
@@ -350,7 +350,7 @@
renderChapter();
loadFormChapter(chapter.id);
disabledPreview();
- $('#chapter-title').focus();
+ $('.chapter-title').focus();
}
$('.chapter-widget').on('click', '.btn-cut-chapter', function(e){
@@ -392,8 +392,6 @@
}
function renderChapter(){
-
-
var chapterSegmentWrap = $('.chapter-segments'),
wChapterSegmentWrap = chapterSegmentWrap.width(),
chapterList = $('.list-chapter-rows-wrap');
@@ -521,7 +519,6 @@
segment = getTemplate('#tpl-annotation-in-timeline');
segment = Mustache.render(segment, dataAnntim);
-
var isInTimeline = false;
$.each(timeline.find('li'), function(a, b){
if(isInTimeline) return;
@@ -716,11 +713,11 @@
currentAnnotation.content.images.move(oldIndex, newIndex);
},
});
- var diaporama = $(tabContent).find('#diaporama-'+idAnnotation),
+ var slideshow = $(tabContent).find('#slideshow-'+idAnnotation),
images = viewType.content.images;
if(images.length){
$.each(images, function(k,v){
- addImageToDiaporama(diaporama, v);
+ addImageToSlideshow(slideshow, v);
});
}
break;
@@ -844,17 +841,17 @@
};
currentAnnotation.content.images.push(image);
- var listDiaporama = $('#diaporama-'+currentAnnotation.id);
- addImageToDiaporama(listDiaporama, image);
+ var listSlideshow = $('#slideshow-'+currentAnnotation.id);
+ addImageToSlideshow(listSlideshow, image);
$('.popup').modal('hide');
disabledPreview();
});
- function addImageToDiaporama(diaporama, dataView){
- var tplDiapo = getTemplate('#tpl-diaporama-row');
+ function addImageToSlideshow(slideshow, dataView){
+ var tplDiapo = getTemplate('#tpl-slideshow-row');
tplDiapo = Mustache.render(tplDiapo, dataView);
- diaporama.append(tplDiapo);
- disabledBtnSortable(diaporama);
+ slideshow.append(tplDiapo);
+ disabledBtnSortable(slideshow);
};
//edit
@@ -876,7 +873,7 @@
var newValue = $(this).val(),
name = $(this).attr('name'),
span = $('<span>').html(newValue),
- indexRow = $(this).parents('.row-image-diaporama').index();
+ indexRow = $(this).parents('.row-image-slideshow').index();
$(this).replaceWith(span);
currentAnnotation.content.images[indexRow][name] = newValue;
disabledPreview();
@@ -894,9 +891,9 @@
//button up / down
$(document).on('click', '.ui-sortable .btn-sort', function(e){
e.preventDefault();
- var row = $(this).parents('tr.row-image-diaporama'),
+ var row = $(this).parents('tr.row-image-slideshow'),
oldIndex = row.index(),
- listDiaporama = $(this).parents('.list-image-diaporama');
+ listSlideshow = $(this).parents('.list-image-slideshow');
if($(this).hasClass('down'))
row.insertAfter(row.next());
@@ -906,20 +903,20 @@
var newIndex = row.index();
currentAnnotation.content.images.move(oldIndex, newIndex);
- disabledBtnSortable(listDiaporama);
+ disabledBtnSortable(listSlideshow);
disabledPreview();
});
- function disabledBtnSortable(listDiaporama){
- listDiaporama.find('.btn-sort.disabled').removeClass('disabled');
- listDiaporama.find('tr.row-image-diaporama:first-child').find('.btn-sort.up').addClass('disabled');
- listDiaporama.find('tr.row-image-diaporama:last-child').find('.btn-sort.down').addClass('disabled');
+ function disabledBtnSortable(listSlideshow){
+ listSlideshow.find('.btn-sort.disabled').removeClass('disabled');
+ listSlideshow.find('tr.row-image-slideshow:first-child').find('.btn-sort.up').addClass('disabled');
+ listSlideshow.find('tr.row-image-slideshow:last-child').find('.btn-sort.down').addClass('disabled');
}
//delete image on slideshow
$('.tab-content').on('click','.btn-delete-image', function(e){
e.preventDefault();
- var rowImage = $(this).parents('tr.row-image-diaporama'),
+ var rowImage = $(this).parents('tr.row-image-slideshow'),
index = rowImage.index();
rowImage.remove();
@@ -1007,7 +1004,7 @@
});
//duration
- $('.tab-content').on('change keyup', '.config-diaporama input[name=duration]', function(){
+ $('.tab-content').on('change keyup', '.config-slideshow input[name=duration]', function(){
var value = $(this).val();
if(!isNaN(value)){
disabledPreview();
@@ -1338,7 +1335,7 @@
});//ready
-/* Utility */
+/* Utilitys */
Array.prototype.move = function (old_index, new_index) {
if (new_index >= this.length) {