Benutzer:Herzi Pinki/GeoDECpopup.js

// popup for geohack
( function ( mw, $ ) {
   "use strict";
	var geohackRE = /https:\/\/geohack\.toolforge\.org\/geohack\.php\?.*params=([\d\.\-]+)_(N|S)_([\d\.\-]+)_(O|E|W).*/;
	// does not work for Wikidata
	// wikidata      https://geohack.toolforge.org/geohack.php?params=48.17586_N_16.2918_E_globe:earth&language=de
	// <a href="https://geohack.toolforge.org/geohack.php?params=48.17586_N_16.2918_E_globe:earth&amp;language=de" class="external">48°10'33"N, 16°17'30"E</a>
	// the structure of geohack links
	
	// helper for setTimeout
	function autoFadeOutPopup (o) {
		o.fadeOut("slow");
	}
	
	function fadeInPopup (event) {
		var div = $(event.target).find('.DECpu');
		div.fadeIn("slow");
		setTimeout(autoFadeOutPopup,7000,div);
	    return false;
	}
	
	function fadeOutPopup(event) {
		var sel = document.getSelection().toString();
		if(!sel){ // only of no selection for copy
			$(event.target).closest('.DECpu').fadeOut("slow");
		}
	    return false;
	}
	  
	$(document).ready(function() {
	  var texts = (function texts() {
	    var translations = {
	        en: {
				copy: "copy to clipboard",
				logoTitle: "Geotools by Herzi Pinki",
				credits: " DEC-Coords:",
	        },
	        de: {
				copy: "In die Zwischenablage kopieren",
				logoTitle: "Geowerkzeuge von Herzi Pinki",
				credits: " DEC-Koordinaten:",
	        },
	      },
	      chain = mw.language.getFallbackLanguageChain(),
	      len = chain.length,
	      ret = {},
	      i = len - 1;
	
	    while (i >= 0) {
	      if (translations.hasOwnProperty(chain[i])) {
	        $.extend(ret, translations[chain[i]]);
	      }
	      i -= 1;
	    }
	    return ret;
	  }());
	
		var anchors = document.getElementsByTagName("a");
		var i; // declare i
		for (i = 0; i < anchors.length; i++) {
			var coords = anchors[i].href.match(geohackRE);
			if (coords) {
				var parentNode = anchors[i].parentNode; 
				// geohack link found
				// coords[0] is the whole line
	            // var geohackRE = /https:\/\/geohack\.toolforge\.org\/geohack\.php\?.*params=([\d\.\-]+)_(N|S)_([\d\.\-]+)_(O|E|W).*/;
	            //                                                                            (1        ) (2  ) (3        ) (4    ) 
				var lat = (coords[2] == 'S')? -coords[1] : coords[1];
				var lon = (coords[4] == 'W')? -coords[3] : coords[3];
				lat = Math.round(lat * 1000000) / 1000000; // round to 6 digits
				lon = Math.round(lon * 1000000) / 1000000;
				
				var cval = lat.toString() + ', ' + lon.toString();
	
				var dynDiv = document.createElement("div");
				var id = "DEC"+i.toString();
				dynDiv.setAttribute("id", id);
				
				var header = document.createElement("div");
				header.style.fontSize = "small";
				header.style.whiteSpace = "nowrap";

				// copy to clipboard
				var copybutton = document.createElement("img");
				copybutton.style.width = "30px";
				copybutton.style.height = "30px";
				copybutton.style.float = "right";
				copybutton.style.padding = "5px 1px";
				copybutton.src = "//upload.wikimedia.org/wikipedia/commons/thumb/a/a2/Edit-copy.svg/30px-Edit-copy.svg.png";
				copybutton.title = texts.copy;
				copybutton.decoding = "async";
				header.appendChild(copybutton);
	
				var logo = document.createElement("img");
				logo.style.width = "15px";
				logo.style.height = "15px";
				logo.src = "//upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Erioll_world.svg/15px-Erioll_world.svg.png";
				logo.title = texts.logoTitle;
				logo.decoding = "async";
				header.appendChild(logo);
				header.appendChild(document.createTextNode(texts.credits));
	    		dynDiv.appendChild(header);
	    		
	    		var cvalNode = document.createElement("div");
	    		cvalNode.appendChild(document.createTextNode(cval));
	    		cvalNode.className = "DECpuCval";
				cvalNode.style.clear = "left";
				cvalNode.style.lineHeight = 1.5;
				//cvalNode.style.textAlign = "center";
				cvalNode.style.padding = "4px 0px";
				cvalNode.style.whiteSpace = "nowrap";

	    		dynDiv.appendChild(cvalNode);
	    		
	    		dynDiv.className = "DECpu";
	    		dynDiv.style.position = "absolute";
	    		dynDiv.style.width = "180px";
	    		dynDiv.style.border = "1px solid";
	    		dynDiv.style.background = "#ddd";
	    		dynDiv.style.padding = "2px 5px";
	    		dynDiv.style.display="none";
	    		dynDiv.style.left="20px";
	    		dynDiv.style.top="20px";
	    		dynDiv.style.textAlign="left";
	    		dynDiv.style.zIndex = "200";
	    		
	    		// need intermediate parent for positioning
	    		var relParent = document.createElement("div");
	    		relParent.style.position = "relative";
	    		//relParent.style.width = "210px";
	    		relParent.style.width="0";
	    		relParent.style.height="0";
	    		relParent.style.display="inline";

	    		relParent.append(dynDiv);
	    		parentNode.prepend(relParent);
	    		var rectDiv = relParent.getBoundingClientRect();
	    		var bodyDiv = $("body")[0].getBoundingClientRect();
	    		if (rectDiv.left + rectDiv.width + 210 > bodyDiv.right) {
	    			dynDiv.style.left = (parseInt(dynDiv.style.left, 10) - (210-(Math.round (bodyDiv.right-rectDiv.right))))+"px";
	    		}

	    		parentNode.addEventListener("mouseenter", fadeInPopup); 
	
	    		dynDiv.addEventListener("click", fadeOutPopup);
				
				// putting the function to outer scope creates an exception
				// uncaught (in promise) DOMException: clipboard write was blocked due to lack of user activation.
				copybutton.addEventListener("click", function(event) {
						var nodes = $(event.target).closest('.DECpu').find('.DECpuCval');
						if (nodes) {
							navigator.clipboard.writeText(nodes[0].childNodes[0].nodeValue);
						}
					    return false;
					});
	
			}
		}
	});
}( window.mediaWiki, window.jQuery ) );