TeaSpeak-Client/modules/core/url-preview/html/inject.ts

118 lines
4.8 KiB
TypeScript

declare let __teaclient_preview_notice: () => any;
declare let __teaclient_preview_error;
const electron = require("electron");
const log_prefix = "[TeaSpeak::Preview] ";
const html_overlay =
"<div style='position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 99999999999999999999999999;'>" +
"<div style='\n" +
"font-family: \"Open Sans\"," +
"sans-serif;\n" +
"width: 100%;\n" +
"margin: 0;\n" +
"height: 40px;\n" +
"font-size: 17px;\n" +
"font-weight: 400;\n" +
"padding: .33em .5em;\n" +
"color: #5c5e60;\n" +
"position: fixed;\n" +
"background-color: white;\n" +
"box-shadow: 0 1px 3px 2px rgba(0,0,0,0.15);" +
"display: flex;\n" +
"flex-direction: row;\n" +
"justify-content: center;" +
"align-items: center;'" +
">" +
"<div style='margin-right: .67em;display: inline-block;line-height: 1.3;text-align: center'>You're in TeaWeb website preview mode. Click <a href='#' class='button-open'>here</a> to open the website in the browser</div>" +
"</div>" +
"<div style='display: table-cell;width: 1.6em;'>" +
"<a style='font-size: 14px;\n" +
"top: 13px;\n" +
"right: 25px;\n" +
"width: 15px;\n" +
"height: 15px;\n" +
"opacity: .3;\n" +
"color: #000;\n" +
"cursor: pointer;\n" +
"position: absolute;\n" +
"text-align: center;\n" +
"line-height: 15px;\n" +
"z-index: 1000;\n" +
"text-decoration: none;'" +
"class='button-close'>" +
"✖" +
"</a>" +
"</div>" +
"</div>";
let _close_overlay: () => void;
let _inject_overlay = () => {
const element = document.createElement("div");
element.id = "TeaClient-Overlay-Container";
document.body.append(element);
element.innerHTML = html_overlay;
{
_close_overlay = () => {
console.trace(log_prefix + "Closing preview notice");
element.remove();
};
const buttons = element.getElementsByClassName("button-close");
if(buttons.length < 1) {
console.warn(log_prefix + "Failed to find close button for preview notice!");
} else {
for(const button of buttons) {
(<HTMLElement>button).onclick = _close_overlay;
}
}
}
{
const buttons = element.getElementsByClassName("button-open");
if(buttons.length < 1) {
console.warn(log_prefix + "Failed to find open button for preview notice!");
} else {
for(const element of buttons) {
(<HTMLElement>element).onclick = event => {
console.info(log_prefix + "Opening URL with default browser");
electron.remote.shell.openExternal(location.href, {
activate: true
}).catch(error => {
console.warn(log_prefix + "Failed to open URL in browser window: %o", error);
}).then(() => {
window.close();
});
};
}
}
}
};
/* Put this into the global scope. But we dont leek some nodejs stuff! */
console.log(log_prefix + "Script loaded waiting to be called!");
__teaclient_preview_notice = () => {
if(_inject_overlay) {
console.log(log_prefix + "TeaClient overlay called. Showing overlay.");
_inject_overlay();
} else {
console.warn(log_prefix + "TeaClient overlay called, but overlay method undefined. May an load error occured?");
}
};
const html_error = (error_code, error_desc, url) =>
"<div style='background-color: whitesmoke; padding: 40px; margin: 20px; font-family: consolas,serif;'>" +
"<h2 align=center>Oops, this page failed to load correctly.</h2>" +
"<p align=center><i>ERROR [ " + error_code + ", " + error_desc + " ]</i></p>" +
'<br/><hr/>' +
'<h4>Try this</h4>' +
'<li type=circle>Check your spelling - <b>"' + url + '".</b></li><br/>' +
'<li type=circle><a href="javascript:location.reload();">Refresh</a> the page.</li><br/>' +
'<li type=circle>Perform a <a href=javascript:location.href="https://www.google.com/search?q=' + url + '">search</a> instead.</li><br/>' +
"</div>";
__teaclient_preview_error = (error_code, error_desc, url) => {
document.body.innerHTML = html_error(decodeURIComponent(error_code), decodeURIComponent(error_desc), decodeURIComponent(url));
_inject_overlay = undefined;
if(_close_overlay) _close_overlay();
};