roam-gallery.js

/*
 * Viktor's Roam gallery PoC
 * author: @ViktorTabori
 *
 * How to install it:
 *  - go to page [[roam/js]]
 *  - create a node with: {{[[roam/js]]}}
 *  - create a clode block under it, and change its type from clojure to javascript
 *  - allow the running of the javascript on the {{[[roam/js]]}} node
 *  - reload Roam
 *  - click on images
 *  - edit image url on mobile: click top right corner of image
 */
 ;(function(){
	'click touchstart touchmove touchend'.split(' ').forEach(type=>{
		console.log('gallery looking for',type);
		document.addEventListener(type, function(e) {
			window._gallery(e);
		});
	});

	window._gallery = function(e) {
		if (e.target.nodeName != 'IMG' || !e.target.classList.contains('rm-inline-img')) return;

		// handle touch moving
		if (e.type == 'touchstart') {
			PhotoSwipe.target = e.target;
			return;
		}
		if (e.type == 'touchmove') {
			delete PhotoSwipe.target;
			return;
		}
		if (e.type == 'touchend' && !PhotoSwipe.target) return;

		// 20% top right corner: edit, won't trigger gallery
		var rect = e.target.getBoundingClientRect();
		var x = e.pageX - rect.left;
		var y = e.pageY - rect.top;
		console.log(x,y,x>0.8*rect.width&&y<0.2*rect.height); // top right corner
		if (x>0.8*rect.width && y<0.2*rect.height) return; // we don't fire for top right corner

		// if PhotoSwipe is not present
		if (typeof PhotoSwipe == 'undefined' || typeof PhotoSwipeUI_Default == 'undefined') return;

		// prevent click, so editing is not initiated
		console.log(e.type,e.target,e);
		e.preventDefault();
		e.stopPropagation();

		// init gallery
		window.pswp = window.pswp || document.querySelector('.pswp');
		var $this = e.target;
		var items = [{
			src: $this.src, 
			msrc: $this.src,
		    w: $this.naturalWidth,
		    h: $this.naturalHeight
		}];
		var option = {
		    history: false,
		    index: 0,
		    getThumbBoundsFn: function(index) {
		        var pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
		            rect = $this.getBoundingClientRect(); 
		        return {x:rect.left, y:rect.top + pageYScroll, w:rect.width};
		    }
		};
		var gallery = new PhotoSwipe( pswp, PhotoSwipeUI_Default, items, option);
		gallery.init();
	}

	// inject code to head
	function addFile(type,srcName,src,opt){
		if (Array.from(document.head.getElementsByTagName(type)).filter(s=>s[srcName]==src).length) {
			console.log('already loaded', src);
			return;
		}
		var file = document.createElement(type);
		file[srcName] = src;
		file.async = false;
		if (typeof opt == 'object') {
			for (var i in opt) {
				file[i] = opt[i];
			}
		}
		document.head.appendChild(file);
		console.log('added', src);
		return true;
	}

	// inject photoswipe
	addFile('script','src','https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/photoswipe.min.js');
	addFile('script','src','https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/photoswipe-ui-default.min.js');
	addFile('link', 'href', 'https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/photoswipe.css', {rel:'stylesheet'});
	addFile('link', 'href', 'https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/default-skin/default-skin.css', {rel:'stylesheet'});

	// swp initiate
	var div = document.createElement('div');
	div.innerHTML = '<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> <div class="pswp__ui pswp__ui--hidden"> <div class="pswp__top-bar"> <div class="pswp__counter"></div> <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> <div class="pswp__caption"> <div class="pswp__caption__center"></div> </div> </div> </div> </div>';
	document.body.appendChild(div);
})();