Skip to content

Commit e078445

Browse files
javascript-2020javascript-2020
committed
save file
1 parent 7d2de0d commit e078445

File tree

1 file changed

+120
-55
lines changed

1 file changed

+120
-55
lines changed

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

Lines changed: 120 additions & 55 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(),
88109

89-
await secondary.filemod.init();
90-
await secondary.editor.init();
110+
secondary.filemod.init(),
111+
secondary.editor.init(),
91112

92-
//publish.init();
113+
//publish.init(),
114+
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}
@@ -164,13 +195,13 @@
164195

165196

166197
#main
167-
{display:flex;flex:1;margin:5px 0}
198+
{display:flex;flex:1;margin:5px 0;gap:10px}
168199

169200
#view1
170-
{flex:1;display:flex;flex-direction:column;border:1px solid var(--green)}
201+
{flex:1;display:flex;flex-direction:column;border:1px solid var(--green);padding:5px}
171202

172203
#view2
173-
{flex:1;display:flex;flex-direction:column;border:1px solid var(--red)}
204+
{flex:1;display:flex;flex-direction:column;border:1px solid var(--red);padding:5px}
174205

175206

176207
#hdr
@@ -179,11 +210,16 @@
179210
#label
180211
{flex:1;text-align-center}
181212

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

185216
#output
186-
{flex:1;border:1px solid lightgray;overflow:auto;margin:0}
217+
{border:1px solid lightgray;padding:5px}
218+
219+
/*
220+
#output-hldr
221+
{flex:1;border:1px solid lightgray;overflow:auto;margin:0;padding:5px;box-sizing:border-box}
222+
*/
187223

188224

189225
.red
@@ -199,37 +235,45 @@
199235

200236
<body>
201237

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>
238+
<editors-hdr component=grp>
239+
<img class=title src='images/text-diff.png' style='top:5px;height:45px'>
240+
<time slot=date datetime=2025-10-31>31 Oct 2025</time>
241+
</editors-hdr>
206242

207-
208-
<input type=button value=check>
243+
<div id=output-hdr>
244+
<div>
245+
show output
246+
<input type=checkbox checked>
247+
</div>
248+
<input type=button value=check>
249+
</div>
209250

210251
<div id=main>
211252
<div id=view1>
212253
<div id=hdr>
213-
<filemod inst=1 component v2.0></filemod>
254+
<file-mod id=file1 component></file-mod>
214255
<div id=label>primary</div>
215256
</div>
216-
<editor inst=1 component v2.0></editor>
257+
<web-editor id=editor1 component></web-editor>
217258
</div>
218259
<div id=view2>
219260
<div id=hdr>
220-
<filemod inst=2 component v2.0></filemod>
261+
<file-mod id=file2 component></file-mod>
221262
<div id=label>secondary</div>
222263
</div>
223-
<editor inst=2 component v2.0></editor>
264+
<web-editor id=editor2 component></web-editor>
224265
</div>
225266
</div>
226267

227-
<div id=output>
228-
<editor inst=output component v2.0></editor>
268+
<web-editor id=output component></web-editor>
269+
<!--
270+
<div id=output-hldr>
271+
<web-editor id=output component></web-editor>
229272
</div>
273+
-->
230274

231275

232-
<log component v2.0></log>
276+
<log-mod component></log-mod>
233277

234278

235279

@@ -257,7 +301,7 @@
257301

258302

259303
async function initdom(rootnode){
260-
console.log('initdom');
304+
debug('initdom');
261305
var root = rootnode;
262306

263307
keydown.initdom();
@@ -267,38 +311,59 @@
267311

268312
//mod.menu.main.initdom();
269313

270-
271-
$('[value=check]').onclick = btn.check;
314+
$('#output-hdr [type=checkbox]').onclick = btn['output-chk'];
315+
$('[value=check]').onclick = btn.check;
272316

273317

274318

275-
var view1 = $('#view1');
319+
var view1 = $('#view1');
276320
primary.filemod.initdom(view1);
277321
primary.editor.initdom(view1,{mode:'text'});
278322

279-
var view2 = $('#view2');
323+
var view2 = $('#view2');
280324
secondary.filemod.initdom(view2);
281325
secondary.editor.initdom(view2,{mode:'text'});
282326

283-
var node = $('#output');
327+
var node = $('#output');
284328
await output.initdom(node,{mode:'text'});
329+
330+
285331

286-
var style = document.createElement('style');
332+
var style = document.createElement('style');
287333
style.textContent = `
288334
.red
289335
{position:absolute;background:var(--red);z-index:20}
290336
.green
291337
{position:absolute;background:var(--green);z-index:20}
292338
`;
293339

294-
output.root.shadowRoot.append(style);
340+
output.shadowRoot.append(style);
341+
342+
343+
344+
345+
346+
295347

296348
}//initdom
297349

298350

299351
//:
300352

301353

354+
btn['output-chk'] = function(){
355+
356+
var output = $('#output');
357+
var chk = $('#output-hdr [type=checkbox]');
358+
if(chk.checked){
359+
output.style.display = '';
360+
}else{
361+
output.style.display = 'none';
362+
}
363+
364+
}//output-chk
365+
366+
302367
btn.check = function(){
303368

304369
check();

0 commit comments

Comments
 (0)