v1.0.0
This commit is contained in:
Valentin Silytuin
commit
3a584bc70e
|
|
@ -0,0 +1,8 @@
|
||||||
|
root = true
|
||||||
|
|
||||||
|
[*]
|
||||||
|
indent_style = space
|
||||||
|
indent_size = 4
|
||||||
|
end_of_line = lf
|
||||||
|
trim_trailing_whitespace = true
|
||||||
|
insert_final_newline = true
|
||||||
|
|
@ -0,0 +1,103 @@
|
||||||
|
# Настройки редакторов
|
||||||
|
|
||||||
|
.idea
|
||||||
|
.vscode
|
||||||
|
|
||||||
|
# Node.js
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
|
||||||
|
# Yarn (https://yarnpkg.com/getting-started/qa#which-files-should-be-gitignored)
|
||||||
|
|
||||||
|
**/.pnp.*
|
||||||
|
**/.yarn/*
|
||||||
|
!**/.yarn/patches
|
||||||
|
!**/.yarn/plugins
|
||||||
|
!**/.yarn/releases
|
||||||
|
!**/.yarn/sdks
|
||||||
|
!**/.yarn/versions
|
||||||
|
|
||||||
|
# ESLint
|
||||||
|
|
||||||
|
.eslintcache
|
||||||
|
|
||||||
|
# Stylelint
|
||||||
|
|
||||||
|
.stylelintcache
|
||||||
|
|
||||||
|
# Composer
|
||||||
|
|
||||||
|
vendor
|
||||||
|
|
||||||
|
# https://github.com/github/gitignore/blob/master/Global/Linux.gitignore
|
||||||
|
|
||||||
|
*~
|
||||||
|
|
||||||
|
# temporary files which can be created if a process still has a handle open of a deleted file
|
||||||
|
.fuse_hidden*
|
||||||
|
|
||||||
|
# KDE directory preferences
|
||||||
|
.directory
|
||||||
|
|
||||||
|
# Linux trash folder which might appear on any partition or disk
|
||||||
|
.Trash-*
|
||||||
|
|
||||||
|
# .nfs files are created when an open file is removed but is still being accessed
|
||||||
|
.nfs*
|
||||||
|
|
||||||
|
# https://github.com/github/gitignore/blob/master/Global/macOS.gitignore
|
||||||
|
|
||||||
|
# General
|
||||||
|
.DS_Store
|
||||||
|
.AppleDouble
|
||||||
|
.LSOverride
|
||||||
|
|
||||||
|
# Icon must end with two \r
|
||||||
|
Icon
|
||||||
|
|
||||||
|
|
||||||
|
# Thumbnails
|
||||||
|
._*
|
||||||
|
|
||||||
|
# Files that might appear in the root of a volume
|
||||||
|
.DocumentRevisions-V100
|
||||||
|
.fseventsd
|
||||||
|
.Spotlight-V100
|
||||||
|
.TemporaryItems
|
||||||
|
.Trashes
|
||||||
|
.VolumeIcon.icns
|
||||||
|
.com.apple.timemachine.donotpresent
|
||||||
|
|
||||||
|
# Directories potentially created on remote AFP share
|
||||||
|
.AppleDB
|
||||||
|
.AppleDesktop
|
||||||
|
Network Trash Folder
|
||||||
|
Temporary Items
|
||||||
|
.apdisk
|
||||||
|
|
||||||
|
# https://github.com/github/gitignore/blob/master/Global/Windows.gitignore
|
||||||
|
|
||||||
|
# Windows thumbnail cache files
|
||||||
|
Thumbs.db
|
||||||
|
Thumbs.db:encryptable
|
||||||
|
ehthumbs.db
|
||||||
|
ehthumbs_vista.db
|
||||||
|
|
||||||
|
# Dump file
|
||||||
|
*.stackdump
|
||||||
|
|
||||||
|
# Folder config file
|
||||||
|
[Dd]esktop.ini
|
||||||
|
|
||||||
|
# Recycle Bin used on file shares
|
||||||
|
$RECYCLE.BIN/
|
||||||
|
|
||||||
|
# Windows Installer files
|
||||||
|
*.cab
|
||||||
|
*.msi
|
||||||
|
*.msix
|
||||||
|
*.msm
|
||||||
|
*.msp
|
||||||
|
|
||||||
|
# Windows shortcuts
|
||||||
|
*.lnk
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
.yarn
|
||||||
|
.editorconfig
|
||||||
|
.nvmrc
|
||||||
|
.prettierrc
|
||||||
|
.yarnrc.yml
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
{
|
||||||
|
"printWidth": 120,
|
||||||
|
"tabWidth": 4,
|
||||||
|
"singleQuote": true,
|
||||||
|
"bracketSpacing": false
|
||||||
|
}
|
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,7 @@
|
||||||
|
nodeLinker: node-modules
|
||||||
|
|
||||||
|
plugins:
|
||||||
|
- path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
|
||||||
|
spec: "@yarnpkg/plugin-interactive-tools"
|
||||||
|
|
||||||
|
yarnPath: .yarn/releases/yarn-3.6.0.cjs
|
||||||
|
|
@ -0,0 +1,73 @@
|
||||||
|
# gallery
|
||||||
|
|
||||||
|
## Требования
|
||||||
|
|
||||||
|
- [Swiper](https://github.com/nolimits4web/swiper) версии 4.5.x
|
||||||
|
|
||||||
|
## Подключение и настройка
|
||||||
|
|
||||||
|
### HTML
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div id="list">
|
||||||
|
<a href="/example.jpg">...</a>
|
||||||
|
<a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">...</a>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Стили
|
||||||
|
|
||||||
|
```scss
|
||||||
|
@use '@advdominion/lightbox-gallery/styles.css';
|
||||||
|
```
|
||||||
|
|
||||||
|
### Минимальные настройки
|
||||||
|
|
||||||
|
```js
|
||||||
|
import gallery from '@advdominion/lightbox-gallery';
|
||||||
|
|
||||||
|
gallery(document.getElementById('list'), {
|
||||||
|
icons: {
|
||||||
|
close: `/icons.svg#close`,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
### Все настройки
|
||||||
|
|
||||||
|
```js
|
||||||
|
import gallery from '@advdominion/lightbox-gallery';
|
||||||
|
|
||||||
|
gallery(document.getElementById('list'), {
|
||||||
|
swiper: {
|
||||||
|
speed: duration.effect.s,
|
||||||
|
pagination: {
|
||||||
|
el: '.swiper-pagination',
|
||||||
|
},
|
||||||
|
navigation: {
|
||||||
|
prevEl: '.swiper-button-prev',
|
||||||
|
nextEl: '.swiper-button-next',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
pagination: `
|
||||||
|
<div class="swiper-pagination"></div>
|
||||||
|
`,
|
||||||
|
navigation: `
|
||||||
|
<div class="swiper-button-prev"></div>
|
||||||
|
<div class="swiper-button-next"></div>
|
||||||
|
`,
|
||||||
|
animation: {
|
||||||
|
show: {
|
||||||
|
duration: 500,
|
||||||
|
easing: 'linear',
|
||||||
|
},
|
||||||
|
hide: {
|
||||||
|
duration: 500,
|
||||||
|
easing: 'linear',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
icons: {
|
||||||
|
close: `/icons.svg#close`,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
@ -0,0 +1,229 @@
|
||||||
|
/* globals GalleryYTPlayer, YT */
|
||||||
|
|
||||||
|
import getScrollbarWidth from '@advdominion/get-scrollbar-width';
|
||||||
|
|
||||||
|
const getYTPlayer = () => {
|
||||||
|
const script = document.createElement('script');
|
||||||
|
script.src = 'https://www.youtube.com/player_api';
|
||||||
|
script.async = true;
|
||||||
|
document.body.append(script);
|
||||||
|
};
|
||||||
|
|
||||||
|
const playVideo = (slide) => {
|
||||||
|
const youtube = slide.querySelector('.advdominion-lg__video_youtube');
|
||||||
|
|
||||||
|
if (youtube) {
|
||||||
|
if (slide.YTPlayer) {
|
||||||
|
slide.YTPlayer.playVideo();
|
||||||
|
} else if (window.YT) {
|
||||||
|
if (GalleryYTPlayer.state) {
|
||||||
|
slide.YTPlayer = new YT.Player(youtube, {
|
||||||
|
videoId: youtube.dataset.id,
|
||||||
|
events: {
|
||||||
|
onReady(event) {
|
||||||
|
event.target.playVideo();
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
GalleryYTPlayer.addListener(() => {
|
||||||
|
playVideo(slide);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
getYTPlayer();
|
||||||
|
GalleryYTPlayer.addListener(() => {
|
||||||
|
playVideo(slide);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const pauseVideo = (slide) => {
|
||||||
|
const youtube = slide.querySelector('.advdominion-lg__video_youtube');
|
||||||
|
|
||||||
|
if (youtube && slide.YTPlayer) {
|
||||||
|
slide.YTPlayer.pauseVideo();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const setVideoSize = (gallery) => {
|
||||||
|
const items = gallery.querySelectorAll('.advdominion-lg__video-wrapper');
|
||||||
|
items[0].style = `
|
||||||
|
width: '';
|
||||||
|
`;
|
||||||
|
let height = (items[0].getBoundingClientRect().width * 9) / 16;
|
||||||
|
let width = '';
|
||||||
|
if (height > items[0].getBoundingClientRect().height) {
|
||||||
|
height = items[0].getBoundingClientRect().height;
|
||||||
|
width = `${(height * 16) / 9}px`;
|
||||||
|
}
|
||||||
|
for (const item of items) {
|
||||||
|
item.style = `
|
||||||
|
height: ${height}px;
|
||||||
|
width: ${width};
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const hide = async (duration = 500, easing = 'linear') => {
|
||||||
|
const gallery = document.body.querySelector('.advdominion-lg');
|
||||||
|
|
||||||
|
await gallery.animate([{opacity: 1}, {opacity: 0}], {
|
||||||
|
duration,
|
||||||
|
easing,
|
||||||
|
}).finished;
|
||||||
|
|
||||||
|
gallery.remove();
|
||||||
|
|
||||||
|
document.body.style = `
|
||||||
|
overflow: '';
|
||||||
|
margin-right: '';
|
||||||
|
`;
|
||||||
|
};
|
||||||
|
|
||||||
|
const show = async (duration = 500, easing = 'linear') => {
|
||||||
|
const gallery = document.body.querySelector('.advdominion-lg');
|
||||||
|
|
||||||
|
document.body.style = `
|
||||||
|
overflow: hidden;
|
||||||
|
margin-right: ${getScrollbarWidth()}px
|
||||||
|
`;
|
||||||
|
|
||||||
|
await gallery.animate([{opacity: 0}, {opacity: 1}], {
|
||||||
|
duration,
|
||||||
|
easing,
|
||||||
|
}).finished;
|
||||||
|
};
|
||||||
|
|
||||||
|
const init = async (items = [], options = {}, index = 0) => {
|
||||||
|
const {Swiper, Navigation, Pagination} = import('swiper');
|
||||||
|
Swiper.use([Navigation, Pagination]);
|
||||||
|
|
||||||
|
let isVideoInGallery = false;
|
||||||
|
items = items.map((item) => {
|
||||||
|
if (/youtube\.com\/watch\?v=/.test(item)) {
|
||||||
|
isVideoInGallery = true;
|
||||||
|
return `
|
||||||
|
<div class="advdominion-lg__item advdominion-lg__item_video swiper-slide">
|
||||||
|
<div class="advdominion-lg__video-wrapper">
|
||||||
|
<div
|
||||||
|
class="advdominion-lg__video advdominion-lg__video_youtube"
|
||||||
|
data-id="${/v=([\w-]+)/i.exec(item)[1]}">
|
||||||
|
Загрузка YouTube-плеера...
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
return `
|
||||||
|
<div class="advdominion-lg__item swiper-slide">
|
||||||
|
<img class="advdominion-lg__image" src="${item}" alt="" loading="lazy">
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
});
|
||||||
|
|
||||||
|
if (isVideoInGallery && !window.GalleryYTPlayer) {
|
||||||
|
window.GalleryYTPlayer = {
|
||||||
|
state: false,
|
||||||
|
get init() {
|
||||||
|
return this.state;
|
||||||
|
},
|
||||||
|
set init(val) {
|
||||||
|
this.state = val;
|
||||||
|
this.callback.forEach((i) => {
|
||||||
|
i(val);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
callback: [],
|
||||||
|
addListener(callback) {
|
||||||
|
this.callback.push(callback);
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
window.onYouTubeIframeAPIReady = () => {
|
||||||
|
window.GalleryYTPlayer.init = true;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
document.body.insertAdjacentHTML(
|
||||||
|
'beforeend',
|
||||||
|
`
|
||||||
|
<div class="advdominion-lg">
|
||||||
|
<button class="advdominion-lg__close" type="button">
|
||||||
|
<svg class="advdominion-lg__close-icon"><use href="${options.icons.close}" /></svg>
|
||||||
|
</button>
|
||||||
|
<div class="advdominion-lg__container swiper-container">
|
||||||
|
<div class="advdominion-lg__wrapper swiper-wrapper">
|
||||||
|
${items.join('')}
|
||||||
|
</div>
|
||||||
|
${options.pagination ? options.pagination : ''}
|
||||||
|
${options.navigation ? options.navigation : ''}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`
|
||||||
|
);
|
||||||
|
|
||||||
|
const gallery = document.body.querySelector('.advdominion-lg');
|
||||||
|
|
||||||
|
await show(options?.animation?.show?.duration, options?.animation?.show?.easing);
|
||||||
|
|
||||||
|
const swiper = new Swiper(
|
||||||
|
gallery.querySelector('.advdominion-lg__container'),
|
||||||
|
Object.assign({init: false, initialSlide: index}, options.swiper)
|
||||||
|
);
|
||||||
|
|
||||||
|
swiper.on('init', function () {
|
||||||
|
if (this.slides[this.activeIndex].classList.contains('advdominion-lg__item_video')) {
|
||||||
|
playVideo(this.slides[this.activeIndex]);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isVideoInGallery) {
|
||||||
|
setVideoSize(gallery);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
swiper.on('slideChange', function () {
|
||||||
|
if (this.slides[this.previousIndex].classList.contains('advdominion-lg__item_video')) {
|
||||||
|
pauseVideo(this.slides[this.previousIndex]);
|
||||||
|
}
|
||||||
|
if (this.slides[this.activeIndex].classList.contains('advdominion-lg__item_video')) {
|
||||||
|
playVideo(this.slides[this.activeIndex]);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
swiper.on('resize', function () {
|
||||||
|
if (isVideoInGallery) {
|
||||||
|
setVideoSize(gallery);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
swiper.init();
|
||||||
|
|
||||||
|
gallery.querySelector('.advdominion-lg__close').addEventListener('click', () => {
|
||||||
|
hide(options?.animation?.hide?.duration, options?.animation?.hide?.easing);
|
||||||
|
});
|
||||||
|
|
||||||
|
document.querySelector('body').addEventListener(
|
||||||
|
'keydown',
|
||||||
|
(e) => {
|
||||||
|
if (e.key === 'Escape') {
|
||||||
|
hide(options?.animation?.hide?.duration, options?.animation?.hide?.easing);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
once: true,
|
||||||
|
}
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default (container, options) => {
|
||||||
|
const items = [];
|
||||||
|
for (const [index, element] of [...container.children].entries()) {
|
||||||
|
items.push(element.href);
|
||||||
|
element.addEventListener('click', (event) => {
|
||||||
|
event.preventDefault();
|
||||||
|
init(items, options, index);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,18 @@
|
||||||
|
{
|
||||||
|
"name": "@advdominion/lightbox-gallery",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"packageManager": "yarn@3.6.0",
|
||||||
|
"main": "index.js",
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "https://gitea.optiweb.ru/public/lightbox-gallery.git"
|
||||||
|
},
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@advdominion/get-scrollbar-width": "^1.0.0"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"swiper": "4.5.1"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,64 @@
|
||||||
|
.advdominion-lg {
|
||||||
|
background-color: white;
|
||||||
|
height: 100%;
|
||||||
|
left: 0;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
z-index: 999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.advdominion-lg__close {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.advdominion-lg__close-icon {
|
||||||
|
fill: currentcolor;
|
||||||
|
height: 25px;
|
||||||
|
width: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.advdominion-lg__container {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.advdominion-lg__item {
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 50px 55px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.advdominion-lg__item_video {
|
||||||
|
}
|
||||||
|
|
||||||
|
.advdominion-lg__image {
|
||||||
|
max-height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.advdominion-lg__video-wrapper {
|
||||||
|
height: 100%;
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.advdominion-lg__video {
|
||||||
|
border: none;
|
||||||
|
height: 100%;
|
||||||
|
left: 0;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.advdominion-lg__video {
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.advdominion-lg__video_youtube {
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,23 @@
|
||||||
|
# This file is generated by running "yarn install" inside your project.
|
||||||
|
# Manual changes might be lost - proceed with caution!
|
||||||
|
|
||||||
|
__metadata:
|
||||||
|
version: 6
|
||||||
|
cacheKey: 8
|
||||||
|
|
||||||
|
"@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":
|
||||||
|
version: 1.0.0
|
||||||
|
resolution: "@advdominion/get-scrollbar-width@npm:1.0.0"
|
||||||
|
checksum: 8e97af1f7e221e5ceb0676a5bd8fb3654a9bf5b2e514a5ff7ed7793f7f4b0da50e2245363698c1a45af9a5354260e019a74f891acebacfaa3b7babf680a4faa2
|
||||||
|
languageName: node
|
||||||
|
linkType: hard
|
||||||
Loading…
Reference in New Issue