Update to class-based

Neovici · Jan 13, 2019 · 5fcfef0 · 5fcfef0
1 parent b69deee
commit 5fcfef0
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 99 deletions.
diff --git a/bower.json b/bower.json
@@ -8,7 +8,6 @@
 		"cosmoz-bottom-bar": "Neovici/cosmoz-bottom-bar#^2.0.0",
 		"cosmoz-i18next": "Neovici/cosmoz-i18next#^1.0.2",
 		"cosmoz-page-router": "Neovici/cosmoz-page-router#^2.0.0",
-		"cosmoz-templatize": "Neovici/cosmoz-templatize#^1.0.0",
 		"iron-flex-layout": "PolymerElements/iron-flex-layout#^2.0.3",
 		"paper-icon-button": "PolymerElements/paper-icon-button#^2.2.0",
 		"paper-spinner": "PolymerElements/paper-spinner#^2.1.0"

diff --git a/cosmoz-data-nav.html b/cosmoz-data-nav.html
@@ -9,7 +9,6 @@
 
 <link rel="import" href="../cosmoz-bottom-bar/cosmoz-bottom-bar-view.html">
 <link rel="import" href="../cosmoz-page-router/cosmoz-page-location.html">
-<link rel="import" href="../cosmoz-templatize/cosmoz-templatize.html">
 
 <link rel="import" href="../paper-icon-button/paper-icon-button.html">
 <link rel="import" href="../paper-spinner/paper-spinner-lite.html">

diff --git a/cosmoz-data-nav.js b/cosmoz-data-nav.js
@@ -19,15 +19,26 @@
 				_asyncPeriod(callStep, timeout);
 			};
 			return _asyncPeriod(callStep, timeout);
