Skip to content

Commit d673338

Browse files
javascript-2020javascript-2020
committed
update
1 parent 1a08541 commit d673338

File tree

3 files changed

+318
-0
lines changed

3 files changed

+318
-0
lines changed

‎utils/editors/markdown-editor/html/output-md/output-md.html‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
2+
3+
<output-root>
4+
5+
<template shadowrootmode=open>
6+
7+
<link rel=stylesheet href='css/github-markdown-light.css'>
8+
<style>
9+
10+
#output {height:100%;border:2px solid lightgray;box-sizing:border-box;padding:10px}
11+
12+
</style>
13+
14+
<div id=output class=markdown-body>
15+
</div>
16+
17+
</template>
18+
19+
<script>
20+
21+
function output(){
22+
console.log('output');
23+
var obj = {};
24+
25+
obj.initmod=function(){
26+
}//initmod
27+
28+
//vars:-
29+
30+
var src = 'https://cdn.jsdelivr.net/npm/markdown-it/dist/markdown-it.min.js';
31+
var resolve,load = new Promise(res=>resolve=res);
32+
33+
var root;
34+
var shadow;
35+
36+
var output;
37+
38+
//:
39+
40+
obj.init=function(){
41+
}//init
42+
43+
//:
44+
45+
obj.initdom=function(rootnode){
46+
47+
root = $.$(rootnode,'output-root');
48+
shadow = root.shadowRoot;
49+
50+
output = $(shadow,'#output');
51+
52+
53+
var script = document.createElement('script');
54+
script.src = src;
55+
script.onload = onload;
56+
document.head.append(script);
57+
58+
59+
}//initdom
60+
61+
62+
function onload(){
63+
64+
md = markdownit();
65+
resolve();
66+
67+
}//onload
68+
69+
70+
obj.display=async function(txt){
71+
72+
await load;
73+
74+
var html = md.render(txt);
75+
output.innerHTML = html;
76+
77+
}//show
78+
79+
80+
return obj;
81+
82+
}//output
83+
84+
</script>
85+
86+
</output-root>
87+

‎utils/editors/markdown-editor/html/output-md/test/output-md-test.html‎

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
2+
3+
<html>
4+
5+
<head>
6+
7+
<base href='https://javascript-2020.github.io/utils/markdown-editor/markdown-editor.html'>
8+
9+
<style>
10+
html {height:100%}
11+
body {height:calc(100% - 16px)}
12+
</style>
13+
14+
<script>
15+
16+
17+
function init(){
18+
console.log('init');
19+
20+
window.onfocus = ()=>editor && editor.focus();
21+
22+
//keydown.add(kd);
23+
24+
menumod = menumod();
25+
menumod.add.style();
26+
menumod.on.close = ()=>editor.focus();
27+
28+
29+
initdom();
30+
31+
32+
}//init
33+
34+
init.stack = [];
35+
init.stack.ct = 0;
36+
init.stack.total = 1;
37+
init.stack.mode = '';
38+
init.stack.complete = false;
39+
Object.defineProperty(init.stack,'add',{get:()=>{
40+
init.stack.total++;
41+
init.stack.mode && console[init.stack.mode]('add',init.stack.ct,init.stack.total);
42+
}});
43+
Object.defineProperty(init.stack,'complete',{get:()=>{
44+
init.stack.ct++;
45+
init.stack.mode && console[init.stack.mode]('complete',init.stack.ct,init.stack.total);
46+
init.stack.ct>=init.stack.total && init();
47+
}});
48+
49+
// (typeof init!='undefined' && init?.stack && init.stack.add)
50+
// (typeof init!='undefined' && init?.stack && init.stack.complete)
51+
52+
</script>
53+
54+
<script libs>
55+
56+
init.stack.add;
57+
58+
var ext;
59+
var $,datatype,menumod,keydown;
60+
61+
fetch('https://raw.githubusercontent.com/javascript-2020/ext-code/main/ext-loader.js')
62+
.then(res=>res.text().then(async txt=>{
63+
64+
ext = eval(txt);
65+
var promise = ext.load.libs(
66+
'js/dom/$.js.api',
67+
'js/core/datatype.js',
68+
'js/dom/menumod/menumod.js',
69+
'js/dom/keydown/keydown.js'
70+
);
71+
[$,datatype,menumod,keydown] = await promise;
72+
73+
init.stack.complete;
74+
75+
}));
76+
77+
</script>
78+
79+
</head>
80+
81+
82+
<body>
83+
84+
<output-local-api>
85+
<script src='https://html-loader-dblv8aserliq.runkit.sh/'></script>
86+
</output-local-api>
87+
88+
</body>
89+
90+
<script>
91+
92+
function initdom(){
93+
94+
output.initdom();
95+
96+
output.display(`
97+
--
98+
__Advertisement :)__
99+
100+
- __[pica](https://nodeca.github.io/pica/demo/)__ - high quality and fast image
101+
resize in browser.
102+
- __[babelfish](https://github.com/nodeca/babelfish/)__ - developer friendly
103+
i18n with plurals support and easy syntax.
104+
105+
You will like those projects!
106+
107+
---
108+
`);
109+
110+
}//initdom
111+
112+
init.stack.complete;
113+
114+
</script>
115+
116+
</html>
117+
118+

‎utils/editors/markdown-editor/html/output-md/v2.0/output-md-v2.0.html‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
2+
3+
<output-root>
4+
5+
<template shadowrootmode=open>
6+
7+
<link rel=stylesheet href='css/github-markdown-light.css'>
8+
<style>
9+
10+
#output {height:100%;border:2px solid lightgray;box-sizing:border-box;padding:10px}
11+
12+
</style>
13+
14+
<div id=output class=markdown-body>
15+
</div>
16+
17+
</template>
18+
19+
<script>
20+
21+
(function output({mod,root,node}){
22+
console.log('output');
23+
var obj = {};
24+
25+
var $;
26+
27+
obj.initmod = function(params){
28+
29+
$ = params.$;
30+
31+
}//initmod
32+
33+
34+
//vars:-
35+
36+
var md;
37+
38+
var root;
39+
var shadow;
40+
41+
var output;
42+
43+
44+
//:
45+
46+
47+
obj.init = function(){
48+
49+
50+
}//init
51+
52+
53+
libs();
54+
55+
function libs(){
56+
57+
libs = new Promise(resolve=>{
58+
59+
var script = document.createElement('script');
60+
script.src = 'https://cdn.jsdelivr.net/npm/markdown-it/dist/markdown-it.min.js';
61+
script.onload = onload;
62+
document.head.append(script);
63+
64+
65+
function onload(){
66+
67+
md = markdownit();
68+
resolve();
69+
70+
}//onload
71+
72+
});
73+
74+
}//libs
75+
76+
77+
//:
78+
79+
80+
obj.initdom = function(rootnode){
81+
82+
root = $.$(rootnode,'output-root');
83+
shadow = root.shadowRoot;
84+
85+
output = $(shadow,'#output');
86+
87+
88+
}//initdom
89+
90+
91+
//:
92+
93+
94+
95+
obj.display = async function(txt){
96+
97+
await libs;
98+
99+
var html = md.render(txt);
100+
output.innerHTML = html;
101+
102+
}//show
103+
104+
105+
106+
return obj;
107+
108+
});//output
109+
110+
</script>
111+
112+
</output-root>
113+

0 commit comments

Comments
 (0)