Skip to content

Instantly share code, notes, and snippets.

@joekarma

joekarma/binary-transport.js

Last active May 27, 2018 18:33
Show Gist options
  • Save joekarma/2ddca8782fc9a869df6d4501da433698 to your computer and use it in GitHub Desktop.
Save joekarma/2ddca8782fc9a869df6d4501da433698 to your computer and use it in GitHub Desktop.
Download ZIP
Automatically generate zip file of HealthLink BC's MHSU services in various formats. Uses binary ajax transport to preserve encoding.
Raw
binary-transport.js
/**
*
* jquery.binarytransport.js
*
* @description. jQuery ajax transport for making binary data type requests.
* @version 1.0
* @author Henry Algus <henryalgus@gmail.com>
*
*/
// use this transport for "binary" data type
$.ajaxTransport("+binary", function(options, originalOptions, jqXHR){
// check for conditions and support for blob / arraybuffer response type
if (window.FormData && ((options.dataType && (options.dataType == 'binary')) || (options.data && ((window.ArrayBuffer && options.data instanceof ArrayBuffer) || (window.Blob && options.data instanceof Blob)))))
{
return {
// create new XMLHttpRequest
send: function(headers, callback){
// setup all variables
var xhr = new XMLHttpRequest(),
url = options.url,
type = options.type,
async = options.async || true,
// blob or arraybuffer. Default is blob
dataType = options.responseType || "blob",
data = options.data || null,
username = options.username || null,
password = options.password || null;
xhr.addEventListener('load', function(){
var data = {};
data[options.dataType] = xhr.response;
// make callback and send data
callback(xhr.status, xhr.statusText, data, xhr.getAllResponseHeaders());
});
xhr.open(type, url, async, username, password);
// setup custom headers
for (var i in headers ) {
xhr.setRequestHeader(i, headers[i] );
}
xhr.responseType = dataType;
xhr.send(data);
},
abort: function(){
jqXHR.abort();
}
};
}
});
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Download Zip File</title>
<style>
body {
background-color: #white;
text-align: center;
margin: 2em;
}
a {
color: beige;
text-decoration: none;
color: skyblue;
font-family: Sunflower;
text-align: center;
font-size: 2em;
line-height: 1.4em;
text-decoration: underline;
}
a:hover {
background-color: #444;
text-decoration: none;
}
#loader {
display: none;
}
.loading {
color: silver;
cursor: default;
text-decoration: none;
pointer-events: none;
}
.loading #loader {
display: block;
margin: 10px auto;
vertical-align: middle;
width: 1em; height: 1em;
left: 0; top: 0;
}
</style>
<link href="https://fonts.googleapis.com/css?family=Sunflower:300" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="binary-transport.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.5/jszip.min.js"></script>
</head>
<body>
<a href="javascript:void(0);" id="download-zip-file">Click here to download a zip file of DataBC's MHSU information <img id="loader" src="three-dots.svg" width="20" height="20"></a>
<script src="script.js"></script>
</body>
</html>
Raw
script.js
function downloadZipFileOfHealthServices() {
var urls = [
"https://catalogue.data.gov.bc.ca/dataset/2e469ff2-dadb-45ea-af9d-f5683a4b9465/resource/ff7254e9-2a60-467b-bc90-18b5b94e7aef/download/healthlinkbc-mhsu-health-services.csv",
"https://catalogue.data.gov.bc.ca/dataset/2e469ff2-dadb-45ea-af9d-f5683a4b9465/resource/de425d68-a87f-44ce-ab4d-fcb514c04975/download/mental-health.csv",
"https://catalogue.data.gov.bc.ca/dataset/2e469ff2-dadb-45ea-af9d-f5683a4b9465/resource/48901888-a10f-418b-9172-bee09ecd6725/download/mental-health.kml"
];
downloadUrlsAsZip(createZipFileNameForHealthServices(), urls);
}
function createZipFileNameForHealthServices() {
var d = new Date;
return "mhsu_services_from_databc_" + moment().format("YYYYMMDD_HHmm") + ".zip"
}
function downloadUrlsAsZip(fileName, urls) {
jQuery("#download-zip-file").addClass("loading");
jQuery.when.apply(
jQuery,
urls.map(function(u) {
var result = new jQuery.Deferred;
var fileName = u.match(/\/([^\/]+)$/)[1];
jQuery.ajax({
url: u,
type: "GET",
dataType: "binary",
processData: false,
success: function(data) {
result.resolve({"fileName" : fileName, "data" : data});
}
});
return result;
})
).then(
function() {
var zip = new JSZip();
[].map.call(arguments, function(a) {
zip.file(a.fileName, a.data);
});
zip.generateAsync({type:"blob"})
.then(function(content) {
jQuery("#download-zip-file").removeClass("loading");
saveAs(content, fileName);
});
}
);
}
jQuery("#download-zip-file").click(downloadZipFileOfHealthServices)
Display the source blob
Display the rendered blob
Raw
three-dots.svg
<!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
<svg width="120" height="30" viewBox="0 0 120 30" xmlns="http://www.w3.org/2000/svg" fill="skyblue">
<circle cx="15" cy="15" r="15">
<animate attributeName="r" from="15" to="15"
begin="0s" dur="0.8s"
values="15;9;15" calcMode="linear"
repeatCount="indefinite" />
<animate attributeName="fill-opacity" from="1" to="1"
begin="0s" dur="0.8s"
values="1;.5;1" calcMode="linear"
repeatCount="indefinite" />
</circle>
<circle cx="60" cy="15" r="9" fill-opacity="0.3">
<animate attributeName="r" from="9" to="9"
begin="0s" dur="0.8s"
values="9;15;9" calcMode="linear"
repeatCount="indefinite" />
<animate attributeName="fill-opacity" from="0.5" to="0.5"
begin="0s" dur="0.8s"
values=".5;1;.5" calcMode="linear"
repeatCount="indefinite" />
</circle>
<circle cx="105" cy="15" r="15">
<animate attributeName="r" from="15" to="15"
begin="0s" dur="0.8s"
values="15;9;15" calcMode="linear"
repeatCount="indefinite" />
<animate attributeName="fill-opacity" from="1" to="1"
begin="0s" dur="0.8s"
values="1;.5;1" calcMode="linear"
repeatCount="indefinite" />
</circle>
</svg>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment