Repository: dimsemenov/PhotoSwipe Branch: master Commit: cd41cb587a46 Files: 159 Total size: 1000.8 KB Directory structure: gitextract_0u2e7_9t/ ├── .babelrc ├── .editorconfig ├── .eslintignore ├── .eslintrc.json ├── .github/ │ ├── FUNDING.yml │ └── workflows/ │ └── build.yml ├── .gitignore ├── LICENSE ├── README.md ├── build/ │ ├── config-builder.js │ ├── rollup.config.js │ └── rollup.config.watch.js ├── demo-docs-website/ │ ├── .gitignore │ ├── babel.config.js │ ├── docusaurus.config.js │ ├── package.json │ ├── repo-data.json │ ├── sidebars.js │ ├── src/ │ │ ├── components/ │ │ │ ├── HomepageFeatures/ │ │ │ │ ├── index.js │ │ │ │ └── styles.module.css │ │ │ └── PswpCodePreview/ │ │ │ ├── demo-images.js │ │ │ ├── gallery-templates/ │ │ │ │ ├── basic--badges.js │ │ │ │ ├── basic--cropped.js │ │ │ │ ├── basic.js │ │ │ │ ├── caption.js │ │ │ │ ├── content-types.js │ │ │ │ ├── custom-html-markup-data-source.js │ │ │ │ ├── getting-started.js │ │ │ │ └── srcset-test.js │ │ │ └── index.js │ │ ├── css/ │ │ │ ├── custom.css │ │ │ ├── docs-page.css │ │ │ ├── example-code-block.css │ │ │ ├── header.css │ │ │ ├── home.css │ │ │ ├── scrollbar.css │ │ │ └── sidebar-menu.css │ │ ├── pages/ │ │ │ ├── _index-deep-zoom-demo.js │ │ │ ├── _index-gallery-header.js │ │ │ ├── index.js │ │ │ └── index.module.css │ │ └── theme/ │ │ ├── CodeBlock/ │ │ │ ├── index.js │ │ │ └── styles.module.css │ │ ├── DocItem/ │ │ │ ├── index.js │ │ │ └── styles.module.css │ │ ├── DocItemFooter/ │ │ │ ├── index.js │ │ │ └── styles.module.css │ │ ├── DocPage/ │ │ │ ├── index.js │ │ │ └── styles.module.css │ │ ├── DocSidebar/ │ │ │ ├── index.js │ │ │ ├── is-same-path.ts │ │ │ └── styles.module.css │ │ ├── EditThisPage/ │ │ │ └── index.js │ │ ├── Footer/ │ │ │ ├── index.js │ │ │ └── styles.module.css │ │ ├── Logo/ │ │ │ └── index.js │ │ ├── MDXComponents/ │ │ │ ├── index.js │ │ │ └── styles.css │ │ └── Navbar/ │ │ ├── github-stars.js │ │ ├── index.js │ │ └── styles.module.css │ └── static/ │ ├── .nojekyll │ └── photoswipe/ │ ├── photoswipe-lightbox.esm.js │ ├── photoswipe.css │ └── photoswipe.esm.js ├── dist/ │ ├── photoswipe-lightbox.esm.js │ ├── photoswipe.css │ ├── photoswipe.esm.js │ ├── types/ │ │ ├── core/ │ │ │ ├── base.d.ts │ │ │ └── eventable.d.ts │ │ ├── gestures/ │ │ │ ├── drag-handler.d.ts │ │ │ ├── gestures.d.ts │ │ │ ├── tap-handler.d.ts │ │ │ └── zoom-handler.d.ts │ │ ├── keyboard.d.ts │ │ ├── lightbox/ │ │ │ └── lightbox.d.ts │ │ ├── main-scroll.d.ts │ │ ├── opener.d.ts │ │ ├── photoswipe.d.ts │ │ ├── scroll-wheel.d.ts │ │ ├── slide/ │ │ │ ├── content.d.ts │ │ │ ├── get-thumb-bounds.d.ts │ │ │ ├── loader.d.ts │ │ │ ├── pan-bounds.d.ts │ │ │ ├── placeholder.d.ts │ │ │ ├── slide.d.ts │ │ │ └── zoom-level.d.ts │ │ ├── types.d.ts │ │ ├── ui/ │ │ │ ├── button-arrow.d.ts │ │ │ ├── button-close.d.ts │ │ │ ├── button-zoom.d.ts │ │ │ ├── counter-indicator.d.ts │ │ │ ├── loading-indicator.d.ts │ │ │ ├── ui-element.d.ts │ │ │ └── ui.d.ts │ │ └── util/ │ │ ├── animations.d.ts │ │ ├── css-animation.d.ts │ │ ├── dom-events.d.ts │ │ ├── spring-animation.d.ts │ │ ├── spring-easer.d.ts │ │ ├── util.d.ts │ │ └── viewport-size.d.ts │ └── umd/ │ └── README.md ├── docs/ │ ├── adding-ui-elements.md │ ├── adjusting-zoom-level.md │ ├── caption.md │ ├── click-and-tap-actions.md │ ├── custom-content.md │ ├── data-sources.md │ ├── events.md │ ├── filters.md │ ├── getting-started.md │ ├── methods.md │ ├── native-fullscreen-on-open.md │ ├── opening-or-closing-transition.md │ ├── options.md │ ├── properties.md │ ├── react-image-gallery.md │ ├── styling.md │ ├── svelte-image-gallery.md │ └── vue-image-gallery.md ├── global.d.ts ├── package.json ├── src/ │ ├── js/ │ │ ├── core/ │ │ │ ├── base.js │ │ │ └── eventable.js │ │ ├── gestures/ │ │ │ ├── drag-handler.js │ │ │ ├── gestures.js │ │ │ ├── tap-handler.js │ │ │ └── zoom-handler.js │ │ ├── keyboard.js │ │ ├── lightbox/ │ │ │ └── lightbox.js │ │ ├── main-scroll.js │ │ ├── opener.js │ │ ├── photoswipe.js │ │ ├── scroll-wheel.js │ │ ├── slide/ │ │ │ ├── content.js │ │ │ ├── get-thumb-bounds.js │ │ │ ├── loader.js │ │ │ ├── pan-bounds.js │ │ │ ├── placeholder.js │ │ │ ├── slide.js │ │ │ └── zoom-level.js │ │ ├── types.ts │ │ ├── ui/ │ │ │ ├── button-arrow.js │ │ │ ├── button-close.js │ │ │ ├── button-zoom.js │ │ │ ├── counter-indicator.js │ │ │ ├── loading-indicator.js │ │ │ ├── ui-element.js │ │ │ └── ui.js │ │ └── util/ │ │ ├── animations.js │ │ ├── css-animation.js │ │ ├── dom-events.js │ │ ├── spring-animation.js │ │ ├── spring-easer.js │ │ ├── util.js │ │ └── viewport-size.js │ └── photoswipe.css └── tsconfig.json ================================================ FILE CONTENTS ================================================ ================================================ FILE: .babelrc ================================================ { "plugins": [ "@babel/plugin-transform-optional-chaining", "@babel/plugin-transform-nullish-coalescing-operator" ] } ================================================ FILE: .editorconfig ================================================ root = true [*] indent_style = space indent_size = 2 charset = utf-8 trim_trailing_whitespace = true insert_final_newline = true ================================================ FILE: .eslintignore ================================================ node_modules !.*.js .eslintrc.js *.d.ts *.ts ================================================ FILE: .eslintrc.json ================================================ { "env": { "browser": true, "es6": true }, "extends": "airbnb-base", "parser": "@babel/eslint-parser", "parserOptions": { "sourceType": "module", "requireConfigFile": false, "babelOptions": { "plugins": ["@babel/plugin-syntax-class-properties"] } }, "overrides": [ { "files": [ "website/static/es6/**/*.js" ] } ], "rules": { "max-len": ["error", { "code": 100, "comments": 140 }], "comma-dangle": "off", "no-param-reassign": 0, "import/extensions": 0, "no-underscore-dangle": 0, "consistent-return": 0, "no-trailing-spaces": "warn", "spaced-comment": 0, "no-plusplus": 0, "prefer-template": 0, "object-curly-newline": 0, "arrow-body-style": 0, "import/prefer-default-export": 0, "no-else-return": 0, "no-lonely-if": 0, "default-case": 0, "linebreak-style": 0, "class-methods-use-this": 0, "max-classes-per-file": 0, "arrow-parens": 0, "no-multiple-empty-lines": 0, "no-mixed-operators": 0, "function-paren-newline": 0 } } ================================================ FILE: .github/FUNDING.yml ================================================ open_collective: photoswipe ================================================ FILE: .github/workflows/build.yml ================================================ name: PhotoSwipe Jobs on: [workflow_dispatch] jobs: build: name: Publish docs runs-on: ubuntu-latest steps: - name: "checkout repository" uses: actions/checkout@v2 - name: "setup node" uses: actions/setup-node@v2 with: node-version: 16 - name: "github api fetch (for stars count)" working-directory: demo-docs-website run: curl -s https://api.github.com/repos/dimsemenov/photoswipe -o ./repo-data.json - name: "npm install & build docs" working-directory: demo-docs-website run: | npm install npm run build - name: "install ssh key" uses: shimataro/ssh-key-action@v2 with: key: ${{ secrets.SSH_PRIVATE_KEY }} known_hosts: ${{ secrets.KNOWN_HOSTS }} - name: "deploy with rsync" run: rsync -avz ./demo-docs-website/build/ ${{ secrets.SSH_USER }}@${{ secrets.SSH_HOST }}:${{ secrets.RSYNC_DIR }} ================================================ FILE: .gitignore ================================================ node_modules/ release/ Gemfile.lock test/dest *.gem pkg/ *.swp *~ _site/ .bundle/ website/static/photoswipe/ .DS_Store bbin/ sftp-config* _site .htaccess private-* __article/ _site/* website/build/ node_modules _production all.min.css aws-keys.json *.sublime-project *.sublime-workspace website/dist/ *.idea /.idea .vscode .node-version .sass-cache/ ================================================ FILE: LICENSE ================================================ The MIT License (MIT) Copyright (c) 2014-2022 Dmitry Semenov, https://dimsemenov.com Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. ================================================ FILE: README.md ================================================ **FEEDBACK NEEDED** I am developing the new version - PhotoSwipe v6, please [read about upcoming changes and leave feedback](https://github.com/dimsemenov/PhotoSwipe/discussions/2170). PhotoSwipe v5 — JavaScript image gallery and lightbox **[Demo](https://photoswipe.com)** | **[Documentation](https://photoswipe.com/getting-started/)** [![Sponsor via OpenCollective](https://img.shields.io/opencollective/all/photoswipe?label=Sponsor%20via%20OpenCollective)](https://opencollective.com/photoswipe) [![Follow on Twitter](https://img.shields.io/twitter/follow/photoswipe?style=social)](https://twitter.com/intent/user?screen_name=photoswipe) ### Repo structure - `dist/` - main JS and CSS - `src/` - source JS and CSS. - `src/js/photoswipe.js` - entry for PhotoSwipe Core. - `src/js/lightbox/lightbox.js` - entry for PhotoSwipe Lightbox. - `docs/` - documentation markdown files. - `demo-docs-website/` - website with documentation, demos and manual tests. - `build/` - rollup build config. To build JS and CSS in `dist/` directory, run `npm run build`. To run the demo website and automatically rebuild files during development, run `npm install` in `demo-docs-website/` and `npm run watch` in the root directory. ### Older versions Documentation for the old version (v4) can be found [here](https://photoswipe.com/v4-docs/getting-started.html) and [the code for 4.1.3 is here](https://github.com/dimsemenov/PhotoSwipe/tree/v4.1.3). [![Stand With Ukraine](https://raw.githubusercontent.com/vshymanskyy/StandWithUkraine/main/banner-direct.svg)](https://savelife.in.ua/en/) --- This project is tested with [BrowserStack](https://www.browserstack.com/). ================================================ FILE: build/config-builder.js ================================================ // eslint-disable-next-line import/no-extraneous-dependencies import { terser } from 'rollup-plugin-terser'; import { babel } from '@rollup/plugin-babel'; import pkg from '../package.json'; const year = new Date().getFullYear(); function getBanner(name) { return `/*! * ${name} ${pkg.version} - https://photoswipe.com * (c) ${year} Dmytro Semenov */`; } function getMinifyPlugin() { return terser({ output: { comments: /^\**!/i, }, mangle: { properties: { // mangle properties and func names that start with underscore regex: /^_/, } } }); } function getBabelPlugin() { return babel({ exclude: 'node_modules/**' }) } const baseOutputDir = 'demo-docs-website/static/photoswipe/'; export const lightboxJS = { input: 'src/js/lightbox/lightbox.js', output: { banner: getBanner('PhotoSwipe Lightbox'), file: baseOutputDir + 'photoswipe-lightbox.esm.js', format: 'esm', sourcemap: true }, plugins: [getBabelPlugin()] }; export const coreJS = { input: 'src/js/photoswipe.js', output: { banner: getBanner('PhotoSwipe'), file: baseOutputDir + 'photoswipe.esm.js', format: 'esm', sourcemap: true }, plugins: [getBabelPlugin()] }; export const minLightboxJS = { input: 'src/js/lightbox/lightbox.js', output: { banner: getBanner('PhotoSwipe Lightbox'), file: baseOutputDir + 'photoswipe-lightbox.esm.min.js', format: 'esm' }, plugins: [getBabelPlugin(), getMinifyPlugin()] }; export const minCoreJS = { input: 'src/js/photoswipe.js', output: { banner: getBanner('PhotoSwipe'), file: baseOutputDir + 'photoswipe.esm.min.js', format: 'esm', }, plugins: [getBabelPlugin(), getMinifyPlugin()] }; // UMD config const umdBaseOutputDir = 'demo-docs-website/static/photoswipe/umd/'; export const umdMinLightboxJS = { input: 'src/js/lightbox/lightbox.js', output: { name: 'PhotoSwipeLightbox', banner: getBanner('PhotoSwipe Lightbox'), file: umdBaseOutputDir + 'photoswipe-lightbox.umd.min.js', format: 'umd' }, plugins: [getBabelPlugin(), getMinifyPlugin()] }; export const umdMinCoreJS = { input: 'src/js/photoswipe.js', output: { name: 'PhotoSwipe', banner: getBanner('PhotoSwipe'), file: umdBaseOutputDir + 'photoswipe.umd.min.js', format: 'umd', }, plugins: [getBabelPlugin(), getMinifyPlugin()] }; ================================================ FILE: build/rollup.config.js ================================================ import { lightboxJS, coreJS, minLightboxJS, minCoreJS, umdMinLightboxJS, umdMinCoreJS } from './config-builder'; export default [lightboxJS, coreJS, minLightboxJS, minCoreJS, umdMinLightboxJS, umdMinCoreJS]; ================================================ FILE: build/rollup.config.watch.js ================================================ import { lightboxJS, coreJS } from './config-builder'; export default [lightboxJS, coreJS]; ================================================ FILE: demo-docs-website/.gitignore ================================================ # Dependencies /node_modules # Production /build # Generated files .docusaurus .cache-loader # Misc .DS_Store .env.local .env.development.local .env.test.local .env.production.local npm-debug.log* yarn-debug.log* yarn-error.log* ================================================ FILE: demo-docs-website/babel.config.js ================================================ module.exports = { presets: [require.resolve('@docusaurus/core/lib/babel/preset')], }; ================================================ FILE: demo-docs-website/docusaurus.config.js ================================================ // @ts-check // Note: type annotations allow type checking and IDEs autocompletion const path = require('path'); const lightCodeTheme = require('prism-react-renderer/themes/github'); /** @type {import('@docusaurus/types').Config} */ const config = { title: 'PhotoSwipe', tagline: '', url: 'https://photoswipe.com', baseUrl: '/', onBrokenLinks: 'throw', onBrokenMarkdownLinks: 'warn', favicon: 'img/favicon-16x16.png', organizationName: 'dimsemenov', // Usually your GitHub org/user name. projectName: 'photoswipe', // Usually your repo name. // scripts: [ // 'https://docusaurus.io/slash.js', // { // src: // 'https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js', // async: true, // }, // ], stylesheets: [ { href: '/photoswipe/photoswipe.css', type: 'text/css', }, ], plugins: [ [ '@docusaurus/plugin-google-gtag', { trackingID: 'G-57MLE6HBT9', }, ], ], presets: [ [ 'classic', /** @type {import('@docusaurus/preset-classic').Options} */ ({ docs: { path: '../docs/', routeBasePath: '/', sidebarPath: require.resolve('./sidebars.js'), // Please change this to your repo. editUrl: 'https://github.com/dimsemenov/PhotoSwipe/tree/master/docs', breadcrumbs: false }, theme: { customCss: require.resolve('./src/css/custom.css'), }, }), ], ], themeConfig: /** @type {import('@docusaurus/preset-classic').ThemeConfig} */ ({ colorMode: { defaultMode: 'light', disableSwitch: true, respectPrefersColorScheme: false, }, navbar: { title: 'PhotoSwipe', // logo: { // alt: 'My Site Logo', // src: 'img/logo.svg', // }, items: [ { type: 'doc', docId: 'getting-started', position: 'left', label: 'Docs', } ], }, footer: { style: 'dark', links: [ { }, { title: 'Community', items: [ { label: 'Twitter', href: 'https://twitter.com/photoswipe', }, ], }, { title: 'More', items: [ { label: 'Blog', to: '/blog', }, { label: 'GitHub', href: 'https://github.com/dimsemenov/photoswipe', }, ], }, ], copyright: 'Made in Ukraine by Dmytro Semenov', }, prism: { theme: lightCodeTheme, }, }), }; module.exports = config; ================================================ FILE: demo-docs-website/package.json ================================================ { "name": "demo-docs-website", "version": "0.0.0", "private": true, "scripts": { "docusaurus": "docusaurus", "start": "docusaurus start", "build": "docusaurus build", "build-and-analyze": "docusaurus build --bundle-analyzer", "swizzle": "docusaurus swizzle", "deploy": "docusaurus deploy", "clear": "docusaurus clear", "serve": "docusaurus serve", "write-translations": "docusaurus write-translations", "write-heading-ids": "docusaurus write-heading-ids" }, "dependencies": { "@docsearch/react": "^3.0.0", "@docusaurus/core": "2.0.0-beta.17", "@docusaurus/plugin-google-gtag": "^2.0.0-beta.17", "@docusaurus/preset-classic": "2.0.0-beta.17", "@docusaurus/theme-live-codeblock": "^2.0.0-beta.17", "@mdx-js/react": "^1.6.22", "clsx": "^1.1.1", "photoswipe-deep-zoom-plugin": "^1.1.1", "photoswipe-dynamic-caption-plugin": "^1.1.1", "prism-react-renderer": "^1.2.1", "react": "^17.0.1", "react-dom": "^17.0.1" }, "browserslist": { "production": [ ">0.5%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] } } ================================================ FILE: demo-docs-website/repo-data.json ================================================ { "id": 1580851, "name": "PhotoSwipe", "full_name": "dimsemenov/PhotoSwipe", "private": false, "owner": { "login": "dimsemenov", "id": 1061115, "avatar_url": "https://avatars.githubusercontent.com/u/1061115?v=4", "gravatar_id": "", "url": "https://api.github.com/users/dimsemenov", "html_url": "https://github.com/dimsemenov", "followers_url": "https://api.github.com/users/dimsemenov/followers", "following_url": "https://api.github.com/users/dimsemenov/following{/other_user}", "gists_url": "https://api.github.com/users/dimsemenov/gists{/gist_id}", "starred_url": "https://api.github.com/users/dimsemenov/starred{/owner}{/repo}", "subscriptions_url": "https://api.github.com/users/dimsemenov/subscriptions", "organizations_url": "https://api.github.com/users/dimsemenov/orgs", "repos_url": "https://api.github.com/users/dimsemenov/repos", "events_url": "https://api.github.com/users/dimsemenov/events{/privacy}", "received_events_url": "https://api.github.com/users/dimsemenov/received_events", "type": "User", "site_admin": false }, "html_url": "https://github.com/dimsemenov/PhotoSwipe", "description": "JavaScript image gallery for mobile and desktop, modular, framework independent", "fork": false, "url": "https://api.github.com/repos/dimsemenov/PhotoSwipe", "forks_url": "https://api.github.com/repos/dimsemenov/PhotoSwipe/forks", "keys_url": "https://api.github.com/repos/dimsemenov/PhotoSwipe/keys{/key_id}", "collaborators_url": "https://api.github.com/repos/dimsemenov/PhotoSwipe/collaborators{/collaborator}", "teams_url": "https://api.github.com/repos/dimsemenov/PhotoSwipe/teams", "hooks_url": "https://api.github.com/repos/dimsemenov/PhotoSwipe/hooks", "issue_events_url": "https://api.github.com/repos/dimsemenov/PhotoSwipe/issues/events{/number}", "events_url": "https://api.github.com/repos/dimsemenov/PhotoSwipe/events", "assignees_url": "https://api.github.com/repos/dimsemenov/PhotoSwipe/assignees{/user}", "branches_url": "https://api.github.com/repos/dimsemenov/PhotoSwipe/branches{/branch}", "tags_url": "https://api.github.com/repos/dimsemenov/PhotoSwipe/tags", "blobs_url": "https://api.github.com/repos/dimsemenov/PhotoSwipe/git/blobs{/sha}", "git_tags_url": "https://api.github.com/repos/dimsemenov/PhotoSwipe/git/tags{/sha}", "git_refs_url": "https://api.github.com/repos/dimsemenov/PhotoSwipe/git/refs{/sha}", "trees_url": "https://api.github.com/repos/dimsemenov/PhotoSwipe/git/trees{/sha}", "statuses_url": "https://api.github.com/repos/dimsemenov/PhotoSwipe/statuses/{sha}", "languages_url": "https://api.github.com/repos/dimsemenov/PhotoSwipe/languages", "stargazers_url": "https://api.github.com/repos/dimsemenov/PhotoSwipe/stargazers", "contributors_url": "https://api.github.com/repos/dimsemenov/PhotoSwipe/contributors", "subscribers_url": "https://api.github.com/repos/dimsemenov/PhotoSwipe/subscribers", "subscription_url": "https://api.github.com/repos/dimsemenov/PhotoSwipe/subscription", "commits_url": "https://api.github.com/repos/dimsemenov/PhotoSwipe/commits{/sha}", "git_commits_url": "https://api.github.com/repos/dimsemenov/PhotoSwipe/git/commits{/sha}", "comments_url": "https://api.github.com/repos/dimsemenov/PhotoSwipe/comments{/number}", "issue_comment_url": "https://api.github.com/repos/dimsemenov/PhotoSwipe/issues/comments{/number}", "contents_url": "https://api.github.com/repos/dimsemenov/PhotoSwipe/contents/{+path}", "compare_url": "https://api.github.com/repos/dimsemenov/PhotoSwipe/compare/{base}...{head}", "merges_url": "https://api.github.com/repos/dimsemenov/PhotoSwipe/merges", "archive_url": "https://api.github.com/repos/dimsemenov/PhotoSwipe/{archive_format}{/ref}", "downloads_url": "https://api.github.com/repos/dimsemenov/PhotoSwipe/downloads", "issues_url": "https://api.github.com/repos/dimsemenov/PhotoSwipe/issues{/number}", "pulls_url": "https://api.github.com/repos/dimsemenov/PhotoSwipe/pulls{/number}", "milestones_url": "https://api.github.com/repos/dimsemenov/PhotoSwipe/milestones{/number}", "notifications_url": "https://api.github.com/repos/dimsemenov/PhotoSwipe/notifications{?since,all,participating}", "labels_url": "https://api.github.com/repos/dimsemenov/PhotoSwipe/labels{/name}", "releases_url": "https://api.github.com/repos/dimsemenov/PhotoSwipe/releases{/id}", "deployments_url": "https://api.github.com/repos/dimsemenov/PhotoSwipe/deployments", "created_at": "2011-04-07T05:46:29Z", "updated_at": "2022-03-27T01:05:17Z", "pushed_at": "2022-03-26T14:18:32Z", "git_url": "git://github.com/dimsemenov/PhotoSwipe.git", "ssh_url": "git@github.com:dimsemenov/PhotoSwipe.git", "clone_url": "https://github.com/dimsemenov/PhotoSwipe.git", "svn_url": "https://github.com/dimsemenov/PhotoSwipe", "homepage": "http://photoswipe.com", "size": 31451, "stargazers_count": 21653, "watchers_count": 21653, "language": "JavaScript", "has_issues": true, "has_projects": true, "has_downloads": true, "has_wiki": true, "has_pages": false, "forks_count": 3271, "mirror_url": null, "archived": false, "disabled": false, "open_issues_count": 564, "license": { "key": "mit", "name": "MIT License", "spdx_id": "MIT", "url": "https://api.github.com/licenses/mit", "node_id": "MDc6TGljZW5zZTEz" }, "allow_forking": true, "is_template": false, "topics": [ "gallery", "image", "javascript", "lightbox" ], "visibility": "public", "forks": 3271, "open_issues": 564, "watchers": 21655, "default_branch": "master", "temp_clone_token": null, "network_count": 3271, "subscribers_count": 556 } ================================================ FILE: demo-docs-website/sidebars.js ================================================ /** * Creating a sidebar enables you to: - create an ordered group of docs - render a sidebar for each doc of that group - provide next/previous navigation The sidebars can be generated from the filesystem, or explicitly defined here. Create as many sidebars as you want. */ // @ts-check /** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */ const sidebars = { // By default, Docusaurus generates a sidebar from the docs folder structure // tutorialSidebar: [{type: 'autogenerated', dirName: '.'}], mainSidebar: [ { type: 'doc', id: 'getting-started', }, { type: 'category', label: 'Examples', items: [ { type: 'doc', id: 'styling', }, { type: 'doc', id: 'opening-or-closing-transition', }, { type: 'doc', id: 'adding-ui-elements', }, { type: 'doc', id: 'adjusting-zoom-level', }, { type: 'doc', id: 'caption', }, { type: 'doc', id: 'click-and-tap-actions', }, { type: 'doc', id: 'custom-content', }, { type: 'doc', id: 'data-sources', }, { type: 'doc', id: 'native-fullscreen-on-open', }, ], }, { type: 'category', label: 'API', items: [ { type: 'doc', id: 'options', }, { type: 'doc', id: 'events', }, { type: 'doc', id: 'filters', }, { type: 'doc', id: 'methods', }, ], }, { type: 'category', label: 'Frameworks', items: [ { type: 'doc', id: 'react-image-gallery', }, { type: 'doc', id: 'vue-image-gallery', }, { type: 'doc', id: 'svelte-image-gallery', }, ], }, ] // But you can create a sidebar manually /* tutorialSidebar: [ { type: 'category', label: 'Tutorial', items: ['hello'], }, ], */ }; module.exports = sidebars; ================================================ FILE: demo-docs-website/src/components/HomepageFeatures/index.js ================================================ import React from 'react'; import clsx from 'clsx'; import styles from './styles.module.css'; const FeatureList = [ { title: 'Easy to Use', Svg: require('@site/static/img/undraw_docusaurus_mountain.svg').default, description: ( <> Docusaurus was designed from the ground up to be easily installed and used to get your website up and running quickly. ), }, { title: 'Focus on What Matters', Svg: require('@site/static/img/undraw_docusaurus_tree.svg').default, description: ( <> Docusaurus lets you focus on your docs, and we'll do the chores. Go ahead and move your docs into the docs directory. ), }, { title: 'Powered by React', Svg: require('@site/static/img/undraw_docusaurus_react.svg').default, description: ( <> Extend or customize your website layout by reusing React. Docusaurus can be extended while reusing the same header and footer. ), }, ]; function Feature({Svg, title, description}) { return (

