diff options
Diffstat (limited to 'web')
| -rw-r--r-- | web/source/css/status.css | 3 | ||||
| -rw-r--r-- | web/source/frontend/index.js | 17 | ||||
| -rw-r--r-- | web/source/index.js | 23 | ||||
| -rw-r--r-- | web/source/package.json | 4 | ||||
| -rw-r--r-- | web/source/yarn.lock | 10 | ||||
| -rw-r--r-- | web/template/status.tmpl | 4 |
6 files changed, 51 insertions, 10 deletions
diff --git a/web/source/css/status.css b/web/source/css/status.css index 705934eb6..c1aff7ac8 100644 --- a/web/source/css/status.css +++ b/web/source/css/status.css @@ -16,6 +16,9 @@ along with this program. If not, see <http://www.gnu.org/licenses/>. */ +@import "photoswipe/dist/photoswipe.css"; +@import "photoswipe-dynamic-caption-plugin/photoswipe-dynamic-caption-plugin.css"; + main { background: transparent; grid-auto-rows: auto; diff --git a/web/source/frontend/index.js b/web/source/frontend/index.js index e761202bb..5c53a31bf 100644 --- a/web/source/frontend/index.js +++ b/web/source/frontend/index.js @@ -23,9 +23,24 @@ // our frontend templates don't load the common bundle.js since it contains React etc // so we can't use any dependencies that would deduplicate with the other files +const Photoswipe = require("photoswipe/dist/umd/photoswipe.umd.min.js"); +const PhotoswipeLightbox = require("photoswipe/dist/umd/photoswipe-lightbox.umd.min.js"); +const PhotoswipeCaptionPlugin = require("photoswipe-dynamic-caption-plugin").default; + +const lightbox = new PhotoswipeLightbox({ + gallery: '.photoswipe-gallery', + children: 'a', + pswpModule: Photoswipe, +}); + +new PhotoswipeCaptionPlugin(lightbox, { + type: 'auto', +}); + +lightbox.init(); + Array.from(document.getElementsByClassName("spoiler-label")).forEach((label) => { let checkbox = document.getElementById(label.htmlFor); - console.log(label, checkbox); if (checkbox != undefined) { function update() { if(checkbox.checked) { diff --git a/web/source/index.js b/web/source/index.js index 0e5df9f9b..17e4435c4 100644 --- a/web/source/index.js +++ b/web/source/index.js @@ -53,12 +53,23 @@ const postcssPlugins = [ const browserifyConfig = { transform: [ - babelify.configure({ - presets: [ - require.resolve("@babel/preset-env"), - require.resolve("@babel/preset-react") - ] - }), + [ + babelify.configure({ + presets: [ + [ + require.resolve("@babel/preset-env"), + { + modules: "cjs" + } + ], + require.resolve("@babel/preset-react") + ] + }), + { + global: true, + exclude: /node_modules\/(?!photoswipe-dynamic-caption-plugin)/, + } + ], [require("uglifyify"), { global: true, exts: ".js" diff --git a/web/source/package.json b/web/source/package.json index 9c40dc39b..27c73a322 100644 --- a/web/source/package.json +++ b/web/source/package.json @@ -1,6 +1,6 @@ { "name": "gotosocial-frontend", - "version": "0.3.4", + "version": "0.3.8", "description": "GoToSocial frontend sources", "main": "index.js", "author": "f0x", @@ -22,6 +22,8 @@ "from2-string": "^1.1.0", "icssify": "^1.2.1", "js-file-download": "^0.4.12", + "photoswipe": "^5.3.0", + "photoswipe-dynamic-caption-plugin": "^1.2.4", "postcss": "^8.3.5", "postcss-color-function": "^4.1.0", "postcss-color-mod-function": "3.0.0", diff --git a/web/source/yarn.lock b/web/source/yarn.lock index ddbd95a87..3b3a5402e 100644 --- a/web/source/yarn.lock +++ b/web/source/yarn.lock @@ -4616,6 +4616,16 @@ pem@^1.13.2: os-tmpdir "^1.0.1" which "^2.0.2" +photoswipe-dynamic-caption-plugin@^1.2.4: + version "1.2.4" + resolved "https://registry.yarnpkg.com/photoswipe-dynamic-caption-plugin/-/photoswipe-dynamic-caption-plugin-1.2.4.tgz#51488139550776a03436333ad9158786e3e0e21c" + integrity sha512-7gPO8BHnOGZ0nXVhziltDqe7cAhDmaolGaU6LC3vggi4dcTHJBsGnxuqpk2EXw6vJ/JOeS0MqyGGUXupYbZk5w== + +photoswipe@^5.3.0: + version "5.3.0" + resolved "https://registry.yarnpkg.com/photoswipe/-/photoswipe-5.3.0.tgz#fe118b147dddaf58ccc17c9403c7d7148805f8d2" + integrity sha512-vZMwziQorjiagzX7EvWimVT0YHO0DWNtR9UT6cv3yW1FA199LgsTpj4ziB2oJ/X/197gKmi56Oux5PudWUAmuw== + picocolors@^0.2.1: version "0.2.1" resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-0.2.1.tgz#570670f793646851d1ba135996962abad587859f" diff --git a/web/template/status.tmpl b/web/template/status.tmpl index c477428fc..2216b48d5 100644 --- a/web/template/status.tmpl +++ b/web/template/status.tmpl @@ -15,9 +15,9 @@ </div> </div> {{with .MediaAttachments}} - <div class="media {{(len .) | oddOrEven }}{{if eq (len .) 1}} single{{end}}{{if eq (len .) 2}} double{{end}}"> + <div class="media photoswipe-gallery {{(len .) | oddOrEven }}{{if eq (len .) 1}} single{{end}}{{if eq (len .) 2}} double{{end}}"> {{range .}} - <a href="{{.URL}}" target="_blank" title="{{.Description}}"> + <a href="{{.URL}}" target="_blank" title="{{.Description}}" data-pswp-width="{{.Meta.Original.Width}}px" data-pswp-height="{{.Meta.Original.Height}}px"> {{if not .Description}} <div class="no-image-desc" aria-hidden="true" ><i class="fa fa-info-circle"></i><span>Missing image description</span></div> {{end}} |