block-loader.js 2.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  1. /**
  2. * Copyright © Magento, Inc. All rights reserved.
  3. * See COPYING.txt for license details.
  4. */
  5. define([
  6. 'ko',
  7. 'jquery',
  8. 'Magento_Ui/js/lib/knockout/template/loader',
  9. 'mage/template'
  10. ], function (ko, $, templateLoader, template) {
  11. 'use strict';
  12. var blockLoaderTemplatePath = 'ui/block-loader',
  13. blockContentLoadingClass = '_block-content-loading',
  14. blockLoader,
  15. blockLoaderClass,
  16. loaderImageHref;
  17. templateLoader.loadTemplate(blockLoaderTemplatePath).done(function (blockLoaderTemplate) {
  18. blockLoader = template($.trim(blockLoaderTemplate), {
  19. loaderImageHref: loaderImageHref
  20. });
  21. blockLoader = $(blockLoader);
  22. blockLoaderClass = '.' + blockLoader.attr('class');
  23. });
  24. /**
  25. * Helper function to check if blockContentLoading class should be applied.
  26. * @param {Object} element
  27. * @returns {Boolean}
  28. */
  29. function isLoadingClassRequired(element) {
  30. var position = element.css('position');
  31. if (position === 'absolute' || position === 'fixed') {
  32. return false;
  33. }
  34. return true;
  35. }
  36. /**
  37. * Add loader to block.
  38. * @param {Object} element
  39. */
  40. function addBlockLoader(element) {
  41. element.find(':focus').blur();
  42. element.find('input:disabled, select:disabled').addClass('_disabled');
  43. element.find('input, select').prop('disabled', true);
  44. if (isLoadingClassRequired(element)) {
  45. element.addClass(blockContentLoadingClass);
  46. }
  47. element.append(blockLoader.clone());
  48. }
  49. /**
  50. * Remove loader from block.
  51. * @param {Object} element
  52. */
  53. function removeBlockLoader(element) {
  54. if (!element.has(blockLoaderClass).length) {
  55. return;
  56. }
  57. element.find(blockLoaderClass).remove();
  58. element.find('input:not("._disabled"), select:not("._disabled")').prop('disabled', false);
  59. element.find('input:disabled, select:disabled').removeClass('_disabled');
  60. element.removeClass(blockContentLoadingClass);
  61. }
  62. return function (loaderHref) {
  63. loaderImageHref = loaderHref;
  64. ko.bindingHandlers.blockLoader = {
  65. /**
  66. * Process loader for block
  67. * @param {String} element
  68. * @param {Boolean} displayBlockLoader
  69. */
  70. update: function (element, displayBlockLoader) {
  71. element = $(element);
  72. if (ko.unwrap(displayBlockLoader())) {
  73. addBlockLoader(element);
  74. } else {
  75. removeBlockLoader(element);
  76. }
  77. }
  78. };
  79. };
  80. });