show data annotations on tab open
authorAnthony Ly <anthonyly.com@gmail.com>
Tue, 28 May 2013 11:39:25 +0200
changeset 49 06627f23df42
parent 48 827066f875c7
child 50 494847cf2641
show data annotations on tab open
integration/css/style.css
integration/edition.html
integration/js/edition.js
integration/template.html
--- a/integration/css/style.css	Mon May 27 17:48:17 2013 +0200
+++ b/integration/css/style.css	Tue May 28 11:39:25 2013 +0200
@@ -95,7 +95,7 @@
 .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;}
-.annotation-son-content textarea{max-width: 206px;}
+.annotation-audio-content textarea{max-width: 206px;}
 
 .annotation-links-content .links-form:nth-child(n+2){border-top:1px solid; padding-top: 20px;}
 
--- a/integration/edition.html	Mon May 27 17:48:17 2013 +0200
+++ b/integration/edition.html	Tue May 28 11:39:25 2013 +0200
@@ -306,7 +306,7 @@
 								<div class="edit-annotation-title row">
 									<h3 class="span3"><i class="icon-volume-up"></i> Son</h3>
 								</div>
-								<div class="row annotation-son-content">
+								<div class="row annotation-audio-content">
 										<div class="span6">
 											<form class="form-horizontal">
 												<div class="control-group">
