skyperkloze · August 17, 2020 14:37
diff --git a/roam-gallery.js b/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);
 })();
	/*
	* 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.8rect.width&&y<0.2rect.height); // top right corner
	if (x>0.8rect.width && y<0.2rect.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);
	})();