Skip to content

Commit

Permalink
feat(core): convert Navigation to functional module
Browse files Browse the repository at this point in the history
  • Loading branch information
@nolimits4web
nolimits4web committed Aug 4, 2021
1 parent ed63a3b commit e4aa156
Showing 1 changed file with 121 additions and 146 deletions.
267 changes: 121 additions & 146 deletions src/modules/navigation/navigation.js
View file
Original file line number Diff line number Diff line change
@@ -1,55 +1,71 @@
import $ from '../../shared/dom.js';
import { extend, bindModuleMethods, createElementIfNotDefined } from '../../shared/utils.js';
import { extend, createElementIfNotDefined } from '../../shared/utils.js';

const Navigation = {
toggleEl($el, disabled) {
$el[disabled ? 'addClass' : 'removeClass'](this.params.navigation.disabledClass);
if ($el[0] && $el[0].tagName === 'BUTTON') $el[0].disabled = disabled;
},
update() {
// Update Navigation Buttons
const swiper = this;
const params = swiper.params.navigation;
const toggleEl = swiper.navigation.toggleEl;
export default function Navigation({ swiper, extendParams, on, emit }) {
extendParams({
navigation: {
nextEl: null,
prevEl: null,

if (swiper.params.loop) return;
const { $nextEl, $prevEl } = swiper.navigation;
hideOnClick: false,
disabledClass: 'swiper-button-disabled',
hiddenClass: 'swiper-button-hidden',
lockClass: 'swiper-button-lock',
},
});

if ($prevEl && $prevEl.length > 0) {
if (swiper.isBeginning) {
toggleEl($prevEl, true);
} else {
toggleEl($prevEl, false);
}
if (swiper.params.watchOverflow && swiper.enabled) {
$prevEl[swiper.isLocked ? 'addClass' : 'removeClass'](params.lockClass);
swiper.navigation = {
nextEl: null,
$nextEl: null,
prevEl: null,
$prevEl: null,
};

function getEl(el) {
let $el;
if (el) {
$el = $(el);
if (
swiper.params.uniqueNavElements &&
typeof el === 'string' &&
$el.length > 1 &&
swiper.$el.find(el).length === 1
) {
$el = swiper.$el.find(el);
}
}
if ($nextEl && $nextEl.length > 0) {
if (swiper.isEnd) {
toggleEl($nextEl, true);
} else {
toggleEl($nextEl, false);
}
return $el;
}

function toggleEl($el, disabled) {
const params = swiper.params.navigation;
if ($el && $el.length > 0) {
$el[disabled ? 'addClass' : 'removeClass'](params.disabledClass);
if ($el[0] && $el[0].tagName === 'BUTTON') $el[0].disabled = disabled;
if (swiper.params.watchOverflow && swiper.enabled) {
$nextEl[swiper.isLocked ? 'addClass' : 'removeClass'](params.lockClass);
$el[swiper.isLocked ? 'addClass' : 'removeClass'](params.lockClass);
}
}
},
onPrevClick(e) {
const swiper = this;
}
function update() {
// Update Navigation Buttons
if (swiper.params.loop) return;
const { $nextEl, $prevEl } = swiper.navigation;

toggleEl($prevEl, swiper.isBeginning);
toggleEl($nextEl, swiper.isEnd);
}
function onPrevClick(e) {
e.preventDefault();
if (swiper.isBeginning && !swiper.params.loop) return;
swiper.slidePrev();
},
onNextClick(e) {
const swiper = this;
}
function onNextClick(e) {
e.preventDefault();
if (swiper.isEnd && !swiper.params.loop) return;
swiper.slideNext();
},
init() {
const swiper = this;
}
function init() {
const params = swiper.params.navigation;

swiper.params.navigation = createElementIfNotDefined(
Expand All @@ -63,36 +79,14 @@ const Navigation = {
);
if (!(params.nextEl || params.prevEl)) return;

let $nextEl;
let $prevEl;
if (params.nextEl) {
$nextEl = $(params.nextEl);
if (
swiper.params.uniqueNavElements &&
typeof params.nextEl === 'string' &&
$nextEl.length > 1 &&
swiper.$el.find(params.nextEl).length === 1
) {
$nextEl = swiper.$el.find(params.nextEl);
}
}
if (params.prevEl) {
$prevEl = $(params.prevEl);
if (
swiper.params.uniqueNavElements &&
typeof params.prevEl === 'string' &&
$prevEl.length > 1 &&
swiper.$el.find(params.prevEl).length === 1
) {
$prevEl = swiper.$el.find(params.prevEl);
}
}
const $nextEl = getEl(params.nextEl);
const $prevEl = getEl(params.prevEl);

if ($nextEl && $nextEl.length > 0) {
$nextEl.on('click', swiper.navigation.onNextClick);
$nextEl.on('click', onNextClick);
}
if ($prevEl && $prevEl.length > 0) {
$prevEl.on('click', swiper.navigation.onPrevClick);
$prevEl.on('click', onPrevClick);
}

extend(swiper.navigation, {
Expand All @@ -106,98 +100,79 @@ const Navigation = {
if ($nextEl) $nextEl.addClass(params.lockClass);
if ($prevEl) $prevEl.addClass(params.lockClass);
}
},
destroy() {
const swiper = this;
}
function destroy() {
const { $nextEl, $prevEl } = swiper.navigation;
if ($nextEl && $nextEl.length) {
$nextEl.off('click', swiper.navigation.onNextClick);
$nextEl.off('click', onNextClick);
$nextEl.removeClass(swiper.params.navigation.disabledClass);
}
if ($prevEl && $prevEl.length) {
$prevEl.off('click', swiper.navigation.onPrevClick);
$prevEl.off('click', onPrevClick);
$prevEl.removeClass(swiper.params.navigation.disabledClass);
}
},
};
}

export default {
name: 'navigation',
params: {
navigation: {
nextEl: null,
prevEl: null,

hideOnClick: false,
disabledClass: 'swiper-button-disabled',
hiddenClass: 'swiper-button-hidden',
lockClass: 'swiper-button-lock',
},
},
create() {
const swiper = this;
bindModuleMethods(swiper, {
navigation: {
...Navigation,
},
});
},
on: {
init(swiper) {
swiper.navigation.init();
swiper.navigation.update();
},
toEdge(swiper) {
swiper.navigation.update();
},
fromEdge(swiper) {
swiper.navigation.update();
},
destroy(swiper) {
swiper.navigation.destroy();
},
'enable disable': (swiper) => {
const { $nextEl, $prevEl } = swiper.navigation;
on('init', () => {
init();
update();
});
on('toEdge', () => {
update();
});
on('fromEdge', () => {
update();
});
on('destroy', () => {
destroy();
});
on('enable disable', () => {
const { $nextEl, $prevEl } = swiper.navigation;
if ($nextEl) {
$nextEl[swiper.enabled ? 'removeClass' : 'addClass'](swiper.params.navigation.lockClass);
}
if ($prevEl) {
$prevEl[swiper.enabled ? 'removeClass' : 'addClass'](swiper.params.navigation.lockClass);
}
});
on('click', (_s, e) => {
const { $nextEl, $prevEl } = swiper.navigation;
const targetEl = e.target;
if (
swiper.params.navigation.hideOnClick &&
!$(targetEl).is($prevEl) &&
!$(targetEl).is($nextEl)
) {
if (
swiper.pagination &&
swiper.params.pagination &&
swiper.params.pagination.clickable &&
(swiper.pagination.el === targetEl || swiper.pagination.el.contains(targetEl))
)
return;
let isHidden;
if ($nextEl) {
$nextEl[swiper.enabled ? 'removeClass' : 'addClass'](swiper.params.navigation.lockClass);
isHidden = $nextEl.hasClass(swiper.params.navigation.hiddenClass);
} else if ($prevEl) {
isHidden = $prevEl.hasClass(swiper.params.navigation.hiddenClass);
}
if ($prevEl) {
$prevEl[swiper.enabled ? 'removeClass' : 'addClass'](swiper.params.navigation.lockClass);
if (isHidden === true) {
emit('navigationShow');
} else {
emit('navigationHide');
}
},
click(swiper, e) {
const { $nextEl, $prevEl } = swiper.navigation;
const targetEl = e.target;
if (
swiper.params.navigation.hideOnClick &&
!$(targetEl).is($prevEl) &&
!$(targetEl).is($nextEl)
) {
if (
swiper.pagination &&
swiper.params.pagination &&
swiper.params.pagination.clickable &&
(swiper.pagination.el === targetEl || swiper.pagination.el.contains(targetEl))
)
return;
let isHidden;
if ($nextEl) {
isHidden = $nextEl.hasClass(swiper.params.navigation.hiddenClass);
} else if ($prevEl) {
isHidden = $prevEl.hasClass(swiper.params.navigation.hiddenClass);
}
if (isHidden === true) {
swiper.emit('navigationShow');
} else {
swiper.emit('navigationHide');
}
if ($nextEl) {
$nextEl.toggleClass(swiper.params.navigation.hiddenClass);
}
if ($prevEl) {
$prevEl.toggleClass(swiper.params.navigation.hiddenClass);
}
if ($nextEl) {
$nextEl.toggleClass(swiper.params.navigation.hiddenClass);
}
},
},
};
if ($prevEl) {
$prevEl.toggleClass(swiper.params.navigation.hiddenClass);
}
}
});

Object.assign(swiper.navigation, {
update,
init,
destroy,
});
}

0 comments on commit e4aa156

Please sign in to comment.