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