Skip to content

Commit f3ea184

Browse files
frankpaganfrankpagan
committed
feat: Code changes for rendering and updating elements
- Added parameters for "update" and "remove" in the setValue function to determine if the data is from crud. - Updated the render function to always clone the template and render values, regardless of whether the template key exists or not. - Removed the check for key existence in the render function. - Updated the cloneTemplate function to set the renderedNodes map with the template element and corresponding template information. - Updated the renderValues function to handle data rendering and attribute rendering separately. - Updated the renderValues function to render text content based on placeholder and rendered value comparisons. - Updated the renderValues function to render child nodes and recursively call renderValues on them. - Updated the getRenderValue function to handle nested templates and their corresponding data. - Removed unnecessary comments and console.log statements.
1 parent 93c1d3d commit f3ea184

File tree

1 file changed

+76
-113
lines changed

1 file changed

+76
-113
lines changed

‎src/index.js‎

Lines changed: 76 additions & 113 deletions
Original file line numberDiff line numberDiff line change
@@ -24,10 +24,14 @@ function init(element) {
2424
sources.set(element[i], { element: element[i], selector })
2525
element[i].setValue = (data) => {
2626
// TODO: something to dertimine if its from crud. crudTpye, action??
27-
let index
28-
if (data.filter && data.filter.index)
27+
let index, update, remove
28+
if (data.filter && data.filter.index) {
2929
index = data.filter.index
30-
render({ source: element[i], data, index })
30+
update = data.filter.update
31+
remove = data.filter.remove
32+
}
33+
34+
render({ source: element[i], data, index, update, remove })
3135
}
3236
element[i].getValue = () => sources.get(element[i]).data
3337
}
@@ -94,13 +98,13 @@ function renderTemplate(template, data, key, index, dotNotation) {
9498

9599
let Data = { [renderKey]: { key: keys[i], value, type } }
96100

97-
if (!template.keys.has(Data[renderKey].key)) {
98-
template.keys.set(Data[renderKey].key, Data)
99-
let clone = cloneTemplate(template);
100-
clone.setAttribute('renderedKey', Data[renderKey].key)
101-
renderValues(clone, Data, keys[i], renderKey);
102-
insertElement(template, clone, index);
103-
}
101+
// if (!template.keys.has(Data[renderKey].key)) {
102+
// template.keys.set(Data[renderKey].key, Data)
103+
let clone = cloneTemplate(template);
104+
clone.setAttribute('renderedKey', Data[renderKey].key)
105+
renderValues(clone, Data, keys[i], renderKey);
106+
insertElement(template, clone, index);
107+
// }
104108

105109
}
106110
} else {
@@ -120,16 +124,15 @@ function renderTemplate(template, data, key, index, dotNotation) {
120124
renderData = [renderData]
121125

122126
renderData.forEach((item) => {
123-
if (!template.keys.has(item)) {
124-
template.keys.set(item, '')
125-
126-
let clone = cloneTemplate(template);
127-
let object = { [renderKey]: item }
128-
if (renderKey.includes('.'))
129-
object = dotNotationToObject(object);
130-
renderValues(clone, object, key, renderKey);
131-
insertElement(template, clone, index);
132-
}
127+
// if (!template.keys.has(item)) {
128+
// template.keys.set(item, '')
129+
let clone = cloneTemplate(template);
130+
let object = { [renderKey]: item }
131+
if (renderKey.includes('.'))
132+
object = dotNotationToObject(object);
133+
renderValues(clone, object, key, renderKey);
134+
insertElement(template, clone, index);
135+
// }
133136
});
134137
}
135138
}
@@ -164,7 +167,7 @@ function cloneTemplate(template) {
164167
container.remove()
165168
}
166169

167-
renderedNodes.set(clone, { template })
170+
renderedNodes.set(clone, { template, element: clone })
168171
return clone;
169172
}
170173

