Skip to content

Commit 71fbfd4

Browse files
javascript-2020javascript-2020
committed
save file
1 parent 69f9bdd commit 71fbfd4

1 file changed

Lines changed: 201 additions & 0 deletions

File tree

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

Lines changed: 201 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,201 @@
1+
2+
3+
4+
<output-settings>
5+
6+
<template shadowrootmode=open>
7+
8+
<style>
9+
10+
#settings
11+
{width:34px;height:34px;
12+
content:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAMAAAAM7l6QAAAA81BMVEVHcExohJFjfYpohJFohJFlgI1ohJFohJFohJFzkqFohJFkf4tohJFohJFUanRUanRUanRohJFohJFohJFUanRohJFohJFUanRUanRUanRohJFmgY5ohJFddoJohJFohJFUanRohJFUanRUanRUanRZcHtohJFUanSs/+9ng5BSaHJ5j5rU3OCr/+1YbnhjfIddc32Tp7GInaem9+aWqLGQoqtsj5ai8uJ8r6x/tbFyi5Zqh5J6qaiRz8iKx8CjsbjP2NzAy9Bni46su8LH0tZwlJye6dxxhpC5xsuerLKrusKl5NqX3dJ7pquuvcS47OOFv7mM72j6AAAAJnRSTlMA4ghV/BqfIusBSQSCdPqz5ZSoXkjbAiRUeStq9xQ1xGa12y/YotDZwCsAAAHBSURBVCjPjZNrd5pAEIZBFBRjtFoviTRN0mbX3YVdQEBRwUuiaW5N/v+v6QBGSVPO6ftxnjMzu+/MSNJ/q9T4AhqWCvB5FYFkrQAr5QQbegE+Qakaf8crlRp0VrqIgFBXr0tST6sc6Peuquhtg6Bgu50hYqi6ospX33JFywaZv0S7yWQXvcyJUT42uZCTjoTdvo5SjaOAJJHuefrbdkZ/meZTHIbxzrKeM67CGyQtTZ4/mqsHQSnFIrasOEtPXlcfghvEXZkPHG+miw3msTXeCoSqnV5mB+Q/mmuBp2PLmiwomYzeuJAP9jTQbG0u6QYo8DmORs82Hx7dJOzO9OnUSrWgi6fIPv1aiGeey3N4XzzIim8wA4wv36kOT7s11zYOgY+n2HYdhvF1lt7r7D/mYRyEYYAxc3xBMW4NakdbfpsrzwZbqM2cJBn0s/LR1OXs/p65juPaKb5J1qp3Ud2P5G7pOI7n+cymCW39yG1JmSDGXN93mcD0NMFnh3WQ2x3lyhCc2zYH2BxcNlvN93WQNA1GV+rIgsPE8PUAetb7/c+rKHiu6D8WGXjOzc9nIHirX3REJ6qq3pyVCq+sBvoQ+APGmFIg7dMmwwAAAABJRU5ErkJggg==);
13+
}
14+
15+
.menu
16+
{position:absolute;left:30px;top:35px;
17+
display:flex;flex-direction:column;gap:10px;
18+
}
19+
iframe-sandbox::part(menu)
20+
{left:30px;right:auto}
21+
iframe-permissions::part(menu)
22+
{left:30px;right:auto}
23+
24+
.radio
25+
{border:1px solid lightgray;padding:5px 10px;border-radius:5px;cursor:pointer;display:flex;align-items:center;gap:10px}
26+
.radio>*
27+
{cursor:pointer}
28+
.radio:has([type=checkbox]:disabled)
29+
{color:gray;cursor:default}
30+
.radio:has([type=checkbox]:disabled)>*
31+
{cursor:default}
32+
33+
#attr-btns
34+
{display:flex;gap:10px}
35+
#attr-btns>*
36+
{flex:1;display:flex}
37+
38+
39+
</style>
40+
41+
<div class=menu-root style='display:block;height:34px'>
42+
43+
<img id=settings class=icon>
44+
45+
<div class=menu style='display:none;/*width:300px;height:200px;*/'>
46+
47+
<div class=menu-title>
48+
output menu
49+
</div>
50+
51+
<div class=menu-div>
52+
console
53+
</div>
54+
55+
<span id=console class=radio>
56+
<input type=checkbox checked>
57+
console
58+
</span>
59+
60+
<span id=console-echo class=radio>
61+
<input type=checkbox checked>
62+
echo
63+
</span>
64+
65+
<div class=menu-div>
66+
iframe
67+
</div>
68+
69+
<span id=isolate class=radio>
70+
<input type=checkbox disabled>
71+
isolate
72+
</span>
73+
74+
<div id=attr-btns>
75+
<iframe-sandbox v1.0 component=grp></iframe-sandbox>
76+
<iframe-permissions v1.0 component=grp></iframe-permissions>
77+
</div>
78+
79+
</div>
80+
81+
</div>
82+
83+
</template>
84+
85+
<script>
86+
87+
(function({mod,host}){
88+
89+
var obj = {
90+
version : 'v1.0',
91+
};
92+
93+
var df=true,did='output-settings';
94+
95+
var $,debug,menu,output
96+
;
97+
98+
obj.initmod = function(...list){
99+
100+
list.forEach(params=>{
101+
102+
$ = mod.rd(params,'$',$);
103+
debug = mod.rd(params,'debug',debug);
104+
menu = mod.rd(params,'menu',menu);
105+
output = mod.rd(params,'output',output);
106+
107+
});
108+
109+
}//initmod
110+
111+
112+
//:
113+
114+
115+
var sandbox;
116+
var permissions;
117+
118+
119+
var shadow;
120+
121+
122+
var chk = {};
123+
obj.chk = chk;
124+
obj.build = {};
125+
126+
127+
//:
128+
129+
130+
obj.init = async function(){
131+
debug=eval(debug.mod);
132+
debug('init');
133+
sandbox = mod['iframe-sandbox'];
134+
obj.sandbox = sandbox;
135+
sandbox.initmod({output});
136+
137+
permissions = mod['iframe-permissions'];
138+
obj.permissions = permissions;
139+
permissions.initmod({output});
140+
141+
await mod.auto();
142+
143+
144+
}//init
145+
146+
147+
//:
148+
149+
150+
obj.initdom = async function(){
151+
debug('initdom');
152+
shadow = host.shadowRoot;
153+
154+
var style = $(shadow,'style');
155+
$.stylesheet.copyrule('#page-inline','.icon',style);
156+
menu.add.style(shadow);
157+
158+
var node = $(shadow,'.menu');
159+
$(shadow,'#settings').onclick = menu.click(node,'both',false);
160+
161+
$.chkbox(shadow,'#console',output.console.show);
162+
chk['console-echo'] = $.chkbox(shadow,'#console-echo');
163+
164+
}//initdom
165+
166+
167+
//:
168+
169+
170+
obj.build.sandbox = function(){
171+
172+
var attr = sandbox.build();
173+
debug(attr);
174+
return attr;
175+
176+
}//allow
177+
178+
179+
obj.build.permissions = function(){
180+
181+
var attr = permissions.build();
182+
debug(attr);
183+
return attr;
184+
185+
}//allow
186+
187+
188+
//:
189+
190+
191+
return obj;
192+
193+
//output-settings
194+
})
195+
196+
</script>
197+
198+
</output-setttings>
199+
200+
201+

0 commit comments

Comments
 (0)