Simplify navigation example by using ContentChanged event

README.md

@@ -177,13 +177,11 @@ The Navigation card implements and exposes a public method `updateBackgroundGrad
 The Color Controls card uses custom JavaScript to access the Navigation card via the Review Interface API and invoke the Navigation card's public method to update its background. (This code could as easily run in the `ColorControlsCardInstance` rather than in a JS file loaded by the Color Controls card.)
 
 ## Coordinating with Navigation
-The Navigation card uses [Viewer Collection](https://platform.relativity.com/relativityreviewapi/AA/interfaces/viewer.iviewercollection.html) and [Queue Pointer](https://platform.relativity.com/relativityreviewapi/AA/interfaces/queue.iqueuepointer.html) event handlers to display the current document's artifact ID and keep it up to date.
+The Navigation card uses a [Viewer Collection](https://platform.relativity.com/relativityreviewapi/AA/interfaces/viewer.iviewercollection.html) event handler to display the current document's artifact ID and keep it up to date.
 
 ### Listening for Navigation Events
 
-The Navigation card listens on the Queue Pointer [Updated](https://platform.relativity.com/relativityreviewapi/AA/enums/queue.queuepointereventtype.html#updated) event, which fires when the queue pointer updates (for example, by navigating to a different document, switching viewer type, etc.) When the Queue Pointer Updated event fires, it updates the displayed document artifact ID to stay in sync with the document now being displayed.
-
-The Navigation card also listens on the Viewer Collection [QueuePointerChanged](https://platform.relativity.com/relativityreviewapi/AA/enums/viewer.viewercollectioneventtype.html#queuepointerchanged) event to keep its Queue Pointer Updated event handler registered on the correct queue pointer. The Viewer Collection QueuePointerChanged event fires when the Review Interface changes review queues; for example, by clicking to navigate to a document from a Related Items pane or from Email Thread Visualization. When this event fires, it de-registers its Queue Pointer Updated event handler from the old queue pointer and registers the Updated event handler on the new queue pointer. The card also updates its internal reference to the current queue pointer.
+The Navigation card listens on the Viewer Collection [ContentChanged](https://platform.relativity.com/relativityreviewapi/12.0/enums/viewer.viewercollectioneventtype.html#contentchanged) event, which fires when the content displayed by the viewer changes. The content is usually a document, but it can also be an RDO file or a "placeholder" when there is no document or when an error has occurred. The ContentChanged event is triggered when navigating to a different document, or switching to a different viewer type, for example.
 
 In the future, the Review Interface may have multiple Viewer Collections. This sample extension is not future-proofed for that eventuality. The sample extension passes the [main collection](https://platform.relativity.com/relativityreviewapi/AA/interfaces/viewer.iviewerservice.html#maincollection) into the Navigation card when it is created in the [Ready]((https://platform.relativity.com/relativityreviewapi/AA/interfaces/extensions.iextensionlifecycle.html#ready)) lifecycle event handler and never updates the Navigation card's registered viewer collection.
 

src/cards/navigation/navigation-card-instance.ts

@@ -8,17 +8,14 @@ export class NavigationCardInstance {
 
 	private _loaded: boolean;
 	private _viewerCollection;
-	private _queuePointer;
 
 	constructor(loggerFactory, card) {
 		this._loaded = false;
 
 		this._logger = loggerFactory.create("NavigationCardInstance")
 		this._card = card;
 		this._viewerCollection = card.parameters[0];
-		this._queuePointer = this._viewerCollection.queuePointer;
 
-		this._registerQueuePointerEventHandlers(this._queuePointer);
 		this._registerViewerCollectionEventHandlers();
 	}
 
@@ -62,34 +59,24 @@ export class NavigationCardInstance {
 	}
 
 	private _registerViewerCollectionEventHandlers(): void {
-		this._viewerCollection.on("queuepointerchanged", this._handleQueuePointerChanged);
-	}
-
-	private _registerQueuePointerEventHandlers(queuePointer): void {
-		queuePointer.on("updated", this._handleQueuePointerUpdate);
-	}
-
-	private _unregisterQueuePointerEventHandlers(queuePointer): void {
-		queuePointer.off("updated", this._handleQueuePointerUpdate);
+		this._viewerCollection.on("contentchanged", this._handleContentChanged);
 	}
 
 	//#region Event Handlers
 
-	private _handleQueuePointerUpdate = (event) => {
-		const artifactId = this._getDocumentArtifactId();
-		this._updateDocumentArtifactId(artifactId);
-	};
-
-	private _handleQueuePointerChanged = (event) => {
-		this._unregisterQueuePointerEventHandlers(event.oldPointer);
-		this._registerQueuePointerEventHandlers(event.newPointer);
-		this._queuePointer = event.newPointer;
+	private _handleContentChanged = (event) => {
+		if (event.contentType === "queueitem")
+		{
+			const artifactId = this._getDocumentArtifactId();
+			this._updateDocumentArtifactId(artifactId);
+		}
+		this._updateDocumentArtifactIdElement("No queue item displayed");
 	};
 
 	//#endregion
 
 	private _getDocumentArtifactId(): number {
-		const queueItem = this._queuePointer.item;
+		const queueItem = this._viewerCollection.queuePointer.item;
 		if (queueItem && queueItem.type === "document") {
 			return queueItem.artifactId;
 		} else {
@@ -99,20 +86,25 @@ export class NavigationCardInstance {
 
 	private _wireUpButtons(): void {
 		document.getElementById(Constants.Navigation.NEXT_BTN_ID).addEventListener("click", () => {
-			this._queuePointer.navigateToNext();
+			this._viewerCollection.queuePointer.navigateToNext();
 		});
 		document.getElementById(Constants.Navigation.PREVIOUS_BTN_ID).addEventListener("click", () => {
-			this._queuePointer.navigateToPrevious();
+			this._viewerCollection.queuePointer.navigateToPrevious();
 		});
 	}
 
-	private _updateDocumentArtifactId(artifactId): void {
+	private _updateDocumentArtifactId(artifactId: number): void {
 		if (!this._loaded) {
 			return;
 		}
 
 		const artifactIdString = artifactId > 0 ? artifactId.toString() : "";
+		this._updateDocumentArtifactIdElement(artifactIdString);
+	}
+
+	private _updateDocumentArtifactIdElement(message: string)
+	{
 		const element = document.getElementById(Constants.Navigation.DOCUMENT_ARTIFACT_ID_ELEMENT_ID);
-		element.innerHTML = artifactIdString;
+		element.innerHTML = message;
 	}
 }