1+
2+
3+ < auto-save >
4+
5+ < template shadowrootmode =open >
6+
7+ < style >
8+
9+
10+ </ style >
11+
12+
13+ < checkbox-one id =autosave > </ checkbox-one >
14+
15+ < div id =save-menu-root class =menu-root >
16+ < img id =save-menu-icon class =menu-icon >
17+ < div id =save-menu class =menu style ='display:none '>
18+ < div class =menu-title >
19+ save menu
20+ </ div >
21+ < div class =menu-item >
22+ < div class =menu-label >
23+ autosave
24+ </ div >
25+ < input type =checkbox checked >
26+ < input value =300 style ='width:60px '>
27+ </ div >
28+ < div id =trim class =menu-item >
29+ < div class =menu-label >
30+ trim on save
31+ </ div >
32+ < input type =checkbox checked >
33+ </ div >
34+ </ div >
35+ </ div >
36+
37+ </ template >
38+
39+
40+ < script >
41+
42+ (function auto_save({mod,dom,host}){
43+
44+ var obj = {
45+ version : 'v1.0',
46+ };
47+
48+ var df=true,did='auto-save'
49+ ;
50+
51+
52+
53+ var $,menu,save,log,keydown
54+ ;
55+
56+ obj.initmod = function(params){
57+
58+ $ = mod.rd(params,'$',$);
59+ menu = mod.rd(params,'menu',menu);
60+ save = mod.rd(params,'save',save);
61+ log = mod.rd(params,'log',log);
62+ keydown = mod.rd(params,'keydown',keydown);
63+
64+ }//initmod
65+
66+
67+ //:
68+
69+
70+ var savemenu;
71+ var savetimer = {};
72+ savetimer.timer = null;
73+ savetimer.chk = null;
74+ savetimer.time = null;
75+ savetimer.onclick = null;
76+
77+
78+ //:
79+
80+
81+ obj.init = function(){
82+ }//init
83+
84+
85+ //:
86+
87+
88+ obj.initdom = function(){
89+
90+ var shadow = host.shadowRoot;
91+
92+ menu.add.style(shadow);
93+
94+
95+ savemenu = $(shadow,'.menu');
96+ $(root,'.menu-icon').onclick = menu.click(savemenu,false,false,savemenu_callback);
97+ menu.input.norm(savemenu);
98+
99+ savetimer.chk = $(savemenu,':scope>div:nth-of-type(2) [type=checkbox]');
100+ savetimer.time = $(savemenu,':scope>div:nth-of-type(2) input:not([type])');
101+ savetimer.chk.onclick = savetimer.onclick;
102+
103+
104+ }//initdom
105+
106+
107+ //:
108+
109+
110+
111+ function savemenu_kd(e){
112+ console.log(e.target);
113+ if(e.target.nodeName=='INPUT'){
114+ return;
115+ }
116+ return false;
117+
118+ }//savemenu_kd
119+
120+
121+ function savemenu_callback(type){
122+ console.log('savemenu_callback',arguments);
123+ if(type=='show'){
124+ $(savemenu,':scope>div:nth-of-type(2) input:not([type])').focus();
125+ keydown.add(savemenu_kd);
126+ }
127+ if(type=='hide'){
128+ keydown.rem(savemenu_kd);
129+ }
130+
131+ }//savemenu_callback
132+
133+
134+ savetimer.onclick = function(){
135+ debug('savetimer.click');
136+ clearTimeout(savetimer.timer);
137+
138+ if(savetimer.chk.checked){
139+ var value = savetimer.time.value;
140+ value = Number(value);
141+ if(isNaN(value)){
142+ log.red('invalid autosave time, using 300s');
143+ value = 300;
144+ }
145+ fn();
146+ }
147+
148+
149+ function fn(){
150+
151+ if(!autosave.checked){
152+ return;
153+ }
154+ debug('savetimer',value);
155+ save();
156+
157+ if(savetimer.chk.checked){
158+ var ms = value*1000;
159+ setTimeout(fn,ms);
160+ }
161+
162+ }//fn
163+
164+ }//savetimer
165+
166+
167+ //:
168+
169+
170+ function debug(...args){
171+
172+ if(!df && !obj.df)return;
173+ args.unshift(`[ ${did} ]`);
174+ var fmt = Array.from({length:args.length}).fill('%O').join(' ');
175+ var args2 = [fmt].concat(args);
176+ console.groupCollapsed.apply(console,args2);
177+ console.trace();
178+ console.groupEnd();
179+
180+ }//debug
181+
182+
183+
184+ return obj;
185+
186+ //auto_save
187+ }
0 commit comments