Add copy to clipboard for code example in maps section

_sass/_custom.scss

@@ -209,7 +209,7 @@ body{
 
 .download-item {
   background-color: white;
-  color: 44A886;
+  color: #44A886;
   font-size: 0.9em;
   font-family: 'Open Sans', Helvetica, Arial, sans-serif;
   border: 2px solid #53b985;
@@ -294,11 +294,51 @@ body{
   margin: 0px !important;
 }
 
+.map-clipboard-button {
+  width: 100%;
+  height: 50px;
+  font-size: 14px;
+  line-height: 20px;
+  border-radius: 0 0 3px 3px;
+  border: none;
+  background-color: #44A886;
+  color: white;
+  font-weight: bold;
+  display: flex;
+  display: -webkit-flex; /* Safari */
+  flex-direction: row;
+  -webkit-flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+
+.map-clipboard-button:hover {
+  cursor: pointer;
+  background-color: #59C39F;
+}
+
+.map-clipboard-img {
+  height: 15px;
+  width: 15px;
+  margin: 0px !important;
+  margin-right: 7px !important;
+}
+
 #country, #city {
   display: none;
   padding: 0px 0px !important;
 }
 
-#basic, #streets {
+#basic, #streets, #dark, #light {
   display: none;
 }
+
+.gist-meta {
+  display: none;
+}
+
+.gist-file {
+  margin-bottom: 0 !important;
+  border-bottom: 0 !important;
+  border-radius: 0 !important;
+}

downloads.md

@@ -51,7 +51,7 @@ the [Open Database License](https://tldrlegal.com/license/odc-open-database-lice
 		<div class="col6 clipboard">
 			<input id="world_z0-z5" class="clipboard-input" value="https://osm2vectortiles-downloads.os.zhdk.cloud.switch.ch/v1.0/extracts/world_z0-z5.mbtiles">
 			<button class="clipboard-button" data-clipboard-target="#world_z0-z5">
-			    <img src="/img/clippy.svg" class="clipboard-img" alt="Copy to clipboard">
+			    <img src="/img/clipboard-black.svg" class="clipboard-img" alt="Copy to clipboard">
 			</button>
 		</div>
 	</div>
@@ -65,7 +65,7 @@ the [Open Database License](https://tldrlegal.com/license/odc-open-database-lice
 		<div class="col6 clipboard">
 			<input id="world_z0-z8" class="clipboard-input" value="https://osm2vectortiles-downloads.os.zhdk.cloud.switch.ch/v1.0/extracts/world_z0-z8.mbtiles">
 			<button class="clipboard-button" data-clipboard-target="#world_z0-z8">
-			    <img src="/img/clippy.svg" class="clipboard-img" alt="Copy to clipboard">
+			    <img src="/img/clipboard-black.svg" class="clipboard-img" alt="Copy to clipboard">
 			</button>
 		</div>
 	</div>

img/clipboard-white.svg

@@ -0,0 +1,3 @@
+<svg height="1024" width="896" xmlns="http://www.w3.org/2000/svg">
+  <path fill="white" d="M128 768h256v64H128v-64z m320-384H128v64h320v-64z m128 192V448L384 640l192 192V704h320V576H576z m-288-64H128v64h160v-64zM128 704h160v-64H128v64z m576 64h64v128c-1 18-7 33-19 45s-27 18-45 19H64c-35 0-64-29-64-64V192c0-35 29-64 64-64h192C256 57 313 0 384 0s128 57 128 128h192c35 0 64 29 64 64v320h-64V320H64v576h640V768zM128 256h512c0-35-29-64-64-64h-64c-35 0-64-29-64-64s-29-64-64-64-64 29-64 64-29 64-64 64h-64c-35 0-64 29-64 64z" />
+</svg>

js/index.js

@@ -59,7 +59,7 @@ function init() {
 
   var country = document.querySelector('#country');
   if(country) {
-    var template = '<div class="col12 download-item"><div class="col4 download-title" onclick="{{{ link }}}">{{ title }}</div><div class="col2" onclick="{{{ link }}}">{{ size }}</div><div class="col6 clipboard"><input id="{{ extract_name }}" class="clipboard-input" value="{{ url }}"><button class="clipboard-button" data-clipboard-target="#{{ extract_name }}"><img src="/img/clippy.svg" class="clipboard-img" alt="Copy to clipboard"></button></div></div>';
+    var template = '<div class="col12 download-item"><div class="col4 download-title" onclick="{{{ link }}}">{{ title }}</div><div class="col2" onclick="{{{ link }}}">{{ size }}</div><div class="col6 clipboard"><input id="{{ extract_name }}" class="clipboard-input" value="{{ url }}"><button class="clipboard-button" data-clipboard-target="#{{ extract_name }}"><img src="/img/clipboard-black.svg" class="clipboard-img" alt="Copy to clipboard"></button></div></div>';
     Mustache.parse(template);
     d3.tsv("https://raw.githubusercontent.com/osm2vectortiles/osm2vectortiles/master/src/create-extracts/country_extracts.tsv", function(error, data) {
       if (error) throw error;
@@ -97,7 +97,7 @@ function init() {
 
   var city = document.querySelector('#city');
   if(city) {
-    var template = '<div class="col12 download-item"><div class="col4 download-title" onclick="{{{ link }}}">{{ title }}</div><div class="col2" onclick="{{{ link }}}">{{ size }}</div><div class="col6 clipboard"><input id="{{ extract_name }}" class="clipboard-input" value="{{ url }}"><button class="clipboard-button" data-clipboard-target="#{{ extract_name }}"><img src="/img/clippy.svg" class="clipboard-img" alt="Copy to clipboard"></button></div></div>';
+    var template = '<div class="col12 download-item"><div class="col4 download-title" onclick="{{{ link }}}">{{ title }}</div><div class="col2" onclick="{{{ link }}}">{{ size }}</div><div class="col6 clipboard"><input id="{{ extract_name }}" class="clipboard-input" value="{{ url }}"><button class="clipboard-button" data-clipboard-target="#{{ extract_name }}"><img src="/img/clipboard-black.svg" class="clipboard-img" alt="Copy to clipboard"></button></div></div>';
     Mustache.parse(template);
     d3.tsv("https://raw.githubusercontent.com/osm2vectortiles/osm2vectortiles/master/src/create-extracts/city_extracts.tsv", function(error, data) {
       if (error) throw error;
@@ -116,7 +116,7 @@ function init() {
     });
   }
 
-  // instantiate clipboard
+  // instantiate download clipboard
   new Clipboard('.clipboard-button');
 }
 window.onload = init;

maps/index.md

@@ -30,6 +30,7 @@ published: true
 		    zoom: 11
 		}).addControl(new mapboxgl.Navigation());
 		vectorMap.scrollZoom.disable();
+		var selectedStyle = 0;
 	}
 
 	var bright = document.getElementById("vector-bright");
@@ -42,6 +43,7 @@ published: true
 		document.querySelector("#streets").style.display = "none";
 		document.querySelector("#dark").style.display = "none";
 		document.querySelector("#light").style.display = "none";
+		selectedStyle = 0;
 	}
 	var basic = document.getElementById("vector-basic");
 	basic.onclick = function(e) {
@@ -53,6 +55,7 @@ published: true
 		document.querySelector("#streets").style.display = "none";
 		document.querySelector("#dark").style.display = "none";
 		document.querySelector("#light").style.display = "none";
+		selectedStyle = 1;
 	}
 	var streets = document.getElementById("vector-streets");
 	streets.onclick = function(e) {
@@ -64,6 +67,7 @@ published: true
 		document.querySelector("#streets").style.display = "block";
 		document.querySelector("#dark").style.display = "none";
 		document.querySelector("#light").style.display = "none";
+		selectedStyle = 2;
 	}
 	var dark = document.getElementById("vector-dark");
 	dark.onclick = function(e) {
@@ -75,6 +79,7 @@ published: true
 		document.querySelector("#streets").style.display = "none";
 		document.querySelector("#dark").style.display = "block";
 		document.querySelector("#light").style.display = "none";
+		selectedStyle = 3;
 	}
 	var light = document.getElementById("vector-light");
 	light.onclick = function(e) {
@@ -86,7 +91,14 @@ published: true
 		document.querySelector("#streets").style.display = "none";
 		document.querySelector("#dark").style.display = "none";
 		document.querySelector("#light").style.display = "block";
+		selectedStyle = 4;
 	}
+	// instantiate map clipboard
+	  new Clipboard('.map-clipboard-button', {
+	    text: function(trigger) {
+	        return document.getElementsByClassName("gist-data")[selectedStyle].innerText;
+	    }
+	});
 </script>
 <div>
 	<div id="bright">
@@ -105,3 +117,9 @@ published: true
 		<script src="https://gist.github.com/manuelroth/fdb546e2abf91ec1b3b3f9b7b253aec3.js"></script>
 	</div>
 </div>
+<div id="map-clipboard">
+	<button class="map-clipboard-button" aria-label="bla">
+	    <img src="/img/clipboard-white.svg" class="map-clipboard-img" alt="Copy to clipboard">
+	    <div>Copy example</div>
+	</button>
+</div>