Merge branch '1424-after-last-tab-set-focus-on-button-save-and-new-card' into 'staging'

Resolve "After last tab set focus on button "Save and new card"."

Closes #1424

See merge request arsnova/flashcards!1735

imports/api/cardEditor.js

@@ -8,8 +8,89 @@ import {BertAlertVisuals} from "./bertAlertVisuals";
 
 const subjectMaxLength = 255;
 const contentMaxLength = 300000;
+let editorButtonIndex = 0;
+let editorButtons = [];
+let cardNavigationName = ".cardNavigation";
+let learningGoalLevelGroupName = '#learningGoalLevelGroup .active';
+let firstCardNavigationCall = false;
 
 export let CardEditor = class CardEditor {
+
+	static initializeEditorButtons () {
+		editorButtonIndex = 0;
+		editorButtons = [];
+		editorButtons.push('#subjectEditor');
+		if ($('#learningGoalLevelGroup').length) {
+			editorButtons.push(learningGoalLevelGroupName);
+		}
+		editorButtons.push(cardNavigationName);
+		editorButtons.push('#cardSave');
+		editorButtons.push('#cardSaveReturn');
+		editorButtons.push('#cardCancel');
+		this.setEditorButtonFocus();
+	}
+
+	static getEditorButtons () {
+		return editorButtons;
+	}
+
+	static getEditorButtonIndex () {
+		return editorButtonIndex;
+	}
+
+	static getCardNavigationName () {
+		return cardNavigationName;
+	}
+
+	static getLearningGoalLevelGroupName () {
+		return learningGoalLevelGroupName;
+	}
+
+	static setLearningGoalLevel (forward = true) {
+		let navigationLength = $('#learningGoalLevelGroup:first label').length;
+		let index = ($(".active").index("#learningGoalLevelGroup:first label")) + 1;
+		if (forward) {
+			if (index >= navigationLength) {
+				index = 1;
+			} else {
+				++index;
+			}
+		} else {
+			if (index <= 1) {
+				index = navigationLength;
+			} else {
+				--index;
+			}
+		}
+		--index;
+		$("#learningGoalLevel" + index).click();
+	}
+
+	static setEditorButtonIndex (index) {
+		editorButtonIndex = index;
+		this.setEditorButtonFocus();
+	}
+
+	static setEditorButtonFocus () {
+		if (editorButtons[editorButtonIndex] === cardNavigationName) {
+			if (firstCardNavigationCall) {
+				CardNavigation.setActiveNavigationButton(0);
+				firstCardNavigationCall = false;
+			}
+			CardNavigation.cardSideNavigation();
+		} else {
+			$(editorButtons[editorButtonIndex]).focus();
+			if (editorButtonIndex < (editorButtons.length - 1)) {
+				editorButtonIndex++;
+			} else {
+				editorButtonIndex = 0;
+			}
+			if (editorButtons[editorButtonIndex] === cardNavigationName) {
+				firstCardNavigationCall = true;
+			}
+		}
+	}
+
 	static getMaxTextLength (type) {
 		switch (type) {
 			case 1:

imports/api/cardNavigation.js

@@ -89,30 +89,41 @@ export let CardNavigation = class CardNavigation {
 	}
 
 	static getCardSideNavigationLength () {
-		return $(".cardNavigation a").length;
+		return $(".cardNavigation:first a").length;
 	}
 
 	static getCardSideNavigationIndex () {
-		return ($(".card-navigation-active").index(".cardNavigation a")) + 1;
+		return ($(".card-navigation-active").index(".cardNavigation:first a")) + 1;
 	}
 
 	static cardSideNavigation (forward = true) {
 		let navigationLength = this.getCardSideNavigationLength();
 		let index = this.getCardSideNavigationIndex();
+		let editorButtonIndex = CardEditor.getEditorButtons().indexOf(CardEditor.getCardNavigationName());
 		if (forward) {
 			if (index >= navigationLength) {
 				index = 1;
+				if (Route.isEditMode() && !CardVisuals.isFullscreen()) {
+					++editorButtonIndex;
+				}
 			} else {
 				++index;
 			}
 		} else {
 			if (index <= 1) {
 				index = navigationLength;
+				if (Route.isEditMode() && !CardVisuals.isFullscreen()) {
+					--editorButtonIndex;
+				}
 			} else {
 				--index;
 			}
 		}
-		this.selectButton(index);
+		if (CardEditor.getEditorButtons()[editorButtonIndex] !== CardEditor.getCardNavigationName() && Route.isEditMode() && !CardVisuals.isFullscreen()) {
+			CardEditor.setEditorButtonIndex(editorButtonIndex);
+		} else {
+			this.selectButton(index);
+		}
 	}
 
 	static switchCard (updateLearningMode = 0, answeredCard = 0, answer = 0) {
@@ -282,9 +293,12 @@ export let CardNavigation = class CardNavigation {
 		CardVisuals.toggleZoomContainer(true);
 		if (!$('#input-search').is(":focus") && !$('#lightbox').is(":visible") && keyEventsUnlocked) {
 			keyEventsUnlocked = false;
-			if (Route.isCardset() || Route.isBox() || Route.isMemo() || Route.isEditMode()) {
+			if (Route.isCardset() || Route.isBox() || Route.isMemo()) {
 				keyCodes = [9];
 			}
+			if (Route.isEditMode()) {
+				keyCodes = [9, 37, 39];
+			}
 			if (Route.isDemo()) {
 				keyCodes = [9, 32, 37, 38, 39, 40];
 			}
@@ -294,7 +308,11 @@ export let CardNavigation = class CardNavigation {
 			if (keyCodes.indexOf(event.keyCode) > -1) {
 				switch (event.keyCode) {
 					case 9:
-						CardNavigation.cardSideNavigation();
+						if (Route.isEditMode() && !CardVisuals.isFullscreen()) {
+							CardEditor.setEditorButtonFocus();
+						} else {
+							CardNavigation.cardSideNavigation();
+						}
 						break;
 					case 32:
 						if (CardNavigation.isVisible()) {
@@ -310,14 +328,20 @@ export let CardNavigation = class CardNavigation {
 						}
 						break;
 					case 37:
-						if (CardNavigation.isVisible()) {
-							if ($('#leftCarouselControl').click()) {
-								$('#showHintModal').modal('hide');
-								$('body').removeClass('modal-open');
-								$('.modal-backdrop').remove();
+						if (Route.isEditMode() && !CardVisuals.isFullscreen()) {
+							if (CardEditor.getEditorButtons()[CardEditor.getEditorButtonIndex() - 1] === CardEditor.getLearningGoalLevelGroupName()) {
+								CardEditor.setLearningGoalLevel(false);
 							}
-							if (Session.get('isQuestionSide')) {
-								CardNavigation.skipAnswer(false);
+						} else {
+							if (CardNavigation.isVisible()) {
+								if ($('#leftCarouselControl').click()) {
+									$('#showHintModal').modal('hide');
+									$('body').removeClass('modal-open');
+									$('.modal-backdrop').remove();
+								}
+								if (Session.get('isQuestionSide')) {
+									CardNavigation.skipAnswer(false);
+								}
 							}
 						}
 						break;
@@ -325,14 +349,20 @@ export let CardNavigation = class CardNavigation {
 						CardNavigation.scrollCardContent(false);
 						break;
 					case 39:
-						if (CardNavigation.isVisible()) {
-							if ($('#rightCarouselControl').click()) {
-								$('#showHintModal').modal('hide');
-								$('body').removeClass('modal-open');
-								$('.modal-backdrop').remove();
+						if (Route.isEditMode() && !CardVisuals.isFullscreen()) {
+							if (CardEditor.getEditorButtons()[CardEditor.getEditorButtonIndex() - 1] === CardEditor.getLearningGoalLevelGroupName()) {
+								CardEditor.setLearningGoalLevel();
 							}
-							if (Session.get('isQuestionSide')) {
-								CardNavigation.skipAnswer();
+						} else {
+							if (CardNavigation.isVisible()) {
+								if ($('#rightCarouselControl').click()) {
+									$('#showHintModal').modal('hide');
+									$('body').removeClass('modal-open');
+									$('.modal-backdrop').remove();
+								}
+								if (Session.get('isQuestionSide')) {
+									CardNavigation.skipAnswer();
+								}
 							}
 						}
 						break;

imports/startup/client/routes.js

 import {Cardsets} from "../../api/cardsets.js";
-import {Cards} from "../../api/cards.js";
 import {Leitner, Wozniak} from "../../api/learned";
 import {Meteor} from "meteor/meteor";
 import {Session} from "meteor/session";
 import {CardVisuals} from "../../api/cardVisuals.js";
 import {Route} from "../../api/route.js";
-import {CardEditor} from "../../api/cardEditor";
 import {Filter} from "../../api/filter";
 import {MarkdeepEditor} from "../../api/markdeepEditor";
 import {WebPushNotifications} from "../../api/webPushSubscriptions";
@@ -444,7 +442,6 @@ Router.route('/cardset/:_id/editcard/:card_id', {
 	},
 	data: function () {
 		Session.set('helpFilter', "cardEditor");
-		CardEditor.loadEditModeContent(Cards.findOne({_id: this.params.card_id}));
 	},
 	action: function () {
 		if (this.ready()) {

imports/ui/editor/cardEditor.js

@@ -8,7 +8,6 @@ import {Cardsets} from "../../api/cardsets";
 import {CardEditor} from "../../api/cardEditor.js";
 import {Route} from "../../api/route.js";
 
-
 /*
  * ############################################################################
  * selectLearningUnit
@@ -99,8 +98,12 @@ Template.subjectEditor.helpers({
 });
 
 Template.subjectEditor.events({
+	'click #subjectEditor': function () {
+		CardEditor.setEditorButtonIndex(0);
+	},
 	'input #subjectEditor': function () {
 		$('#subjectEditor').css('border', 0);
+		CardEditor.setEditorButtonIndex(0);
 		Session.set('subject', $('#subjectEditor').val());
 	},
 	'click .subjectEditorButton': function () {
@@ -130,6 +133,7 @@ Template.learningGoalLevel.helpers({
 
 Template.learningGoalLevel.events({
 	'click #learningGoalLevelGroup': function (event) {
+		CardEditor.setEditorButtonIndex(1);
 		Session.set('learningGoalLevel', Number($(event.target).data('lvl')));
 	}
 });

imports/ui/editor/editor.js

@@ -7,6 +7,7 @@ import {Cardsets} from "../../api/cardsets";
 import {CardEditor} from "../../api/cardEditor.js";
 import {CardVisuals} from "../../api/cardVisuals";
 import ResizeSensor from "../../../client/resize_sensor/ResizeSensor";
+import {Cards} from "../../api/cards";
 
 
 /*
@@ -49,6 +50,7 @@ Template.editor.onRendered(function () {
 	new ResizeSensor($('#preview'), function () {
 		CardVisuals.resizeFlashcard();
 	});
+	CardEditor.initializeEditorButtons();
 });
 
 /*
@@ -74,4 +76,5 @@ Template.editCard.onCreated(function () {
 	Session.set('difficultyColor', Cardsets.findOne({_id: Router.current().params._id}).difficulty);
 	Session.set('mobilePreview', 1);
 	Session.set('mobilePreviewRotated', 0);
+	CardEditor.loadEditModeContent(Cards.findOne({_id: Router.current().params.card_id}));
 });