Doriane
2 months ago
18 changed files with 376 additions and 318 deletions
@ -0,0 +1,55 @@ |
|||
|
|||
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); |
|||
} |
|||
|
|||
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(); |
|||
} |
|||
}); |
|||
@ -0,0 +1,71 @@ |
|||
let button_pad = document.getElementById('button-pad'); |
|||
let button_svg = document.getElementById('button-svg'); |
|||
let svg_iframe = document.getElementById('svg-iframe'); |
|||
let pad_iframe = document.getElementById('pad-iframe'); |
|||
|
|||
let new_url = new URL(svg_iframe.src); |
|||
|
|||
function updateGET(frame, param, value){ |
|||
// object from GET parameters
|
|||
let [base_src, params_src] = frame.src.split("?"); |
|||
let params = new URLSearchParams(params_src); |
|||
// update param
|
|||
params.set(param, value); |
|||
// reconstituate URL
|
|||
let new_src = base_src + "?" + params.toString(); |
|||
// set and refresh
|
|||
frame.src = new_src; |
|||
} |
|||
|
|||
// --- pad go button
|
|||
if(button_pad){ |
|||
button_pad.addEventListener('click', function(){ |
|||
let input = document.getElementById(button_pad.dataset.use); |
|||
let value = input.value; |
|||
|
|||
let pad_src = pad_iframe.src; |
|||
pad_src = pad_src.split('-'); |
|||
pad_src[pad_src.length-1] = value; |
|||
pad_src = pad_src.join('-'); |
|||
pad_iframe.src = pad_src; |
|||
|
|||
let svg_src = svg_iframe.src; |
|||
svg_src = svg_src.split('/'); |
|||
svg_src[svg_src.length-1] = value; |
|||
svg_src = svg_src.join('/'); |
|||
|
|||
new_url = new URL(svg_src); |
|||
svg_iframe.src = new_url; |
|||
document.getElementById('main').classList.add("reload"); |
|||
}); |
|||
} |
|||
|
|||
// --- svg generation button
|
|||
if(button_svg){ |
|||
button_svg.addEventListener('click', function(){ |
|||
svg_iframe.src = new_url; |
|||
document.getElementById('main').classList.add("reload"); |
|||
}); |
|||
} |
|||
|
|||
// --- get-input but on the pad and checkbox but on the pad
|
|||
let inputs = document.getElementsByClassName('get-input'); |
|||
|
|||
for(let input of inputs){ |
|||
input.addEventListener('change', function(){ |
|||
let frame = document.getElementById(input.dataset.frame); |
|||
const url = new URL(frame.src); |
|||
|
|||
if(input.type == 'checkbox'){ |
|||
url.searchParams.set(input.dataset.name, input.checked); |
|||
} |
|||
else{ |
|||
url.searchParams.set(input.dataset.name, input.value); |
|||
} |
|||
new_url = url; |
|||
}); |
|||
} |
|||
|
|||
svg_iframe.addEventListener("load", function() { |
|||
document.getElementById('main').classList.remove("reload"); |
|||
}); |
|||
@ -1,84 +0,0 @@ |
|||
<!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> |
|||
@ -0,0 +1,21 @@ |
|||
<!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 class="double"> |
|||
|
|||
<div class="f-ascii"><pre>{{ ascii|safe }}</pre></div> |
|||
|
|||
<div class="f-svg"> |
|||
{{ svg|safe }} |
|||
{% include 'partials/export_interface.html' %} |
|||
</div> |
|||
|
|||
</body> |
|||
</html> |
|||
@ -0,0 +1,15 @@ |
|||
<!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 }} |
|||
{% include 'partials/export_interface.html' %} |
|||
</body> |
|||
</html> |
|||
@ -0,0 +1,9 @@ |
|||
<div id="save-buttons" {% if zone == "direct" %}class="direct"{% endif %}> |
|||
<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 src="/static/js/export_interface.js"></script> |
|||
@ -1,88 +0,0 @@ |
|||
<!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 class="double-font"> |
|||
|
|||
<div class="f-svg"> |
|||
{{ svg|safe }} |
|||
|
|||
<div id="save-buttons"> |
|||
<label for="text-checkbox" |
|||
title="display the remaining text 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> |
|||
</div> |
|||
|
|||
<div class="f-ascii"><pre>{{ ascii|safe }}</pre></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> |
|||
Loading…
Reference in new issue