API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Jan 29th, 2015
184
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 14.80 KB | None | 0 0
raw download clone embed print report
  1. {% extends "KlickpagesUserBundle::media-center-modal.html.twig" %}
  2.  
  3. {% block header %}Central de midias{% endblock %}
  4.  
  5. {% block body %}
  6.  
  7.     <div class="help-block">As mídias armazenadas aqui poderão ser sempre usadas nos seus </div>
  8.  
  9.     <span class="mediaCenter-filter-title">Visualizar:</span>
  10.     <ul class="mediaCenter-filter">
  11.         <li id="all" class="active">Todos</li>
  12.         <li id="image">Imagens</li>
  13.         <li id="video">Vídeos</li>
  14.         <li id="audio">Áudios</li>
  15.     </ul>
  16.  
  17.     <a type="button" class="mediaCenter-trash" id="trash" ></a>
  18.  
  19.     <form action="#" class="mediaCenter-search">
  20.         <label><input type="text" class="find">
  21.         <span><i class="fa fa-search"></i></span></label>
  22.     </form>
  23.  
  24.     <div class="mediaCenter-box-alert">        
  25.         <div class="alert alert-warning mediaCenter-warning" role="alert">
  26.             <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span> <strong>Atenção: </strong>
  27.             <span>A Central de Mídias está sendo configurada. O processo de configuração pode levar alguns minutos. Por favor, aguarde.</span>
  28.         </div>
  29.         <img src="{{ asset('bundles/klickpagesuser/img/loader-circular.gif') }}" alt="Carregando...">
  30.     </div>
  31.  
  32.     <ul class="mediaCenter-list" style="display: none" {# Lista temporariamente escondida p/ visualização do .warning #}>
  33.  
  34.         {# Exemplos para cada possível tipo de mídia: #}
  35.        
  36.         {# Video #}
  37.         <li class="mediaCenter-video">
  38.             <!-- <div class="shadow"></div> -->
  39.             <input type="checkbox" name="" value=""/>
  40.             <span></span>
  41.             <a class="preview" rel="mediaCenter-gallery" href="#mediaCenter-video-1" data-title="video.mp4">
  42.                 <img src="http://info.abril.com.br/images/materias/2014/09/thumbs/fb-99968-7-fotos-da-nova-ferrari-458-speciale-a-resized.jpg">
  43.                 <div class="mediaCenter-selector">
  44.                 </div>
  45.                 <div class="mediaCenter-option">
  46.                     <div class="mediaCenter-option-play"></div>
  47.                     <span class="mediaCenter-subtitle">video.mp4</span>
  48.                 </div>
  49.                 <div class="mediaCenter-option-type">
  50.                     <i class="fa fa-video-camera"></i>
  51.                 </div>
  52.             </a>
  53.             <div style="none">
  54.                 <div id="mediaCenter-video-1">
  55.                     <video controls>
  56.                         <source src="http://techslides.com/demos/sample-videos/small.webm" type="video/webm">
  57.                         <source src="http://techslides.com/demos/sample-videos/small.ogv" type="video/ogg">
  58.                         <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
  59.                         Seu browser não suporta a video audio.
  60.                     </video>
  61.                 </div>
  62.             </div>
  63.         </li>
  64.  
  65.         {# Imagem #}
  66.         <li class="mediaCenter-image">
  67.             <!-- <div class="shadow"></div> -->
  68.             <input type="checkbox" name="" value=""/>
  69.             <span></span>            
  70.             <a class="preview" rel="mediaCenter-gallery" href="http://info.abril.com.br/images/materias/2014/09/thumbs/thumb-99968-7-fotos-da-nova-ferrari-458-speciale-a-resized.jpg" data-title="Screen Shot 2015-01-15 at 09.03.39">
  71.                 <img src="http://info.abril.com.br/images/materias/2014/09/thumbs/fb-99968-7-fotos-da-nova-ferrari-458-speciale-a-resized.jpg">
  72.                 <div class="mediaCenter-selector"></div>
  73.                 <div class="mediaCenter-option">
  74.                     <div class="mediaCenter-option-view"></div>
  75.                     <span class="mediaCenter-subtitle">Screen Shot 2015-01-15 at 09.03.39</span>
  76.                 </div>
  77.                 <div class="mediaCenter-option-type">
  78.                     <i class="fa fa-camera"></i>
  79.                 </div>
  80.             </a>
  81.         </li>
  82.  
  83.         {# Audio #}
  84.          <li class="mediaCenter-audio">
  85.             <!-- <div class="shadow"></div> -->
  86.             <input type="checkbox" name="" value=""/>
  87.             <span></span>
  88.             <a class="preview" rel="mediaCenter-gallery" href="#mediaCenter-audio-1" data-title="lorem-ipsum.mp3">
  89.                 <div class="mediaCenter-selector">
  90.                 </div>
  91.                 <div class="mediaCenter-option">
  92.                     <div class="mediaCenter-option-play"></div>
  93.                     <span class="mediaCenter-subtitle">lorem-ipsum.mp3</span>
  94.                 </div>
  95.                 <div class="mediaCenter-option-type">
  96.                     <i class="fa fa-volume-up"></i>
  97.                 </div>
  98.             </a>
  99.             <div style="none">
  100.                 <div id="mediaCenter-audio-1">
  101.                     <audio controls>
  102.                         <source src="http://demos.w3avenue.com/html5-unleashed-tips-tricks-and-techniques/demo-audio.ogg">
  103.                         <source src="http://demos.w3avenue.com/html5-unleashed-tips-tricks-and-techniques/demo-audio.mp3">
  104.                         Seu browser não suporta a tag audio.
  105.                     </audio>
  106.                 </div>
  107.             </div>
  108.         </li>
  109.  
  110.     </ul>
  111.  
  112. {% endblock %}
  113. {% block footer %}
  114.     <div class="mediaCenter-progress-container" style="display: none;">
  115.         <span class"mediaCenter-progress-title">
  116.             Subindo:
  117.             <span class="mediaCenter-progress-name-file">filename.wav</span>
  118.         </span>
  119.  
  120.         <div class="mediaCenter-progress">
  121.             <span class="mediaCenter-progress-inner" style="width:0%"></span>
  122.         </div>
  123.     </div>
  124.  
  125.     <a type="button" class="btn" id="finish">Concluir</a>
  126.     <div class="custom-mediaCenter-upload">
  127.         <input type="file" id="upload" type="button" class="mediaCenter-upload" />
  128.         novo upload
  129.     </div>
  130. {% endblock %}
  131.  
  132.  
  133. {% block javascripts %}
  134. <script type="text/javascript">
  135.    
  136.     // Commented by Thiago Martins
  137.     // - É necessário melhorar esse código para os novos tipos (video, audio). Anteriormente, só existia o layout p/ imagens
  138.     // $.ajax({
  139.     //     url: window.mediaRouteAjax
  140.     // })
  141.     // .done(function(data) {
  142.     //     $.each(data.media_center.files, function(index, val) {
  143.     //         var item = [];
  144.  
  145.     //         item.push('<li class="mediaCenter-image mediaCenter-' + val.type + '-type">');
  146.     //         item.push('<input type="text" value="' + val.url + '" style="display:none"/>');
  147.     //         item.push('<input type="checkbox" value="' + index + '"/>');
  148.     //         item.push('<span>' + val.name +'</span>');
  149.     //         item.push('<img src="data:' + val.mime + ';base64,' + val.content + '" class="img-responsive"  />');
  150.     //         item.push('<div class="mediaCenter-selector"></div>');
  151.     //         item.push('<div class="mediaCenter-option">');
  152.     //         item.push('<div class="mediaCenter-option-play"></div>');
  153.     //         item.push('</div>');
  154.     //         item.push('<div class="mediaCenter-option-type">');
  155.     //         item.push('<i class="fa fa-camera"></i>');
  156.     //         item.push('</div>');
  157.     //         item.push('</li>');
  158.  
  159.     //         $('.mediaCenter-list').append(item.join(''));
  160.     //     });
  161.  
  162.     //     $('.mediaCenter-img').lazyload();
  163.     // });
  164.  
  165.     var rawModelName = '{{ ngModelName }}',
  166.         targetUrl = $('#handle-ajax-upload-route').val() || false;
  167.  
  168.     function getInternetExplorerVersion() {      
  169.         var rv = -1;
  170.         if (navigator.appName == 'Microsoft Internet Explorer') {
  171.             var ua = navigator.userAgent;
  172.             var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
  173.             if (re.exec(ua) != null)
  174.                 rv = parseFloat(RegExp.$1);
  175.         };
  176.         return rv;
  177.     };
  178.    
  179.     jQuery(document).ready(function ($) {  
  180.  
  181.         $(".modal-kp .preview").fancybox({
  182.             padding     : 0,
  183.             maxWidth    : 720,
  184.             minWidth    : 640,
  185.             aspectRatio : true,
  186.             closeClick  : false,
  187.             scrolling   : 'no',
  188.             openEffect  : 'none',
  189.             closeEffect : 'none',
  190.             wrapCSS     : 'modal-kp',
  191.             beforeShow  : function() { this.title = this.element.data('title');}
  192.         });    
  193.     });
  194.  
  195.     $("#upload").fileupload({
  196.         url: targetUrl,
  197.         dataType: 'json',
  198.         change: function(e, data){
  199.             if("undefined" != typeof data.files[0]){
  200.                 $('.mediaCenter-progress-name-file').html(data.files[0].name);
  201.             }
  202.         },
  203.         done: function(e, data) {
  204.             $.each(data.result.files, function(index, val) {
  205.  
  206.                 var item = [];
  207.  
  208.                 item.push('<li class="mediaCenter-image mediaCenter-' + val.type + '-type">');
  209.                 item.push('<input type="text" value="' + val.url + '" style="display:none"/>');
  210.                 item.push('<input type="checkbox" value="' + index + '"/>');
  211.                 item.push('<span>'+val.name+'</span>');
  212.                 item.push('<img src="data:' + val.mime + ';base64,' + val.content + '" class="img-responsive"  />');
  213.                 item.push('<div class="mediaCenter-selector"></div>');
  214.                 item.push('<div class="mediaCenter-option">');
  215.                 item.push('<div class="mediaCenter-option-play"></div>');
  216.                 item.push('</div>');
  217.                 item.push('<div class="mediaCenter-option-type">');
  218.                 item.push('<i class="fa fa-camera"></i>');
  219.                 item.push('</div>');
  220.                 item.push('</li>');
  221.  
  222.                 $('.mediaCenter-list').prepend(item.join(''));
  223.                 $('.mediaCenter-progress-container').css('display', 'none');
  224.                 $('.mediaCenter-progress .mediaCenter-progress-inner').css(
  225.                     'width',
  226.                     0 + '%'
  227.                 );
  228.             });
  229.  
  230.             $('.mediaCenter-img').lazyload();
  231.         },
  232.         progressall: function (e, data) {
  233.             var progress = parseInt(data.loaded / data.total * 100, 10);
  234.  
  235.             $('.mediaCenter-progress-container').css('display', 'block');
  236.             $('.mediaCenter-progress .mediaCenter-progress-inner').css(
  237.                 'width',
  238.                 progress + '%'
  239.             );
  240.         }
  241.     });
  242.  
  243.     $('#finish').click(function() {
  244.         var selected = '';
  245.  
  246.         $('.mediaCenter-list input[type=checkbox]').each(function () {
  247.             selected = this.checked ? $(this).prev('input[type=text]') : selected;
  248.         });
  249.  
  250.         if ( $(selected).is( "input[type=text]" )) {
  251.             selected = $(selected).val();
  252.             getGlobalPageScope().applyValue(rawModelName, selected);
  253.             rawModelName = rawModelName.split('.');
  254.             var callback = [];
  255.             $.each(rawModelName, function( index, value ) {
  256.                 if (value == 'custom') {
  257.                     return false;
  258.                 }
  259.                 if (value.indexOf("items") > -1) {
  260.                     return false;
  261.                 }
  262.                 if (value.indexOf("value") > -1) {
  263.                     return false;
  264.                 }
  265.                 callback.push(value);
  266.             });
  267.             callback = callback.join('.');
  268.             $('[ng-model="'+ callback +'"]').trigger('click');
  269.             //$('[ng-model="page.content.logo"]').click();
  270.             rawModelName = rawModelName.join('.');
  271.         }
  272.     });
  273.  
  274.     $('#trash').click(function() {
  275.         var values = [];
  276.  
  277.         $('.mediaCenter-image input:checked').each(function(){
  278.             values.push(this.value);
  279.         });
  280.         var data = {files : values};
  281.         $.ajax({
  282.             type: "POST",
  283.             url: "{{ url('klickpages_media_remove') }}",
  284.             data: data
  285.         })
  286.         .done(function(data) {
  287.             $('.mediaCenter-list').empty();
  288.             $.each(data.media_center.files, function(index, val) {
  289.                 var item = [];
  290.  
  291.                 item.push('<li class="mediaCenter-image mediaCenter-' + val.type + '-type">');
  292.                 item.push('<input type="text" value="' + val.url + '" style="display:none"/>');
  293.                 item.push('<input type="checkbox" value="' + index + '"/>');
  294.  
  295.                 item.push('<span>' + val.name +'</span>');
  296.                 item.push('<img src="data:' + val.mime + ';base64,' + val.content + '" class="img-responsive"  />');
  297.                 item.push('<div class="mediaCenter-selector"></div>');
  298.                 item.push('<div class="mediaCenter-option">');
  299.                 item.push('<div class="mediaCenter-option-play"></div>');
  300.                 item.push('</div>');
  301.                 item.push('<div class="mediaCenter-option-type">');
  302.                 item.push('<i class="fa fa-camera"></i>');
  303.                 item.push('</div>');
  304.                 item.push('</li>');
  305.  
  306.                 $('.mediaCenter-list').append(item.join(''));
  307.             });
  308.  
  309.             $('.mediaCenter-img').lazyload();
  310.         });
  311.         $('.mediaCenter-image input:checked').each(function(){
  312.             $(this).parent().remove();
  313.         });
  314.     });
  315.  
  316.  
  317.     $(function() {
  318.         $('.mediaCenter-img').lazyload();
  319.     });
  320.  
  321.     $(function(){
  322.         $('#all').click(function(){
  323.             $('.mediaCenter-video-type').show();
  324.             $('.mediaCenter-image-type').show();
  325.             $('.mediaCenter-audio-type').show();
  326.             $('.mediaCenter-null-type').show();
  327.         });
  328.         $('#video').click(function() {
  329.             $('.mediaCenter-video-type').show();
  330.             $('.mediaCenter-image-type').hide();
  331.             $('.mediaCenter-audio-type').hide();
  332.         });
  333.         $('#image').click(function() {
  334.             $('.mediaCenter-video-type').hide();
  335.             $('.mediaCenter-image-type').show();
  336.             $('.mediaCenter-audio-type').hide();
  337.         });
  338.         $('#audio').click(function() {
  339.             $('.mediaCenter-video-type').hide();
  340.             $('.mediaCenter-image-type').hide();
  341.             $('.mediaCenter-audio-type').show();
  342.         });
  343.     });
  344.  
  345.     $(function(){
  346.         $( ".find" ).keyup(function() {
  347.             if ($('.find').val() != "") {
  348.                 $('.mediaCenter-image span').each(function(){
  349.                     value = $(this).html()
  350.                     console.log(value);
  351.                     if(value.indexOf($('.find').val()) > -1) {
  352.                         $(this).parent().show();
  353.                         console.log('show');
  354.                     } else {
  355.                         $(this).parent().hide();
  356.                         console.log('hide');
  357.                     }
  358.                 });
  359.             } else {
  360.                 $('.mediaCenter-image span').each(function(){
  361.                     $(this).parent().show();
  362.                 });
  363.             }
  364.         });
  365.     });
  366. </script>
  367.  
  368. {% endblock %}
  369.  
  370. {% block stylesheets %}
  371.  
  372. {% endblock %}
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!