rewrote attribute and text node parsing/rendering

orsi · Mar 8, 2019 · 67cd54f · 67cd54f
1 parent d5d4596
commit 67cd54f
Show file tree

Hide file tree

Showing 3 changed files with 135 additions and 45 deletions.
diff --git a/src/zen-node.ts b/src/zen-node.ts
@@ -21,27 +21,56 @@ export class ZenNode {
                 for (let i = 0; i < currentNode.attributes.length; i++) {
                     const currentAttribute = currentNode.attributes[i];
                     if (currentAttribute.textContent.indexOf(valueMarker) > -1) {
-                        this.children.push({
+                        // text node can contain more than one marker
+                        // must save the whole string with markers and
+                        // build whole string on each value change
+                        const text = currentAttribute.textContent;
+                        const valuesCount = (text.match(new RegExp(valueMarker, 'gi')) || []).length;
+
+                        const attributeValue = {
                             type: 'attribute',
                             container: currentAttribute,
-                            index: valueIndex,
-                            currentValue: currentAttribute.textContent,
-                            oldValue: null
-                        });
-                        valueIndex++;
+                            template: currentAttribute.textContent,
+                            values: []
+                        };
+
+                        // for each value marker, save its index in template string
+                        for (let i = 0; i < valuesCount; i++) {
+                            attributeValue.values.push({
+                                index: valueIndex,
+                                currentValue: valueMarker,
+                                oldValue: null
+                            });
+                            this.children.push(attributeValue);
+                            valueIndex++;
+                        }
                     }
                 }
             } else {
                 // if it's not an element, must be in a text position
                 if (currentNode.textContent.indexOf(valueMarker) > -1) {
-                    this.children.push({
+                    // text node can contain more than one marker
+                    // see how many value markers are within text node
+                    const text = currentNode.textContent;
+                    const valuesCount = (text.match(new RegExp(valueMarker, 'gi')) || []).length;
+
+                    const textValue = {
                         type: 'text',
-                        index: valueIndex,
                         container: currentNode,
-                        currentValue: currentNode.textContent,
-                        oldValue: null
-                    });
-                    valueIndex++;
+                        template: currentNode.textContent,
+                        values: []
+                    };
+
+                    // for each value marker, save its index in template string
+                    for (let i = 0; i < valuesCount; i++) {
+                        textValue.values.push({
+                            index: valueIndex,
+                            currentValue: valueMarker,
+                            oldValue: null
+                        });
+                        this.children.push(textValue);
+                        valueIndex++;
+                    }
                 }
             }
         }
@@ -51,14 +80,34 @@ export class ZenNode {
         values.forEach((value, i) => {
             // grab node saved for value and update with new value
             const node = this.children[i];
-            node.oldValue = node.currentValue;
-            node.currentValue = value;
             switch (node.type) {
                 case 'attribute':
-                    (node.container as Attr).textContent = node.currentValue;
+                    const attribute = <Attr>node.container;
+                    // find the attribute part that corresponds with
+                    // this value index
+                    const attributeValues = node.values;
+                    const currentValue = attributeValues.find(val => val.index === i);
+                    currentValue.oldValue = currentValue.currentValue;
+                    currentValue.currentValue = value;
+                    // rebuild template from all current values
+                    let str = node.template;
+                    for (let j = 0; j < attributeValues.length; j++) {
+                        str = str.replace(valueMarker, attributeValues[j].currentValue);
+                    }
+                    attribute.textContent = str;
                     break;
                 case 'text':
-                    (node.container as Element).textContent = node.currentValue;
+                    // find the attribute part that corresponds with
+                    // this value index
+                    const nodeValue = node.values.find(asdf => asdf.index === i);
+                    nodeValue.oldValue = nodeValue.currentValue;
+                    nodeValue.currentValue = value;
+                    // rebuild template from all current values
+                    let newTextContent = node.template;
+                    for (let j = 0; j < node.values.length; j++) {
+                        newTextContent = newTextContent.replace(valueMarker, node.values[j].currentValue);
+                    }
+                    node.container.textContent = newTextContent;
                     break;
             }
         });