filex/templates/filex/upload.js.html

   1 {% load staticfiles %}
   2
   3 <script src="{% static 'filex/fileupload/jquery.ui.widget.js' %}"></script>
   4 <script src="{% static 'filex/fileupload/jquery.iframe-transport.js' %}"></script>
   5 <script src="{% static 'filex/fileupload/jquery.fileupload.js' %}"></script>
   6 <script src="{% static 'filex/underscore/underscore-min.js' %}"></script>
   7 <script src="{% static 'filex/humanize/humanize-duration.js' %}"></script>
   8
   9 <script>
  10     $(function () {
  11         'use strict';
  12
  13         var template = _.template($('#template').html());
  14
  15         function humanBytes(bytes, no_unit) {
  16             function format(val, unit) {
  17                 if(no_unit)
  18                     return val;
  19
  20                 return val + ' ' + unit;
  21             }
  22
  23             if(bytes == 0)
  24                 return format('0', 'B');
  25
  26             var k = 1024,
  27                 sizes = ['B', 'KB', 'MB', 'GB', 'TB'],
  28                 i = Math.floor(Math.log(bytes) / Math.log(k));
  29
  30             return format((bytes / Math.pow(k, i)).toFixed(1), sizes[i]);
  31         }
  32
  33         $('#files').fileupload({
  34             sequentialUploads: true,
  35             add: function (e, data) {
  36                 $.each(data.files, function (index, file) {
  37                     data.context = $(template(file));
  38                     $('#elements').append(data.context);
  39                 });
  40
  41                 data.submit();
  42             },
  43             progress: function (e, data) {
  44                 var progress = parseInt(data.loaded / data.total * 100, 10);
  45
  46                 data.context.find('.progress-bar').css('width', progress+'%').attr('aria-valuenow', data.loaded);
  47                 data.context.find('.progress-bar span').text(progress+'%');
  48
  49                 if (data.loaded < data.total) {
  50                     data.context.find('.bit-rate').text(humanBytes(data.bitrate / 8) + '/s');
  51                     data.context.find('.progress-info').text(humanBytes(data.loaded, true) + ' / ' + humanBytes(data.total));
  52                 }
  53             },
  54             progressall: function (e, data) {
  55                 var remaining = (data.total - data.loaded) / (data.bitrate / 8);
  56
  57                 if (remaining) {
  58                     $('#btn-close').hide();
  59                     $('#status').text('Pozostało ' + (humanizeDuration(remaining * 1000, {language: 'pl', round: true}) || 'kilka sekund'));
  60                 }
  61                 else {
  62                     $('#btn-close').show();
  63                     $('#status').text('');
  64                 }
  65             },
  66             done: function (e, data) {
  67                 data.context.find('.bit-rate').text('');
  68                 data.context.find('.progress-info').text('Zakończono');
  69             },
  70             fail: function (e, data) {
  71                 data.context.find('.progress-info').text('Błąd');
  72                 console.log(data.errorThrown);
  73                 console.log(data.textStatus);
  74             }
  75         });
  76
  77         $(window).on('beforeunload', function() {
  78             if ($('#files').fileupload('active'))
  79                 return 'Nie zakończono przesyłania wszystkich plików, czy chcesz kontynuować?';
  80         });
  81
  82         $(window).on('dragenter dragleave drop', function(e) {
  83             $('#drop-overlay').toggleClass('in');
  84         })
  85
  86     });
  87 </script>
  88
  89 <script type="text/template" id="template">
  90     <div class="item">
  91         <div class="text clearfix">
  92             <span class="name"><%= name %></span>
  93             <span class="status pull-right">
  94                 <em class="small bit-rate" style="margin-right: 15px"></em>
  95                 <span class="text-muted progress-info">Oczekiwanie</span>
  96             </span>
  97         </div>
  98
  99         <div class="progress">
 100             <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="<%= size %>" style="width: 0;">
 101                 <span class="sr-only">0%</span>
 102             </div>
 103         </div>
 104     </div>
 105 </script>