|
@ -26,6 +26,71 @@ |
|
|
output text</label> |
|
|
output text</label> |
|
|
<input id="text-checkbox" type="checkbox" class="get-input" |
|
|
<input id="text-checkbox" type="checkbox" class="get-input" |
|
|
class="body-class-check" value="check-text" data-name="c" data-frame="svg-iframe" checked/> |
|
|
class="body-class-check" value="check-text" data-name="c" data-frame="svg-iframe" checked/> |
|
|
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
|
|
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; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
let button_pad = document.getElementById('button-pad'); |
|
|
|
|
|
let button_svg = document.getElementById('button-svg'); |
|
|
|
|
|
|
|
|
|
|
|
// --- pad go button |
|
|
|
|
|
button_pad.addEventListener('click', function(){ |
|
|
|
|
|
let svg_iframe = document.getElementById('svg-iframe'); |
|
|
|
|
|
let pad_iframe = document.getElementById('pad-iframe'); |
|
|
|
|
|
let input = document.getElementById(button_pad.dataset.use); |
|
|
|
|
|
let value = input.value; |
|
|
|
|
|
let param = input.dataset.name; |
|
|
|
|
|
|
|
|
|
|
|
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('/'); |
|
|
|
|
|
svg_iframe.src = svg_src; |
|
|
|
|
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
// --- svg generation button |
|
|
|
|
|
button_svg.addEventListener('click', function(){ |
|
|
|
|
|
let svg_iframe = document.getElementById('svg-iframe'); |
|
|
|
|
|
console.log("IFRAME RELOAD"); |
|
|
|
|
|
svg_iframe.contentWindow.location.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); |
|
|
|
|
|
} |
|
|
|
|
|
console.log(url); |
|
|
|
|
|
// frame.contentWindow.history.replaceState(null, null, url); |
|
|
|
|
|
frame.src = url |
|
|
|
|
|
}); |
|
|
|
|
|
} |
|
|
|
|
|
</script> |
|
|
</header> |
|
|
</header> |
|
|
|
|
|
|
|
|
<div class="font figfont reload" id="main"> |
|
|
<div class="font figfont reload" id="main"> |
|
|