From: Mischa POSLAWSKY <perl@shiar.org>
Date: Mon, 18 Sep 2017 16:54:42 +0000 (+0200)
Subject: foto: image album browser and control
X-Git-Tag: v3.3~22
X-Git-Url: http://git.shiar.net/minimedit.git/commitdiff_plain/77ab25edd98ec5a3871fc07bceaa0cd61949b69e

foto: image album browser and control

Original foto.php controller and related assets copied from Lijtweg at
commit v2.5-24-ga5399c5d03 (2017-10-22).

Requires image files at data/ symlinked into albums at foto/ with prefixed
resolution attributes.  Depends on external javascript libraries [PhotoSwipe
and Flickr's Justified-Layout] at lib/ (changed from import/ at lijtweg)
installed by make rules.
---

diff --git a/.gitignore b/.gitignore
index a99a8c9..33ea8fd 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,6 @@
-# link to some ckeditor build (or checkout in a pinch)
-/ckeditor
+# assets built by make rules
+/lib
+!/lib/photoswipe.html
 
 # dynamic user data
 /profile
diff --git a/Makefile b/Makefile
new file mode 100644
index 0000000..49bf4d2
--- /dev/null
+++ b/Makefile
@@ -0,0 +1,23 @@
+foto: lib/album.js lib/photoswipe.css lib/photoswipe-ui
+
+lib/album.js: lib/.photoswipe/dist/photoswipe.min.js lib/.photoswipe/dist/photoswipe-ui-default.min.js lib/.justified/dist/justified-layout.js
+	cat $^ >$@
+
+lib/photoswipe.css: lib/.photoswipe/dist/photoswipe.css
+	ln -sf ../$^ $@
+
+lib/photoswipe-ui: lib/.photoswipe/dist/default-skin
+	ln -sf ../$^ $@
+
+lib/.photoswipe/dist/photoswipe.css: lib/.photoswipe
+lib/.photoswipe/dist/photoswipe.min.js: lib/.photoswipe
+lib/.photoswipe/dist/default-skin: lib/.photoswipe
+
+lib/.photoswipe:
+	git clone https://github.com/dimsemenov/PhotoSwipe $@
+
+lib/.justified/dist/justified-layout.js: lib/.justified
+
+lib/.justified:
+	git clone https://github.com/flickr/justified-layout $@
+
diff --git a/foto/album.inc.php b/foto/album.inc.php
new file mode 100644
index 0000000..597e9a4
--- /dev/null
+++ b/foto/album.inc.php
@@ -0,0 +1,100 @@
+<script src="/lib/album.js"></script>
+<link rel="stylesheet" href="/lib/photoswipe.css">
+<link rel="stylesheet" href="/lib/photoswipe-ui/default-skin.css">
+
+<?php
+include 'lib/photoswipe.html';
+?>
+
+<script>
+var pswpElement = document.querySelectorAll('.pswp')[0]
+var images = [];
+
+function openphotoswipe(index) {
+	var options = {
+		index: index,
+		loop: false,
+		getThumbBoundsFn: function(index) {
+			var thumbpos = images[index].el.getBoundingClientRect();
+			var pageYScroll = window.pageYOffset || document.documentElement.scrollTop;
+			return { x:thumbpos.left, y:thumbpos.top + pageYScroll, w:thumbpos.width };
+		},
+		tapToClose: false,
+		clickToCloseNonZoomable: false,
+		closeElClasses: [], 
+		shareButtons: [
+			{id:'download', label:'Origineel downloaden', url:'{{raw_image_url}}', download:true}
+		],
+	};
+	var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, images, options);
+	gallery.init();
+	return false;
+}
+
+var gallery = document.querySelector('.album');
+var images = [];
+var ratios = [];
+
+var imgquery = gallery.querySelectorAll('img');
+for (i = 0; i < imgquery.length; i++) {
+	(function () {
+		var img = imgquery[i];
+		var index = images.length;
+		var size = img.getAttribute('data-size');
+		size = size ? size.split('x') : [img.width * 5, img.height * 5];
+		var item = {
+			src: img.parentNode.getAttribute('href'),
+			msrc: img.getAttribute('src'),
+			w: size[0],
+			h: size[1],
+			el: img,
+			pid: img.parentNode.getAttribute('href'),
+			title: img.getAttribute('title'),
+		};
+		images.push(item);
+		img.onclick = function () { return openphotoswipe(index) };
+		ratios.push(size[0] / size[1]);
+	})();
+}
+
+function imgjustify() {
+	var csspad = window.getComputedStyle(gallery.children[0]).getPropertyValue('padding-right');
+	var pad = csspad && parseFloat(csspad.replace(/px$/, '')) || 4.5;
+	var config = {
+		containerWidth: gallery.offsetWidth,
+		containerPadding: pad,
+		boxSpacing: pad * 2,
+		targetRowHeight: 200,
+	};
+	var layout = require('justified-layout')(ratios, config);
+
+	gallery.style.position = 'relative';
+	gallery.style.height = layout.containerHeight + 'px';
+	for (i = 0; i < layout.boxes.length; i++) {
+		(function () {
+			var imgel = images[i].el;
+			imgel.style.width = layout.boxes[i].width + 'px';
+			imgel.style.height = layout.boxes[i].height + 'px';
+			imgel.style.position = 'absolute';
+			imgel.style.top = layout.boxes[i].top + 'px';
+			imgel.style.left = layout.boxes[i].left + 'px';
+
+			var thumbtarget = imgel.src.replace(/(\/thumb\/)\d+/, '$1'+layout.boxes[i].height)
+			if (imgel.complete) {
+				imgel.src = thumbtarget;
+			}
+			else if (thumbtarget != imgel.src) {
+				var loadthumb = new Image();
+				loadthumb.src = thumbtarget;
+				loadthumb.onload = function() {
+					imgel.src = this.src;
+				};
+			}
+		})();
+	}
+};
+
+window.addEventListener('resize', imgjustify, false);
+imgjustify();
+
+</script>
diff --git a/foto/index.php b/foto/index.php
new file mode 100644
index 0000000..eadda91
--- /dev/null
+++ b/foto/index.php
@@ -0,0 +1,85 @@
+<?php
+$intro = ob_get_clean();
+
+$rootdir = 'foto' . $Args;
+
+if (!empty($User['admin'])) {
+	$access = '🔓 Openbaar';
+	if (isset($PageAccess)) {
+		$access = "🔒 Bewoners";
+		if ($PageAccess != $Page.$Args) {
+			$access .= sprintf(' vanaf <a href="%s">%s</a>',
+				"/$PageAccess", pathinfo($PageAccess, PATHINFO_FILENAME)
+			);
+		}
+	}
+	print "<aside>$access</aside>\n\n";
+}
+
+$nav = explode('/', $Page.$Args);
+$title = array_pop($nav);
+$rootname = "Foto's"; # override of 'foto'
+$link = '';
+print "<h2>";
+foreach ($nav as $i => $linktitle) {
+	$link .= "/$linktitle";
+	printf('<a href="%s">%s</a> →'."\n", $link, $i ? $linktitle : $rootname);
+}
+print $Args ? $title : $rootname;
+print "</h2>\n\n";
+
+print $intro;
+
+function showthumb($path)
+{
+	// assume all album entries are symlinks to archive originals
+	$target = preg_replace('{^(\.\./)*}', '', readlink($path));
+	$thumb = preg_replace('{^data/}', 'thumb/200/', $target);
+
+	@list ($order, $size, $title) = explode(':', pathinfo($path, PATHINFO_FILENAME), 3);
+	$imgtag = 'img src="/'.$thumb.'"';
+	if ($title) {
+		$imgtag .= ' title="'.htmlspecialchars(urldecode($title)).'"';
+	}
+	if ($size) {
+		$imgtag .= ' data-size="'.$size.'"';
+	}
+
+	return sprintf('<a href="/%s"><%s /></a>'."\n", $target, $imgtag);
+}
+
+if ($imgs = glob("$rootdir/*", GLOB_ONLYDIR)) {
+	natsort($imgs);
+	print '<ul class="gallery cat">'."\n";
+	foreach ($imgs as $path) {
+		$parts = pathinfo($path);
+		$album = $parts['filename'];
+		$cover = "$path/index.jpg";
+		if (!file_exists($cover)) $cover = 'foto/index.jpg';
+		if (is_link($cover)) {
+			$cover = preg_replace('{^(?:\.\./)*data/}', 'thumb/100/', readlink($cover));
+		}
+
+		$html = '<img src="/'.$cover.'" />';
+		$html .= "<figcaption>$album</figcaption>";
+		if (empty($User) and file_exists("$path/.private")) {
+			$html = '<strike title="bewoners">'.$html.'</strike>';
+		}
+		$html = "<figure>$html</figure>";
+
+		printf('<li id="%s"><a href="%s">%s</a>'."\n", $album, "/$path", $html);
+	}
+	print "</ul>\n\n";
+}
+
+if ($imgs = glob("$rootdir/*.jpg")) {
+	print '<ul class="gallery album">'."\n";
+	foreach ($imgs as $img) {
+		if ($img == "$rootdir/index.jpg") continue;
+		if (!is_link($img)) continue;
+		print '<li>'.showthumb($img);
+	}
+	print '</ul>'."\n\n";
+
+	include 'foto/album.inc.php';
+}
diff --git a/foto/template.html b/foto/template.html
new file mode 100644
index 0000000..e69de29
diff --git a/lib/photoswipe.html b/lib/photoswipe.html
new file mode 100644
index 0000000..6372c5b
--- /dev/null
+++ b/lib/photoswipe.html
@@ -0,0 +1,44 @@
+<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
+	<div class="pswp__bg"></div>
+
+	<div class="pswp__scroll-wrap">
+		<div class="pswp__container">
+			<div class="pswp__item"></div>
+			<div class="pswp__item"></div>
+			<div class="pswp__item"></div>
+		</div>
+
+		<!-- PhotoSwipeUI_Default interface on top of sliding area -->
+		<div class="pswp__ui pswp__ui--hidden">
+
+			<div class="pswp__top-bar">
+				<div class="pswp__counter"></div>
+
+				<button class="pswp__button pswp__button--close" title="Terug (Esc)"></button>
+				<button class="pswp__button pswp__button--share" title="Opties"></button>
+				<button class="pswp__button pswp__button--fs" title="Volledig scherm"></button>
+				<button class="pswp__button pswp__button--zoom" title="Zoom in/uit"></button>
+
+				<div class="pswp__preloader">
+					<div class="pswp__preloader__icn">
+						<div class="pswp__preloader__cut">
+							<div class="pswp__preloader__donut"></div>
+						</div>
+					</div>
+				</div>
+			</div>
+
+			<div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
+				<div class="pswp__share-tooltip"></div> 
+			</div>
+
+			<button class="pswp__button pswp__button--arrow--left" title="Vorige"></button>
+			<button class="pswp__button pswp__button--arrow--right" title="Volgende"></button>
+
+			<div class="pswp__caption">
+				<div class="pswp__caption__center"></div>
+			</div>
+
+		</div>
+	</div>
+</div>