| author | Anthony Ly <anthonyly.com@gmail.com> |
| Fri, 31 May 2013 17:32:56 +0200 | |
| changeset 62 | 42919bf5d4e1 |
| parent 58 | 9e14b6f964fe |
| child 63 | 55b26d1c32ef |
| integration/css/style.css | file | annotate | diff | comparison | revisions | |
| integration/edition.html | file | annotate | diff | comparison | revisions | |
| integration/js/edition.js | file | annotate | diff | comparison | revisions | |
| integration/template.html | file | annotate | diff | comparison | revisions |
--- a/integration/css/style.css Wed May 29 18:14:23 2013 +0200 +++ b/integration/css/style.css Fri May 31 17:32:56 2013 +0200 @@ -82,9 +82,10 @@ .close-tab:hover{color:#2c3e50;} .html-apercu{overflow: auto; margin-top: 10px;} .input-image-url{display: none;} -.timeline-annotations-wrap{position: relative;background-color: #ecf0f1;} -.timeline-annotations{width: 460px;height: 40px; position: relative;} -.timeline-annotations .annotation{width: 10px; height: 10px; background-color: #c0392b; position: absolute; top:15px;} +.timeline-annotations-wrap{position: relative;background-color: #202020;} +.timeline-annotations{width: 460px;height: auto; position: relative; margin: 0; padding: 10px 0;} +.timeline-annotations li{display: block; width: 460px;height: 10px; position: relative;} +.timeline-annotations .annotation{width: 10px; height: 10px; background-color: #c0392b; position: absolute; top:0px;} ul.tagit{margin-left: 10px;-webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px;} @@ -104,6 +105,8 @@ 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;} /* Tangle */ .time-tangle { color: #2c3e50; cursor: w-resize; position: relative;
--- a/integration/edition.html Wed May 29 18:14:23 2013 +0200 +++ b/integration/edition.html Fri May 31 17:32:56 2013 +0200 @@ -31,7 +31,7 @@ </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> <span class="project-title-nav">Titre du projet azerty</span></li> <li><span class="divider">/</span></li> <a href=""><li class="active"><i class="icon-folder-close-alt"></i> Ressources</li></a> </ul> @@ -43,10 +43,12 @@ <div class="container"> <div class="row project-head"> <div class="span7"> + <div class="project-title-editor"> <i class="icon-folder-close-alt"></i> - <a href="#" class="_popover" data-toggle="tooltip" data-placement="bottom" title="Modifier le du projet"><span class="project-title">Titre du projet</span> <i class="icon-pencil"></i></a> + <span class="project-title">Titre du projet</span> <i class="icon-pencil"></i> </div> + </div> <div class="span5 text-right project-action"> <a href="" class="btn"><i class="icon-eye-open"></i> Voir aperçu</a> @@ -66,7 +68,10 @@ </div> <div class="timeline-annotations-wrap"> <div class="indicateur-annotation"></div> - <div class="timeline-annotations"></div> + <!--<div class="timeline-annotations"></div>--> + <ul class="timeline-annotations"> + + </ul> </div> <!-- chapter-widget --> <div class="chapter-widget"> @@ -515,6 +520,318 @@ </div> </div> +<div id="templates"> +<script id="tpl-head" type="text/html"> +<form action="#" class="form-info-general-annotation" style="background-color:{{color}}" data-id="{{id}}"> + + <div class="row"> + <div class="span3 text-right"> + <input type="text" placeholder="Titre de l'annotation.." name="title" value="{{title}}"> + <textarea id="" name="description">{{description}}</textarea> + </div> + <div class="span3"> + <input type="text" class="tag-it" data-type="annotation" value="{{keywords}}"> + <table class="table text-right"> + <thead> + <tr> + <th class="span1">Début</th> + <th class="span1">Durée</th> + <th class="span1">Fin</th> + </tr> + </thead> + <tbody> + <tr> + <td id="{{id}}-begin" class="span1">{{begin}}</td> + <td id="{{id}}-duration" class="span1">{{getDuration}}</td> + <td id="{{id}}-end" class="span1">{{end}}</td> + </tr> + </tbody> + </table> + </div> + </div> + <div class="row"> + <div class="span6 text-center"> + <div data-id="{{id}}" id="" class="slider-duration"></div> + </div> + <div class="span6 text-right"> + <a class="btn btn-danger btn-delete-annotation" data-id="{{id}}" data-no-render> + <i class="icon-trash"></i> Delete + </a> + <a class="btn btn-primary btn-save-annotation" data-id="{{id}}"> + <i class="icon-ok"></i> Ok + </a> + </div> + </div> +</form> +</script> + +<script id="tpl-onglet" type="text/html"> +<li id="onglet-{{id}}"> + <a data-id="{{id}}" data-toggle="annotation" href="#tab-annotation-{{id}}"> + <i class="icon-{{iconTab}}"></i> + <span id="onglet-title-{{id}}">{{title}}</span> + <span class="close-tab">×</span> + </a> +</li> +</script> + +<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> +<div class="row annotation-audio-content"> + <div class="span6"> + <form class="form-horizontal"> + <div class="control-group"> + <label class="control-label" for="url-source-{{id}}">URL source :</label> + <div class="controls"> + <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-{{id}}">Code embed :</label> + <div class="controls"> + <textarea name="embedcode" id="embed-{{id}}" cols="30" rows="10">{{content.embedcode}}</textarea> + </div> + </div> + </form> + </div> +</div> +</script> + +<script id="tpl-video" type="text/html"> +<div class="edit-annotation-title row"> + <h3 class="span3"><i class="icon-film"></i> Vidéo</h3> + <span class="span3"> + 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"><i class="icon-plus"></i></a> + </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> +</script> + +<script id="tpl-text" type="text/html"> +<div class="edit-annotation-title row"> + <h3 class="span3"><i class="icon-align-left"></i> Texte</h3> +</div> +<div class="row"> + <div class="span6 wysiwyg-wrap"> + <textarea class="wysiwyg" name="" id="" cols="30" rows="10">{{content.text}}</textarea> + </div> +</div> +</script> + +<script id="tpl-slideshow" type="text/html"> +<div class="edit-annotation-title row"> + <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"><i class="icon-plus"></i></a> + </span> +</div> +<div class="row config-diaporama"> + <form action=""> + <div class="span3"> + <label for="">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="1"> sec + </div> + </form> +</div> +<div class="row"> + <div class="span6"> + <table class="table"> + <thead> + <tr> + <th>Aperçu</th> + <th>Titre</th> + <th>Description</th> + <th>Actions</th> + </tr> + </thead> + <tbody id="diaporama-{{id}}" class="list-image-diaporama ui-sortable"> + + </tbody> + </table> + </div> +</div> +</script> + +<script id="tpl-links" type="text/html"> +<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"> +<tr id="rid-{{ridid}}" class="row-image-diaporama"> + <td class="image-slideshow-row"><img data-url="{{url}}" src="{{url}}" alt=""> </td> + <td class="title-slideshow-row">{{title}}</td> + <td class="description-slideshow-row">{{description}}</td> + <td> + <table> + <tr> + <td><a data-type-media="image" data-title="Modifier une image" class="btn open-modal" href="modal-image.html"><i class="icon-pencil"></i></a></td> + <td><a data-title="une image" href="#rid-{{id}}" class="btn btn-delete-image"><i class="icon-trash"></i></a></td> + </tr> + <tr> + <td><a href="" class="btn btn-sort down"><i class="icon-angle-down"></i></a></td> + <td><a href="" class="btn btn-sort up"><i class="icon-angle-up"></i></a></td> + </tr> + </table> + </td> +</tr> +</script> + +<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>{{title}}</td> + </tr> + <tr> + <th>Description</th> + <td>{{description}}</td> + </tr> + </tbody> + </table> +</div> +</script> + +<script id="tpl-list-annotation-row" type="text/html"> +<tr id="row-list-annotation-{{id}}" style="background-color : {{color}};"> + <td>{{title}}</td> + <td>{{type}}</td> + <td>{{begin}}</td> + <td>{{getDuration}}</td> + <td>{{end}}</td> + <td> + <a href="#" data-id="{{id}}" class="btn btn-edit-annotation" data-type="{{type}}"> + <i class="icon-pencil"></i></a> + <a data-id="{{id}}" data-type="annotation" data-title="{{title}}" href="#row-list-annotation-{{id}}" class="btn btn-delete-annotation"> + <i class="icon-trash delete-annotation"></i> + </a> + </td> +</tr> +</script> + +<script id="tpl-chapter-row" type="text/html"> +<tr id="row-list-chapter-{{id}}" style="background-color : {{color}};"> + <td class="list-chapter-title">{{title}}</td> + <td class="list-chapter-tags">{{keywords}}</td> + <td class="begin">{{begin}}</td> + <td class="duration">{{getDuration}}</td> + <td class="end">{{end}}</td> + <td> + <table> + <tr> + <td> + <a href="#" class="btn btn-edit-chapter" data-chapter-id="{{id}}"><i class="icon-pencil"></i></a> + </td> + <td> + <a data-title="{{title}}" data-chapter-id="{{id}}" href="#row-list-chapter-{{id}}" class="btn btn-delete-chapter"><i class="icon-trash delete-annotation"></i></a> + </td> + </tr> + </table> + </td> +</tr> +</script> + +<script id="tpl-chapter-edit" type="text/html"> +<form data-chapter-id="{{id}}" id="form-chapter-edit-{{id}}" action="#" class="form-chapter-edit" style="background-color:{{color}}"> + <h4><i class="icon-flag"></i> <i class="icon-pencil"></i> Modifier le chapitre</h4> + <div class="row"> + <div class="span3 text-right"> + <input name="title" type="text" value="{{title}}"> + <input name="keywords" type="text" class="tag-it" data-type="chapter" value="{{keywords}}"> + </div> + <div class="span3"> + <table class="table text-right"> + <thead> + <tr> + <th class="span1 ">Début</th> + <th class="span1">Durée</th> + <th class="span1">Fin</th> + </tr> + </thead> + <tbody> + <tr> + <td class="span1"><span {{#beginTangle}}class="time-tangle tangle-start begin" data-milliseconds="{{begin.milliseconds}}"{{/beginTangle}}>{{begin}}</span></td> + <td class="span1"><span>{{getDuration}}</span></td> + <td class="span1"><span {{#endTangle}}class="time-tangle tangle-end end" data-milliseconds="{{end.milliseconds}}"{{/endTangle}}>{{end}}</span></td> + </tr> + </tbody> + </table> + </div> + </div> + <div class="row"> + <div class="span6 text-center"> + <textarea class="" name="description" id="">{{description}}</textarea> + </div> + </div> +</form> +</script> +</div><!-- /#templates --> + <script src="lib/jquery-1.9.1.min.js"></script> <script src="lib/jquery-migrate-1.1.1.js"></script> <script src="lib/jquery-ui/ui/minified/jquery-ui.min.js"></script>
--- a/integration/js/edition.js Wed May 29 18:14:23 2013 +0200 +++ b/integration/js/edition.js Fri May 31 17:32:56 2013 +0200 @@ -7,13 +7,12 @@ $(function(){ var global = { - idAnnotation : null, colorsIndex : 0, colors : ['#f39c12', '#2ecc71', '#3498db', '#9b59b6', - '#f1c40f', '#e67e22', '#e74c3c', '#ecf0f1', + '#f1c40f', '#e67e22', '#e74c3c', '#16a085', '#27ae60', '#2980b9', '#8e44ad', - '#f39c12', '#d35400', '#c0392b', '#bdc3c7'] + '#d35400', '#c0392b', '#bdc3c7'] }; @@ -35,7 +34,8 @@ myProject.onLoad(function() { $(".project-title").text(myProject.title); - + $('.project-title-nav').text(myProject.title); + myMedia = myProject.getCurrentMedia(); //load Chapitre @@ -68,11 +68,6 @@ }); } - - //chargement des chapitres et annotations existants - // loadInitChapters(); - //loadInitAnnotation(); - IriSP.htmlPlayer( myMedia, $(".main-video"), @@ -169,12 +164,7 @@ //########### modal $(document).on('click', 'a.open-modal', function(e){ - var idAnnotation = $(this).attr('data-id'); - - if(idAnnotation !== undefined){ - global.idAnnotation = idAnnotation; - } }); //edition image @@ -195,35 +185,20 @@ }); //--title-editor -$('.project-title-editor ._popover').bind('click',function(e){e.preventDefault()}); - $('.project-title-editor ._popover').popover({ - html : true, - content : function(){ - var previousValue = $('.project-title').text(), - formInput = - '<form action="#" class="project-title-editor-form">'+ - '<input type="text" class="project-title-editor-input" value="'+previousValue+'">'+ - '</form>'; - return formInput; - } + $(document).on('click', '.project-title-editor i, .project-title', function () { + var html = $('.project-title').html(); + var input = $('<input type="text" />'); + input.val(html); + $('.project-title').replaceWith(input); + input.focus(); + }); + $(document).on('blur', '.project-title-editor input', function(){ + var newTitle = $(this).val(); + myProject.title = newTitle; + $(this).replaceWith('<span class="project-title">'+newTitle+'</span></td>'); + $('.project-title-nav').text(newTitle); }); - $('body').on('click', function (e) { - $('._popover').each(function () { - if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) { - $(this).popover('hide'); - } - }); - }); - - $('body').on('submit', '.project-title-editor-form', function(e){ - e.preventDefault(); - $('._popover').popover('hide'); - }); - - $(document).on('keyup', '.project-title-editor-input', function() { - $('.project-title').html($(this).val()); - }); //######################## chapter @@ -265,17 +240,17 @@ currentChapter.beginTangle = beginTangle; currentChapter.endTangle = endTangle; - $.get('template.html', function(templates){ - var tpl = $(templates).filter('#tpl-chapter-edit').html(); + var tpl = getTemplate('#tpl-chapter-edit'); tpl = Mustache.render(tpl, currentChapter); chapterWrap.empty().append(tpl); chapterWrap.find('.tag-it').tagit(tagitParam); - }); myMedia.setCurrentTime(currentChapter.begin); } - + function getTemplate(idTpl){ + return $('#templates').find(idTpl).html(); + } //supprimer $('.list-chapter-wrap').on('click', '.btn-delete-chapter', function(e){ e.preventDefault(); @@ -362,7 +337,7 @@ chapterSegmentWrap.empty(); chapterList.empty(); - $.get('template.html', function(templates){ + $.each(chapters, function(k, v){ //segments @@ -375,42 +350,17 @@ chapterSegmentWrap.append(segment); //liste - var tplChapterRow = $(templates).filter('#tpl-chapter-row').html(); + var tplChapterRow = getTemplate('#tpl-chapter-row'); tplChapterRow = Mustache.render(tplChapterRow, v); chapterList.append(tplChapterRow); }); - }); + }//renderChapter() -//init - function loadInitChapters(){//nouveau projet, 1 chapitre - var dataChapter = { - title : 'New', - begin : 0, - end : myMedia.duration, - description : 'description', - keywords : ['tag1','tag2'] - }; - - newChapter(dataChapter); - } //######################## annotation - function loadInitAnnotation(){//nouveau projet, 1 chapitre - var dataAnnotation = { - title : 'Titre azerty', - begin : myMedia.duration/5, - end : myMedia.duration/3, - description : 'description', - type : 'video', - keywords : ['ideal', 'tag'] - }; - - newAnnotation(dataAnnotation); - renderAnnotation(); - } function newAnnotation(dataAnnotation){ var annotation = new IriSP.Model.Annotation(false, myProject); @@ -438,7 +388,7 @@ return c.begin; }); - timeline.empty(); + timeline.empty().append('<li>'); annotationList.empty(); $.each(annotations, function(k, v){ @@ -451,19 +401,46 @@ width : width, backgroundColor : v.color }).addClass('annotation').attr('id', 'annotation-timeline-'+v.id); - - timeline.append(segment); + + var isInTimeline = false; + $.each(timeline.find('li'), function(a, b){ + if(isInTimeline) return; + var row = $(this); + if(row.children().length){ + var canBeInRow = true; + $.each(row.find('.annotation'), function(c, d){ + var oAL = parseInt($(d).css('left')), + oAR = oAL + $(d).width(), + segmentR = left + width; + if(oAL<=left && oAR>=left || oAL<=segmentR && oAR>= segmentR){ + canBeInRow = false; + } + }); + if(canBeInRow){ + row.append(segment); + isInTimeline = true; + } + }else{ + row.append(segment); + isInTimeline = true; + } + }); + + if(!isInTimeline){ + timeline.append('<li>'); + timeline.find('li:last-child').append(segment); + } + //liste - $.get('template.html', function(templates){ - var tplAnnotationRow = $(templates).filter('#tpl-list-annotation-row').html(); + var tplAnnotationRow = getTemplate('#tpl-list-annotation-row'); tplAnnotationRow = Mustache.render(tplAnnotationRow, v); annotationList.append(tplAnnotationRow); - }); + }); - }); - } + + }//renderAnnotation //edit annotation $('#list-annotations').on('click', 'a.btn-edit-annotation', function(e){ @@ -540,10 +517,10 @@ 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 tplHead = getTemplate('#tpl-head'); var output = Mustache.render(tplHead, dataView); $(tabContent).append(output); $(tabContent).find(".slider-duration").slider(configSlider(dataView)); @@ -553,7 +530,7 @@ id : idAnnotation, content : dataView.content }; - var tpl = $(templates).filter('#tpl-'+type).html(); + var tpl = getTemplate('#tpl-'+type); tpl = Mustache.render(tpl, viewType); $(tabContent).append(tpl); @@ -566,18 +543,8 @@ case 'video': if(viewType.content.url != ""){ - /* - var videoWrap = $(tabContent).find('.annotation-video-content'), - tplVideo = $(templates).filter('#tpl-video-row').html(); - tplVideo = Mustache.render(tplVideo, viewType.content); - videoWrap.empty().append(tplVideo); - - var videoWrap = $(tabContent).find(".video-container"), - src = viewType.content.url; - getVideoPlayer(src, videoWrap); -*/ - var videoWrap = $(tabContent).find('.annotation-video-content'); + var videoWrap = $(tabContent).find('.annotation-video-content'); renderVideoInfo(videoWrap, viewType.content); } @@ -627,12 +594,12 @@ } dataView.iconTab = getIcon(type); - var tplOnglet = $(templates).filter('#tpl-onglet').html(); + var tplOnglet = getTemplate('#tpl-onglet'); var onglet = Mustache.render(tplOnglet, dataView); $(".nav-tabs li:last-child").after(onglet); $('a[href=#tab-annotation-'+idAnnotation+']').tab('show'); - }); + }//openTab() function getIcon(type){ @@ -642,8 +609,7 @@ break; case 'video': icon = 'film'; break; - case 'text': - icon = 'align-left'; + case 'text': icon = 'align-left'; break; case 'html': icon = 'code'; break; @@ -687,15 +653,15 @@ //video function renderVideoInfo(videoWrap, dataVideo){ - $.get('template.html', function(templates){ - var tplVideo = $(templates).filter('#tpl-video-row').html(); - tplVideo = Mustache.render(tplVideo, dataVideo); - - videoWrap.empty().append(tplVideo); + + var tplVideo = getTemplate('#tpl-video-row'); + tplVideo = Mustache.render(tplVideo, dataVideo); + + videoWrap.empty().append(tplVideo); - videoWrap = videoWrap.find(".video-container"); - getVideoPlayer(dataVideo.url, videoWrap); - }); + videoWrap = videoWrap.find(".video-container"); + getVideoPlayer(dataVideo.url, videoWrap); + } $('.popup').on('click', '.bibliotheque-video a', function(e){ e.preventDefault(); @@ -712,18 +678,7 @@ var videoWrap = $('#tab-annotation-'+currentAnnotation.id).find('.annotation-video-content'); renderVideoInfo(videoWrap, currentAnnotation.content); -/* - $.get('template.html', function(templates){ - var videoWrap = $('#tab-annotation-'+currentAnnotation.id).find('.annotation-video-content'), - tplVideo = $(templates).filter('#tpl-video-row').html(); - tplVideo = Mustache.render(tplVideo, currentAnnotation.content); - videoWrap.empty().append(tplVideo); - var videoWrap = videoWrap.find(".video-container"), - src = url; - getVideoPlayer(src, videoWrap); - }); -*/ }); @@ -750,12 +705,12 @@ }); function addImageToDiaporama(diaporama, dataView){ - $.get('template.html', function(templates){ - var tplDiapo = $(templates).filter('#tpl-diaporama-row').html(); - tplDiapo = Mustache.render(tplDiapo, dataView); - diaporama.append(tplDiapo); - disabledBtnSortable(diaporama); - }); + + var tplDiapo = getTemplate('#tpl-diaporama-row'); + tplDiapo = Mustache.render(tplDiapo, dataView); + diaporama.append(tplDiapo); + disabledBtnSortable(diaporama); + }; //bouton up / down @@ -801,17 +756,18 @@ $('.tab-content').on('click', '.delete-link', function(e){ e.preventDefault(); var row = $(this).parents('tr'), - tbody = $(this).find('tbody'); + tbody = $(this).parents('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 tplLinkRow = getTemplate('#tpl-links-row'); var output = Mustache.render(tplLinkRow, dataView); tbody.append(output); - }); + } $('.tab-content').on('keyup', '.links-rows input', function(e){ var tbody = $(this).parents('.links-rows'); @@ -819,6 +775,7 @@ }); 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(), @@ -827,23 +784,11 @@ title : titleLink }; links.push(link); + }); currentAnnotation.content.links = links; } - -//annotation html -/* -$('.tab-content').on('click', '.btn-html-apercu', function(e){ - e.preventDefault(); - - var apercuWrap = $(this).parents('.edit-annotation-html').find('.html-apercu'), - htmlTextarea = $(this).parents('.edit-annotation-html').find('textarea'); - - apercuWrap.empty().html(htmlTextarea.val()); -}); -*/ - //annotation audio $('.tab-content').on('keyup', '.annotation-audio-content input, .annotation-audio-content textarea', function(){ var name = $(this).attr('name'), @@ -860,7 +805,6 @@ currentAnnotation.content.autostart = autostart; }); - $('.tab-content').on('change keyup', '.config-diaporama input[name=duration]', function(){ var value = $(this).val(); if(!isNaN(value)){ @@ -916,7 +860,6 @@ //slider function configSlider(data){ - return { range: true, values: [ data.begin.milliseconds, data.end.milliseconds ], @@ -942,11 +885,16 @@ width :width }); + + + }, + stop : function(){ + renderAnnotation() } }; - } +//init annotation content data function getContentAnnotationByType(type){ var content; switch(type){ @@ -993,21 +941,6 @@ //test -//a = $(".wysiwyg").cleditor(wysiwygConfig); - - -$('.number-spin').spin(spinParam); - -disabledBtnSortable($('.ui-sortable')) -$('.ui-sortable').sortable({ - stop : function(event, ui){ - disabledBtnSortable($(this)); - } -}); - -$('.slider-duration').slider(configSlider); - -$(".tag-it").tagit(); $('.log-annotations').bind('click', function(e){ e.preventDefault(); @@ -1018,8 +951,10 @@ e.preventDefault(); console.log(chapters.length + ' chapitres',chapters); }); + });//ready +//Utilitaires Array.prototype.move = function (old_index, new_index) { if (new_index >= this.length) { var k = new_index - this.length; @@ -1028,7 +963,7 @@ } } this.splice(new_index, 0, this.splice(old_index, 1)[0]); - return this; // for testing purposes + return this; }; @@ -1144,4 +1079,4 @@ autoplay: "" + autoplay })); -} \ No newline at end of file +}//getVideoPlayer \ No newline at end of file
--- a/integration/template.html Wed May 29 18:14:23 2013 +0200 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,309 +0,0 @@ -<script id="tpl-head" type="text/html"> -<form action="#" class="form-info-general-annotation" style="background-color:{{color}}" data-id="{{id}}"> - - <div class="row"> - <div class="span3 text-right"> - <input type="text" placeholder="Titre de l'annotation.." name="title" value="{{title}}"> - <textarea id="" name="description">{{description}}</textarea> - </div> - <div class="span3"> - <input type="text" class="tag-it" data-type="annotation" value="{{keywords}}"> - <table class="table text-right"> - <thead> - <tr> - <th class="span1">Début</th> - <th class="span1">Durée</th> - <th class="span1">Fin</th> - </tr> - </thead> - <tbody> - <tr> - <td id="{{id}}-begin" class="span1">{{begin}}</td> - <td id="{{id}}-duration" class="span1">{{getDuration}}</td> - <td id="{{id}}-end" class="span1">{{end}}</td> - </tr> - </tbody> - </table> - </div> - </div> - <div class="row"> - <div class="span6 text-center"> - <div data-id="{{id}}" id="" class="slider-duration"></div> - </div> - <div class="span6 text-right"> - <a class="btn btn-danger btn-delete-annotation" data-id="{{id}}" data-no-render> - <i class="icon-trash"></i> Delete - </a> - <a class="btn btn-primary btn-save-annotation" data-id="{{id}}"> - <i class="icon-ok"></i> Ok - </a> - </div> - </div> -</form> -</script> - -<script id="tpl-onglet" type="text/html"> -<li id="onglet-{{id}}"> - <a data-id="{{id}}" data-toggle="annotation" href="#tab-annotation-{{id}}"> - <i class="icon-{{iconTab}}"></i> - <span id="onglet-title-{{id}}">{{title}}</span> - <span class="close-tab">×</span> - </a> -</li> -</script> - -<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> -<div class="row annotation-audio-content"> - <div class="span6"> - <form class="form-horizontal"> - <div class="control-group"> - <label class="control-label" for="url-source-{{id}}">URL source :</label> - <div class="controls"> - <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-{{id}}">Code embed :</label> - <div class="controls"> - <textarea name="embedcode" id="embed-{{id}}" cols="30" rows="10">{{content.embedcode}}</textarea> - </div> - </div> - </form> - </div> -</div> -</script> - -<script id="tpl-video" type="text/html"> -<div class="edit-annotation-title row"> - <h3 class="span3"><i class="icon-film"></i> Vidéo</h3> - <span class="span3"> - 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"><i class="icon-plus"></i></a> - </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> -</script> - -<script id="tpl-text" type="text/html"> -<div class="edit-annotation-title row"> - <h3 class="span3"><i class="icon-align-left"></i> Texte</h3> -</div> -<div class="row"> - <div class="span6 wysiwyg-wrap"> - <textarea class="wysiwyg" name="" id="" cols="30" rows="10">{{content.text}}</textarea> - </div> -</div> -</script> - -<script id="tpl-slideshow" type="text/html"> -<div class="edit-annotation-title row"> - <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"><i class="icon-plus"></i></a> - </span> -</div> -<div class="row config-diaporama"> - <form action=""> - <div class="span3"> - <label for="">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="1"> sec - </div> - </form> -</div> -<div class="row"> - <div class="span6"> - <table class="table"> - <thead> - <tr> - <th>Aperçu</th> - <th>Titre</th> - <th>Description</th> - <th>Actions</th> - </tr> - </thead> - <tbody id="diaporama-{{id}}" class="list-image-diaporama ui-sortable"> - - </tbody> - </table> - </div> -</div> -</script> - -<script id="tpl-links" type="text/html"> -<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"> -<tr id="rid-{{ridid}}" class="row-image-diaporama"> - <td class="image-slideshow-row"><img data-url="{{url}}" src="{{url}}" alt=""> </td> - <td class="title-slideshow-row">{{title}}</td> - <td class="description-slideshow-row">{{description}}</td> - <td> - <table> - <tr> - <td><a data-type-media="image" data-title="Modifier une image" class="btn open-modal" href="modal-image.html"><i class="icon-pencil"></i></a></td> - <td><a data-title="une image" href="#rid-{{id}}" class="btn btn-delete-image"><i class="icon-trash"></i></a></td> - </tr> - <tr> - <td><a href="" class="btn btn-sort down"><i class="icon-angle-down"></i></a></td> - <td><a href="" class="btn btn-sort up"><i class="icon-angle-up"></i></a></td> - </tr> - </table> - </td> -</tr> -</script> - -<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>{{title}}</td> - </tr> - <tr> - <th>Description</th> - <td>{{description}}</td> - </tr> - </tbody> - </table> -</div> -</script> - -<script id="tpl-list-annotation-row" type="text/html"> -<tr id="row-list-annotation-{{id}}" style="background-color : {{color}};"> - <td>{{title}}</td> - <td>{{type}}</td> - <td>{{begin}}</td> - <td>{{getDuration}}</td> - <td>{{end}}</td> - <td> - <a href="#" data-id="{{id}}" class="btn btn-edit-annotation" data-type="{{type}}"> - <i class="icon-pencil"></i></a> - <a data-id="{{id}}" data-type="annotation" data-title="{{title}}" href="#row-list-annotation-{{id}}" class="btn btn-delete-annotation"> - <i class="icon-trash delete-annotation"></i> - </a> - </td> -</tr> -</script> - -<script id="tpl-chapter-row" type="text/html"> -<tr id="row-list-chapter-{{id}}" style="background-color : {{color}};"> - <td class="list-chapter-title">{{title}}</td> - <td class="list-chapter-tags">{{keywords}}</td> - <td class="begin">{{begin}}</td> - <td class="duration">{{getDuration}}</td> - <td class="end">{{end}}</td> - <td> - <table> - <tr> - <td> - <a href="#" class="btn btn-edit-chapter" data-chapter-id="{{id}}"><i class="icon-pencil"></i></a> - </td> - <td> - <a data-title="{{title}}" data-chapter-id="{{id}}" href="#row-list-chapter-{{id}}" class="btn btn-delete-chapter"><i class="icon-trash delete-annotation"></i></a> - </td> - </tr> - </table> - </td> -</tr> -</script> - -<script id="tpl-chapter-edit" type="text/html"> -<form data-chapter-id="{{id}}" id="form-chapter-edit-{{id}}" action="#" class="form-chapter-edit" style="background-color:{{color}}"> - <h4><i class="icon-flag"></i> <i class="icon-pencil"></i> Modifier le chapitre</h4> - <div class="row"> - <div class="span3 text-right"> - <input name="title" type="text" value="{{title}}"> - <input name="keywords" type="text" class="tag-it" data-type="chapter" value="{{keywords}}"> - </div> - <div class="span3"> - <table class="table text-right"> - <thead> - <tr> - <th class="span1 ">Début</th> - <th class="span1">Durée</th> - <th class="span1">Fin</th> - </tr> - </thead> - <tbody> - <tr> - <td class="span1"><span {{#beginTangle}}class="time-tangle tangle-start begin" data-milliseconds="{{begin.milliseconds}}"{{/beginTangle}}>{{begin}}</span></td> - <td class="span1"><span>{{getDuration}}</span></td> - <td class="span1"><span {{#endTangle}}class="time-tangle tangle-end end" data-milliseconds="{{end.milliseconds}}"{{/endTangle}}>{{end}}</span></td> - </tr> - </tbody> - </table> - </div> - </div> - <div class="row"> - <div class="span6 text-center"> - <textarea class="" name="description" id="">{{description}}</textarea> - </div> - </div> -</form> -</script> \ No newline at end of file