From 94f5456d486c679f9145154b51fd16a6715ae09e Mon Sep 17 00:00:00 2001
From: Cristian Necula <virusz@gmail.com>
Date: Sat, 30 Mar 2019 01:42:22 +0200
Subject: [PATCH 1/4] (patch) when `items` is [], the templates render
 [[index]] as -1

---
 cosmoz-data-nav.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/cosmoz-data-nav.js b/cosmoz-data-nav.js
index 7fa3ec1..3e9b10c 100644
--- a/cosmoz-data-nav.js
+++ b/cosmoz-data-nav.js
@@ -595,7 +595,7 @@
 			return {
 				prevDisabled: index < 1,
 				nextDisabled: index + 1 >= this.items.length,
-				[this.indexAs]: Math.min(Math.max(index, 0), this.items.length - 1)
+				[this.indexAs]: Math.max(Math.min(index, this.items.length - 1), 0)
 			};
 		}
 

From 7aae8e21efe936262894956f1f775852b221533f Mon Sep 17 00:00:00 2001
From: Cristian Necula <virusz@gmail.com>
Date: Sat, 30 Mar 2019 01:50:59 +0200
Subject: [PATCH 2/4] (tests) _resetElement does not run correctly during the
 test

Wait a bit, so that the data-nav has finished initializing.
Re #77
---
 test/spec.html | 49 +++++++++++++++++++++++++++----------------------
 1 file changed, 27 insertions(+), 22 deletions(-)

diff --git a/test/spec.html b/test/spec.html
index 8de7fc6..52f0e87 100644
--- a/test/spec.html
+++ b/test/spec.html
@@ -37,11 +37,13 @@
 		<template>
 			<cosmoz-data-nav>
 				<template strip-whitespace>
-					<span>id: [[ item.id ]],</span>
-					<span>index: [[ index ]]</span>
-					<span>[[ item.data ]]</span>
-					<input type="button" value="Next" cosmoz-data-nav-select="+1">
-					<input type="button" value="Prev" cosmoz-data-nav-select="-1">
+					<div class="slide">
+						<span>id: [[ item.id ]],</span>
+						<span>index: [[ index ]]</span>
+						<span>[[ item.data ]]</span>
+						<input type="button" value="Next" cosmoz-data-nav-select="+1">
+						<input type="button" value="Prev" cosmoz-data-nav-select="-1">
+					</div>
 				</template>
 			</cosmoz-data-nav>
 		</template>
@@ -49,6 +51,8 @@
 
 	<script>
 		const {flushRenderQueue} = window;
