Skip to content

Commit 31323d4

Browse files
javascript-2020javascript-2020
committed
save file
1 parent 635bc5e commit 31323d4

File tree

1 file changed

+173
-88
lines changed

1 file changed

+173
-88
lines changed

‎html-components/html-components.html‎

Lines changed: 173 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -4,21 +4,84 @@
44

55
<html>
66

7-
<head>
8-
<meta charset=utf-8>
9-
10-
<meta style="display: block;" name="viewport" content="width=device-width, initial-scale=1">
7+
<head>
8+
<meta charset=utf-8>
9+
10+
<meta name=viewport content='width=device-width, initial-scale=1'>
11+
12+
<link rel=icon type='image/x-icon' href='/favicon.ico'>
13+
14+
15+
<script src='https://cdn.jsdelivr.net/npm/ace-builds@1.37.0/src-min-noconflict/ace.js'></script>
16+
17+
18+
<script src='https://libs.ext-code.com/js/dom/component/component.js'></script>
19+
20+
<script init>
21+
console.clear();
22+
console.log('html-editor-v2.0.html');
23+
console.log();
24+
console.json=v=>console.log(JSON.stringify(v,null,4));
25+
var df=true,version='v1.0'
26+
;
27+
28+
var ace;
29+
30+
var ext;
31+
var $;
32+
var datatype;
33+
var menumod;
34+
var keydown;
35+
var debug;
36+
37+
var menu;
1138

12-
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" style="display: block;">
13-
<link href="/css/website.css" id="website-css" rel="stylesheet">
39+
var ex1;
1440

15-
<style id="page-css">
16-
</style>
17-
<script id="page-js"></script>
1841

42+
async function init(){
1943

44+
menu = menumod();
45+
46+
ex1 = mod.ex1;
47+
48+
ex1.initmod({ext,$,menu,ace});
49+
50+
await Promise.all([
51+
ex1.init(),
52+
]);
53+
54+
innitdom();
55+
56+
}//init
57+
2058

21-
<style>
59+
(async()=>{
60+
61+
mod.stack.add;
62+
63+
({ext} = await import('https://libs.ext-code.com/js/io/ext-loader/ext-loader.m.js'));
64+
65+
var promise = ext.load.libs(
66+
'js/dom/$.js',
67+
'js/core/datatype.js',
68+
'js/dom/menumod/menumod.js',
69+
'js/dom/keydown/keydown.js',
70+
'js/debug/debug.js',
71+
);
72+
[$,datatype,menumod,keydown,debug] = await promise;
73+
74+
mod.stack.complete;
75+
76+
})();
77+
78+
</script>
79+
80+
81+
82+
<link href="/css/website.css" id="website-css" rel="stylesheet">
83+
84+
<style>
2285

