Skip to content

Commit c3173e1

Browse files
wealcoderahsanwealcoderahsan
committed
ADD: filterable slider
1 parent 3b96c46 commit c3173e1

File tree

9 files changed

+1435
-1
lines changed

9 files changed

+1435
-1
lines changed

‎assets/css/widgets/filterable-slider.css‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
.wcf--filterable-slider {
2+
display: flex;
3+
justify-content: space-between;
4+
flex-direction: column;
5+
gap: 30px;
6+
}
7+
.wcf--filterable-slider svg {
8+
width: 1em;
9+
height: 1em;
10+
}
11+
.wcf--filterable-slider .slide-filter {
12+
padding: 0;
13+
margin: 0;
14+
list-style: none;
15+
display: flex;
16+
gap: 30px;
17+
}
18+
.wcf--filterable-slider .slide-filter li {
19+
cursor: pointer;
20+
}
21+
.wcf--filterable-slider .slide-filter .count {
22+
font-size: 12px;
23+
vertical-align: top;
24+
display: inline-block;
25+
line-height: 1;
26+
}
27+
.wcf--filterable-slider .paginate-fill {
28+
display: inline-block;
29+
width: 100px;
30+
height: 3px;
31+
background: rgba(15, 15, 15, 0.12);
32+
position: relative;
33+
vertical-align: middle;
34+
}
35+
.wcf--filterable-slider .paginate-fill:after {
36+
content: "";
37+
width: var(--width, 100%);
38+
height: 100%;
39+
position: absolute;
40+
left: 0;
41+
top: 0;
42+
background: rgb(15, 15, 15);
43+
}
44+
.wcf--filterable-slider .thumb {
45+
line-height: 0;
46+
}
47+
.wcf--filterable-slider .wcf-arrow {
48+
cursor: pointer;
49+
color: #666666;
50+
position: absolute;
51+
padding: 15px;
52+
top: 50%;
53+
display: flex;
54+
align-items: center;
55+
justify-content: center;
56+
border: 1px solid #ddd;
57+
border-radius: 50%;
58+
transform: translateY(-50%);
59+
transition: all 0.3s;
60+
z-index: 9;
61+
}
62+
.wcf--filterable-slider .wcf-arrow:hover {
63+
color: #1C1D20;
64+
}
65+
.wcf--filterable-slider .wcf-arrow-prev {
66+
left: 0;
67+
}
68+
.wcf--filterable-slider .wcf-arrow-next {
69+
right: 0;
70+
}
71+
72+
.elementor-widget-wcf--filterable-slider.filter-direction-row-reverse .slide-filter, .elementor-widget-wcf--filterable-slider.filter-direction-row .slide-filter {
73+
flex-direction: column;
74+
}

‎assets/css/widgets/filterable-slider.min.css‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎assets/js/widgets/filterable-slider.js‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
/* global WCF_ADDONS_JS */
2+
(function ($) {
3+
/**
4+
* @param $scope The Widget wrapper element as a jQuery element
5+
* @param $ The jQuery alias
6+
*/
7+
const AdvanceSlider = function ($scope, $) {
8+
const slider = $($('.wcf__slider', $scope)[0]);
9+
const sliderSettings = $($('.slider-wrapper', $scope)[0]).data('settings') || {};
10+
let slides = $('.swiper-slide', $scope).clone();
11+
let Wrapper = $('.swiper-wrapper', $scope);
12+
sliderSettings.handleElementorBreakpoints = true;
13+
14+
if (sliderSettings.hasOwnProperty('pagination')) {
15+
sliderSettings.pagination.renderCustom = function (swiper, current, total) {
16+
let width = (100 / total) * current;
17+
return "0"+current + ' <span class="paginate-fill" style="' + '--width:' + width + '%"></span> ' + 0+total;
18+
};
19+
}
20+
21+
const filters = $('.slide-filter li', $scope);
22+
new elementorFrontend.utils.swiper(slider, sliderSettings).then(newSwiperInstance => newSwiperInstance).then(newSwiperInstance => {
23+
24+
filters.first().addClass('active');
25+
26+
filters.on('click', function () {
27+
28+
if ($(this).hasClass('active')) {
29+
return;
30+
}
31+
32+
let filter = $(this).data('filter');
33+
filters.removeClass('active');
34+
$(this).addClass('active');
35+
36+
37+
if ('all' === filter) {
38+
Wrapper.html(slides)
39+
newSwiperInstance.update();
40+
newSwiperInstance.updateSlides()
41+
} else {
42+
Wrapper.html(slides.filter(filter))
43+
newSwiperInstance.update();
44+
newSwiperInstance.updateSlides()
45+
}
46+
});
47+
48+
});
49+
};
50+
51+
// Make sure you run this code under Elementor.
52+
$(window).on('elementor/frontend/init', function () {
53+
elementorFrontend.hooks.addAction('frontend/element_ready/wcf--filterable-slider.default', AdvanceSlider);
54+
});
55+
})(jQuery);

