| author | Anthony Ly <anthonyly.com@gmail.com> |
| Tue, 11 Jun 2013 15:47:02 +0200 | |
| changeset 117 | a56fad1ada35 |
| parent 116 | fedc0d054b55 (diff) |
| parent 114 | dbd3a1441943 (current diff) |
| child 118 | b5f44489096e |
--- a/integration/css/style.css Tue Jun 11 13:13:42 2013 +0200 +++ b/integration/css/style.css Tue Jun 11 15:47:02 2013 +0200 @@ -55,8 +55,8 @@ .chapter-widget table td{} .chapter-widget textarea:focus{height: 100px;} .chapitre-cut-wrap{position: relative; height: 70px; margin-bottom: 10px;} -.btn-cut-chapter{height:40px;position: absolute;top: 20px;left: 11px; width: 40px;} -.indicateur-chapter, .indicateur-annotation{z-index:999; left:10px; width: 1px; height: 100%;background-color: #000; position: absolute;} +.btn-cut-chapter{height:40px;position: absolute;top: 20px;left: 1px; width: 40px;} +.indicateur-chapter, .indicateur-annotation{z-index:999; left:0; width: 1px; height: 100%;background-color: #000; position: absolute;} .chapter-segments {overflow:hidden; width: 100%; height: 20px; margin: 0; position: relative;} .chapter-segments li{position: absolute; top: 0; cursor:pointer; float: left; list-style: none; line-height: 20px; height: 20px; text-align: center; overflow: hidden;} .list-chapter-wrap, .list-annotation-wrap, .section{background-color: #F5F5F5; border: 1px solid #E5E5E5;} @@ -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,16 +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;} + +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;} -.alert-message{display: none;} -.alert{display: none;} + /* Tangle */ .time-tangle {color: #2c3e50; cursor: w-resize; position: relative;border-bottom: 1px dashed #2c3e50;} .time-tangle:hover, @@ -129,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 13:13:42 2013 +0200 +++ b/integration/edition.html Tue Jun 11 15:47:02 2013 +0200 @@ -83,10 +83,7 @@ </div> <div class="timeline-annotations-wrap"> <div class="indicateur-annotation"></div> - <!--<div class="timeline-annotations"></div>--> - <ul class="timeline-annotations"> - - </ul> + <ul class="timeline-annotations"></ul> </div> <!-- chapter-widget --> <div class="chapter-widget"> @@ -102,42 +99,6 @@ </div> </div> <div class="chapter-widget-info"> - <!-- - <form action="#" class="form-chapter-edit"> - <div class="row"> - <div class="span3 text-right"> - <input name="title" type="text"> - <input name="tags" type="text" class="tag-it"> - </div> - <div class="span3"> - <input type="hidden" name="begin"> - <input type="hidden" name="duration"> - <input type="hidden" name="end"> - <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 begin">4:20</td> - <td class="span1 duration">4:20</td> - <td class="span1 end">4:20</td> - </tr> - </tbody> - </table> - </div> - </div> - <div class="row"> - <div class="span6 text-center"> - <textarea class="" name="description" id=""></textarea> - </div> - </div> - </form> - --> </div> <div class="list-chapter-wrap"> <h4><i class="icon-flag"></i> <i class="icon-th-list"></i> Liste des chapitres</h4> @@ -153,27 +114,6 @@ </tr> </thead> <tbody class="list-chapter-rows-wrap"> - <!-- - <tr id="row-list-chapter-id1"> - <td>Titre d'un chapitre</td> - <td>Tags, Tags, Tags</td> - <td>79:55</td> - <td>79:55</td> - <td>79:55</td> - <td> - <table> - <tr> - <td> - <a href="" class="btn edit-chapter"><i class="icon-pencil"></i></a> - </td> - <td> - <a data-title="Chapitre 1" href="#row-list-chapter-id1" class="btn btn-delete"><i class="icon-trash delete-annotation"></i></a> - </td> - </tr> - </table> - </td> - </tr> - --> </tbody> </table> </div> @@ -184,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"> @@ -214,294 +153,11 @@ </tr> </thead> <tbody id="list-annotations-rows"> - <!-- - <tr id="row-list-annotation-id1"> - <td>Titre annotation</td> - <td>Vidéo</td> - <td>4:26</td> - <td>4:26</td> - <td>4:26</td> - <td> - <a href="#" data-id="annotation-123" class="btn btn-edit-annotation" data-type="video"> - <i class="icon-pencil"></i></a> - <a data-id="annotation-123" data-type="annotation" data-title="Annotation XYZ" href="#row-list-annotation-id1" class="btn btn-delete"> - <i class="icon-trash delete-annotation"></i> - </a> - </td> - </tr> - <tr id="row-list-annotation-id2"> - <td>Titre annotation</td> - <td>Diaporama</td> - <td>4:26</td> - <td>4:26</td> - <td>4:26</td> - <td> - <a href="#" data-id="annotation-456" class="btn btn-edit-annotation" data-type="diaporama"> - <i class="icon-pencil "></i></a> - <a data-id="annotation-456" data-type="annotation" data-title="Annotation XYZ" href="#row-list-annotation-id2" class="btn btn-delete"> - <i class="icon-trash delete-annotation"></i> - </a> - </td> - </tr> - --> + </tbody> </table> </div> - </div> -<!-- exemple annotation all --> - <div class="tab-pane" id="annotation-azerty"> - <!-- head --> - <form action="#" class="form-info-general-annotation"> - <div class="row"> - <div class="span3 text-right"> - <input type="text" placeholder="Titre de l'annotation.."> - <textarea name="" id=""></textarea> - </div> - <div class="span3"> - <input type="text" placeholder="Titre de l'annotation.."> - <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="id741-begin" class="span1">4:20</td> - <td id="id741-duration" class="span1">4:20</td> - <td id="id741-end" class="span1">4:20</td> - </tr> - </tbody> - </table> - </div> - </div> - <div class="row"> - <div class="span6 text-center"> - <div data-id="id741" id="id741" class="slider-duration"></div> - </div> - <div class="span6 text-right"> - <button data-id="id741" type="submit" class="btn btn-primary btn-save-annotation"> - <i class="icon-save"></i> Enregistrer l'annotation - </button> - </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> - </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">URL source :</label> - <div class="controls"> - <input type="text" id="url-source" placeholder="http://"> - </div> - </div> - <div class="control-group"> - <label class="control-label" for="embed">Code embed :</label> - <div class="controls"> - <textarea name="" id="embed" cols="30" rows="10"></textarea> - </div> - </div> - </form> - </div> - </div> - - <!-- vidéo --> - <div class="edit-annotation-title row"> - <h3 class="span3"><i class="icon-film"></i> Vidéo</h3> - <span class="span3"> - <span class="label-add-video">Ajouter une vidéo </span> - <a data-type-media="video" data-id="annotation-azerty" 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 class="span6"> - <img src="img/460x345.gif" alt=""> - <table class="table"> - <tbody> - <tr> - <th>Titre</th> - <td>Titre de la vidéo Azerty</td> - </tr> - <tr> - <th>Date</th> - <td>14 / 05 / 2016</td> - </tr> - <tr> - <th>Durée</th> - <td>25 m 35 s</td> - </tr> - <tr> - <th>Description</th> - <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem iste blanditiis ducimus sint nemo aspernatur rem hic facere culpa dolore quis itaque magni voluptates aliquid veritatis non harum quo libero.</td> - </tr> - </tbody> - </table> - </div> - </div> - - <!-- 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> - - - <!-- text --> - <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"></textarea> - </div> - </div> - <!-- diaporama --> - - <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-id1" 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" class="btn btn-primary">Manuel</button> - <button type="button" class="btn btn-primary active">Auto</button> - </div> - </div> - <div class="span3"> - <label for="">Durée image : </label> - <input pattern="[0-9]*" class="span1 number-spin" type="text" 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-id1" class="list-image-diaporama ui-sortable"> - <tr id="rid-id1" class="row-image-diaporama"> - <td><img src="img/60x60.gif" alt=""> </td> - <td>Titre annotation 1</td> - <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis aliquid non placeat consequuntur fugit minima.</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-id1" class="btn btn-delete"><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> - <tr id="rid-id2" class="row-image-diaporama"> - <td><img src="img/60x60.gif" alt=""> </td> - <td>Titre annotation 2</td> - <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis aliquid non placeat consequuntur fugit minima.</td> - <td> - <table> - <tr> - <td><a href="" class="btn"><i class="icon-pencil"></i></a></td> - <td><a href="" class="btn"><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> - <tr id="rid-id3" class="row-image-diaporama"> - <td><img src="img/60x60.gif" alt=""> </td> - <td>Titre annotation 3</td> - <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis aliquid non placeat consequuntur fugit minima.</td> - <td> - <table> - <tr> - <td><a href="" class="btn"><i class="icon-pencil"></i></a></td> - <td><a href="" class="btn"><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> - </tbody> - </table> - </div> - </div> - - </div><!-- /exemple annotation all --> - + </div><!-- /.liste annotations --> </div><!-- /.tab-content --> </div><!-- /.col-right --> </div> @@ -552,9 +208,9 @@ </div> <div id="templates"> + <script id="tpl-head" type="text/html"> <form action="#" class="form-info-general-annotation" data-id="{{id}}"> - <div class="row"> <div class="span3 text-right"> <label class="label-left" for="head-title-{{id}}">Titre :</label> @@ -589,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> @@ -644,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"> @@ -673,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> @@ -683,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> @@ -712,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> @@ -735,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> @@ -751,17 +386,21 @@ <script id="tpl-links-row" type="text/html"> <tr> - <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 class="control-group"> + <input class="input-medium url-link" type="text" value="{{url}}" placeholder="http://"> + <div class="help-inline"><i class="icon-unlink"></i> Le lien est incorrect.</div> + </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}}?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> @@ -788,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> @@ -853,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"> @@ -879,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"> @@ -937,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 13:13:42 2013 +0200 +++ b/integration/js/edition.js Tue Jun 11 15:47:02 2013 +0200 @@ -1,30 +1,29 @@ -var myMedia = undefined, - currentChapter = undefined, - currentAnnotation = undefined, - currentSlider = undefined, - secMiniChapter = 10; - - - - $(function(){ + var myMedia = undefined, + currentChapter = undefined, + currentAnnotation = undefined, + currentSlider = undefined, + secMiniChapter = 10; + +/* Colors */ var annotationsColors = { 'video' : '#BE4477', 'text' : '#5E90CB', 'slideshow' : '#F69058', 'audio' : '#63BE6C', 'links' : '#8985BB' - } - - var global = { - colorsIndex : 0, - colors : - ['#FF6138', '#FFFF9D', '#BEEB9F', '#79BD8F', '#00A388', + }, + colorsRangeIndex = 0, + colorsRange = [ + '#FF6138', '#FFFF9D', '#BEEB9F', '#79BD8F', '#00A388', '#1695A3', '#ACF0F2', '#F3FFE2', '#EB7F00', '#FF8000', '#FFD933', '#CCCC52', '#8FB359', '#FFD393', '#F54F29' - ] - }; + ]; + + function getRandomColor(){ + return colorsRange[(colorsRangeIndex<colorsRange.length) ? colorsRangeIndex++ : (colorsRangeIndex=0)]; + } function getTemplate(idTpl){ return $('#templates').find(idTpl).html(); @@ -38,6 +37,7 @@ myMedia = myProject.getCurrentMedia(); + //load Chapitre var anntypes = myProject.getAnnotationTypes().searchByTitle("chapitrage"); if (!anntypes.length) { chapterAnnType = new IriSP.Model.AnnotationType(false, myProject); @@ -47,7 +47,6 @@ chapterAnnType = anntypes[0]; } - //load Chapitre chapters = chapterAnnType.getAnnotations(); if(!chapters.length){ var dataChapter = { @@ -83,7 +82,7 @@ }); renderAnnotation(); - + //player IriSP.htmlPlayer( myMedia, $(".main-video"), @@ -105,7 +104,6 @@ ); myMedia.on("timeupdate", function(t) { - //curseur chapitre var wContainer = $('.chapitre-cut-wrap').width() - 1, pos = wContainer * t / myMedia.duration, @@ -118,21 +116,21 @@ }else{ btnCutChapter.css("left",pos); } - $('.info-time').text(t) - //annotations view + $('.info-time').text(t); + + //display annotations refreshAnnotationDisplay(t); - });//timeupdate });//myProject.onLoad /* Display annotation in timeline */ - //survol + //hover $(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'); } }); @@ -214,8 +212,6 @@ } }); - - /* Title project */ $(document).on('click', '.project-title-editor i, .project-title', function () { @@ -247,11 +243,6 @@ loadFormChapter(idChapter); }); - $('.chapter-segments').on('click', 'li', function(){ - var idChapter = $(this).attr('id'); - loadFormChapter(idChapter); - }); - $('.chapter-widget-info').on('keyup', 'input[name=title], textarea', function(e){ var name = $(this).attr('name'), value = $(this).val(); @@ -265,6 +256,12 @@ disabledPreview(); }); + //form chapter + $('.chapter-segments').on('click', 'li', function(){ + var idChapter = $(this).attr('id'); + loadFormChapter(idChapter); + }); + function loadFormChapter(idChapter){ currentChapter = _.find(chapters, function(c){ return c.id == idChapter; }); var chapterWrap = $('.chapter-widget-info'), @@ -283,6 +280,12 @@ myMedia.setCurrentTime(currentChapter.begin); } + //close chapter form + $(document).on('click', '.btn-ok-chapter', function(e){ + e.preventDefault(); + $('.form-chapter-edit').remove(); + }); + //delete chapter $(document).on('click', '.btn-delete-chapter', function(e){ e.preventDefault(); @@ -305,10 +308,6 @@ $("#modal-confirm").modal('show'); }); - $(document).on('click', '.btn-ok-chapter', function(e){ - e.preventDefault(); - $('.form-chapter-edit').remove(); - }); function deleteChapter(idChapter){ @@ -334,10 +333,7 @@ disabledPreview(); } - function getRandomColor(){ - return global.colors[(global.colorsIndex<global.colors.length) ? global.colorsIndex++ : (global.colorsIndex=0)]; - } - //nouveau chapitre + //new chapter function newChapter(dataChapter, render){ var chapter = new IriSP.Model.Annotation(false, myProject); chapter.setMedia(myMedia.id); @@ -354,7 +350,7 @@ renderChapter(); loadFormChapter(chapter.id); disabledPreview(); - $('#chapter-title').focus(); + $('.chapter-title').focus(); } $('.chapter-widget').on('click', '.btn-cut-chapter', function(e){ @@ -377,7 +373,6 @@ }; newChapter(dataChapter, true); - }); function organizeNewChapter(beginNew){ @@ -397,8 +392,6 @@ } function renderChapter(){ - - var chapterSegmentWrap = $('.chapter-segments'), wChapterSegmentWrap = chapterSegmentWrap.width(), chapterList = $('.list-chapter-rows-wrap'); @@ -455,9 +448,51 @@ return annotation; } + //annotation content data init + function getContentAnnotationByType(type){ + var content; + switch(type){ + case 'audio': + content = { + mimetype : "application/x-ldt-audio", + url : "", + embedcode : "" + }; + break; + case 'video': + content = { + mimetype : "application/x-ldt-video", + url : "", + embedcode : "" + }; + break; + case 'text': + content = { + mimetype : "application/x-ldt-text", + markup : "html", + text : "" + }; + break; + case 'links': + content = { + mimetype : "application/x-ldt-links", + links : [] + }; + break; + case 'slideshow': + content = { + mimetype : "application/x-ldt-slideshow", + slideduration : 1000, + autostart : false, + images : [] + }; + break; + } + return content; + } + function renderAnnotation(){ - var timeline = $('.timeline-annotations'), wTimeline = timeline.width(), annotationList = $('#list-annotations-rows'); @@ -484,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; @@ -514,16 +548,12 @@ timeline.find('li:last-child').append(segment); } - //liste v.iconTab = getIcon(v.type); var tplAnnotationRow = getTemplate('#tpl-list-annotation-row'); tplAnnotationRow = Mustache.render(tplAnnotationRow, v); annotationList.append(tplAnnotationRow); - }); - - }//renderAnnotation //edit annotation @@ -541,7 +571,6 @@ }); $('.tab-content').on('keyup', '.form-info-general-annotation input[name=title], .form-info-general-annotation textarea', function(e){ - var name = $(this).attr('name'), value = $(this).val(); currentAnnotation[name] = value; @@ -582,7 +611,7 @@ $(this).tab('show'); }); - //ouvrir tab + //open tab $(document).on('click', '.open-tab', function(e){ e.preventDefault(); var type = $(this).attr('data-type'); @@ -592,8 +621,7 @@ function openTab(type, data){ var dataView, isNew = false; - if(_.isUndefined(data)){//nouveau - + if(_.isUndefined(data)){//new var currentTimePlusUnMin = 60 * 1000 + myMedia.currentTime, endAnnotation = (currentTimePlusUnMin<myMedia.duration) ? currentTimePlusUnMin : myMedia.duration; var dataAnnotation = { @@ -607,7 +635,7 @@ dataView = newAnnotation(dataAnnotation); renderAnnotation(); isNew = true; - }else{//édition + }else{//edition dataView = data; } @@ -637,7 +665,7 @@ $(tabContent).append(tpl); $('.tab-content').append(tabContent); - //particularité selon type + //data by type switch(type){ case 'audio': break; @@ -685,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; @@ -704,7 +732,7 @@ if(isNew){$(tabContent).find('.head-title').focus();} - }//openTab() + }//openTab function getIcon(type){ var icon; @@ -725,7 +753,7 @@ return icon; } - //définit currentAnnotation quand la tab s'ouvre + //define currentAnnotation by open tab $('#onglet-annotations').on('show', 'a[data-toggle="annotation"]', function (e) { var idAnnotation = $(e.target).attr('data-id'); currentAnnotation = _.find(annotations, function(c){ return c.id == idAnnotation; }); @@ -733,13 +761,19 @@ showCurrentAnnotationInTimeline(idAnnotation); }); - //rafraichit annotations au retour sur la liste + //refresh annotation data view when back on annotation list tab $('#onglet-annotations').on('show', 'a[data-toggle="list-annotations"]', function (e) { currentAnnotation = undefined; renderAnnotation(); }); - //fermer tab + //close tab + function closeTab(idAnnotation){ + $('#onglet-'+idAnnotation).remove(); + $('.tab-content #tab-annotation-'+idAnnotation).remove(); + $('#tab-list-annotation').tab('show'); + } + $('#onglet-annotations').on('click', 'span.close-tab', function(e){ e.preventDefault();e.stopPropagation(); var idAnnotation = $(this).parents('a').attr('data-id'); @@ -752,15 +786,9 @@ closeTab(idAnnotation); }); - function closeTab(idAnnotation){ - $('#onglet-'+idAnnotation).remove(); - $('.tab-content #tab-annotation-'+idAnnotation).remove(); - $('#tab-list-annotation').tab('show'); - } +/* Video */ - //video function renderVideoInfo(videoWrap, dataVideo){ - var tplVideo = getTemplate('#tpl-video-row'); tplVideo = Mustache.render(tplVideo, dataVideo); @@ -768,8 +796,9 @@ videoWrap = videoWrap.find(".video-container"); getVideoPlayer(dataVideo.url, videoWrap); - } + + //select video on modal $('.popup').on('click', '.bibliotheque-video a:not(.pagination a)', function(e){ e.preventDefault(); @@ -797,7 +826,7 @@ /* Slideshow */ - //bibliotheque + //select image on modal $('.popup').on('click', '.bibliotheque-image a:not(.pagination a)', function(e){ e.preventDefault(); @@ -812,22 +841,20 @@ }; 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 title / description + //edit $('.tab-content').on('click', '.title-slideshow-row, .description-slideshow-row, .video-title-edit, .video-description-edit', function(){ if($(this).find('input').length) return; var html = $(this).find('span').html(), @@ -846,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(); @@ -861,12 +888,12 @@ disabledPreview(); }); - //bouton up / down + //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()); @@ -876,13 +903,20 @@ var newIndex = row.index(); currentAnnotation.content.images.move(oldIndex, newIndex); - disabledBtnSortable(listDiaporama); + disabledBtnSortable(listSlideshow); disabledPreview(); }); + 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(); @@ -890,18 +924,23 @@ 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'); +/* Links */ + + //add + function addLinkRow(tbody, dataView){ + var tplLinkRow = getTemplate('#tpl-links-row'); + var output = Mustache.render(tplLinkRow, dataView); + tbody.append(output); + } - //links $('.tab-content').on('click', '.add-link', function(e){ e.preventDefault(); var tbody = $(this).parents('tfoot').siblings('tbody'); addLinkRow(tbody); }); + + //delete $('.tab-content').on('click', '.delete-link', function(e){ e.preventDefault(); var row = $(this).parents('tr'), @@ -910,18 +949,13 @@ row.remove(); updateLinks(tbody); }); - function addLinkRow(tbody, dataView){ - - //head commun à tous - var tplLinkRow = getTemplate('#tpl-links-row'); - var output = Mustache.render(tplLinkRow, dataView); - tbody.append(output); - - } + + //edit $('.tab-content').on('keyup', '.links-rows input', function(e){ var tbody = $(this).parents('.links-rows'); updateLinks(tbody); }); + function updateLinks(tbody){ links = new Array(); @@ -938,9 +972,13 @@ currentAnnotation.content.links = links; disabledPreview(); } + $('.tab-content').on('focus', '.url-link', function(){ var td = $(this).parents('td'); - if(td.hasClass('error')) td.removeClass('error') + if(td.hasClass('error')) { + td.removeClass('error'); + td.find('.help-inline').hide(); + } }); $('.tab-content').on('blur', '.url-link', function(){ @@ -948,6 +986,7 @@ td = $(this).parents('td'); if(!isValidLink(url)){ td.addClass('error'); + td.find('.help-inline').show(); } }); @@ -955,7 +994,26 @@ return /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/.test(url); } - //annotation audio + //autostart + $('.tab-content').on('click', '.btn-autostart', function(){ + var autostart = $(this).attr('data-autostart'); + if(autostart == "true"){ autostart = true;} + else {autostart = false;} + disabledPreview(); + currentAnnotation.content.autostart = autostart; + }); + + //duration + $('.tab-content').on('change keyup', '.config-slideshow input[name=duration]', function(){ + var value = $(this).val(); + if(!isNaN(value)){ + disabledPreview(); + currentAnnotation.content.slideduration = value * 1000; + } + }); + +/* Audio */ + $('.tab-content').on('keyup', '.annotation-audio-content input, .annotation-audio-content textarea', function(){ var name = $(this).attr('name'), value = $(this).val(); @@ -964,25 +1022,8 @@ disabledPreview(); }); - //annotation slideshow - $('.tab-content').on('click', '.btn-autostart', function(){ - var autostart = $(this).attr('data-autostart'); - if(autostart == "true"){ autostart = true;} - else {autostart = false;} - disabledPreview(); - currentAnnotation.content.autostart = autostart; - }); +/* Save project */ - $('.tab-content').on('change keyup', '.config-diaporama input[name=duration]', function(){ - var value = $(this).val(); - if(!isNaN(value)){ - disabledPreview(); - currentAnnotation.content.slideduration = value * 1000; - } - }); - - - //save project $('.btn-save-project').bind('click', function(e){ e.preventDefault(); if($(this).hasClass('disabled')) return; @@ -1027,7 +1068,7 @@ e.preventDefault(); }); - //alert + //alert save info $('.alert').bind('close', function (e) { e.preventDefault(); $(this).hide(); @@ -1037,7 +1078,9 @@ $('.alert').hide(); $('.'+className).show(); } -//################ config + +/* Config */ + //tagit function onTagItChange(e, ui) { var tagitType = $(this).attr('data-type'), @@ -1060,7 +1103,7 @@ afterTagAdded : onTagItChange } - //CLEditor annotation > text (wysiwyg) http://premiumsoftware.net/cleditor/docs/GettingStarted.html#optionalParameters + //CLEditor (wysiwyg) http://premiumsoftware.net/cleditor/docs/GettingStarted.html#optionalParameters var wysiwygConfig = { width: 450, height: 250, @@ -1128,49 +1171,6 @@ }; } - //init annotation content data - function getContentAnnotationByType(type){ - var content; - switch(type){ - case 'audio': - content = { - mimetype : "application/x-ldt-audio", - url : "", - embedcode : "" - }; - break; - case 'video': - content = { - mimetype : "application/x-ldt-video", - url : "", - embedcode : "" - }; - break; - case 'text': - content = { - mimetype : "application/x-ldt-text", - markup : "html", - text : "" - }; - break; - case 'links': - content = { - mimetype : "application/x-ldt-links", - links : [] - }; - break; - case 'slideshow': - content = { - mimetype : "application/x-ldt-slideshow", - slideduration : 1000, - autostart : false, - images : [] - }; - break; - } - return content; - }//getContentAnnotationByType - //unload $(window).on("beforeunload", onLeave); function onLeave(){ @@ -1184,26 +1184,6 @@ tangleStartVal, tangleHasMoved; - $('.chapter-widget-info').on('mousedown', '.time-tangle', function(evt){ - activeTangle = $(this); - activeTangle.addClass("active"); - tangleStartVal = +activeTangle.attr("data-milliseconds"); - tangleStartX = evt.pageX; - tangleHasMoved = false; - $(this).parents('td').siblings('td').find(".time-tangle").addClass("deactivate"); - return false; - }); - - $('.tab-content').on('mousedown', '.time-tangle', function(evt){ - activeTangle = $(this); - activeTangle.addClass("active"); - tangleStartVal = +activeTangle.attr("data-milliseconds"); - tangleStartX = evt.pageX; - tangleHasMoved = false; - $(this).parents('td').siblings('td').find(".time-tangle").addClass("deactivate"); - return false; - }); - $(document) .mousemove(function(evt) { if (activeTangle) { @@ -1216,7 +1196,7 @@ .mouseup(function() { if (activeTangle) { - if(activeTangle.hasClass('slider-tangle')){ + if(activeTangle.hasClass('slider-tangle')){//annotation renderAnnotation(); refreshAnnotationDisplay(myMedia.getCurrentTime()); } @@ -1226,6 +1206,16 @@ }); //chapters + $('.chapter-widget-info').on('mousedown', '.time-tangle', function(evt){ + activeTangle = $(this); + activeTangle.addClass("active"); + tangleStartVal = +activeTangle.attr("data-milliseconds"); + tangleStartX = evt.pageX; + tangleHasMoved = false; + $(this).parents('td').siblings('td').find(".time-tangle").addClass("deactivate"); + return false; + }); + function updateRenderChapter(chapterData){ var segment = $('.chapter-segments li#'+chapterData.id), wChapterSegmentWrap = $('.chapter-segments').width(), @@ -1285,7 +1275,16 @@ updateChapterDuration(val, chapterBefore, chapterAfter); }); -//annotations + //annotations + $('.tab-content').on('mousedown', '.time-tangle', function(evt){ + activeTangle = $(this); + activeTangle.addClass("active"); + tangleStartVal = +activeTangle.attr("data-milliseconds"); + tangleStartX = evt.pageX; + tangleHasMoved = false; + $(this).parents('td').siblings('td').find(".time-tangle").addClass("deactivate"); + return false; + }); $('.tab-content').on('valuechange', '.tangle-start', function(evt, val){ var max = currentSlider.slider('values')[1], @@ -1334,21 +1333,10 @@ } } - //test - $('.log-annotations').bind('click', function(e){ - e.preventDefault(); - console.log(annotations.length + ' annotations', annotations); - currentSlider.slider( "values", 0, 55 ); - }); - - $('.log-chapters').bind('click', function(e){ - e.preventDefault(); - console.log(chapters.length + ' chapitres',chapters); - }); - });//ready -//Utilitaires +/* Utilitys */ + Array.prototype.move = function (old_index, new_index) { if (new_index >= this.length) { var k = new_index - this.length;