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