[feature] Photoswipe gallery (#740)

* implement photoswipe galleries

* dependency wrangling

* photoswipe-dynamic-caption plugin
This commit is contained in:
f0x52 2022-08-07 17:58:01 +02:00 committed by GitHub
parent 745f54970d
commit f2a6ae3ef8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 51 additions and 10 deletions

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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