FancyUpload3.Attach.js 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224
  1. /**
  2. * FancyUpload.Attach - Flash meets Ajax for powerful and elegant uploads.
  3. *
  4. * @version 3.0 rc3
  5. *
  6. * @license MIT License
  7. *
  8. * @author Harald Kirschner <mail [at] digitarald [dot] de>
  9. * @copyright Authors
  10. */
  11. if (!window.FancyUpload3) var FancyUpload3 = {};
  12. FancyUpload3.Attach = new Class({
  13. Extends: Swiff.Uploader,
  14. options: {
  15. queued: false,
  16. instantStart: true
  17. },
  18. initialize: function(list, selects, options) {
  19. this.list = $(list);
  20. this.selects = $(selects) ? $$($(selects)) : $$(selects);
  21. options.target = this.selects[0];
  22. options.fileClass = options.fileClass || FancyUpload3.Attach.File;
  23. this.parent(options);
  24. /**
  25. * Button state
  26. */
  27. var self = this;
  28. this.selects.addEvents({
  29. click: function() {
  30. return false;
  31. },
  32. mouseenter: function() {
  33. this.addClass('hover');
  34. self.reposition();
  35. },
  36. mouseleave: function() {
  37. this.removeClass('hover');
  38. this.blur();
  39. },
  40. mousedown: function() {
  41. this.focus();
  42. }
  43. });
  44. if (this.selects.length == 2) {
  45. this.selects[1].setStyle('display', 'none');
  46. this.addEvents({
  47. 'selectSuccess': this.onSelectSuccess,
  48. 'fileRemove': this.onFileRemove
  49. });
  50. }
  51. },
  52. onSelectSuccess: function() {
  53. if (this.fileList.length > 0) {
  54. this.selects[0].setStyle('display', 'none');
  55. this.selects[1].setStyle('display', 'inline');
  56. this.target = this.selects[1];
  57. this.reposition();
  58. }
  59. },
  60. onFileRemove: function() {
  61. if (this.fileList.length == 0) {
  62. this.selects[0].setStyle('display', 'inline');
  63. this.selects[1].setStyle('display', 'none');
  64. this.target = this.selects[0];
  65. this.reposition();
  66. }
  67. },
  68. start: function() {
  69. if (Browser.Platform.linux && !window.confirm(MooTools.lang.get('FancyUpload', 'linuxWarning'))) {
  70. return;
  71. }
  72. this.parent();
  73. }
  74. });
  75. FancyUpload3.Attach.File = new Class({
  76. Extends: Swiff.Uploader.File,
  77. render: function() {
  78. if (this.invalid) {
  79. if (this.validationError) {
  80. var msg = MooTools.lang.get('FancyUpload', 'validationErrors')[this.validationError] || this.validationError;
  81. this.validationErrorMessage = msg.substitute({
  82. name: this.name,
  83. size: Swiff.Uploader.formatUnit(this.size, 'b'),
  84. fileSizeMin: Swiff.Uploader.formatUnit(this.base.options.fileSizeMin || 0, 'b'),
  85. fileSizeMax: Swiff.Uploader.formatUnit(this.base.options.fileSizeMax || 0, 'b'),
  86. fileListMax: this.base.options.fileListMax || 0,
  87. fileListSizeMax: Swiff.Uploader.formatUnit(this.base.options.fileListSizeMax || 0, 'b')
  88. });
  89. }
  90. this.remove();
  91. return;
  92. }
  93. this.addEvents({
  94. 'open': this.onOpen,
  95. 'remove': this.onRemove,
  96. 'requeue': this.onRequeue,
  97. 'progress': this.onProgress,
  98. 'stop': this.onStop,
  99. 'complete': this.onComplete,
  100. 'error': this.onError
  101. });
  102. this.ui = {};
  103. this.ui.element = new Element('li', {'class': 'file', id: 'file-' + this.id});
  104. this.ui.title = new Element('span', {'class': 'file-title', text: this.name});
  105. this.ui.size = new Element('span', {'class': 'file-size', text: Swiff.Uploader.formatUnit(this.size, 'b')});
  106. this.ui.cancel = new Element('a', {'class': 'file-cancel', text: 'Cancel', href: '#'});
  107. this.ui.cancel.addEvent('click', function() {
  108. this.remove();
  109. return false;
  110. }.bind(this));
  111. this.ui.element.adopt(
  112. this.ui.title,
  113. this.ui.size,
  114. this.ui.cancel
  115. ).inject(this.base.list).highlight();
  116. var progress = new Element('img', {'class': 'file-progress', src: '../../assets/progress-bar/bar.gif'}).inject(this.ui.size, 'after');
  117. this.ui.progress = new Fx.ProgressBar(progress, {
  118. fit: true
  119. }).set(0);
  120. this.base.reposition();
  121. return this.parent();
  122. },
  123. onOpen: function() {
  124. this.ui.element.addClass('file-uploading');
  125. if (this.ui.progress) this.ui.progress.set(0);
  126. },
  127. onRemove: function() {
  128. this.ui = this.ui.element.destroy();
  129. },
  130. onProgress: function() {
  131. if (this.ui.progress) this.ui.progress.start(this.progress.percentLoaded);
  132. },
  133. onStop: function() {
  134. this.remove();
  135. },
  136. onComplete: function() {
  137. this.ui.element.removeClass('file-uploading');
  138. if (this.response.error) {
  139. var msg = MooTools.lang.get('FancyUpload', 'errors')[this.response.error] || '{error} #{code}';
  140. this.errorMessage = msg.substitute($extend({name: this.name}, this.response));
  141. this.base.fireEvent('fileError', [this, this.response, this.errorMessage]);
  142. this.fireEvent('error', [this, this.response, this.errorMessage]);
  143. return;
  144. }
  145. if (this.ui.progress) this.ui.progress = this.ui.progress.cancel().element.destroy();
  146. this.ui.cancel = this.ui.cancel.destroy();
  147. var response = this.response.text || '';
  148. this.base.fireEvent('fileSuccess', [this, response]);
  149. },
  150. onError: function() {
  151. this.ui.element.addClass('file-failed');
  152. }
  153. });
  154. //Avoiding MooTools.lang dependency
  155. (function() {
  156. var phrases = {
  157. 'fileName': '{name}',
  158. 'cancel': 'Cancel',
  159. 'cancelTitle': 'Click to cancel and remove this entry.',
  160. 'validationErrors': {
  161. 'duplicate': 'File <em>{name}</em> is already added, duplicates are not allowed.',
  162. 'sizeLimitMin': 'File <em>{name}</em> (<em>{size}</em>) is too small, the minimal file size is {fileSizeMin}.',
  163. 'sizeLimitMax': 'File <em>{name}</em> (<em>{size}</em>) is too big, the maximal file size is <em>{fileSizeMax}</em>.',
  164. 'fileListMax': 'File <em>{name}</em> could not be added, amount of <em>{fileListMax} files</em> exceeded.',
  165. 'fileListSizeMax': 'File <em>{name}</em> (<em>{size}</em>) is too big, overall filesize of <em>{fileListSizeMax}</em> exceeded.'
  166. },
  167. 'errors': {
  168. 'httpStatus': 'Server returned HTTP-Status #{code}',
  169. 'securityError': 'Security error occured ({text})',
  170. 'ioError': 'Error caused a send or load operation to fail ({text})'
  171. },
  172. 'linuxWarning': 'Warning: Due to a misbehaviour of Adobe Flash Player on Linux,\nthe browser will probably freeze during the upload process.\nDo you want to start the upload anyway?'
  173. };
  174. if (MooTools.lang) {
  175. MooTools.lang.set('en-US', 'FancyUpload', phrases);
  176. } else {
  177. MooTools.lang = {
  178. get: function(from, key) {
  179. return phrases[key];
  180. }
  181. };
  182. }
  183. })();