mirror
/
osm2vectortiles
kopia lustrzana https://github.com/osm2vectortiles/osm2vectortiles
1
0
Forkuj 0
Kod Zgłoszenia Projekty Wydania Wiki Aktywność

Add hint to copy to clipboard buttons in map and downloads

pull/319/head
Manuel Roth 2016-05-14 11:59:14 +02:00
rodzic 96257dc7b1
commit 23c255baba
4 zmienionych plików z 20 dodań i 7 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

1
_layouts/default.html
Wyświetl plik

@ -13,6 +13,7 @@
{% include facebook_tags.html %}
{% include twitter_tags.html %}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/hint.css/2.2.1/hint.min.css" />
<link href="/base.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.2.1/mustache.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.10/clipboard.min.js" charset="utf-8"></script>

4
downloads.md
Wyświetl plik

@ -50,7 +50,7 @@ the [Open Database License](https://tldrlegal.com/license/odc-open-database-lice
</div>
<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">
<button class="clipboard-button hint--bottom hint--rounded" data-hint="Copy to clipboard" data-clipboard-target="#world_z0-z5" onclick="setHint(this, 'Copied!')" onmouseout="setHint(this, 'Copy to clipboard')">
<img src="/img/clipboard-black.svg" class="clipboard-img" alt="Copy to clipboard">
</button>
</div>
@ -64,7 +64,7 @@ the [Open Database License](https://tldrlegal.com/license/odc-open-database-lice
</div>
<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">
<button class="clipboard-button hint--bottom hint--rounded" data-clipboard-target="#world_z0-z8" onclick="setHint(this, 'Copied!')" onmouseout="setHint(this, 'Copy to clipboard')">
<img src="/img/clipboard-black.svg" class="clipboard-img" alt="Copy to clipboard">
</button>
</div>

8
js/index.js
Wyświetl plik

@ -80,7 +80,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/clipboard-black.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 hint--bottom hint--rounded" data-clipboard-target="#{{ extract_name }}" onclick="setHint(this, \'Copied!\')" onmouseout="setHint(this, \'Copy to clipboard\')"><img src="/img/clipboard-black.svg" class="clipboard-img" alt="Copy to clipboard"></button></div></div>';
Mustache.parse(template);
getData("https://raw.githubusercontent.com/osm2vectortiles/osm2vectortiles/master/src/create-extracts/country_extracts.tsv", function(data) {
data.forEach(function(d) {
@ -117,7 +117,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/clipboard-black.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 hint--bottom hint--rounded" data-clipboard-target="#{{ extract_name }}" onclick="setHint(this, \'Copied!\')" onmouseout="setHint(this, \'Copy to clipboard\')"><img src="/img/clipboard-black.svg" class="clipboard-img" alt="Copy to clipboard"></button></div></div>';
Mustache.parse(template);
getData("https://raw.githubusercontent.com/osm2vectortiles/osm2vectortiles/master/src/create-extracts/city_extracts.tsv", function(data) {
data.forEach(function(d) {
@ -157,3 +157,7 @@ function showCity() {
document.querySelector("#country").style.display = "none";
document.querySelector("#planet").style.display = "none";
}
function setHint(element, hint) {
element.setAttribute("data-hint", hint)
}

14
maps/index.md
Wyświetl plik

@ -99,11 +99,19 @@ published: true
selectedStyle = 4;
}
// instantiate map clipboard
new Clipboard('.map-clipboard-button', {
new Clipboard('.map-clipboard-button', {
text: function(trigger) {
return document.getElementsByClassName("gist-data")[selectedStyle].innerText;
}
});
function showCopiedHint() {
var mapClipboardText = document.querySelector("#map-clipboard-text")
mapClipboardText.innerText = "Copied to clipboard!";
setTimeout(function(){
mapClipboardText.innerText = "Copy example";
}, 800);
}
</script>
<div>
<div id="bright">
@ -123,8 +131,8 @@ published: true
</div>
</div>
<div id="map-clipboard">
<button class="map-clipboard-button">
<button class="map-clipboard-button" onclick="showCopiedHint()">
<img src="/img/clipboard-white.svg" class="map-clipboard-img" alt="Copy to clipboard">
<div>Copy example</div>
<div id="map-clipboard-text">Copy example</div>
</button>
</div>