Doriane
2 weeks 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