Fix scope of key shortcuts

This commit is contained in:
Arne Keller 2021-03-04 23:15:59 +01:00
parent 709c061059
commit 37f5b64518
4 changed files with 37 additions and 15 deletions

View File

@ -0,0 +1,22 @@
document.onkeydown = handleKey;
function handleKey(e) {
if (e.target.tagName.toLowerCase() === "vaadin-text-field") {
return;
}
if (e.keyCode === 37) {
// left arrow
if (!e.ctrlKey) {
document.getElementById("previous-step").click();
} else {
document.getElementById("first-step").click();
}
} else if (e.keyCode === 39) {
// right arrow
if (!e.ctrlKey) {
document.getElementById("next-step").click();
} else {
document.getElementById("last-step").click();
}
}
}

View File

@ -1,8 +1,5 @@
package edu.kit.typicalc.view.content;
import com.vaadin.flow.component.Component;
import com.vaadin.flow.component.Key;
import com.vaadin.flow.component.KeyModifier;
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.icon.Icon;
import com.vaadin.flow.component.icon.VaadinIcon;
@ -15,31 +12,32 @@ public class ControlPanel extends HorizontalLayout {
public static final String ID = "control-panel";
private final Button firstStep;
public static final String FIRST_STEP_ID = "first-step";
private final Button lastStep;
public static final String LAST_STEP_ID = "last-step";
private final Button nextStep;
public static final String NEXT_STEP_ID = "next-step";
private final Button previousStep;
public static final String PREVIOUS_STEP_ID = "previous-step";
private final Button share;
/**
* Sets up buttons with click-listeners that call the corresponding method in the view.
*
* @param view the view that reacts to the button clicks
* @param focusArea the component key shortcuts should work in
* @param view the view that reacts to the button clicks
*/
public ControlPanel(ControlPanelView view, Component focusArea) {
public ControlPanel(ControlPanelView view) {
setId(ID);
firstStep = new Button(new Icon(VaadinIcon.ANGLE_DOUBLE_LEFT), evt -> view.firstStepButton());
firstStep.setId(FIRST_STEP_ID);
lastStep = new Button(new Icon(VaadinIcon.ANGLE_DOUBLE_RIGHT), evt -> view.lastStepButton());
lastStep.setId(LAST_STEP_ID);
nextStep = new Button(new Icon(VaadinIcon.ANGLE_RIGHT), evt -> view.nextStepButton());
nextStep.setId(NEXT_STEP_ID);
previousStep = new Button(new Icon(VaadinIcon.ANGLE_LEFT), evt -> view.previousStepButton());
previousStep.setId(PREVIOUS_STEP_ID);
share = new Button(new Icon(VaadinIcon.CONNECT), evt -> view.shareButton());
// todo change shortcut scope
firstStep.addClickShortcut(Key.ARROW_LEFT, KeyModifier.CONTROL).listenOn(focusArea);
lastStep.addClickShortcut(Key.ARROW_RIGHT, KeyModifier.CONTROL).listenOn(focusArea);
nextStep.addClickShortcut(Key.ARROW_RIGHT).listenOn(focusArea);
previousStep.addClickShortcut(Key.ARROW_LEFT).listenOn(focusArea);
add(share, firstStep, previousStep, nextStep, lastStep);
}

View File

@ -53,7 +53,7 @@ public class StartPageView extends VerticalLayout implements ControlPanelView, L
* Fills the view with content.
*/
public StartPageView() {
ControlPanel controlPanel = new ControlPanel(this, this);
ControlPanel controlPanel = new ControlPanel(this);
controlPanel.setId(CONTROL_PANEL_ID);
controlPanel.setEnabledShareButton(false);

View File

@ -4,6 +4,7 @@ import com.vaadin.flow.component.AttachEvent;
import com.vaadin.flow.component.ComponentEventListener;
import com.vaadin.flow.component.UI;
import com.vaadin.flow.component.dependency.CssImport;
import com.vaadin.flow.component.dependency.JavaScript;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.orderedlayout.Scroller;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
@ -23,6 +24,7 @@ import java.util.Locale;
* {@link TypeInfererInterface} and MathJax to render the LaTeX to the user.
*/
@CssImport("./styles/view/type-inference.css")
@JavaScript("./src/key-shortcuts.js")
public class TypeInferenceView extends VerticalLayout
implements ControlPanelView, ComponentEventListener<AttachEvent> {
/**
@ -42,7 +44,7 @@ public class TypeInferenceView extends VerticalLayout
private MathjaxProofTree tree;
private final transient LatexCreator lc;
private final Div content;
private ControlPanel controlPanel;
private final ControlPanel controlPanel;
/**
* Initializes the component. When initialization is complete, the first step of the type
@ -59,7 +61,7 @@ public class TypeInferenceView extends VerticalLayout
error -> getTranslation("root." + error.toString().toLowerCase(Locale.ENGLISH)));
content = new Div();
content.setId(CONTENT_ID);
controlPanel = new ControlPanel(this, this);
controlPanel = new ControlPanel(this);
Scroller scroller = new Scroller(content);
scroller.setId(SCROLLER_ID);
scroller.setScrollDirection(Scroller.ScrollDirection.BOTH);