v1.0.0

.editorconfig

@@ -0,0 +1,8 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 4
+end_of_line = lf
+trim_trailing_whitespace = true
+insert_final_newline = true

.gitignore

@@ -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

.npmignore

@@ -0,0 +1,5 @@
+.yarn
+.editorconfig
+.nvmrc
+.prettierrc
+.yarnrc.yml

.prettierrc

@@ -0,0 +1,6 @@
+{
+    "printWidth": 120,
+    "tabWidth": 4,
+    "singleQuote": true,
+    "bracketSpacing": false
+}

.yarnrc.yml

@@ -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

README.md

@@ -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`,
+    },
+});
+```

index.js

@@ -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);
+        });
+    }
+};

package.json

@@ -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"
+    }
+}

styles.css

@@ -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 {
+}

yarn.lock

@@ -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