script.js 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146
  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 select = $('select-0');
  12. var selectMore = $('select-more-0');
  13. var alertStatus = function(message, cls) {
  14. new Element('div', {
  15. 'class': cls,
  16. html: message,
  17. events: {
  18. click: function() {
  19. this.destroy();
  20. }
  21. }
  22. }).inject(selectMore, 'after');
  23. }
  24. // custom File class for individual files
  25. var File = new Class({
  26. Extends: Uploader.File,
  27. render: function() {
  28. this.addEvents({
  29. 'start': this.onStart,
  30. 'stop': this.onStop,
  31. 'remove': this.onRemove,
  32. 'complete': this.onComplete
  33. });
  34. this.ui = {};
  35. this.ui.element = new Element('li', {'class': 'file'});
  36. this.ui.title = new Element('span', {'class': 'file-title', text: this.name});
  37. this.ui.title.addEvent('click', this.base.start.bind(this.base));
  38. this.ui.cancel = new Element('a', {'class': 'file-cancel', text: 'Cancel', href: '#'});
  39. this.ui.cancel.addEvent('click', function() {
  40. this.remove();
  41. return false;
  42. }.bind(this));
  43. this.ui.element.adopt(
  44. this.ui.title,
  45. this.ui.cancel
  46. ).inject(list).highlight();
  47. this.base.reposition();
  48. return this.parent();
  49. },
  50. onStart: function() {
  51. this.ui.element.addClass('file-running');
  52. },
  53. onStop: function() {
  54. this.remove();
  55. },
  56. onRemove: function() {
  57. // stop removes the file entry
  58. this.ui = this.ui.element.destroy();
  59. },
  60. onComplete: function() {
  61. // clean up
  62. this.ui.element.removeClass('file-running');
  63. this.ui.cancel = this.ui.cancel.destroy();
  64. new Element('input', {type: 'checkbox', 'checked': true})
  65. .inject(this.ui.element.highlight('#e6efc2'), 'top');
  66. // todo fun stuff
  67. }
  68. });
  69. /**
  70. * Uploader instance
  71. */
  72. var up = new Uploader({
  73. url: '../script.php',
  74. data: {
  75. response: 'xml'
  76. },
  77. verbose: true,
  78. queued: true,
  79. target: $('select-0'),
  80. instantStart: true,
  81. fileClass: File,
  82. onSelectSuccess: function() {
  83. if (this.fileList.length > 0) {
  84. select.setStyle('display', 'none');
  85. selectMore.setStyle('display', 'inline');
  86. this.target = selectMore;
  87. this.reposition();
  88. }
  89. },
  90. onFileRemove: function() {
  91. if (this.fileList.length == 0) {
  92. select.setStyle('display', 'inline');
  93. selectMore.setStyle('display', 'none');
  94. this.target = select;
  95. this.reposition();
  96. }
  97. }
  98. });
  99. /**
  100. * Button state
  101. */
  102. Elements.addEvents([select, selectMore], {
  103. click: function() {
  104. return false;
  105. },
  106. mouseenter: function() {
  107. this.addClass('hover');
  108. up.reposition();
  109. },
  110. mouseleave: function() {
  111. this.removeClass('hover');
  112. this.blur();
  113. },
  114. mousedown: function() {
  115. this.focus();
  116. }
  117. });
  118. });