Starting implementing element.CPU.nextFocus() , very complex

Keys ↑ and ↓ mapped onto chapters, then on playlist #108
dascritch · Apr 2, 2021 · 8c03a7c · 8c03a7c
1 parent 47327d7
commit 8c03a7c
Show file tree

Hide file tree

Showing 2 changed files with 90 additions and 9 deletions.
diff --git a/src/element_cpu.js b/src/element_cpu.js
@@ -1,4 +1,4 @@
-import {CpuControllerTagName, findContainer, selectorAudioInComponent, querySelectorDo, absolutizeUrl, error, escapeHtml, passiveEvent} from './utils.js';
+import {adjacentArrayValue, CpuControllerTagName, findContainer, selectorAudioInComponent, querySelectorDo, absolutizeUrl, error, escapeHtml, passiveEvent} from './utils.js';
 import {__} from './i18n.js';
 import {defaultDataset} from './default_dataset.js';
 import {secondsInColonTime, secondsInTime, durationIso} from './convert.js';
@@ -33,7 +33,10 @@ export const planePointNamesFromId = /^[a-zA-Z0-9\-_]+_«([a-zA-Z0-9\-_]+)(»_.*
  * @return     {Array<string>}    An array with two strings : plane name and point name, both can be null. 
  */
 export function planeAndPointNamesFromId(element_id) {
-	const [,planeName, , pointName] = element_id?.match(planePointNamesFromId) || [];
+	let  planeName, pointName;
+	if (typeof element_id == 'string') {
+		[, planeName, , pointName] = element_id?.match(planePointNamesFromId) || [];
+	}
 	return [planeName??'', pointName??''];
 }
 
@@ -1506,16 +1509,64 @@ export class CPU_element_api {
 
 	/// TODO  TDD
 	nextFocus() {
-		/*
 		const planeNames = this.planeNames();
-		if (!planeNames) {
+		if (planeNames.length == 0) {
 			// no planes no gain, as we say in airports
 			return;
 		}
-		const wasFocused = this.focusedId();
-		if ( (!wasFocused) || ( (!wasFocused.closest('aside') && (!wasFocused.closest('.panel') ) ))) {
-			this.focusPoint(planeNames[0]);
-		}*/
+
+		const scanToNextPlane = (fromPlane) => {
+			for( let id = planeNames.indexOf(fromPlane) ; id < planeNames.length ; id++ ) {
+				let out = planeNames[id];
+				let {track, panel, points} = this.plane(out);
+				if (((track !== false) || (panel !== false)) && (points.length > 0)) {
+					return out;
+				}
+			}
+		};
+
+		let previous_pointName, planeName, pointName, planePointNames;
+		let wasFocused = this.focused();
+		if (wasFocused) {
+			if (!wasFocused.id) {
+				wasFocused = wasFocused.closest('[id]');
+			}
+			[planeName,previous_pointName] = planeAndPointNamesFromId(wasFocused.id);
+		}
+		if (!planeName) {
+			// TODO check we have a focus-qualifiable plane 
+			planeName = scanToNextPlane();
+			if (!planeName) {
+				return;
+			}
+			pointName = this.planePointNames(planeName)[0];
+		}
+
+		if (previous_pointName) {
+			planePointNames = this.planePointNames(planeName);
+			pointName = adjacentArrayValue(planePointNames, previous_pointName, 1);
+			if (!pointName) {
+				planeName = scanToNextPlane(planeName);
+				if (!planeName) {
+					return;
+				}
+				pointName = this.planePointNames(planeName)[0];
+			}
+		} else {
+			pointName = this.planePointNames(planeName)[0]
+		}
+
+		if (pointName) {
+			this.focusPoint(planeName, pointName);
+		}
+
+		//if ( (!wasFocused) || ( (!wasFocused.closest('aside') && (!wasFocused.closest('.panel') ) ))) {
+		//	planeName = planeNames[0];
+		//	console.log('at default'  ,planeName, this.planePointNames(planeName)[0] , pointName)
+		//	this.focusPoint(planeName, this.planePointNames(planeName)[0]);
+		//}
+
+
 
 /*
 		// we need to separate cues (which relly on chapters) and keys ↑ and ↓ , why is about focus between panels

diff --git a/tests/tests-interface.js b/tests/tests-interface.js
@@ -767,6 +767,36 @@ document.querySelector('#get_focus').addEventListener('click', function() {
 		assert.ok(!componenttag.shadowRoot.querySelector('style#style_injection'), 'removeCss destroyed <style>');
 	});
 
-	playground.innerHTML = `<p><strong>Finished<strong></p>`;
+	QUnit.test( "element.CPU.nextFocus()", function( assert ) {
+		const points = {
+			a : { text : 'a' },
+			b : { text : 'b' }
+		};
+
+		componenttag.CPU.shadowId('control').focus();
+		componenttag.CPU.nextFocus();
+		assert.equal(componenttag.CPU.focusedId(), 'control', 'nextFocus() without existing planes do not move');
+
+		componenttag.CPU.addPlane('plane1', {track:false, panel:true});
+		componenttag.CPU.bulkPoints('plane1', points);
+		componenttag.CPU.addPlane('plane2', {track:true, panel:true});
+		componenttag.CPU.bulkPoints('plane2', points);
+		componenttag.CPU.addPlane('plane3', {track:true, panel:true});
+		componenttag.CPU.addPlane('plane4', {track:false, panel:false});
+		componenttag.CPU.bulkPoints('plane4', points);
+		componenttag.CPU.addPlane('plane5', {track:true, panel:false});
+		componenttag.CPU.bulkPoints('plane5', points);
+		componenttag.CPU.nextFocus();
+		assert.equal(componenttag.CPU.focused().closest('[id]').id, 'panel_«plane1»_point_«a»', 'nextFocus() with no plane yet focused take the first point of the first listed plane');
+		componenttag.CPU.nextFocus();
+		assert.equal(componenttag.CPU.focused().closest('[id]').id, 'panel_«plane1»_point_«b»', 'nextFocus() within a plane will focus the next point in the same plane');
+		componenttag.CPU.nextFocus();
+		assert.equal(componenttag.CPU.focused().closest('[id]').id, 'panel_«plane2»_point_«a»', 'nextFocus() and the end of a plane take the first point of the next plane');
+
+		componenttag.CPU.removePlane('plane1');
+		componenttag.CPU.removePlane('plane2');
+		componenttag.CPU.removePlane('plane3');
+		componenttag.CPU.removePlane('plane4');
+	});	
 
 });