Skip to content

Commit d0cfeae

Browse files
magiccartmagiccart
committed
Format
1 parent 913e036 commit d0cfeae

File tree

1 file changed

+170
-171
lines changed

1 file changed

+170
-171
lines changed

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

Lines changed: 170 additions & 171 deletions
Original file line numberDiff line numberDiff line change
@@ -6,180 +6,180 @@
66
*/
77

88
define([
9-
'jquery',
10-
'slick',
11-
'jquery-ui-modules/core'
12-
], function ($, slick) {
13-
"use strict";
14-
$.widget('magepow.gridSlider', {
15-
options: {
16-
selector: '.grid-slider',
17-
useIntersectionObserver: true,
18-
unobserve: true,
19-
},
20-
21-
_create: function () {
22-
var options = this.options;
23-
this._initSlider();
24-
},
25-
26-
_uniqid: function (length=10) {
27-
let result = '';
28-
const characters = 'abcdefghijklmnopqrstuvwxyz0123456789';
29-
const charactersLength = characters.length;
30-
for ( let i = 0; i < length; i++ ) {
31-
result += characters.charAt(Math.floor(Math.random() * charactersLength));
32-
}
33-
return result;
34-
},
35-
36-
_initSlider: function () {
37-
var options = this.options,
38-
useIntersectionObserver = options.useIntersectionObserver,
39-
unobserve = options.unobserve,
40-
self = this,
41-
$head = $('head'),
42-
elements = options.selector ? self.element.find(options.selector) : self.element;
43-
elements.each(function() {
44-
var element = $(this),
45-
selector = 'grid-slider-' + self._uniqid(),
46-
styleId = selector;
47-
element.addClass(selector);
48-
selector = '.' + selector;
49-
if($('body').hasClass('rtl')){
50-
element.attr('dir', 'rtl');
51-
element.data( 'rtl', true );
52-
}
53-
var options = element.data();
54-
if ($.isEmptyObject(options)){
55-
let gridslider = element.closest('grid-slider');
56-
if (gridslider.length) {
57-
options = gridslider.data();
58-
}
59-
}
60-
console.log(options);
61-
if(iClass === undefined){
62-
element.children().addClass('alo-item');
63-
var iClass = '.alo-item';
64-
}
65-
var rows = ((options || {}).rows === void 0) ? 1 : options.rows,
66-
classes = rows ? selector + ' '+ iClass : selector + ' > '+ iClass,
67-
padding = options.padding,
68-
float = $('body').hasClass('rtl') ? 'right' : 'left',
69-
style = (typeof padding !== 'undefined') ? classes + '{float: ' + float + '; padding: 0 '+padding+'px; box-sizing: border-box} ' + selector + '{margin: 0 -'+padding+'px}' : '';
70-
$head.append('<style type="text/css" >'+style+'</style>');
71-
style = '';
72-
if(options.slidesToShow){
73-
if ("IntersectionObserver" in window && useIntersectionObserver) {
74-
var nthChild = options.slidesToShow + 1;
75-
style += selector + ' .item:nth-child(n+ ' + nthChild + ')' + '{display: none;} ' + selector + ' .item{float:left};';
76-
let gridSliderObserver = new IntersectionObserver(function(entries, observer) {
77-
entries.forEach(function(entry) {
78-
if (entry.isIntersecting) {
79-
let el = entry.target;
80-
var $el = $(el);
81-
$el.on('init', function(){
82-
$head.find('#' + styleId).remove();
83-
});
84-
self.sliderRender($el);
85-
if(unobserve) gridSliderObserver.unobserve(el);
86-
}
87-
});
88-
});
89-
90-
element.each(function(index, el){
91-
gridSliderObserver.observe(el);
92-
});
93-
} else {
94-
self.sliderRender(element);
95-
}
96-
}
97-
var responsive = self.getPesponsive(options);
98-
if(responsive == undefined) return;
99-
var length = Object.keys(responsive).length;
100-
$.each( responsive, function( key, value ) {
101-
var col = 0,
102-
maxWith = 0,
103-
minWith = 0;
104-
$.each( value , function(size, num) { minWith = parseInt(size) + 1; col = num;});
105-
if(key+2<length){
106-
$.each( responsive[key+1], function( size, num) { maxWith = size; col = num;});
107-
style += ' @media (min-width: '+minWith+'px) and (max-width: '+maxWith+'px)';
108-
} else {
109-
if(key+2 == length) return; // don't use key = length - 1;
110-
$.each( responsive[key], function( size, num) { maxWith = size; col = num;});
111-
style += ' @media (min-width: '+maxWith+'px)';
112-
}
113-
style += ' {'+selector + '{margin: 0 -'+padding+'px}'+classes+'{padding: 0 '+padding+'px; box-sizing: border-box; width: calc(100% / ' + col + ')} '+classes+':nth-child('+col+'n+1){clear: ' + float + ';}}';
114-
});
115-
$head.append('<style type="text/css" id="' + styleId + '" >'+style+'</style>');
116-
117-
self.element.addClass('grid-init');
118-
119-
});
120-
},
121-
122-
getPesponsive : function (options) {
123-
if(!options.slidesToShow || !options.responsive) return options.responsive;
124-
var responsive = options.responsive,
125-
length = Object.keys(responsive).length,
126-
gridResponsive = [];
127-
$.each( responsive, function( key, value ) {
128-
var breakpoint = {};
129-
breakpoint[value.breakpoint] = parseInt(value.settings.slidesToShow);
130-
gridResponsive.push(breakpoint);
131-
});
132-
return gridResponsive.reverse();
133-
},
134-
135-
sliderRender: function (el) {
136-
if(el.hasClass('slick-initialized')){
137-
el.slick("refresh");
138-
return;
139-
}
140-
var options = el.data(),
141-
lazy = el.find('img.lazyload');
9+
'jquery',
10+
'slick',
11+
'jquery-ui-modules/core'
12+
], function ($, slick) {
13+
"use strict";
14+
$.widget('magepow.gridSlider', {
15+
options: {
16+
selector: '.grid-slider',
17+
useIntersectionObserver: true,
18+
unobserve: true,
19+
},
20+
21+
_create: function () {
22+
var options = this.options;
23+
this._initSlider();
24+
},
25+
26+
_uniqid: function (length = 10) {
27+
let result = '';
28+
const characters = 'abcdefghijklmnopqrstuvwxyz0123456789';
29+
const charactersLength = characters.length;
30+
for (let i = 0; i < length; i++) {
31+
result += characters.charAt(Math.floor(Math.random() * charactersLength));
32+
}
33+
return result;
34+
},
35+
36+
_initSlider: function () {
37+
var options = this.options,
38+
useIntersectionObserver = options.useIntersectionObserver,
39+
unobserve = options.unobserve,
40+
self = this,
41+
$head = $('head'),
42+
elements = options.selector ? self.element.find(options.selector) : self.element;
43+
elements.each(function () {
44+
var element = $(this),
45+
selector = 'grid-slider-' + self._uniqid(),
46+
styleId = selector;
47+
element.addClass(selector);
48+
selector = '.' + selector;
49+
if ($('body').hasClass('rtl')) {
50+
element.attr('dir', 'rtl');
51+
element.data('rtl', true);
52+
}
53+
var options = element.data();
14254
if ($.isEmptyObject(options)) {
143-
let gridslider = el.closest('grid-slider');
55+
let gridslider = element.closest('grid-slider');
14456
if (gridslider.length) {
14557
options = gridslider.data();
14658
}
14759
}
148-
if(lazy.length){
149-
lazy.each(function(index) {
150-
$(this).data('lazy', $(this).data('src'));
151-
});
152-
}
153-
el.on('init', function(event, slick){
154-
$('body').trigger('contentUpdated'); // support lazyload
155-
var video = $(this).find('.external-video');
156-
video.on('click', function(event) {
157-
var $this = $(this);
158-
if($this.hasClass('embed')) return;
159-
var img = $this.find('img');
160-
event.preventDefault();
161-
var url = $(this).data('video');
162-
url = url.replace("://vimeo.com/", "://player.vimeo.com/video/");
163-
url = url.replace("://www.youtube.com/watch?v=", "://youtube.com/embed/");
164-
url = url + '?autoplay=1&badge=0';
165-
var iframe = '<iframe class="iframe-video" src="' + url + '" width="' + img.width() + '" height="' + img.height() + '" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>';
166-
$this.append(iframe).addClass('embed');
167-
img.hide();
168-
});
169-
});
170-
171-
var slider = el.slick(options);
172-
el.on('beforeChange', function(event, slick, currentSlide, nextSlide){
173-
var video = $(this).find('.external-video');
174-
video.removeClass('embed').find('img').show();
175-
video.find('.iframe-video').remove();
176-
});
177-
slider.on( "click", ".item", function() {
178-
el.slick('slickSetOption', "autoplay",false,false);
179-
});
180-
}
181-
182-
});
60+
console.log(options);
61+
if (iClass === undefined) {
62+
element.children().addClass('alo-item');
63+
var iClass = '.alo-item';
64+
}
65+
var rows = ((options || {}).rows === void 0) ? 1 : options.rows,
66+
classes = rows ? selector + ' ' + iClass : selector + ' > ' + iClass,
67+
padding = options.padding,
68+
float = $('body').hasClass('rtl') ? 'right' : 'left',
69+
style = (typeof padding !== 'undefined') ? classes + '{float: ' + float + '; padding: 0 ' + padding + 'px; box-sizing: border-box} ' + selector + '{margin: 0 -' + padding + 'px}' : '';
70+
$head.append('<style type="text/css" >' + style + '</style>');
71+
style = '';
72+
if (options.slidesToShow) {
73+
if ("IntersectionObserver" in window && useIntersectionObserver) {
74+
var nthChild = options.slidesToShow + 1;
75+
style += selector + ' .item:nth-child(n+ ' + nthChild + ')' + '{display: none;} ' + selector + ' .item{float:left};';
76+
let gridSliderObserver = new IntersectionObserver(function (entries, observer) {
77+
entries.forEach(function (entry) {
78+
if (entry.isIntersecting) {
79+
let el = entry.target;
80+
var $el = $(el);
81+
$el.on('init', function () {
82+
$head.find('#' + styleId).remove();
83+
});
84+
self.sliderRender($el);
85+
if (unobserve) gridSliderObserver.unobserve(el);
86+
}
87+
});
88+
});
89+
90+
element.each(function (index, el) {
91+
gridSliderObserver.observe(el);
92+
});
93+
} else {
94+
self.sliderRender(element);
95+
}
96+
}
97+
var responsive = self.getPesponsive(options);
98+
if (responsive == undefined) return;
99+
var length = Object.keys(responsive).length;
100+
$.each(responsive, function (key, value) {
101+
var col = 0,
102+
maxWith = 0,
103+
minWith = 0;
104+
$.each(value, function (size, num) { minWith = parseInt(size) + 1; col = num; });
105+
if (key + 2 < length) {
106+
$.each(responsive[key + 1], function (size, num) { maxWith = size; col = num; });
107+
style += ' @media (min-width: ' + minWith + 'px) and (max-width: ' + maxWith + 'px)';
108+
} else {
109+
if (key + 2 == length) return; // don't use key = length - 1;
110+
$.each(responsive[key], function (size, num) { maxWith = size; col = num; });
111+
style += ' @media (min-width: ' + maxWith + 'px)';
112+
}
113+
style += ' {' + selector + '{margin: 0 -' + padding + 'px}' + classes + '{padding: 0 ' + padding + 'px; box-sizing: border-box; width: calc(100% / ' + col + ')} ' + classes + ':nth-child(' + col + 'n+1){clear: ' + float + ';}}';
114+
});
115+
$head.append('<style type="text/css" id="' + styleId + '" >' + style + '</style>');
116+
117+
self.element.addClass('grid-init');
118+
119+
});
120+
},
121+
122+
getPesponsive: function (options) {
123+
if (!options.slidesToShow || !options.responsive) return options.responsive;
124+
var responsive = options.responsive,
125+
length = Object.keys(responsive).length,
126+
gridResponsive = [];
127+
$.each(responsive, function (key, value) {
128+
var breakpoint = {};
129+
breakpoint[value.breakpoint] = parseInt(value.settings.slidesToShow);
130+
gridResponsive.push(breakpoint);
131+
});
132+
return gridResponsive.reverse();
133+
},
134+
135+
sliderRender: function (el) {
136+
if (el.hasClass('slick-initialized')) {
137+
el.slick("refresh");
138+
return;
139+
}
140+
var options = el.data(),
141+
lazy = el.find('img.lazyload');
142+
if ($.isEmptyObject(options)) {
143+
let gridslider = el.closest('grid-slider');
144+
if (gridslider.length) {
145+
options = gridslider.data();
146+
}
147+
}
148+
if (lazy.length) {
149+
lazy.each(function (index) {
150+
$(this).data('lazy', $(this).data('src'));
151+
});
152+
}
153+
el.on('init', function (event, slick) {
154+
$('body').trigger('contentUpdated'); // support lazyload
155+
var video = $(this).find('.external-video');
156+
video.on('click', function (event) {
157+
var $this = $(this);
158+
if ($this.hasClass('embed')) return;
159+
var img = $this.find('img');
160+
event.preventDefault();
161+
var url = $(this).data('video');
162+
url = url.replace("://vimeo.com/", "://player.vimeo.com/video/");
163+
url = url.replace("://www.youtube.com/watch?v=", "://youtube.com/embed/");
164+
url = url + '?autoplay=1&badge=0';
165+
var iframe = '<iframe class="iframe-video" src="' + url + '" width="' + img.width() + '" height="' + img.height() + '" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>';
166+
$this.append(iframe).addClass('embed');
167+
img.hide();
168+
});
169+
});
170+
171+
var slider = el.slick(options);
172+
el.on('beforeChange', function (event, slick, currentSlide, nextSlide) {
173+
var video = $(this).find('.external-video');
174+
video.removeClass('embed').find('img').show();
175+
video.find('.iframe-video').remove();
176+
});
177+
slider.on("click", ".item", function () {
178+
el.slick('slickSetOption', "autoplay", false, false);
179+
});
180+
}
181+
182+
});
183183

184184
if (!customElements.get('grid-slider')) {
185185
class GridSlider extends HTMLElement {
@@ -200,7 +200,6 @@ define([
200200
}
201201

202202
initialized() {
203-
204203
$(this).not(".exception, .grid-init, .slick-initialized").each(function () {
205204
$.magepow.gridSlider({
206205
selector: '.grid-slider',
@@ -214,6 +213,6 @@ define([
214213
customElements.define("grid-slider", GridSlider);
215214
}
216215

217-
return $.magepow.gridSlider;
216+
return $.magepow.gridSlider;
218217

219218
});

0 commit comments

Comments
 (0)