Skip to content

Commit 4362b95

Browse files
slavvkaslavvka
authored
ENGCOM-7290: Load appropriate slider widget on demand to improve performance #27616 
2 parents d96b7c9 + dc8449b commit 4362b95

File tree

2 files changed

+165
-145
lines changed

2 files changed

+165
-145
lines changed

‎app/code/Magento/Ui/view/base/web/js/lib/knockout/bindings/range.js

Lines changed: 14 additions & 145 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,18 @@ define([
77
'ko',
88
'jquery',
99
'underscore',
10-
'../template/renderer',
11-
'jquery-ui-modules/slider'
10+
'../template/renderer'
1211
], function (ko, $, _, renderer) {
1312
'use strict';
1413

1514
var isTouchDevice = !_.isUndefined(document.ontouchstart),
16-
sliderFn = 'slider';
15+
sliderFn = 'slider',
16+
sliderModule = 'jquery-ui-modules/slider';
17+
18+
if (isTouchDevice) {
19+
sliderFn = 'touchSlider';
20+
sliderModule = 'mage/touch-slider';
21+
}
1722

1823
ko.bindingHandlers.range = {
1924

@@ -41,7 +46,9 @@ define([
4146
}
4247
});
4348

44-
$(element)[sliderFn](config);
49+
require([sliderModule], function () {
50+
$(element)[sliderFn](config);
51+
});
4552
},
4653

4754
/**
@@ -55,149 +62,11 @@ define([
5562

5663
config.value = ko.unwrap(config.value);
5764

58-
$(element)[sliderFn]('option', config);
65+
require([sliderModule], function () {
66+
$(element)[sliderFn]('option', config);
67+
});
5968
}
6069
};
6170

6271
renderer.addAttribute('range');
63-
64-
if (!isTouchDevice) {
65-
return;
66-
}
67-
68-
$.widget('mage.touchSlider', $.ui.slider, {
69-
70-
/**
71-
* Creates instance of widget.
72-
*
73-
* @override
74-
*/
75-
_create: function () {
76-
_.bindAll(
77-
this,
78-
'_mouseDown',
79-
'_mouseMove',
80-
'_onTouchEnd'
81-
);
82-
83-
return this._superApply(arguments);
84-
},
85-
86-
/**
87-
* Initializes mouse events on element.
88-
* @override
89-
*/
90-
_mouseInit: function () {
91-
var result = this._superApply(arguments);
92-
93-
this.element
94-
.off('mousedown.' + this.widgetName)
95-
.on('touchstart.' + this.widgetName, this._mouseDown);
96-
97-
return result;
98-
},
99-
100-
/**
101-
* Elements' 'mousedown' event handler polyfill.
102-
* @override
103-
*/
104-
_mouseDown: function (event) {
105-
var prevDelegate = this._mouseMoveDelegate,
106-
result;
107-
108-
event = this._touchToMouse(event);
109-
result = this._super(event);
110-
111-
if (prevDelegate === this._mouseMoveDelegate) {
112-
return result;
113-
}
114-
115-
$(document)
116-
.off('mousemove.' + this.widgetName)
117-
.off('mouseup.' + this.widgetName);
118-
119-
$(document)
120-
.on('touchmove.' + this.widgetName, this._mouseMove)
121-
.on('touchend.' + this.widgetName, this._onTouchEnd)
122-
.on('tochleave.' + this.widgetName, this._onTouchEnd);
123-
124-
return result;
125-
},
126-
127-
/**
128-
* Documents' 'mousemove' event handler polyfill.
129-
*
130-
* @override
131-
* @param {Event} event - Touch event object.
132-
*/
133-
_mouseMove: function (event) {
134-
event = this._touchToMouse(event);
135-
136-
return this._super(event);
137-
},
138-
139-
/**
140-
* Documents' 'touchend' event handler.
141-
*/
142-
_onTouchEnd: function (event) {
143-
$(document).trigger('mouseup');
144-
145-
return this._mouseUp(event);
146-
},
147-
148-
/**
149-
* Removes previously assigned touch handlers.
150-
*
151-
* @override
152-
*/
153-
_mouseUp: function () {
154-
this._removeTouchHandlers();
155-
156-
return this._superApply(arguments);
157-
},
158-
159-
/**
160-
* Removes previously assigned touch handlers.
161-
*
162-
* @override
163-
*/
164-
_mouseDestroy: function () {
165-
this._removeTouchHandlers();
166-
167-
return this._superApply(arguments);
168-
},
169-
170-
/**
171-
* Removes touch events from document object.
172-
*/
173-
_removeTouchHandlers: function () {
174-
$(document)
175-
.off('touchmove.' + this.widgetName)
176-
.off('touchend.' + this.widgetName)
177-
.off('touchleave.' + this.widgetName);
178-
},
179-
180-
/**
181-
* Adds properties to the touch event to mimic mouse event.
182-
*
183-
* @param {Event} event - Touch event object.
184-
* @returns {Event}
185-
*/
186-
_touchToMouse: function (event) {
187-
var orig = event.originalEvent,
188-
touch = orig.touches[0];
189-
190-
return _.extend(event, {
191-
which: 1,
192-
pageX: touch.pageX,
193-
pageY: touch.pageY,
194-
clientX: touch.clientX,
195-
clientY: touch.clientY,
196-
screenX: touch.screenX,
197-
screenY: touch.screenY
198-
});
199-
}
200-
});
201-
202-
sliderFn = 'touchSlider';
20372
});

