Skip to content

Commit 4d25eb5

Browse files
javascript-2020javascript-2020
committed
save file
1 parent 3c1a115 commit 4d25eb5

File tree

1 file changed

+53
-130
lines changed

1 file changed

+53
-130
lines changed

‎utils/editors/html-editor/html-editor.html‎

Lines changed: 53 additions & 130 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11

22

3+
<!-- headers
4+
cross-origin-isolate
5+
-->
6+
7+
38
<!DOCTYPE html>
49

510
<html lang=en>
@@ -98,6 +103,7 @@
98103
var hdr;
99104
var mainmenu;
100105
var filemod;
106+
var autosave;
101107
var publish;
102108
var editor;
103109
var output;
@@ -122,24 +128,29 @@
122128
hdr = mod['editors-hdr'];
123129
mainmenu = mod['main-menu'];
124130
filemod = mod['file-mod'];
131+
autosave = mod['auto-save'];
125132
publish = mod['publish-ui'];
126133
editor = mod['web-editor'];
127134
output = mod['output-html'];
128135
log = mod['log-mod'];
129136

137+
130138
menu.initmod({keydown});
131139
mainmenu.initmod({ext,$,menu,editor,filemod});
132140
hdr.initmod({ext,$,menu});
133141
filemod.initmod({ext,$,menumod,menu,complete,source,focus,log});
142+
autosave.initmod({$,menu,keydown,log,save:btn.save});
134143
publish.initmod({ext,$,menu,run,source,complete,log});
135144
editor.initmod({ext,$,menu,on,ace});
136145
output.initmod({ext,$});
137146
log.initmod({ext,$});
138147

