Skip to content

Commit 2be9334

Browse files
author
legionfu
committed
修复部分插件tab面板以外的参数保存问题
1 parent b83fa74 commit 2be9334

File tree

1 file changed

+210
-75
lines changed

1 file changed

+210
-75
lines changed

‎javascript/state.ext.general.js‎

Lines changed: 210 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ function general_ext(tab_name, extension_name, root_container) {
77
let container = root_container;
88
let store = null;
99
let cnTabs = [];
10+
let root_not_tabs = null;
1011
let cur_tab_name = tab_name;
1112
let ext_name = extension_name
1213
let LS_PREFIX = 'ext-'+ ext_name.replace(" ","-").toLowerCase() + "-"
@@ -59,115 +60,248 @@ function general_ext(tab_name, extension_name, root_container) {
5960
bindTabEvents();
6061
}
6162

63+
function handleCheckbox(checkbox, store) {
64+
let label = checkbox.nextElementSibling;
65+
let translations = state.utils.reverseTranslation(label.textContent)
66+
for (var text of translations){
67+
var id = state.utils.txtToId(text);
68+
var value = store.get(id);
69+
if (value) {break}
70+
}
71+
if (value) {
72+
state.utils.setValue(checkbox, value, 'change');
73+
}
74+
checkbox.addEventListener('change', function () {
75+
let label = checkbox.nextElementSibling;
76+
let translations = state.utils.reverseTranslation(label.textContent)
77+
for (var text of translations){
78+
var id = state.utils.txtToId(text);
79+
store.set(id, this.checked);
80+
}
81+
});
82+
}
6283
function handleCheckboxes() {
84+
let root_checkboxes = root_not_tabs.container.querySelectorAll('input[type="checkbox"]');
85+
root_checkboxes.forEach(function (root_checkbox) {
86+
if(cnTabs.length == 0){
87+
handleCheckbox(root_checkbox, root_not_tabs.store)
88+
}
89+
else{
90+
let needsHandle = true
91+
for(let tab of cnTabs){
92+
if(tab.container.contains(root_checkbox)){
93+
needsHandle = false
94+
break
95+
}
96+
}
97+
if(needsHandle){handleCheckbox(root_checkbox, root_not_tabs.store)}
98+
} // else
99+
});
100+
63101
cnTabs.forEach(({ container, store }) => {
64102
let checkboxes = container.querySelectorAll('input[type="checkbox"]');
65103
checkboxes.forEach(function (checkbox) {
66-
let label = checkbox.nextElementSibling;
67-
let translations = state.utils.reverseTranslation(label.textContent)
68-
for (var text of translations){
69-
var id = state.utils.txtToId(text);
70-
var value = store.get(id);
71-
if (value) {break}
104+
handleCheckbox(checkbox, store)
105+
});
106+
});
107+
108+
}
109+
110+
function handleTextArea(textarea, index, store) {
111+
var id = state.utils.txtToId(`textarea_${index}`);
112+
var value = store.get(id);
113+
if (value) {
114+
state.utils.setValue(textarea, value, 'change');
115+
}
116+
textarea.addEventListener('change', function () {
117+
let text = this.value;
118+
store.set(id, text);
119+
console.log(`id = ${id} value = ${text}`)
120+
});
121+
}
122+
function handleTextAreas() {
123+
let textArea_index = 0; // 因为文本框的顺序不会变，所以命名直接使用序号区分 "textarea_0"
124+
125+
let root_textareas = root_not_tabs.container.querySelectorAll('textarea');
126+
root_textareas.forEach(function (root_textarea) {
127+
128+
if(cnTabs.length == 0){
129+
handleTextArea(root_textarea, textArea_index, root_not_tabs.store)
130+
textArea_index += 1
131+
}
132+
else{
133+
let needsHandle = true
134+
for(let tab of cnTabs){
135+
if(tab.container.contains(root_textarea)){
136+
needsHandle = false
137+
break
138+
}
72139
}
73-
if (value) {
74-
state.utils.setValue(checkbox, value, 'change');
140+
if(needsHandle){
141+
handleTextArea(root_textarea, textArea_index, root_not_tabs.store)
142+
textArea_index += 1
75143
}
76-
checkbox.addEventListener('change', function () {
77-
let label = checkbox.nextElementSibling;
78-
let translations = state.utils.reverseTranslation(label.textContent)
79-
for (var text of translations){
80-
var id = state.utils.txtToId(text);
81-
store.set(id, this.checked);
82-
}
83-
});
144+
} // else
145+
146+
});
147+
148+
cnTabs.forEach(({ container, store }) => {
149+
container.querySelectorAll('textarea').forEach(textarea => {
150+
handleTextArea(textarea, textArea_index, store)
151+
textArea_index += 1
84152
});
85153
});
154+
86155
}
87156

157+
function handleSelect(select, store) {
158+
let translations = state.utils.reverseTranslation(select.querySelector('label').firstChild.textContent)
159+
for (var text of translations){
160+
var id = state.utils.txtToId(text);
161+
var value = store.get(id);
162+
if (value) {break}
163+
}
164+
//id = state.utils.txtToId(translations[0]);
165+
//if (value) { //前面不需要判断是否有值，因为需要执行handleSelect绑定onchange事件
166+
state.utils.handleSelect(select, id, store, force=true);
167+
//}
168+
if (id === 'preprocessor' && value && value.toLowerCase() !== 'none') {
169+
state.utils.onNextUiUpdates(handleSliders); // update new sliders if needed
170+
}
171+
}
88172
function handleSelects() {
89-
173+
174+
let root_selects = root_not_tabs.container.querySelectorAll('.gradio-dropdown');
175+
root_selects.forEach(function (root_select) {
176+
if(cnTabs.length == 0){
177+
handleSelect(root_select, root_not_tabs.store)
178+
}
179+
else{
180+
let needsHandle = true
181+
for(let tab of cnTabs){
182+
if(tab.container.contains(root_select)){
183+
needsHandle = false
184+
break
185+
}
186+
}
187+
if(needsHandle){handleCheckbox(root_select, root_not_tabs.store)}
188+
} // else
189+
});
190+
90191
cnTabs.forEach(({ container, store }) => {
91192
container.querySelectorAll('.gradio-dropdown').forEach(select => {
92-
let translations = state.utils.reverseTranslation(select.querySelector('label').firstChild.textContent)
93-
for (var text of translations){
94-
var id = state.utils.txtToId(text);
95-
var value = store.get(id);
96-
if (value) {break}
97-
}
98-
//id = state.utils.txtToId(translations[0]);
99-
//if (value) { //前面不需要判断是否有值，因为需要执行handleSelect绑定onchange事件
100-
state.utils.handleSelect(select, id, store, force=true);
101-
//}
102-
if (id === 'preprocessor' && value && value.toLowerCase() !== 'none') {
103-
state.utils.onNextUiUpdates(handleSliders); // update new sliders if needed
104-
}
193+
handleSelect(select, store)
105194
});
106195
});
196+
107197
}
108198

199+
function handleSlider(slider, store) {
200+
let label = slider.previousElementSibling.querySelector('label span');
201+
let translations = state.utils.reverseTranslation(label.textContent)
202+
for (var text of translations){
203+
var id = state.utils.txtToId(text);
204+
var value = store.get(id);
205+
if (value) {break}
206+
}
207+
if (value) {
208+
state.utils.setValue(slider, value, 'change');
209+
}
210+
slider.addEventListener('change', function () {
211+
//store.set(id, state.utils.reverseTranslation(this.value)[0]);
212+
let label = slider.previousElementSibling.querySelector('label span');
213+
let translations = state.utils.reverseTranslation(label.textContent)
214+
for (var text of translations){
215+
var id = state.utils.txtToId(text);
216+
store.set(id, state.utils.reverseTranslation(this.value)[0]);
217+
}
218+
});
219+
}
109220
function handleSliders() {
221+
222+
let root_sliders = root_not_tabs.container.querySelectorAll('input[type="range"]');
223+
root_sliders.forEach(function (root_slider) {
224+
if(cnTabs.length == 0){
225+
handleSlider(root_slider, root_not_tabs.store)
226+
}
227+
else{
228+
let needsHandle = true
229+
for(let tab of cnTabs){
230+
if(tab.container.contains(root_slider)){
231+
needsHandle = false
232+
break
233+
}
234+
}
235+
if(needsHandle){handleSlider(root_slider, root_not_tabs.store)}
236+
} // else
237+
});
238+
110239
cnTabs.forEach(({ container, store }) => {
111240
let sliders = container.querySelectorAll('input[type="range"]');
112241
sliders.forEach(function (slider) {
113-
let label = slider.previousElementSibling.querySelector('label span');
242+
handleSlider(slider, store)
243+
});
244+
});
245+
}
246+
247+
function handleRadioButton(fieldset, store) {
248+
let label = fieldset.firstChild.nextElementSibling;
249+
let radios = fieldset.querySelectorAll('input[type="radio"]');
250+
let translations = state.utils.reverseTranslation(label.textContent)
251+
for (var text of translations){
252+
var id = state.utils.txtToId(text);
253+
var value = store.get(id);
254+
if (value) {break}
255+
}
256+
if (value) {
257+
radios.forEach(function (radio) {
258+
state.utils.setValue(radio, value, 'change');
259+
});
260+
}
261+
radios.forEach(function (radio) {
262+
radio.addEventListener('change', function () {
263+
let label = fieldset.firstChild.nextElementSibling;
114264
let translations = state.utils.reverseTranslation(label.textContent)
115265
for (var text of translations){
116266
var id = state.utils.txtToId(text);
117-
var value = store.get(id);
118-
if (value) {break}
119-
}
120-
if (value) {
121-
state.utils.setValue(slider, value, 'change');
267+
store.set(id, state.utils.reverseTranslation(this.value)[0]);
122268
}
123-
slider.addEventListener('change', function () {
124-
//store.set(id, state.utils.reverseTranslation(this.value)[0]);
125-
let label = slider.previousElementSibling.querySelector('label span');
126-
let translations = state.utils.reverseTranslation(label.textContent)
127-
for (var text of translations){
128-
var id = state.utils.txtToId(text);
129-
store.set(id, state.utils.reverseTranslation(this.value)[0]);
130-
}
131-
});
132269
});
133270
});
134271
}
135-
136272
function handleRadioButtons() {
273+
274+
let root_fieldsets = root_not_tabs.container.querySelectorAll('fieldset');
275+
root_fieldsets.forEach(function (root_fieldset) {
276+
if(cnTabs.length == 0){
277+
handleRadioButton(root_fieldset, root_not_tabs.store)
278+
}
279+
else{
280+
let needsHandle = true
281+
for(let tab of cnTabs){
282+
if(tab.container.contains(root_fieldset)){
283+
needsHandle = false
284+
break
285+
}
286+
}
287+
if(needsHandle){handleRadioButton(root_fieldset, root_not_tabs.store)}
288+
} // else
289+
});
290+
137291
cnTabs.forEach(({ container, store }) => {
138292
let fieldsets = container.querySelectorAll('fieldset');
139293
fieldsets.forEach(function (fieldset) {
140-
let label = fieldset.firstChild.nextElementSibling;
141-
let radios = fieldset.querySelectorAll('input[type="radio"]');
142-
let translations = state.utils.reverseTranslation(label.textContent)
143-
for (var text of translations){
144-
var id = state.utils.txtToId(text);
145-
var value = store.get(id);
146-
if (value) {break}
147-
}
148-
if (value) {
149-
radios.forEach(function (radio) {
150-
state.utils.setValue(radio, value, 'change');
151-
});
152-
}
153-
radios.forEach(function (radio) {
154-
radio.addEventListener('change', function () {
155-
let label = fieldset.firstChild.nextElementSibling;
156-
let translations = state.utils.reverseTranslation(label.textContent)
157-
for (var text of translations){
158-
var id = state.utils.txtToId(text);
159-
store.set(id, state.utils.reverseTranslation(this.value)[0]);
160-
}
161-
});
162-
});
294+
handleRadioButton(fieldset, store)
163295
});
164296
});
165297
}
166298

299+
167300
function load() {
168301
setTimeout(function () {
169302
handleTabs();
170303
handleCheckboxes();
304+
handleTextAreas();
171305
handleSelects();
172306
handleSliders();
173307
handleRadioButtons();
@@ -185,20 +319,21 @@ function general_ext(tab_name, extension_name, root_container) {
185319
let tabs = container.querySelectorAll('.tabitem');
186320
//console.log(tabs)
187321

322+
cnTabs = [];
188323
if (tabs.length) {
189-
cnTabs = [];
190324
tabs.forEach((tabContainer, i) => {
191325
cnTabs.push({
192326
container: tabContainer,
193327
store: new state.Store(LS_PREFIX + cur_tab_name + "_" + i)
194328
});
195329
});
196-
} else {
197-
cnTabs = [{
198-
container: container,
199-
store: new state.Store(LS_PREFIX + cur_tab_name + "_0")
200-
}];
201330
}
331+
//else {
332+
root_not_tabs = {
333+
container: container,
334+
store: new state.Store(LS_PREFIX + cur_tab_name)
335+
}
336+
//}
202337

203338
handleToggle();
204339
load();

0 commit comments

Comments
 (0)