{title}

{description}

); } export default function HomepageFeatures() { return (
{FeatureList.map((props, idx) => ( ))}
); } ================================================ FILE: demo-docs-website/src/components/HomepageFeatures/styles.module.css ================================================ .features { display: flex; align-items: center; padding: 2rem 0; width: 100%; } .featureSvg { height: 200px; width: 200px; } ================================================ FILE: demo-docs-website/src/components/PswpCodePreview/demo-images.js ================================================ export const pswpDemoImages = [{"sizes":[{"height":2500,"width":1875,"type":"jpg","src":"1/img-2500.jpg"},{"height":2000,"width":1500,"type":"jpg","src":"1/img-2000.jpg"},{"height":1500,"width":1125,"type":"jpg","src":"1/img-1500.jpg"},{"height":1000,"width":750,"type":"jpg","src":"1/img-1000.jpg"},{"height":700,"width":525,"type":"jpg","src":"1/img-700.jpg"},{"height":400,"width":300,"type":"jpg","src":"1/img-400.jpg"},{"height":200,"width":150,"type":"jpg","src":"1/img-200.jpg"}]},{"sizes":[{"height":2500,"width":1669,"type":"jpg","src":"2/img-2500.jpg"},{"height":2000,"width":1335,"type":"jpg","src":"2/img-2000.jpg"},{"height":1500,"width":1001,"type":"jpg","src":"2/img-1500.jpg"},{"height":1000,"width":668,"type":"jpg","src":"2/img-1000.jpg"},{"height":700,"width":467,"type":"jpg","src":"2/img-700.jpg"},{"height":400,"width":267,"type":"jpg","src":"2/img-400.jpg"},{"height":200,"width":134,"type":"jpg","src":"2/img-200.jpg"}]},{"sizes":[{"height":1666,"width":2500,"type":"jpg","src":"3/img-2500.jpg"},{"height":1333,"width":2000,"type":"jpg","src":"3/img-2000.jpg"},{"height":1000,"width":1500,"type":"jpg","src":"3/img-1500.jpg"},{"height":667,"width":1000,"type":"jpg","src":"3/img-1000.jpg"},{"height":467,"width":700,"type":"jpg","src":"3/img-700.jpg"},{"height":267,"width":400,"type":"jpg","src":"3/img-400.jpg"},{"height":133,"width":200,"type":"jpg","src":"3/img-200.jpg"}]},{"sizes":[{"height":1667,"width":2500,"type":"jpg","src":"4/img-2500.jpg"},{"height":1333,"width":2000,"type":"jpg","src":"4/img-2000.jpg"},{"height":1000,"width":1500,"type":"jpg","src":"4/img-1500.jpg"},{"height":667,"width":1000,"type":"jpg","src":"4/img-1000.jpg"},{"height":467,"width":700,"type":"jpg","src":"4/img-700.jpg"},{"height":267,"width":400,"type":"jpg","src":"4/img-400.jpg"},{"height":133,"width":200,"type":"jpg","src":"4/img-200.jpg"}]},{"sizes":[{"height":1668,"width":2500,"type":"jpg","src":"5/img-2500.jpg"},{"height":1334,"width":2000,"type":"jpg","src":"5/img-2000.jpg"},{"height":1001,"width":1500,"type":"jpg","src":"5/img-1500.jpg"},{"height":667,"width":1000,"type":"jpg","src":"5/img-1000.jpg"},{"height":467,"width":700,"type":"jpg","src":"5/img-700.jpg"},{"height":267,"width":400,"type":"jpg","src":"5/img-400.jpg"},{"height":133,"width":200,"type":"jpg","src":"5/img-200.jpg"}]},{"sizes":[{"height":1667,"width":2500,"type":"jpg","src":"6/img-2500.jpg"},{"height":1333,"width":2000,"type":"jpg","src":"6/img-2000.jpg"},{"height":1000,"width":1500,"type":"jpg","src":"6/img-1500.jpg"},{"height":667,"width":1000,"type":"jpg","src":"6/img-1000.jpg"},{"height":467,"width":700,"type":"jpg","src":"6/img-700.jpg"},{"height":267,"width":400,"type":"jpg","src":"6/img-400.jpg"},{"height":133,"width":200,"type":"jpg","src":"6/img-200.jpg"}]},{"sizes":[{"height":2500,"width":1875,"type":"jpg","src":"7/img-2500.jpg"},{"height":2000,"width":1500,"type":"jpg","src":"7/img-2000.jpg"},{"height":1500,"width":1125,"type":"jpg","src":"7/img-1500.jpg"},{"height":1000,"width":750,"type":"jpg","src":"7/img-1000.jpg"},{"height":700,"width":525,"type":"jpg","src":"7/img-700.jpg"},{"height":400,"width":300,"type":"jpg","src":"7/img-400.jpg"},{"height":200,"width":150,"type":"jpg","src":"7/img-200.jpg"}]},{"sizes":[{"height":1667,"width":2500,"type":"jpg","src":"8/img-2500.jpg"},{"height":1334,"width":2000,"type":"jpg","src":"8/img-2000.jpg"},{"height":1000,"width":1500,"type":"jpg","src":"8/img-1500.jpg"},{"height":667,"width":1000,"type":"jpg","src":"8/img-1000.jpg"},{"height":467,"width":700,"type":"jpg","src":"8/img-700.jpg"},{"height":267,"width":400,"type":"jpg","src":"8/img-400.jpg"},{"height":133,"width":200,"type":"jpg","src":"8/img-200.jpg"}]},{"sizes":[{"height":1667,"width":2500,"type":"jpg","src":"9/img-2500.jpg"},{"height":1333,"width":2000,"type":"jpg","src":"9/img-2000.jpg"},{"height":1000,"width":1500,"type":"jpg","src":"9/img-1500.jpg"},{"height":667,"width":1000,"type":"jpg","src":"9/img-1000.jpg"},{"height":467,"width":700,"type":"jpg","src":"9/img-700.jpg"},{"height":267,"width":400,"type":"jpg","src":"9/img-400.jpg"},{"height":133,"width":200,"type":"jpg","src":"9/img-200.jpg"}]},{"sizes":[{"height":2500,"width":2000,"type":"jpg","src":"10/img-2500.jpg"},{"height":2000,"width":1600,"type":"jpg","src":"10/img-2000.jpg"},{"height":1500,"width":1200,"type":"jpg","src":"10/img-1500.jpg"},{"height":1000,"width":800,"type":"jpg","src":"10/img-1000.jpg"},{"height":700,"width":560,"type":"jpg","src":"10/img-700.jpg"},{"height":400,"width":320,"type":"jpg","src":"10/img-400.jpg"},{"height":200,"width":160,"type":"jpg","src":"10/img-200.jpg"}]},{"sizes":[{"height":2500,"width":2000,"type":"jpg","src":"11/img-2500.jpg"},{"height":2000,"width":1600,"type":"jpg","src":"11/img-2000.jpg"},{"height":1500,"width":1200,"type":"jpg","src":"11/img-1500.jpg"},{"height":1000,"width":800,"type":"jpg","src":"11/img-1000.jpg"},{"height":700,"width":560,"type":"jpg","src":"11/img-700.jpg"},{"height":400,"width":320,"type":"jpg","src":"11/img-400.jpg"},{"height":200,"width":160,"type":"jpg","src":"11/img-200.jpg"}]}]; ================================================ FILE: demo-docs-website/src/components/PswpCodePreview/gallery-templates/basic--badges.js ================================================ export function basicBadgesTemplate(props) { let out = `
`; for (let i = 0; i < (props.numItems || 4); i++) { out += `
Badge ${i + 1}
`; } out += '
'; return out; } ================================================ FILE: demo-docs-website/src/components/PswpCodePreview/gallery-templates/basic--cropped.js ================================================ export function basicCroppedTemplate(props) { let out = `
`; for (let i = 0; i < (props.numItems || 3); i++) { out += ` `; } out += '
'; return out; } ================================================ FILE: demo-docs-website/src/components/PswpCodePreview/gallery-templates/basic.js ================================================ export function basicTemplate(props) { let out = `
\n`; for (let i = 0; i < (props.numItems || 3); i++) { out += ` \n`; } out += '
'; return out; } ================================================ FILE: demo-docs-website/src/components/PswpCodePreview/gallery-templates/caption.js ================================================ export function captionTemplate(props) { return `
Caption 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Test link →
Caption 2
Caption 3
Caption 4
`; } ================================================ FILE: demo-docs-website/src/components/PswpCodePreview/gallery-templates/content-types.js ================================================ export function contentTypesTemplate(props) { return `
`; } ================================================ FILE: demo-docs-website/src/components/PswpCodePreview/gallery-templates/custom-html-markup-data-source.js ================================================ export function customHTMLDataSourceTemplate(props) { let out = `
\n`; for (let i = 0; i < (props.numItems || 3); i++) { out += ` Test ${i + 1}\n`; } out += '
'; return out; } ================================================ FILE: demo-docs-website/src/components/PswpCodePreview/gallery-templates/getting-started.js ================================================ export function gettingStartedTemplate(props) { return `
Cropped No thumbnail
`; } ================================================ FILE: demo-docs-website/src/components/PswpCodePreview/gallery-templates/srcset-test.js ================================================ export function srcsetTemplate(props) { const items = [{ thumbSrc: '1-300x200.png', largeSrc: '1-1500x1000.png', width: 1500, height: 1000, srcset: '%1-600x400.png 600w, %1-1200x800.png 1200w, %1-1500x1000.png 1500w' }, { thumbSrc: '2-300x200.png', largeSrc: '2-1500x1000.png', width: 1500, height: 1000, srcset: '%2-600x400.png 600w, %2-1200x800.png 1200w, %2-1500x1000.png 1500w' }, { thumbSrc: '3-300x300.png', largeSrc: '3-1500x1500.png', width: 1500, height: 1500, srcset: '%3-600x600.png 600w, %3-1200x1200.png 1200w, %3-1500x1500.png 1500w' }, { thumbSrc: '4-200x300.png', largeSrc: '4-1000x1500.png', width: 1000, height: 1500, srcset: '%4-400x600.png 400w, %4-800x1200.png 800w, %4-1000x1500.png 1000w' }]; let out = `
\n`; const baseURL = props.cdnURL + 'srcset-test/'; items.forEach((item) => { const srcset = item.srcset.replace(/%/g, baseURL); out += ` \n`; }); out += '
'; return out; } ================================================ FILE: demo-docs-website/src/components/PswpCodePreview/index.js ================================================ import React from 'react'; import CodeBlock from '../../theme/CodeBlock'; import { pswpDemoImages } from './demo-images'; import { basicTemplate } from './gallery-templates/basic'; let uidCounter = 1; /** * Get the smallest size (but not smaller than minSize) * * @param {Array} sizes * @param {Integer} minSize */ const getSmallestImageSize = (sizes, minSize) => { sizes = sizes.filter(size => size.width >= minSize); return sizes.reduce((a, b) => (a.width < b.width ? a : b)); }; /** * Generates gallery for demo * * Supported params: * displayHTML: false|true (whether HTML code block should be visible) * numItems: Integer (number of images to display) * galleryID: String (ID attribute) */ function generateGallery(galleryData) { const thumbnailSize = 70; const cdnURL = 'https://cdn.photoswipe.com/photoswipe-demo-images/photos/'; const templateProps = { numItems: Math.min(parseInt(galleryData.numItems, 10) || 3, 11), id: galleryData.galleryID || (uidCounter++), img: [], cdnURL }; const { orientation } = galleryData; let demoImages = [ ...pswpDemoImages ]; if (orientation === 'landscape') { demoImages = demoImages.filter((imageData) => { return imageData.sizes[0].width >= imageData.sizes[0].height; }); } else if (orientation === 'portrait') { demoImages = demoImages.filter((imageData) => { return imageData.sizes[0].width <= imageData.sizes[0].height; }); } demoImages.forEach((imageData, index) => { const largest = imageData.sizes[0]; const thumbnail = getSmallestImageSize(imageData.sizes, thumbnailSize); templateProps.img.push({ index, width: largest.width, height: largest.height, src: cdnURL + largest.src, thumbSrc: cdnURL + thumbnail.src }); }); if (galleryData.templateFn) { return galleryData.templateFn(templateProps); } return basicTemplate(templateProps); } export default function PswpCodePreview(props) { return (
{ props.children } { props.galleryID && {generateGallery(props)} }
); } ================================================ FILE: demo-docs-website/src/css/custom.css ================================================ /** * Any CSS included here will be global. The classic template * bundles Infima by default. Infima is a CSS framework designed to * work well for content-centric websites. */ /* You can override the default Infima variables here. */ :root { --ifm-color-primary: #2e8555; --ifm-color-primary-dark: #29784c; --ifm-color-primary-darker: #277148; --ifm-color-primary-darkest: #205d3b; --ifm-color-primary-light: #33925d; --ifm-color-primary-lighter: #359962; --ifm-color-primary-lightest: #3cad6e; --ifm-code-font-size: 95%; --ifm-toc-border-color: rgba(0, 0, 0, 0.065); --ifm-code-background: rgb(250, 250, 250); --ifm-link-color: #3169B3; --ifm-link-hover-color: #C00; --ifm-link-decoration: underline; --ifm-link-hover-decoration: underline; --ifm-navbar-link-hover-color: var(--ifm-link-hover-color); --ifm-footer-background-color: none; --ifm-footer-color: auto; --ifm-footer-padding-horizontal: calc(var(--ifm-spacing-horizontal) * 2); --ifm-footer-padding-vertical: calc(var(--ifm-spacing-vertical) * 2); --pswp-docs-main-content-width: 1100px; --ifm-heading-font-weight: var(--ifm-font-weight-semibold); } a { transition: none; } a:hover { color: var(--ifm-link-hover-color); /* autoprefixer: ignore next */ text-decoration: var(--ifm-link-hover-decoration); } pre code, .pswp-example__preview { background: var(--ifm-code-background); } code { border: 0; } .docusaurus-highlight-code-line { background-color: rgba(0, 0, 0, 0.1); display: block; margin: 0 calc(-1 * var(--ifm-pre-padding)); padding: 0 var(--ifm-pre-padding); } .ukraine-flag { width: 21px; height: 14px; position: relative; background: #ffcc00; top: 2px; display: inline-block; margin-left: 3px; margin-right: 2px; } .ukraine-flag:before { content:''; position: absolute; width: 21px; height: 7px; left:0; top:0; background: #0066cc; } a.hash-link { text-decoration: none; transition: none; padding: 0.5rem 0.7rem; } .theme-code-block--hidden { display: none; } .navbar, .footer, .main-wrapper { width: 100%; max-width: var(--pswp-docs-main-content-width); margin: 0 auto; } .navbar { z-index: 20; box-shadow: none; border-bottom: 1px solid var(--ifm-toc-border-color); } .footer { margin-top: 60px; border-top: 1px solid var(--ifm-toc-border-color); } .docs-wrapper { display: flex; flex-direction: row; align-items: flex-start; justify-content: center; } .pswp-docs__main-column > article { max-width: 700px; } .pswp-docs__sidebar-menu { width: 30%; width: 250px; } /*.pswp-docs__main-column { width: 70%; } */ .theme-doc-markdown { /* max-width: 670px; */ } @import './sidebar-menu.css'; @import './docs-page.css'; @import './example-code-block.css'; @import './scrollbar.css'; @import './header.css'; @import './home.css'; ================================================ FILE: demo-docs-website/src/css/docs-page.css ================================================ /* .theme-doc-footer, .pagination-nav, .theme-doc-markdown > * { max-width: 650px; } */ .theme-doc-markdown iframe { width: 100%; height: 450px; } .theme-doc-footer { border-top: 1px solid var(--ifm-toc-border-color); padding: var(--ifm-global-spacing) 0; } nav.pagination-nav { border-top: 1px solid var(--ifm-toc-border-color); margin-top: 0; } a.pagination-nav__link { border: 0; text-decoration: none; padding: var(--ifm-global-spacing) 0; } a.pagination-nav__link .pagination-nav__sublabel { text-decoration: none; } .pagination-nav__label { font-size: var(--ifm-h3-font-size); } .pagination-nav__label::after, .pagination-nav__label::before { content: none !important; } ================================================ FILE: demo-docs-website/src/css/example-code-block.css ================================================ .pswp-example { width: 100%; position: relative; margin-bottom: 1rem; } span.docusaurus-highlight-code-line { background: rgba(255, 217, 109, .3); } .pswp-example .theme-code-block { width: calc(100% - 204px); margin-bottom: 4px; } .pswp-example__preview { width: 200px; position: absolute; right: 0; top: 0; height: 100%; overflow-y: auto; margin-left: 4px; } .pswp-example__preview { padding: var(--ifm-pre-padding); } .pswp-example .pswp-gallery { display: flex; flex-direction: row; align-items: flex-start; flex-wrap: wrap; position: relative; width: 155px; } .pswp-example .pswp-gallery img { display: block; } .pswp-gallery { display: flex; } .pswp-gallery > * { display: block; position: relative; margin-bottom: 4px; margin-right: 4px; width: 70px; } .pswp-example .pswp-gallery > *:nth-child(2n) { margin-right: 0; } .pswp-example .pswp-gallery--single-column > * { width: 120px; margin-bottom: 18px; font-size: 14px; } button.pswp-example__hide-html-btn { position: absolute; cursor: pointer; z-index: 10; font-size: 12px; right: 0; bottom: 0; color: var(--ifm-link-color); background: none; border: 0; padding: 2px 5px; background: var(--ifm-pre-background); } button.pswp-example__hide-html-btn:hover { color: var(--ifm-link-hover-color); } [data-cropped] img { width: 100%; height: 70px; object-fit: cover; } @media only screen and (max-width: 600px) { .pswp-example .theme-code-block { width: 100%; } .pswp-example__preview { width: 100%; height: auto; position: relative; } .pswp-example__preview .pswp-gallery { max-width: 150px; } } .pswp-example__code--hidden { display: none; } input[type="checkbox"].hidden-cb { width: 1px; height: 1px; opacity: 0.01; overflow: hidden; position: absolute; right: 0; bottom: 0; } label.pswp-example__toggle { position: absolute; right: 0; bottom: -25px; padding: 0 0; border-radius: 0; font-size: 14px; color: #1B57A5; cursor: pointer; z-index: 20; } label.pswp-example__toggle:hover { color: #c00; } input[type="checkbox"]:focus + label { outline: 1px dotted #212121; outline: 5px auto -webkit-focus-ring-color; } input[type="checkbox"]:checked { display: none; } input[type="checkbox"]:checked + label { display: none; } input[type="checkbox"]:checked + label + .pswp-example__code--hidden { display: block !important; } ================================================ FILE: demo-docs-website/src/css/header.css ================================================ a.navbar__brand { text-decoration: none; font-size: 20px; line-height: 1; white-space: nowrap; transform: translate(0, -2px); } a.navbar__link { color: var(--ifm-link-color); text-decoration: none; } a.navbar__link--active { color: var(--ifm-font-color-base); } .navbar__link svg { display: none; } a.pswp-docs__github-link { display: flex; flex-direction: row; align-items: flex-start; text-decoration: none; font-weight: var(--ifm-font-weight-semibold); } a.pswp-docs__github-link:hover { text-decoration: none; } .pswp-docs__github-link svg { transform: translate(0, 2px); margin-right: 3px; } .pswp-docs__github-link-left { border-top-left-radius: 4px; border-bottom-left-radius: 4px; padding: 2px 8px; border: 1px solid #D5D5D5; } .pswp-docs__github-link-right { background: #fff; border-top-right-radius: 4px; border-bottom-right-radius: 4px; padding: 2px 8px; border: 1px solid #D5D5D5; border-left: 0; color: #222; } .navbar__brand span { font-size: 12px; margin-left: 4px; margin-top: -12px; line-height: 1; } button.DocSearch { --docsearch-searchbox-background: #e9e9e9; --docsearch-primary-color: var(--ifm-link-color); --docsearch-text-color: #222; --docsearch-muted-color: #222; --docsearch-searchbox-shadow: inset 0 0 0 2px var(--docsearch-primary-color); --docsearch-highlight-color: var(--ifm-link-color); height: 35px; } button .DocSearch-Button-Placeholder { font-size: 16px; font-weight: 400; } button .DocSearch-Button-Keys { display: none !important; } ================================================ FILE: demo-docs-website/src/css/home.css ================================================ .pswp-docs__home .navbar__brand { display: none; } .pswp-docs__header-title-text { margin: 60px 0px 50px; font-size: 22px; text-align: center; } .pswp-docs__whats-new { margin-top: 50px; } .pswp-docs__whats-new h4 { margin: 50px auto 12px; font-size: 24px; } .pswp-docs__home-block-main-col > * { max-width: 600px; margin-left: auto; margin-right: auto; } .pswp-docs__home-block-full-width-col { max-width: 1068px; } .pswp-docs__header-title-text a svg { display: inline-block; width: 16px; fill: var(--ifm-link-color); transform: translate(0px, 3px); margin-left: 0.2em; } .pswp-docs__header-title-text a:hover svg { fill: var(--ifm-link-hover-color); } .pswp-docs__header-title-text a { font-weight: bold; text-decoration: none; } .pswp-docs__header-title-text h1 { font-weight: bold; font-size: 64px; line-height: 1; margin-bottom: 14px; } .pswp-docs__header-title-text h1 span { position: absolute; vertical-align: super; font-size: 16px; text-decoration: none; } .pswp-docs__header-title-text p { margin-bottom: 0; } .pswp-docs__home-gallery { position: relative; display: grid; width: 100%; grid-template-columns: 1fr 0.5fr 0.5fr; grid-gap: 10px; } .pswp-docs__home-gallery-credit { position: absolute; right: 0; bottom: -21px; font-size: 12px; } .pswp-docs__home-gallery .pswp-docs__home-gallery-item { position: relative; } figure.pswp-docs__home-gallery-item { display: block; margin: 0; padding: 0; } .pswp-docs__home-gallery-item figcaption { display: none; } .pswp-docs__home-gallery .pswp-docs__home-gallery-item img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; } .pswp-docs__home-gallery .pswp-docs__home-gallery-item:first-child { grid-row: span 2; } .pswp-docs__home-gallery .pswp-docs__home-gallery-item a { display: block; position: relative; overflow: hidden; width: 100%; height: 100%; padding-bottom: 100%; } .pswp-docs__home-gallery-example { display: flex; flex-direction: row; align-items: flex-start; flex-wrap: wrap; width: 100%; } .pswp-docs__home-gallery-example a { position: relative; margin: 0 4px 4px 0; line-height: 0; display: block; } .pswp-docs__home-gallery-example img { position: absolute; left: 0; top: 0; width: 100%; max-width: none; } .pswp-docs__home-block h2 { font-weight: bold; font-size: 40px; line-height: 1.1; margin: 70px auto 36px; } .pswp__dynamic-caption { font-size: 14px; line-height: 1.5; } #gallery--deep-zoom { display: flex; flex-direction: row; flex-wrap: wrap; align-items: baseline; } #gallery--deep-zoom figure { display: block; margin: 0; padding: 0; margin-right: 4px; min-width: 100px; max-width: 180px; } @media (max-width: 900px) { .pswp__dynamic-caption.pswp__dynamic-caption--aside { margin-top: 0; } } @media (max-width: 700px) { #gallery--deep-zoom { max-width: 296px; } } #gallery--deep-zoom figure:last-child { margin-right: 0; } #gallery--deep-zoom figure > a { display: block; position: relative; } #gallery--deep-zoom img { position: absolute; left: 0; top: 0; width: 100%; } figcaption.caption { font-size: 12px; margin-top: 6px; } @media (max-width: 650px) { .pswp-docs__home-gallery { grid-gap: 5px; } .pswp-docs__header-title-text h1 { font-size: 36px; } .pswp-docs__header-title-text { margin: 40px 0px 30px; font-size: 18px; text-align: center; } .pswp-docs__home-block h2 { font-size: 26px; margin: 40px auto 12px; } .pswp-docs__whats-new h4 { margin: 24px auto 12px; font-size: var(--ifm-font-size-base); } #gallery--deep-zoom { max-width: 296px; } } ================================================ FILE: demo-docs-website/src/css/scrollbar.css ================================================ /* style scrollbar */ .docs-styled-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; } .docs-styled-scrollbar::-webkit-scrollbar-button { width: 0px; height: 0px; } .docs-styled-scrollbar::-webkit-scrollbar-thumb { background: #C2C2C2; border: 0; border-radius: 0; } .docs-styled-scrollbar::-webkit-scrollbar-thumb:hover { background: #aaa; } .docs-styled-scrollbar::-webkit-scrollbar-thumb:active { background: #999; } .docs-styled-scrollbar::-webkit-scrollbar-track { background: none; border: 0; border-radius: 0; background: #eee; } .docs-styled-scrollbar::-webkit-scrollbar-track:hover { background: #ddd; } .docs-styled-scrollbar::-webkit-scrollbar-corner { background: none; } ================================================ FILE: demo-docs-website/src/css/sidebar-menu.css ================================================ aside.theme-doc-sidebar-container { border: 0; margin-top: 0; } aside.theme-doc-sidebar-container { position: sticky; margin-top: 30px; top: 30px; } .pswp-docs__sidebar-menu { position: relative; border-right: 1px solid var(--ifm-toc-border-color); display: flex; flex-direction: column; align-items: flex-start; padding: 0 var(--ifm-navbar-padding-horizontal) } .pswp-docs__sidebar-menu--mobile { position: relative; margin-top: 0; top: auto; } .pswp-docs__sidebar-menu-item { text-decoration: none; font-size: 16px; line-height: 22px; padding: 4px 0; } .pswp-docs__sidebar-menu-item--category { color: #393939; opacity: 0.5; margin-top: 16px; } .pswp-docs__sidebar-menu-item--category:first-child { margin-top: 0;; } a.pswp-docs__sidebar-menu-item--active { color: var(--ifm-font-color-base); } .docSidebarContainer { display: none; } @media (max-width: 996px) { .pswp-docs__sidebar-menu { border-right: 0; } .theme-doc-sidebar-container > .pswp-docs__sidebar-menu { display: none; } } @media (min-width: 997px) { } ================================================ FILE: demo-docs-website/src/pages/_index-deep-zoom-demo.js ================================================ import React, { useEffect } from 'react'; import Lightbox from '../../static/photoswipe/photoswipe-lightbox.esm.js'; //import PhotoSwipeDeepZoom from 'photoswipe-deep-zoom-plugin'; const galleryHTML = `
Cambriae Typus
Humphrey Llwyd
5,832px x 4,409px
A sergeant of the Light Horse
A sergeant of the Light Horse
George Lambert
4,578px x 5,736px
The Starry Night
Vincent van Gogh
30,000px x 23,756px
Magnolia and Erect Rock
Chen Hongshou
1,820px x 1,948px (not tiled)
`; export default function DeepZoomGalleryDemo() { useEffect(() => { let deepZoomPlugin; let lightbox = new Lightbox({ gallery: '#gallery--deep-zoom', children: 'figure > a', pswpModule: () => import('../../static/photoswipe/photoswipe.esm.js'), // dynamically load deep zoom plugin openPromise: () => { // make sure it's initialized only once per lightbox if (!deepZoomPlugin) { return import('photoswipe-deep-zoom-plugin').then((deepZoomPluginModule) => { deepZoomPlugin = new deepZoomPluginModule.default(lightbox, { // deep zoom plugin options }); }) } }, // Recommended PhotoSwipe options for this plugin allowPanToNext: false, // prevent swiping to the next slide when image is zoomed allowMouseDrag: true, // display dragging cursor at max zoom level wheelToZoom: true, // enable wheel-based zoom zoom: false // disable default zoom button }); lightbox.init(); return function cleanup() { if (lightbox) { lightbox.destroy(); lightbox = null; } if (deepZoomPlugin) { deepZoomPlugin.destroy(); deepZoomPlugin = null; } }; }, []); return (
) } ================================================ FILE: demo-docs-website/src/pages/_index-gallery-header.js ================================================ import React, { useEffect } from 'react'; import Lightbox from '../../static/photoswipe/photoswipe-lightbox.esm.js'; import PhotoSwipe from '../../static/photoswipe/photoswipe.esm.js' import PhotoSwipeDynamicCaption from 'photoswipe-dynamic-caption-plugin'; import 'photoswipe-dynamic-caption-plugin/photoswipe-dynamic-caption-plugin.css'; const baseCdnUrl = 'https://cdn.photoswipe.com/photoswipe-demo-images/photos/home-demo/'; const imagesData = [ { caption: `Test Caption
Dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.`, width: 2500, height: 3125, src: `${baseCdnUrl}luca-bravo-ny6qxqv_m04-unsplash_snrzpf/luca-bravo-ny6qxqv_m04-unsplash_snrzpf_c_scale,w_2500.jpg`, thumbSrc: `${baseCdnUrl}luca-bravo-ny6qxqv_m04-unsplash_snrzpf/luca-bravo-ny6qxqv_m04-unsplash_snrzpf_c_scale,w_664.jpg`, thumbSrcset: `${baseCdnUrl}luca-bravo-ny6qxqv_m04-unsplash_snrzpf/thumb.jpg 524w, ${baseCdnUrl}luca-bravo-ny6qxqv_m04-unsplash_snrzpf/luca-bravo-ny6qxqv_m04-unsplash_snrzpf_c_scale,w_664.jpg 664w, ${baseCdnUrl}luca-bravo-ny6qxqv_m04-unsplash_snrzpf/luca-bravo-ny6qxqv_m04-unsplash_snrzpf_c_scale,w_932.jpg 932w`, srcset: `${baseCdnUrl}luca-bravo-ny6qxqv_m04-unsplash_snrzpf/luca-bravo-ny6qxqv_m04-unsplash_snrzpf_c_scale,w_300.jpg 300w, ${baseCdnUrl}luca-bravo-ny6qxqv_m04-unsplash_snrzpf/luca-bravo-ny6qxqv_m04-unsplash_snrzpf_c_scale,w_664.jpg 664w, ${baseCdnUrl}luca-bravo-ny6qxqv_m04-unsplash_snrzpf/luca-bravo-ny6qxqv_m04-unsplash_snrzpf_c_scale,w_932.jpg 932w, ${baseCdnUrl}luca-bravo-ny6qxqv_m04-unsplash_snrzpf/luca-bravo-ny6qxqv_m04-unsplash_snrzpf_c_scale,w_1355.jpg 1355w, ${baseCdnUrl}luca-bravo-ny6qxqv_m04-unsplash_snrzpf/luca-bravo-ny6qxqv_m04-unsplash_snrzpf_c_scale,w_2500.jpg 2500w` }, { width: 2500, height: 1667, caption: `Another Test Caption
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.`, src: `${baseCdnUrl}luca-bravo-O453M2Liufs-unsplash_qqt53u/luca-bravo-O453M2Liufs-unsplash_qqt53u_c_scale,w_2500.jpg`, thumbSrc: `${baseCdnUrl}luca-bravo-O453M2Liufs-unsplash_qqt53u/luca-bravo-O453M2Liufs-unsplash_qqt53u_c_scale,w_300.jpg`, thumbSrcset: `${baseCdnUrl}luca-bravo-O453M2Liufs-unsplash_qqt53u/luca-bravo-O453M2Liufs-unsplash_qqt53u_c_scale,w_300.jpg 300w, ${baseCdnUrl}luca-bravo-O453M2Liufs-unsplash_qqt53u/thumb.jpg 393w, ${baseCdnUrl}luca-bravo-O453M2Liufs-unsplash_qqt53u/luca-bravo-O453M2Liufs-unsplash_qqt53u_c_scale,w_612.jpg 612w, ${baseCdnUrl}luca-bravo-O453M2Liufs-unsplash_qqt53u/luca-bravo-O453M2Liufs-unsplash_qqt53u_c_scale,w_826.jpg 826w`, srcset: `${baseCdnUrl}luca-bravo-O453M2Liufs-unsplash_qqt53u/luca-bravo-O453M2Liufs-unsplash_qqt53u_c_scale,w_300.jpg 300w, ${baseCdnUrl}luca-bravo-O453M2Liufs-unsplash_qqt53u/luca-bravo-O453M2Liufs-unsplash_qqt53u_c_scale,w_612.jpg 612w, ${baseCdnUrl}luca-bravo-O453M2Liufs-unsplash_qqt53u/luca-bravo-O453M2Liufs-unsplash_qqt53u_c_scale,w_826.jpg 826w, ${baseCdnUrl}luca-bravo-O453M2Liufs-unsplash_qqt53u/luca-bravo-O453M2Liufs-unsplash_qqt53u_c_scale,w_1115.jpg 1115w, ${baseCdnUrl}luca-bravo-O453M2Liufs-unsplash_qqt53u/luca-bravo-O453M2Liufs-unsplash_qqt53u_c_scale,w_1400.jpg 1400w, ${baseCdnUrl}luca-bravo-O453M2Liufs-unsplash_qqt53u/luca-bravo-O453M2Liufs-unsplash_qqt53u_c_scale,w_2500.jpg 2500w` }, { width: 2500, height: 1667, caption: `Long caption
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore.Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?`, src: `${baseCdnUrl}luca-bravo-VowIFDxogG4-unsplash_ibrktu/luca-bravo-VowIFDxogG4-unsplash_ibrktu_c_scale,w_2500.jpg`, thumbSrc: `${baseCdnUrl}luca-bravo-VowIFDxogG4-unsplash_ibrktu/luca-bravo-VowIFDxogG4-unsplash_ibrktu_c_scale,w_300.jpg`, thumbSrcset: `${baseCdnUrl}luca-bravo-VowIFDxogG4-unsplash_ibrktu/luca-bravo-VowIFDxogG4-unsplash_ibrktu_c_scale,w_300.jpg 300w, ${baseCdnUrl}luca-bravo-VowIFDxogG4-unsplash_ibrktu/thumb.jpg 393w, ${baseCdnUrl}luca-bravo-VowIFDxogG4-unsplash_ibrktu/luca-bravo-VowIFDxogG4-unsplash_ibrktu_c_scale,w_639.jpg 639w`, srcset: `${baseCdnUrl}luca-bravo-VowIFDxogG4-unsplash_ibrktu/luca-bravo-VowIFDxogG4-unsplash_ibrktu_c_scale,w_300.jpg 300w, ${baseCdnUrl}luca-bravo-VowIFDxogG4-unsplash_ibrktu/luca-bravo-VowIFDxogG4-unsplash_ibrktu_c_scale,w_639.jpg 639w, ${baseCdnUrl}luca-bravo-VowIFDxogG4-unsplash_ibrktu/luca-bravo-VowIFDxogG4-unsplash_ibrktu_c_scale,w_1176.jpg 1176w, ${baseCdnUrl}luca-bravo-VowIFDxogG4-unsplash_ibrktu/luca-bravo-VowIFDxogG4-unsplash_ibrktu_c_scale,w_1200.jpg 1200w, ${baseCdnUrl}luca-bravo-VowIFDxogG4-unsplash_ibrktu/luca-bravo-VowIFDxogG4-unsplash_ibrktu_c_scale,w_1385.jpg 1385w, ${baseCdnUrl}luca-bravo-VowIFDxogG4-unsplash_ibrktu/luca-bravo-VowIFDxogG4-unsplash_ibrktu_c_scale,w_1834.jpg 1834w, ${baseCdnUrl}luca-bravo-VowIFDxogG4-unsplash_ibrktu/luca-bravo-VowIFDxogG4-unsplash_ibrktu_c_scale,w_2500.jpg 2500w` }, { width: 2500, height: 1667, caption: `Lorem Ipsum
Unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.`, src: `${baseCdnUrl}luca-bravo-zAjdgNXsMeg-unsplash_q6zdih/luca-bravo-zAjdgNXsMeg-unsplash_q6zdih_c_scale,w_2500.jpg`, thumbSrc: `${baseCdnUrl}luca-bravo-zAjdgNXsMeg-unsplash_q6zdih/luca-bravo-zAjdgNXsMeg-unsplash_q6zdih_c_scale,w_300.jpg`, thumbSrcset: `${baseCdnUrl}luca-bravo-zAjdgNXsMeg-unsplash_q6zdih/luca-bravo-zAjdgNXsMeg-unsplash_q6zdih_c_scale,w_300.jpg 300w, ${baseCdnUrl}luca-bravo-zAjdgNXsMeg-unsplash_q6zdih/thumb.jpg 393w, ${baseCdnUrl}luca-bravo-zAjdgNXsMeg-unsplash_q6zdih/luca-bravo-zAjdgNXsMeg-unsplash_q6zdih_c_scale,w_627.jpg 627w, ${baseCdnUrl}luca-bravo-zAjdgNXsMeg-unsplash_q6zdih/luca-bravo-zAjdgNXsMeg-unsplash_q6zdih_c_scale,w_861.jpg 861w`, srcset: `${baseCdnUrl}luca-bravo-zAjdgNXsMeg-unsplash_q6zdih/luca-bravo-zAjdgNXsMeg-unsplash_q6zdih_c_scale,w_300.jpg 300w, ${baseCdnUrl}luca-bravo-zAjdgNXsMeg-unsplash_q6zdih/luca-bravo-zAjdgNXsMeg-unsplash_q6zdih_c_scale,w_627.jpg 627w, ${baseCdnUrl}luca-bravo-zAjdgNXsMeg-unsplash_q6zdih/luca-bravo-zAjdgNXsMeg-unsplash_q6zdih_c_scale,w_861.jpg 861w, ${baseCdnUrl}luca-bravo-zAjdgNXsMeg-unsplash_q6zdih/luca-bravo-zAjdgNXsMeg-unsplash_q6zdih_c_scale,w_1057.jpg 1057w, ${baseCdnUrl}luca-bravo-zAjdgNXsMeg-unsplash_q6zdih/luca-bravo-zAjdgNXsMeg-unsplash_q6zdih_c_scale,w_1441.jpg 1441w, ${baseCdnUrl}luca-bravo-zAjdgNXsMeg-unsplash_q6zdih/luca-bravo-zAjdgNXsMeg-unsplash_q6zdih_c_scale,w_1881.jpg 1881w, ${baseCdnUrl}luca-bravo-zAjdgNXsMeg-unsplash_q6zdih/luca-bravo-zAjdgNXsMeg-unsplash_q6zdih_c_scale,w_2500.jpg 2500w` }, { width: 2500, height: 1667, caption: `Test Caption
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
`, src: `${baseCdnUrl}luca-bravo-A-fubu9QJxE-unsplash_jxy5p8/luca-bravo-A-fubu9QJxE-unsplash_jxy5p8_c_scale,w_2500.jpg`, thumbSrc: `${baseCdnUrl}luca-bravo-A-fubu9QJxE-unsplash_jxy5p8/luca-bravo-A-fubu9QJxE-unsplash_jxy5p8_c_scale,w_300.jpg`, thumbSrcset: `${baseCdnUrl}luca-bravo-A-fubu9QJxE-unsplash_jxy5p8/luca-bravo-A-fubu9QJxE-unsplash_jxy5p8_c_scale,w_300.jpg 300w, ${baseCdnUrl}luca-bravo-A-fubu9QJxE-unsplash_jxy5p8/thumb.jpg 393w, ${baseCdnUrl}luca-bravo-A-fubu9QJxE-unsplash_jxy5p8/luca-bravo-A-fubu9QJxE-unsplash_jxy5p8_c_scale,w_649.jpg 649w, ${baseCdnUrl}luca-bravo-A-fubu9QJxE-unsplash_jxy5p8/luca-bravo-A-fubu9QJxE-unsplash_jxy5p8_c_scale,w_996.jpg 996w`, srcset: `${baseCdnUrl}luca-bravo-A-fubu9QJxE-unsplash_jxy5p8/luca-bravo-A-fubu9QJxE-unsplash_jxy5p8_c_scale,w_300.jpg 300w, ${baseCdnUrl}luca-bravo-A-fubu9QJxE-unsplash_jxy5p8/luca-bravo-A-fubu9QJxE-unsplash_jxy5p8_c_scale,w_649.jpg 649w, ${baseCdnUrl}luca-bravo-A-fubu9QJxE-unsplash_jxy5p8/luca-bravo-A-fubu9QJxE-unsplash_jxy5p8_c_scale,w_996.jpg 996w, ${baseCdnUrl}luca-bravo-A-fubu9QJxE-unsplash_jxy5p8/luca-bravo-A-fubu9QJxE-unsplash_jxy5p8_c_scale,w_1188.jpg 1188w, ${baseCdnUrl}luca-bravo-A-fubu9QJxE-unsplash_jxy5p8/luca-bravo-A-fubu9QJxE-unsplash_jxy5p8_c_scale,w_1303.jpg 1303w, ${baseCdnUrl}luca-bravo-A-fubu9QJxE-unsplash_jxy5p8/luca-bravo-A-fubu9QJxE-unsplash_jxy5p8_c_scale,w_1840.jpg 1840w, ${baseCdnUrl}luca-bravo-A-fubu9QJxE-unsplash_jxy5p8/luca-bravo-A-fubu9QJxE-unsplash_jxy5p8_c_scale,w_2500.jpg 2500w` }, ]; function GalleryItem(props) { const attributes = { style: { paddingBottom: props.cropped ? 1 / props.aspectRatio * 100 + '%' : props.height / props.width * 100 + '%' }, href: props.src, 'data-pswp-srcset': props.srcset, 'data-pswp-width': props.width, 'data-pswp-height': props.height, target: '_blank', ...( props.cropped && { 'data-cropped': true } ) }; const figureAttributes = { style: {}, className: 'pswp-docs__home-gallery-item' }; let sizes = props.sizes; if (props.justifiedRow) { figureAttributes.style.flex = props.width / props.height * 100; const widthRatio = ( props.width / props.height) / props.aspectRatioSumm; sizes = `(min-width: 1124px) ${Math.ceil(600 * widthRatio)}px, ${Math.ceil(100 * widthRatio)}vw`; } return (
{ props.caption &&
}
); } export function GalleryExampleOpenZoomed(props) { useEffect(() => { let lightbox = new Lightbox({ gallery: '#gallery--open-zooomed figure > a', initialZoomLevel: 'fill', secondaryZoomLevel: 'fill', maxZoomLevel: 3, pswpModule: PhotoSwipe }); lightbox.init(); return function cleanup() { lightbox.destroy(); lightbox = null; }; }, []); return ( ) } export function GalleryExampleDynamicCaptionPlugin(props) { useEffect(() => { const smallScreenPadding = { top: 0, bottom: 0, left: 0, right: 0 }; const largeScreenPadding = { top: 20, bottom: 20, left: 50, right: 50 }; let lightbox = new Lightbox({ gallery: '#gallery--dynamic-caption', children: '.pswp-docs__home-gallery-item > a', paddingFn: (viewportSize) => { return viewportSize.x < 700 ? smallScreenPadding : largeScreenPadding }, pswpModule: () => import('../../static/photoswipe/photoswipe.esm.js') }); lightbox.init(); let captionPlugin = new PhotoSwipeDynamicCaption(lightbox, { type: 'auto', captionContent: 'figcaption' }); return function cleanup() { lightbox.destroy(); lightbox = null; captionPlugin = null; }; }, []); return ( ) } export function GalleryExample(props) { const aspectRatioSumm = imagesData.reduce((summ, image, index) => { if (props.items && !props.items.includes(index)) { return summ; } return summ + image.width / image.height; }, 0); const galleryItems = imagesData.map((image, index) => { if (props.items && !props.items.includes(index)) { return; } return }); return (
{galleryItems}
); } export default function GalleryHeader() { useEffect(() => { let lightbox = new Lightbox({ gallery: '#gallery--header-home', children: '.pswp-docs__home-gallery-item > a', pswpModule: () => import('../../static/photoswipe/photoswipe.esm.js') }); lightbox.init(); return function cleanup() { lightbox.destroy(); lightbox = null; }; }, []); return (
Photos by Luca Bravo
); } ================================================ FILE: demo-docs-website/src/pages/index.js ================================================ import React, { useEffect } from 'react'; import Layout from '@theme/Layout'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import GalleryHeader, { GalleryExampleDynamicCaptionPlugin, GalleryExampleOpenZoomed } from './_index-gallery-header'; import CodeBlock from '../theme/CodeBlock'; import packageInfo from '../../../package.json'; import DeepZoomGalleryDemo from './_index-deep-zoom-demo'; import Head from '@docusaurus/Head'; function HomepageHeader() { return (
PhotoSwipe: Responsive JavaScript Image Gallery

PhotoSwipe {packageInfo.version}

JavaScript image gallery and lightbox

Documentation and examples
); } function WhatsNew() { const initCodeExample = ``; return (

What’s new in v5

Code quality and rewrite in ES6

The script is now distributed as an ES module and does not require a build step to use. The documentation is also updated and now includes more examples.

Simpler initialization and dynamic import support

PhotoSwipe now supports dynamic import and does not block page rendering.

{initCodeExample}

Animation and gesture engine update

Improved performance of most animations, touch gestures should feel more fluid now. The initial opening or closing transition can be run from a CSS-cropped thumbnail, as you can see on the top of this page.

Single CSS file and no external assets

Using CSS variables, default icons are dynamically generated and tiny.
Styling guide →

Built-in responsive images support

PhotoSwipe also dynamically loads larger images as a user zooms via srcset.

Open images in a zoomed state

It's now much easier to control zoom level, refer to the Adjusting Zoom Level section of docs for more info. The example below opens images in a zoomed state and individually.

Removed features from the core

Some built-in features were removed in v5, either because they are using outdated technology or just rarely used. Some of them are or will be replaced by a plugin. These include:

  • History API (#hash-based navigation is outdated)
  • Social sharing (unreliable URL, lack of Opengraph support)
  • Fullscreen button (rarely used, double fullscreen). Related example in docs →
  • Caption (accessibility problems). Refer to the caption section of docs.
  • Inline gallery support (v5 is mainly designed to be used as a dialog).

Plugins

Dynamic Caption plugin

A plugin that dynamically positions the caption below or aside depending on the available free space.

Tiled Deep Zoom plugin (experimental)

Tile-based image viewer that allows displaying of extremely large images. Unlike conventional tile-viewers (such as Leaflet or OpenSeaDragon) it displays tiles only after the user zooms beyond the primary image, and keeps all default PhotoSwipe navigation between slides.

License

PhotoSwipe is free for personal or commercial projects (MIT license).
Please support the development on Open Collective if you find it useful.

); } export default function Home() { const {siteConfig} = useDocusaurusContext(); return ( ); } ================================================ FILE: demo-docs-website/src/pages/index.module.css ================================================ /** * CSS files with the .module.css suffix will be treated as CSS modules * and scoped locally. */ ================================================ FILE: demo-docs-website/src/theme/CodeBlock/index.js ================================================ /** * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ import React, {isValidElement, useEffect, useState} from 'react'; import clsx from 'clsx'; import Highlight, {defaultProps} from 'prism-react-renderer'; import { useThemeConfig, parseCodeBlockTitle, parseLanguage, parseLines, ThemeClassNames, usePrismTheme, } from '@docusaurus/theme-common'; import styles from './styles.module.css'; export default function CodeBlock({ children, className: blockClassName = '', metastring, title, pswpcode, pswpdisplayhtml, displayHTML, language: languageProp, }) { const {prism} = useThemeConfig(); const [mounted, setMounted] = useState(false); // The Prism theme on SSR is always the default theme but the site theme // can be in a different mode. React hydration doesn't update DOM styles // that come from SSR. Hence force a re-render after mounting to apply the // current relevant styles. There will be a flash seen of the original // styles seen using this current approach but that's probably ok. Fixing // the flash will require changing the theming approach and is not worth it // at this point. let esModuleScript; useEffect(() => { setMounted(true); if (pswpcode && language === 'js' && !esModuleScript) { esModuleScript = document.createElement('script'); esModuleScript.type = 'module'; esModuleScript.innerHTML = children; document.body.appendChild(esModuleScript); } return () => { if (esModuleScript) { esModuleScript.remove(); esModuleScript = null; } }; }, []); // We still parse the metastring in case we want to support more syntax in the // future. Note that MDX doesn't strip quotes when parsing metastring: // "title=\"xyz\"" => title: "\"xyz\"" const codeBlockTitle = parseCodeBlockTitle(metastring) || title; const prismTheme = usePrismTheme(); // 
 tags in markdown map to CodeBlocks and they may contain JSX children.
  // When the children is not a simple string, we just return a styled block
  // without actually highlighting.

  if (React.Children.toArray(children).some((el) => isValidElement(el))) {
    return (
      
        {({className, style}) => (
          
            {children}
          

        )}
      
    );
  } // The children is now guaranteed to be one/more plain strings

  const content = Array.isArray(children) ? children.join('') : children;
  const language =
    languageProp ?? parseLanguage(blockClassName) ?? prism.defaultLanguage;
  const {highlightLines, code} = parseLines(content, metastring, language);

  let hideCodeBlock = false;

  if (language === 'html' && pswpcode && !displayHTML && !pswpdisplayhtml) {
    hideCodeBlock = true;
  }
  

  return (
    
      {!hideCodeBlock && 
        {({className, style, tokens, getLineProps, getTokenProps}) => (
          

            {codeBlockTitle && (
              

                {codeBlockTitle}
              

            )}
            

              
                
                  {tokens.map((line, i) => {
                    if (line.length === 1 && line[0].content === '\n') {
                      line[0].content = '';
                    }

                    const lineProps = getLineProps({
                      line,
                      key: i,
                    });

                    if (highlightLines.includes(i)) {
                      lineProps.className += ' docusaurus-highlight-code-line';
                    }

                    return (
                      
                        {line.map((token, key) => (
                          
                        ))}
                        

                      
                    );
                  })}
                
              

            

          

        )}
       }
      {language === 'css' && pswpcode &&
        
      }
      {language === 'html' && pswpcode && 
        

      }
    
  );
}


================================================
FILE: demo-docs-website/src/theme/CodeBlock/styles.module.css
================================================
/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.codeBlockContainer {
  margin-bottom: var(--ifm-leading);
}

.codeBlockContent {
  position: relative;
  /* rtl:ignore */
  direction: ltr;
}

.codeBlockContent pre {
  border-radius: 0;
}

.codeBlockTitle {
  border-bottom: 1px solid var(--ifm-color-emphasis-300);
  font-size: var(--ifm-code-font-size);
  font-weight: 500;
  padding: 0.75rem var(--ifm-pre-padding);
  border-top-left-radius: var(--ifm-global-radius);
  border-top-right-radius: var(--ifm-global-radius);
}

.codeBlock {
  margin: 0;
  padding: 0;
}

.codeBlockTitle + .codeBlockContent .codeBlock {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.codeBlockStandalone {
  padding: 0;
  border-radius: var(--ifm-global-radius);
}

.codeBlockLines {
  font: inherit;
  /* rtl:ignore */
  float: left;
  min-width: 100%;
  padding: var(--ifm-pre-padding);
}

@media print {
  .codeBlockLines {
    white-space: pre-wrap;
  }
}


================================================
FILE: demo-docs-website/src/theme/DocItem/index.js
================================================
/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */
import React from 'react';
import clsx from 'clsx';
import DocPaginator from '@theme/DocPaginator';
import DocVersionBanner from '@theme/DocVersionBanner';
import DocVersionBadge from '@theme/DocVersionBadge';
import Seo from '@theme/Seo';
import DocItemFooter from '@theme/DocItemFooter';
import TOC from '@theme/TOC';
import TOCCollapsible from '@theme/TOCCollapsible';
import Heading from '@theme/Heading';
import styles from './styles.module.css';
import {ThemeClassNames, useWindowSize} from '@docusaurus/theme-common';
import DocBreadcrumbs from '@theme/DocBreadcrumbs';
export default function DocItem(props) {
  const {content: DocContent} = props;
  const {metadata, frontMatter, assets} = DocContent;
  const {
    keywords,
    hide_title: hideTitle,
    hide_table_of_contents: hideTableOfContents,
    toc_min_heading_level: tocMinHeadingLevel,
    toc_max_heading_level: tocMaxHeadingLevel,
  } = frontMatter;
  const {description, title} = metadata;
  const image = assets.image ?? frontMatter.image; // We only add a title if:
  // - user asks to hide it with front matter
  // - the markdown content does not already contain a top-level h1 heading

  const shouldAddTitle =
    !hideTitle && typeof DocContent.contentTitle === 'undefined';
  const windowSize = useWindowSize();
  const canRenderTOC =
    !hideTableOfContents && DocContent.toc && DocContent.toc.length > 0;
  const renderTocDesktop =
    canRenderTOC && (windowSize === 'desktop' || windowSize === 'ssr');
  return (
    <>
      
    
      
        

          
          

          

            {/*
            Title can be declared inside md content or declared through
            front matter and added manually. To make both cases consistent,
            the added title is added under the same div.markdown block
            See https://github.com/facebook/docusaurus/pull/4882#issuecomment-853021120
            */}
            {shouldAddTitle && (
              

                {title}
              

            )}

            
          


          
        

    
  );
}


================================================
FILE: demo-docs-website/src/theme/DocItem/styles.module.css
================================================
/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.docItemContainer header + *,
.docItemContainer article > *:first-child {
  margin-top: 0;
}

@media (min-width: 997px) {
  /* Prevent hydration FOUC, as the mobile TOC needs to be server-rendered */
  .tocMobile {
    display: none;
  }
}


================================================
FILE: demo-docs-website/src/theme/DocItemFooter/index.js
================================================
/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */
import React from 'react';
import clsx from 'clsx';
import LastUpdated from '@theme/LastUpdated';
import EditThisPage from '@theme/EditThisPage';
import TagsListInline from '@theme/TagsListInline';
import styles from './styles.module.css';
import {ThemeClassNames} from '@docusaurus/theme-common';

function TagsRow(props) {
  return (
    

      

        
      

    

  );
}

function EditMetaRow({
  editUrl,
  lastUpdatedAt,
  lastUpdatedBy,
  formattedLastUpdatedAt,
}) {
  return (
    

      

        {editUrl && }
        

        Updates on Twitter
        
  
        Code on GitHub
        

        Sponsor on Open Collective
      


      

        {(lastUpdatedAt || lastUpdatedBy) && (
          
        )}
      

    

  );
}

export default function DocItemFooter(props) {
  const {content: DocContent} = props;
  const {metadata} = DocContent;
  const {editUrl, lastUpdatedAt, formattedLastUpdatedAt, lastUpdatedBy, tags} =
    metadata;
  const canDisplayTagsRow = tags.length > 0;
  const canDisplayEditMetaRow = !!(editUrl || lastUpdatedAt || lastUpdatedBy);
  const canDisplayFooter = canDisplayTagsRow || canDisplayEditMetaRow;

  if (!canDisplayFooter) {
    return null;
  }

  return (
    

      {canDisplayTagsRow && }
      {canDisplayEditMetaRow && (
        
      )}
    

  );
}


================================================
FILE: demo-docs-website/src/theme/DocItemFooter/styles.module.css
================================================
/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.lastUpdated {
  margin-top: 0.2rem;
  font-style: italic;
  font-size: smaller;
}

@media (min-width: 997px) {
  .lastUpdated {
    text-align: right;
  }
}


================================================
FILE: demo-docs-website/src/theme/DocPage/index.js
================================================
/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */
import React, {useState, useCallback} from 'react';
import {MDXProvider} from '@mdx-js/react';
import renderRoutes from '@docusaurus/renderRoutes';
import Layout from '@theme/Layout';
import DocSidebar from '@theme/DocSidebar';
import MDXComponents from '@theme/MDXComponents';
import NotFound from '@theme/NotFound';
import IconArrow from '@theme/IconArrow';
import {matchPath} from '@docusaurus/router';
import {translate} from '@docusaurus/Translate';
import clsx from 'clsx';
import styles from './styles.module.css';
import {
  ThemeClassNames,
  docVersionSearchTag,
  DocsSidebarProvider,
  useDocsSidebar,
  DocsVersionProvider,
} from '@docusaurus/theme-common';
import Head from '@docusaurus/Head';

function DocPageContent({
  currentDocRoute,
  versionMetadata,
  children,
  sidebarName,
}) {
  const sidebar = useDocsSidebar();
  const {pluginId, version} = versionMetadata;
  const [hiddenSidebarContainer, setHiddenSidebarContainer] = useState(false);
  const [hiddenSidebar, setHiddenSidebar] = useState(false);
  const toggleSidebar = useCallback(() => {
    if (hiddenSidebar) {
      setHiddenSidebar(false);
    }

    setHiddenSidebarContainer((value) => !value);
  }, [hiddenSidebar]);
  return (
    
        {sidebar && (
          
        )}
        

            {children}
        

    
  );
}

export default function DocPage(props) {
  const {
    route: {routes: docRoutes},
    versionMetadata,
    location,
  } = props;
  const currentDocRoute = docRoutes.find((docRoute) =>
    matchPath(location.pathname, docRoute),
  );

  if (!currentDocRoute) {
    return ;
  } // For now, the sidebarName is added as route config: not ideal!

  const sidebarName = currentDocRoute.sidebar;
  const sidebar = sidebarName
    ? versionMetadata.docsSidebars[sidebarName]
    : null;
  return (
    <>
      
        {/* TODO we should add a core addRoute({htmlClassName}) action */}
        
      
      
        
          
            {renderRoutes(docRoutes, {
              versionMetadata,
            })}
          
        
      
    
  );
}


================================================
FILE: demo-docs-website/src/theme/DocPage/styles.module.css
================================================
/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

================================================
FILE: demo-docs-website/src/theme/DocSidebar/index.js
================================================
/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */
import React, {useState} from 'react';
import clsx from 'clsx';
import {useLocation} from '@docusaurus/router';


import {
  useThemeConfig,
  useAnnouncementBar,
  MobileSecondaryMenuFiller,
  ThemeClassNames,
  useScrollPosition,
  useWindowSize,
} from '@docusaurus/theme-common';

import styles from './styles.module.css';

function useShowAnnouncementBar() {
  const {isActive} = useAnnouncementBar();
  const [showAnnouncementBar, setShowAnnouncementBar] = useState(isActive);
  useScrollPosition(
    ({scrollY}) => {
      if (isActive) {
        setShowAnnouncementBar(scrollY === 0);
      }
    },
    [isActive],
  );
  return isActive && showAnnouncementBar;
}

function SimpleSidebarCategory(props) {
  return (
    
{props.label}

  );
}
function SimpleSidebarItem(props) {
  const location = useLocation();
  const isActive = (props.href.toLowerCase() === location.pathname.toLowerCase());
    return (
    {props.label}
  );
}
function SimpleSidebar(props) {
  const sidebarItems = [];

  let index = 0;
  props.sidebar.forEach((sidebarItem) => {
    if (sidebarItem.type === 'category') {
      sidebarItems.push();
      index++;

      sidebarItem.items.forEach((subItem) => {
        sidebarItems.push();
        index++;
      });
    } else if (sidebarItem.type === 'link') {
      sidebarItems.push();
      index++;
    }
  });

  return (
    <>
      {sidebarItems}
    
  );
}

function DocSidebarDesktop({path, sidebar, onCollapse, isHidden}) {
  const showAnnouncementBar = useShowAnnouncementBar();
  const {
    navbar: {hideOnScroll},
    hideableSidebar,
  } = useThemeConfig();
  
  return (
    

      
    

  );
} // eslint-disable-next-line react/function-component-definition

const DocSidebarMobileSecondaryMenu = ({toggleSidebar, sidebar, path}) => (
  

    
  

);

function DocSidebarMobile(props) {
  return (
    
  );
}

const DocSidebarDesktopMemo = React.memo(DocSidebarDesktop);
const DocSidebarMobileMemo = React.memo(DocSidebarMobile);
export default function DocSidebar(props) {
  const windowSize = useWindowSize(); // Desktop sidebar visible on hydration: need SSR rendering

  const shouldRenderSidebarDesktop =
    windowSize === 'desktop' || windowSize === 'ssr'; // Mobile sidebar not visible on hydration: can avoid SSR rendering

  const shouldRenderSidebarMobile = windowSize === 'mobile';
  return (
    <>
      {shouldRenderSidebarDesktop && }
      {shouldRenderSidebarMobile && }
    
  );
}


================================================
FILE: demo-docs-website/src/theme/DocSidebar/is-same-path.ts
================================================
/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

// Compare the 2 paths, case insensitive and ignoring trailing slash
export const isSamePath = (
  path1: string | undefined,
  path2: string | undefined,
): boolean => {
  const normalize = (pathname: string | undefined) =>
    (!pathname || pathname?.endsWith('/')
      ? pathname
      : `${pathname}/`
    )?.toLowerCase();
  return normalize(path1) === normalize(path2);
};

================================================
FILE: demo-docs-website/src/theme/DocSidebar/styles.module.css
================================================
/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

:root {
  --collapse-button-bg-color-dark: #2e333a;
}

@media (min-width: 997px) {
  .sidebar {
    display: flex;
    flex-direction: column;
    max-height: 100vh;
    height: 100%;
    position: sticky;
    top: 0;
    padding-top: var(--ifm-navbar-height);
    transition: opacity 50ms ease;
  }

  .sidebarWithHideableNavbar {
    padding-top: 0;
  }

  .sidebarHidden {
    opacity: 0;
    height: 0;
    overflow: hidden;
    visibility: hidden;
  }

  .sidebarLogo {
    display: flex !important;
    align-items: center;
    margin: 0 var(--ifm-navbar-padding-horizontal);
    min-height: var(--ifm-navbar-height);
    max-height: var(--ifm-navbar-height);
    color: inherit !important;
    text-decoration: none !important;
  }

  .sidebarLogo img {
    margin-right: 0.5rem;
    height: 2rem;
  }

  .menu {
    flex-grow: 1;
    padding: 0.5rem;
  }

  .menuWithAnnouncementBar {
    margin-bottom: var(--docusaurus-announcement-bar-height);
  }

  .collapseSidebarButton {
    display: block !important;
    background-color: var(--ifm-button-background-color);
    height: 40px;
    position: sticky;
    bottom: 0;
    border-radius: 0;
    border: 1px solid var(--ifm-toc-border-color);
  }

  .collapseSidebarButtonIcon {
    transform: rotate(180deg);
    margin-top: 4px;
  }

  [dir='rtl'] .collapseSidebarButtonIcon {
    transform: rotate(0);
  }

  [data-theme='dark'] .collapseSidebarButton {
    background-color: var(--collapse-button-bg-color-dark);
  }

  [data-theme='dark'] .collapseSidebarButton:hover,
  [data-theme='dark'] .collapseSidebarButton:focus {
    background-color: var(--ifm-color-emphasis-200);
  }
}

.sidebarLogo,
.collapseSidebarButton {
  display: none;
}

.sidebarMenuIcon {
  vertical-align: middle;
}

.sidebarMenuCloseIcon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 24px;
  font-size: 1.5rem;
  font-weight: var(--ifm-font-weight-bold);
  line-height: 0.9;
  width: 24px;
}


================================================
FILE: demo-docs-website/src/theme/EditThisPage/index.js
================================================
/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */
import React from 'react';
import {ThemeClassNames} from '@docusaurus/theme-common';
export default function EditThisPage({editUrl}) {
  return (
    <>Found a typo? Edit this page
  );
}


================================================
FILE: demo-docs-website/src/theme/Footer/index.js
================================================
/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */
import React from 'react';
import clsx from 'clsx';
import Link from '@docusaurus/Link';
import {useThemeConfig} from '@docusaurus/theme-common';
import useBaseUrl from '@docusaurus/useBaseUrl';
import styles from './styles.module.css';
import ThemedImage from '@theme/ThemedImage';

function FooterLogo({sources, alt, width, height}) {
  return (
    
  );
}

function Footer() {
  const {footer} = useThemeConfig();
  const {copyright, links = [], logo = {}} = footer || {};
  const sources = {
    light: useBaseUrl(logo.src),
    dark: useBaseUrl(logo.srcDark || logo.src),
  };

  if (!footer) {
    return null;
  }

  return (
    

      

        {(logo || copyright) && (
          

            {copyright ? (
              

            ) : null}
          

        )}
      

    

  );
}

export default React.memo(Footer);


================================================
FILE: demo-docs-website/src/theme/Footer/styles.module.css
================================================
/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.footerLogoLink {
  opacity: 0.5;
  transition: opacity var(--ifm-transition-fast)
    var(--ifm-transition-timing-default);
}

.footerLogoLink:hover {
  opacity: 1;
}


================================================
FILE: demo-docs-website/src/theme/Logo/index.js
================================================
/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */
import React from 'react';
import Link from '@docusaurus/Link';
import ThemedImage from '@theme/ThemedImage';
import useBaseUrl from '@docusaurus/useBaseUrl';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import {useThemeConfig} from '@docusaurus/theme-common';
import packageInfo from '../../../../package.json';

export default function Logo(props) {
  const {
    siteConfig: {title},
  } = useDocusaurusContext();
  const {
    navbar: {
      title: navbarTitle,
      logo = {
        src: '',
      },
    },
  } = useThemeConfig();
  const {imageClassName, titleClassName, ...propsRest} = props;
  const logoLink = useBaseUrl(logo.href || '/');
  const sources = {
    light: useBaseUrl(logo.src),
    dark: useBaseUrl(logo.srcDark || logo.src),
  };
  const themedImage = (
    
  );
  return (
    
      {logo.src &&
        (imageClassName ? (
          
{themedImage}

        ) : (
          themedImage
        ))}
      {navbarTitle != null && {navbarTitle}}
      {packageInfo.version}
    
  );
}


================================================
FILE: demo-docs-website/src/theme/MDXComponents/index.js
================================================
/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */
import React, {isValidElement} from 'react';
import Head from '@docusaurus/Head';
import Link from '@docusaurus/Link';
import CodeBlock from '@theme/CodeBlock';
import Heading from '@theme/Heading';
import Details from '@theme/Details';
import PswpCodePreview from '@site/src/components/PswpCodePreview';

import './styles.css'; // MDX elements are wrapped through the MDX pragma. In some cases (notably usage
// with Head/Helmet) we need to unwrap those elements.

function unwrapMDXElement(element) {
  if (element?.props?.mdxType && element?.props?.originalType) {
    const {mdxType, originalType, ...newProps} = element.props;
    return React.createElement(element.props.originalType, newProps);
  }

  return element;
}

const MDXComponents = {
  head: (props) => {
    const unwrappedChildren = React.Children.map(props.children, (child) =>
      unwrapMDXElement(child),
    );
    return {unwrappedChildren};
  },
  code: (props) => {
    const inlineElements = [
      'a',
      'b',
      'big',
      'i',
      'span',
      'em',
      'strong',
      'sup',
      'sub',
      'small',
    ];
    const shouldBeInline = React.Children.toArray(props.children).every(
      (el) =>
        (typeof el === 'string' && !el.includes('\n')) ||
        (React.isValidElement(el) && inlineElements.includes(el.props.mdxType)),
    );
    return shouldBeInline ?  : ;
  },
  a: (props) => ,
  pre: (props) => (
    
  ),
  details: (props) => {
    const items = React.Children.toArray(props.children); // Split summary item from the rest to pass it as a separate prop to the
    // Details theme component

    const summary = items.find((item) => item?.props?.mdxType === 'summary');
    const children = <>{items.filter((item) => item !== summary)};
    return (
      

        {children}
      

    );
  },
  h1: (props) => ,
  h2: (props) => ,
  h3: (props) => ,
  h4: (props) => ,
  h5: (props) => ,
  h6: (props) => ,
  PswpCodePreview: (props) => 
};
export default MDXComponents;


================================================
FILE: demo-docs-website/src/theme/MDXComponents/styles.css
================================================
/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

ul.contains-task-list {
  padding-left: 0;
  list-style: none;
}

img {
  height: auto;
}


================================================
FILE: demo-docs-website/src/theme/Navbar/github-stars.js
================================================
import React from 'react'

import repoData from '../../../repo-data.json';

export default function ReactGithubStars() {
  return (
    
      Github
      
        
        {
          (repoData 
            && repoData.stargazers_count
            && parseInt(repoData.stargazers_count, 10) > 100) ? parseInt(repoData.stargazers_count, 10).toLocaleString() : ''
        }
      
    
  )
}


================================================
FILE: demo-docs-website/src/theme/Navbar/index.js
================================================
/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */
import React, { useCallback, useState, useEffect } from "react";
import clsx from "clsx";
import Translate from "@docusaurus/Translate";
import ColorModeToggle from "@theme/ColorModeToggle";
import {
  useThemeConfig,
  useMobileSecondaryMenuRenderer,
  usePrevious,
  useHistoryPopHandler,
  useHideableNavbar,
  useLockBodyScroll,
  useWindowSize,
  useColorMode,
} from "@docusaurus/theme-common";
import { useActivePlugin } from "@docusaurus/plugin-content-docs/client";
import NavbarItem from "@theme/NavbarItem";
import Logo from "@theme/Logo";
import IconMenu from "@theme/IconMenu";
import IconClose from "@theme/IconClose";
import styles from "./styles.module.css"; // retrocompatible with v1
import ReactGithubStars from "./github-stars";

import { DocSearch } from "@docsearch/react";

import "@docsearch/css";

const DefaultNavItemPosition = "right";

function useNavbarItems() {
  // TODO temporary casting until ThemeConfig type is improved
  return useThemeConfig().navbar.items;
} // If split links by left/right
// if position is unspecified, fallback to right (as v1)

function splitNavItemsByPosition(items) {
  const leftItems = items.filter(
    (item) => (item.position ?? DefaultNavItemPosition) === "left"
  );
  const rightItems = items.filter(
    (item) => (item.position ?? DefaultNavItemPosition) === "right"
  );
  return {
    leftItems,
    rightItems,
  };
}

function useMobileSidebar() {
  const windowSize = useWindowSize(); // Mobile sidebar not visible on hydration: can avoid SSR rendering

  const shouldRender = windowSize === "mobile"; // || windowSize === 'ssr';

  const [shown, setShown] = useState(false); // Close mobile sidebar on navigation pop
  // Most likely firing when using the Android back button (but not only)

  useHistoryPopHandler(() => {
    if (shown) {
      setShown(false); // Should we prevent the navigation here?
      // See https://github.com/facebook/docusaurus/pull/5462#issuecomment-911699846

      return false; // prevent pop navigation
    }

    return undefined;
  });
  const toggle = useCallback(() => {
    setShown((s) => !s);
  }, []);
  useEffect(() => {
    if (windowSize === "desktop") {
      setShown(false);
    }
  }, [windowSize]);
  return {
    shouldRender,
    toggle,
    shown,
  };
}

function useColorModeToggle() {
  const {
    colorMode: { disableSwitch },
  } = useThemeConfig();
  const { isDarkTheme, setLightTheme, setDarkTheme } = useColorMode();
  const toggle = useCallback(
    (e) => (e.target.checked ? setDarkTheme() : setLightTheme()),
    [setLightTheme, setDarkTheme]
  );
  return {
    isDarkTheme,
    toggle,
    disabled: disableSwitch,
  };
}

const TwitterLink = () => {
  return (
    
      Twitter
    
  );
};

function useSecondaryMenu({ sidebarShown, toggleSidebar }) {
  const content = useMobileSecondaryMenuRenderer()?.({
    toggleSidebar,
  });
  const previousContent = usePrevious(content);
  const [shown, setShown] = useState(
    () =>
      // /!\ content is set with useEffect,
      // so it's not available on mount anyway
      // "return !!content" => always returns false
      false
  ); // When content is become available for the first time (set in useEffect)
  // we set this content to be shown!

  useEffect(() => {
    const contentBecameAvailable = content && !previousContent;

    if (contentBecameAvailable) {
      setShown(true);
    }
  }, [content, previousContent]);
  const hasContent = !!content; // On sidebar close, secondary menu is set to be shown on next re-opening
  // (if any secondary menu content available)

  useEffect(() => {
    if (!hasContent) {
      setShown(false);
      return;
    }

    if (!sidebarShown) {
      setShown(true);
    }
  }, [sidebarShown, hasContent]);
  const hide = useCallback(() => {
    setShown(false);
  }, []);
  return {
    shown,
    hide,
    content,
  };
}

function NavbarMobileSidebar({ sidebarShown, toggleSidebar }) {
  useLockBodyScroll(sidebarShown);
  const items = useNavbarItems();
  const colorModeToggle = useColorModeToggle();
  const secondaryMenu = useSecondaryMenu({
    sidebarShown,
    toggleSidebar,
  });
  return (
    

      

        
        {!colorModeToggle.disabled && (
          
        )}
        
      


      

        

          
    
            {items.map((item, i) => (
              
            ))}
          

        


        

          {items.length > 0 && (
            
          )}
          {secondaryMenu.content}
        

      

    

  );
}

export default function Navbar() {
  const {
    navbar: { hideOnScroll, style },
  } = useThemeConfig();
  const mobileSidebar = useMobileSidebar();
  const colorModeToggle = useColorModeToggle();
  const activeDocPlugin = useActivePlugin();
  const { navbarRef, isNavbarVisible } = useHideableNavbar(hideOnScroll);
  const items = useNavbarItems();
  const { leftItems, rightItems } = splitNavItemsByPosition(items);
  return (
    
  );
}


================================================
FILE: demo-docs-website/src/theme/Navbar/styles.module.css
================================================
/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

/*
Hide toggle in small viewports
 */
@media (max-width: 996px) {
  .toggle {
    display: none;
  }
}

.navbarHideable {
  transition: transform var(--ifm-transition-fast) ease;
}

.navbarHidden {
  transform: translate3d(0, calc(-100% - 2px), 0);
}

.navbarSidebarToggle {
  margin-right: 1rem;
}


================================================
FILE: demo-docs-website/static/.nojekyll
================================================


================================================
FILE: demo-docs-website/static/photoswipe/photoswipe-lightbox.esm.js
================================================
/*!
  * PhotoSwipe Lightbox 5.4.4 - https://photoswipe.com
  * (c) 2024 Dmytro Semenov
  */
/** @typedef {import('../photoswipe.js').Point} Point */

/**
 * @template {keyof HTMLElementTagNameMap} T
 * @param {string} className
 * @param {T} tagName
 * @param {Node} [appendToEl]
 * @returns {HTMLElementTagNameMap[T]}
 */
function createElement(className, tagName, appendToEl) {
  const el = document.createElement(tagName);

  if (className) {
    el.className = className;
  }

  if (appendToEl) {
    appendToEl.appendChild(el);
  }

  return el;
}
/**
 * Get transform string
 *
 * @param {number} x
 * @param {number} [y]
 * @param {number} [scale]
 * @returns {string}
 */

function toTransformString(x, y, scale) {
  let propValue = `translate3d(${x}px,${y || 0}px,0)`;

  if (scale !== undefined) {
    propValue += ` scale3d(${scale},${scale},1)`;
  }

  return propValue;
}
/**
 * Apply width and height CSS properties to element
 *
 * @param {HTMLElement} el
 * @param {string | number} w
 * @param {string | number} h
 */

function setWidthHeight(el, w, h) {
  el.style.width = typeof w === 'number' ? `${w}px` : w;
  el.style.height = typeof h === 'number' ? `${h}px` : h;
}
/** @typedef {LOAD_STATE[keyof LOAD_STATE]} LoadState */

/** @type {{ IDLE: 'idle'; LOADING: 'loading'; LOADED: 'loaded'; ERROR: 'error' }} */

const LOAD_STATE = {
  IDLE: 'idle',
  LOADING: 'loading',
  LOADED: 'loaded',
  ERROR: 'error'
};
/**
 * Check if click or keydown event was dispatched
 * with a special key or via mouse wheel.
 *
 * @param {MouseEvent | KeyboardEvent} e
 * @returns {boolean}
 */

function specialKeyUsed(e) {
  return 'button' in e && e.button === 1 || e.ctrlKey || e.metaKey || e.altKey || e.shiftKey;
}
/**
 * Parse `gallery` or `children` options.
 *
 * @param {import('../photoswipe.js').ElementProvider} [option]
 * @param {string} [legacySelector]
 * @param {HTMLElement | Document} [parent]
 * @returns HTMLElement[]
 */

function getElementsFromOption(option, legacySelector, parent = document) {
  /** @type {HTMLElement[]} */
  let elements = [];

  if (option instanceof Element) {
    elements = [option];
  } else if (option instanceof NodeList || Array.isArray(option)) {
    elements = Array.from(option);
  } else {
    const selector = typeof option === 'string' ? option : legacySelector;

    if (selector) {
      elements = Array.from(parent.querySelectorAll(selector));
    }
  }

  return elements;
}
/**
 * Check if variable is PhotoSwipe class
 *
 * @param {any} fn
 * @returns {boolean}
 */

function isPswpClass(fn) {
  return typeof fn === 'function' && fn.prototype && fn.prototype.goTo;
}
/**
 * Check if browser is Safari
 *
 * @returns {boolean}
 */

function isSafari() {
  return !!(navigator.vendor && navigator.vendor.match(/apple/i));
}

/** @typedef {import('../lightbox/lightbox.js').default} PhotoSwipeLightbox */

/** @typedef {import('../photoswipe.js').default} PhotoSwipe */

/** @typedef {import('../photoswipe.js').PhotoSwipeOptions} PhotoSwipeOptions */

/** @typedef {import('../photoswipe.js').DataSource} DataSource */

/** @typedef {import('../ui/ui-element.js').UIElementData} UIElementData */

/** @typedef {import('../slide/content.js').default} ContentDefault */

/** @typedef {import('../slide/slide.js').default} Slide */

/** @typedef {import('../slide/slide.js').SlideData} SlideData */

/** @typedef {import('../slide/zoom-level.js').default} ZoomLevel */

/** @typedef {import('../slide/get-thumb-bounds.js').Bounds} Bounds */

/**
 * Allow adding an arbitrary props to the Content
 * https://photoswipe.com/custom-content/#using-webp-image-format
 * @typedef {ContentDefault & Record} Content
 */

/** @typedef {{ x?: number; y?: number }} Point */

/**
 * @typedef {Object} PhotoSwipeEventsMap https://photoswipe.com/events/
 *
 *
 * https://photoswipe.com/adding-ui-elements/
 *
 * @prop {undefined} uiRegister
 * @prop {{ data: UIElementData }} uiElementCreate
 *
 *
 * https://photoswipe.com/events/#initialization-events
 *
 * @prop {undefined} beforeOpen
 * @prop {undefined} firstUpdate
 * @prop {undefined} initialLayout
 * @prop {undefined} change
 * @prop {undefined} afterInit
 * @prop {undefined} bindEvents
 *
 *
 * https://photoswipe.com/events/#opening-or-closing-transition-events
 *
 * @prop {undefined} openingAnimationStart
 * @prop {undefined} openingAnimationEnd
 * @prop {undefined} closingAnimationStart
 * @prop {undefined} closingAnimationEnd
 *
 *
 * https://photoswipe.com/events/#closing-events
 *
 * @prop {undefined} close
 * @prop {undefined} destroy
 *
 *
 * https://photoswipe.com/events/#pointer-and-gesture-events
 *
 * @prop {{ originalEvent: PointerEvent }} pointerDown
 * @prop {{ originalEvent: PointerEvent }} pointerMove
 * @prop {{ originalEvent: PointerEvent }} pointerUp
 * @prop {{ bgOpacity: number }} pinchClose can be default prevented
 * @prop {{ panY: number }} verticalDrag can be default prevented
 *
 *
 * https://photoswipe.com/events/#slide-content-events
 *
 * @prop {{ content: Content }} contentInit
 * @prop {{ content: Content; isLazy: boolean }} contentLoad can be default prevented
 * @prop {{ content: Content; isLazy: boolean }} contentLoadImage can be default prevented
 * @prop {{ content: Content; slide: Slide; isError?: boolean }} loadComplete
 * @prop {{ content: Content; slide: Slide }} loadError
 * @prop {{ content: Content; width: number; height: number }} contentResize can be default prevented
 * @prop {{ content: Content; width: number; height: number; slide: Slide }} imageSizeChange
 * @prop {{ content: Content }} contentLazyLoad can be default prevented
 * @prop {{ content: Content }} contentAppend can be default prevented
 * @prop {{ content: Content }} contentActivate can be default prevented
 * @prop {{ content: Content }} contentDeactivate can be default prevented
 * @prop {{ content: Content }} contentRemove can be default prevented
 * @prop {{ content: Content }} contentDestroy can be default prevented
 *
 *
 * undocumented
 *
 * @prop {{ point: Point; originalEvent: PointerEvent }} imageClickAction can be default prevented
 * @prop {{ point: Point; originalEvent: PointerEvent }} bgClickAction can be default prevented
 * @prop {{ point: Point; originalEvent: PointerEvent }} tapAction can be default prevented
 * @prop {{ point: Point; originalEvent: PointerEvent }} doubleTapAction can be default prevented
 *
 * @prop {{ originalEvent: KeyboardEvent }} keydown can be default prevented
 * @prop {{ x: number; dragging: boolean }} moveMainScroll
 * @prop {{ slide: Slide }} firstZoomPan
 * @prop {{ slide: Slide | undefined, data: SlideData, index: number }} gettingData
 * @prop {undefined} beforeResize
 * @prop {undefined} resize
 * @prop {undefined} viewportSize
 * @prop {undefined} updateScrollOffset
 * @prop {{ slide: Slide }} slideInit
 * @prop {{ slide: Slide }} afterSetContent
 * @prop {{ slide: Slide }} slideLoad
 * @prop {{ slide: Slide }} appendHeavy can be default prevented
 * @prop {{ slide: Slide }} appendHeavyContent
 * @prop {{ slide: Slide }} slideActivate
 * @prop {{ slide: Slide }} slideDeactivate
 * @prop {{ slide: Slide }} slideDestroy
 * @prop {{ destZoomLevel: number, centerPoint: Point | undefined, transitionDuration: number | false | undefined }} beforeZoomTo
 * @prop {{ slide: Slide }} zoomPanUpdate
 * @prop {{ slide: Slide }} initialZoomPan
 * @prop {{ slide: Slide }} calcSlideSize
 * @prop {undefined} resolutionChanged
 * @prop {{ originalEvent: WheelEvent }} wheel can be default prevented
 * @prop {{ content: Content }} contentAppendImage can be default prevented
 * @prop {{ index: number; itemData: SlideData }} lazyLoadSlide can be default prevented
 * @prop {undefined} lazyLoad
 * @prop {{ slide: Slide }} calcBounds
 * @prop {{ zoomLevels: ZoomLevel, slideData: SlideData }} zoomLevelsUpdate
 *
 *
 * legacy
 *
 * @prop {undefined} init
 * @prop {undefined} initialZoomIn
 * @prop {undefined} initialZoomOut
 * @prop {undefined} initialZoomInEnd
 * @prop {undefined} initialZoomOutEnd
 * @prop {{ dataSource: DataSource | undefined, numItems: number }} numItems
 * @prop {{ itemData: SlideData; index: number }} itemData
 * @prop {{ index: number, itemData: SlideData, instance: PhotoSwipe }} thumbBounds
 */

/**
 * @typedef {Object} PhotoSwipeFiltersMap https://photoswipe.com/filters/
 *
 * @prop {(numItems: number, dataSource: DataSource | undefined) => number} numItems
 * Modify the total amount of slides. Example on Data sources page.
 * https://photoswipe.com/filters/#numitems
 *
 * @prop {(itemData: SlideData, index: number) => SlideData} itemData
 * Modify slide item data. Example on Data sources page.
 * https://photoswipe.com/filters/#itemdata
 *
 * @prop {(itemData: SlideData, element: HTMLElement, linkEl: HTMLAnchorElement) => SlideData} domItemData
 * Modify item data when it's parsed from DOM element. Example on Data sources page.
 * https://photoswipe.com/filters/#domitemdata
 *
 * @prop {(clickedIndex: number, e: MouseEvent, instance: PhotoSwipeLightbox) => number} clickedIndex
 * Modify clicked gallery item index.
 * https://photoswipe.com/filters/#clickedindex
 *
 * @prop {(placeholderSrc: string | false, content: Content) => string | false} placeholderSrc
 * Modify placeholder image source.
 * https://photoswipe.com/filters/#placeholdersrc
 *
 * @prop {(isContentLoading: boolean, content: Content) => boolean} isContentLoading
 * Modify if the content is currently loading.
 * https://photoswipe.com/filters/#iscontentloading
 *
 * @prop {(isContentZoomable: boolean, content: Content) => boolean} isContentZoomable
 * Modify if the content can be zoomed.
 * https://photoswipe.com/filters/#iscontentzoomable
 *
 * @prop {(useContentPlaceholder: boolean, content: Content) => boolean} useContentPlaceholder
 * Modify if the placeholder should be used for the content.
 * https://photoswipe.com/filters/#usecontentplaceholder
 *
 * @prop {(isKeepingPlaceholder: boolean, content: Content) => boolean} isKeepingPlaceholder
 * Modify if the placeholder should be kept after the content is loaded.
 * https://photoswipe.com/filters/#iskeepingplaceholder
 *
 *
 * @prop {(contentErrorElement: HTMLElement, content: Content) => HTMLElement} contentErrorElement
 * Modify an element when the content has error state (for example, if image cannot be loaded).
 * https://photoswipe.com/filters/#contenterrorelement
 *
 * @prop {(element: HTMLElement, data: UIElementData) => HTMLElement} uiElement
 * Modify a UI element that's being created.
 * https://photoswipe.com/filters/#uielement
 *
 * @prop {(thumbnail: HTMLElement | null | undefined, itemData: SlideData, index: number) => HTMLElement} thumbEl
 * Modify the thumbnail element from which opening zoom animation starts or ends.
 * https://photoswipe.com/filters/#thumbel
 *
 * @prop {(thumbBounds: Bounds | undefined, itemData: SlideData, index: number) => Bounds} thumbBounds
 * Modify the thumbnail bounds from which opening zoom animation starts or ends.
 * https://photoswipe.com/filters/#thumbbounds
 *
 * @prop {(srcsetSizesWidth: number, content: Content) => number} srcsetSizesWidth
 *
 * @prop {(preventPointerEvent: boolean, event: PointerEvent, pointerType: string) => boolean} preventPointerEvent
 *
 */

/**
 * @template {keyof PhotoSwipeFiltersMap} T
 * @typedef {{ fn: PhotoSwipeFiltersMap[T], priority: number }} Filter
 */

/**
 * @template {keyof PhotoSwipeEventsMap} T
 * @typedef {PhotoSwipeEventsMap[T] extends undefined ? PhotoSwipeEvent : PhotoSwipeEvent & PhotoSwipeEventsMap[T]} AugmentedEvent
 */

/**
 * @template {keyof PhotoSwipeEventsMap} T
 * @typedef {(event: AugmentedEvent) => void} EventCallback
 */

/**
 * Base PhotoSwipe event object
 *
 * @template {keyof PhotoSwipeEventsMap} T
 */
class PhotoSwipeEvent {
  /**
   * @param {T} type
   * @param {PhotoSwipeEventsMap[T]} [details]
   */
  constructor(type, details) {
    this.type = type;
    this.defaultPrevented = false;

    if (details) {
      Object.assign(this, details);
    }
  }

  preventDefault() {
    this.defaultPrevented = true;
  }

}
/**
 * PhotoSwipe base class that can listen and dispatch for events.
 * Shared by PhotoSwipe Core and PhotoSwipe Lightbox, extended by base.js
 */


class Eventable {
  constructor() {
    /**
     * @type {{ [T in keyof PhotoSwipeEventsMap]?: ((event: AugmentedEvent) => void)[] }}
     */
    this._listeners = {};
    /**
     * @type {{ [T in keyof PhotoSwipeFiltersMap]?: Filter[] }}
     */

    this._filters = {};
    /** @type {PhotoSwipe | undefined} */

    this.pswp = undefined;
    /** @type {PhotoSwipeOptions | undefined} */

    this.options = undefined;
  }
  /**
   * @template {keyof PhotoSwipeFiltersMap} T
   * @param {T} name
   * @param {PhotoSwipeFiltersMap[T]} fn
   * @param {number} priority
   */


  addFilter(name, fn, priority = 100) {
    var _this$_filters$name, _this$_filters$name2, _this$pswp;

    if (!this._filters[name]) {
      this._filters[name] = [];
    }

    (_this$_filters$name = this._filters[name]) === null || _this$_filters$name === void 0 || _this$_filters$name.push({
      fn,
      priority
    });
    (_this$_filters$name2 = this._filters[name]) === null || _this$_filters$name2 === void 0 || _this$_filters$name2.sort((f1, f2) => f1.priority - f2.priority);
    (_this$pswp = this.pswp) === null || _this$pswp === void 0 || _this$pswp.addFilter(name, fn, priority);
  }
  /**
   * @template {keyof PhotoSwipeFiltersMap} T
   * @param {T} name
   * @param {PhotoSwipeFiltersMap[T]} fn
   */


  removeFilter(name, fn) {
    if (this._filters[name]) {
      // @ts-expect-error
      this._filters[name] = this._filters[name].filter(filter => filter.fn !== fn);
    }

    if (this.pswp) {
      this.pswp.removeFilter(name, fn);
    }
  }
  /**
   * @template {keyof PhotoSwipeFiltersMap} T
   * @param {T} name
   * @param {Parameters} args
   * @returns {Parameters[0]}
   */


  applyFilters(name, ...args) {
    var _this$_filters$name3;

    (_this$_filters$name3 = this._filters[name]) === null || _this$_filters$name3 === void 0 || _this$_filters$name3.forEach(filter => {
      // @ts-expect-error
      args[0] = filter.fn.apply(this, args);
    });
    return args[0];
  }
  /**
   * @template {keyof PhotoSwipeEventsMap} T
   * @param {T} name
   * @param {EventCallback} fn
   */


  on(name, fn) {
    var _this$_listeners$name, _this$pswp2;

    if (!this._listeners[name]) {
      this._listeners[name] = [];
    }

    (_this$_listeners$name = this._listeners[name]) === null || _this$_listeners$name === void 0 || _this$_listeners$name.push(fn); // When binding events to lightbox,
    // also bind events to PhotoSwipe Core,
    // if it's open.

    (_this$pswp2 = this.pswp) === null || _this$pswp2 === void 0 || _this$pswp2.on(name, fn);
  }
  /**
   * @template {keyof PhotoSwipeEventsMap} T
   * @param {T} name
   * @param {EventCallback} fn
   */


  off(name, fn) {
    var _this$pswp3;

    if (this._listeners[name]) {
      // @ts-expect-error
      this._listeners[name] = this._listeners[name].filter(listener => fn !== listener);
    }

    (_this$pswp3 = this.pswp) === null || _this$pswp3 === void 0 || _this$pswp3.off(name, fn);
  }
  /**
   * @template {keyof PhotoSwipeEventsMap} T
   * @param {T} name
   * @param {PhotoSwipeEventsMap[T]} [details]
   * @returns {AugmentedEvent}
   */


  dispatch(name, details) {
    var _this$_listeners$name2;

    if (this.pswp) {
      return this.pswp.dispatch(name, details);
    }

    const event =
    /** @type {AugmentedEvent} */
    new PhotoSwipeEvent(name, details);
    (_this$_listeners$name2 = this._listeners[name]) === null || _this$_listeners$name2 === void 0 || _this$_listeners$name2.forEach(listener => {
      listener.call(this, event);
    });
    return event;
  }

}

class Placeholder {
  /**
   * @param {string | false} imageSrc
   * @param {HTMLElement} container
   */
  constructor(imageSrc, container) {
    // Create placeholder
    // (stretched thumbnail or simple div behind the main image)

    /** @type {HTMLImageElement | HTMLDivElement | null} */
    this.element = createElement('pswp__img pswp__img--placeholder', imageSrc ? 'img' : 'div', container);

    if (imageSrc) {
      const imgEl =
      /** @type {HTMLImageElement} */
      this.element;
      imgEl.decoding = 'async';
      imgEl.alt = '';
      imgEl.src = imageSrc;
      imgEl.setAttribute('role', 'presentation');
    }

    this.element.setAttribute('aria-hidden', 'true');
  }
  /**
   * @param {number} width
   * @param {number} height
   */


  setDisplayedSize(width, height) {
    if (!this.element) {
      return;
    }

    if (this.element.tagName === 'IMG') {
      // Use transform scale() to modify img placeholder size
      // (instead of changing width/height directly).
      // This helps with performance, specifically in iOS15 Safari.
      setWidthHeight(this.element, 250, 'auto');
      this.element.style.transformOrigin = '0 0';
      this.element.style.transform = toTransformString(0, 0, width / 250);
    } else {
      setWidthHeight(this.element, width, height);
    }
  }

  destroy() {
    var _this$element;

    if ((_this$element = this.element) !== null && _this$element !== void 0 && _this$element.parentNode) {
      this.element.remove();
    }

    this.element = null;
  }

}

/** @typedef {import('./slide.js').default} Slide */

/** @typedef {import('./slide.js').SlideData} SlideData */

/** @typedef {import('../core/base.js').default} PhotoSwipeBase */

/** @typedef {import('../util/util.js').LoadState} LoadState */

class Content {
  /**
   * @param {SlideData} itemData Slide data
   * @param {PhotoSwipeBase} instance PhotoSwipe or PhotoSwipeLightbox instance
   * @param {number} index
   */
  constructor(itemData, instance, index) {
    this.instance = instance;
    this.data = itemData;
    this.index = index;
    /** @type {HTMLImageElement | HTMLDivElement | undefined} */

    this.element = undefined;
    /** @type {Placeholder | undefined} */

    this.placeholder = undefined;
    /** @type {Slide | undefined} */

    this.slide = undefined;
    this.displayedImageWidth = 0;
    this.displayedImageHeight = 0;
    this.width = Number(this.data.w) || Number(this.data.width) || 0;
    this.height = Number(this.data.h) || Number(this.data.height) || 0;
    this.isAttached = false;
    this.hasSlide = false;
    this.isDecoding = false;
    /** @type {LoadState} */

    this.state = LOAD_STATE.IDLE;

    if (this.data.type) {
      this.type = this.data.type;
    } else if (this.data.src) {
      this.type = 'image';
    } else {
      this.type = 'html';
    }

    this.instance.dispatch('contentInit', {
      content: this
    });
  }

  removePlaceholder() {
    if (this.placeholder && !this.keepPlaceholder()) {
      // With delay, as image might be loaded, but not rendered
      setTimeout(() => {
        if (this.placeholder) {
          this.placeholder.destroy();
          this.placeholder = undefined;
        }
      }, 1000);
    }
  }
  /**
   * Preload content
   *
   * @param {boolean} isLazy
   * @param {boolean} [reload]
   */


  load(isLazy, reload) {
    if (this.slide && this.usePlaceholder()) {
      if (!this.placeholder) {
        const placeholderSrc = this.instance.applyFilters('placeholderSrc', // use  image-based placeholder only for the first slide,
        // as rendering (even small stretched thumbnail) is an expensive operation
        this.data.msrc && this.slide.isFirstSlide ? this.data.msrc : false, this);
        this.placeholder = new Placeholder(placeholderSrc, this.slide.container);
      } else {
        const placeholderEl = this.placeholder.element; // Add placeholder to DOM if it was already created

        if (placeholderEl && !placeholderEl.parentElement) {
          this.slide.container.prepend(placeholderEl);
        }
      }
    }

    if (this.element && !reload) {
      return;
    }

    if (this.instance.dispatch('contentLoad', {
      content: this,
      isLazy
    }).defaultPrevented) {
      return;
    }

    if (this.isImageContent()) {
      this.element = createElement('pswp__img', 'img'); // Start loading only after width is defined, as sizes might depend on it.
      // Due to Safari feature, we must define sizes before srcset.

      if (this.displayedImageWidth) {
        this.loadImage(isLazy);
      }
    } else {
      this.element = createElement('pswp__content', 'div');
      this.element.innerHTML = this.data.html || '';
    }

    if (reload && this.slide) {
      this.slide.updateContentSize(true);
    }
  }
  /**
   * Preload image
   *
   * @param {boolean} isLazy
   */


  loadImage(isLazy) {
    var _this$data$src, _this$data$alt;

    if (!this.isImageContent() || !this.element || this.instance.dispatch('contentLoadImage', {
      content: this,
      isLazy
    }).defaultPrevented) {
      return;
    }

    const imageElement =
    /** @type HTMLImageElement */
    this.element;
    this.updateSrcsetSizes();

    if (this.data.srcset) {
      imageElement.srcset = this.data.srcset;
    }

    imageElement.src = (_this$data$src = this.data.src) !== null && _this$data$src !== void 0 ? _this$data$src : '';
    imageElement.alt = (_this$data$alt = this.data.alt) !== null && _this$data$alt !== void 0 ? _this$data$alt : '';
    this.state = LOAD_STATE.LOADING;

    if (imageElement.complete) {
      this.onLoaded();
    } else {
      imageElement.onload = () => {
        this.onLoaded();
      };

      imageElement.onerror = () => {
        this.onError();
      };
    }
  }
  /**
   * Assign slide to content
   *
   * @param {Slide} slide
   */


  setSlide(slide) {
    this.slide = slide;
    this.hasSlide = true;
    this.instance = slide.pswp; // todo: do we need to unset slide?
  }
  /**
   * Content load success handler
   */


  onLoaded() {
    this.state = LOAD_STATE.LOADED;

    if (this.slide && this.element) {
      this.instance.dispatch('loadComplete', {
        slide: this.slide,
        content: this
      }); // if content is reloaded

      if (this.slide.isActive && this.slide.heavyAppended && !this.element.parentNode) {
        this.append();
        this.slide.updateContentSize(true);
      }

      if (this.state === LOAD_STATE.LOADED || this.state === LOAD_STATE.ERROR) {
        this.removePlaceholder();
      }
    }
  }
  /**
   * Content load error handler
   */


  onError() {
    this.state = LOAD_STATE.ERROR;

    if (this.slide) {
      this.displayError();
      this.instance.dispatch('loadComplete', {
        slide: this.slide,
        isError: true,
        content: this
      });
      this.instance.dispatch('loadError', {
        slide: this.slide,
        content: this
      });
    }
  }
  /**
   * @returns {Boolean} If the content is currently loading
   */


  isLoading() {
    return this.instance.applyFilters('isContentLoading', this.state === LOAD_STATE.LOADING, this);
  }
  /**
   * @returns {Boolean} If the content is in error state
   */


  isError() {
    return this.state === LOAD_STATE.ERROR;
  }
  /**
   * @returns {boolean} If the content is image
   */


  isImageContent() {
    return this.type === 'image';
  }
  /**
   * Update content size
   *
   * @param {Number} width
   * @param {Number} height
   */


  setDisplayedSize(width, height) {
    if (!this.element) {
      return;
    }

    if (this.placeholder) {
      this.placeholder.setDisplayedSize(width, height);
    }

    if (this.instance.dispatch('contentResize', {
      content: this,
      width,
      height
    }).defaultPrevented) {
      return;
    }

    setWidthHeight(this.element, width, height);

    if (this.isImageContent() && !this.isError()) {
      const isInitialSizeUpdate = !this.displayedImageWidth && width;
      this.displayedImageWidth = width;
      this.displayedImageHeight = height;

      if (isInitialSizeUpdate) {
        this.loadImage(false);
      } else {
        this.updateSrcsetSizes();
      }

      if (this.slide) {
        this.instance.dispatch('imageSizeChange', {
          slide: this.slide,
          width,
          height,
          content: this
        });
      }
    }
  }
  /**
   * @returns {boolean} If the content can be zoomed
   */


  isZoomable() {
    return this.instance.applyFilters('isContentZoomable', this.isImageContent() && this.state !== LOAD_STATE.ERROR, this);
  }
  /**
   * Update image srcset sizes attribute based on width and height
   */


  updateSrcsetSizes() {
    // Handle srcset sizes attribute.
    //
    // Never lower quality, if it was increased previously.
    // Chrome does this automatically, Firefox and Safari do not,
    // so we store largest used size in dataset.
    if (!this.isImageContent() || !this.element || !this.data.srcset) {
      return;
    }

    const image =
    /** @type HTMLImageElement */
    this.element;
    const sizesWidth = this.instance.applyFilters('srcsetSizesWidth', this.displayedImageWidth, this);

    if (!image.dataset.largestUsedSize || sizesWidth > parseInt(image.dataset.largestUsedSize, 10)) {
      image.sizes = sizesWidth + 'px';
      image.dataset.largestUsedSize = String(sizesWidth);
    }
  }
  /**
   * @returns {boolean} If content should use a placeholder (from msrc by default)
   */


  usePlaceholder() {
    return this.instance.applyFilters('useContentPlaceholder', this.isImageContent(), this);
  }
  /**
   * Preload content with lazy-loading param
   */


  lazyLoad() {
    if (this.instance.dispatch('contentLazyLoad', {
      content: this
    }).defaultPrevented) {
      return;
    }

    this.load(true);
  }
  /**
   * @returns {boolean} If placeholder should be kept after content is loaded
   */


  keepPlaceholder() {
    return this.instance.applyFilters('isKeepingPlaceholder', this.isLoading(), this);
  }
  /**
   * Destroy the content
   */


  destroy() {
    this.hasSlide = false;
    this.slide = undefined;

    if (this.instance.dispatch('contentDestroy', {
      content: this
    }).defaultPrevented) {
      return;
    }

    this.remove();

    if (this.placeholder) {
      this.placeholder.destroy();
      this.placeholder = undefined;
    }

    if (this.isImageContent() && this.element) {
      this.element.onload = null;
      this.element.onerror = null;
      this.element = undefined;
    }
  }
  /**
   * Display error message
   */


  displayError() {
    if (this.slide) {
      var _this$instance$option, _this$instance$option2;

      let errorMsgEl = createElement('pswp__error-msg', 'div');
      errorMsgEl.innerText = (_this$instance$option = (_this$instance$option2 = this.instance.options) === null || _this$instance$option2 === void 0 ? void 0 : _this$instance$option2.errorMsg) !== null && _this$instance$option !== void 0 ? _this$instance$option : '';
      errorMsgEl =
      /** @type {HTMLDivElement} */
      this.instance.applyFilters('contentErrorElement', errorMsgEl, this);
      this.element = createElement('pswp__content pswp__error-msg-container', 'div');
      this.element.appendChild(errorMsgEl);
      this.slide.container.innerText = '';
      this.slide.container.appendChild(this.element);
      this.slide.updateContentSize(true);
      this.removePlaceholder();
    }
  }
  /**
   * Append the content
   */


  append() {
    if (this.isAttached || !this.element) {
      return;
    }

    this.isAttached = true;

    if (this.state === LOAD_STATE.ERROR) {
      this.displayError();
      return;
    }

    if (this.instance.dispatch('contentAppend', {
      content: this
    }).defaultPrevented) {
      return;
    }

    const supportsDecode = ('decode' in this.element);

    if (this.isImageContent()) {
      // Use decode() on nearby slides
      //
      // Nearby slide images are in DOM and not hidden via display:none.
      // However, they are placed offscreen (to the left and right side).
      //
      // Some browsers do not composite the image until it's actually visible,
      // using decode() helps.
      //
      // You might ask "why dont you just decode() and then append all images",
      // that's because I want to show image before it's fully loaded,
      // as browser can render parts of image while it is loading.
      // We do not do this in Safari due to partial loading bug.
      if (supportsDecode && this.slide && (!this.slide.isActive || isSafari())) {
        this.isDecoding = true; // purposefully using finally instead of then,
        // as if srcset sizes changes dynamically - it may cause decode error

        /** @type {HTMLImageElement} */

        this.element.decode().catch(() => {}).finally(() => {
          this.isDecoding = false;
          this.appendImage();
        });
      } else {
        this.appendImage();
      }
    } else if (this.slide && !this.element.parentNode) {
      this.slide.container.appendChild(this.element);
    }
  }
  /**
   * Activate the slide,
   * active slide is generally the current one,
   * meaning the user can see it.
   */


  activate() {
    if (this.instance.dispatch('contentActivate', {
      content: this
    }).defaultPrevented || !this.slide) {
      return;
    }

    if (this.isImageContent() && this.isDecoding && !isSafari()) {
      // add image to slide when it becomes active,
      // even if it's not finished decoding
      this.appendImage();
    } else if (this.isError()) {
      this.load(false, true); // try to reload
    }

    if (this.slide.holderElement) {
      this.slide.holderElement.setAttribute('aria-hidden', 'false');
    }
  }
  /**
   * Deactivate the content
   */


  deactivate() {
    this.instance.dispatch('contentDeactivate', {
      content: this
    });

    if (this.slide && this.slide.holderElement) {
      this.slide.holderElement.setAttribute('aria-hidden', 'true');
    }
  }
  /**
   * Remove the content from DOM
   */


  remove() {
    this.isAttached = false;

    if (this.instance.dispatch('contentRemove', {
      content: this
    }).defaultPrevented) {
      return;
    }

    if (this.element && this.element.parentNode) {
      this.element.remove();
    }

    if (this.placeholder && this.placeholder.element) {
      this.placeholder.element.remove();
    }
  }
  /**
   * Append the image content to slide container
   */


  appendImage() {
    if (!this.isAttached) {
      return;
    }

    if (this.instance.dispatch('contentAppendImage', {
      content: this
    }).defaultPrevented) {
      return;
    } // ensure that element exists and is not already appended


    if (this.slide && this.element && !this.element.parentNode) {
      this.slide.container.appendChild(this.element);
    }

    if (this.state === LOAD_STATE.LOADED || this.state === LOAD_STATE.ERROR) {
      this.removePlaceholder();
    }
  }

}

/** @typedef {import('../photoswipe.js').PhotoSwipeOptions} PhotoSwipeOptions */

/** @typedef {import('../core/base.js').default} PhotoSwipeBase */

/** @typedef {import('../photoswipe.js').Point} Point */

/** @typedef {import('../slide/slide.js').SlideData} SlideData */

/**
 * @param {PhotoSwipeOptions} options
 * @param {PhotoSwipeBase} pswp
 * @returns {Point}
 */
function getViewportSize(options, pswp) {
  if (options.getViewportSizeFn) {
    const newViewportSize = options.getViewportSizeFn(options, pswp);

    if (newViewportSize) {
      return newViewportSize;
    }
  }

  return {
    x: document.documentElement.clientWidth,
    // TODO: height on mobile is very incosistent due to toolbar
    // find a way to improve this
    //
    // document.documentElement.clientHeight - doesn't seem to work well
    y: window.innerHeight
  };
}
/**
 * Parses padding option.
 * Supported formats:
 *
 * // Object
 * padding: {
 *  top: 0,
 *  bottom: 0,
 *  left: 0,
 *  right: 0
 * }
 *
 * // A function that returns the object
 * paddingFn: (viewportSize, itemData, index) => {
 *  return {
 *    top: 0,
 *    bottom: 0,
 *    left: 0,
 *    right: 0
 *  };
 * }
 *
 * // Legacy variant
 * paddingLeft: 0,
 * paddingRight: 0,
 * paddingTop: 0,
 * paddingBottom: 0,
 *
 * @param {'left' | 'top' | 'bottom' | 'right'} prop
 * @param {PhotoSwipeOptions} options PhotoSwipe options
 * @param {Point} viewportSize PhotoSwipe viewport size, for example: { x:800, y:600 }
 * @param {SlideData} itemData Data about the slide
 * @param {number} index Slide index
 * @returns {number}
 */

function parsePaddingOption(prop, options, viewportSize, itemData, index) {
  let paddingValue = 0;

  if (options.paddingFn) {
    paddingValue = options.paddingFn(viewportSize, itemData, index)[prop];
  } else if (options.padding) {
    paddingValue = options.padding[prop];
  } else {
    const legacyPropName = 'padding' + prop[0].toUpperCase() + prop.slice(1); // @ts-expect-error

    if (options[legacyPropName]) {
      // @ts-expect-error
      paddingValue = options[legacyPropName];
    }
  }

  return Number(paddingValue) || 0;
}
/**
 * @param {PhotoSwipeOptions} options
 * @param {Point} viewportSize
 * @param {SlideData} itemData
 * @param {number} index
 * @returns {Point}
 */

function getPanAreaSize(options, viewportSize, itemData, index) {
  return {
    x: viewportSize.x - parsePaddingOption('left', options, viewportSize, itemData, index) - parsePaddingOption('right', options, viewportSize, itemData, index),
    y: viewportSize.y - parsePaddingOption('top', options, viewportSize, itemData, index) - parsePaddingOption('bottom', options, viewportSize, itemData, index)
  };
}

const MAX_IMAGE_WIDTH = 4000;
/** @typedef {import('../photoswipe.js').default} PhotoSwipe */

/** @typedef {import('../photoswipe.js').PhotoSwipeOptions} PhotoSwipeOptions */

/** @typedef {import('../photoswipe.js').Point} Point */

/** @typedef {import('../slide/slide.js').SlideData} SlideData */

/** @typedef {'fit' | 'fill' | number | ((zoomLevelObject: ZoomLevel) => number)} ZoomLevelOption */

/**
 * Calculates zoom levels for specific slide.
 * Depends on viewport size and image size.
 */

class ZoomLevel {
  /**
   * @param {PhotoSwipeOptions} options PhotoSwipe options
   * @param {SlideData} itemData Slide data
   * @param {number} index Slide index
   * @param {PhotoSwipe} [pswp] PhotoSwipe instance, can be undefined if not initialized yet
   */
  constructor(options, itemData, index, pswp) {
    this.pswp = pswp;
    this.options = options;
    this.itemData = itemData;
    this.index = index;
    /** @type { Point | null } */

    this.panAreaSize = null;
    /** @type { Point | null } */

    this.elementSize = null;
    this.fit = 1;
    this.fill = 1;
    this.vFill = 1;
    this.initial = 1;
    this.secondary = 1;
    this.max = 1;
    this.min = 1;
  }
  /**
   * Calculate initial, secondary and maximum zoom level for the specified slide.
   *
   * It should be called when either image or viewport size changes.
   *
   * @param {number} maxWidth
   * @param {number} maxHeight
   * @param {Point} panAreaSize
   */


  update(maxWidth, maxHeight, panAreaSize) {
    /** @type {Point} */
    const elementSize = {
      x: maxWidth,
      y: maxHeight
    };
    this.elementSize = elementSize;
    this.panAreaSize = panAreaSize;
    const hRatio = panAreaSize.x / elementSize.x;
    const vRatio = panAreaSize.y / elementSize.y;
    this.fit = Math.min(1, hRatio < vRatio ? hRatio : vRatio);
    this.fill = Math.min(1, hRatio > vRatio ? hRatio : vRatio); // zoom.vFill defines zoom level of the image
    // when it has 100% of viewport vertical space (height)

    this.vFill = Math.min(1, vRatio);
    this.initial = this._getInitial();
    this.secondary = this._getSecondary();
    this.max = Math.max(this.initial, this.secondary, this._getMax());
    this.min = Math.min(this.fit, this.initial, this.secondary);

    if (this.pswp) {
      this.pswp.dispatch('zoomLevelsUpdate', {
        zoomLevels: this,
        slideData: this.itemData
      });
    }
  }
  /**
   * Parses user-defined zoom option.
   *
   * @private
   * @param {'initial' | 'secondary' | 'max'} optionPrefix Zoom level option prefix (initial, secondary, max)
   * @returns { number | undefined }
   */


  _parseZoomLevelOption(optionPrefix) {
    const optionName =
    /** @type {'initialZoomLevel' | 'secondaryZoomLevel' | 'maxZoomLevel'} */
    optionPrefix + 'ZoomLevel';
    const optionValue = this.options[optionName];

    if (!optionValue) {
      return;
    }

    if (typeof optionValue === 'function') {
      return optionValue(this);
    }

    if (optionValue === 'fill') {
      return this.fill;
    }

    if (optionValue === 'fit') {
      return this.fit;
    }

    return Number(optionValue);
  }
  /**
   * Get zoom level to which image will be zoomed after double-tap gesture,
   * or when user clicks on zoom icon,
   * or mouse-click on image itself.
   * If you return 1 image will be zoomed to its original size.
   *
   * @private
   * @return {number}
   */


  _getSecondary() {
    let currZoomLevel = this._parseZoomLevelOption('secondary');

    if (currZoomLevel) {
      return currZoomLevel;
    } // 3x of "fit" state, but not larger than original


    currZoomLevel = Math.min(1, this.fit * 3);

    if (this.elementSize && currZoomLevel * this.elementSize.x > MAX_IMAGE_WIDTH) {
      currZoomLevel = MAX_IMAGE_WIDTH / this.elementSize.x;
    }

    return currZoomLevel;
  }
  /**
   * Get initial image zoom level.
   *
   * @private
   * @return {number}
   */


  _getInitial() {
    return this._parseZoomLevelOption('initial') || this.fit;
  }
  /**
   * Maximum zoom level when user zooms
   * via zoom/pinch gesture,
   * via cmd/ctrl-wheel or via trackpad.
   *
   * @private
   * @return {number}
   */


  _getMax() {
    // max zoom level is x4 from "fit state",
    // used for zoom gesture and ctrl/trackpad zoom
    return this._parseZoomLevelOption('max') || Math.max(1, this.fit * 4);
  }

}

/**
 * Lazy-load an image
 * This function is used both by Lightbox and PhotoSwipe core,
 * thus it can be called before dialog is opened.
 *
 * @param {SlideData} itemData Data about the slide
 * @param {PhotoSwipeBase} instance PhotoSwipe or PhotoSwipeLightbox instance
 * @param {number} index
 * @returns {Content} Image that is being decoded or false.
 */

function lazyLoadData(itemData, instance, index) {
  const content = instance.createContentFromData(itemData, index);
  /** @type {ZoomLevel | undefined} */

  let zoomLevel;
  const {
    options
  } = instance; // We need to know dimensions of the image to preload it,
  // as it might use srcset, and we need to define sizes

  if (options) {
    zoomLevel = new ZoomLevel(options, itemData, -1);
    let viewportSize;

    if (instance.pswp) {
      viewportSize = instance.pswp.viewportSize;
    } else {
      viewportSize = getViewportSize(options, instance);
    }

    const panAreaSize = getPanAreaSize(options, viewportSize, itemData, index);
    zoomLevel.update(content.width, content.height, panAreaSize);
  }

  content.lazyLoad();

  if (zoomLevel) {
    content.setDisplayedSize(Math.ceil(content.width * zoomLevel.initial), Math.ceil(content.height * zoomLevel.initial));
  }

  return content;
}
/**
 * Lazy-loads specific slide.
 * This function is used both by Lightbox and PhotoSwipe core,
 * thus it can be called before dialog is opened.
 *
 * By default, it loads image based on viewport size and initial zoom level.
 *
 * @param {number} index Slide index
 * @param {PhotoSwipeBase} instance PhotoSwipe or PhotoSwipeLightbox eventable instance
 * @returns {Content | undefined}
 */

function lazyLoadSlide(index, instance) {
  const itemData = instance.getItemData(index);

  if (instance.dispatch('lazyLoadSlide', {
    index,
    itemData
  }).defaultPrevented) {
    return;
  }

  return lazyLoadData(itemData, instance, index);
}

/** @typedef {import("../photoswipe.js").default} PhotoSwipe */

/** @typedef {import("../slide/slide.js").SlideData} SlideData */

/**
 * PhotoSwipe base class that can retrieve data about every slide.
 * Shared by PhotoSwipe Core and PhotoSwipe Lightbox
 */

class PhotoSwipeBase extends Eventable {
  /**
   * Get total number of slides
   *
   * @returns {number}
   */
  getNumItems() {
    var _this$options;

    let numItems = 0;
    const dataSource = (_this$options = this.options) === null || _this$options === void 0 ? void 0 : _this$options.dataSource;

    if (dataSource && 'length' in dataSource) {
      // may be an array or just object with length property
      numItems = dataSource.length;
    } else if (dataSource && 'gallery' in dataSource) {
      // query DOM elements
      if (!dataSource.items) {
        dataSource.items = this._getGalleryDOMElements(dataSource.gallery);
      }

      if (dataSource.items) {
        numItems = dataSource.items.length;
      }
    } // legacy event, before filters were introduced


    const event = this.dispatch('numItems', {
      dataSource,
      numItems
    });
    return this.applyFilters('numItems', event.numItems, dataSource);
  }
  /**
   * @param {SlideData} slideData
   * @param {number} index
   * @returns {Content}
   */


  createContentFromData(slideData, index) {
    return new Content(slideData, this, index);
  }
  /**
   * Get item data by index.
   *
   * "item data" should contain normalized information that PhotoSwipe needs to generate a slide.
   * For example, it may contain properties like
   * `src`, `srcset`, `w`, `h`, which will be used to generate a slide with image.
   *
   * @param {number} index
   * @returns {SlideData}
   */


  getItemData(index) {
    var _this$options2;

    const dataSource = (_this$options2 = this.options) === null || _this$options2 === void 0 ? void 0 : _this$options2.dataSource;
    /** @type {SlideData | HTMLElement} */

    let dataSourceItem = {};

    if (Array.isArray(dataSource)) {
      // Datasource is an array of elements
      dataSourceItem = dataSource[index];
    } else if (dataSource && 'gallery' in dataSource) {
      // dataSource has gallery property,
      // thus it was created by Lightbox, based on
      // gallery and children options
      // query DOM elements
      if (!dataSource.items) {
        dataSource.items = this._getGalleryDOMElements(dataSource.gallery);
      }

      dataSourceItem = dataSource.items[index];
    }

    let itemData = dataSourceItem;

    if (itemData instanceof Element) {
      itemData = this._domElementToItemData(itemData);
    } // Dispatching the itemData event,
    // it's a legacy verion before filters were introduced


    const event = this.dispatch('itemData', {
      itemData: itemData || {},
      index
    });
    return this.applyFilters('itemData', event.itemData, index);
  }
  /**
   * Get array of gallery DOM elements,
   * based on childSelector and gallery element.
   *
   * @param {HTMLElement} galleryElement
   * @returns {HTMLElement[]}
   */


  _getGalleryDOMElements(galleryElement) {
    var _this$options3, _this$options4;

    if ((_this$options3 = this.options) !== null && _this$options3 !== void 0 && _this$options3.children || (_this$options4 = this.options) !== null && _this$options4 !== void 0 && _this$options4.childSelector) {
      return getElementsFromOption(this.options.children, this.options.childSelector, galleryElement) || [];
    }

    return [galleryElement];
  }
  /**
   * Converts DOM element to item data object.
   *
   * @param {HTMLElement} element DOM element
   * @returns {SlideData}
   */


  _domElementToItemData(element) {
    /** @type {SlideData} */
    const itemData = {
      element
    };
    const linkEl =
    /** @type {HTMLAnchorElement} */
    element.tagName === 'A' ? element : element.querySelector('a');

    if (linkEl) {
      // src comes from data-pswp-src attribute,
      // if it's empty link href is used
      itemData.src = linkEl.dataset.pswpSrc || linkEl.href;

      if (linkEl.dataset.pswpSrcset) {
        itemData.srcset = linkEl.dataset.pswpSrcset;
      }

      itemData.width = linkEl.dataset.pswpWidth ? parseInt(linkEl.dataset.pswpWidth, 10) : 0;
      itemData.height = linkEl.dataset.pswpHeight ? parseInt(linkEl.dataset.pswpHeight, 10) : 0; // support legacy w & h properties

      itemData.w = itemData.width;
      itemData.h = itemData.height;

      if (linkEl.dataset.pswpType) {
        itemData.type = linkEl.dataset.pswpType;
      }

      const thumbnailEl = element.querySelector('img');

      if (thumbnailEl) {
        var _thumbnailEl$getAttri;

        // msrc is URL to placeholder image that's displayed before large image is loaded
        // by default it's displayed only for the first slide
        itemData.msrc = thumbnailEl.currentSrc || thumbnailEl.src;
        itemData.alt = (_thumbnailEl$getAttri = thumbnailEl.getAttribute('alt')) !== null && _thumbnailEl$getAttri !== void 0 ? _thumbnailEl$getAttri : '';
      }

      if (linkEl.dataset.pswpCropped || linkEl.dataset.cropped) {
        itemData.thumbCropped = true;
      }
    }

    return this.applyFilters('domItemData', itemData, element, linkEl);
  }
  /**
   * Lazy-load by slide data
   *
   * @param {SlideData} itemData Data about the slide
   * @param {number} index
   * @returns {Content} Image that is being decoded or false.
   */


  lazyLoadData(itemData, index) {
    return lazyLoadData(itemData, this, index);
  }

}

/**
 * @template T
 * @typedef {import('../types.js').Type} Type
 */

/** @typedef {import('../photoswipe.js').default} PhotoSwipe */

/** @typedef {import('../photoswipe.js').PhotoSwipeOptions} PhotoSwipeOptions */

/** @typedef {import('../photoswipe.js').DataSource} DataSource */

/** @typedef {import('../photoswipe.js').Point} Point */

/** @typedef {import('../slide/content.js').default} Content */

/** @typedef {import('../core/eventable.js').PhotoSwipeEventsMap} PhotoSwipeEventsMap */

/** @typedef {import('../core/eventable.js').PhotoSwipeFiltersMap} PhotoSwipeFiltersMap */

/**
 * @template {keyof PhotoSwipeEventsMap} T
 * @typedef {import('../core/eventable.js').EventCallback} EventCallback
 */

/**
 * PhotoSwipe Lightbox
 *
 * - If user has unsupported browser it falls back to default browser action (just opens URL)
 * - Binds click event to links that should open PhotoSwipe
 * - parses DOM strcture for PhotoSwipe (retrieves large image URLs and sizes)
 * - Initializes PhotoSwipe
 *
 *
 * Loader options use the same object as PhotoSwipe, and supports such options:
 *
 * gallery - Element | Element[] | NodeList | string selector for the gallery element
 * children - Element | Element[] | NodeList | string selector for the gallery children
 *
 */

class PhotoSwipeLightbox extends PhotoSwipeBase {
  /**
   * @param {PhotoSwipeOptions} [options]
   */
  constructor(options) {
    super();
    /** @type {PhotoSwipeOptions} */

    this.options = options || {};
    this._uid = 0;
    this.shouldOpen = false;
    /**
     * @private
     * @type {Content | undefined}
     */

    this._preloadedContent = undefined;
    this.onThumbnailsClick = this.onThumbnailsClick.bind(this);
  }
  /**
   * Initialize lightbox, should be called only once.
   * It's not included in the main constructor, so you may bind events before it.
   */


  init() {
    // Bind click events to each gallery
    getElementsFromOption(this.options.gallery, this.options.gallerySelector).forEach(galleryElement => {
      galleryElement.addEventListener('click', this.onThumbnailsClick, false);
    });
  }
  /**
   * @param {MouseEvent} e
   */


  onThumbnailsClick(e) {
    // Exit and allow default browser action if:
    if (specialKeyUsed(e) // ... if clicked with a special key (ctrl/cmd...)
    || window.pswp) {
      // ... if PhotoSwipe is already open
      return;
    } // If both clientX and clientY are 0 or not defined,
    // the event is likely triggered by keyboard,
    // so we do not pass the initialPoint
    //
    // Note that some screen readers emulate the mouse position,
    // so it's not the ideal way to detect them.
    //

    /** @type {Point | null} */


    let initialPoint = {
      x: e.clientX,
      y: e.clientY
    };

    if (!initialPoint.x && !initialPoint.y) {
      initialPoint = null;
    }

    let clickedIndex = this.getClickedIndex(e);
    clickedIndex = this.applyFilters('clickedIndex', clickedIndex, e, this);
    /** @type {DataSource} */

    const dataSource = {
      gallery:
      /** @type {HTMLElement} */
      e.currentTarget
    };

    if (clickedIndex >= 0) {
      e.preventDefault();
      this.loadAndOpen(clickedIndex, dataSource, initialPoint);
    }
  }
  /**
   * Get index of gallery item that was clicked.
   *
   * @param {MouseEvent} e click event
   * @returns {number}
   */


  getClickedIndex(e) {
    // legacy option
    if (this.options.getClickedIndexFn) {
      return this.options.getClickedIndexFn.call(this, e);
    }

    const clickedTarget =
    /** @type {HTMLElement} */
    e.target;
    const childElements = getElementsFromOption(this.options.children, this.options.childSelector,
    /** @type {HTMLElement} */
    e.currentTarget);
    const clickedChildIndex = childElements.findIndex(child => child === clickedTarget || child.contains(clickedTarget));

    if (clickedChildIndex !== -1) {
      return clickedChildIndex;
    } else if (this.options.children || this.options.childSelector) {
      // click wasn't on a child element
      return -1;
    } // There is only one item (which is the gallery)


    return 0;
  }
  /**
   * Load and open PhotoSwipe
   *
   * @param {number} index
   * @param {DataSource} [dataSource]
   * @param {Point | null} [initialPoint]
   * @returns {boolean}
   */


  loadAndOpen(index, dataSource, initialPoint) {
    // Check if the gallery is already open
    if (window.pswp || !this.options) {
      return false;
    } // Use the first gallery element if dataSource is not provided


    if (!dataSource && this.options.gallery && this.options.children) {
      const galleryElements = getElementsFromOption(this.options.gallery);

      if (galleryElements[0]) {
        dataSource = {
          gallery: galleryElements[0]
        };
      }
    } // set initial index


    this.options.index = index; // define options for PhotoSwipe constructor

    this.options.initialPointerPos = initialPoint;
    this.shouldOpen = true;
    this.preload(index, dataSource);
    return true;
  }
  /**
   * Load the main module and the slide content by index
   *
   * @param {number} index
   * @param {DataSource} [dataSource]
   */


  preload(index, dataSource) {
    const {
      options
    } = this;

    if (dataSource) {
      options.dataSource = dataSource;
    } // Add the main module

    /** @type {Promise>[]} */


    const promiseArray = [];
    const pswpModuleType = typeof options.pswpModule;

    if (isPswpClass(options.pswpModule)) {
      promiseArray.push(Promise.resolve(
      /** @type {Type} */
      options.pswpModule));
    } else if (pswpModuleType === 'string') {
      throw new Error('pswpModule as string is no longer supported');
    } else if (pswpModuleType === 'function') {
      promiseArray.push(
      /** @type {() => Promise>} */
      options.pswpModule());
    } else {
      throw new Error('pswpModule is not valid');
    } // Add custom-defined promise, if any


    if (typeof options.openPromise === 'function') {
      // allow developers to perform some task before opening
      promiseArray.push(options.openPromise());
    }

    if (options.preloadFirstSlide !== false && index >= 0) {
      this._preloadedContent = lazyLoadSlide(index, this);
    } // Wait till all promises resolve and open PhotoSwipe


    const uid = ++this._uid;
    Promise.all(promiseArray).then(iterableModules => {
      if (this.shouldOpen) {
        const mainModule = iterableModules[0];

        this._openPhotoswipe(mainModule, uid);
      }
    });
  }
  /**
   * @private
   * @param {Type | { default: Type }} module
   * @param {number} uid
   */


  _openPhotoswipe(module, uid) {
    // Cancel opening if UID doesn't match the current one
    // (if user clicked on another gallery item before current was loaded).
    //
    // Or if shouldOpen flag is set to false
    // (developer may modify it via public API)
    if (uid !== this._uid && this.shouldOpen) {
      return;
    }

    this.shouldOpen = false; // PhotoSwipe is already open

    if (window.pswp) {
      return;
    }
    /**
     * Pass data to PhotoSwipe and open init
     *
     * @type {PhotoSwipe}
     */


    const pswp = typeof module === 'object' ? new module.default(this.options) // eslint-disable-line
    : new module(this.options); // eslint-disable-line

    this.pswp = pswp;
    window.pswp = pswp; // map listeners from Lightbox to PhotoSwipe Core

    /** @type {(keyof PhotoSwipeEventsMap)[]} */

    Object.keys(this._listeners).forEach(name => {
      var _this$_listeners$name;

      (_this$_listeners$name = this._listeners[name]) === null || _this$_listeners$name === void 0 || _this$_listeners$name.forEach(fn => {
        pswp.on(name,
        /** @type {EventCallback} */
        fn);
      });
    }); // same with filters

    /** @type {(keyof PhotoSwipeFiltersMap)[]} */

    Object.keys(this._filters).forEach(name => {
      var _this$_filters$name;

      (_this$_filters$name = this._filters[name]) === null || _this$_filters$name === void 0 || _this$_filters$name.forEach(filter => {
        pswp.addFilter(name, filter.fn, filter.priority);
      });
    });

    if (this._preloadedContent) {
      pswp.contentLoader.addToCache(this._preloadedContent);
      this._preloadedContent = undefined;
    }

    pswp.on('destroy', () => {
      // clean up public variables
      this.pswp = undefined;
      delete window.pswp;
    });
    pswp.init();
  }
  /**
   * Unbinds all events, closes PhotoSwipe if it's open.
   */


  destroy() {
    var _this$pswp;

    (_this$pswp = this.pswp) === null || _this$pswp === void 0 || _this$pswp.destroy();
    this.shouldOpen = false;
    this._listeners = {};
    getElementsFromOption(this.options.gallery, this.options.gallerySelector).forEach(galleryElement => {
      galleryElement.removeEventListener('click', this.onThumbnailsClick, false);
    });
  }

}

export { PhotoSwipeLightbox as default };
//# sourceMappingURL=photoswipe-lightbox.esm.js.map


================================================
FILE: demo-docs-website/static/photoswipe/photoswipe.css
================================================
/*! PhotoSwipe main CSS by Dmytro Semenov | photoswipe.com */

.pswp {
  --pswp-bg: #000;
  --pswp-placeholder-bg: #222;
  

  --pswp-root-z-index: 100000;
  
  --pswp-preloader-color: rgba(79, 79, 79, 0.4);
  --pswp-preloader-color-secondary: rgba(255, 255, 255, 0.9);
  
  /* defined via js:
  --pswp-transition-duration: 333ms; */
  
  --pswp-icon-color: #fff;
  --pswp-icon-color-secondary: #4f4f4f;
  --pswp-icon-stroke-color: #4f4f4f;
  --pswp-icon-stroke-width: 2px;

  --pswp-error-text-color: var(--pswp-icon-color);
}


/*
	Styles for basic PhotoSwipe (pswp) functionality (sliding area, open/close transitions)
*/

.pswp {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: var(--pswp-root-z-index);
	display: none;
	touch-action: none;
	outline: 0;
	opacity: 0.003;
	contain: layout style size;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* Prevents focus outline on the root element,
  (it may be focused initially) */
.pswp:focus {
  outline: 0;
}

.pswp * {
  box-sizing: border-box;
}

.pswp img {
  max-width: none;
}

.pswp--open {
	display: block;
}

.pswp,
.pswp__bg {
	transform: translateZ(0);
	will-change: opacity;
}

.pswp__bg {
  opacity: 0.005;
	background: var(--pswp-bg);
}

.pswp,
.pswp__scroll-wrap {
	overflow: hidden;
}

.pswp__scroll-wrap,
.pswp__bg,
.pswp__container,
.pswp__item,
.pswp__content,
.pswp__img,
.pswp__zoom-wrap {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.pswp__img,
.pswp__zoom-wrap {
	width: auto;
	height: auto;
}

.pswp--click-to-zoom.pswp--zoom-allowed .pswp__img {
	cursor: -webkit-zoom-in;
	cursor: -moz-zoom-in;
	cursor: zoom-in;
}

.pswp--click-to-zoom.pswp--zoomed-in .pswp__img {
	cursor: move;
	cursor: -webkit-grab;
	cursor: -moz-grab;
	cursor: grab;
}

.pswp--click-to-zoom.pswp--zoomed-in .pswp__img:active {
  cursor: -webkit-grabbing;
  cursor: -moz-grabbing;
  cursor: grabbing;
}

/* :active to override grabbing cursor */
.pswp--no-mouse-drag.pswp--zoomed-in .pswp__img,
.pswp--no-mouse-drag.pswp--zoomed-in .pswp__img:active,
.pswp__img {
	cursor: -webkit-zoom-out;
	cursor: -moz-zoom-out;
	cursor: zoom-out;
}


/* Prevent selection and tap highlights */
.pswp__container,
.pswp__img,
.pswp__button,
.pswp__counter {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.pswp__item {
	/* z-index for fade transition */
	z-index: 1;
	overflow: hidden;
}

.pswp__hidden {
	display: none !important;
}

/* Allow to click through pswp__content element, but not its children */
.pswp__content {
  pointer-events: none;
}
.pswp__content > * {
  pointer-events: auto;
}


/*

  PhotoSwipe UI

*/

/*
	Error message appears when image is not loaded
	(JS option errorMsg controls markup)
*/
.pswp__error-msg-container {
  display: grid;
}
.pswp__error-msg {
	margin: auto;
	font-size: 1em;
	line-height: 1;
	color: var(--pswp-error-text-color);
}

/*
class pswp__hide-on-close is applied to elements that
should hide (for example fade out) when PhotoSwipe is closed
and show (for example fade in) when PhotoSwipe is opened
 */
.pswp .pswp__hide-on-close {
	opacity: 0.005;
	will-change: opacity;
	transition: opacity var(--pswp-transition-duration) cubic-bezier(0.4, 0, 0.22, 1);
	z-index: 10; /* always overlap slide content */
	pointer-events: none; /* hidden elements should not be clickable */
}

/* class pswp--ui-visible is added when opening or closing transition starts */
.pswp--ui-visible .pswp__hide-on-close {
	opacity: 1;
	pointer-events: auto;
}

/*