Improve and expand annotation selection methods

Signed-off-by: Justin Georgi <justin.georgi@gmail.com>

modules/glmv.js

@@ -55,19 +55,11 @@ clickAddHotspot = function(e) {
  * @param {PointerEvent} e 
  */
 onAnnotation = function(e) {
-	e.stopPropagation();
+	e.stopPropagation()
-	let targetAnnotation = e.target.slot.split('-')[1];
+	let targetAnnotation = Number.parseInt(e.target.slot.split('-')[1])
-	let targetModel = e.target.closest('model-viewer');
+	let targetModel = e.target.closest('model-viewer')
-	[...targetModel.querySelectorAll('.HotspotAnnotation')].forEach( (an, idx) => {
+    selectAnnotation(targetModel, targetAnnotation)
-		if (idx + 1 == targetAnnotation && an.classList.contains('HiddenAnnotation')) {
+}
-			an.classList.remove('HiddenAnnotation');
-			if (an.parentElement.dataset.target) {targetModel.cameraTarget = an.parentElement.dataset.target}
-			if (an.parentElement.dataset.orbit) {targetModel.cameraOrbit = an.parentElement.dataset.orbit}
-		} else {
-			an.classList.add('HiddenAnnotation');
-		}
-	});
-};
 
 /**
  * Event listener callback to hide all hotspot
@@ -76,6 +68,88 @@ onAnnotation = function(e) {
  */
 clearAnnotations = function() {
 	[...document.getElementsByClassName('HotspotAnnotation')].forEach( an => {
-		an.classList.add('HiddenAnnotation');
+		an.classList.add('HiddenAnnotation')
-	});
+	})
 };
+
+/**
+ * Select the numbered hotspot of the given model
+ * 
+ * @param {ModelViewer} mView
+ * @param {number} annotId
+ * 
+ * @return {bool} true if annotation selected false if unselected
+ */
+selectAnnotation = function(mView, annotId) {
+    let anSelected = false;
+    [...mView.querySelectorAll('.HotspotAnnotation')].forEach( (an, idx) => {
+		if (idx + 1 == annotId && an.classList.contains('HiddenAnnotation')) {
+			an.classList.remove('HiddenAnnotation');
+			if (an.parentElement.dataset.target) {mView.cameraTarget = an.parentElement.dataset.target}
+			if (an.parentElement.dataset.orbit) {mView.cameraOrbit = an.parentElement.dataset.orbit}
+            anSelected = true
+		} else {
+			an.classList.add('HiddenAnnotation');
+		}        
+	});
+    return anSelected
+}
+
+/**
+ * Select the next numbered hotspot
+ * 
+ * @param {ModelViewer} mView
+ * 
+ * @return {number} ID number of the newly selected hotspot
+ */
+nextAnnotation = function(mView) {
+    let incrAnnotation = 0
+    const numSpots = [...mView.querySelectorAll('Button')].length
+    const currentAnnotation = mView.querySelectorAll('Button:has(.HotspotAnnotation:not(.HiddenAnnotation))')[0]
+    if (!currentAnnotation) {
+        incrAnnotation = 1
+    } else {
+        const annotationId = Number.parseInt(currentAnnotation.slot.split('-')[1])
+        incrAnnotation = (annotationId >= numSpots)
+            ? 1
+            : annotationId + 1
+    }
+    selectAnnotation(mView, incrAnnotation)
+    return incrAnnotation
+}
+
+/**
+ * Select the previous numbered hotspot
+ * 
+ * @param {ModelViewer} mView
+ * 
+ * @return {number} ID number of the newly selected hotspot
+ */
+prevAnnotation = function(mView) {
+    let decrAnnotation = 0
+    const numSpots = [...mView.querySelectorAll('Button')].length
+    const currentAnnotation = mView.querySelectorAll('Button:has(.HotspotAnnotation:not(.HiddenAnnotation))')[0]
+    if (!currentAnnotation) {
+        decrAnnotation = numSpots
+    } else {
+        const annotationId = Number.parseInt(currentAnnotation.slot.split('-')[1])
+        decrAnnotation = (annotationId <= 1)
+            ? numSpots
+            : annotationId - 1
+    }
+    selectAnnotation(mView, decrAnnotation)
+    return decrAnnotation
+}
+
+/**
+ * Cycle through the available annotations
+ * 
+ * @param {ModelViewer} mView
+ * 
+ * @param {Number} [slideDuration = 5000]
+ * 
+ * @return {intervalID} ID of the created interval timer
+ */
+slideshowAnnotations = function(mView, slideDuration = 5000) {
+    return setInterval(nextAnnotation, slideDuration, mView)
+}