Skip to content

Commit 37d12e1

Browse files
javascript-2020javascript-2020
committed
save file
1 parent bc2b748 commit 37d12e1

1 file changed

Lines changed: 223 additions & 31 deletions

File tree

‎utils/editors/html-editor/html/output-html/output-html.html‎

Lines changed: 223 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,13 @@
1313
{display:flex}
1414

1515
.radio
16-
{border:1px solid lightgray;padding:2px 10px;border-radius:5px;cursor:pointer}
16+
{border:1px solid lightgray;padding:2px 10px;border-radius:5px;cursor:pointer;display:flex;align-items:center}
17+
#isolate
18+
{margin-right:10px}
19+
#allow-scripts
20+
{color:gray}
21+
#console-clear
22+
{margin-right:20px}
1723

1824
#hldr
1925
{flex:1;box-sizing:border-box;position:relative}
@@ -22,31 +28,68 @@
2228
#glass
2329
{position:absolute;left:0;top:0;width:100%;height:100%;display:none}
2430

31+
#slider
32+
{height:10px;cursor:ns-resize}
33+
34+
#kill
35+
{padding:5px 10px;min-width:60px}
36+
2537
</style>
2638

2739
<div id=hdr>
40+
<span id=isolate class=radio>
41+
<input type=checkbox>
42+
isolate
43+
</span>
44+
2845
<span id=allow-scripts class=radio>
29-
<input type=checkbox checked>
46+
<input type=checkbox checked disabled>
3047
allow-scripts
3148
</span>
3249
<span id=allow-modals class=radio>
3350
<input type=checkbox checked>
3451
allow-modals
3552
</span>
36-
<span id=allow-popups class=radio>
53+
<span id=allow-popups class=radio style='margin-right:30px'>
3754
<input type=checkbox checked>
3855
allow-popups
3956
</span>
4057

4158
<div style='flex:1'></div>
42-
<button id=kill style='margin-right:20px'>kill</button>
59+
60+
<span id=console-show class=radio>
61+
<input type=checkbox checked>
62+
console
63+
</span>
64+
<span id=console-echo class=radio>
65+
<input type=checkbox checked>
66+
echo
67+
</span>
68+
<span id=console-persist class=radio>
69+
<input type=checkbox>
70+
persist
71+
</span>
72+
<span id=console-clear class=radio>
73+
clear
74+
</span>
75+
76+
<button id=kill>kill</button>
4377
</div>
4478

79+
80+
<!--
81+
https://sandbox-ext-code-com-1024713184986.us-central1.run.app/html-sandbox/html-sandbox.html
82+
https://ext-code-test.com/html-sandbox/html-sandbox.html
83+
-->
4584
<div id=hldr>
46-
<iframe sandbox='allow-forms allow-downloads allow-pointer-lock allow-popups-to-escape-sandbox'></iframe>
85+
<iframe></iframe>
4786
<div id=glass></div>
4887
</div>
4988

89+
<div id=slider></div>
90+
91+
<web-console component h=150></web-console>
92+
5093
</template>
5194

5295
<script>
@@ -74,7 +117,9 @@
74117

75118
//vars:-
76119

77-
var allow_same_origin = false;
120+
121+
var webconsole;
122+
78123

79124
var chk = {};
80125

@@ -84,45 +129,68 @@
84129
var glass;
85130

86131

87-
var btn = {};
132+
var sandbox_url;
133+
var iframe_src = 'https://sandbox.ext-code.com/html-sandbox/html-sandbox.html';
134+
var iframe_sandbox = 'allow-scripts allow-same-origin allow-forms';//allow-downloads allow-pointer-lock';//allow-popups-to-escape-sandbox
135+
var iframe_allow = `clipboard-write; clipboard-read; camera; microphone; geolocation; accelerometer; gyroscope; magnetometer; payment; usb; serial; bluetooth;
136+
xr-spatial-tracking; autoplay; encrypted-media; picture-in-picture; screen-wake-lock; web-share`;
137+
138+
139+
140+
var btn = {};
141+
btn.console = {};
142+
obj.on = {};
143+
var build = {};
88144

89145

90146
//:
91147

92148

93149
obj.init = async function(){
150+
151+
await mod.auto();
152+
153+
webconsole = mod['web-console'];
154+
155+
94156
}//init
95157

96158

97159
//:
98160

99161

100-
obj.initdom = function(rootnode){
162+
obj.initdom = function(){
101163

102-
shadow = host.shadowRoot;
164+
shadow = host.shadowRoot;
103165

104-
var style = $(shadow,'style');
166+
var style = $(shadow,'style');
105167
$.stylesheet.insert(style,'button','.icon');
106168

107169

108-
var hdr = $(shadow,'#hdr');
109-
chk['allow-scripts'] = $.chkbox(hdr,'#allow-scripts');
110-
chk['allow-modals'] = $.chkbox(hdr,'#allow-modals');
111-
chk['allow-popups'] = $.chkbox(hdr,'#allow-popups');
170+
var hdr = $(shadow,'#hdr');
112171

113-
$(hdr,'#kill').onclick = btn.kill;
172+
chk.isolate = $.chkbox(hdr,'#isolate');
173+
chk.isolate.checked = window.crossOriginIsolated;
114174

175+
chk['allow-scripts'] = $.chkbox(hdr,'#allow-scripts');
176+
chk['allow-modals'] = $.chkbox(hdr,'#allow-modals');
177+
chk['allow-popups'] = $.chkbox(hdr,'#allow-popups');
115178

116-
hldr = $(shadow,'#hldr');
117-
iframe = $(shadow,'iframe');
118-
if(allow_same_origin){
119-
var attr = iframe.getAttribute('sandbox');
120-
attr += ' allow-same-origin';
121-
}
122-
def_sandbox = iframe.getAttribute('sandbox');
123-
glass = $(shadow,'#glass');
179+
chk['console-show'] = $.chkbox(hdr,'#console-show',btn.console.show);
180+
chk['console-echo'] = $.chkbox(hdr,'#console-echo');
181+
chk['console-persist'] = $.chkbox(hdr,'#console-persist');
182+
$(shadow,'#console-clear').onclick = btn.console.clear;
183+
184+
$(hdr,'#kill').onclick = btn.kill;
124185

125186

187+
hldr = $(shadow,'#hldr');
188+
iframe = $(shadow,'iframe');
189+
glass = $(shadow,'#glass');
190+
191+
192+
$.slider(hldr,'#slider',webconsole.host,null,{root:shadow,mode:'horiz'});
193+
126194
}//initdom
127195

128196

@@ -135,6 +203,42 @@
135203

136204
}//kill
137205

