message/amd/src/message_drawer_lazy_load_list.js

  1. // This file is part of Moodle - http://moodle.org/
  2. //
  3. // Moodle is free software: you can redistribute it and/or modify
  4. // it under the terms of the GNU General Public License as published by
  5. // the Free Software Foundation, either version 3 of the License, or
  6. // (at your option) any later version.
  7. //
  8. // Moodle is distributed in the hope that it will be useful,
  9. // but WITHOUT ANY WARRANTY; without even the implied warranty of
  10. // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
  11. // GNU General Public License for more details.
  12. //
  13. // You should have received a copy of the GNU General Public License
  14. // along with Moodle. If not, see <http://www.gnu.org/licenses/>.
  15. /**
  16. * Lazy loaded list of items.
  17. *
  18. * @module core_message/message_drawer_lazy_load_list
  19. * @copyright 2018 Ryan Wyllie <ryan@moodle.com>
  20. * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
  21. */
  22. define(
  23. [
  24. 'jquery',
  25. 'core/custom_interaction_events',
  26. 'core/pending',
  27. ],
  28. function(
  29. $,
  30. CustomEvents,
  31. PendingPromise,
  32. ) {
  33. var SELECTORS = {
  34. ROOT: '[data-region="lazy-load-list"]',
  35. LOADING_ICON_CONTAINER: '[data-region="loading-icon-container"]',
  36. CONTENT_CONTAINER: '[data-region="content-container"]',
  37. EMPTY_MESSAGE: '[data-region="empty-message-container"]',
  38. PLACEHOLDER: '[data-region="placeholder-container"]'
  39. };
  40. /**
  41. * Flag element as loading.
  42. *
  43. * @param {Object} root The section container element.
  44. */
  45. var startLoading = function(root) {
  46. root.attr('data-loading', true);
  47. };
  48. /**
  49. * Flag element as not loading.
  50. *
  51. * @param {Object} root The section container element.
  52. */
  53. var stopLoading = function(root) {
  54. root.attr('data-loading', false);
  55. };
  56. /**
  57. * Check if the element is loading.
  58. *
  59. * @param {Object} root The section container element.
  60. * @return {Bool}
  61. */
  62. var isLoading = function(root) {
  63. return root.attr('data-loading') === 'true';
  64. };
  65. /**
  66. * Get user id
  67. *
  68. * @param {Object} root The section container element.
  69. * @return {Number} Logged in user id.
  70. */
  71. var getUserId = function(root) {
  72. return root.attr('data-user-id');
  73. };
  74. /**
  75. * Get the section content container element.
  76. *
  77. * @param {Object} root The section container element.
  78. * @return {Object} The section content container element.
  79. */
  80. var getContentContainer = function(root) {
  81. return root.find(SELECTORS.CONTENT_CONTAINER);
  82. };
  83. /**
  84. * Get the root element.
  85. *
  86. * @param {Object} containerElement The container element to search in.
  87. * @return {Object} The list root element.
  88. */
  89. var getRoot = function(containerElement) {
  90. return containerElement.find(SELECTORS.ROOT);
  91. };
  92. /**
  93. * Show the loading icon.
  94. *
  95. * @param {Object} root The section container element.
  96. */
  97. var showLoadingIcon = function(root) {
  98. root.find(SELECTORS.LOADING_ICON_CONTAINER).removeClass('hidden');
  99. };
  100. /**
  101. * Hide the loading icon.
  102. *
  103. * @param {Object} root The section container element.
  104. */
  105. var hideLoadingIcon = function(root) {
  106. root.find(SELECTORS.LOADING_ICON_CONTAINER).addClass('hidden');
  107. };
  108. /**
  109. * Show the empty message.
  110. *
  111. * @param {Object} root The section container element.
  112. */
  113. var showEmptyMessage = function(root) {
  114. root.find(SELECTORS.EMPTY_MESSAGE).removeClass('hidden');
  115. };
  116. /**
  117. * Hide the empty message.
  118. *
  119. * @param {Object} root The section container element.
  120. */
  121. var hideEmptyMessage = function(root) {
  122. root.find(SELECTORS.EMPTY_MESSAGE).addClass('hidden');
  123. };
  124. /**
  125. * Show the placeholder element.
  126. *
  127. * @param {Object} root The section container element.
  128. */
  129. var showPlaceholder = function(root) {
  130. root.find(SELECTORS.PLACEHOLDER).removeClass('hidden');
  131. };
  132. /**
  133. * Hide the placeholder element.
  134. *
  135. * @param {Object} root The section container element.
  136. */
  137. var hidePlaceholder = function(root) {
  138. root.find(SELECTORS.PLACEHOLDER).addClass('hidden');
  139. };
  140. /**
  141. * Show the section content container.
  142. *
  143. * @param {Object} root The section container element.
  144. */
  145. var showContent = function(root) {
  146. getContentContainer(root).removeClass('hidden');
  147. };
  148. /**
  149. * Hide the section content container.
  150. *
  151. * @param {Object} root The section container element.
  152. */
  153. var hideContent = function(root) {
  154. getContentContainer(root).addClass('hidden');
  155. };
  156. /**
  157. * If the section has loaded all content.
  158. *
  159. * @param {Object} root The section container element.
  160. * @return {Bool}
  161. */
  162. var hasLoadedAll = function(root) {
  163. return root.attr('data-loaded-all') == 'true';
  164. };
  165. /**
  166. * If the section has loaded all content.
  167. *
  168. * @param {Object} root The section container element.
  169. * @param {Bool} value If all items have been loaded.
  170. */
  171. var setLoadedAll = function(root, value) {
  172. root.attr('data-loaded-all', value);
  173. };
  174. /**
  175. * If the section can load more items.
  176. *
  177. * @param {Object} root The section container element.
  178. * @return {Bool}
  179. */
  180. var canLoadMore = function(root) {
  181. return !hasLoadedAll(root) && !isLoading(root);
  182. };
  183. /**
  184. * Load all items in this container from callback and render them.
  185. *
  186. * @param {Object} root The section container element.
  187. * @param {Function} loadCallback The callback to load items.
  188. * @param {Function} renderCallback The callback to render the results.
  189. * @return {Object} jQuery promise
  190. */
  191. var loadAndRender = function(root, loadCallback, renderCallback) {
  192. var userId = getUserId(root);
  193. startLoading(root);
  194. return loadCallback(root, userId)
  195. .then(function(items) {
  196. if (items.length > 0) {
  197. var contentContainer = getContentContainer(root);
  198. return renderCallback(contentContainer, items, userId)
  199. .then(function() {
  200. return items;
  201. });
  202. } else {
  203. return items;
  204. }
  205. })
  206. .then(function(items) {
  207. stopLoading(root);
  208. root.attr('data-seen', true);
  209. if (!items.length) {
  210. setLoadedAll(root, true);
  211. }
  212. return items;
  213. })
  214. .catch(function() {
  215. stopLoading(root);
  216. root.attr('data-seen', true);
  217. return;
  218. });
  219. };
  220. /**
  221. * First load of this section.
  222. *
  223. * @param {Object} root The section container element.
  224. * @param {Function} loadCallback The callback to load items.
  225. * @param {Function} renderCallback The callback to render the results.
  226. * @return {Object} promise
  227. */
  228. var initialLoadAndRender = function(root, loadCallback, renderCallback) {
  229. const pendingPromise = new PendingPromise('initialLoadAndRender');
  230. getContentContainer(root).empty();
  231. showPlaceholder(root);
  232. hideContent(root);
  233. return loadAndRender(root, loadCallback, renderCallback)
  234. .then(function(items) {
  235. hidePlaceholder(root);
  236. if (!items.length) {
  237. showEmptyMessage(root);
  238. } else {
  239. showContent(root);
  240. }
  241. return;
  242. })
  243. .catch(function() {
  244. hidePlaceholder(root);
  245. showContent(root);
  246. return;
  247. })
  248. .then(() => {
  249. pendingPromise.resolve();
  250. return;
  251. });
  252. };
  253. /**
  254. * Listen to, and handle events in this section.
  255. *
  256. * @param {Object} root The section container element.
  257. * @param {Function} loadCallback The callback to load items.
  258. * @param {Function} renderCallback The callback to render the results.
  259. */
  260. var registerEventListeners = function(root, loadCallback, renderCallback) {
  261. CustomEvents.define(root, [
  262. CustomEvents.events.scrollBottom
  263. ]);
  264. root.on(CustomEvents.events.scrollBottom, function() {
  265. if (canLoadMore(root)) {
  266. showLoadingIcon(root);
  267. loadAndRender(root, loadCallback, renderCallback)
  268. .then(function() {
  269. return hideLoadingIcon(root);
  270. })
  271. .catch(function() {
  272. return hideLoadingIcon(root);
  273. });
  274. }
  275. });
  276. };
  277. /**
  278. * Setup the section.
  279. *
  280. * @param {Object} root The section container element.
  281. * @param {Function} loadCallback The callback to load items.
  282. * @param {Function} renderCallback The callback to render the results.
  283. */
  284. var show = function(root, loadCallback, renderCallback) {
  285. root = $(root);
  286. if (!root.attr('data-init')) {
  287. registerEventListeners(root, loadCallback, renderCallback);
  288. initialLoadAndRender(root, loadCallback, renderCallback);
  289. root.attr('data-init', true);
  290. }
  291. };
  292. return {
  293. show: show,
  294. getContentContainer: getContentContainer,
  295. getRoot: getRoot,
  296. setLoadedAll: setLoadedAll,
  297. showEmptyMessage: showEmptyMessage,
  298. hideEmptyMessage: hideEmptyMessage,
  299. showContent: showContent,
  300. hideContent: hideContent
  301. };
  302. });