+		const selectedSlide = (nav) => nav.querySelector('div.selected .slide')
+
 		describe('cosmoz-data-nav', () => {
 			describe('constructor', () => {
 				it('renders', () => {
@@ -85,11 +89,12 @@
 
 			context('properties', () => {
 				let nav;
-				beforeEach(() => {
+				beforeEach((done) => {
 					nav = fixture('basic');
 					nav._templatesObserver.flush();
 					nav.items = [{id: 1}, {id: 2}, {id: 3}];
 					flushRenderQueue(nav);
+					setTimeout(done, 50)
 				});
 
 				describe('animating', () => {
@@ -142,14 +147,14 @@
 						nav.items = [{id: 'a'}, {id: 'b'}, {id: 'c'}];
 						flushRenderQueue(nav);
 
-						expect(nav.querySelector('div.selected').textContent).to.equal('id: a,index: 0');
+						expect(selectedSlide(nav).textContent).to.equal('id: a,index: 0');
 					});
 
 					it('does not update the view when an item changes', () => {
 						const item = {id: 'a', data: 'somedata'};
 						nav.items = [item];
 						flushRenderQueue(nav);
-						expect(nav.querySelector('div.selected').textContent).to.equal('id: a,index: 0somedata');
+						expect(selectedSlide(nav).textContent).to.equal('id: a,index: 0somedata');
 
 						// attempt #1: updating a reference directly does not update the view
 						// this is expected as the data-nav has no way of knowing that data was updated
@@ -157,7 +162,7 @@
 						expect(nav.items[0]).to.have.property('data', 'newdata');
 
 						expect(() => {
-							expect(nav.querySelector('div.selected').textContent).to.equal('id: a,index: 0newdata');
+							expect(selectedSlide(nav).textContent).to.equal('id: a,index: 0newdata');
 						}).throws('expected \'id: a,index: 0somedata\' to equal \'id: a,index: 0newdata\'');
 
 
@@ -168,7 +173,7 @@
 						expect(nav.items[0]).to.have.property('data', 'otherdata');
 
 						expect(() => {
-							expect(nav.querySelector('div.selected').textContent).to.equal('id: a,index: 0otherdata');
+							expect(selectedSlide(nav).textContent).to.equal('id: a,index: 0otherdata');
 						}).throws('expected \'id: a,index: 0somedata\' to equal \'id: a,index: 0otherdata\'');
 
 						// attempt #3: try to force render
@@ -182,7 +187,7 @@
 						flushRenderQueue(nav);
 
 						expect(() => {
-							expect(nav.querySelector('div.selected').textContent).to.equal('id: a,index: 0freshdata');
+							expect(selectedSlide(nav).textContent).to.equal('id: a,index: 0freshdata');
 						}).throws('expected \'id: a,index: 0somedata\' to equal \'id: a,index: 0freshdata\'');
 					});
 				});
@@ -193,12 +198,12 @@
 							nav.items = [{id: 'a'}, {id: 'b'}, {id: 'c'}];
 							nav.selected = 1;
 							flushRenderQueue(nav);
-							expect(nav.querySelector('div.selected').textContent).to.equal('id: b,index: 1');
+							expect(selectedSlide(nav).textContent).to.equal('id: b,index: 1');
 
 							nav.items = [{id: 'c'}, {id: 'd'}, {id: 'e'}];
 							expect(nav.selected).to.equal(0);
 							flushRenderQueue(nav);
-							expect(nav.querySelector('div.selected').textContent).to.equal('id: c,index: 0');
+							expect(selectedSlide(nav).textContent).to.equal('id: c,index: 0');
 						});
 					});
 
@@ -212,37 +217,37 @@
 							nav.items = [{id: 'a'}, item, {id: 'c'}];
 							nav.selected = 1;
 							flushRenderQueue(nav);
-							expect(nav.querySelector('div.selected').textContent).to.equal('id: b,index: 1somedata');
+							expect(selectedSlide(nav).textContent).to.equal('id: b,index: 1somedata');
 
 							item.data = 'otherdata';
 							nav.items = [{id: 'a'}, {id: 'd'}, {id: 'e'}, item];
 							expect(nav.selected).to.equal(3);
 							flushRenderQueue(nav);
-							expect(nav.querySelector('div.selected').textContent).to.equal('id: b,index: 3otherdata');
+							expect(selectedSlide(nav).textContent).to.equal('id: b,index: 3otherdata');
 						});
 
 						it('on `items` change, updates `selected` to match the last selected item, by id', () => {
 							nav.items = [{id: 'a'}, {id: 'b', data: 'somedata'}, {id: 'c'}];
 							nav.selected = 1;
 							flushRenderQueue(nav);
-							expect(nav.querySelector('div.selected').textContent).to.equal('id: b,index: 1somedata');
+							expect(selectedSlide(nav).textContent).to.equal('id: b,index: 1somedata');
 
 							nav.items = [{id: 'a'}, {id: 'd'}, {id: 'e'}, {id: 'b', data: 'otherdata'}];
 							expect(nav.selected).to.equal(3);
 							flushRenderQueue(nav);
-							expect(nav.querySelector('div.selected').textContent).to.equal('id: b,index: 3otherdata');
+							expect(selectedSlide(nav).textContent).to.equal('id: b,index: 3otherdata');
 						});
 
 						it('on `items` change, maintains `selected` to it\'s current value, if the last selected item is no longer present, by reference or by id', () => {
 							nav.items = [{id: 'a'}, {id: 'b'}, {id: 'c'}];
 							nav.selected = 1;
 							flushRenderQueue(nav);
-							expect(nav.querySelector('div.selected').textContent).to.equal('id: b,index: 1');
+							expect(selectedSlide(nav).textContent).to.equal('id: b,index: 1');
 
 							nav.items = [{id: 'a'}, {id: 'd'}, {id: 'e'}];
 							expect(nav.selected).to.equal(1);
 							flushRenderQueue(nav);
-							expect(nav.querySelector('div.selected').textContent).to.equal('id: d,index: 1');
+							expect(selectedSlide(nav).textContent).to.equal('id: d,index: 1');
 						});
 
 						context('when idPath is set', () => {
@@ -251,12 +256,12 @@
 								nav.items = [{deep: {id: 'a'}}, {deep: {id: 'b'}, data: 'somedata'}, {deep: {id: 'c'}}];
 								nav.selected = 1;
 								flushRenderQueue(nav);
-								expect(nav.querySelector('div.selected').textContent).to.equal('id: ,index: 1somedata');
+								expect(selectedSlide(nav).textContent).to.equal('id: ,index: 1somedata');
 
 								nav.items = [{deep: {id: 'a'}}, {deep: {id: 'd'}}, {deep: {id: 'e'}}, {deep: {id: 'b'}, data: 'otherdata'}];
 								expect(nav.selected).to.equal(3);
 								flushRenderQueue(nav);
-								expect(nav.querySelector('div.selected').textContent).to.equal('id: ,index: 3otherdata');
+								expect(selectedSlide(nav).textContent).to.equal('id: ,index: 3otherdata');
 							});
 						});
 					});