206+
/*
207+
btn.isolate = function(chk){
208+
209+
var url = new URL(sandbox_url);
210+
if(chk.checked){
211+
sanbox_url += '?isolate';
212+
}else{
213+
var i = sandbox_url.indexOf('?');
214+
sandbox_url = sandbox_url.slice(0,i);
215+
}
216+
217+
}//isolate
218+
*/
219+
220+
221+
btn.console.show = function(chk){
222+
223+
if(chk.checked){
224+
webconsole.host.style.display = '';
225+
}else{
226+
webconsole.host.style.display = 'none';
227+
}
228+
229+
}//show
230+
231+
232+
btn.console.clear = function(){
233+
234+
webconsole.clear();
235+
if(chk['console-echo'].checked){
236+
console.clear();
237+
}
238+
239+
}//clear
240+
241+
138242

139243
obj.glass = function(show=true){
140244

@@ -164,14 +268,21 @@
164268

165269

166270

167-
obj.srcdoc = function(html){
271+
//:
272+
273+
274+
obj.run = function(html){
275+
}//run
276+
277+
278+
build.sandbox = function(){
168279

169-
var attr = def_sandbox;
170-
console.log(attr);
280+
var attr = iframe_sandbox;
281+
//console.log(attr);
171282
var tokens = new Set(attr.split(/\s+/).filter(Boolean));
172283

173-
if(chk['allow-scripts'].checked){
174-
tokens.add('allow-scripts');
284+
if(!chk['allow-scripts'].checked){
285+
tokens.delete('allow-scripts');
175286
}
176287
if(chk['allow-modals'].checked){
177288
tokens.add('allow-modals');
@@ -181,26 +292,107 @@
181292
}
182293

183294
var attr = [...tokens].join(' ');
184-
console.log(attr);
295+
debug(attr);
185296
iframe.setAttribute('sandbox',attr);
186297

298+
}//sandbox
299+
300+
301+
obj.sandbox = function(html){
302+
debug('sandbox');
303+
iframe.remove();
304+
iframe = iframe.cloneNode();
305+
debug(sandbox_url);
306+
build.sandbox();
307+
308+
iframe.setAttribute('allow',iframe_allow);
309+
debug(iframe_allow);
310+
var src = iframe_src;
311+
if(chk.isolate.checked){
312+
src += '?isolate';
313+
}
314+
iframe.src = src;
315+
debug(src);
316+
iframe.onload = onload;
317+
hldr.append(iframe);
318+
319+
320+
function onload(){
321+
debug('onload');
322+
iframe.onload = null;
323+
324+
if(!chk['console-persist'].checked){
325+
webconsole.clear();
326+
if(chk['console-echo'].checked){
327+
console.clear();
328+
}
329+
}
330+
331+
var echo = chk['console-echo'].checked;
332+
iframe.contentWindow.postMessage({type:'run',html,echo},'*');
333+
334+
}//onload
335+
336+
}//sandbox
337+
338+
339+
/*
340+
obj.srcdoc = function(html){
341+
342+
iframe.remove();
343+
iframe = iframe.cloneNode();
344+
345+
build.sandbox();
346+
347+
hldr.append(iframe);
348+
349+
350+
if(!chk['console-persist'].checked){
351+
webconsole.clear();
352+
if(chk['console-echo'].checked){
353+
console.clear();
354+
}
355+
}
356+
187357
iframe.srcdoc = html;
188358
189359
}//srcdoc
360+
*/
361+
362+
363+
/*
364+
obj.blob = function(html){
190365
191-
366+
var blob=new Blob([html],{type:'text/html'});
367+
var url=URL.createObjectURL(blob);
368+
iframe.src=url;
369+
370+
}//blob
371+
*/
372+
192373
obj.kill = function(){return kill()} //d
193374

194375
function kill(){
195376

196377
var niframe = iframe.cloneNode(true);
197-
niframe.srcdoc = null;
378+
//niframe.srcdoc = null;
198379
hldr.replaceChild(niframe,iframe);
199380
iframe = niframe;
200381

201382
}//kill
202383

203384

385+
//:
386+
387+
388+
obj.on.message = function(json){
389+
console.log('output.message',json);
390+
var {name,args} = json;
391+
webconsole[name].apply(null,args);
392+
393+
}//message
394+
395+
204396
//:
205397

206398

0 commit comments

Comments
 (0)