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

Add copytoclipboard control to download entry

pull/319/head
Manuel Roth 2016-05-13 13:06:06 +02:00
rodzic 211baf5d14
commit 93e122e080
5 zmienionych plików z 93 dodań i 10 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

1
_includes/google_analytics.html
Wyświetl plik

@ -40,3 +40,4 @@
</script>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<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"></script>

60
_sass/_custom.scss
Wyświetl plik

@ -232,3 +232,63 @@ body{
display: none;
padding: 0px 0px !important;
}
.clipboard {
display: flex;
display: -webkit-flex; /* Safari */
flex-direction: row;
-webkit-flex-direction: row;
}
.clipboard-input {
width: 90%;
border-radius: 3px;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-color: rgb(213, 213, 213);
color: black;
}
.clipboard-input:focus {
border-color: rgb(213, 213, 213);
}
.clipboard-button {
position: relative;
display: inline-block;
padding: 6px 12px;
cursor: pointer;
background-color: #eee;
background-image: linear-gradient(#fcfcfc, #eee);
border: 1px solid #d5d5d5;
border-radius: 3px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
-webkit-appearence: none;
height: 37px;
width: auto;
}
.clipboard-button:focus {
text-decoration: none;
border-color: #51a7e8;
outline: none;
box-shadow:0 0 5px rgba(81,167,232,0.5);
}
.clipboard-button:hover {
text-decoration: none;
background-color: #ddd;
background-image: linear-gradient(#eee, #ddd);
border-color: #ccc;
}
.clipboard-img {
position: relative;
height: 15px;
width: inherit;
margin: 0px !important;
}

24
downloads.md
Wyświetl plik

@ -41,21 +41,33 @@ the [Open Database License](https://tldrlegal.com/license/odc-open-database-lice
MD5: 8f72dc1279d27f0b3e29d27957c7ad7a
</div>
</div>
<div class="col12 download-item" onclick="location.href='https://osm2vectortiles-downloads.os.zhdk.cloud.switch.ch/v1.0/extracts/world_z0-z5.mbtiles'">
<div class="col4 download-title">
<div class="col12 download-item">
<div class="col4 download-title" onclick="location.href='https://osm2vectortiles-downloads.os.zhdk.cloud.switch.ch/v1.0/extracts/world_z0-z5.mbtiles'">
Planet from zoom level 0 to 5
</div>
<div class="col2">
<div class="col2" onclick="location.href='https://osm2vectortiles-downloads.os.zhdk.cloud.switch.ch/v1.0/extracts/world_z0-z5.mbtiles'">
20 MB
</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">
<img src="/img/clippy.svg" class="clipboard-img" alt="Copy to clipboard">
</button>
</div>
</div>
<div class="col12 download-item" onclick="location.href='https://osm2vectortiles-downloads.os.zhdk.cloud.switch.ch/v1.0/extracts/world_z0-z8.mbtiles'">
<div class="col4 download-title">
<div class="col12 download-item">
<div class="col4 download-title" onclick="location.href='https://osm2vectortiles-downloads.os.zhdk.cloud.switch.ch/v1.0/extracts/world_z0-z8.mbtiles'">
Planet from zoom level 0 to 8
</div>
<div class="col2">
<div class="col2" onclick="location.href='https://osm2vectortiles-downloads.os.zhdk.cloud.switch.ch/v1.0/extracts/world_z0-z8.mbtiles'">
411 MB
</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">
<img src="/img/clippy.svg" class="clipboard-img" alt="Copy to clipboard">
</button>
</div>
</div>
</div>
<div id="country" class="col12">

3
img/clippy.svg 100644
Wyświetl plik

@ -0,0 +1,3 @@
<svg height="1024" width="896" xmlns="http://www.w3.org/2000/svg">
<path 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>
Side by Side

Po

Szerokość:  |  Wysokość:  |  Rozmiar: 519 B

15
js/index.js
Wyświetl plik

@ -59,13 +59,15 @@ function init() {
var country = document.querySelector('#country');
if(country) {
var template = '<div class="col12 download-item" onclick="{{{url}}}"><div class="col4 download-title">{{ title }}</div><div class="col2">{{ size }}</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/clippy.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;
data.forEach(function(d) {
var data = {
"url": "location.href='https://osm2vectortiles-downloads.os.zhdk.cloud.switch.ch/v1.0/extracts/" + d.extract + ".mbtiles'",
"link": "location.href='https://osm2vectortiles-downloads.os.zhdk.cloud.switch.ch/v1.0/extracts/" + d.extract + ".mbtiles'",
"url": "https://osm2vectortiles-downloads.os.zhdk.cloud.switch.ch/v1.0/extracts/" + d.extract + ".mbtiles'",
"extract_name": d.extract,
"title": d.country,
"size": "20 MB"
};
@ -95,13 +97,15 @@ function init() {
var city = document.querySelector('#city');
if(city) {
var template = '<div class="col12 download-item" onclick="{{{url}}}"><div class="col4 download-title">{{ title }}</div><div class="col2">{{ size }}</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/clippy.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;
data.forEach(function(d) {
var data = {
"url": "location.href='https://osm2vectortiles-downloads.os.zhdk.cloud.switch.ch/v1.0/extracts/" + d.extract + ".mbtiles'",
"link": "location.href='https://osm2vectortiles-downloads.os.zhdk.cloud.switch.ch/v1.0/extracts/" + d.extract + ".mbtiles'",
"url": "https://osm2vectortiles-downloads.os.zhdk.cloud.switch.ch/v1.0/extracts/" + d.extract + ".mbtiles'",
"extract_name": d.extract,
"title": d.country + ", " + d.city,
"size": "20 MB"
};
@ -111,6 +115,9 @@ function init() {
});
});
}
// instantiate clipboard
new Clipboard('.clipboard-button');
}
window.onload = init;