script.js 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262
  1. /**
  2. * FancyUpload Showcase
  3. *
  4. * @license MIT License
  5. * @author Harald Kirschner <mail [at] digitarald [dot] de>
  6. * @copyright Authors
  7. */
  8. window.addEvent('domready', function() {
  9. // reusing elements
  10. var list = $('file-list-0');
  11. var listFail = $('file-list-1');
  12. var dummy = list.getElement('li.file-placeholder');
  13. // custom File class for individual files
  14. var File = new Class({
  15. Extends: Swiff.Uploader.File,
  16. initialize: function(uploader, data) {
  17. this.parent(uploader, data);
  18. this.addEvents({
  19. 'open': this.onOpen,
  20. 'remove': this.onRemove,
  21. 'requeue': this.onRequeue,
  22. 'progress': this.onProgress,
  23. 'stop': this.onStop,
  24. 'complete': this.onComplete
  25. });
  26. },
  27. render: function() {
  28. // More validation here
  29. this.ui = {};
  30. this.ui.element = new Element('li', {'class': 'file', id: 'file-' + this.id});
  31. this.ui.title = new Element('span', {'class': 'file-title', href: '#file-' + this.id, text: this.name});
  32. this.ui.status = new Element('span', {'class': 'file-status', title: 'Status', html: 'Status'});
  33. this.ui.progress = new Element('div', {'class': 'file-progress', title: 'Progress', html: 'Progress'});
  34. this.ui.links = new Element('span', {'class': 'file-links'});
  35. if (this.invalid) {
  36. this.ui.element.addClass('file-invalid');
  37. this.ui.status.set('html', 'Invalid file: ' + this.validationError || 'Unknown error');
  38. this.ui.title.addEvent('click', this.remove.bind(this));
  39. } else {
  40. new Element('a', {html: 'Start', href: '#'}).addEvent('click', function() {
  41. this.start();
  42. return false;
  43. }.bind(this)).inject(this.ui.links);
  44. new Element('a', {html: 'Stop', href: '#'}).addEvent('click', function() {
  45. this.stop();
  46. return false;
  47. }.bind(this)).inject(this.ui.links);
  48. new Element('a', {html: 'Remove', href: '#'}).addEvent('click', function() {
  49. this.remove();
  50. return false;
  51. }.bind(this)).inject(this.ui.links);
  52. new Element('a', {html: 'Requeue', href: '#'}).addEvent('click', function() {
  53. this.requeue();
  54. return false;
  55. }.bind(this)).inject(this.ui.links);
  56. }
  57. this.ui.element.adopt(
  58. this.ui.links,
  59. this.ui.title,
  60. this.ui.status,
  61. this.ui.progress
  62. ).inject((this.invalid) ? listFail : list).highlight((this.invalid) ? '#f00' : null);
  63. return this.parent();
  64. },
  65. toggle: function() {
  66. if (this.status == Swiff.Uploader.File.STATUS_RUNNING) this.stop();
  67. else this.requeue();
  68. return false;
  69. },
  70. onOpen: function() {
  71. this.ui.element.addClass('file-running');
  72. this.ui.status.set('html', 'Starting');
  73. },
  74. onRequeue: function() {
  75. this.ui.status.set('html', 'Pending');
  76. },
  77. onProgress: function() {
  78. var progress = Swiff.Uploader.formatUnit(this.progress.rateAvg, 'bps')
  79. + ' - ' + Swiff.Uploader.formatUnit(this.progress.bytesLoaded, 'b')
  80. + ' of ' + Swiff.Uploader.formatUnit(this.size, 'b');
  81. var status = Swiff.Uploader.formatUnit(this.progress.timeRemaining, 's') + ' left';
  82. this.ui.progress.set('html', progress);
  83. this.ui.status.set('html', status);
  84. },
  85. onStop: function() {
  86. this.ui.element.removeClass('file-running');
  87. this.ui.progress.set('html', '');
  88. this.ui.status.set('html', 'Stopped');
  89. },
  90. onComplete: function() {
  91. this.onStop();
  92. this.ui.element.addClass('file-complete');
  93. this.ui.status.set('text', this.response.text || this.response.error);
  94. },
  95. onRemove: function() {
  96. this.ui = this.ui.element.destroy();
  97. }
  98. });
  99. /**
  100. * Overall statictics
  101. */
  102. var queueNodes = {
  103. bytesLoaded: $('queue-bytesLoaded'),
  104. files: $('queue-files'),
  105. percentLoaded: $('queue-percentLoaded'),
  106. rate: $('queue-rate'),
  107. size: $('queue-size')
  108. };
  109. var updateQueue = function(data) {
  110. queueNodes.files.set('html', data.files);
  111. queueNodes.bytesLoaded.set('html', Swiff.Uploader.formatUnit(data.bytesLoaded, 'b'));
  112. queueNodes.percentLoaded.set('html', data.percentLoaded);
  113. queueNodes.rate.set('html', Swiff.Uploader.formatUnit(data.rate, 'bps'));
  114. queueNodes.size.set('html', Swiff.Uploader.formatUnit(data.size, 'b'));
  115. };
  116. /**
  117. * Updating settings
  118. */
  119. /* The *famous* Accordion-by-mouseover. Hidden between the lines and not enabled <8+)
  120. *
  121. var settings = $('settings');
  122. var togglers = settings.getElements('label span:index(0)');
  123. var magic = new Accordion(togglers, settings.getElements('label span + span'));
  124. var timer;
  125. togglers.addEvent('mouseenter', function() {
  126. $clear(timer);
  127. timer = magic.display.delay(100, magic, this.getNext());
  128. });
  129. */
  130. $('option-url').addEvent('change', function() {
  131. swf.setOptions({url: this.value});
  132. this.getParent().highlight();
  133. });
  134. $('option-multiple').addEvent('change', function() {
  135. swf.setOptions({multiple: !!(this.checked)});
  136. this.getParent().highlight();
  137. });
  138. $('option-size-min').addEvent('change', function() {
  139. swf.setOptions({fileSizeMin: (this.value > 0) ? this.value : 0});
  140. this.getParent().highlight();
  141. });
  142. $('option-size-max').addEvent('change', function() {
  143. swf.setOptions({fileSizeMax: (this.value > 0) ? this.value : 0});
  144. this.getParent().highlight();
  145. });
  146. $('option-queued').addEvent('change', function() {
  147. swf.setOptions({queued: (this.value > 0) ? this.value : false});
  148. this.getParent().highlight();
  149. });
  150. var filters = [
  151. null,
  152. '*.png',
  153. '*.pdf',
  154. {
  155. 'Images (*.jpg, *.jpeg, *.gif, *.png)': '*.jpg; *.jpeg; *.gif; *.png',
  156. 'Documents (*.png, *.xdoc)': '*.png; *.xdoc'
  157. }
  158. ];
  159. $('option-filter').addEvent('change', function() {
  160. swf.setOptions({typeFilter: filters[this.selectedIndex]});
  161. this.getParent().highlight();
  162. });
  163. $('option-enable').addEvent('change', function() {
  164. swf.setEnabled(!!(this.checked));
  165. this.getParent().highlight();
  166. });
  167. /**
  168. * Uploader instance
  169. */
  170. var swf = new Swiff.Uploader({
  171. path: '../../source/Swiff.Uploader.swf',
  172. url: $('option-url').value,
  173. verbose: true,
  174. container: $('button-select-0'),
  175. fileClass: File,
  176. buttonImage: '../../assets/button_select.black.png',
  177. width: 149,
  178. height: 31,
  179. params: {
  180. wMode: 'transparent'
  181. },
  182. onLoad: function() {
  183. $('queue-clear-0').addEvent('click', function(){
  184. swf.remove();
  185. return false;
  186. });
  187. },
  188. onBrowse: function() {
  189. var styles = document.getCoordinates();
  190. styles.lineHeight = styles.height;
  191. styles.visibility = 'hidden';
  192. },
  193. onCancel: function() {},
  194. onSelectSuccess: function() {
  195. if (dummy) {
  196. dummy = dummy.destroy();
  197. $('button-start-0').removeClass('button-start-disabled');
  198. }
  199. },
  200. onQueue: updateQueue
  201. });
  202. /*
  203. this.overlay = new Element('div', {
  204. id: 'overlay-select',
  205. styles: styles,
  206. html: 'Selecting Files for Upload ...'
  207. }).inject(document.body).fade(0, 0.7);
  208. this.overlay = this.overlay.destroy();
  209. */
  210. $('button-start-0').addEvent('click', function(){
  211. if (swf.loaded && (!Browser.Platform.linux || window.confirm('Warning: Due to a misbehaviour of Adobe Flash Player on Linux,\nthe browser will probably freeze during the upload process.\nSince you are prepared now, the upload will start right away ...'))) {
  212. swf.start();
  213. }
  214. return false;
  215. });
  216. });