Skip to content

Commit df27b45

Browse files
alothemesalothemes
committed
Improve Cumulative Layout Shift
1 parent c0cabb0 commit df27b45

File tree

1 file changed

+103
-81
lines changed

1 file changed

+103
-81
lines changed

‎view/base/web/js/grid-slider.js‎

Lines changed: 103 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
* @Author: Alex Dong
33
* @Date: 2020-07-29 13:21:07
44
* @Last Modified by: Alex Dong
5-
* @Last Modified time: 2021-02-02 19:35:42
5+
* @Last Modified time: 2021-02-21 00:29:05
66
*/
77

88
define([
@@ -18,24 +18,7 @@ define([
1818

1919
_create: function () {
2020
var options = this.options;
21-
var self = this;
22-
if ("IntersectionObserver" in window) {
23-
let gridSliderObserver = new IntersectionObserver(function(entries, observer) {
24-
entries.forEach(function(entry) {
25-
if (entry.isIntersecting) {
26-
// let el = entry.target;
27-
self._initSlider();
28-
gridSliderObserver.unobserve(entry.target);
29-
}
30-
});
31-
});
32-
33-
self.element.each(function(index, el){
34-
gridSliderObserver.observe(el);
35-
});
36-
} else {
37-
self._initSlider();
38-
}
21+
this._initSlider();
3922
},
4023

4124
_uniqid: function (a = "", b = false) {
@@ -53,83 +36,122 @@ define([
5336
_initSlider: function () {
5437
var options = this.options;
5538
var self = this;
39+
var $head = $('head');
5640
self.element.find(options.selector).each(function() {
57-
var el = $(this);
41+
var element = $(this);
5842
var selector = 'grid-slider-' + self._uniqid();
59-
el.addClass(selector);
43+
var styleId = selector;
44+
element.addClass(selector);
6045
selector = '.' + selector;
6146
if($('body').hasClass('rtl')){
62-
el.attr('dir', 'rtl');
63-
el.data( 'rtl', true );
47+
element.attr('dir', 'rtl');
48+
element.data( 'rtl', true );
6449
}
65-
var options = el.data();
50+
var options = element.data();
6651
if(iClass === undefined){
67-
el.children().addClass('alo-item');
52+
element.children().addClass('alo-item');
6853
var iClass = '.alo-item';
6954
}
70-
var classes = selector + ' '+ iClass;
71-
var padding = options.padding;
72-
var float = $('body').hasClass('rtl') ? 'right' : 'left';
73-
var style = padding ? classes + '{float: ' + float + '; padding: 0 '+padding+'px; box-sizing: border-box} ' + selector + '{margin: 0 -'+padding+'px}' : '';
55+
var classes = selector + ' '+ iClass;
56+
var padding = options.padding;
57+
var float = $('body').hasClass('rtl') ? 'right' : 'left';
58+
var style = padding ? classes + '{float: ' + float + '; padding: 0 '+padding+'px; box-sizing: border-box} ' + selector + '{margin: 0 -'+padding+'px}' : '';
59+
$head.append('<style type="text/css" >'+style+'</style>');
60+
style = '';
7461
if(options.slidesToShow){
75-
var lazy = el.find('img.lazyload');
76-
if(lazy.length){
77-
lazy.each(function(index) {
78-
$(this).data('lazy', $(this).data('src'));
79-
});
80-
}
81-
el.on('init', function(event, slick){
82-
$('body').trigger('contentUpdated'); // support lazyload
83-
var video = $(this).find('.external-video');
84-
video.click(function(event) {
85-
var $this = $(this);
86-
var img = $this.find('img');
87-
event.preventDefault();
88-
var url = $(this).data('video');
89-
url = url.replace("://vimeo.com/", "://player.vimeo.com/video/");
90-
url = url.replace("://www.youtube.com/watch?v=", "://youtube.com/embed/");
91-
url = url + '?autoplay=1&badge=0';
92-
var iframe = '<iframe class="iframe-video" src="' + url + '" width="' + img.width() + '" height="' + img.height() + '" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>';
93-
$this.append(iframe).addClass('embed');
94-
img.hide();
95-
});
96-
});
97-
98-
var slider = el.slick(options);
99-
el.on('beforeChange', function(event, slick, currentSlide, nextSlide){
100-
var video = $(this).find('.external-video');
101-
video.removeClass('embed').find('img').show();
102-
video.find('.iframe-video').remove();
103-
});
104-
slider.on( "click", ".item", function() {
105-
el.slick('slickSetOption', "autoplay",false,false);
106-
});
107-
} else {
108-
var responsive = options.responsive;
109-
if(responsive == undefined) return;
110-
var length = Object.keys(responsive).length;
62+
if ("IntersectionObserver" in window) {
63+
var nthChild = options.slidesToShow + 1;
64+
style += selector + ' .item:nth-child(n+ ' + nthChild + ')' + '{display: none;} ' + selector + ' .item{float:left};';
65+
let gridSliderObserver = new IntersectionObserver(function(entries, observer) {
66+
entries.forEach(function(entry) {
67+
if (entry.isIntersecting) {
68+
let el = entry.target;
69+
$head.find('#' + styleId).remove();
70+
self.sliderRender($(el));
71+
gridSliderObserver.unobserve(el);
72+
}
73+
});
74+
});
11175

112-
$.each( responsive, function( key, value ) {
113-
var col = 0;
114-
var maxWith = 0;
115-
var minWith = 0;
116-
$.each( value , function(size, num) { minWith = parseInt(size) + 1; col = num;});
117-
if(key+2<length){
118-
$.each( responsive[key+1], function( size, num) { maxWith = size; col = num;});
119-
style += ' @media (min-width: '+minWith+'px) and (max-width: '+maxWith+'px)';
120-
} else {
121-
if(key+2 == length) return; // don't use key = length - 1;
122-
$.each( responsive[key], function( size, num) { maxWith = size; col = num;});
123-
style += ' @media (min-width: '+maxWith+'px)';
124-
}
125-
style += ' {'+selector + '{margin: 0 -'+padding+'px}'+classes+'{padding: 0 '+padding+'px; box-sizing: border-box; width: '+(Math.floor((10/col) * 100000000000) / 10000000000)+'%} '+classes+':nth-child('+col+'n+1){clear: ' + float + ';}}';
126-
});
76+
element.each(function(index, el){
77+
gridSliderObserver.observe(el);
78+
});
79+
} else {
80+
self.sliderRender(element);
81+
}
12782
}
83+
var responsive = self.getPesponsive(options);
84+
if(responsive == undefined) return;
85+
var length = Object.keys(responsive).length;
86+
$.each( responsive, function( key, value ) {
87+
var col = 0;
88+
var maxWith = 0;
89+
var minWith = 0;
90+
$.each( value , function(size, num) { minWith = parseInt(size) + 1; col = num;});
91+
if(key+2<length){
92+
$.each( responsive[key+1], function( size, num) { maxWith = size; col = num;});
93+
style += ' @media (min-width: '+minWith+'px) and (max-width: '+maxWith+'px)';
94+
} else {
95+
if(key+2 == length) return; // don't use key = length - 1;
96+
$.each( responsive[key], function( size, num) { maxWith = size; col = num;});
97+
style += ' @media (min-width: '+maxWith+'px)';
98+
}
99+
style += ' {'+selector + '{margin: 0 -'+padding+'px}'+classes+'{padding: 0 '+padding+'px; box-sizing: border-box; width: '+(Math.floor((10/col) * 100000000000) / 10000000000)+'%} '+classes+':nth-child('+col+'n+1){clear: ' + float + ';}}';
100+
});
101+
$head.append('<style type="text/css" id="' + styleId + '" >'+style+'</style>');
102+
103+
});
104+
},
128105

129-
$('head').append('<style type="text/css">'+style+'</style>');
106+
getPesponsive : function (options) {
107+
if(!options.slidesToShow) return options.responsive;
108+
var responsive = options.responsive;
109+
var length = Object.keys(responsive).length;
110+
var gridResponsive = [];
111+
$.each( responsive, function( key, value ) {
112+
var breakpoint = {};
113+
breakpoint[value.breakpoint] = parseInt(value.settings.slidesToShow);
114+
gridResponsive.push(breakpoint);
115+
});
116+
return gridResponsive.reverse();
117+
},
118+
119+
sliderRender: function (el) {
120+
var options = el.data();
121+
var lazy = el.find('img.lazyload');
122+
if(lazy.length){
123+
lazy.each(function(index) {
124+
$(this).data('lazy', $(this).data('src'));
125+
});
126+
}
127+
el.on('init', function(event, slick){
128+
$('body').trigger('contentUpdated'); // support lazyload
129+
var video = $(this).find('.external-video');
130+
video.click(function(event) {
131+
var $this = $(this);
132+
var img = $this.find('img');
133+
event.preventDefault();
134+
var url = $(this).data('video');
135+
url = url.replace("://vimeo.com/", "://player.vimeo.com/video/");
136+
url = url.replace("://www.youtube.com/watch?v=", "://youtube.com/embed/");
137+
url = url + '?autoplay=1&badge=0';
138+
var iframe = '<iframe class="iframe-video" src="' + url + '" width="' + img.width() + '" height="' + img.height() + '" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>';
139+
$this.append(iframe).addClass('embed');
140+
img.hide();
141+
});
142+
});
130143

144+
var slider = el.slick(options);
145+
el.on('beforeChange', function(event, slick, currentSlide, nextSlide){
146+
var video = $(this).find('.external-video');
147+
video.removeClass('embed').find('img').show();
148+
video.find('.iframe-video').remove();
149+
});
150+
slider.on( "click", ".item", function() {
151+
el.slick('slickSetOption', "autoplay",false,false);
131152
});
132153
}
154+
133155
});
134156

135157
return $.magepow.gridSlider;

0 commit comments

Comments
 (0)