‎lib/web/mage/touch-slider.js

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
/**
2+
* Copyright © Magento, Inc. All rights reserved.
3+
* See COPYING.txt for license details.
4+
*/
5+
6+
define([
7+
'jquery',
8+
'underscore',
9+
'jquery-ui-modules/slider'
10+
], function ($, _) {
11+
'use strict';
12+
13+
/**
14+
* Adds support for touch events for regular jQuery UI slider.
15+
*/
16+
$.widget('mage.touchSlider', $.ui.slider, {
17+
18+
/**
19+
* Creates instance of widget.
20+
*
21+
* @override
22+
*/
23+
_create: function () {
24+
_.bindAll(
25+
this,
26+
'_mouseDown',
27+
'_mouseMove',
28+
'_onTouchEnd'
29+
);
30+
31+
return this._superApply(arguments);
32+
},
33+
34+
/**
35+
* Initializes mouse events on element.
36+
* @override
37+
*/
38+
_mouseInit: function () {
39+
var result = this._superApply(arguments);
40+
41+
this.element
42+
.off('mousedown.' + this.widgetName)
43+
.on('touchstart.' + this.widgetName, this._mouseDown);
44+
45+
return result;
46+
},
47+
48+
/**
49+
* Elements' 'mousedown' event handler polyfill.
50+
* @override
51+
*/
52+
_mouseDown: function (event) {
53+
var prevDelegate = this._mouseMoveDelegate,
54+
result;
55+
56+
event = this._touchToMouse(event);
57+
result = this._super(event);
58+
59+
if (prevDelegate === this._mouseMoveDelegate) {
60+
return result;
61+
}
62+
63+
$(document)
64+
.off('mousemove.' + this.widgetName)
65+
.off('mouseup.' + this.widgetName);
66+
67+
$(document)
68+
.on('touchmove.' + this.widgetName, this._mouseMove)
69+
.on('touchend.' + this.widgetName, this._onTouchEnd)
70+
.on('tochleave.' + this.widgetName, this._onTouchEnd);
71+
72+
return result;
73+
},
74+
75+
/**
76+
* Documents' 'mousemove' event handler polyfill.
77+
*
78+
* @override
79+
* @param {Event} event - Touch event object.
80+
*/
81+
_mouseMove: function (event) {
82+
event = this._touchToMouse(event);
83+
84+
return this._super(event);
85+
},
86+
87+
/**
88+
* Documents' 'touchend' event handler.
89+
*/
90+
_onTouchEnd: function (event) {
91+
$(document).trigger('mouseup');
92+
93+
return this._mouseUp(event);
94+
},
95+
96+
/**
97+
* Removes previously assigned touch handlers.
98+
*
99+
* @override
100+
*/
101+
_mouseUp: function () {
102+
this._removeTouchHandlers();
103+
104+
return this._superApply(arguments);
105+
},
106+
107+
/**
108+
* Removes previously assigned touch handlers.
109+
*
110+
* @override
111+
*/
112+
_mouseDestroy: function () {
113+
this._removeTouchHandlers();
114+
115+
return this._superApply(arguments);
116+
},
117+
118+
/**
119+
* Removes touch events from document object.
120+
*/
121+
_removeTouchHandlers: function () {
122+
$(document)
123+
.off('touchmove.' + this.widgetName)
124+
.off('touchend.' + this.widgetName)
125+
.off('touchleave.' + this.widgetName);
126+
},
127+
128+
/**
129+
* Adds properties to the touch event to mimic mouse event.
130+
*
131+
* @param {Event} event - Touch event object.
132+
* @returns {Event}
133+
*/
134+
_touchToMouse: function (event) {
135+
var orig = event.originalEvent,
136+
touch = orig.touches[0];
137+
138+
return _.extend(event, {
139+
which: 1,
140+
pageX: touch.pageX,
141+
pageY: touch.pageY,
142+
clientX: touch.clientX,
143+
clientY: touch.clientY,
144+
screenX: touch.screenX,
145+
screenY: touch.screenY
146+
});
147+
}
148+
});
149+
150+
return $.mage.touchSlider;
151+
});

0 commit comments

Comments
 (0)