1 (function(){

     2 

     3 var global = {

     4     diaporama : null,

     5     idAnnotation : null

     6 };

     7 

     8 //modal

     9     $('.popup').on('click', '.popup-content a', function(e){

    10     	e.preventDefault();

    11     	if($(this).hasClass('btn-cancel')){

    12     		$(this).parents('.popup').modal('hide');

    13     	}

    14     	if($(this).hasClass('btn-previsualisation')){

    15     		var imgPrev = $('<img src="img/520x520.gif" alt="" />');

    16     		$('.previsualisation').empty().append(imgPrev);

    17     	}

    18     });

    19 //edition image

    20     $('.popup').on('change', '#media-type-select', function(e){

    21         var typeImage = $(this).val();

    22         $('.input-image-url, .input-image-upload').hide();

    23         $('.input-image-'+typeImage).show();

    24     });

    25 //bibliotheque

    26     //video

    27     $('.popup').on('click', '.bibliotheque-video a', function(e){

    28         e.preventDefault();

    29         $('.popup').modal('hide');

    30         $.get('template.html', function(templates){

    31             var videoWrap = $('#'+global.idAnnotation).find('.annotation-video-content'),

    32                 tplVideo = $(templates).filter('#tpl-video-row').html();

    33             videoWrap.empty().append(tplVideo);

    34         });

    35         

    36     });

    37     //image

    38     $('.popup').on('click', '.bibliotheque-image a', function(e){

    39         e.preventDefault();

    40         var listDiaporama = $('#'+global.diaporama);

    41         addImageToDiaporama(listDiaporama);

    42         $('.popup').modal('hide');

    43     });

    44 

    45     $(document).on('click','.btn-delete', function(e){

    46         e.preventDefault();

    47         var titleMedia = $(this).attr('data-title'),

    48             textModal = $('<p>Êtes-vous sûr de vouloir supprimer <strong>'+titleMedia+'</strong> ?</p>'),

    49             eltDelete = $(this).attr('href');

    50         $("#modal-confirm #btn-delete-modal").attr('data-id-elt-delete', eltDelete);

    51         $("#modal-confirm .modal-body").empty().append(textModal); 

    52         $("#modal-confirm").modal('show');

    53 

    54         //si c'est une annotation et que la tab est ouverte, on la ferme

    55         var type = $(this).attr('data-type');

    56         if(type == 'annotation'){

    57             var idAnnotation = $(this).attr('data-id');

    58             $('a[href=#annotation-'+idAnnotation+']').closest('li').remove();

    59             $('.tab-content #annotation'+idAnnotation).remove();

    60             $('#tab-list-annotation').tab('show');

    61         }

    62     });

    63 

    64     //confirmation suppression

    65     $("#modal-confirm").on('click', '#btn-delete-modal', function(e){

    66         e.preventDefault();

    67         var idEltDelete = $(this).attr('data-id-elt-delete');

    68         $(idEltDelete).remove();

    69         $("#modal-confirm").modal('hide');

    70     });

    71 

    72     

    73 

    74 //page edition

    75 

    76 //title-editor

    77 $('.project-title-editor ._popover').bind('click',function(e){e.preventDefault()});

    78     $('.project-title-editor ._popover').popover({

    79         html : true,

    80         content : function(){

    81             var previousValue = $('.project-title').text(),

    82                 formInput = 

    83                     '<form action="#" class="project-title-editor-form">'+

    84                         '<input type="text" class="project-title-editor-input" value="'+previousValue+'">'+

    85                     '</form>';

    86             return formInput;

    87         }

    88     });

    89 

    90     $('body').on('click', function (e) {

    91         $('._popover').each(function () {

    92             if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {

    93                 $(this).popover('hide');

    94             }

    95         });

    96     });

    97 

    98     $('body').on('submit', '.project-title-editor-form', function(e){

    99         e.preventDefault();

   100         $('._popover').popover('hide');

   101     });

   102 

   103     $(document).on('keyup', '.project-title-editor-input', function() {

   104         $('.project-title').html($(this).val());

   105     });

   106 //chapter

   107     $('.list-chapter-wrap').on('click', '.edit-chapter', function(e){

   108         e.preventDefault();

   109         var viewChapter = {

   110             titre : 'titre du chapitre',

   111             tags : 'tag 1, tag 2, tag 3',

   112             description : 'lorem ipsum'

   113         }

   114         

   115         $.get('template.html', function(templates){

   116             var tpl = $(templates).filter('#tpl-chapter-edit').html();

   117             var tpl = Mustache.render(tpl, viewChapter);

   118             $('.form-chapter-edit').empty().append(tpl);

   119         });

   120     });

   121     //nouveau chapitre

   122     $('.chapter-widget').on('click', '.btn-cut-chapter', function(e){

   123         e.preventDefault();

   124         var uniqId = 'id' + (new Date()).getTime();

   125         $.get('template.html', function(templates){

   126             var viewChapterRow = {

   127                     id : uniqId

   128                 };

   129             var tpl = $(templates).filter('#tpl-chapter-row').html();

   130             var tpl = Mustache.render(tpl, viewChapterRow);

   131             $('.list-chapter-rows-wrap').append(tpl);

   132         });

   133     });

   134 //tab

   135     $('#annotation-tab').on('click', 'a', function(e){

   136         e.preventDefault();

   137         $(this).tab('show');

   138     });

   139     $('#annotation-tab a:last-child').tab('show');

   140 

   141     //fermer tab

   142     $('#annotation-tab').on('click', 'span.close-tab', function(e){

   143         e.preventDefault();e.stopPropagation();

   144         var idTab = $(this).parents('a').attr('href');

   145         $(this).closest('li').remove();

   146         $('.tab-content '+idTab).remove();

   147         $('#tab-list-annotation').tab('show');

   148     });

   149     

   150     //ouvrir tab

   151     $(document).on('click', '.open-tab', function(e){

   152         e.preventDefault();

   153         var type = $(this).attr('data-type');

   154         var data = $(this).attr('data-data'); // à définir

   155         openNewTab(type);

   156     });

   157 

   158     //edit annotation

   159     $('#list-annotations').on('click', 'a.btn-edit-annotation', function(e){

   160         e.preventDefault();

   161 

   162         var idAnnotation = $(this).attr('data-id');

   163         //si il est déjà ouvert

   164         if($('#annotation-'+idAnnotation).length){

   165             $('a[href=#annotation-'+idAnnotation+']').tab('show');

   166         }else{

   167             var typeAnnotation = $(this).attr('data-type'),

   168                 data = {id:idAnnotation};

   169             openNewTab(typeAnnotation, data);

   170         } 

   171     });

   172 

   173     function openNewTab(type, data){

   174 

   175         var uniqId = 'id' + (new Date()).getTime(),

   176             idAnnotation = (data !== undefined) ? data.id : uniqId,

   177             tabContent = $('<div class="tab-pane" id="annotation-'+idAnnotation+'"></div>'),

   178             iconTab;

   179 

   180 

   181         $.get('template.html', function(templates){

   182             //head commun à tous

   183             var view = {

   184                     titre : "un titre mustache",

   185                     id : uniqId

   186                 };

   187             var tplHead = $(templates).filter('#tpl-head').html();

   188             var output = Mustache.render(tplHead, view);

   189             $(tabContent).append(output);

   190             $(tabContent).find(".slider-duration").slider(configSlider);

   191 

   192             //type

   193             var viewType = {id : uniqId};

   194             var tpl = $(templates).filter('#tpl-'+type).html();

   195             tpl = Mustache.render(tpl, viewType);

   196             $(tabContent).append(tpl);

   197             $('.tab-content').append(tabContent);

   198 

   199             //particularité selon type

   200             switch(type){

   201                 case 'video': iconTab = 'film';

   202                     break;

   203                 case 'text': 

   204                     iconTab = 'align-left';

   205                     $(tabContent).find('.wysiwyg').cleditor(wysiwygConfig);

   206                     break;

   207                 case 'html': iconTab = 'link';

   208                     break;

   209                 case 'diaporama': iconTab = 'picture';

   210                     $(tabContent).find('.number-spin').spin(spinParam);

   211                     $(tabContent).find('.ui-sortable').sortable({

   212                         stop : function(event, ui){

   213                             disabledBtnSortable($(this));

   214                         }

   215                     });

   216                     break;

   217             }

   218             $(".nav-tabs li:last-child").after('<li><a href="#annotation-'+idAnnotation+'"><i class="icon-'+iconTab+'"></i> New <span class="close-tab">&times;</span></a></li>');

   219             $('a[href=#annotation-'+idAnnotation+']').tab('show');

   220         });

   221     }//openNewTab()

   222 

   223 //diaporama

   224 function addImageToDiaporama(diaporama){

   225         $.get('template.html', function(templates){

   226             var tplDiapo = $(templates).filter('#tpl-diaporama-row').html(),

   227                 uniqId = 'id' + (new Date()).getTime(),

   228                 viewDiapo = { ridid : uniqId};

   229             tplDiapo = Mustache.render(tplDiapo, viewDiapo);

   230             diaporama.append(tplDiapo);

   231             disabledBtnSortable(diaporama);

   232         });

   233     };

   234 

   235     $(document).on('click', '.ui-sortable .btn-sort', function(e){

   236         e.preventDefault();

   237         var row = $(this).parents('tr.row-image-diaporama'),

   238             listDiaporama = $(this).parents('.list-image-diaporama');

   239 

   240         if($(this).hasClass('down'))

   241             row.insertAfter(row.next());

   242         else if($(this).hasClass('up'))

   243             row.insertBefore(row.prev());

   244 

   245         disabledBtnSortable(listDiaporama);

   246     });

   247 

   248     function disabledBtnSortable(listDiaporama){

   249         listDiaporama.find('.btn-sort.disabled').removeClass('disabled');

   250         listDiaporama.find('tr.row-image-diaporama:first-child').find('.btn-sort.up').addClass('disabled');

   251         listDiaporama.find('tr.row-image-diaporama:last-child').find('.btn-sort.down').addClass('disabled');

   252     }

   253 

   254     $(document).on('click', 'a.open-modal', function(e){

   255         e.preventDefault();

   256         var modalRemote = $(this).attr('href'),

   257             typeMedia = $(this).attr('data-type-media'),

   258             modalTitleInfo = $(this).attr('data-title'),

   259             diaporama = $(this).attr('data-diaporama'),

   260             idAnnotation = $(this).attr('data-id'),

   261             titleFront;

   262 

   263         if(diaporama !== undefined){

   264             global.diaporama = diaporama;

   265         }

   266         if(idAnnotation !== undefined){

   267             global.idAnnotation = idAnnotation;

   268         }

   269 

   270         switch(typeMedia){

   271             case 'video' : titleFront = '<i class="icon-film"></i> Vidéo - '+modalTitleInfo; break;

   272             case 'image' : titleFront = '<i class="icon-picture"></i> Image - '+modalTitleInfo; break;

   273         }

   274         $('#modal-template .modal-header h3').html(titleFront);

   275 

   276         $("#modal-template .modal-body").load(modalRemote, function() { 

   277             $("#modal-template").modal("show"); 

   278         });

   279 

   280     });

   281 

   282 //sauvegarder annotation

   283 $('.tab-content').on('click', '.btn-save-annotation', function(e){

   284     e.preventDefault();

   285     var idAnnotation = $(this).attr('data-id');

   286 });

   287 

   288 //annotation html

   289 $('.tab-content').on('click', '.btn-html-apercu', function(e){

   290     e.preventDefault();

   291 

   292     var apercuWrap = $(this).parents('.edit-annotation-html').find('.html-apercu'),

   293         htmlTextarea = $(this).parents('.edit-annotation-html').find('textarea');

   294 

   295     apercuWrap.empty().html(htmlTextarea.val());

   296 });

   297 

   298 //annotation > diaporama (spin)

   299 var spinParam = {

   300     imageBasePath :'lib/spin/img/',

   301     max:60,

   302     min:0

   303 };

   304 

   305 //config

   306 //CLEditor annotation > text (wysiwyg)

   307 //http://premiumsoftware.net/cleditor/docs/GettingStarted.html#optionalParameters

   308 var wysiwygConfig = {

   309     width:        456, 

   310     height:       250, 

   311     controls:     "bold italic underline strikethrough | font size " +

   312                     "style | color highlight removeformat | bullets numbering | outdent ",

   313     fonts:        "Arial,Arial Black,Comic Sans MS,Courier New,Narrow,Garamond," +

   314                     "Georgia,Impact,Sans Serif,Serif,Tahoma,Trebuchet MS,Verdana",

   315     sizes:        "1,2,3,4,5,6,7",

   316     styles:       [["Paragraph", "<p>"], ["Header 1", "<h1>"], ["Header 2", "<h2>"],

   317                     ["Header 3", "<h3>"],  ["Header 4","<h4>"],  ["Header 5","<h5>"],

   318                     ["Header 6","<h6>"]],

   319     docType:      '<!DOCTYPE HTML>',

   320     bodyStyle:    "margin:0; font-family: 'Helvetica Neue',​Helvetica,​Arial,​sans-serif;"

   321 };

   322 

   323 //slider

   324 var configSlider = {

   325     range: true,

   326     values: [ 0, 1*60*1000 ],

   327     min: 0,

   328     max: 10*60*1000,

   329     slide: function( event, ui ) {

   330         

   331         var debutString = millisecondsToString(ui.values[0]);

   332         var endString = millisecondsToString(ui.values[1]);

   333         var durationString = millisecondsToString(ui.values[1] - ui.values[0]);

   334 

   335         var idSlider = $(this).attr('data-id');

   336         

   337         $( '#'+ idSlider +'-begin' ).html(debutString);

   338         $( '#'+ idSlider +'-duration' ).html(durationString);

   339         $( '#'+ idSlider +'-end' ).html(endString);

   340         

   341     }

   342 };

   343 

   344 

   345 //test

   346 if($(".wysiwyg").length){

   347     $(".wysiwyg").cleditor(wysiwygConfig);

   348 }

   349 

   350 if($(".number-spin").length){

   351     $('.number-spin').spin(spinParam);

   352 }

   353 

   354 

   355 disabledBtnSortable($('.ui-sortable'))

   356 $('.ui-sortable').sortable({

   357     stop : function(event, ui){

   358         disabledBtnSortable($(this));

   359     }

   360 });

   361 

   362 

   363 

   364 

   365 $('.slider-duration').slider(configSlider);

   366 

   367 function millisecondsToString(milliseconds) {

   368     var oneHour = 3600000;

   369     var oneMinute = 60000;

   370     var oneSecond = 1000;

   371     var seconds = 0;

   372     var minutes = 0;

   373     var hours = 0;

   374     var result;

   375 

   376     if (milliseconds >= oneHour) {

   377         hours = Math.floor(milliseconds / oneHour);

   378     }

   379 

   380     milliseconds = hours > 0 ? (milliseconds - hours * oneHour) : milliseconds;

   381 

   382     if (milliseconds >= oneMinute) {

   383         minutes = Math.floor(milliseconds / oneMinute);

   384     }

   385 

   386     milliseconds = minutes > 0 ? (milliseconds - minutes * oneMinute) : milliseconds;

   387 

   388     if (milliseconds >= oneSecond) {

   389         seconds = Math.floor(milliseconds / oneSecond);

   390     }

   391 

   392     milliseconds = seconds > 0 ? (milliseconds - seconds * oneSecond) : milliseconds;

   393 

   394     if (hours > 0) {

   395         result = (hours > 9 ? hours : "0" + hours) + "h";

   396     } else {

   397         result = "";

   398     }

   399 

   400     if (minutes > 0) {

   401         result += (minutes > 9 ? minutes : "0" + minutes) + "m";

   402     } else {

   403         result += "00m";

   404     }

   405 

   406     if (seconds > 0) {

   407         result += (seconds > 9 ? seconds : "0" + seconds) + "s";

   408     } else {

   409         result += "00s";

   410     }

   411 /*

   412     if (milliseconds > 0) {

   413         result += (milliseconds > 9 ? milliseconds : "0" + milliseconds);

   414     } else {

   415 

   416         result += "00";

   417     }

   418 */

   419     return result;

   420 }

   421 })(jQuery);