Better user notification if a.download attribute is not supported

This commit is contained in:
Frederic Junod
2013-09-09 09:55:26 +02:00
parent 5861f6a148
commit 77c7d02873
2 changed files with 20 additions and 7 deletions

View File

@@ -31,6 +31,10 @@
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
<div id="no-download" class="alert alert-error" style="display: none">
This example requires a browser that supports the
<a href="http://caniuse.com/#feat=download">link download</a> attribute.
</div>
<a id="export-jpeg" class="btn" download="map.jpeg"><i class="icon-download"></i> Export JPEG</a>
<a id="export-png" class="btn" download="map.png"><i class="icon-download"></i> Export PNG</a>
</div>

View File

@@ -20,11 +20,20 @@ var map = new ol.Map({
});
var exportJPEGElement = document.getElementById('export-jpeg');
exportJPEGElement.addEventListener('click', function(e) {
e.target.href = map.getRenderer().getCanvas().toDataURL('image/jpeg');
}, false);
var exportPNGElement = document.getElementById('export-png');
exportPNGElement.addEventListener('click', function(e) {
e.target.href = map.getRenderer().getCanvas().toDataURL('image/png');
}, false);
if ('download' in exportJPEGElement && 'download' in exportPNGElement) {
exportJPEGElement.addEventListener('click', function(e) {
e.target.href = map.getRenderer().getCanvas().toDataURL('image/jpeg');
}, false);
exportPNGElement.addEventListener('click', function(e) {
e.target.href = map.getRenderer().getCanvas().toDataURL('image/png');
}, false);
} else {
var info = document.getElementById('no-download');
/**
* display error message
*/
info.style.display = '';
}