[feature] Photoswipe gallery (#740)

* implement photoswipe galleries * dependency wrangling * photoswipe-dynamic-caption plugin
superseriousbusiness · Aug 7, 2022 · f2a6ae3 · f2a6ae3
1 parent 745f549
commit f2a6ae3
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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}}