Skip to content

Commit b4b36d7

Browse files
javascript-2020javascript-2020
committed
save file
1 parent 39b64e1 commit b4b36d7

1 file changed

Lines changed: 50 additions & 207 deletions

File tree

‎utils/editors/html/code-explorer/v2.0/code-explorer-v2.0.html‎

Lines changed: 50 additions & 207 deletions
Original file line numberDiff line numberDiff line change
@@ -51,20 +51,6 @@
5151
.label
5252
{}
5353

54-
.html
55-
{display:flex;gap:5px}
56-
.html .line
57-
{width:50px;flex-shrink:0;border-right:1px solid lightgray}
58-
.html .indent
59-
{}
60-
.html .name
61-
{font-weight:bold;flex-shrink:0}
62-
.html .v
63-
{flex-shrink:0;font-size:var(--val)}
64-
.html .id
65-
{color:blue;flex-shrink:0;font-size:var(--val)}
66-
.html .class
67-
{flex-shrink:0;color:green;font-size:var(--val);font-style:italic}
6854

6955

7056
.icon
@@ -145,6 +131,8 @@
145131

146132

147133
var btn = {};
134+
var fn = {};
135+
148136
var sort = {};
149137
sort.alpha = {};
150138
sort.source = {};
@@ -157,6 +145,10 @@
157145
obj.init = async function(){
158146
debug=eval(debug.mod);
159147
debug('init');
148+
html = mod['code-eplorer-html'];
149+
html.initmod({fn});
150+
151+
160152
}//init
161153

162154

@@ -214,7 +206,7 @@
214206

215207
ui.mode = 'html';
216208
btn.active('html');
217-
update.html();
209+
html.update();
218210

219211
}//html
220212

@@ -274,84 +266,6 @@
274266
}//fn
275267

276268

277-
update.html = function(){
278-
279-
var txt = editor.getvalue();
280-
var list = parse.html(txt);
281-
282-
var colours = {
283-
head : 'darkslategray',
284-
body : 'darkslategray',
285-
script : 'firebrick',
286-
template : 'forestgreen',
287-
style : 'dodgerblue',
288-
};
289-
console.log(list);
290-
view.replaceChildren();
291-
292-
list.forEach(o=>{
293-
294-
var node = ui.html.cloneNode(true);
295-
296-
$(node,'.line').textContent = o.line;
297-
$(node,'.indent').style.width = (o.indent*3)+'px';
298-
299-
$(node,'.name').textContent = o.name;
300-
if(colours[o.name]){
301-
node.style.color = colours[o.name];
302-
}
303-
if(o.name.includes('-')){
304-
node.style.color = 'hsl(33,100%,30%)';
305-
}
306-
307-
var f=false;
308-
if(o.attrs.component){
309-
var regex = /\bv\d+(?:\.\d+)*(?!\s*=\s*)\b/;
310-
var v;
311-
for(var key in o.attrs){
312-
313-
if(regex.test(key)){
314-
v = key;
315-
break;
316-
}
317-
318-
}//for
319-
if(v){
320-
$(node,'.v').textContent = v;
321-
f = true;
322-
}
323-
}
324-
if(!f){
325-
$(node,'.v').remove();
326-
}
327-
328-
if(o.attrs.id){
329-
$(node,'.id').textContent = o.attrs.id;
330-
}else{
331-
$(node,'.id').remove();
332-
}
333-
334-
if(o.attrs.class){
335-
$(node,'.class').textContent = o.attrs.class;
336-
}else{
337-
$(node,'.class').remove();
338-
}
339-
340-
341-
342-
if(o.name=='script'){
343-
}
344-
345-
346-
347-
348-
node.onclick = e=>editor.gotoline(o.line,o.col);
349-
350-
view.append(node);
351-
352-
});
353-
354-
}//html
355269

356270

357271
//:
@@ -361,7 +275,6 @@
361275

362276
var parse = {};
363277
parse.fn = {};
364-
parse.html = {};
365278

366279

367280
parse.fn.javascript = function(txt){
@@ -463,8 +376,8 @@
463376
if(!valid(name))return;
464377

465378
var args = parse.fn.args(txt,i1);
466-
var indent = parse.indent(txt,i1);
467-
var col = colno(txt,i1);
379+
var indent = fn.indent(txt,i1);
380+
var col = fn.colno(txt,i1);
468381

469382
return {index:i1,col,name,args,indent};
470383

@@ -497,9 +410,10 @@
497410
if(!valid(name))return;
498411

499412
var args = parse.fn.args(txt,i1);
500-
var indent = parse.indent(txt,i1);
413+
var indent = fn.indent(txt,i1);
414+
var col = fn.colno(txt,i1);
501415

502-
return {index:i1,name,args,indent};
416+
return {index:i1,col,name,args,indent};
503417

504418
}//type2
505419