2386
/*
2487
@font-face {
@@ -33,13 +96,16 @@
3396
.hr2
3497
{border-top:1px solid blue;margin:30px}
3598

36-
</style>
99+
</style>
37100

38101

39102

40-
</head>
103+
</head>
104+
105+
106+
<body>
107+
41108

42-
<body>
43109
<div id="hdr" style="">
44110
<a id="home" class="hdr-icon" href="https://javascript-2020.github.io/">
45111
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IArs4c6QAABA5JREFUOE+lkVtsVEUYx//fnDnn7KW73XZ7peVSWtvSC5duGrXGkBLFUH1AfdD0DWNMn3zwwURJZA2++CKJvtCoSBMkaoLEBDEYpBQCldRSUnq11La4lF7YstfuntuM2cIjKLGTTDLJN//f9/1mCE+womdP+Ae+u1V/99Ls8IHZ49l/i9AT8JA+czx06du5nxam459t8fg/b78Yth+X+09gODyqdW3ua5mfSLQOXkrEa3Tt5PqA3yx3FmXvvMiFzRY8G/vDB0qPrkv542NLB+Pp1GEpBAV8viOH3ip9b13Aj75cOBhLxg8LIagoUHAk/HbZ/wNeGZNvKhyha8MxNRhQ3yUiWloxjz2zI3BXEmbanqKvHzXpYz/l6qT8ghG6LEcmGENh7qJty5imMo8ATrXVUucjgVJKdusW1EgEjs8HcrtBo6NwCqozrddGFrozhrMdkA+zBE1lU60NJV2puby+xkYomQxkMglZWQmlpgYWXR6XtZyjUzgYAUMeAUVk48K5y3cnLMJpAHsXlhfhOAIVZWUgQr8lsvv2P7+1WnLskcA9CKSYgibbxknqH5MtNomfpZRuAIyIDEHijd6+5d+hKaelkHvHpqYghIOG2joojPVnLHVfx25fiEn2vZRSByCIKMMle5l6zieCI5ORU5msuTvn5dKVyYYtJR2BAk9qas74wTDFbkA8VGY55cHKDZ79mWRCnZxd/iVrOXW5otul9TXVVb5O73TPewoc+0eAXsoVfB7FeHpn8Sd5bt5sOeLVmb9X1fISV04VkYUsqio9tsbpt9Ws82v/jXuHU6u250E3ee6+wl+j8ImonyznrBDiOSEEdE2Bx21mGZMKAFVKrMHWIgIgljvAEZLM1YzmNkwHjLHcviJVpYM+6IkEdaGdvxeN7lyJx1BfXY2Az4KSCxIgpIRh2CAiqJzl3nAN7gggnlQxPj2NwvwAioLBGwYzX6APu2fLdc17wTSNesu2EfDnobU5kFNHxrQw8ucSlu+n4XVpcOkcVRsLUFLoRTLtYOBmDLFECirn0DR9wjDTe+hQz8omJuxeIcRWKSU0jSPUmA+vm2E2ch9/jM5DVRn8XhdSqybKi33YUV8G0wIGR+MwzQfTM8b+Eoy3U/irpRri1Dtze64ylkhge/02tDYXQkoLt+djWFpJQ1EYvG4NGcOCW+fYUOKHz+vFwM0VDE+MI+D3o2rT5oi0ZTuFj841kO4+MzQyUhxLxvHsrhBam0ugKBZiySySaRMKI+g6X5uGc2UN6nZ5MTC8hP6hQQR8+djV1LQsjcwr9P6nEz5P0L9rcGKcx2NxtIVa0NJQilQ2jTuLMUSjaXDOkefVkU0b4C4FwXwXKipKcX14EVcHryM/kI9Q/TZ7NZoY+gdEZNOa/2ZSPwAAAABJRU5ErkJggg==" class="hdr-icon-img" />
@@ -68,57 +134,69 @@
68134

69135

70136

71-
<div id="scroll">
72-
<div id="center" style="">
137+
<div id=scroll>
138+
139+
<div id=center>
73140

74-
<!-- page html -->
75141

76142

77-
<div style="margin-bottom: 20px;">
78-
i include here a standard example of web components, which i feel went some way as to introducing the ability to include complex functionality
79-
into web pages, i feel however it fell short on a number of issues i have solved with my component.js library, these are
80-
<ul>
81-
<li>
82-
elements were scoped to the global namespace, always a problem when functionality gets ever more complex its only a matter
83-
of time before clashes occur
84-
</li>
85-
<li>
86-
methods and properties associated with the component were added to the host node of the element, again thats ok for simple
87-
components, but when components get ever more complex its going to be a problem
88-
</li>
89-
</ul>
90-
</div>
143+
<div style="margin-bottom: 20px;">
144+
i include here a standard example of web components, which i feel went some way as to introducing the ability to include complex functionality
145+
into web pages, i feel however it fell short on a number of issues i have solved with my component.js library, these are
146+
<ul>
147+
<li>
148+
elements were scoped to the global namespace, always a problem when functionality gets ever more complex its only a matter
149+
of time before clashes occur
150+
</li>
151+
<li>
152+
methods and properties associated with the component were added to the host node of the element, again thats ok for simple
153+
components, but when components get ever more complex its going to be a problem
154+
</li>
155+
</ul>
156+
</div>
91157

92-
<div>
93-
<p>
94-
to me a component / module should have a standard lifecycle that is
95-
</p>
96-
<ul>
97-
<li>
98-
initmod, this is where local depencies are passed to the component, they fundamentally should not be relying on global
99-
state to receive their local depencies
100-
</li>
101-
<li>
102-
init, this is where the component first get executed, its an asynchronous function that allows the component to check
103-
that it has everything it needs to run, including access to the network to load resources it may need
104-
</li>
105-
<li>
106-
initdom, this is where the component is able to set up its ui, internally build the references it needs to run effeiciently
107-
in code
108-
</li>
109-
</ul>
110-
<p>
111-
components should also be effectively namespaced so they are free to load any other components that they may need without having to
112-
worry that there will ever be a clash
113-
</p>
114-
</div>
115-
<div>
116-
<p>
117-
my component library just needs to be included as a script tag, it runs on window.onload, it has a fundatmental loading stack that allows
118-
init runs to be delayed until the loading stack is complete
119-
</p>
120-
</div>
158+
<div>
159+
<p>
160+
to me a component / module should have a standard lifecycle that is
161+
</p>
162+
<ul>
163+
<li>
164+
initmod, this is where local depencies are passed to the component, they fundamentally should not be relying on global
165+
state to receive their local depencies
166+
</li>
167+
<li>
168+
init, this is where the component first get executed, its an asynchronous function that allows the component to check
169+
that it has everything it needs to run, including access to the network to load resources it may need
170+
</li>
171+
<li>
172+
initdom, this is where the component is able to set up its ui, internally build the references it needs to run effeiciently
173+
in code
174+
</li>
175+
</ul>
176+
<p>
177+
components should also be effectively namespaced so they are free to load any other components that they may need without having to
178+
worry that there will ever be a clash
179+
</p>
180+
</div>
121181

182+
<div>
183+
<p>
184+
my component library just needs to be included as a script tag, it runs on window.onload, it has a fundatmental loading stack that allows
185+
init runs to be delayed until the loading stack is complete
186+
</p>
187+
</div>
188+
189+
<div>
190+
<p>
191+
i demonstrate here the simplest form i can come up with at the moment
192+
</p>
193+
<snippet-html-console id=ex1 component v2.0 src='ex/log-ex.html'></snippet-html-console>
194+
</div>
195+
196+
<div>
197+
</div>
198+
199+
122200

123201

124202

@@ -155,6 +233,12 @@
155233
</div>
156234

157235

236+
237+
238+
239+
240+
241+
158242
<code class=code>
159243

160244
class newElement extends HTMLElement {
@@ -192,39 +276,40 @@
192276

193277
</code>
194278

195-
<br>
196-
197-
<div id=links>
198-
<a href='https://web.dev/articles/custom-elements-v1'>Custom Elements v1 - Reusable Web Components<a>
199-
<a href='https://syntackle.com/blog/web-components-and-custom-elements-5LuzI/'>Web Components & Custom Elements</a>
200-
<a href='https://javascript.info/custom-elements'>Custom elements</a>
201-
<a href='https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements'>Using custom elements</a>
202-
<a href='https://blog.jim-nielsen.com/2023/html-web-components-an-example/'>HTML Web Components: An Example</a>
203-
<a href='https://web.archive.org/web/20140118032429/http://www.html5rocks.com/en/tutorials/webcomponents/customelements/'>Custom Element : Defining new elements in html</a>
204-
</div>
205-
279+
<br>
206280

281+
<div id=links>
282+
<a href='https://web.dev/articles/custom-elements-v1'>Custom Elements v1 - Reusable Web Components<a>
283+
<a href='https://syntackle.com/blog/web-components-and-custom-elements-5LuzI/'>Web Components & Custom Elements</a>
284+
<a href='https://javascript.info/custom-elements'>Custom elements</a>
285+
<a href='https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements'>Using custom elements</a>
286+
<a href='https://blog.jim-nielsen.com/2023/html-web-components-an-example/'>HTML Web Components: An Example</a>
287+
<a href='https://web.archive.org/web/20140118032429/http://www.html5rocks.com/en/tutorials/webcomponents/customelements/'>Custom Element : Defining new elements in html</a>
288+
</div>
207289

208-
<!-- page html -->
209290

291+
</div>
210292
</div>
211-
</div>
212293

213294

214-
<div id="ftr" style="margin-top: 20px; background-color: rgb(0, 103, 165); display: flex; padding-bottom: 10px;">
215-
<img src="/javascript-2020.png" style="height: 40px;" />
216-
<div id="spc" style="flex: 1 1 0%;">
217-
</div>
218-
<a href="https://www.textstudio.com/" style="margin-right: 30px; margin-top: 10px; color: white; text-decoration: none; text-align: right;">
219-
<div>
220-
page title designed with
221-
</div>
222-
<div style="text-decoration: underline;">
223-
textstudio.com
224-
</div>
225-
</a>
226-
</div>
227-
</body>
228-
<script style="display: block;" src="/js/website.js" id="website-js">
229-
</script>
295+
296+
</body>
297+
298+
<script>
299+
300+
301+
function initdom(){
302+
303+
ex1.initdom();
304+
305+
}//initdom
306+
307+
308+
</script>
309+
230310
</html>
311+
312+
313+
314+
315+

0 commit comments

Comments
 (0)