2020-02-13 19:58:27 +03:00
|
|
|
function remoteRender(event) {
|
|
|
|
const data = event.data;
|
|
|
|
|
2021-03-09 22:54:20 +03:00
|
|
|
const img = document.createElement("span"); // we'll mask it as an image
|
2020-02-13 19:58:27 +03:00
|
|
|
img.id = "img";
|
|
|
|
|
|
|
|
const a = document.createElement("a");
|
|
|
|
a.id = "a";
|
2020-02-24 01:14:29 +03:00
|
|
|
a.rel = "noreferrer noopener";
|
2020-02-13 19:58:27 +03:00
|
|
|
a.download = data.download;
|
|
|
|
a.style = data.style;
|
|
|
|
a.style.fontFamily = "Arial, Helvetica, Sans-Serif";
|
|
|
|
a.href = window.URL.createObjectURL(data.blob);
|
|
|
|
a.appendChild(img);
|
|
|
|
a.appendChild(document.createTextNode(data.textContent));
|
|
|
|
|
2021-03-09 22:54:20 +03:00
|
|
|
// Apply image style after so we can steal the anchor's colour.
|
|
|
|
// Style copied from a rendered version of mx_MFileBody_download_icon
|
|
|
|
img.style = "" +
|
|
|
|
"width: 12px; height: 12px;" +
|
|
|
|
"-webkit-mask-size: 12px;" +
|
|
|
|
"mask-size: 12px;" +
|
|
|
|
"-webkit-mask-position: center;" +
|
|
|
|
"mask-position: center;" +
|
|
|
|
"-webkit-mask-repeat: no-repeat;" +
|
|
|
|
"mask-repeat: no-repeat;" +
|
|
|
|
`-webkit-mask-image: url('${data.imgSrc}');` +
|
|
|
|
`mask-image: url('${data.imgSrc}');` +
|
|
|
|
`background-color: ${a.style.color};` +
|
|
|
|
"display: inline-block;";
|
|
|
|
|
2020-02-13 19:58:27 +03:00
|
|
|
const body = document.body;
|
|
|
|
// Don't display scrollbars if the link takes more than one line to display.
|
|
|
|
body.style = "margin: 0px; overflow: hidden";
|
|
|
|
body.appendChild(a);
|
2020-03-03 16:23:33 +03:00
|
|
|
|
|
|
|
if (event.data.auto) {
|
|
|
|
a.click(); // try to trigger download automatically
|
|
|
|
}
|
2020-02-13 19:58:27 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
window.onmessage = function(e) {
|
2021-02-16 21:03:12 +03:00
|
|
|
if (e.origin === window.location.origin) {
|
2020-02-13 19:58:27 +03:00
|
|
|
if (e.data.blob) remoteRender(e);
|
|
|
|
}
|
|
|
|
};
|