Skip to content

Commit 90f9749

Browse files
javascript-2020javascript-2020
committed
update
1 parent 0c3d5ae commit 90f9749

File tree

2 files changed

+309
-0
lines changed

2 files changed

+309
-0
lines changed

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

Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
2+
3+
<misc-hdr>
4+
5+
<template shadowrootmode=open>
6+
7+
<style>
8+
9+
section {
10+
margin : 0;
11+
box-sizing : border-box;
12+
display : flex;
13+
align-items : center;
14+
gap : 10px;
15+
}
16+
17+
.icon {
18+
cursor : pointer;
19+
border-radius : 3px;
20+
border : 1px solid gray;
21+
box-sizing : border-box;
22+
width : 38px;
23+
height : 38px;
24+
}
25+
26+
.item {
27+
display : inline-flex;
28+
align-items : center;
29+
text-align : center;
30+
background : buttonface;
31+
border-radius : 3px;
32+
border : 1px solid lightgray;
33+
padding : 5px 7px;
34+
}
35+
36+
.item-label {
37+
}
38+
39+
::slotted(.title) {
40+
text-align : center;
41+
position : absolute;
42+
left : 0;
43+
right : 0;
44+
top : 0px;
45+
z-index : -1;
46+
margin : 0 auto;
47+
}
48+
49+
50+
.date {
51+
position : absolute;
52+
top : 5px;
53+
right : 5px;
54+
}
55+
56+
a {
57+
color : blue;
58+
}
59+
a:visited {
60+
color : blue;
61+
}
62+
63+
64+
</style>
65+
66+
<section>
67+
68+
<img id=help class=icon style='padding:2px' src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAAXNSR0IArs4c6QAABANJREFUSEvNl2tsVEUUx39n224pEVNsTcGqAYM1gYYP0mCUaILGLqVptzVGKZCArxIU2VYTYpQapU2Mj9jWR9H6wUesUdcGWoRSJIQYjUhETUkkRUVIoGztLqB9bOm2OzL7urtst3eXhsT77c495/+bOXPmzLlCEk9JydOZKsNi8ws2QYqAW4DskOsF4IRC/WRRdIvP393V9fZFM1mZyqC0dONsX8aMZ0SpjUCOmVjou0eJbM/wjb65e/f284l8YsCqbNN8JK0Ii5JeJXN2IXVjkJskMMbMCu4yVP1tolyBD4ohrNftF+dLY/o1AlbljsUIh4CsKwEl5aPoks7mlbFg++bnQF5JSmA6RlbLTHE2eo0V22teANUwHc2kfK2+WeJsGYqABysc9dcotiblPB2jaLDO3rXp1uOrrjCRUpmH02ed+9Ce112BFRdX1NavVmrrOlRQ4/nH4YN2GDgP826AiuXQ1AY1a2B+vsE5dBRO9UF+Hjj3GeMr7wbbncH3f4fB+Q30HA+8Voml4fOdjXWii4PfmnamCnIi4A+3wcvvwck+WFwAj1WC41Vo2gKdB+HYX0HRwWG4747gZJo+NcCPVEBWJuw4AIULYF0ZrK+D8QkeQDyjYxP5sqLcUa5EOqqApMAfdcCvvQbEvnxy8MQEfLILROCrN+CJbXDuHyoRRpWyS7Hd8a4gT8aB/zwNwyOQfS1kzzJWrEPr8sDX3wZXnAicZoEvu6HwVtjwIDz6Ikz4A+ARVIvY7DU/AkvjwB93wlk3LLgJiu8ywEd+g1Nn4fBRGB1LDL7n9mCOXBiE9v3QezIQJQ32wmENHgByr1qoL0v5ENitwT4gPWnwd7/AidNBuf5LIS9aBEsWws4DwTGXG2zLILzHk4PHJwfrLNbh0WGamwv3LoW2PbC2FG7MM6R6foczf0PJMmPs52Mw7AW/H37oiTvioRUHwPGhTqUipGgbHer45EpRLBXzSHKFj9MqYH24cqWilKJtRSCrVUukgBQCr6GwpCiUirkumpsRRBeQcMnUrc1CYFF0dxClOhtFpQmlD9hr9BYx1l7goK6y4LHokqm/6ktClDK9Eh0oShLA9ZmsRfjDZHJKpGGfviS0nb4Wx9MzdSSm7K8ygWYU8yYRb0HoNI+7O338YoFuAiONgM1euxpUm5nvzcBbKGZEGX4P1CcIcayerOnuaPxMj8V0mSvKa95XQrUZ/P5Le/Vs6AT0A08hDJk4iaJ1b2fThrBZDHhJdXVGTn/WF4KY5VFgrwtQtCOECmhCtELt8OR5Hz7S2qpTIfDENfQafr1r5jvJrNwsMgGAonVgzsimaOik4LBYaM+bzRJuCrgbxBHe08vt/h+/MIlmfzV+2v4DHQu0lKRbJa4AAAAASUVORK5CYII='>
69+
70+
<div class=item>
71+
72+
<top-menu-grp-api>
73+
<script html-loader src='https://html-loader-1024713184986.us-central1.run.app/'></script>
74+
</top-menu-grp-api>
75+
76+
<a id=home class=item-label href='https://javascript-2020.github.io/'>
77+
home
78+
</a>
79+
80+
</div>
81+
82+
<slot></slot>
83+
84+
<div class=date>
85+
<slot name=date></slot>
86+
</div>
87+
88+
</section>
89+
90+
</template>
91+
92+
<script>
93+
94+
mod.misc.hdr=function(){
95+
true && console.log('mod.misc.hdr');
96+
var obj = {};
97+
98+
var df=true
99+
;
100+
101+
var menu,menumod
102+
;
103+
104+
obj.initmod=function(params){
105+
106+
menumod = params.menumod;
107+
menu = params.menu;
108+
109+
}//initmod
110+
111+
112+
obj.init=function(){
113+
114+
mod.menu.top = mod.menu.top();
115+
116+
mod.menu.top.initmod({menumod,menu});
117+
118+
mod.menu.top.init();
119+
120+
121+
}//init
122+
123+
124+
obj.initdom=function(rootnode){
125+
126+
var root = $.$(rootnode,'misc-hdr');
127+
var shadow = root.shadowRoot;
128+
129+
mod.menu.top.initdom(shadow);
130+
131+
132+
}//initdom
133+
134+
135+
return obj;
136+
137+
}//mod.utils.hdr
138+
139+
</script>
140+
141+
</misc-hdr>
142+
143+
144+

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

