Skip to content

Commit 19f582a

Browse files
javascript-2020javascript-2020
committed
save file
1 parent 7d7e1f3 commit 19f582a

File tree

1 file changed

+106
-49
lines changed

1 file changed

+106
-49
lines changed

‎utils/editors/text-diff/v2.0/text-diff-v2.0.html‎

Lines changed: 106 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,35 @@
44
<html>
55

66
<head>
7+
<meta charset=utf-8>
78

8-
<title>text diff</title>
9+
<title>
10+
Text Diff
11+
</title>
12+
913
<meta name=description content='Compare and highlight differences between two text files instantly with this free online text-diff tool. Fast, secure, and easy to use—no downloads required'>
1014

1115
<base href='https://ext-code.com/utils/editors/text-diff/'>
12-
<base href='https://javascript-2020.github.io/utils/editors/text-diff/'>
1316
<link rel=canonical href='https://ext-code.com/utils/editors/text-diff/text-diff.html'>
1417

1518
<meta name=viewport content='width=device-width, initial-scale=1'>
16-
<link rel=icon type='image/png' href='images/text-diff-favicon.png'>
19+
<link rel=icon type='image/png' href='iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAMAAAAM7l6QAAAAnFBMVEVHcEwAAAEHBg9gNqsEAwlXMZwUCyMAAAA1RJkAAAAAAAAAAAAfKFsAAAAdEDQAAAAAAAAAAAAKCRgkFEAAAABlObUVGz04SKIAAABBJHM+UbUAAAAAAAAAAAAvPYk0HV0AAAARFjIAAABPLI0AAAAAAAAmMW4aIUwAAAApNHYAAAAAAABnOrg/UbUAAAFAUrdoO7k7TKsMECVpO7uPyrl7AAAALHRSTlMA/P39//z95vzdQPb64fsWsCT9+17+/f3S+v41ju7++pz7UfsKd/r7KvzFaJeOgx8AAAGbSURBVCjPXZPttmswEEATgqqPolUUpUV7eq474tz3f7c7I47S/SPWshMzGTOMsbxO7Zm03rMP7h4IbUaAddravSXc3YIryu35ANzL8OYBwfT68KV0GSXDX+JCy5BE9oFs4OWT5j/jZJPnizaMP1bIWFvD92Gth52mPS6zbgtI54//nr48Jj/pjts5W/RwPRMRaK+B9MmxlvRJuzDzJN2V5fvypMcr8orglqDmjvOHrTUmNgzjmSzGBgj2RH7YZB6RxQeAM1GmXfvOfNyRTW7gHxW+4EXLbHFVVcOVIvh6r4gbE5Po+G33W/DxCb4h+16qDY1IsboQPV3FGUyyuhFPWjcdrH5h8enSuGqN7KV+jAypNKfkv+4nIgAwY7IY/5+Ui567xuLc1Hu0UWYg+kbvPaewUFeAvcWRSq50nvIuRC0zDpqPHLOVDr+hYKT7OONaFiOr2GEAdas0eqFtMmesgAB/gNLoj0a/0fcipP6zI1VRVRVpROVHU1e9XMBLBNuRKEXVGDNNJayPkTptBsq7fw4cjqM3k9bYrf8B50dH+JJaGO8AAAAASUVORK5CYII='>
20+
21+
<script type='application/ld+json'>
22+
{
23+
"@context" : "https://schema.org",
24+
"@type" : "SoftwareApplication",
25+
"name" : "Text Diff",
26+
"url" : "https://ext-code.com/utils/editors/text-diff/text-diff.html",
27+
"author" : {"@type":"Person","name":"Matthew Richards"},
28+
"description" : "Compare and highlight differences between two text files instantly with this free online text-diff tool. Fast, secure, and easy to use—no downloads required",
29+
"applicationCategory" : "DeveloperApplication",
30+
"operatingSystem" : "All",
31+
"browserRequirements" : "Requires JavaScript-enabled browser",
32+
"softwareVersion" : "1.0.0",
33+
"offers" : {"@type":"Offer","price":"0","priceCurrency":"GBP"}
34+
}
35+
</script>
1736

