tools.cobbled-paths/templates/drawing.html

84 lines
2.7 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="/static/js/FileSaver.js"></script>
<link rel="stylesheet" type="text/css" href="/static/css/basics.css" />
<link rel="stylesheet" type="text/css" href="/static/css/svg.css" />
</head>
<body>
{{ svg|safe }}
<div id="save-buttons">
<label for="text-checkbox"
title="display the remaining text and markers in the svg output in red">
preview</label>
<input id="text-checkbox" type="checkbox" class="body-class-check" value="check-text" data-name="c" data-frame="svg-iframe"/>
<button id="save-svg">get SVG</button>
<button id="save-hpgl">get HPGL</button>
</div>
<script>
function toggle_class(classname, val){
if(val){
document.body.classList.add(classname);
}
else{
document.body.classList.remove(classname);
}
}
let body_class_checkboxes = document.getElementsByClassName("body-class-check");
for(let checkbox of body_class_checkboxes){
let classname = checkbox.value;
checkbox.addEventListener('input', function(){
toggle_class(classname, checkbox.checked);
});
toggle_class(classname, checkbox.checked);
}
</script>
<script>
let save_button_svg = document.getElementById('save-svg');
save_button_svg.addEventListener('click', function(){
let url = document.URL,
parts = url.split('/'),
name = parts[parts.length-1],
svg_url = '/svg/' + name,
a = document.createElement('a');
a.href = svg_url;
a.setAttribute('download', 'download');
if (document.createEvent) {
const event = document.createEvent('MouseEvents');
event.initEvent('click', true, true);
a.dispatchEvent(event);
}
else {
a.click();
}
});
let save_button_hpgl = document.getElementById('save-hpgl');
save_button_hpgl.addEventListener('click', function () {
let url = document.URL,
parts = url.split('/'),
name = parts[parts.length-1],
hpgl_url = '/hpgl/' + name,
a = document.createElement('a');
a.href = hpgl_url;
a.setAttribute('download', 'download');
if (document.createEvent) {
const event = document.createEvent('MouseEvents');
event.initEvent('click', true, true);
a.dispatchEvent(event);
}
else {
a.click();
}
});
</script>
</body>
</html>