1 | import createElementIfNotDefined from '../../shared/create-element-if-not-defined.js';
|
2 | import $ from '../../shared/dom.js';
|
3 | export default function Navigation({
|
4 | swiper,
|
5 | extendParams,
|
6 | on,
|
7 | emit
|
8 | }) {
|
9 | extendParams({
|
10 | navigation: {
|
11 | nextEl: null,
|
12 | prevEl: null,
|
13 | hideOnClick: false,
|
14 | disabledClass: 'swiper-button-disabled',
|
15 | hiddenClass: 'swiper-button-hidden',
|
16 | lockClass: 'swiper-button-lock'
|
17 | }
|
18 | });
|
19 | swiper.navigation = {
|
20 | nextEl: null,
|
21 | $nextEl: null,
|
22 | prevEl: null,
|
23 | $prevEl: null
|
24 | };
|
25 |
|
26 | function getEl(el) {
|
27 | let $el;
|
28 |
|
29 | if (el) {
|
30 | $el = $(el);
|
31 |
|
32 | if (swiper.params.uniqueNavElements && typeof el === 'string' && $el.length > 1 && swiper.$el.find(el).length === 1) {
|
33 | $el = swiper.$el.find(el);
|
34 | }
|
35 | }
|
36 |
|
37 | return $el;
|
38 | }
|
39 |
|
40 | function toggleEl($el, disabled) {
|
41 | const params = swiper.params.navigation;
|
42 |
|
43 | if ($el && $el.length > 0) {
|
44 | $el[disabled ? 'addClass' : 'removeClass'](params.disabledClass);
|
45 | if ($el[0] && $el[0].tagName === 'BUTTON') $el[0].disabled = disabled;
|
46 |
|
47 | if (swiper.params.watchOverflow && swiper.enabled) {
|
48 | $el[swiper.isLocked ? 'addClass' : 'removeClass'](params.lockClass);
|
49 | }
|
50 | }
|
51 | }
|
52 |
|
53 | function update() {
|
54 |
|
55 | if (swiper.params.loop) return;
|
56 | const {
|
57 | $nextEl,
|
58 | $prevEl
|
59 | } = swiper.navigation;
|
60 | toggleEl($prevEl, swiper.isBeginning);
|
61 | toggleEl($nextEl, swiper.isEnd);
|
62 | }
|
63 |
|
64 | function onPrevClick(e) {
|
65 | e.preventDefault();
|
66 | if (swiper.isBeginning && !swiper.params.loop) return;
|
67 | swiper.slidePrev();
|
68 | }
|
69 |
|
70 | function onNextClick(e) {
|
71 | e.preventDefault();
|
72 | if (swiper.isEnd && !swiper.params.loop) return;
|
73 | swiper.slideNext();
|
74 | }
|
75 |
|
76 | function init() {
|
77 | const params = swiper.params.navigation;
|
78 | swiper.params.navigation = createElementIfNotDefined(swiper, swiper.originalParams.navigation, swiper.params.navigation, {
|
79 | nextEl: 'swiper-button-next',
|
80 | prevEl: 'swiper-button-prev'
|
81 | });
|
82 | if (!(params.nextEl || params.prevEl)) return;
|
83 | const $nextEl = getEl(params.nextEl);
|
84 | const $prevEl = getEl(params.prevEl);
|
85 |
|
86 | if ($nextEl && $nextEl.length > 0) {
|
87 | $nextEl.on('click', onNextClick);
|
88 | }
|
89 |
|
90 | if ($prevEl && $prevEl.length > 0) {
|
91 | $prevEl.on('click', onPrevClick);
|
92 | }
|
93 |
|
94 | Object.assign(swiper.navigation, {
|
95 | $nextEl,
|
96 | nextEl: $nextEl && $nextEl[0],
|
97 | $prevEl,
|
98 | prevEl: $prevEl && $prevEl[0]
|
99 | });
|
100 |
|
101 | if (!swiper.enabled) {
|
102 | if ($nextEl) $nextEl.addClass(params.lockClass);
|
103 | if ($prevEl) $prevEl.addClass(params.lockClass);
|
104 | }
|
105 | }
|
106 |
|
107 | function destroy() {
|
108 | const {
|
109 | $nextEl,
|
110 | $prevEl
|
111 | } = swiper.navigation;
|
112 |
|
113 | if ($nextEl && $nextEl.length) {
|
114 | $nextEl.off('click', onNextClick);
|
115 | $nextEl.removeClass(swiper.params.navigation.disabledClass);
|
116 | }
|
117 |
|
118 | if ($prevEl && $prevEl.length) {
|
119 | $prevEl.off('click', onPrevClick);
|
120 | $prevEl.removeClass(swiper.params.navigation.disabledClass);
|
121 | }
|
122 | }
|
123 |
|
124 | on('init', () => {
|
125 | init();
|
126 | update();
|
127 | });
|
128 | on('toEdge fromEdge lock unlock', () => {
|
129 | update();
|
130 | });
|
131 | on('destroy', () => {
|
132 | destroy();
|
133 | });
|
134 | on('enable disable', () => {
|
135 | const {
|
136 | $nextEl,
|
137 | $prevEl
|
138 | } = swiper.navigation;
|
139 |
|
140 | if ($nextEl) {
|
141 | $nextEl[swiper.enabled ? 'removeClass' : 'addClass'](swiper.params.navigation.lockClass);
|
142 | }
|
143 |
|
144 | if ($prevEl) {
|
145 | $prevEl[swiper.enabled ? 'removeClass' : 'addClass'](swiper.params.navigation.lockClass);
|
146 | }
|
147 | });
|
148 | on('click', (_s, e) => {
|
149 | const {
|
150 | $nextEl,
|
151 | $prevEl
|
152 | } = swiper.navigation;
|
153 | const targetEl = e.target;
|
154 |
|
155 | if (swiper.params.navigation.hideOnClick && !$(targetEl).is($prevEl) && !$(targetEl).is($nextEl)) {
|
156 | if (swiper.pagination && swiper.params.pagination && swiper.params.pagination.clickable && (swiper.pagination.el === targetEl || swiper.pagination.el.contains(targetEl))) return;
|
157 | let isHidden;
|
158 |
|
159 | if ($nextEl) {
|
160 | isHidden = $nextEl.hasClass(swiper.params.navigation.hiddenClass);
|
161 | } else if ($prevEl) {
|
162 | isHidden = $prevEl.hasClass(swiper.params.navigation.hiddenClass);
|
163 | }
|
164 |
|
165 | if (isHidden === true) {
|
166 | emit('navigationShow');
|
167 | } else {
|
168 | emit('navigationHide');
|
169 | }
|
170 |
|
171 | if ($nextEl) {
|
172 | $nextEl.toggleClass(swiper.params.navigation.hiddenClass);
|
173 | }
|
174 |
|
175 | if ($prevEl) {
|
176 | $prevEl.toggleClass(swiper.params.navigation.hiddenClass);
|
177 | }
|
178 | }
|
179 | });
|
180 | Object.assign(swiper.navigation, {
|
181 | update,
|
182 | init,
|
183 | destroy
|
184 | });
|
185 | } |
\ | No newline at end of file |