1837

1938
<script src="https://cdn.jsdelivr.net/npm/diff@latest/dist/diff.min.js"></script>
@@ -26,11 +45,15 @@
2645
console.log('text-diff-v2.0.html');
2746
console.log();
2847
console.json=v=>console.log(JSON.stringify(v,null,4));
48+
var df=true,version='v2.0'
49+
;
50+
2951
var ext;
3052
var $;
3153
var datatype;
3254
var menumod;
3355
var keydown;
56+
var debug;
3457

3558
var menu;
3659

@@ -46,26 +69,24 @@
4669
//:
4770

4871

49-
mod.stack.add = init;
50-
5172
async function init(){
52-
console.log('init');
73+
debug('init',version);
5374

5475

5576
//keydown = keydown();
5677
menu = menumod();
5778

58-
hdr = mod.hdr;
79+
hdr = mod['editors-hdr'];
5980
//mod.menu.main = mod.menu.main();
6081
//debugger;
61-
primary.filemod = mod['filemod[1]'];
62-
primary.editor = mod['editor[1]'];
82+
primary.filemod = mod.file1;
83+
primary.editor = mod.editor1;
6384

64-
secondary.filemod = mod['filemod[2]'];
65-
secondary.editor = mod['editor[2]'];
85+
secondary.filemod = mod.file2;
86+
secondary.editor = mod.editor2;
6687

67-
output = mod['editor[output]'];
68-
log = mod.log;
88+
output = mod.output;
89+
log = mod['log-mod'];
6990

7091

7192
hdr.initmod({ext,$,menu,menumod});
@@ -80,21 +101,22 @@
80101
output.initmod({ext,$,menu});
81102
log.initmod({ext,$});
82103

83-
84-
await hdr.init();
85-
//await mod.menu.main.init();
86-
await primary.filemod.init();
87-
await primary.editor.init();
104+
await Promise.all([
105+
hdr.init(),
106+
//mod.menu.main.init(),
107+
primary.filemod.init(),
108+
primary.editor.init(),
109+
110+
secondary.filemod.init(),
111+
secondary.editor.init(),
88112

89-
await secondary.filemod.init();
90-
await secondary.editor.init();
113+
//publish.init(),
91114

92-
//publish.init();
115+
output.init(),
116+
log.init(),
117+
]);
93118

94-
await output.init();
95-
await log.init();
96119

97-
//:
98120

99121
window.onfocus = ()=>primary.editor && primary.editor.focus();
100122
keydown.add(kd);
@@ -117,9 +139,10 @@
117139
'js/dom/$.js',
118140
'js/core/datatype.js',
119141
'js/dom/menumod/menumod.js',
120-
'js/dom/keydown/keydown.js'
142+
'js/dom/keydown/keydown.js',
143+
'js/debug/debug.js',
121144
);
122-
[$,datatype,menumod,keydown] = await promise;
145+
[$,datatype,menumod,keydown,debug] = await promise;
123146

124147
mod.stack.complete;
125148

@@ -139,8 +162,16 @@
139162
html
140163
{height:100%;font-family:arial}
141164
body
142-
{display:flex;flex-direction:column;height:calc(100% - 40px);margin:20px}
143-
165+
{display:flex;flex-direction:column;height:calc(100% - 40px);margin:20px;gap:10px}
166+
167+
#output-hdr
168+
{display:flex;gap:10px;}
169+
#output-hdr>div
170+
{display:flex;gap:10px;align-items:center;border:1px solid lightgray;border-radius:5px;padding:3px 5px}
171+
[type=checkbox]
172+
{width:20px;height:20px;margin:0}
173+
[value=check]
174+
{flex:1}
144175

