Skip to content

Commit 8b83b6e

Browse files
javascript-2020javascript-2020
committed
save file
1 parent c0fd279 commit 8b83b6e

1 file changed

Lines changed: 256 additions & 0 deletions

File tree

‎utils/editors/html/iframe-sandbox/iframe-sandbox.html‎

Lines changed: 256 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,256 @@
1+
2+
3+
4+
<iframe-sandbox class=menu-root>
5+
6+
<template shadowrootmode=open>
7+
8+
<style>
9+
10+
:host
11+
{}
12+
13+
.menu
14+
{position:absolute;right:-20px;top:-50px;width:380px;
15+
display:flex;flex-direction:column;gap:10px
16+
}
17+
18+
[value=sandbox]
19+
{flex:1}
20+
21+
#preset
22+
{display:flex;gap:10px}
23+
#preset>input
24+
{flex:1}
25+
26+
27+
#list
28+
{flex:1;display:grid;grid-template-columns:1fr;gap:10px;overflow:auto}
29+
30+
.radio
31+
{border:1px solid lightgray;padding:5px 10px;border-radius:5px;cursor:pointer;display:flex;align-items:center;gap:10px;
32+
white-space:nowrap;
33+
}
34+
.radio:disabled
35+
{color:gray}
36+
37+
.radio *
38+
{cursor:pointer}
39+
40+
label
41+
{white-space:nowrap}
42+
43+
44+
input
45+
{font-size:16px;padding:5px 10px}
46+
input[type]
47+
{cursor:pointer}
48+
49+
50+
</style>
51+
52+
53+
<!-- <div class=menu-root> -->
54+
55+
<input value=sandbox type=button>
56+
57+
<div class=menu style='display:none;height:350px'>
58+
59+
<div class=menu-title>
60+
iframe sandbox
61+
</div>
62+
63+
<div id=preset>
64+
<input type=button>
65+
</div>
66+
67+
<div id=list>
68+
<span class=radio>
69+
<input type=checkbox>
70+
<label>
71+
</label>
72+
</span>
73+
</div>
74+
75+
</div menu>
76+
77+
<!-- </div menu-root> -->
78+
79+
</template>
80+
81+
<script>
82+
83+
(function({mod,host}){
84+
85+
var obj = {
86+
version : 'v1.0',
87+
};
88+
89+
var df=true,did='iframe-sandbox';
90+
91+
var $,def,menu,output
92+
;
93+
94+
obj.initmod = function(...list){
95+
96+
list.forEach(params=>{
97+
98+
$ = mod.rd(params,'$',$);
99+
def = mod.rd(params,'def',def);
100+
menu = mod.rd(params,'menu',menu);
101+
output = mod.rd(params,'output',output);
102+
103+
});
104+
105+
}//initmod
106+
107+
108+
//:
109+
110+
111+
112+
113+
var values = [
114+
'allow-downloads',
115+
'allow-forms',
116+
'allow-modals',
117+
'allow-orientation-lock',
118+
'allow-pointer-lock',
119+
'allow-popups',
120+
'allow-popups-to-escape-sandbox',
121+
'allow-presentation',
122+
'allow-same-origin',
123+
'allow-scripts',
124+
'allow-storage-access-by-user-activation',
125+
'allow-top-navigation',
126+
'allow-top-navigation-by-user-activation',
127+
'allow-top-navigation-to-custom-protocols'
128+
];
129+
130+
131+
var preset = {};
132+
preset.min = 'allow-scripts';
133+
preset.standard = 'allow-downloads allow-forms allow-same-origin allow-scripts';
134+
preset.full = 'allow-downloads allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-storage-access-by-user-activation';
135+
preset.all = values.join(' ');
136+
137+
138+
139+
var shadow;
140+
141+
142+
143+
var chk = {};
144+
var btn = {};
145+
146+
147+
//:
148+
149+
150+
obj.init = async function(){
151+
}//init
152+
153+
154+
//:
155+
156+
157+
obj.initdom = async function(){
158+
159+
shadow = host.shadowRoot;
160+
161+
menu.add.style(shadow);
162+
163+
164+
var node = $(shadow,'.menu');
165+
$(shadow,'[value=sandbox]').onclick = e=>menu.add.stack(node,'both',false);
166+
167+
168+
var input = $(shadow,'#preset input');
169+
input.remove();
170+
171+
for(let key in preset){
172+
173+
var ninput = input.cloneNode(true);
174+
ninput.value = key;
175+
ninput.onclick = e=>btn.preset(key);
176+
$(shadow,'#preset').append(ninput);
177+
178+
}//for
179+
180+
181+
var list = $(shadow,'#list');
182+
183+
var item = $(list,'.radio');
184+
item.remove();
185+
186+
values.forEach(value=>{
187+
//console.log(value);
188+
var nitem = item.cloneNode(true);
189+
nitem.id = value;
190+
$(nitem,'label').textContent = value;
191+
$(nitem,'[type=checkbox]').checked = (def.indexOf(value)!=-1)
192+
list.append(nitem);
193+
chk[value] = $.chkbox(shadow,`#${value}`,chk.click);
194+
195+
});
196+
197+
198+
}//initdom
199+
200+
201+
//:
202+
203+
204+
btn.preset = function(key){
205+
206+
values.forEach(value=>{
207+
208+
chk[value].checked = (preset[key].indexOf(value)!=-1);
209+
210+
});
211+
212+
}//preset
213+
214+
215+
chk.click = function(chk){
216+
//console.log(chk);
217+
/*
218+
if(chk.id=='allow-modals'){
219+
output.chk['allow-modals'].checked = chk.checked;
220+
}
221+
if(chk.id=='allow-popups'){
222+
output.chk['allow-popups'].checked = chk.checked;
223+
}
224+
*/
225+
226+
}//click
227+
228+
229+
//:
230+
231+
232+
obj.build = function(){
233+
234+
var attr = '';
235+
values.forEach(value=>{
236+
237+
if(chk[value].checked){
238+
attr += value+' ';
239+
}
240+
241+
});
242+
return attr;
243+
244+
}//build
245+
246+
247+
return obj;
248+
249+
//iframe-sandbox
250+
})
251+
252+
</script>
253+
254+
</template>
255+
256+

0 commit comments

Comments
 (0)