Lines changed: 165 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,165 @@
1+
2+
3+
<misc-hdr style='position:relative'>
4+
5+
<template shadowrootmode=open>
6+
7+
<style>
8+
9+
section
10+
{margin:0;box-sizing:border-box;display:flex;align-items:center;gap:10px;
11+
padding-bottom:20px;border-bottom:1px solid lightgray;
12+
}
13+
14+
.icon {
15+
cursor : pointer;
16+
border-radius : 3px;
17+
border : 1px solid gray;
18+
box-sizing : border-box;
19+
width : 38px;
20+
height : 38px;
21+
}
22+
23+
.item {
24+
display : inline-flex;
25+
align-items : center;
26+
text-align : center;
27+
background : buttonface;
28+
border-radius : 3px;
29+
border : 1px solid lightgray;
30+
padding : 5px 7px;
31+
}
32+
33+
.item-label {
34+
}
35+
36+
::slotted(.title) {
37+
text-align : center;
38+
position : absolute;
39+
left : 0;
40+
right : 0;
41+
top : 0px;
42+
z-index : -1;
43+
margin : 0 auto;
44+
}
45+
46+
47+
.date {
48+
position : absolute;
49+
top : 5px;
50+
right : 5px;
51+
}
52+
53+
a {
54+
color : blue;
55+
}
56+
a:visited {
57+
color : blue;
58+
}
59+
60+
61+
</style>
62+
63+
<section>
64+
65+
<!--
66+
<img id=help class=icon style='padding:2px' src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAAXNSR0IArs4c6QAABANJREFUSEvNl2tsVEUUx39n224pEVNsTcGqAYM1gYYP0mCUaILGLqVptzVGKZCArxIU2VYTYpQapU2Mj9jWR9H6wUesUdcGWoRSJIQYjUhETUkkRUVIoGztLqB9bOm2OzL7urtst3eXhsT77c495/+bOXPmzLlCEk9JydOZKsNi8ws2QYqAW4DskOsF4IRC/WRRdIvP393V9fZFM1mZyqC0dONsX8aMZ0SpjUCOmVjou0eJbM/wjb65e/f284l8YsCqbNN8JK0Ii5JeJXN2IXVjkJskMMbMCu4yVP1tolyBD4ohrNftF+dLY/o1AlbljsUIh4CsKwEl5aPoks7mlbFg++bnQF5JSmA6RlbLTHE2eo0V22teANUwHc2kfK2+WeJsGYqABysc9dcotiblPB2jaLDO3rXp1uOrrjCRUpmH02ed+9Ce112BFRdX1NavVmrrOlRQ4/nH4YN2GDgP826AiuXQ1AY1a2B+vsE5dBRO9UF+Hjj3GeMr7wbbncH3f4fB+Q30HA+8Voml4fOdjXWii4PfmnamCnIi4A+3wcvvwck+WFwAj1WC41Vo2gKdB+HYX0HRwWG4747gZJo+NcCPVEBWJuw4AIULYF0ZrK+D8QkeQDyjYxP5sqLcUa5EOqqApMAfdcCvvQbEvnxy8MQEfLILROCrN+CJbXDuHyoRRpWyS7Hd8a4gT8aB/zwNwyOQfS1kzzJWrEPr8sDX3wZXnAicZoEvu6HwVtjwIDz6Ikz4A+ARVIvY7DU/AkvjwB93wlk3LLgJiu8ywEd+g1Nn4fBRGB1LDL7n9mCOXBiE9v3QezIQJQ32wmENHgByr1qoL0v5ENitwT4gPWnwd7/AidNBuf5LIS9aBEsWws4DwTGXG2zLILzHk4PHJwfrLNbh0WGamwv3LoW2PbC2FG7MM6R6foczf0PJMmPs52Mw7AW/H37oiTvioRUHwPGhTqUipGgbHer45EpRLBXzSHKFj9MqYH24cqWilKJtRSCrVUukgBQCr6GwpCiUirkumpsRRBeQcMnUrc1CYFF0dxClOhtFpQmlD9hr9BYx1l7goK6y4LHokqm/6ktClDK9Eh0oShLA9ZmsRfjDZHJKpGGfviS0nb4Wx9MzdSSm7K8ygWYU8yYRb0HoNI+7O338YoFuAiONgM1euxpUm5nvzcBbKGZEGX4P1CcIcayerOnuaPxMj8V0mSvKa95XQrUZ/P5Le/Vs6AT0A08hDJk4iaJ1b2fThrBZDHhJdXVGTn/WF4KY5VFgrwtQtCOECmhCtELt8OR5Hz7S2qpTIfDENfQafr1r5jvJrNwsMgGAonVgzsimaOik4LBYaM+bzRJuCrgbxBHe08vt/h+/MIlmfzV+2v4DHQu0lKRbJa4AAAAASUVORK5CYII='>
67+
-->
68+
69+
<div class=item>
70+
71+
<!--
72+
<top-menu component=grp v2.0></top-menu>
73+
-->
74+
75+
<a id=home class=item-label href='/'>
76+
home
77+
</a>
78+
79+
</div>
80+
81+
<div class=item>
82+
83+
<a id=home class=item-label href='/utils/misc/index.html'>
84+
misc
85+
</a>
86+
87+
</div>
88+
89+
90+
<slot></slot>
91+
92+
93+
<div class=date>
94+
<slot name=date></slot>
95+
</div>
96+
97+
98+
</section>
99+
100+
</template>
101+
102+
<script>
103+
104+
(function misc_hdr({mod,dom,host}){
105+
106+
var obj = {
107+
version : 'v2.0',
108+
};
109+
110+
var df=true
111+
;
112+
113+
var ext,$,menu
114+
;
115+
116+
obj.initmod=function(params){
117+
118+
ext = params.ext;
119+
$ = params.$;
120+
menu = params.menu;
121+
122+
}//initmod
123+
124+
125+
//:
126+
127+
var top;
128+
129+
obj.init = async function(){
130+
131+
//top = mod['top-menu'];
132+
133+
//top.initmod({$,menu});
134+
135+
//await top.init();
136+
137+
138+
}//init
139+
140+
141+
//:
142+
143+
144+
obj.initdom = function(){
145+
146+
//var root = $.$(rootnode,'misc-hdr');
147+
var shadow = host.shadowRoot;
148+
149+
//top.initdom(shadow);
150+
151+
152+
}//initdom
153+
154+
155+
156+
return obj;
157+
158+
})//misc-hdr
159+
160+
</script>
161+
162+
</misc-hdr>
163+
164+
165+

0 commit comments

Comments
 (0)