Extend pipe to sync input element
Change-Id: I38f9bc810b571fcbee0d5572d4f5b2d03a8f0a9c
diff --git a/dev/js/spec/pipeSpec.js b/dev/js/spec/pipeSpec.js
index 46cd5b9..078d4b1 100644
--- a/dev/js/spec/pipeSpec.js
+++ b/dev/js/spec/pipeSpec.js
@@ -88,5 +88,17 @@
p.remove('service0')
expect(p.toString()).toEqual('service1,service2,service3');
});
+
+ it('should sync with an element', function () {
+ let p = pipeClass.create();
+ let e = p.element();
+ expect(e.tagName).toEqual("INPUT");
+ p.append('service1');
+ expect(e.getAttribute("value")).toEqual("service1");
+ p.append('service2');
+ expect(e.getAttribute("value")).toEqual("service1,service2");
+ p.remove('service1');
+ expect(e.getAttribute("value")).toEqual("service2");
+ });
});
});
diff --git a/dev/js/src/pipe.js b/dev/js/src/pipe.js
index 7b9afee..9847b45 100644
--- a/dev/js/src/pipe.js
+++ b/dev/js/src/pipe.js
@@ -36,8 +36,10 @@
*/
append : function (service) {
service = _notNull(service);
- if (service)
+ if (service) {
this._pipe.push(service);
+ this._update();
+ };
},
/**
@@ -45,8 +47,10 @@
*/
prepend : function (service) {
service = _notNull(service);
- if (service)
+ if (service) {
this._pipe.unshift(service);
+ this._update();
+ };
},
/**
@@ -56,6 +60,7 @@
let i = this._pipe.indexOf(service);
if (i != -1) {
this._pipe.splice(i, 1);
+ this._update();
};
},
@@ -71,6 +76,28 @@
*/
toString : function () {
return this._pipe.join(',');
+ },
+
+ /**
+ * Update the pipe value.
+ */
+ _update : function () {
+ if (this.e != null) {
+ this.e.setAttribute("value", this.toString());
+ };
+ },
+
+ /**
+ * Return the pipe element.
+ */
+ element : function () {
+ if (this.e == null) {
+ this.e = document.createElement('input');
+ this.e.setAttribute("type","text");
+ this.e.setAttribute("name","pipe");
+ this.e.classList.add("pipe");
+ };
+ return this.e;
}
};
});