-		};
-
-	class CosmozDataNav extends Polymer.mixinBehaviors([
-		Polymer.IronResizableBehavior,
+		},
+		{
+			Debouncer,
+			enqueueDebouncer,
+			FlattenedNodesObserver,
+			IronResizableBehavior,
+			Templatize,
+			mixinBehaviors
+		} = Polymer;
+
+
+	class CosmozDataNav extends mixinBehaviors([
+		IronResizableBehavior,
 		Cosmoz.TranslatableBehavior
 	], Polymer.Element) {
+
 		static get is() {
 			return 'cosmoz-data-nav';
 		}
+
 		static get properties() {
 			return {
 				/**
@@ -50,9 +61,9 @@
 				},
 
 				/**
-				* The name of the variable to add to the binding scope with the index
-				* for the item.
-				*/
+				 * The name of the variable to add to the binding scope with the index
+				 * for the item.
+				 */
 				indexAs: {
 					type: String,
 					value: 'index'
@@ -232,28 +243,37 @@
 			super();
 			this._cache = {};
 			this._preloadIdx = 0;
+			this._boundOnTemplatesChange = this._onTemplatesChange.bind(this);
 		}
 
 		connectedCallback() {
-			this._templatesObserver = new Polymer.FlattenedNodesObserver(this.$.templatesSlot, this._onTemplatesChange.bind(this));
+			super.connectedCallback();
+			this._templatesObserver = new FlattenedNodesObserver(
+				this.$.templatesSlot,
+				this._boundOnTemplatesChange
+			);
 			window.addEventListener('cosmoz-cache-purge', this._onCachePurge);
 			this.addEventListener('tap', this._onTap);
 			this.addEventListener('transitionend', this._onTransitionEnd);
 		}
 
 		disconnectedCallback() {
+			super.disconnectedCallback();
 			if (this._templatesObserver) {
 				this._templatesObserver.disconnect();
 				this._templatesObserver = null;
 			}
+
+			if (this._selectDebouncer != null) {
+				this._selectDebouncer.cancel();
+			}
+
 			this._cache = {};
 			this._indexRenderQueue = [];
 			window.removeEventListener('cosmoz-cache-purge', this._onCachePurge);
 			this.removeEventListener('tap', this._onTap);
 			this.removeEventListener('transitionend', this._onTransitionEnd);
-			if (this._selectDebouncer != null) {
-				this._selectDebouncer.cancel();
-			}
+
 			this.splice('_elements', 0, this._elements.length, this._createElement())
 				.forEach(element => {
 					this._removeInstance(element.__instance);
@@ -296,20 +316,15 @@
 				nextDisabled: true,
 				[this.indexAs]: true
 			};
-			this._elementCtor = Cosmoz.Templatize.templatize(this._elementTemplate, this, {
+			this._elementCtor = Templatize.templatize(this._elementTemplate, this, {
 				instanceProps: Object.assign({ [this.as]: true }, baseProps),
 				parentModel: true,
-				forwardParentProp: this._forwardHostProp,
-				forwardParentPath: this._forwardParentPath,
 				forwardHostProp: this._forwardHostProp,
-				forwardInstanceProp: this._notifyInstanceProp,
 				notifyInstanceProp: this._notifyInstanceProp
 			});
-			this._incompleteCtor = Cosmoz.Templatize.templatize(this._incompleteTemplate, this, {
+			this._incompleteCtor = Templatize.templatize(this._incompleteTemplate, this, {
 				instanceProps: baseProps,
 				parentModel: true,
-				forwardParentProp: this._forwardHostProp,
-				forwardParentPath: this._forwardParentPath,
 				forwardHostProp: this._forwardHostProp,
 			});
 		}
@@ -326,14 +341,6 @@
 				.filter(i => i != null);
 		}
 
-		_forwardParentPath(path, value) {
-			const instances = this._allInstances;
-			if (!instances || !instances.length) {
-				return;
-			}
-			instances.forEach(inst => inst.notifyPath(path, value, true));
-		}
-
 		_forwardHostProp(prop, value) {
 			const instances = this._allInstances;
 			if (!instances || !instances.length) {
@@ -698,13 +705,13 @@
 			if (isNaN(select)) {
 				return;
 			}
-			this._selectDebouncer = Polymer.Debouncer.debounce(this._selectDebouncer,
+			this._selectDebouncer = enqueueDebouncer(Debouncer.debounce(this._selectDebouncer,
 				Polymer.Async.timeOut.after(15),
 				() => {
 					this.animating = true;
 					this.select(this.selected + select);
 				}
-			);
+			));
 		}
 
 		/**

diff --git a/test/basic.html b/test/basic.html
@@ -74,17 +74,13 @@
 
 				setup(done => {
 					nav = fixture('defaults');
+					nav._templatesObserver.flush();
 					nav.items = Array(20).fill('').map((e, i) => i.toString());
-					if (nav._templatesObserver.flush) {
-						nav._templatesObserver.flush();
-					} else {
-						Polymer.dom.flush();
-					}
-					done();
+					flush(done);
 				});
 
 				test('instantiates a cosmoz-data-nav element', () => {
-					assert.equal(nav.is, 'cosmoz-data-nav');
+					assert.equal(nav.constructor.is, 'cosmoz-data-nav');
 				});
 
 				test('creates buffer elements', () => {
@@ -116,14 +112,9 @@
 
 				setup(done => {
 					nav = fixture('defaults');
+					nav._templatesObserver.flush();
 					nav.items = Array(20).fill('').map((e, i) => i.toString());
-					if (nav._templatesObserver.flush) {
-						nav._templatesObserver.flush();
-					} else {
-						Polymer.dom.flush();
-					}
-
-					done();
+					flush(done);
 				});
 
 				test('selected property is updated', () => {
@@ -171,18 +162,12 @@
 
 				setup(done => {
 					nav = fixture('defaults');
-
+					nav._templatesObserver.flush();
 					const items = Array(20).fill('').map((e, i) => i.toString());
 					items[0] = '0';
 					items[1] = '0';
 					nav.items = items;
-
-					if (nav._templatesObserver.flush) {
-						nav._templatesObserver.flush();
-					} else {
-						Polymer.dom.flush();
-					}
-					done();
+					flush(done);
 				});
 
 				test('setItemById handlers duplicate ids', done => {
@@ -205,13 +190,9 @@
 
 				setup(done => {
 					nav = fixture('defaults');
+					nav._templatesObserver.flush();
 					nav.items = Array(20).fill('').map((e, i) => i.toString());
-					if (nav._templatesObserver.flush) {
-						nav._templatesObserver.flush();
-					} else {
-						Polymer.dom.flush();
-					}
-					done();
+					flush(done);
 				});
 				test('cache stores one item', done => {
 					let cache = nav._cache;
@@ -258,7 +239,7 @@
 					done();
 				});
 
-				test('removeFromCache called with null or unknown item', done => {
+				test('removeFromCache called with null or unknown item', () => {
 					let cache = nav._cache,
 						cacheKeys;
 					nav.setItemById('1', { id: 900 });
@@ -271,8 +252,6 @@
 					cacheKeys = Object.keys(cache);
 					nav.removeFromCache({});
 					assert.equal(cacheKeys.length, Object.keys(cache).length);
-
-					done();
 				});
 
 			});
@@ -282,34 +261,28 @@
 
 				setup(done => {
 					nav = fixture('defaults');
-					nav.items = Array(20).fill('').map((e, i) => i.toString());
-					if (nav._templatesObserver.flush) {
-						nav._templatesObserver.flush();
-					} else {
-						Polymer.dom.flush();
-					}
 
-					done();
+					nav._templatesObserver.flush();
+					nav.items = Array(20).fill('').map((e, i) => i.toString());
+					flush(done);
 				});
 
-				test('setItemById warns about a unknown item', done => {
+				test('setItemById warns about a unknown item', () => {
 					const warnSpy = sinon.spy(console, 'warn');
 					const data = { id: 23 };
 					nav.setItemById('23', data);
 					assert.isTrue(warnSpy.calledWithExactly('trying to replace an item that is not in the list', '23', data), true);
 					warnSpy.restore();
-					done();
 				});
 
-				test('isIncompleteFn checks if an item is incomplete', done => {
+				test('isIncompleteFn checks if an item is incomplete', () => {
 					assert.isTrue(nav.isIncompleteFn());
 					assert.isTrue(nav.isIncompleteFn(null));
 					assert.isFalse(nav.isIncompleteFn({ id: '1' }));
 
 					nav.setItemById('1', { id: 1 });
 					assert.isTrue(nav.isIncompleteFn(nav.items[0]));
 					assert.isFalse(nav.isIncompleteFn(nav.items[1]));
-					done();
 				});
 
 				test('selectById updates selected property', () => {
@@ -348,32 +321,26 @@
 
 				setup(done => {
 					nav = fixture('elementsBuffer');
+					nav._templatesObserver.flush();
 					nav.items = Array(10).fill('').map((e, i) => i.toString());
-					if (nav._templatesObserver.flush) {
-						nav._templatesObserver.flush();
-					} else {
-						Polymer.dom.flush();
-					}
-
-					done();
+					flush(done);
 				});
 
 				test('instantiates a cosmoz-data-nav element', () => {
-					assert.equal(nav.is, 'cosmoz-data-nav');
+					assert.equal(nav.constructor.is, 'cosmoz-data-nav');
 				});
 
 				test('elementsBuffer property updates _elements', () => {
 					assert.equal(nav.elementsBuffer, 4);
 					assert.equal(nav._elements.length, 4);
 				});
 
-				test('_createElement does not create element if length is equal to elementsBuffer', done => {
+				test('_createElement does not create element if length is equal to elementsBuffer', () => {
 					assert.equal(nav.elementsBuffer, 4);
 					assert.equal(nav._elements.length, 4);
 
 					nav._createElement();
 					assert.equal(nav._elements.length, 4);
-					done();
 				});
 
 				test('_createElement returns new element', () => {
@@ -387,18 +354,13 @@
 
 				setup(done => {
 					nav = fixture('renderQueue');
+					nav._templatesObserver.flush();
 					nav.items = Array(10).fill('').map((e, i) => i.toString());
-					if (nav._templatesObserver.flush) {
-						nav._templatesObserver.flush();
-					} else {
-						Polymer.dom.flush();
-					}
-
-					done();
+					flush(done);
 				});
 
 				test('instantiates a cosmoz-data-nav element', () => {
-					assert.equal(nav.is, 'cosmoz-data-nav');
+					assert.equal(nav.constructor.is, 'cosmoz-data-nav');
 				});
 
 				test('renderQueue three items', done => {
@@ -435,4 +397,4 @@
 	</script>
 </body>
 
-</html>
+</html>
diff --git a/test/resizable.html b/test/resizable.html
@@ -71,17 +71,13 @@
 
 				setup(done => {
 					nav = fixture('resizable');
+					nav._templatesObserver.flush();
 					nav.items = Array(10).fill('').map((e, i) => i.toString());
-					if (nav._templatesObserver.flush) {
-						nav._templatesObserver.flush();
-					} else {
-						Polymer.dom.flush();
-					}
-					done();
+					flush(done);
 				});
 
 				test('instantiates a cosmoz-data-nav element', () => {
-					assert.equal(nav.is, 'cosmoz-data-nav');
+					assert.equal(nav.constructor.is, 'cosmoz-data-nav');
 				});
 
 				test('resize', done => {

diff --git a/wct.conf.json b/wct.conf.json
@@ -2,7 +2,8 @@
 	"plugins": {
 		"local": {
 			"browsers": [
-				"chrome"
+				"chrome",
+				"firefox"
 			],
 			"browserOptions": {
 				"chrome": [