media.library.js 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184
  1. (function ($) {
  2. namespace('Drupal.media.browser');
  3. Drupal.behaviors.mediaLibrary = {
  4. attach: function (context, settings) {
  5. var library = new Drupal.media.browser.library(Drupal.settings.media.browser.library);
  6. $('#media-browser-tabset').bind('tabsshow', function (event, ui) {
  7. if (ui.tab.hash === '#media-tab-library') {
  8. // Grab the parameters from the Drupal.settings object
  9. var params = {};
  10. for (var parameter in Drupal.settings.media.browser.library) {
  11. params[parameter] = Drupal.settings.media.browser.library[parameter];
  12. }
  13. library.start($(ui.panel), params);
  14. $('#scrollbox').bind('scroll', library, library.scrollUpdater);
  15. }
  16. });
  17. }
  18. };
  19. Drupal.media.browser.library = function (settings) {
  20. this.settings = Drupal.media.browser.library.getDefaults();
  21. $.extend(this.settings, settings);
  22. this.done = false; // Keeps track of if the last request for media returned 0 results.
  23. this.cursor = 0; // keeps track of what the last requested media object was.
  24. this.mediaFiles = []; // An array of loaded media files from the server.
  25. this.selectedMediaFiles = [];
  26. };
  27. Drupal.media.browser.library.getDefaults = function () {
  28. return {
  29. emtpyMessage: Drupal.t('There is nothing in your media library. Select the Upload tab above to add a file.'),
  30. limit: 15
  31. };
  32. };
  33. Drupal.media.browser.library.prototype.start = function (renderElement, params) {
  34. this.renderElement = renderElement;
  35. this.params = params;
  36. // Change the behavior dependent on multiselect
  37. if (params.multiselect) {
  38. this.clickFunction = this.multiSelect;
  39. } else {
  40. this.clickFunction = this.singleSelect;
  41. }
  42. this.loadMedia();
  43. };
  44. /**
  45. * Appends more media onto the list
  46. */
  47. Drupal.media.browser.library.prototype.loadMedia = function () {
  48. var that = this;
  49. $('#status').text(Drupal.t('Loading...')).show();
  50. $.extend(this.params, {start: this.cursor, limit: this.settings.limit});
  51. var gotMedia = function (data, status) {
  52. $('#status').text('').hide();
  53. if (data.media.length < that.params.limit) {
  54. // We remove the scroll event listener, nothing more to load after this.
  55. $('#scrollbox').unbind('scroll');
  56. }
  57. that.mediaFiles = that.mediaFiles.concat(data.media);
  58. that.render(that.renderElement);
  59. // Remove the flag that prevents loading of more media
  60. that.loading = false;
  61. };
  62. var errorCallback = function () {
  63. alert(Drupal.t('Error getting media.'));
  64. };
  65. $.ajax({
  66. url: this.settings.getMediaUrl,
  67. type: 'GET',
  68. dataType: 'json',
  69. data: this.params,
  70. error: errorCallback,
  71. success: gotMedia
  72. });
  73. };
  74. Drupal.media.browser.library.prototype.scrollUpdater = function (e){
  75. if (!e.data.loading) {
  76. var scrollbox = $('#scrollbox');
  77. var scrolltop = scrollbox.attr('scrollTop');
  78. var scrollheight = scrollbox.attr('scrollHeight');
  79. var windowheight = scrollbox.attr('clientHeight');
  80. var scrolloffset = 20;
  81. if(scrolltop >= (scrollheight - (windowheight + scrolloffset))) {
  82. // Set a flag so we don't make multiple concurrent AJAX calls
  83. e.data.loading = true;
  84. // Fetch new items
  85. e.data.loadMedia();
  86. }
  87. }
  88. };
  89. /**
  90. * Fetches the next media object and increments the cursor.
  91. */
  92. Drupal.media.browser.library.prototype.getNextMedia = function () {
  93. if (this.cursor >= this.mediaFiles.length) {
  94. return false;
  95. }
  96. var ret = this.mediaFiles[this.cursor];
  97. this.cursor += 1;
  98. return ret;
  99. };
  100. Drupal.media.browser.library.prototype.render = function (renderElement) {
  101. if (this.mediaFiles.length < 1) {
  102. $('<div id="media-empty-message" class="media-empty-message"></div>').appendTo(renderElement)
  103. .html(this.emptyMessage);
  104. return;
  105. }
  106. else {
  107. var mediaList = $('#media-browser-library-list', renderElement);
  108. // If the list doesn't exist, bail.
  109. if (mediaList.length === 0) {
  110. throw('Cannot continue, list element is missing');
  111. }
  112. }
  113. while (this.cursor < this.mediaFiles.length) {
  114. var mediaFile = this.getNextMedia();
  115. var data = {};
  116. data.obj = this;
  117. data.file = mediaFile;
  118. var listItem = $('<li></li>').appendTo(mediaList)
  119. .attr('id', 'media-item-' + mediaFile.fid)
  120. .html(mediaFile.preview)
  121. .bind('click', data, this.clickFunction);
  122. }
  123. };
  124. Drupal.media.browser.library.prototype.mediaSelected = function (media) {
  125. Drupal.media.browser.selectMedia(media);
  126. };
  127. Drupal.media.browser.library.prototype.singleSelect = function (event) {
  128. var lib = event.data.obj;
  129. var file = event.data.file;
  130. event.preventDefault();
  131. event.stopPropagation();
  132. $('.media-item').removeClass('selected');
  133. $('.media-item', $(this)).addClass('selected');
  134. lib.mediaSelected([event.data.file]);
  135. return false;
  136. }
  137. Drupal.media.browser.library.prototype.multiSelect = function (event) {
  138. var lib = event.data.obj
  139. var file = event.data.file;
  140. event.preventDefault();
  141. event.stopPropagation();
  142. // Turn off or on the selection of this item
  143. $('.media-item', $(this)).toggleClass('selected');
  144. // Add or remove the media file from the array
  145. var index = $.inArray(file, lib.selectedMediaFiles);
  146. if (index == -1) {
  147. // Media file isn't selected, add it
  148. lib.selectedMediaFiles.push(file);
  149. } else {
  150. // Media file has previously been selected, remove it
  151. lib.selectedMediaFiles.splice(index, 1);
  152. }
  153. // Pass the array of selected media files to the invoker
  154. lib.mediaSelected(lib.selectedMediaFiles);
  155. return false;
  156. }
  157. }(jQuery));