diff --git a/src/002-config/mousetrapConfig.js b/src/002-config/mousetrapConfig.js index 48b236a9b47a11481cba0ff54447ac3ff8ce5df5..da2641fb38a03b0b3aae3041456e9e0b7a941f50 100644 --- a/src/002-config/mousetrapConfig.js +++ b/src/002-config/mousetrapConfig.js @@ -294,6 +294,16 @@ App.UI.Hotkeys.add("next-child", { $("#next-child a.macro-link").trigger("click"); }, combinations: ["right", "e"], uiName: "Next Child" }); +App.UI.Hotkeys.add("Previous Tab", { + callback: function() { + App.UI.tabBar.openLeftTab(); + }, combinations: [] +}); +App.UI.Hotkeys.add("Next Tab", { + callback: function() { + App.UI.tabBar.openRightTab(); + }, combinations: [] +}); App.UI.Hotkeys.add("walkpast", { callback: function() { $("#walkpast a.macro-link").trigger("click"); diff --git a/src/js/utilsSC.js b/src/js/utilsSC.js index aadcaa3f2604ae68b35c074d4c9bcd07c8d508f9..ecf2ec5c071aeb43f860dc4716c63abcee508d4e 100644 --- a/src/js/utilsSC.js +++ b/src/js/utilsSC.js @@ -14,7 +14,8 @@ globalThis.html5passage = function(passageFunction) { }; /** - * If you want to include a SugarCube passage in a JS function use this. The result must be printed using the <<print>> macro. + * If you want to include a SugarCube passage in a JS function use this. The result must be printed using the <<print>> + * macro. * @param {string} passageTitle * @returns {string} */ @@ -120,7 +121,9 @@ App.UI.tabBar = function() { tabButton: tabButton, makeTab: makeTab, handlePreSelectedTab: handlePreSelectedTab, - tabChoiceVarName: tabChoiceVarName + tabChoiceVarName: tabChoiceVarName, + openLeftTab: openLeft, + openRightTab: openRight }; function openTab(evt, tabName) { @@ -209,11 +212,29 @@ App.UI.tabBar = function() { } function openLeft() { - + const tabLinks = /** @type {HTMLCollection<HTMLButtonElement>} */ document.getElementsByClassName("tab-links"); + const index = currentIndex(tabLinks); + if (index - 1 >= 0) { + tabLinks[index - 1].click(); + } } function openRight() { + const tabLinks = /** @type {HTMLCollection<HTMLButtonElement>} */ document.getElementsByClassName("tab-links"); + const index = currentIndex(tabLinks); + if (index > -1 && index + 1 < tabLinks.length) { + tabLinks[index + 1].click(); + } + } + function currentIndex(collection) { + // get current tab button + for (let i = 0; i < collection.length; i++) { + if (collection[i].classList.contains("active")) { + return i; + } + } + return -1; } }();