Skip to content

Commit 5ecce78

Browse files
javascript-2020javascript-2020
committed
update
1 parent 2309cf3 commit 5ecce78

File tree

2 files changed

+277
-0
lines changed

2 files changed

+277
-0
lines changed

‎utils/editors/html/editors-hdr/v1.0/editors-hdr.html‎

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
2+
3+
<utils-hdr>
4+
5+
<template shadowrootmode=open>
6+
7+
<style>
8+
9+
section
10+
{margin:0;box-sizing:border-box;display:flex;align-items:center;
11+
gap:10px;
12+
}
13+
14+
.icon
15+
{cursor:pointer;border-radius:3px;border:1px solid gray;box-sizing:border-box;
16+
width:38px;height:38px;
17+
}
18+
19+
.item
20+
{display:inline-flex;align-items:center;text-align:center;background:buttonface;
21+
border-radius:3px;border:1px solid lightgray;padding:5px 7px;
22+
}
23+
24+
.item-label
25+
{}
26+
27+
::slotted(.title)
28+
{text-align:center;position:absolute;left:0;right:0;top:0px;z-index:-1;margin:0 auto;
29+
}
30+
31+
32+
.date
33+
{position:absolute;top:5px;right:5px;}
34+
35+
a
36+
{color:blue;}
37+
a:visited
38+
{color:blue;}
39+
40+
::slotted(.visually-hidden)
41+
{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}
42+
43+
44+
</style>
45+
46+
<section>
47+
48+
<div class=item>
49+
50+
<a id=home class=item-label href='/'>
51+
home
52+
</a>
53+
54+
<top-menu-grp api>
55+
<script html-loader src='https://html-loader-1024713184986.us-central1.run.app/'></script>
56+
</top-menu-grp>
57+
58+
</div>
59+
60+
<slot></slot>
61+
<slot name=seo-hdr class=visually-hidden></slot>
62+
63+
<div class=date>
64+
<slot name=date></slot>
65+
</div>
66+
67+
</section>
68+
69+
</template>
70+
71+
72+
<script>
73+
74+
mod.utils.hdr = function(){
75+
true && console.log('mod.hdr');
76+
var obj = {};
77+
78+
var df=true
79+
;
80+
81+
var menu,menumod
82+
;
83+
84+
obj.initmod = function(params){
85+
86+
menumod = params.menumod;
87+
menu = params.menu;
88+
89+
}//initmod
90+
91+
92+
//:
93+
94+
95+
obj.init = function(){debugger;
96+
97+
mod.menu.top = mod.menu.top();
98+
99+
mod.menu.top.initmod({menu,menumod});
100+
101+
mod.menu.top.init();
102+
103+
104+
}//init
105+
106+
107+
//:
108+
109+
110+
obj.initdom = function(rootnode){
111+
112+
var root = $.$(rootnode,'utils-hdr');
113+
var shadow = root.shadowRoot;
114+
115+
mod.menu.top.initdom(shadow);
116+
117+
118+
}//initdom
119+
120+
121+
//:
122+
123+
124+
return obj;
125+
126+
}//mod.hdr
127+
128+
129+
</script>
130+
131+
</utils-hdr>
132+

‎utils/editors/html/editors-hdr/v2.0/editors-hdr-v2.0.html‎

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
2+
3+
<editors-hdr>
4+
5+
<template shadowrootmode=open>
6+
7+
<style>
8+
9+
section
10+
{margin:0;box-sizing:border-box;display:flex;align-items:center;
11+
gap:10px;
12+
}
13+
14+
.icon
15+
{cursor:pointer;border-radius:3px;border:1px solid gray;box-sizing:border-box;
16+
width:38px;height:38px;
17+
}
18+
19+
.item
20+
{display:inline-flex;align-items:center;text-align:center;background:buttonface;
21+
border-radius:3px;border:1px solid lightgray;padding:5px 7px;
22+
}
23+
24+
.item-label
25+
{}
26+
27+
::slotted(.title)
28+
{text-align:center;position:absolute;left:0;right:0;top:0px;z-index:-1;margin:0 auto;
29+
}
30+
31+
32+
.date
33+
{position:absolute;top:5px;right:5px;}
34+
35+
a
36+
{color:blue;}
37+
a:visited
38+
{color:blue;}
39+
40+
::slotted(.visually-hidden)
41+
{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}
42+
43+
44+
</style>
45+
46+
<section>
47+
48+
<div class=item>
49+
50+
<a id=home class=item-label href='/'>
51+
home
52+
</a>
53+
54+
<top-menu component=grp v2.0></top-menu>
55+
56+
</div>
57+
58+
<slot></slot>
59+
60+
<slot name=seo-hdr class=visually-hidden></slot>
61+
62+
<div class=date>
63+
<slot name=date></slot>
64+
</div>
65+
66+
</section>
67+
68+
</template>
69+
70+
71+
<script>
72+
73+
(function editors_hdr({mod,dom,host}){
74+
75+
var obj = {
76+
version : 'v2.0'
77+
};
78+
79+
var df=false,did='hdr'
80+
;
81+
82+
var ext,$,menu
83+
;
84+
85+
obj.initmod = function(params){
86+
87+
ext = params.ext;
88+
$ = params.$;
89+
menu = params.menu;
90+
91+
}//initmod
92+
93+
94+
//:
95+
96+
97+
var top;
98+
99+
100+
obj.init = async function(){
101+
debug('init',obj.version);
102+
top = mod['top-menu'];
103+
104+
top.initmod({ext,$,menu});
105+
106+
await top.init();
107+
108+
109+
}//init
110+
111+
112+
//:
113+
114+
115+
obj.initdom = function(rootnode){
116+
117+
var shadow = host.shadowRoot;
118+
119+
top.initdom(shadow);
120+
121+
122+
}//initdom
123+
124+
125+
//:
126+
127+
128+
function debug(){
129+
130+
if(!df && !obj.df)return;
131+
var str = [...arguments].join(' ');
132+
console.log(`[ ${did} ]`,str);
133+
134+
}//debug
135+
136+
137+
return obj;
138+
139+
})//editors-hdr
140+
141+
142+
</script>
143+
144+
</editors-hdr>
145+

0 commit comments

Comments
 (0)