145176
input
146177
{font-size:16px;padding:5px;cursor:pointer}
@@ -179,7 +210,7 @@
179210
#label
180211
{flex:1;text-align-center}
181212

182-
editor-root
213+
web-editor
183214
{flex:1;border-top:1px solid lightgray}
184215

185216
#output
@@ -199,37 +230,42 @@
199230

200231
<body>
201232

202-
<hdr component=grp v2.0>
203-
<img class=title src='images/text-diff.png' style='top:5px;height:35px'>
204-
<span slot=date>24 Aug 2025</span>
205-
</hdr>
233+
<editors-hdr component=grp>
234+
<img class=title src='images/text-diff.png' style='top:5px;height:45px'>
235+
<time slot=date datetime=2025-10-31>31 Oct 2025</time>
236+
</editors-hdr>
206237

207-
208-
<input type=button value=check>
238+
<div id=output-hdr>
239+
<div>
240+
show output
241+
<input type=checkbox checked>
242+
</div>
243+
<input type=button value=check>
244+
</div>
209245

210246
<div id=main>
211247
<div id=view1>
212248
<div id=hdr>
213-
<filemod inst=1 component v2.0></filemod>
249+
<file-mod id=file1 component></file-mod>
214250
<div id=label>primary</div>
215251
</div>
216-
<editor inst=1 component v2.0></editor>
252+
<web-editor id=editor1 component></web-editor>
217253
</div>
218254
<div id=view2>
219255
<div id=hdr>
220-
<filemod inst=2 component v2.0></filemod>
256+
<file-mod id=file2 component></file-mod>
221257
<div id=label>secondary</div>
222258
</div>
223-
<editor inst=2 component v2.0></editor>
259+
<web-editor id=editor2 component></web-editor>
224260
</div>
225261
</div>
226262

227263
<div id=output>
228-
<editor inst=output component v2.0></editor>
264+
<web-editor id=output component v2.0></web-editor>
229265
</div>
230266

231267

232-
<log component v2.0></log>
268+
<log-mod component></log-mod>
233269

234270

235271

@@ -257,7 +293,7 @@
257293

258294

259295
async function initdom(rootnode){
260-
console.log('initdom');
296+
debug('initdom');
261297
var root = rootnode;
262298

263299
keydown.initdom();
@@ -267,38 +303,59 @@
267303

268304
//mod.menu.main.initdom();
269305

270-
271-
$('[value=check]').onclick = btn.check;
306+
$('#output-hdr [type=checkbox]').onclick = btn['output-chk'];
307+
$('[value=check]').onclick = btn.check;
272308

273309

274310

275-
var view1 = $('#view1');
311+
var view1 = $('#view1');
276312
primary.filemod.initdom(view1);
277313
primary.editor.initdom(view1,{mode:'text'});
278314

279-
var view2 = $('#view2');
315+
var view2 = $('#view2');
280316
secondary.filemod.initdom(view2);
281317
secondary.editor.initdom(view2,{mode:'text'});
282318

283-
var node = $('#output');
319+
var node = $('#output');
284320
await output.initdom(node,{mode:'text'});
321+
322+
285323

286-
var style = document.createElement('style');
324+
var style = document.createElement('style');
287325
style.textContent = `
288326
.red
289327
{position:absolute;background:var(--red);z-index:20}
290328
.green
291329
{position:absolute;background:var(--green);z-index:20}
292330
`;
293331

294-
output.root.shadowRoot.append(style);
332+
output.shadowRoot.append(style);
333+
334+
335+
336+
337+
338+
295339

296340
}//initdom
297341

298342

299343
//:
300344

301345

346+
btn['output-chk'] = function(){
347+
348+
var output = $('#output');
349+
var chk = $('#output-hdr [type=checkbox]');
350+
if(chk.checked){
351+
output.style.display = '';
352+
}else{
353+
output.style.display = 'none';
354+
}
355+
356+
}//output-chk
357+
358+
302359
btn.check = function(){
303360

304361
check();

0 commit comments

Comments
 (0)