‎assets/js/widgets/filterable-slider.min.js‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎assets/src/js/widgets/filterable-slider.js‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
/* global WCF_ADDONS_JS */
2+
(function ($) {
3+
/**
4+
* @param $scope The Widget wrapper element as a jQuery element
5+
* @param $ The jQuery alias
6+
*/
7+
const AdvanceSlider = function ($scope, $) {
8+
const slider = $($('.wcf__slider', $scope)[0]);
9+
const sliderSettings = $($('.slider-wrapper', $scope)[0]).data('settings') || {};
10+
let slides = $('.swiper-slide', $scope).clone();
11+
let Wrapper = $('.swiper-wrapper', $scope);
12+
sliderSettings.handleElementorBreakpoints = true;
13+
14+
if (sliderSettings.hasOwnProperty('pagination')) {
15+
sliderSettings.pagination.renderCustom = function (swiper, current, total) {
16+
let width = (100 / total) * current;
17+
return "0"+current + ' <span class="paginate-fill" style="' + '--width:' + width + '%"></span> ' + 0+total;
18+
};
19+
}
20+
21+
const filters = $('.slide-filter li', $scope);
22+
new elementorFrontend.utils.swiper(slider, sliderSettings).then(newSwiperInstance => newSwiperInstance).then(newSwiperInstance => {
23+
24+
filters.first().addClass('active');
25+
26+
filters.on('click', function () {
27+
28+
if ($(this).hasClass('active')) {
29+
return;
30+
}
31+
32+
let filter = $(this).data('filter');
33+
filters.removeClass('active');
34+
$(this).addClass('active');
35+
36+
37+
if ('all' === filter) {
38+
Wrapper.html(slides)
39+
newSwiperInstance.update();
40+
newSwiperInstance.updateSlides()
41+
} else {
42+
Wrapper.html(slides.filter(filter))
43+
newSwiperInstance.update();
44+
newSwiperInstance.updateSlides()
45+
}
46+
});
47+
48+
});
49+
};
50+
51+
// Make sure you run this code under Elementor.
52+
$(window).on('elementor/frontend/init', function () {
53+
elementorFrontend.hooks.addAction('frontend/element_ready/wcf--filterable-slider.default', AdvanceSlider);
54+
});
55+
})(jQuery);

‎assets/src/scss/widgets/filterable-slider.scss‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
.wcf--filterable-slider{
2+
display: flex;
3+
justify-content: space-between;
4+
flex-direction: column;
5+
gap: 30px;
6+
7+
svg{
8+
width: 1em;
9+
height: 1em;
10+
}
11+
12+
.slide-filter {
13+
padding: 0;
14+
margin: 0;
15+
list-style: none;
16+
display: flex;
17+
gap: 30px;
18+
19+
li {
20+
cursor: pointer;
21+
}
22+
23+
.count {
24+
font-size: 12px;
25+
vertical-align: top;
26+
display: inline-block;
27+
line-height: 1;
28+
}
29+
}
30+
31+
.paginate-fill {
32+
display: inline-block;
33+
width: 100px;
34+
height: 3px;
35+
background: rgba(15, 15, 15, 0.12);
36+
position: relative;
37+
vertical-align: middle;
38+
&:after {
39+
content: '';
40+
width: var(--width, 100%);
41+
height: 100%;
42+
position: absolute;
43+
left: 0;
44+
top: 0;
45+
background: rgba(15, 15, 15, 1);
46+
}
47+
}
48+
49+
.thumb{
50+
line-height: 0;
51+
}
52+
53+
.wcf-arrow {
54+
cursor: pointer;
55+
color: #666666;
56+
position: absolute;
57+
padding: 15px;
58+
top: 50%;
59+
display: flex;
60+
align-items: center;
61+
justify-content: center;
62+
border: 1px solid #ddd;
63+
border-radius: 50%;
64+
transform: translateY(-50%);
65+
transition: all 0.3s;
66+
z-index: 9;
67+
68+
&:hover {
69+
color: #1C1D20;
70+
}
71+
72+
&-prev {
73+
left: 0;
74+
}
75+
76+
&-next {
77+
right: 0;
78+
}
79+
}
80+
}
81+
82+
.elementor-widget-wcf--filterable-slider{
83+
&.filter-direction-row-reverse,
84+
&.filter-direction-row {
85+
.slide-filter {
86+
flex-direction: column;
87+
}
88+
}
89+
}

‎class-plugin.php‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -367,6 +367,13 @@ public static function get_widget_scripts()
367367
'version' => false,
368368
'arg' => true,
369369
],
370+
'filterable-slider' => [
371+
'handler' => 'wcf--filterable-slider',
372+
'src' => 'widgets/filterable-slider.min.js',
373+
'dep' => [],
374+
'version' => false,
375+
'arg' => true,
376+
],
370377
]);
371378
}
372379

@@ -606,6 +613,13 @@ public static function get_widget_style()
606613
'version' => false,
607614
'media' => 'all',
608615
],
616+
'filterable-slider' => [
617+
'handler' => 'wcf--filterable-slider',
618+
'src' => 'widgets/filterable-slider.min.css',
619+
'dep' => [],
620+
'version' => false,
621+
'media' => 'all',
622+
],
609623
];
610624
}
611625

‎config.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -700,7 +700,7 @@
700700
'cTab' => 'all'
701701
],
702702
'is_upcoming' => false,
703-
'is_pro' => true,
703+
'is_pro' => false,
704704
'is_extension' => false,
705705
'icon' => "wcf-icon-Filterable-Slider",
706706
'demo_url' => 'https://animation-addons.com/widgets/aae-filterable-slider',

0 commit comments

Comments
 (0)