--- a/integration/edition.html Mon Jun 10 17:48:05 2013 +0200
+++ b/integration/edition.html Mon Jun 10 18:02:41 2013 +0200
@@ -95,7 +95,7 @@
<div class="span6 chapitre-cut-wrap">
<div class="indicateur-chapter"></div>
<ul class="chapter-segments"></ul>
- <a href="#" class="btn btn-primary btn-cut-chapter"><i class="icon-flag"></i> <i class="icon-cut"></i><br/>
+ <a href="#" class="btn btn-primary btn-cut-chapter" title="Nouveau chapitre"><i class="icon-flag"></i> <i class="icon-cut"></i><br/>
<span class="info-time">0:00</span>
</a>
@@ -193,11 +193,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="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> Liens</a>
+ <a href="#" title="Son" data-type="audio" class="btn open-tab audio"><i class="icon-volume-up"></i> Son</a>
+ <a href="#" title="Vidéo" data-type="video" class="btn open-tab video"><i class="icon-film"></i> Vidéo</a>
+ <a href="#" title="Diaporama" data-type="slideshow" class="btn open-tab slideshow"><i class="icon-picture"></i> Diaporama</a>
+ <a href="#" title="Texte" data-type="text" class="btn open-tab text"><i class="icon-align-left"></i> Texte</a>
+ <a href="#" title="Lien" data-type="links" class="btn open-tab links"><i class="icon-link"></i> Liens</a>
</div>
</div>
<div class="list-annotation-wrap">
@@ -557,14 +557,14 @@
<div class="row">
<div class="span3 text-right">
- <label class="label-left" for="head-title">Titre :</label>
- <input class="label-left" id="head-title" type="text" placeholder="Titre de l'annotation.." name="title" value="{{title}}">
- <label class="label-left" for="head-description">Description :</label>
- <textarea id="head-description" name="description">{{description}}</textarea>
+ <label class="label-left" for="head-title-{{id}}">Titre :</label>
+ <input class="label-left head-title" id="head-title-{{id}}" type="text" placeholder="Titre de l'annotation.." name="title" value="{{title}}">
+ <label class="label-left" for="head-description-{{id}}">Description :</label>
+ <textarea id="head-description-{{id}}" name="description">{{description}}</textarea>
</div>
<div class="span3">
- <label for="head-tags">Tags :</label>
- <input id="head-tags" type="text" class="tag-it" data-type="annotation" value="{{keywords}}">
+ <label for="head-tags-{{id}}">Tags :</label>
+ <input id="head-tags-{{id}}" type="text" class="tag-it" data-type="annotation" value="{{keywords}}">
<table class="table text-right">
<thead>
<tr>
@@ -751,7 +751,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 class="control-group"><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>
--- a/integration/js/edition.js Mon Jun 10 17:48:05 2013 +0200
+++ b/integration/js/edition.js Mon Jun 10 18:02:41 2013 +0200
@@ -4,15 +4,26 @@
currentSlider = undefined,
secMiniChapter = 10;
+
+
+
$(function(){
+ var annotationsColors = {
+ 'video' : '#BE4477',
+ 'text' : '#5E90CB',
+ 'slideshow' : '#F69058',
+ 'audio' : '#63BE6C',
+ 'links' : '#8985BB'
+ }
+
var global = {
colorsIndex : 0,
colors :
- ['#1abc9c', '#3498db', '#9b59b6', '#2ecc71',
- '#f1c40f', '#ecf0f1', '#e67e22', '#e74c3c', '#95a5a6',
- '#16a085', '#2980b9', '#8e44ad', '#27ae60',
- '#f39c12', '#c0392b', '#bdc3c7', '#d35400', '#7f8c8d']
+ ['#FF6138', '#FFFF9D', '#BEEB9F', '#79BD8F', '#00A388',
+ '#1695A3', '#ACF0F2', '#F3FFE2', '#EB7F00', '#FF8000',
+ '#FFD933', '#CCCC52', '#8FB359', '#FFD393', '#F54F29'
+ ]
};
function getTemplate(idTpl){
@@ -38,6 +49,16 @@
//load Chapitre
chapters = chapterAnnType.getAnnotations();
+ if(!chapters.length){
+ var dataChapter = {
+ title : '',
+ begin : 0,
+ end : myMedia.duration,
+ description : '',
+ keywords : []
+ };
+ newChapter(dataChapter, true);
+ }
$.each(chapters, function(k, v){
v.color = getRandomColor();
});
@@ -58,7 +79,7 @@
var type = v.content.mimetype.split('-');
type = type[type.length-1]
v.type = type;
- v.color = getRandomColor();
+ v.color = annotationsColors[type];
});
renderAnnotation();
@@ -423,7 +444,7 @@
annotation.title = dataAnnotation.title;
annotation.description = dataAnnotation.description;
annotation.type = dataAnnotation.type;
- annotation.color = global.colors[(global.colorsIndex<global.colors.length) ? global.colorsIndex++ : (global.colorsIndex=0)];
+ annotation.color = annotationsColors[dataAnnotation.type];
annotation.keywords = dataAnnotation.keywords;
annotation.content = getContentAnnotationByType(dataAnnotation.type);
@@ -570,7 +591,7 @@
function openTab(type, data){
- var dataView;
+ var dataView, isNew = false;
if(_.isUndefined(data)){//nouveau
var currentTimePlusUnMin = 60 * 1000 + myMedia.currentTime,
@@ -585,6 +606,7 @@
};
dataView = newAnnotation(dataAnnotation);
renderAnnotation();
+ isNew = true;
}else{//édition
dataView = data;
}
@@ -603,6 +625,7 @@
currentSlider = $(tabContent).find(".slider-duration");
$(tabContent).find(".ui-slider-range.ui-widget-header.ui-corner-all").css('background', dataView.color);
$(tabContent).find('.tag-it').tagit(tagitParam);
+
//type
var viewType = {
id : idAnnotation,
@@ -678,6 +701,8 @@
$(".nav-tabs li:last-child").after(onglet);
$('a[href=#tab-annotation-'+idAnnotation+']').tab('show');
+
+ if(isNew){$(tabContent).find('.head-title').focus();}
}//openTab()
@@ -913,6 +938,22 @@
currentAnnotation.content.links = links;
disabledPreview();
}
+ $('.tab-content').on('focus', '.url-link', function(){
+ var td = $(this).parents('td');
+ if(td.hasClass('error')) td.removeClass('error')
+ });
+
+ $('.tab-content').on('blur', '.url-link', function(){
+ var url = $(this).val(),
+ td = $(this).parents('td');
+ if(!isValidLink(url)){
+ td.addClass('error');
+ }
+ });
+
+ function isValidLink(url){
+ return /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/.test(url);
+ }
//annotation audio
$('.tab-content').on('keyup', '.annotation-audio-content input, .annotation-audio-content textarea', function(){