diff --git a/.gitlab/templates/index.html.template b/.gitlab/templates/index.html.template
index 16b64de926c1cc1953f5cc7397ab30c443fa9aaa..7f10d63cda9fce03cddff949407f835f4c3e7591 100644
--- a/.gitlab/templates/index.html.template
+++ b/.gitlab/templates/index.html.template
@@ -32,41 +32,23 @@
<textarea readonly id="output" rows="8" style="width: 25vw; margin-left: 2px; resize: none; border: none; outline: none; padding: 0"></textarea>
</div>
<script type='text/javascript'>
- var canvas = document.getElementById('canvas');
- var output = document.getElementById('output');
-
- window.addEventListener(
- "message",
- (event) => {
- if (event.data == "ToggleOutput") {
- if (output.style.display == 'none') {
- output.style.display = 'flex';
- canvas.style.height = '75vh';
- window.dispatchEvent(new Event('resize'));
- }
- else {
- output.style.display = 'none';
- canvas.style.height = '100vh';
- window.dispatchEvent(new Event('resize'));
- }
- }
- },
- false,
- );
document.addEventListener('contextmenu', event => event.preventDefault());
document.addEventListener('keydown', function(event) {
if (event.key == "Q" || event.key == "q" || event.key == "E" || event.key == "e")
event.preventDefault();
}, true);
+ var canvas = document.getElementById('canvas');
+
if (window.self !== window.top)
{
document.getElementById('display-div').style.flexDirection = 'column';
+ var output = document.getElementById('output');
output.style.height = '25vh';
output.style.width = '100vw';
output.style.margin = '0';
- output.style.display = 'none';
canvas.style.width = '100vw';
+ canvas.style.height = '75vh';
}
var Module = {
diff --git a/.gitlab/templates/index_arguments.html.template b/.gitlab/templates/index_arguments.html.template
index 6900399174a346393066ab41421fb940b6807ae3..c8cd0d0136ef980f6267eeca0a922ba590800905 100644
--- a/.gitlab/templates/index_arguments.html.template
+++ b/.gitlab/templates/index_arguments.html.template
@@ -32,41 +32,23 @@
<textarea readonly id="output" rows="8" style="width: 25vw; margin-left: 2px; resize: none; border: none; outline: none; padding: 0"></textarea>
</div>
<script type='text/javascript'>
- var canvas = document.getElementById('canvas');
- var output = document.getElementById('output');
-
- window.addEventListener(
- "message",
- (event) => {
- if (event.data == "ToggleOutput") {
- if (output.style.display == 'none') {
- output.style.display = 'flex';
- canvas.style.height = '75vh';
- window.dispatchEvent(new Event('resize'));
- }
- else {
- output.style.display = 'none';
- canvas.style.height = '100vh';
- window.dispatchEvent(new Event('resize'));
- }
- }
- },
- false,
- );
document.addEventListener('contextmenu', event => event.preventDefault());
document.addEventListener('keydown', function(event) {
if (event.key == "Q" || event.key == "q" || event.key == "E" || event.key == "e")
event.preventDefault();
}, true);
+ var canvas = document.getElementById('canvas');
+
if (window.self !== window.top)
{
document.getElementById('display-div').style.flexDirection = 'column';
+ var output = document.getElementById('output');
output.style.height = '25vh';
output.style.width = '100vw';
output.style.margin = '0';
- output.style.display = 'none';
canvas.style.width = '100vw';
+ canvas.style.height = '75vh';
}
var Module = {
diff --git a/src/Admin/ScrapeRepo.py b/src/Admin/ScrapeRepo.py
index 8bf0f60eb776294ca8cd99e7d5174ffa9ea53af5..cacd3048e8ea57866e088c1159eb9d587c5f173d 100755
--- a/src/Admin/ScrapeRepo.py
+++ b/src/Admin/ScrapeRepo.py
@@ -704,7 +704,7 @@ def make_markdown_example_page(example_paths, available_languages, src_path, doc
'Test' + source_path.stem + '.png?raw=true'])
if lang == 'Cxx' and not check_excluded(excluded_examples, source_path.stem):
# href to open image in new tab
- md_file.write('''<button id="screenshot-button" class="wasm-tab" disabled>Screenshot</button><button id="wasm-button" class="wasm-tab">Interactive example</button><div id="screenshot-div"><a href="''' + image_url + ' target="_blank">' + '\n')
+ md_file.write('''<button id="screenshot-button" class="wasm-tab" disabled>Screenshot</button><button id="wasm-button" class="wasm-tab">Interactive example</button><hr style="margin-top: 10px; margin-bottom: 10px;"><div id="screenshot-div"><a href="''' + image_url + ' target="_blank">' + '\n')
md_file.write(
'<img style="border:2px solid beige;float:center" src="' +
image_url + '" width="256" />')
@@ -712,13 +712,8 @@ def make_markdown_example_page(example_paths, available_languages, src_path, doc
# wasmified example
md_file.write('''<div id="wasm-div" style="display: none;">
- <div style="display: flex; margin-bottom: 10px">
- <button id="reload-wasm-button" class="wasm-button">Reload example</button>
- <button id="open-wasm-button" class="wasm-button">Open in new tab</button>
- <input id="checkbox" type="checkbox">
- <label for="checkbox" style="align-self: center;">Show logs</label>
- <a style="margin-left: auto;" href="https://examples.vtk.org/site/WASM/1_WASM"><button class="wasm-button">Documentation</button></a>
- </div>''')
+ <button id="reload-wasm-button" class="wasm-button" style="display: inline;">Reload example</button>
+ <button id="open-wasm-button" class="wasm-button" style="display: inline;">Open in new tab</button>''')
md_file.write('<iframe id="frame" src="about:blank" style="width: 80vw; height: 80vh; border: medium;"></iframe></div>\n')
md_file.write('''<script>
var btn_screenshot = document.getElementById("screenshot-button");
@@ -759,9 +754,6 @@ def make_markdown_example_page(example_paths, available_languages, src_path, doc
btn_wasm.disabled = false;
checkbox.checked = false;
}
- checkbox.addEventListener('change', (event) => {
- frame.contentWindow.postMessage("ToggleOutput", "https://vtk.org")
- })
</script>\n''')
md_file.write('<hr>\n')
md_file.write('\n')
diff --git a/src/stylesheets/extra.css b/src/stylesheets/extra.css
index 4ec0fdde5261cef938cbdf4c91624e20dc16eaf9..ed0954aee98202475064e3dc80b07be685d4a27a 100644
--- a/src/stylesheets/extra.css
+++ b/src/stylesheets/extra.css
@@ -30,7 +30,7 @@ height:30px!important;
.wasm-button {
background: #4051b5;
- margin: 0px 10px;
+ margin: 0px 10px 10px;
color: white;
padding: 8px;
cursor: pointer;