{
view = (state) => {
const code_id = state['code-element-id'];
const element = this.element;
let code_area, code;
if (code_id) {
code_area = document.getElementById(code_id);
} else {
code_area = element.previousElementSibling ||
element.parentElement.previousElementSibling;
}
code = code_area?.innerText // from div-code
|| code_area?.value // from textarea
|| state['code']; // from code attr
this.state.code_area = code_area;
this.state.code = code;
return code ? <>
: AppRun Play cannot find code to run, please set code-element-id or code.
};
rendered = ({ style, hide_src, code_area, code }) => {
if (!code) return;
if (!document.getElementById('play-popup')) {
document.body.insertAdjacentHTML('beforeend', popup_div);
const textarea = document.querySelector(".apprun-play .editor") as any;
const iframe = document.querySelector('.apprun-play .preview');
textarea.value = code;
setup_editor(textarea, iframe, code, false);
}
const iframe = document.createElement('iframe');
iframe.classList.add('apprun-preview');
iframe.style.cssText = style;
this.element.before(iframe);
if (hide_src) code_area.style.display = 'none';
setup_editor(code_area, iframe, code, hide_src);
}
update = {
'show-popup': ({ code }) => {
const textarea = document.querySelector(".apprun-play .editor") as any;
textarea.editor?.setValue(code);
document.getElementById('play-popup').classList.add('show');
},
'@close-popup': () => { document.getElementById('play-popup').classList.remove('show') },
}
}
app.webComponent('apprun-play', Play);