--- a/integration/js/edition.js	Mon May 27 17:48:17 2013 +0200
+++ b/integration/js/edition.js	Tue May 28 11:39:25 2013 +0200
@@ -137,11 +137,14 @@
     //video
     $('.popup').on('click', '.bibliotheque-video a', function(e){
         e.preventDefault();
+
+        var url = $(this).attr('href');
+        currentAnnotation.content.url = url;
+
         $('.popup').modal('hide');
         $.get('template.html', function(templates){
             var videoWrap = $('#tab-'+global.idAnnotation).find('.annotation-video-content'),
                 tplVideo = $(templates).filter('#tpl-video-row').html();
-                console.log(videoWrap)
             videoWrap.empty().append(tplVideo);
         });
         
@@ -505,6 +508,7 @@
         currentAnnotation = _.find(annotations, function(c){ return c.id == idAnnotation; });
 
         $.get('template.html', function(templates){
+
             //head commun à tous
             var tplHead = $(templates).filter('#tpl-head').html();
             var output = Mustache.render(tplHead, dataView);
@@ -512,8 +516,12 @@
             $(tabContent).find(".slider-duration").slider(configSlider(dataView));
             $(tabContent).find('.tag-it').tagit(tagitParam);
             //type
-            var viewType = {id : idAnnotation};
+            var viewType = {
+                id : idAnnotation,
+                content : dataView.content
+            };
             var tpl = $(templates).filter('#tpl-'+type).html();
+
             tpl = Mustache.render(tpl, viewType);
             $(tabContent).append(tpl);
             $('.tab-content').append(tabContent);
@@ -523,14 +531,29 @@
                 case 'audio':
                     break;
                 case 'video':
+                    
+                    if(viewType.content.url != ""){
+                        var videoWrap = $(tabContent).find('.annotation-video-content'),
+                            tplVideo = $(templates).filter('#tpl-video-row').html();
+                        videoWrap.empty().append(tplVideo);
+                    }
+
                     break;
                 case 'text': 
                     var cledit = $(tabContent).find('.wysiwyg').cleditor(wysiwygConfig)[0];
                     break;
                 case 'links': 
-                    var tbody = $(tabContent).find('tbody.links-rows');
-                    addLinkRow(tbody);
+                    var tbody = $(tabContent).find('tbody.links-rows'),
+                        links = viewType.content.links;
+                    if(links.length){
+                        $.each(links, function(k,v){
+                            addLinkRow(tbody, v);
+                        });
+                    }else{//il n'y a pas de lien on en ajoute 1
+                        addLinkRow(tbody);
+                    }
                     break;
+
                 case 'slideshow': 
                     $(tabContent).find('.number-spin').spin(spinParam);
                     $(tabContent).find('.ui-sortable').sortable({
@@ -674,6 +697,7 @@
 
 
 //annotation html
+/*
 $('.tab-content').on('click', '.btn-html-apercu', function(e){
     e.preventDefault();
 
@@ -682,15 +706,15 @@
 
     apercuWrap.empty().html(htmlTextarea.val());
 });
-
-//annotation texte
-$(document).on('keyup', ".cleditorMain iframe", function(){
+*/
 
-    var v = $(this).text(); // or .html() if desired
-    $('#x').html(v);
+//annotation audio
+$('.tab-content').on('keyup', '.annotation-audio-content input, .annotation-audio-content textarea', function(){
+    var name = $(this).attr('name'),
+        value = $(this).val();
+
+    currentAnnotation.content[name] = value;
 });
-//annotation > diaporama (spin)
-
 
 //################ config
 
@@ -730,11 +754,11 @@
     docType:      '<!DOCTYPE HTML>',
     bodyStyle:    "margin:0; font-family: 'Helvetica Neue',​Helvetica,​Arial,​sans-serif;",
     updateTextArea : function(text){
-
+        currentAnnotation.content.text = text;
         return text;
     },
     updateFrame: function(text){
-  
+        currentAnnotation.content.text = text;
         return text;
     }
 };
@@ -793,13 +817,12 @@
             content = {
                 mimetype : "application/x-ldt-text",
                 markup : "html",
-                text : ""
+                text : "azerty"
             };
             break;
         case 'links': 
             content = {
                 mimetype : "application/x-ldt-links",
-                markup : "html",
                 links : []
             };
             break;
@@ -817,7 +840,7 @@
 
 
 //test
-a = $(".wysiwyg").cleditor(wysiwygConfig);
+//a = $(".wysiwyg").cleditor(wysiwygConfig);
 
 
 $('.number-spin').spin(spinParam);
@@ -835,11 +858,11 @@
 
 $('.log-annotations').bind('click', function(e){
     e.preventDefault();
-    console.log(annotations);
+    console.log(annotations.length + ' annotations', annotations);
 });
 
 $('.log-chapters').bind('click', function(e){
     e.preventDefault();
-    console.log(chapters);
+    console.log(chapters.length + ' chapitres',chapters);
 });
 });//ready
\ No newline at end of file
--- a/integration/template.html	Mon May 27 17:48:17 2013 +0200
+++ b/integration/template.html	Tue May 28 11:39:25 2013 +0200
@@ -56,19 +56,19 @@
 <div class="edit-annotation-title row">
 	<h3 class="span3"><i class="icon-volume-up"></i> Son</h3>
 </div>
-<div class="row annotation-son-content">
+<div class="row annotation-audio-content">
 		<div class="span6">
 			<form class="form-horizontal">
 				<div class="control-group">
-					<label class="control-label" for="url-source">URL source :</label>
+					<label class="control-label" for="url-source-{{id}}">URL source :</label>
 					<div class="controls">
-						<input type="text" id="url-source" placeholder="http://">
+						<input type="text" value="{{content.url}}" name="url" id="url-source-{{id}}" placeholder="http://">
 					</div>
 				</div>
 				<div class="control-group">
-					<label class="control-label" for="embed">Code embed :</label>
+					<label class="control-label" for="embed-{{id}}">Code embed :</label>
 					<div class="controls">
-						<textarea name="" id="embed" cols="30" rows="10"></textarea>
+						<textarea name="embedcode" id="embed-{{id}}" cols="30" rows="10">{{content.embedcode}}</textarea>
 					</div>
 				</div>
 			</form>
@@ -110,7 +110,7 @@
 </div>
 <div class="row">
 	<div class="span6 wysiwyg-wrap">
-		<textarea class="wysiwyg" name="" id="" cols="30" rows="10"></textarea>
+		<textarea class="wysiwyg" name="" id="" cols="30" rows="10">{{content.text}}</textarea>
 	</div>
 </div>
 </script>
@@ -188,7 +188,7 @@
 
 <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 url-link" type="text" value="{{uri}}" 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>