integration/back-office/js/main.js
changeset 1 b95aebb070b5
equal deleted inserted replaced
0:a51471894a9e 1:b95aebb070b5
       
     1 (function(){
       
     2 
       
     3 var _global = {
       
     4     diaporama : ''
       
     5 };
       
     6 
       
     7 //tab ressources
       
     8 	$('.tab-behavior a').click(function (e) {
       
     9 	    e.preventDefault();
       
    10 	    $(this).tab('show');
       
    11     });
       
    12 
       
    13 //modal
       
    14     $('.popup').on('click', '.popup-content a', function(e){
       
    15     	e.preventDefault();
       
    16     	if($(this).hasClass('btn-cancel')){
       
    17     		$(this).parents('.popup').modal('hide');
       
    18     	}
       
    19     	if($(this).hasClass('btn-previsualisation')){
       
    20     		var imgPrev = $('<img src="img/520x520.gif" alt="" />');
       
    21     		$('.previsualisation').empty().append(imgPrev);
       
    22     	}
       
    23     });
       
    24 //edition image
       
    25     $('.popup').on('change', '#media-type-select', function(e){
       
    26         var typeImage = $(this).val();
       
    27         $('.input-image-url, .input-image-upload').hide();
       
    28         $('.input-image-'+typeImage).show();
       
    29     });
       
    30 //bibliotheque
       
    31     //video
       
    32     $('.popup').on('click', '.bibliotheque-video a', function(e){
       
    33         e.preventDefault();
       
    34         alert('une vidéo sélectionnée');
       
    35         $('.popup').modal('hide');
       
    36     });
       
    37     //image
       
    38     $('.popup').on('click', '.bibliotheque-image a', function(e){
       
    39         e.preventDefault();
       
    40         alert('une image sélectionnée');
       
    41         var listDiaporama = $('#'+_global.diaporama);
       
    42         addImageToDiaporama(listDiaporama);
       
    43         $('.popup').modal('hide');
       
    44     });
       
    45 
       
    46     function addImageToDiaporama(diaporama){
       
    47         $.get('template.html', function(templates){
       
    48             var tplDiapo = $(templates).filter('#tpl-diaporama-row').html();
       
    49             diaporama.append(tplDiapo);
       
    50             disabledBtnSortable(diaporama);
       
    51         });
       
    52     };
       
    53 
       
    54     $(document).on('click', 'a.open-modal', function(e){
       
    55     	e.preventDefault();
       
    56     	var modalRemote = $(this).attr('href'),
       
    57     		typeMedia = $(this).attr('data-type-media'),
       
    58     		modalTitleInfo = $(this).attr('data-title'),
       
    59             diaporama = $(this).attr('data-diaporama'),
       
    60     		titleFront;
       
    61 
       
    62         if(diaporama !== undefined){
       
    63             _global.diaporama = diaporama;
       
    64         }
       
    65 
       
    66     	switch(typeMedia){
       
    67     		case 'video' : titleFront = '<i class="icon-film"></i> Vidéo - '+modalTitleInfo; break;
       
    68     		case 'image' : titleFront = '<i class="icon-picture"></i> Image - '+modalTitleInfo; break;
       
    69     	}
       
    70     	$('#modal-template .modal-header h3').html(titleFront);
       
    71 
       
    72     	$("#modal-template .modal-body").load(modalRemote, function() { 
       
    73          	$("#modal-template").modal("show"); 
       
    74     	});
       
    75 
       
    76     });
       
    77 
       
    78     $('.btn-delete').bind('click', function(e){
       
    79         e.preventDefault();
       
    80         var titleMedia = $(this).attr('data-title'),
       
    81             textModal = $('<p>Êtes-vous sûr de vouloir supprimer <strong>'+titleMedia+'</strong> ?</p>'),
       
    82             eltDelete = $(this).attr('href');
       
    83         $("#modal-confirm #btn-delete-modal").attr('data-idEltDelete', eltDelete);
       
    84         $("#modal-confirm .modal-body").empty().append(textModal); 
       
    85         $("#modal-confirm").modal('show');
       
    86     });
       
    87 
       
    88     //confirmation suppression
       
    89     $("#modal-confirm").on('click', '#btn-delete-modal', function(e){
       
    90         e.preventDefault();
       
    91         var idEltDelete = $(this).attr('data-idEltDelete');
       
    92         $(idEltDelete).remove();
       
    93         $("#modal-confirm").modal('hide');
       
    94     });
       
    95 
       
    96     //ZeroClipboard (fonctionne sous localhost)
       
    97     var clip = new ZeroClipboard( $('.clipboard'), {
       
    98       moviePath: "js/ZeroClipboard.swf"
       
    99     });
       
   100     clip.on( 'complete', function(client, args) {
       
   101       alert("Copied text to clipboard: " + args.text );
       
   102     });
       
   103 
       
   104 //page edition
       
   105 //title-editor
       
   106     $('.project-title-editor ._popover').popover({
       
   107         html : true,
       
   108         content : function(){
       
   109             var previousValue = $('.project-title').text(),
       
   110                 formInput = 
       
   111                     '<form action="#" class="project-title-editor-form">'+
       
   112                         '<input type="text" class="project-title-editor-input" value="'+previousValue+'">'+
       
   113                     '</form>';
       
   114             return formInput;
       
   115         }
       
   116     });
       
   117 
       
   118     $('body').on('click', function (e) {
       
   119         $('._popover').each(function () {
       
   120             if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
       
   121                 $(this).popover('hide');
       
   122             }
       
   123         });
       
   124     });
       
   125 
       
   126     $(document).on('keyup', '.project-title-editor-input', function() {
       
   127         $('.project-title').html($(this).val());
       
   128     });
       
   129 //chapter
       
   130     $('.list-chapter-wrap').on('click', '.edit-chapter', function(e){
       
   131         e.preventDefault();
       
   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         var idAnnotation = $(this).attr('data-idAnnotation');
       
   162         //si il est déjà ouvert
       
   163         if($(idAnnotation).length){
       
   164             $('a[href=#'+idAnnotation+']').tab('show');
       
   165         }else{
       
   166             var typeAnnotation = $(this).attr('data-type');
       
   167             openNewTab(typeAnnotation);
       
   168         } */
       
   169         var typeAnnotation = $(this).attr('data-type');
       
   170             openNewTab(typeAnnotation);
       
   171     });
       
   172 
       
   173     function openNewTab(type, data){
       
   174         var idAnnotation = $(".nav-tabs").children().length,
       
   175             tabContent = $('<div class="tab-pane" id="annotation-'+idAnnotation+'"></div>'),
       
   176             iconTab;
       
   177 
       
   178         $.get('template.html', function(templates){
       
   179             //head commun à tous
       
   180             var view = {titre : "un titre mustache"};
       
   181             var tplHead = $(templates).filter('#tpl-head').html();
       
   182             var output = Mustache.render(tplHead, view);
       
   183             $(tabContent).append(output);
       
   184             $(tabContent).find(".slider-duration").slider({
       
   185                 range : true
       
   186             });
       
   187 
       
   188             //type
       
   189             var uniqId = 'id' + (new Date()).getTime(),//test
       
   190                 viewType = {id : uniqId};
       
   191             var tpl = $(templates).filter('#tpl-'+type).html();
       
   192             tpl = Mustache.render(tpl, viewType);
       
   193             $(tabContent).append(tpl);
       
   194             $('.tab-content').append(tabContent);
       
   195 
       
   196             //particularité selon type
       
   197             switch(type){
       
   198                 case 'video': iconTab = 'film';
       
   199                     break;
       
   200                 case 'text': 
       
   201                     iconTab = 'align-left';
       
   202                     $(tabContent).find('.wysiwyg').cleditor(wysiwygConfig);
       
   203                     break;
       
   204                 case 'html': iconTab = 'link';
       
   205                     break;
       
   206                 case 'diaporama': iconTab = 'picture';
       
   207                     $(tabContent).find('.number-spin').spin(spinParam);
       
   208                     $(tabContent).find('.ui-sortable').sortable({
       
   209                         stop : function(event, ui){
       
   210                             disabledBtnSortable($(this));
       
   211                         }
       
   212                     });
       
   213                     break;
       
   214             }
       
   215             $(".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>');
       
   216             $('a[href=#annotation-'+idAnnotation+']').tab('show');
       
   217         });
       
   218     }//openNewTab()
       
   219 
       
   220 //annotation html
       
   221 $('.tab-content').on('click', '.btn-html-apercu', function(e){
       
   222     e.preventDefault();
       
   223 
       
   224     var apercuWrap = $(this).parents('.edit-annotation-html').find('.html-apercu'),
       
   225         htmlTextarea = $(this).parents('.edit-annotation-html').find('textarea');
       
   226 
       
   227     apercuWrap.empty().html(htmlTextarea.val());
       
   228 });
       
   229 
       
   230 //annotation > diaporama (spin)
       
   231 var spinParam = {
       
   232     imageBasePath :'img/spin/',
       
   233     max:60,
       
   234     min:0
       
   235 };
       
   236 
       
   237 //annotation > text (wysiwyg)
       
   238 //http://premiumsoftware.net/cleditor/docs/GettingStarted.html#optionalParameters
       
   239 var wysiwygConfig = {
       
   240     width:        456, 
       
   241     height:       250, 
       
   242     controls:     "bold italic underline strikethrough subscript superscript | font size " +
       
   243                     "style | color highlight removeformat | bullets numbering | outdent ",
       
   244     fonts:        "Arial,Arial Black,Comic Sans MS,Courier New,Narrow,Garamond," +
       
   245                     "Georgia,Impact,Sans Serif,Serif,Tahoma,Trebuchet MS,Verdana",
       
   246     sizes:        "1,2,3,4,5,6,7",
       
   247     styles:       [["Paragraph", "<p>"], ["Header 1", "<h1>"], ["Header 2", "<h2>"],
       
   248                     ["Header 3", "<h3>"],  ["Header 4","<h4>"],  ["Header 5","<h5>"],
       
   249                     ["Header 6","<h6>"]],
       
   250     docType:      '<!DOCTYPE HTML>',
       
   251     bodyStyle:    "margin:0; font-family: 'Helvetica Neue',​Helvetica,​Arial,​sans-serif;"
       
   252 };
       
   253 
       
   254 //test
       
   255 if($(".wysiwyg").length){
       
   256     $(".wysiwyg").cleditor(wysiwygConfig);
       
   257 }
       
   258 
       
   259 if($(".number-spin").length){
       
   260     $('.number-spin').spin(spinParam);
       
   261 }
       
   262 
       
   263 $('.slider-duration').slider({
       
   264     range : true
       
   265 });
       
   266 
       
   267 disabledBtnSortable($('.ui-sortable'))
       
   268 $('.ui-sortable').sortable({
       
   269     stop : function(event, ui){
       
   270         disabledBtnSortable($(this));
       
   271     }
       
   272 });
       
   273 
       
   274 $(document).on('click', '.ui-sortable .btn-sort', function(e){
       
   275     e.preventDefault();
       
   276     var row = $(this).parents('tr.row-image-diaporama'),
       
   277         listDiaporama = $(this).parents('.list-image-diaporama');
       
   278 
       
   279     if($(this).hasClass('down'))
       
   280         row.insertAfter(row.next());
       
   281     else if($(this).hasClass('up'))
       
   282         row.insertBefore(row.prev());
       
   283 
       
   284     disabledBtnSortable(listDiaporama);
       
   285 });
       
   286 
       
   287 function disabledBtnSortable(listDiaporama){
       
   288     listDiaporama.find('.btn-sort.disabled').removeClass('disabled');
       
   289     listDiaporama.find('tr.row-image-diaporama:first-child').find('.btn-sort.up').addClass('disabled');
       
   290     listDiaporama.find('tr.row-image-diaporama:last-child').find('.btn-sort.down').addClass('disabled');
       
   291 }
       
   292 
       
   293 })(jQuery);