Compare commits
13 Commits
Author | SHA1 | Date |
---|---|---|
Valentin Silytuin | e1f4f4fae4 | |
Valentin Silytuin | a8339bd8ce | |
Valentin Silytuin | a0ba8d17ba | |
Valentin Silytuin | 95afd241ca | |
Valentin Silytuin | f0e0a7b0c1 | |
Valentin Silytuin | 7495ba6122 | |
Valentin Silytuin | f146d1e3f3 | |
Valentin Silytuin | e8fd735583 | |
Valentin Silytuin | da3975dee9 | |
Valentin Silytuin | b052509499 | |
Valentin Silytuin | 253d3cce5b | |
Valentin Silytuin | ba5307fc1e | |
Valentin Silytuin | 6bcd9a2da3 |
|
@ -1,21 +1,16 @@
|
||||||
# Настройки редакторов
|
|
||||||
|
|
||||||
.idea
|
|
||||||
.vscode
|
|
||||||
|
|
||||||
# Node.js
|
# Node.js
|
||||||
|
|
||||||
node_modules
|
node_modules
|
||||||
|
|
||||||
# Yarn (https://yarnpkg.com/getting-started/qa#which-files-should-be-gitignored)
|
# Yarn (https://yarnpkg.com/getting-started/qa#which-files-should-be-gitignored)
|
||||||
|
|
||||||
**/.pnp.*
|
.pnp.*
|
||||||
**/.yarn/*
|
.yarn/*
|
||||||
!**/.yarn/patches
|
!.yarn/patches
|
||||||
!**/.yarn/plugins
|
!.yarn/plugins
|
||||||
!**/.yarn/releases
|
!.yarn/releases
|
||||||
!**/.yarn/sdks
|
!.yarn/sdks
|
||||||
!**/.yarn/versions
|
!.yarn/versions
|
||||||
|
|
||||||
# ESLint
|
# ESLint
|
||||||
|
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
.yarn
|
.yarn
|
||||||
.editorconfig
|
.editorconfig
|
||||||
.nvmrc
|
.pnp.cjs
|
||||||
|
.pnp.loader.mjs
|
||||||
.prettierrc
|
.prettierrc
|
||||||
.yarnrc.yml
|
.yarnrc.yml
|
||||||
|
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -1,7 +1,5 @@
|
||||||
nodeLinker: node-modules
|
compressionLevel: mixed
|
||||||
|
|
||||||
plugins:
|
enableGlobalCache: false
|
||||||
- path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
|
|
||||||
spec: "@yarnpkg/plugin-interactive-tools"
|
|
||||||
|
|
||||||
yarnPath: .yarn/releases/yarn-3.6.0.cjs
|
yarnPath: .yarn/releases/yarn-4.1.1.cjs
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
|
|
||||||
## Требования
|
## Требования
|
||||||
|
|
||||||
- [Swiper](https://github.com/nolimits4web/swiper) версии 4.5.x
|
- [Swiper](https://github.com/nolimits4web/swiper) версии ^10.2.0
|
||||||
|
|
||||||
## Подключение и настройка
|
## Подключение и настройка
|
||||||
|
|
||||||
|
|
26
index.js
26
index.js
|
@ -97,8 +97,10 @@ const show = async (duration = 500, easing = 'linear') => {
|
||||||
};
|
};
|
||||||
|
|
||||||
const init = async (items = [], options = {}, index = 0) => {
|
const init = async (items = [], options = {}, index = 0) => {
|
||||||
const {Swiper, Navigation, Pagination} = await import('swiper');
|
const [{default: Swiper}, {Navigation, Pagination}] = await Promise.all([
|
||||||
Swiper.use([Navigation, Pagination]);
|
import('swiper'),
|
||||||
|
import('swiper/modules'),
|
||||||
|
]);
|
||||||
|
|
||||||
let isVideoInGallery = false;
|
let isVideoInGallery = false;
|
||||||
items = items.map((item) => {
|
items = items.map((item) => {
|
||||||
|
@ -131,9 +133,9 @@ const init = async (items = [], options = {}, index = 0) => {
|
||||||
},
|
},
|
||||||
set init(val) {
|
set init(val) {
|
||||||
this.state = val;
|
this.state = val;
|
||||||
this.callback.forEach((i) => {
|
for (const i of this.callback) {
|
||||||
i(val);
|
i(val);
|
||||||
});
|
}
|
||||||
},
|
},
|
||||||
callback: [],
|
callback: [],
|
||||||
addListener(callback) {
|
addListener(callback) {
|
||||||
|
@ -153,12 +155,12 @@ const init = async (items = [], options = {}, index = 0) => {
|
||||||
<button class="advdominion-lg__close" type="button">
|
<button class="advdominion-lg__close" type="button">
|
||||||
<svg class="advdominion-lg__close-icon"><use href="${options.icons.close}" /></svg>
|
<svg class="advdominion-lg__close-icon"><use href="${options.icons.close}" /></svg>
|
||||||
</button>
|
</button>
|
||||||
<div class="advdominion-lg__container swiper-container">
|
<div class="advdominion-lg__container swiper">
|
||||||
<div class="advdominion-lg__wrapper swiper-wrapper">
|
<div class="advdominion-lg__wrapper swiper-wrapper">
|
||||||
${items.join('')}
|
${items.join('')}
|
||||||
</div>
|
</div>
|
||||||
${options.pagination ? options.pagination : ''}
|
${options.pagination || ''}
|
||||||
${options.navigation ? options.navigation : ''}
|
${options.navigation || ''}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`
|
`
|
||||||
|
@ -166,14 +168,22 @@ const init = async (items = [], options = {}, index = 0) => {
|
||||||
|
|
||||||
const gallery = document.body.querySelector('.advdominion-lg');
|
const gallery = document.body.querySelector('.advdominion-lg');
|
||||||
|
|
||||||
|
gallery.querySelector('.advdominion-lg__container').style = `
|
||||||
|
visibility: hidden;
|
||||||
|
`;
|
||||||
|
|
||||||
await show(options?.animation?.show?.duration, options?.animation?.show?.easing);
|
await show(options?.animation?.show?.duration, options?.animation?.show?.easing);
|
||||||
|
|
||||||
const swiper = new Swiper(
|
const swiper = new Swiper(
|
||||||
gallery.querySelector('.advdominion-lg__container'),
|
gallery.querySelector('.advdominion-lg__container'),
|
||||||
Object.assign({init: false, initialSlide: index}, options.swiper)
|
Object.assign({modules: [Navigation, Pagination], init: false, initialSlide: index}, options.swiper)
|
||||||
);
|
);
|
||||||
|
|
||||||
swiper.on('init', function () {
|
swiper.on('init', function () {
|
||||||
|
gallery.querySelector('.advdominion-lg__container').style = `
|
||||||
|
visibility: '';
|
||||||
|
`;
|
||||||
|
|
||||||
if (this.slides[this.activeIndex].classList.contains('advdominion-lg__item_video')) {
|
if (this.slides[this.activeIndex].classList.contains('advdominion-lg__item_video')) {
|
||||||
playVideo(this.slides[this.activeIndex]);
|
playVideo(this.slides[this.activeIndex]);
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,8 +1,8 @@
|
||||||
{
|
{
|
||||||
"name": "@advdominion/lightbox-gallery",
|
"name": "@advdominion/lightbox-gallery",
|
||||||
"version": "1.0.1",
|
"version": "2.1.0",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"packageManager": "yarn@3.6.0",
|
"packageManager": "yarn@4.1.1",
|
||||||
"main": "index.js",
|
"main": "index.js",
|
||||||
"repository": {
|
"repository": {
|
||||||
"type": "git",
|
"type": "git",
|
||||||
|
@ -13,6 +13,6 @@
|
||||||
"@advdominion/get-scrollbar-width": "^1.0.0"
|
"@advdominion/get-scrollbar-width": "^1.0.0"
|
||||||
},
|
},
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"swiper": "4.5.1"
|
"swiper": "^11.0.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
11
styles.css
11
styles.css
|
@ -21,22 +21,25 @@
|
||||||
width: 25px;
|
width: 25px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.advdominion-lg__container {
|
.advdominion-lg__container.swiper {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.advdominion-lg__item {
|
.advdominion-lg__wrapper.swiper-wrapper {
|
||||||
|
}
|
||||||
|
|
||||||
|
.advdominion-lg__item.swiper-slide {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
padding: 50px 55px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.advdominion-lg__item_video {
|
.advdominion-lg__item_video.swiper-slide {
|
||||||
}
|
}
|
||||||
|
|
||||||
.advdominion-lg__image {
|
.advdominion-lg__image {
|
||||||
max-height: 100%;
|
max-height: 100%;
|
||||||
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.advdominion-lg__video-wrapper {
|
.advdominion-lg__video-wrapper {
|
||||||
|
|
26
yarn.lock
26
yarn.lock
|
@ -2,22 +2,22 @@
|
||||||
# Manual changes might be lost - proceed with caution!
|
# Manual changes might be lost - proceed with caution!
|
||||||
|
|
||||||
__metadata:
|
__metadata:
|
||||||
version: 6
|
version: 8
|
||||||
cacheKey: 8
|
cacheKey: 10
|
||||||
|
|
||||||
"@advdominion/gallery@workspace:.":
|
|
||||||
version: 0.0.0-use.local
|
|
||||||
resolution: "@advdominion/gallery@workspace:."
|
|
||||||
dependencies:
|
|
||||||
"@advdominion/get-scrollbar-width": ^1.0.0
|
|
||||||
peerDependencies:
|
|
||||||
swiper: 4.5.1
|
|
||||||
languageName: unknown
|
|
||||||
linkType: soft
|
|
||||||
|
|
||||||
"@advdominion/get-scrollbar-width@npm:^1.0.0":
|
"@advdominion/get-scrollbar-width@npm:^1.0.0":
|
||||||
version: 1.0.0
|
version: 1.0.0
|
||||||
resolution: "@advdominion/get-scrollbar-width@npm:1.0.0"
|
resolution: "@advdominion/get-scrollbar-width@npm:1.0.0"
|
||||||
checksum: 8e97af1f7e221e5ceb0676a5bd8fb3654a9bf5b2e514a5ff7ed7793f7f4b0da50e2245363698c1a45af9a5354260e019a74f891acebacfaa3b7babf680a4faa2
|
checksum: 10/8e97af1f7e221e5ceb0676a5bd8fb3654a9bf5b2e514a5ff7ed7793f7f4b0da50e2245363698c1a45af9a5354260e019a74f891acebacfaa3b7babf680a4faa2
|
||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
|
"@advdominion/lightbox-gallery@workspace:.":
|
||||||
|
version: 0.0.0-use.local
|
||||||
|
resolution: "@advdominion/lightbox-gallery@workspace:."
|
||||||
|
dependencies:
|
||||||
|
"@advdominion/get-scrollbar-width": "npm:^1.0.0"
|
||||||
|
peerDependencies:
|
||||||
|
swiper: ^10.2.0
|
||||||
|
languageName: unknown
|
||||||
|
linkType: soft
|
||||||
|
|
Loading…
Reference in New Issue