@@ -287,7 +292,7 @@
 						nav.selected = 1;
 
 						expect(nav.selected).to.equal(1);
-						expect(nav.querySelector('div.selected').textContent).to.equal('id: 2,index: 1');
+						expect(selectedSlide(nav).textContent).to.equal('id: 2,index: 1');
 					});
 				});
 

From c6be74dec61032df0e2a247fc1a9316244798762 Mon Sep 17 00:00:00 2001
From: Cristian Necula <virusz@gmail.com>
Date: Sat, 30 Mar 2019 01:54:10 +0200
Subject: [PATCH 3/4] (patch) queue is not reset to 0 when items is empty

---
 cosmoz-data-nav.js |  2 +-
 test/spec.html     | 23 ++++++++++++++++++++---
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/cosmoz-data-nav.js b/cosmoz-data-nav.js
index 3e9b10c..2f8d960 100644
--- a/cosmoz-data-nav.js
+++ b/cosmoz-data-nav.js
@@ -467,7 +467,7 @@
 
 			// reset queue to 0 or maintain selection
 			let index = 0;
-			if (this.maintainSelection && this._previouslySelectedItem != null) {
+			if (this.items.length > 0 && this.maintainSelection && this._previouslySelectedItem != null) {
 				// search for previously selected item by reference
 				index = items.indexOf(this._previouslySelectedItem);
 
diff --git a/test/spec.html b/test/spec.html
index 52f0e87..bb51677 100644
--- a/test/spec.html
+++ b/test/spec.html
@@ -51,7 +51,7 @@
 
 	<script>
 		const {flushRenderQueue} = window;
-		const selectedSlide = (nav) => nav.querySelector('div.selected .slide')
+		const selectedSlide = nav => nav.querySelector('div.selected .slide');
 
 		describe('cosmoz-data-nav', () => {
 			describe('constructor', () => {
@@ -89,12 +89,12 @@
 
 			context('properties', () => {
 				let nav;
-				beforeEach((done) => {
+				beforeEach(done => {
 					nav = fixture('basic');
 					nav._templatesObserver.flush();
 					nav.items = [{id: 1}, {id: 2}, {id: 3}];
 					flushRenderQueue(nav);
-					setTimeout(done, 50)
+					setTimeout(done, 50);
 				});
 
 				describe('animating', () => {
@@ -250,6 +250,23 @@
 							expect(selectedSlide(nav).textContent).to.equal('id: d,index: 1');
 						});
 
+						it('resets selected to 0 when `items` is empty', () => {
+							nav.items = [{id: 'a'}, {id: 'b'}, {id: 'c'}];
+							nav.selected = 2;
+							flushRenderQueue(nav);
+							expect(selectedSlide(nav).textContent).to.equal('id: c,index: 2');
+
+							nav.items = [];
+							expect(nav.selected).to.equal(0);
+							flushRenderQueue(nav);
+							expect(selectedSlide(nav).textContent).to.equal('id: c,index: 2');
+
+							nav.items = [{id: 'd'}, {id: 'e'}, {id: 'f'}];
+							expect(nav.selected).to.equal(0);
+							flushRenderQueue(nav);
+							expect(selectedSlide(nav).textContent).to.equal('id: d,index: 0');
+						});
+
 						context('when idPath is set', () => {
 							it('works as expected', () => {
 								nav.idPath = 'deep.id';

From 7af850d05eae000c106c9be1e88a18fd5a14705f Mon Sep 17 00:00:00 2001
From: Cristian Necula <VirusZ@gmail.com>
Date: Mon, 1 Apr 2019 23:50:48 +0300
Subject: [PATCH 4/4] (patch) use `items` from function scope

---
 cosmoz-data-nav.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/cosmoz-data-nav.js b/cosmoz-data-nav.js
index 2f8d960..1c2284d 100644
--- a/cosmoz-data-nav.js
+++ b/cosmoz-data-nav.js
@@ -467,7 +467,7 @@
 
 			// reset queue to 0 or maintain selection
 			let index = 0;
-			if (this.items.length > 0 && this.maintainSelection && this._previouslySelectedItem != null) {
+			if (items.length > 0 && this.maintainSelection && this._previouslySelectedItem != null) {
 				// search for previously selected item by reference
 				index = items.indexOf(this._previouslySelectedItem);