From 1e25ab92e8e2cb383d2fb45cd14551fd89751d87 Mon Sep 17 00:00:00 2001 From: Tony Bradley Date: Sat, 25 Mar 2017 09:53:58 -0400 Subject: [PATCH 1/6] modify element when setAttribute called on class or id --- dom-element.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/dom-element.js b/dom-element.js index 73ff10e..c0fd568 100644 --- a/dom-element.js +++ b/dom-element.js @@ -104,6 +104,12 @@ DOMElement.prototype.setAttributeNS = prefix = name.substr(0, colonPosition) localName = name.substr(colonPosition + 1) } + if (name === 'id') { + this.id = value + } + if (name === 'class') { + this.className = value + } if (this.tagName === 'INPUT' && name === 'type') { this.type = value; } From 896e92241c13f62b4aeb52f5b34fea106658e1e5 Mon Sep 17 00:00:00 2001 From: Tony Bradley Date: Sat, 25 Mar 2017 10:18:04 -0400 Subject: [PATCH 2/6] fixed dupe classes, but need to add watcher for .className property --- serialize.js | 4 ---- test/test-dom-element.js | 8 ++++++++ 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/serialize.js b/serialize.js index 4411d3c..9fba7e4 100644 --- a/serialize.js +++ b/serialize.js @@ -112,10 +112,6 @@ function properties(elem) { } } - if (elem.className) { - props.push({ name: "class", value: elem.className }) - } - return props.length ? stringify(props) : "" } diff --git a/test/test-dom-element.js b/test/test-dom-element.js index b7f2baa..d79ddd5 100644 --- a/test/test-dom-element.js +++ b/test/test-dom-element.js @@ -57,6 +57,14 @@ function testDomElement(document) { cleanup() assert.end() }) + + test("setAttribute will properly affect id and className property", function (assert) { + var div = document.createElement("div") + div.setAttribute("class", "my-class") + console.log(div.toString()) + assert.equal(div.toString(), "
") + assert.end() + }) test("does not serialize innerText as an attribute", function(assert) { var div = document.createElement("div") From a4abffd3be81e0df71fbd909d145cd6fb73718c5 Mon Sep 17 00:00:00 2001 From: Tony Bradley Date: Sat, 25 Mar 2017 10:42:49 -0400 Subject: [PATCH 3/6] wrap properties so they behave similar to dom attributes --- dom-element.js | 28 +++++++++++++++++++++++++++- 1 file changed, 27 insertions(+), 1 deletion(-) diff --git a/dom-element.js b/dom-element.js index c0fd568..3b82b8a 100644 --- a/dom-element.js +++ b/dom-element.js @@ -17,7 +17,6 @@ function DOMElement(tagName, owner, namespace) { this.tagName = ns === htmlns ? String(tagName).toUpperCase() : tagName this.nodeName = this.tagName - this.className = "" this.dataset = {} this.childNodes = [] this.parentNode = null @@ -29,6 +28,33 @@ function DOMElement(tagName, owner, namespace) { if (this.tagName === 'INPUT') { this.type = 'text' } + + var _id + var _className + Object.defineProperties(this, { + id: { + enumerable: true, + get: function () { + return _id + }, + set: function (newVal) { + if (_id === newVal) return + _id = newVal + this.setAttribute('id', _id) + } + }, + className: { + enumerable: true, + get: function () { + return _className + }, + set: function (newVal) { + if (_className === newVal) return + _className = newVal + this.setAttribute('class', _className) + } + } + }) } DOMElement.prototype.type = "DOMElement" From 6536790463d7c98efea21473f60bdc1f792d7384 Mon Sep 17 00:00:00 2001 From: Tony Bradley Date: Sat, 25 Mar 2017 11:24:32 -0400 Subject: [PATCH 4/6] treat id like attribute, not property --- serialize.js | 3 ++- test/test-dom-element.js | 12 ++++++++++-- 2 files changed, 12 insertions(+), 3 deletions(-) diff --git a/serialize.js b/serialize.js index 9fba7e4..c24ea07 100644 --- a/serialize.js +++ b/serialize.js @@ -53,7 +53,8 @@ function isProperty(elem, key) { return elem.hasOwnProperty(key) && (type === "string" || type === "boolean" || type === "number") && key !== "nodeName" && key !== "className" && key !== "tagName" && - key !== "textContent" && key !== "innerText" && key !== "namespaceURI" && key !== "innerHTML" + key !== "textContent" && key !== "innerText" && key !== "namespaceURI" && + key !== "id" && key !== "innerHTML" } function stylify(styles) { diff --git a/test/test-dom-element.js b/test/test-dom-element.js index d79ddd5..1dd55ed 100644 --- a/test/test-dom-element.js +++ b/test/test-dom-element.js @@ -58,11 +58,19 @@ function testDomElement(document) { assert.end() }) - test("setAttribute will properly affect id and className property", function (assert) { + test("setAttribute will properly affect className property", function(assert) { var div = document.createElement("div") div.setAttribute("class", "my-class") - console.log(div.toString()) assert.equal(div.toString(), "
") + assert.equal(div.className, "my-class") + assert.end() + }) + + test("setAttribute will properly affect id property", function(assert) { + var div = document.createElement("div") + div.setAttribute("id", "my-id") + assert.equal(div.toString(), "
") + assert.equal(div.id, "my-id") assert.end() }) From 85b42bc78fb1d1e78b9c24389f8fd3fd8e00a77b Mon Sep 17 00:00:00 2001 From: Tony Bradley Date: Sat, 25 Mar 2017 11:28:43 -0400 Subject: [PATCH 5/6] indent to follow styles in file --- dom-element.js | 38 +++++++++++++++++++------------------- 1 file changed, 19 insertions(+), 19 deletions(-) diff --git a/dom-element.js b/dom-element.js index 3b82b8a..4adacbe 100644 --- a/dom-element.js +++ b/dom-element.js @@ -32,28 +32,28 @@ function DOMElement(tagName, owner, namespace) { var _id var _className Object.defineProperties(this, { - id: { - enumerable: true, - get: function () { - return _id + id: { + enumerable: true, + get: function () { + return _id }, - set: function (newVal) { - if (_id === newVal) return - _id = newVal - this.setAttribute('id', _id) - } - }, - className: { - enumerable: true, - get: function () { - return _className + set: function (newVal) { + if (_id === newVal) return + _id = newVal + this.setAttribute('id', _id) + } }, - set: function (newVal) { - if (_className === newVal) return - _className = newVal - this.setAttribute('class', _className) + className: { + enumerable: true, + get: function () { + return _className + }, + set: function (newVal) { + if (_className === newVal) return + _className = newVal + this.setAttribute('class', _className) + } } - } }) } From e84efd1a97013f460cb9662df79f11c9329c94d8 Mon Sep 17 00:00:00 2001 From: Tony Bradley Date: Sat, 25 Mar 2017 11:30:19 -0400 Subject: [PATCH 6/6] indent fix --- dom-element.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/dom-element.js b/dom-element.js index 4adacbe..92a6061 100644 --- a/dom-element.js +++ b/dom-element.js @@ -35,8 +35,8 @@ function DOMElement(tagName, owner, namespace) { id: { enumerable: true, get: function () { - return _id - }, + return _id + }, set: function (newVal) { if (_id === newVal) return _id = newVal