148+
139149
await Promise.all([
140150
mainmenu.init(),
141151
hdr.init(),
142152
filemod.init(),
153+
autosave.init(),
143154
publish.init(),
144155
editor.init(),
145156
output.init(),
@@ -156,7 +167,10 @@
156167
icon.def = $('link[rel~=icon]').href;
157168

158169

159-
initdom(document.body);
170+
await initdom(document.body);
171+
172+
173+
publish.query();
160174

161175

162176

@@ -169,6 +183,8 @@
169183

170184
({ext} = await import('https://libs.ext-code.com/js/io/ext-loader/ext-loader.m.js'));
171185

186+
var lsmod;
187+
172188
var promise = ext.load.libs(
173189
'js/dom/$.js',
174190
'js/core/datatype.js',
@@ -177,7 +193,9 @@
177193
'js/debug/debug.js',
178194
'js/core/ls-mod/ls-mod.js',
179195
);
180-
[$,datatype,menumod,keydown,debug] = await promise;
196+
[$,datatype,menumod,keydown,debug,lsmod] = await promise;
197+
198+
ls = lsmod();
181199

182200
mod.stack.complete;
183201

@@ -205,12 +223,8 @@
205223
#save-root
206224
{margin-left:5px;display:flex}
207225

208-
#save-menu
209-
{position:absolute;left:0;top:30px}
210-
211-
212226
#run
213-
{color:blue;font-weight:bold}
227+
{color:blue;font-weight:bold;min-width:60px}
214228

215229
#prettier
216230
{padding:2px;
@@ -240,12 +254,14 @@
240254
{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}
241255

242256

257+
/*
243258
.menu input
244259
{font-size:16px;padding:5px 10px}
245260
246261
.menu [type=checkbox]
247262
{width:20px;height:20px;margin:0}
248-
263+
*/
264+
249265
.menu-item
250266
{gap:20px}
251267

@@ -264,7 +280,7 @@
264280
<editors-hdr component=grp>
265281
<img class=title src='images/html-editor.png' style='top:-5px;height:55px' alt='html editor'>
266282
<h1 slot=seo-hdr class=visually-hidden>html editor</h1>
267-
<time slot=date datetime=2025-12-31>31 Dec 2025</time>
283+
<time slot=date datetime=2026-01-01>01 Jan 2026</time>
268284
</editors-hdr>
269285

270286

@@ -276,28 +292,7 @@ <h1 slot=seo-hdr class=visually-hidden>html editor</h1>
276292

277293
<div id=save-root>
278294
<button id=save>save</button>
279-
<checkbox-one id=autosave></checkbox-one>
280-
<div id=save-menu-root class=menu-root>
281-
<img id=save-menu-icon class=menu-icon>
282-
<div id=save-menu class=menu style='display:none'>
283-
<div class=menu-title>
284-
save menu
285-
</div>
286-
<div class=menu-item>
287-
<div class=menu-label>
288-
autosave
289-
</div>
290-
<input type=checkbox checked>
291-
<input value=300 style='width:60px'>
292-
</div>
293-
<div id=trim class=menu-item>
294-
<div class=menu-label>
295-
trim on save
296-
</div>
297-
<input type=checkbox checked>
298-
</div>
299-
</div>
300-
</div>
295+
<auto-save v2.0 component=grp></auto-save>
301296
</div>
302297

303298
<publish-ui component></publish-ui>
@@ -314,18 +309,14 @@ <h1 slot=seo-hdr class=visually-hidden>html editor</h1>
314309

315310
<div id=view>
316311

317-
<web-editor v2.0 component></web-editor>
312+
<web-editor component></web-editor>
318313

319314
<div id=page-slider style='width:10px;cursor:ew-resize'></div>
320315

321-
<output-html component=page v2.0></output-html>
316+
<output-html component=page></output-html>
322317

323318
</div>
324319

325-
<checkbox-one-template>
326-
<script src='https://libs.ext-code.com/html/html-loader.js'></script>
327-
</checkbox-one-template>
328-
329320
<log-mod component></log-mod>
330321

331322
</body>
@@ -336,23 +327,12 @@ <h1 slot=seo-hdr class=visually-hidden>html editor</h1>
336327

337328
var root;
338329

339-
var autosave;
340-
341-
342330

343331

344332
var slider = {};
345333

346334
var ui = {};
347335
ui.mode = 'vert';
348-
ui.trim = null;
349-
350-
var savemenu;
351-
var savetimer = {};
352-
savetimer.timer = null;
353-
savetimer.chk = null;
354-
savetimer.time = null;
355-
savetimer.onclick = null;
356336

357337

358338
var btn = {};
@@ -368,32 +348,15 @@ <h1 slot=seo-hdr class=visually-hidden>html editor</h1>
368348
debug('initdom');
369349
root = rootnode;
370350

371-
keydown.initdom();
372351
menu.add.style();
373352

374353

375-
hdr.initdom(root);
376354

377355

378-
mainmenu.initdom(root);
379356

380-
filemod.initdom(root);
381-
382-
383-
autosave = $(root,'#autosave');
384357

385358
$(root,'#save').onclick = btn.save;
386359

387-
savemenu = $(root,'#save-root .menu');
388-
$(root,'.menu-icon').onclick = menu.click(savemenu,false,false,savemenu_callback);
389-
menu.input.norm(savemenu);
390-
391-
savetimer.chk = $(savemenu,':scope>div:nth-of-type(2) [type=checkbox]');
392-
savetimer.time = $(savemenu,':scope>div:nth-of-type(2) input:not([type])');
393-
savetimer.chk.onclick = savetimer.onclick;
394-
395-
ui.trim = $(savemenu,':scope>div:nth-of-type(3) [type=checkbox]');
396-
397360

398361
publish.initdom();
399362

@@ -407,24 +370,31 @@ <h1 slot=seo-hdr class=visually-hidden>html editor</h1>
407370
var view = $('#view');
408371
ui.root = view;
409372

410-
await editor.initdom(view,{mode:'html'});
411-
412373

413374
slider.node = $.slider.glass('web-editor','#page-slider','output-html',slider,ui,output);
414375

415-
output.initdom(root);
416376

417377

418-
log.initdom();
378+
//ui.setup(view);
379+
380+
381+
await Promise.all([
382+
keydown.initdom(),
383+
hdr.initdom(root),
384+
mainmenu.initdom(root),
385+
filemod.initdom(),
386+
autosave.initdom(),
387+
output.initdom(root),
388+
log.initdom(),
389+
editor.initdom(view,{mode:'html'}),
390+
]);
419391

420392

421-
//ui.setup(view);
422393

423394

424395
editor.focus();
425396

426397

427-
publish.query();
428398

429399

430400
}//initdom
@@ -437,61 +407,6 @@ <h1 slot=seo-hdr class=visually-hidden>html editor</h1>
437407
}//focus
438408

439409

440-
function savemenu_kd(e){
441-
console.log(e.target);
442-
if(e.target.nodeName=='INPUT'){
443-
return;
444-
}
445-
return false;
446-
447-
}//savemenu_kd
448-
449-
450-
function savemenu_callback(type){
451-
console.log('savemenu_callback',arguments);
452-
if(type=='show'){
453-
$(savemenu,':scope>div:nth-of-type(2) input:not([type])').focus();
454-
keydown.add(savemenu_kd);
455-
}
456-
if(type=='hide'){
457-
keydown.rem(savemenu_kd);
458-
}
459-
460-
}//savemenu_callback
461-
462-
463-
savetimer.onclick = function(){
464-
debug('savetimer.click');
465-
clearTimeout(savetimer.timer);
466-
467-
if(savetimer.chk.checked){
468-
var value = savetimer.time.value;
469-
value = Number(value);
470-
if(isNaN(value)){
471-
log.red('invalid autosave time, using 300s');
472-
value = 300;
473-
}
474-
fn();
475-
}
476-
477-
478-
function fn(){
479-
480-
if(!autosave.checked){
481-
return;
482-
}
483-
debug('savetimer',value);
484-
btn.save();
485-
if(savetimer.chk.checked){
486-
var ms = value*1000;
487-
setTimeout(fn,ms);
488-
}
489-
490-
}//fn
491-
492-
}//savetimer
493-
494-
495410
//:
496411

497412

@@ -595,6 +510,11 @@ <h1 slot=seo-hdr class=visually-hidden>html editor</h1>
595510

596511
var txt = editor.getValue();
597512

513+
if(autosave.trim.checked){
514+
txt = autosae.txt.trim(txt);
515+
}
516+
517+
/*
598518
if(ui.trim.checked){
599519
var indent = 0;
600520
var lines = txt.split('\n');
@@ -604,13 +524,15 @@ <h1 slot=seo-hdr class=visually-hidden>html editor</h1>
604524
if(line.length==0){
605525
line = line.padStart(indent,' ');
606526
}
607-
var match = line.match(/^\s*/);
527+
var match = line.match(/^\s* /);
608528
indent = match ? match[0].length : indent;
609529
return line;
610530
611531
});
612532
txt = lines.join('\n');
613533
}
534+
*/
535+
614536

615537
var blob = new Blob([txt]);
616538
return blob;
@@ -665,7 +587,7 @@ <h1 slot=seo-hdr class=visually-hidden>html editor</h1>
665587

666588
//:
667589

668-
590+
/*
669591
window.onmessage = function(e){
670592
671593
@@ -677,8 +599,9 @@ <h1 slot=seo-hdr class=visually-hidden>html editor</h1>
677599
}
678600
679601
}//onmessage
680-
681-
602+
*/
603+
604+
682605
//:
683606

684607

0 commit comments

Comments
 (0)