--- a/integration/css/style.css Mon May 27 16:18:05 2013 +0200
+++ b/integration/css/style.css Mon May 27 17:48:17 2013 +0200
@@ -96,6 +96,9 @@
.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;}
.annotation-son-content textarea{max-width: 206px;}
+
+.annotation-links-content .links-form:nth-child(n+2){border-top:1px solid; padding-top: 20px;}
+
/* Tangle */
.time-tangle {
color: #2c3e50; cursor: w-resize; position: relative;
--- a/integration/edition.html Mon May 27 16:18:05 2013 +0200
+++ b/integration/edition.html Mon May 27 17:48:17 2013 +0200
@@ -31,9 +31,9 @@
</a>
<li><span class="divider">></span></li>
</li>
- <li class="active"><i class="icon-folder-close-alt"></i>Titre du projet azerty</li>
+ <li class="active"><i class="icon-folder-close-alt"></i> Titre du projet azerty</li>
<li><span class="divider">/</span></li>
- <a href=""><li class="active"><i class="icon-folder-close-alt"></i>Ressources</li></a>
+ <a href=""><li class="active"><i class="icon-folder-close-alt"></i> Ressources</li></a>
</ul>
</div>
</div>
@@ -171,11 +171,11 @@
<div class="add-annotation-wrap section">
<h4 class="title-section"><i class="icon-bookmark"></i> <i class="icon-plus"></i> Ajouter une annotation de type</h4>
<div class="text-center">
- <a href="#" title="Son" data-type="sound" class="btn open-tab"><i class="icon-volume-up"></i> Son</a>
+ <a href="#" title="Son" data-type="audio" class="btn open-tab"><i class="icon-volume-up"></i> Son</a>
<a href="#" title="Vidéo" data-type="video" class="btn open-tab"><i class="icon-film"></i> Vidéo</a>
<a href="#" title="Diaporama" data-type="slideshow" class="btn open-tab"><i class="icon-picture"></i> Diaporama</a>
<a href="#" title="Texte" data-type="text" class="btn open-tab"><i class="icon-align-left"></i> Texte</a>
- <a href="#" title="Lien" data-type="links" class="btn open-tab"><i class="icon-link"></i> Lien</a>
+ <a href="#" title="Lien" data-type="links" class="btn open-tab"><i class="icon-link"></i> Liens</a>
</div>
</div>
<div class="list-annotation-wrap">
@@ -264,6 +264,44 @@
</div>
</div>
</form>
+ <!-- Liens -->
+ <div class="edit-annotation-title row">
+ <h3 class="span3"><i class="icon-link"></i> Liens</h3>
+ </div>
+ <div class="row annotation-links-content">
+ <div class="span6">
+ <form class="form-horizontal">
+ <table class="table">
+ <thead>
+ <tr>
+ <th>URL</th>
+ <th>Titre du lien</th>
+ <th>Actions</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td><input class="input-medium" type="text" placeholder="http://"></td>
+ <td><input class="input-medium" type="text" placeholder="Titre du lien"></td>
+ <td>
+ <a class="btn" href="#"><i class="icon-trash"></i></a>
+ <a class="btn" href="#"><i class="icon-plus"></i></a>
+ </td>
+ </tr>
+ <tr>
+ <td><input class="input-medium" type="text" placeholder="http://"></td>
+ <td><input class="input-medium" type="text" placeholder="Titre du lien"></td>
+ <td>
+ <a class="btn" href="#"><i class="icon-trash"></i></a>
+ <a class="btn" href="#"><i class="icon-plus"></i></a>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </form>
+ </div>
+
+ </div>
<!-- Son -->
<div class="edit-annotation-title row">
<h3 class="span3"><i class="icon-volume-up"></i> Son</h3>
@@ -286,7 +324,7 @@
</form>
</div>
</div>
-
+
<!-- vidéo -->
<div class="edit-annotation-title row">
<h3 class="span3"><i class="icon-film"></i> Vidéo</h3>
@@ -445,7 +483,9 @@
</div>
</div><!-- /.container -->
</section>
- <footer></footer>
+ <footer>
+ <a href="#" class="log-annotations">Log annotations</a> - <a href="#" class="log-chapters">Log chapitres</a>
+ </footer>
</div>
<!-- modal -->
--- a/integration/js/edition.js Mon May 27 16:18:05 2013 +0200
+++ b/integration/js/edition.js Mon May 27 17:48:17 2013 +0200
@@ -520,7 +520,7 @@
//particularité selon type
switch(type){
- case 'sound':
+ case 'audio':
break;
case 'video':
break;
@@ -528,6 +528,8 @@
var cledit = $(tabContent).find('.wysiwyg').cleditor(wysiwygConfig)[0];
break;
case 'links':
+ var tbody = $(tabContent).find('tbody.links-rows');
+ addLinkRow(tbody);
break;
case 'slideshow':
$(tabContent).find('.number-spin').spin(spinParam);
@@ -551,7 +553,7 @@
function getIcon(type){
var icon;
switch(type){
- case 'sound': icon = 'volume-up';
+ case 'audio': icon = 'volume-up';
break;
case 'video': icon = 'film';
break;
@@ -631,7 +633,44 @@
}
-
+//links
+$('.tab-content').on('click', '.add-link', function(e){
+ e.preventDefault();
+ var tbody = $(this).parents('tfoot').siblings('tbody');
+ addLinkRow(tbody);
+});
+$('.tab-content').on('click', '.delete-link', function(e){
+ e.preventDefault();
+ var row = $(this).parents('tr'),
+ tbody = $(this).find('tbody');
+ row.remove();
+ updateLinks(tbody);
+});
+function addLinkRow(tbody, dataView){
+ $.get('template.html', function(templates){
+ //head commun à tous
+ var tplLinkRow = $(templates).filter('#tpl-links-row').html();
+ var output = Mustache.render(tplLinkRow, dataView);
+ tbody.append(output);
+ });
+}
+$('.tab-content').on('keyup', '.links-rows input', function(e){
+ var tbody = $(this).parents('.links-rows');
+ updateLinks(tbody);
+});
+function updateLinks(tbody){
+ links = new Array();
+ $.each(tbody.find('tr'), function(k, v){
+ var urlLink = $(v).find('.url-link').val(),
+ titleLink = $(v).find('.title-link').val(),
+ link = {
+ uri : urlLink,
+ title : titleLink
+ };
+ links.push(link);
+ });
+ currentAnnotation.content.links = links;
+}
//annotation html
@@ -736,9 +775,9 @@
function getContentAnnotationByType(type){
var content;
switch(type){
- case 'sound':
+ case 'audio':
content = {
- mimetype : "application/x-ldt-sound",
+ mimetype : "application/x-ldt-audio",
url : "",
embedcode : ""
};
@@ -794,4 +833,13 @@
$(".tag-it").tagit();
+$('.log-annotations').bind('click', function(e){
+ e.preventDefault();
+ console.log(annotations);
+});
+
+$('.log-chapters').bind('click', function(e){
+ e.preventDefault();
+ console.log(chapters);
+});
});//ready
\ No newline at end of file
--- a/integration/template.html Mon May 27 16:18:05 2013 +0200
+++ b/integration/template.html Mon May 27 17:48:17 2013 +0200
@@ -52,7 +52,7 @@
</li>
</script>
-<script id="tpl-sound" type="text/html">
+<script id="tpl-audio" type="text/html">
<div class="edit-annotation-title row">
<h3 class="span3"><i class="icon-volume-up"></i> Son</h3>
</div>
@@ -161,6 +161,39 @@
<div class="edit-annotation-title row">
<h3 class="span3"><i class="icon-link"></i> Liens</h3>
</div>
+<div class="row annotation-links-content">
+ <div class="span6">
+ <form class="form-horizontal">
+ <table class="table">
+ <thead>
+ <tr>
+ <th>URL</th>
+ <th>Titre du lien</th>
+ <th>Actions</th>
+ </tr>
+ </thead>
+ <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>
+ </tr>
+ </tfoot>
+ </table>
+ </form>
+ </div>
+</div>
+</script>
+
+<script id="tpl-links-row" type="text/html">
+<tr>
+ <td><input class="input-medium url-link" type="text" value="{{url}}" placeholder="http://"></td>
+ <td><input class="input-medium title-link" type="text" value="{{title}}" placeholder="Titre du lien"></td>
+ <td>
+ <a class="btn delete-link" href="#"><i class="icon-trash"></i> </a>
+ </td>
+</tr>
</script>
<script id="tpl-diaporama-row" type="text/html">