main.js 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133
  1. $(function(){
  2. $(document).bind('drop dragover', function (e) {
  3. e.preventDefault();
  4. });
  5. $(document).bind('dragover', function () {
  6. $('.main').addClass('drop');
  7. });
  8. $(document).bind('dragexit dragleave dragend drop', function () {
  9. $('.main').removeClass('drop');
  10. });
  11. var fileupload = $('#fileupload').fileupload({
  12. dataType: 'json',
  13. url: 'upload.json',
  14. dropZone: $(document),
  15. pasteZone: $(document),
  16. add: add
  17. });
  18. fileupload.bind('fileuploaddone', done);
  19. fileupload.bind('fileuploadfail', fail);
  20. fileupload.bind('fileuploadprogress', progress);
  21. $(window).bind('beforeunload', function (e) {
  22. if (xhrCache.length) {
  23. var confirmationMessage = 'There are transfers in progress, navigating away will abort them.';
  24. (e || window.event).returnValue = confirmationMessage; // Gecko + IE
  25. return confirmationMessage; // Webkit, Safari, Chrome etc.
  26. }
  27. });
  28. var xhrCache = [];
  29. var xhrNb = 0;
  30. function add (e, data) {
  31. $('.message').hide();
  32. var xhr = data.submit();
  33. $.each(data.files, function(index, file){
  34. file._ID = xhrNb++;
  35. xhrCache[file._ID] = xhr;
  36. var hasProgressbar = ('FormData' in window);
  37. var html = '<li data-file-id="' + file._ID + '">';
  38. html += '<div class="filename">' + file.name + '</div>';
  39. html += '<div class="progress"><div class="bar" style="width: 0%">0%</div>';
  40. if (!hasProgressbar) { html += '<span class="dots"></span>'; }
  41. html += '</div>';
  42. if (hasProgressbar) { html += '<div class="stop"></div>'; }
  43. html += '</li>';
  44. var tmpl = $(html);
  45. if (!hasProgressbar) {
  46. var progress = tmpl.find('.progress');
  47. var bar = progress.find('.bar');
  48. var dots = progress.find('.dots');
  49. function doting() {
  50. if (bar.css('width') != '0px') { return; }
  51. if (dots.text().length == 3) {
  52. dots.text('');
  53. }
  54. else {
  55. dots.text(dots.text() + '.');
  56. }
  57. setTimeout(doting, 750);
  58. }
  59. setTimeout(doting, 10);
  60. }
  61. $('.uploads ul').append(tmpl);
  62. });
  63. }
  64. function done (e, data) {
  65. $.each(data.files, function (index, file) {
  66. xhrCache.splice(file._ID, 1);
  67. $('li[data-file-id=' + file._ID + ']').addClass('done').text('100%');
  68. });
  69. }
  70. function progress (e, data) {
  71. var prog = Math.ceil(data.loaded / data.total * 100) + '%';
  72. $.each(data.files, function (index, file) {
  73. $('li[data-file-id=' + file._ID + '] .progress .bar').css('width', prog).text(prog);
  74. });
  75. }
  76. function fail (e, data) {
  77. console.log('File transfer failed', data.errorThrown, data.textStatus);
  78. $.each(data.files, function (index, file) {
  79. xhrCache.splice(file._ID, 1);
  80. $('li[data-file-id=' + file._ID + ']').addClass('fail').text('');
  81. });
  82. }
  83. $('.uploads').delegate('.stop', 'click', stopTransfer);
  84. function stopTransfer (e) {
  85. var li = $(e.currentTarget).parent('li');
  86. var id = li.data('file-id');
  87. xhrCache[id].abort();
  88. xhrCache.splice(id, 1);
  89. li.addClass('fail');
  90. }
  91. function resizeThumbnails() {
  92. $('.downloads > div').each(function(index, el) {
  93. $(this).height(Math.ceil($(this).width()*0.55));
  94. });
  95. }
  96. $(document).ready(function() {
  97. resizeThumbnails()
  98. });
  99. $(window).resize(function(event) {
  100. resizeThumbnails();
  101. });
  102. $('a.folder').click(function(event) {
  103. $('#overlay').addClass('shown');
  104. $('#modal ul.downloads').empty();
  105. $(this).parent().find('.content > div').clone().appendTo('#modal ul.downloads');
  106. resizeThumbnails();
  107. });
  108. $('#overlay').click(function(event) {
  109. $(this).toggleClass('shown');
  110. });
  111. if('backgroundSize' in document.documentElement.style) {
  112. $('.icon').addClass('bgz');
  113. }
  114. });