@@ -515,16 +429,6 @@
515429
}//args
516430

517431

518-
parse.indent = function(txt,i1){
519-
520-
var i2 = txt.lastIndexOf('\n',i1);
521-
var i3 = txt.indexOf('\n',i1);
522-
var line = txt.slice(i2+1,i3);
523-
var match = line.match(/^\s*/);
524-
var indent = match ? match[0].length : 0;
525-
return indent;
526-
527-
}//indent
528432

529433

530434

@@ -559,6 +463,8 @@
559463
//:
560464

561465

466+
fn.valid = valid;
467+
562468
function valid(str){
563469

564470
var regex = /^[a-zA-Z_$][0-9a-zA-Z_$]*$/
@@ -568,6 +474,22 @@
568474
}//valid
569475

570476

477+
fn.indent = indent;
478+
479+
function indent(txt,i1){
480+
481+
var i2 = txt.lastIndexOf('\n',i1);
482+
var i3 = txt.indexOf('\n',i1);
483+
var line = txt.slice(i2+1,i3);
484+
var match = line.match(/^\s*/);
485+
var indent = match ? match[0].length : 0;
486+
return indent;
487+
488+
}//indent
489+
490+
491+
fn.lineno = lineno;
492+
571493
function lineno(txt,i){
572494

573495
var start = 0;
@@ -581,6 +503,8 @@
581503
}//line
582504

583505

506+
fn.colno = colno;
507+
584508
function colno(txt,index){
585509

586510
var i1 = txt.lastIndexOf('\n',index);
@@ -590,15 +514,6 @@
590514
}//colno
591515

592516

593-
function ws(txt,i1){
594-
595-
var regex = /\s*/y;
596-
regex.lastIndex = index;
597-
var match = txt.match(regex);
598-
var n = math.length;
599-
return n;
600-
601-
}//ws
602517

603518

604519

@@ -607,96 +522,24 @@
607522
//:
608523

609524

610-
parse.html = function(txt){
611-
612-
var list = [];
613-
var regex = /<\/?[a-z][a-z0-9\-]*\b[^>]*>/gi;
614-
var regex = /<\/?[a-z][a-z0-9\-]*(?=[\s\/>])[^>]*>/gi;
615-
616-
while(true){
617-
618-
var match = regex.exec(txt);
619-
if(match===null)break;
620-
621-
var index = match.index;
622-
var tag = match[0];
623-
624-
if(!tag.startsWith('</')){
625-
//console.log(tag);
626-
var match = tag.match(/^<\s*([a-z0-9\-]+)/i);
627-
var name = match ? match[1].toLowerCase() : '';
628-
629-
/*
630-
var match = tag.match(/^<\s*\/?\s*([a-z0-9\-]+)/i);
631-
var name = match ? match[1].toLowerCase() : '';
632-
console.log(name);
633-
*/
634-
635-
if(!name){
636-
//debugger;
637-
console.log('parse.html error',tag);
638-
}
639-
640-
var attrs = {};
641-
642-
if(name){
643-
var parser = new DOMParser();
644-
var doc = parser.parseFromString(tag,'text/html');
645-
var element = doc.querySelector(name);
646-
if(!element){
647-
console.log('parse.html error',tag);
648-
}else{
649-
var attrs = {};
650-
651-
for(var i=0;i<element.attributes.length;i++){
652-
653-
var attr = element.attributes[i];
654-
attrs[attr.name] = (attr.value==='' ? true : attr.value);
655-
656-
}//for
657-
658-
var line = lineno(txt,index);
659-
var col = colno(txt,index)-1;
660-
var indent = parse.indent(txt,index);
661-
662-
var o = {
663-
index,
664-
line,
665-
col,
666-
indent,
667-
name,
668-
attrs
669-
};
670-
list.push(o);
671-
}
672-
}
673-
}
674-
675-
}//while
676-
677-
return list;
678-
679-
680-
}//html
681-
682-
683-
684-
685-
686-
687-
688-
689-
690-
691-
692-
693-
694-
695-
696-
697-
698-
699-
525+
526+
527+
528+
529+
530+
531+
532+
533+
534+
535+
536+
537+
538+
539+
540+
541+
542+
700543
return obj;
701544

702545
//code-explorer

0 commit comments

Comments
 (0)