Skip to content

Commit a150940

Browse files
theboxertheboxer
committed
feat: refactor multiple cache handlers to a single history handler
1 parent 38ef3b3 commit a150940

File tree

5 files changed

+215
-153
lines changed

5 files changed

+215
-153
lines changed

‎assets/components/modai/js/mgr/autosummary.js

Lines changed: 59 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -1,90 +1,29 @@
11
Ext.onReady(function() {
22

3-
const cache = {
4-
_cache: {},
5-
_setFieldValue (key, value) {
6-
const cachedItem = this._cache[key];
7-
8-
cachedItem.els.forEach(({wrapper, field}) => {
9-
const prevValue = field.getValue();
10-
field.setValue(value);
11-
field.fireEvent('change', field, value, prevValue);
12-
13-
wrapper.historyNav.info.update(cachedItem.visible + 1, cachedItem.values.length);
14-
15-
if (cachedItem.visible <= 0) {
16-
wrapper.historyNav.prevButton.disable();
17-
} else {
18-
wrapper.historyNav.prevButton.enable();
19-
}
20-
21-
if (cachedItem.visible === cachedItem.values.length - 1) {
22-
wrapper.historyNav.nextButton.disable();
23-
} else {
24-
wrapper.historyNav.nextButton.enable();
25-
}
26-
});
27-
},
28-
init (key, field, wrapper) {
29-
if (!this._cache[key]) {
30-
this._cache[key] = {
31-
els: [{ field, wrapper }],
32-
visible: -1,
33-
values: []
34-
};
35-
}
36-
37-
this._cache[key].els.push({ field, wrapper });
38-
const currentValue = field.getValue();
39-
if (currentValue) {
40-
this._cache[key].values = [currentValue];
41-
this._cache[key].visible = 0;
3+
const historyNavSync = (data) => {
4+
data.context.els.forEach(({wrapper, field}) => {
5+
const prevValue = field.getValue();
6+
field.setValue(data.value);
7+
field.fireEvent('change', field, data.value, prevValue);
8+
9+
if (data.total > 0) {
10+
wrapper.historyNav.show();
4211
}
43-
},
44-
store (key, value) {
45-
const cachedItem = this._cache[key];
4612

47-
cachedItem.visible = cachedItem.values.push(value) - 1;
13+
wrapper.historyNav.info.update(data.current, data.total);
4814

49-
if (cachedItem.values.length > 1) {
50-
cachedItem.els.forEach(({wrapper}) => {
51-
wrapper.historyNav.show();
52-
});
15+
if (data.prevStatus) {
16+
wrapper.historyNav.prevButton.enable();
17+
} else {
18+
wrapper.historyNav.prevButton.disable();
5319
}
5420

55-
this._setFieldValue(key, cachedItem.values[cachedItem.visible]);
56-
},
57-
next (key) {
58-
const cachedItem = this._cache[key];
59-
60-
if (cachedItem.visible === cachedItem.values.length - 1) {
61-
return;
62-
}
63-
64-
this._setFieldValue(key, cachedItem.values[++cachedItem.visible]);
65-
},
66-
prev (key) {
67-
const cachedItem = this._cache[key];
68-
69-
if (cachedItem.visible <= 0) {
70-
return;
21+
if (data.nextStatus) {
22+
wrapper.historyNav.nextButton.enable();
23+
} else {
24+
wrapper.historyNav.nextButton.disable();
7125
}
72-
73-
this._setFieldValue(key, cachedItem.values[--cachedItem.visible]);
74-
}
75-
};
76-
const freePromptCache = {
77-
_cache: {},
78-
get(key) {
79-
if (!this._cache[key]) {
80-
this._cache[key] = {
81-
visible: -1,
82-
history: []
83-
}
84-
}
85-
86-
return this._cache[key];
87-
}
26+
});
8827
};
8928

9029
const createWandEl = () => {
@@ -97,7 +36,7 @@ Ext.onReady(function() {
9736
return wandEl;
9837
}
9938

100-
const createHistoryNav = (field, fieldName) => {
39+
const createHistoryNav = (cache) => {
10140
const prevButton = document.createElement('button');
10241
prevButton.type = 'button';
10342
prevButton.title = 'Previous Version';
@@ -110,7 +49,7 @@ Ext.onReady(function() {
11049
}
11150
prevButton.innerHTML = 'prev';
11251
prevButton.addEventListener('click', () => {
113-
cache.prev(fieldName);
52+
cache.prev();
11453
});
11554

11655
const nextButton = document.createElement('button');
@@ -125,7 +64,7 @@ Ext.onReady(function() {
12564
}
12665
nextButton.innerHTML = 'next';
12766
nextButton.addEventListener('click', () => {
128-
cache.next(fieldName);
67+
cache.next();
12968
});
13069

13170
const info = document.createElement('span');
@@ -158,14 +97,14 @@ Ext.onReady(function() {
15897
return wrapper;
15998
}
16099

161-
const createFreeTextPrompt = (cacheKey, fieldName) => {
100+
const createFreeTextPrompt = (fieldName) => {
162101
const wandEl = createWandEl();
163102
wandEl.addEventListener('click', () => {
164103
const win = MODx.load({
165104
xtype: 'modai-window-text_prompt',
166105
title: 'Text',
167106
field: fieldName,
168-
cache: freePromptCache.get(cacheKey)
107+
cacheKey: fieldName
169108
});
170109

171110
win.show();
@@ -176,9 +115,6 @@ Ext.onReady(function() {
176115

177116
const createForcedTextPrompt = (field, fieldName) => {
178117
const aiWrapper = document.createElement('span');
179-
const historyNav = createHistoryNav(field, fieldName);
180-
181-
aiWrapper.historyNav = historyNav;
182118

183119
const wandEl = createWandEl();
184120
wandEl.addEventListener('click', () => {
@@ -196,7 +132,8 @@ Ext.onReady(function() {
196132
success: {
197133
fn: (r) => {
198134
modAI.serviceExecutor(r.object).then((result) => {
199-
cache.store(fieldName, result.content);
135+
// cache.store(fieldName, result.content);
136+
cache.insert(result.content);
200137
Ext.Msg.hide();
201138
}).catch((err) => {
202139
Ext.Msg.hide();
@@ -216,9 +153,22 @@ Ext.onReady(function() {
216153
});
217154

218155
aiWrapper.appendChild(wandEl);
219-
aiWrapper.appendChild(historyNav);
220156

221-
cache.init(fieldName, field, aiWrapper);
157+
const cache = modAI.history.init(
158+
fieldName,
159+
historyNavSync,
160+
field.getValue()
161+
);
162+
163+
if (!cache.cachedItem.context.els) {
164+
cache.cachedItem.context.els = [];
165+
}
166+
cache.cachedItem.context.els.push({field, wrapper: aiWrapper});
167+
168+
const historyNav = createHistoryNav(cache);
169+
170+
aiWrapper.appendChild(historyNav);
171+
aiWrapper.historyNav = historyNav;
222172

223173
return aiWrapper;
224174
}
@@ -229,6 +179,7 @@ Ext.onReady(function() {
229179
const createColumn = MODx.load({
230180
xtype: 'modai-window-image_prompt',
231181
title: 'Image',
182+
cacheKey: fieldName,
232183
record: {
233184
resource: MODx.request.id,
234185
prompt: defaultPrompt,
@@ -254,9 +205,7 @@ Ext.onReady(function() {
254205
if (!field) return;
255206

256207
const wrapper = document.createElement('span');
257-
const historyNav = createHistoryNav(field, fieldName);
258208

259-
wrapper.historyNav = historyNav;
260209

261210
const wandEl = createWandEl();
262211
wandEl.addEventListener('click', () => {
@@ -274,7 +223,7 @@ Ext.onReady(function() {
274223
success: {
275224
fn: (r) => {
276225
modAI.serviceExecutor(r.object).then((result) => {
277-
cache.store(fieldName, result.content);
226+
cache.insert(result.content);
278227
Ext.Msg.hide();
279228
}).catch((err) => {
280229
Ext.Msg.hide();
@@ -294,9 +243,22 @@ Ext.onReady(function() {
294243
});
295244

296245
wrapper.appendChild(wandEl);
297-
wrapper.appendChild(historyNav);
298246

299-
cache.init(fieldName, field, wrapper);
247+
const cache = modAI.history.init(
248+
fieldName,
249+
historyNavSync,
250+
field.getValue()
251+
);
252+
253+
if (!cache.cachedItem.context.els) {
254+
cache.cachedItem.context.els = [];
255+
}
256+
cache.cachedItem.context.els.push({field, wrapper});
257+
258+
const historyNav = createHistoryNav(cache);
259+
260+
wrapper.appendChild(historyNav);
261+
wrapper.historyNav = historyNav;
300262

301263
field.label.appendChild(wrapper);
302264
}
@@ -375,7 +337,7 @@ Ext.onReady(function() {
375337
const attachContent = () => {
376338
const cmp = Ext.getCmp('modx-resource-content');
377339
const label = cmp.el.dom.querySelector('label');
378-
label.appendChild(createFreeTextPrompt('modx-resource-content', 'res.content'));
340+
label.appendChild(createFreeTextPrompt('res.content'));
379341
};
380342

381343
const attachTVs = () => {
@@ -405,7 +367,7 @@ Ext.onReady(function() {
405367
if (prompt) {
406368
label.appendChild(createForcedTextPrompt(field, fieldName));
407369
} else {
408-
label.appendChild(createFreeTextPrompt(`tv${tvId}`, fieldName));
370+
label.appendChild(createFreeTextPrompt(fieldName));
409371
}
410372
}
411373

‎assets/components/modai/js/mgr/history.js

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
modAI.history = {
2+
_cache: {},
3+
_formatOutput(key) {
4+
const cachedItem = this._cache[key];
5+
6+
const prevStatus = (cachedItem.visible > 0);
7+
const nextStatus = (cachedItem.visible !== cachedItem.values.length - 1);
8+
9+
return {
10+
value: cachedItem.values[cachedItem.visible],
11+
nextStatus,
12+
prevStatus,
13+
current: cachedItem.visible + 1,
14+
total: cachedItem.values.length,
15+
context: cachedItem.context,
16+
}
17+
},
18+
insert(key, value) {
19+
const cachedItem = this._cache[key];
20+
cachedItem.visible = cachedItem.values.push(value) - 1;
21+
22+
const output = this._formatOutput(key);
23+
if (typeof cachedItem.syncUI === 'function') {
24+
cachedItem.syncUI(output);
25+
}
26+
27+
return output;
28+
},
29+
next(key) {
30+
const cachedItem = this._cache[key];
31+
32+
if (cachedItem.visible === cachedItem.values.length - 1) {
33+
return this._formatOutput(key);
34+
}
35+
36+
cachedItem.visible++;
37+
38+
const output = this._formatOutput(key);
39+
40+
if (typeof cachedItem.syncUI === 'function') {
41+
cachedItem.syncUI(output);
42+
}
43+
44+
return output;
45+
},
46+
prev(key) {
47+
const cachedItem = this._cache[key];
48+
49+
if (cachedItem.visible <= 0) {
50+
return this._formatOutput(key);
51+
}
52+
53+
cachedItem.visible--;
54+
55+
const output = this._formatOutput(key);
56+
57+
if (typeof cachedItem.syncUI === 'function') {
58+
cachedItem.syncUI(output);
59+
}
60+
61+
return output;
62+
},
63+
init(key, syncUI = undefined, initValue = undefined, context = {}) {
64+
if (!this._cache[key]) {
65+
this._cache[key] = {
66+
visible: -1,
67+
values: [],
68+
context,
69+
}
70+
}
71+
72+
this._cache[key].syncUI = syncUI;
73+
74+
if (initValue) {
75+
this._cache[key].values = [initValue];
76+
this._cache[key].visible = 0;
77+
}
78+
79+
return {
80+
cachedItem: this._cache[key],
81+
getData: () => {
82+
return this._formatOutput(key);
83+
},
84+
syncUI: () => {
85+
if (typeof syncUI === 'function') {
86+
this._cache[key].syncUI(this._formatOutput(key));
87+
}
88+
},
89+
insert: (value) => {
90+
return this.insert(key, value);
91+
},
92+
next: () => {
93+
return this.next(key);
94+
},
95+
prev: () => {
96+
return this.prev(key);
97+
}
98+
};
99+
}
100+
};

0 commit comments

Comments
 (0)