Add Ukraini dialog (#8177)

* Add Ukraini dialog

* Fix lint

* Make it more keyboard-user friendly

* Change close element to button and add dialog as first element

docs/SlavaUkraini/dialog.js

@@ -0,0 +1,44 @@
+var SESSION_KEY = 'ukraini-dialog-session';
+var ONE_DAY_MILLI_SEC = 24 * 60 * 60 * 1000;
+
+function openSlavaUkrainiDialog() {
+
+	if (sessionStorage) {
+		var session = sessionStorage.getItem(SESSION_KEY);
+		// open the dialog only every 24 hours
+		if (session && Date.now() - session < ONE_DAY_MILLI_SEC) {
+			return;
+		}
+	}
+
+	var html = '<div class=\'container iframe-container\'><iframe src=\'/SlavaUkraini/\'></iframe><button type="submit" class=\'close-dialog\' aria-label=\'close\'>&times;</button></div>';
+
+	var dialog = document.createElement('div');
+	dialog.id = 'ukraini-dialog';
+	dialog.innerHTML = html;
+
+	document.body.insertBefore(dialog, document.body.firstChild);
+	document.body.classList.add('overflowHidden');
+
+	setTimeout(function () {
+		dialog.focus();
+	}, 100);
+
+	var closeBtn = document.querySelector('.close-dialog');
+	closeBtn.addEventListener('click', function () {
+		var dialog = document.getElementById('ukraini-dialog');
+		document.body.removeChild(dialog);
+		document.body.classList.remove('overflowHidden');
+		if (sessionStorage) {
+			sessionStorage.setItem(SESSION_KEY, Date.now());
+		}
+	});
+
+	// keep focus in dialog
+	// https://css-tricks.com/a-css-approach-to-trap-focus-inside-of-an-element/
+	dialog.addEventListener('transitionend', function () {
+		dialog.querySelector('iframe').focus();
+	});
+}
+
+openSlavaUkrainiDialog();

docs/SlavaUkraini/docs/css/reference.css

@@ -1,6 +1,6 @@
 html {
-	scroll-padding-top: 5em;
+    scroll-padding-top: 5em;
-	overflow: auto;
+    overflow: auto;
 }
 
 h2 {

docs/SlavaUkraini/index.md

@@ -26,20 +26,5 @@ It is chilling to see Leaflet being used for [documenting Russia's war crimes](h
 
 If you support the actions of the Russian government (even after reading all this), do everyone else a favour and [carry some seeds in your pocket](https://www.theguardian.com/world/video/2022/feb/25/ukrainian-woman-sunflower-seeds-russian-soldiers-video).
 
-<p class="quiet">(The API documentation, plugins list, download info, and all other contents of the website have been temporarily moved <a href="SlavaUkraini/">over here</a>)</p>
-
 Yours truly,
 Leaflet maintainers.
-
-<script>
-	var referrer = document.referrer;
-	var host = window.location.host + '/';
-	if (referrer && referrer.indexOf(host) > -1) {
-		var url = referrer.split(host);
-		var target = url[1];
-		if (target) {
-			var link = document.querySelector('a[href="SlavaUkraini/"]');
-			link.href = 'https://leafletjs.com/SlavaUkraini/' + target;
-		}
-	}
-</script>

docs/_layouts/v2.html

@@ -145,6 +145,7 @@
 	})();
 </script>
 
+<script src="{{ root }}SlavaUkraini/dialog.js"></script>
 <script src="{{ root }}docs/js/docs.js"></script>
 {% if page.title == 'Documentation' %}
 <script src="{{ root }}docs/js/reference.js"></script>

docs/docs/css/main.css

@@ -1118,3 +1118,66 @@ iframe[src*='youtube.com'] {
 	padding: 5px 10px;
 	border-radius: 10px;
 }
+
+/** Begin Slava Ukraini Dialog **/
+#ukraini-dialog {
+	position: fixed;
+	width: 100%;
+	height: 100%;
+	top: 0;
+	z-index: 10000;
+	background: rgba(0, 0, 0, 0.24);
+	padding-top: 20px;
+}
+
+/*
+keep focus in dialog
+https://css-tricks.com/a-css-approach-to-trap-focus-inside-of-an-element/
+ */
+#ukraini-dialog:not(:focus-within) {
+	background-color:rgba(0, 0, 0, 0.25);
+	transition: background-color 0.01s;
+}
+
+#ukraini-dialog .iframe-container{
+	height: 90%;
+	border-radius: 5px;
+	padding: 10px 0px;
+	background: #fff;
+	margin-bottom: 10px;
+	position: relative;
+}
+
+#ukraini-dialog iframe {
+	width: 100%;
+	height: 100%;
+}
+
+.overflowHidden {
+	overflow: hidden !important;
+}
+
+.close-dialog{
+  width: 40px;
+  height: 40px;
+  top: 10px;
+  right: 20px;
+  position: absolute;
+  font-size: 40px;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
+}
+
+.close-dialog{
+  color: #000;
+}
+
+.close-dialog:hover, .close-dialog:focus{
+	color: #797979;
+}
+
+/** End Slava Ukraini Dialog **/

docs/docs/css/reference.css

@@ -1,6 +1,6 @@
 html {
-    scroll-padding-top: 5em;
+	scroll-padding-top: 5em;
-    overflow: auto;
+	overflow: auto;
 }
 
 h2 {

docs/docs/js/docs.js

@@ -73,7 +73,7 @@ if (toc) {
 
 	window.addEventListener('load', function () {
 		var currentHash = window.location.hash;
-		if (!currentHash) return;
+		if (!currentHash) { return; }
 		var elem = document.querySelector(currentHash);
 
 		if (elem.tagName === 'H2' || elem.tagName === 'H4') {

docs/examples/layers-control/example.md

@@ -32,12 +32,12 @@ title: Layers Control Tutorial
 	};
 
 	var layerControl = L.control.layers(baseLayers, overlays).addTo(map);
-	var crownHill = L.marker([39.75, -105.09]).bindPopup('This is Crown Hill Park.'),
+	var crownHill = L.marker([39.75, -105.09]).bindPopup('This is Crown Hill Park.');
-	    rubyHill = L.marker([39.68, -105.00]).bindPopup('This is Ruby Hill Park.');
+	var rubyHill = L.marker([39.68, -105.00]).bindPopup('This is Ruby Hill Park.');
 
 	var parks = L.layerGroup([crownHill, rubyHill]);
 
 	var satellite = L.tileLayer(mbUrl, {id: 'mapbox/satellite-v9', tileSize: 512, zoomOffset: -1, attribution: mbAttr});
-	layerControl.addBaseLayer(satellite, "Satellite");
+	layerControl.addBaseLayer(satellite, 'Satellite');
-	layerControl.addOverlay(parks, "Parks");
+	layerControl.addOverlay(parks, 'Parks');
 </script>