@@ -194,13 +197,8 @@ function insertElement(template, element, index) {
194197

195198
function renderValues(node, data, key, renderKey) {
196199
if (!data) return;
197-
let isRenderKey
198-
// if (data.renderKey)
199-
// isRenderKey = true
200200

201-
let updateData, renderedValue, placeholder;
202201
let renderedNode = renderedNodes.get(node)
203-
204202
if (!renderedNode)
205203
renderedNode = { key, renderKey }
206204

@@ -222,6 +220,13 @@ function renderValues(node, data, key, renderKey) {
222220
renderedNode.template.renderKeys.set(renderKey, key)
223221
renderedNode.dotNotation = key
224222

223+
// if (key == 'status')
224+
// console.log('status')
225+
// if (key == 'document.created.on')
226+
// console.log('document.created.on')
227+
// if (key == 'document.created.by')
228+
// console.log('document.created.by')
229+
225230
if (key.includes('.')) {
226231
let keys = key.split('.')
227232
for (i = 0; i < keys.length; i++) {
@@ -234,58 +239,44 @@ function renderValues(node, data, key, renderKey) {
234239
eid = data[renderKey][eid]
235240
if (eid) {
236241
let oldEid = renderedNode.eid
237-
if (oldEid !== eid) {
238-
renderedNode.template.clones.delete(oldEid)
242+
let temp = renderedNode.template
243+
if (!temp) {
244+
console.log('temp could not be found')
245+
} else if (!temp.clones) {
246+
if (temp.template)
247+
temp = temp.template
248+
else
249+
console.log(temp)
250+
251+
if (oldEid && oldEid !== eid)
252+
temp.clones.delete(oldEid)
253+
254+
temp.clones.set(eid, node)
239255
}
240256

241257
renderedNode.eid = eid
242-
renderedNode.template.clones.set(eid, node)
243258

244259
node.setAttribute('eid', eid)
245-
break
260+
break;
246261
}
247262
}
248263
}
249264

250-
if (placeholder && !isRenderKey) {
251-
if (key && Array.isArray(data[key]))
252-
updateData = data[key][0]
253-
else if (data[key])
254-
updateData = data[key]
255-
256-
if (renderKey) {
257-
if (updateData)
258-
updateData = { [renderKey]: updateData }
259-
else
260-
updateData = { [renderKey]: data }
261-
}
262-
263-
let textContent = placeholder
264-
let text = renderValue(node, updateData, textContent, renderKey, renderedNode);
265-
if (text && text != renderedValue)
266-
node.innerHTML = placeholder
267-
}
268-
269265
Array.from(node.attributes).forEach(attr => {
270266
let name = attr.name;
271267
let value = attr.value;
272268

273269
let renderedAttribute = renderedNodes.get(attr)
274270
if (!renderedAttribute) {
275271
renderedAttribute = { placeholder: { name, value }, key, renderKey }
276-
name = renderValue(attr, data, name, renderKey, renderedAttribute);
277-
value = renderValue(attr, data, value, renderKey, renderedAttribute);
278-
} else if (!isRenderKey && renderedAttribute.placeholder) {
279-
let temp = renderedAttribute.placeholder
280-
if (updateData) {
281-
name = renderValue(attr, updateData, temp.name, renderKey, renderedAttribute);
282-
value = renderValue(attr, updateData, temp.value, renderKey, renderedAttribute);
283-
}
284-
} else {
285-
name = renderValue(attr, data, name, renderKey, renderedAttribute);
286-
value = renderValue(attr, data, value, renderKey, renderedAttribute);
287272
}
288273

274+
let namePlaceholder = renderedAttribute.placeholder.name || name;
275+
let valuePlaceholder = renderedAttribute.placeholder.value || value;
276+
277+
name = renderValue(attr, data, namePlaceholder, renderKey, renderedAttribute);
278+
value = renderValue(attr, data, valuePlaceholder, renderKey, renderedAttribute);
279+
289280
if (name === undefined && name === null) {
290281
renderedNodes.delete(attr)
291282
node.removeAttribute(attr.name);
@@ -316,34 +307,21 @@ function renderValues(node, data, key, renderKey) {
316307
renderTemplate(node, data);
317308
} else if (node.childNodes.length > 0) {
318309
Array.from(node.childNodes).forEach(childNode => {
319-
renderValues(childNode, updateData || data, key, renderKey);
310+
renderValues(childNode, data, key, renderKey);
320311
});
321312
}
322313

323314
} else if (node.nodeType == 3) {
324315
let valueType = node.parentElement.getAttribute('value-type')
325316

326317
let textContent, text;
327-
if (placeholder && !isRenderKey) {
328-
let updateData = data;
329-
textContent = placeholder
330-
if (key && Array.isArray(data[key]))
331-
updateData = data[key][0]
332-
else
333-
updateData = data[key]
334-
if (renderKey)
335-
updateData = { [renderKey]: updateData }
336-
text = renderValue(node, updateData, textContent, renderKey, renderedNode);
337-
}
338318

339-
if (!placeholder && !text) {
340-
textContent = node.textContent;
341-
renderedNode.placeholder = textContent
342-
text = renderValue(node, data, textContent, renderKey, renderedNode);
343-
}
319+
textContent = renderedNode.placeholder || node.textContent;
320+
renderedNode.placeholder = textContent
321+
text = renderValue(node, data, textContent, renderKey, renderedNode);
344322

345323
if (text || text == "") {
346-
if (text != renderedValue) {
324+
if (text != renderedNode.text) {
347325
renderedNode.text = text
348326

349327
if (valueType == 'text' || valueType == 'string') {
@@ -357,13 +335,13 @@ function renderValues(node, data, key, renderKey) {
357335
if (!renderedParent) {
358336
renderedParent = { placeholder: textContent, key, renderKey }
359337
}
360-
renderedParent.renderedValue = text
338+
renderedParent.text = text
361339
node.replaceWith(...newNode.childNodes)
362340
}
363341

364342
if (node.childNodes.length > 0) {
365343
Array.from(node.childNodes).forEach(childNode => {
366-
renderValues(childNode, updateData || data, key, renderKey);
344+
renderValues(childNode, data, key, renderKey);
367345
});
368346
}
369347
}
@@ -384,8 +362,6 @@ function renderValue(node, data, placeholder, renderKey, renderedNode) {
384362
match = output.match(/{{([A-Za-z0-9_.,\[\]\- ]*)}}/);
385363

386364
if (match) {
387-
if (match[1] == 'document.created.on')
388-
console.log('aaaaaa')
389365

390366
let value = getRenderValue(node, data, match[1], renderKey)
391367

@@ -419,13 +395,10 @@ function getRenderValue(node, data, key, renderKey) {
419395

420396
if (parentTemplate) {
421397
do {
422-
if (key == 'status')
423-
console.log('lllls')
424-
425398
let parentNode = renderedNodes.get(parentTemplate)
426399
if (parentNode) {
427400
if (parentNode.template) {
428-
let Data, parent = parentNode.parent || parentNode.template
401+
let Data, eid, parent = parentNode.parent || parentNode.template
429402
do {
430403
if (parent.source)
431404
Data = parent.source.data
@@ -434,45 +407,35 @@ function getRenderValue(node, data, key, renderKey) {
434407
else if (parent.template)
435408
parent = parent.template
436409

410+
if (!Data && parent && parent.eid)
411+
eid = parent.eid
412+
413+
437414
} while (parent && !Data)
438-
if (key == 'status')
439-
console.log('lllls', Data)
440415

441-
let dotNotation = parentNode.dotNotation
442-
let renderedData = getValueFromObject(Data, dotNotation);
443-
if (!renderedData) {
444-
value = getValueFromObject(Data, key);
445-
}
446-
if (renderedData) {
447-
if (Array.isArray(renderedData)) {
448-
const keysArray = Array.from(parentNode.template.clones.keys());
449-
const index = keysArray.indexOf(parentNode.eid);
450-
Data = { [parentNode.renderKey]: renderedData[index] }
451-
} else
452-
Data = { [parentNode.renderKey]: renderedData }
453-
454-
let nodeData = renderedNodes.get(node)
455-
if (nodeData.key && nodeData.renderKey) {
456-
Data = getValueFromObject(Data, nodeData.key);
457-
Data = { [nodeData.renderKey]: Data }
458-
}
416+
value = getValueFromObject(Data, key);
417+
if (!value && key.includes('.')) {
418+
let renderedData = getValueFromObject(Data, key.split('.')[0]);
419+
if (renderedData) {
420+
let index
421+
if (!parent.clones.size)
422+
index = 0
423+
else
424+
index = Array.from(parent.clones.keys()).indexOf(eid);
459425

460-
value = getValueFromObject(Data, key);
461-
if (value && renderKey && key.startsWidth(`${renderKey}.`))
462-
value = getValueFromObject({ [renderKey]: value }, key);
426+
Data = { [key.split('.')[0]]: renderedData[index] }
427+
value = getValueFromObject(Data, key);
463428

464-
if (!value) {
465-
value = getValueFromObject(parentNode.template.source.data, key);
466429
}
430+
467431
}
468432
}
469433
}
470434

471435
if (!value && parentTemplate.parentElement)
472436
parentTemplate = parentTemplate.parentElement.closest('[render]')
473-
else {
437+
else
474438
parentTemplate = undefined
475-
}
476439

477440
} while (!value && parentTemplate)
478441
}

0 commit comments

Comments
 (0)