Browse Source

Add access keys to all buttons

master
parent
commit
1e02acba85
5 changed files with 37 additions and 16 deletions
  1. +32
    -15
      src/MapDiscoverer.js
  2. +2
    -1
      src/ToggleButton.js
  3. +1
    -0
      src/Toolbox.js
  4. +1
    -0
      src/tools/PencilTool.js
  5. +1
    -0
      src/tools/RectangleTool.js

+ 32
- 15
src/MapDiscoverer.js View File

@@ -11,23 +11,14 @@ export class MapDiscoverer {
this.undoActions = [];
this.stateIndex = -1;

let ctx = this.canvasEl.getContext("2d"),
undoButton = this.createButton("Undo", "img/undo.png", () => {
if (this.stateIndex > 0) {
this.stateIndex--;
ctx.putImageData(this.undoActions[this.stateIndex], 0, 0);
}
}),
redoButton = this.createButton("Redo", "img/redo.png", () => {
if (this.stateIndex + 1 < this.undoActions.length) {
this.stateIndex++;
ctx.putImageData(this.undoActions[this.stateIndex], 0, 0);
}
});
this.toolbox = new Toolbox([PencilTool, RectangleTool]);
// Create buttons
let undoButton = this.createUndoButton(),
redoButton = this.createRedoButton();
this.opacityToggle = this.createOpacityToggleButton();
this.coverToggle = this.createCoverToggleButton();
this.toolbox = new Toolbox([PencilTool, RectangleTool]);

// Add buttons to the UI
toolsDiv.appendChild(this.opacityToggle.domElement);
toolsDiv.appendChild(this.coverToggle.domElement);
toolsDiv.appendChild(undoButton);
@@ -36,12 +27,36 @@ export class MapDiscoverer {

this.addCanvasHandlers(this.canvasEl);
this.addImageLoadHandler(this.mapImg);

this.loadImage("img/default-map.png");
}

createUndoButton() {
let ctx = this.canvasEl.getContext("2d");

return this.createButton("Undo", "img/undo.png", "z", () => {
if (this.stateIndex > 0) {
this.stateIndex--;
ctx.putImageData(this.undoActions[this.stateIndex], 0, 0);
}
});
}

createRedoButton() {
let ctx = this.canvasEl.getContext("2d");

return this.createButton("Redo", "img/redo.png", "y", () => {
if (this.stateIndex + 1 < this.undoActions.length) {
this.stateIndex++;
ctx.putImageData(this.undoActions[this.stateIndex], 0, 0);
}
});
}

createOpacityToggleButton() {
return new ToggleButton(["Toggle opacity", "Toggle opacity"],
"img/transparency.png",
"o",
() => {
this.canvasEl.style.opacity = "1";
},
@@ -56,6 +71,7 @@ export class MapDiscoverer {
return new ToggleButton(
["Uncover Mode", "Cover Mode"],
"img/eraser.png",
"c",
() => {
ctx.globalCompositeOperation = "source-over";
},
@@ -65,12 +81,13 @@ export class MapDiscoverer {
);
}

createButton(title, iconUrl, functionality) {
createButton(title, iconUrl, accessKey, functionality) {
let button = document.createElement("button"),
buttonImg = document.createElement("img");
buttonImg.src = iconUrl;
button.appendChild(buttonImg);
button.appendChild(document.createTextNode(" " + title));
button.accessKey = accessKey;
button.addEventListener("click", functionality);
return button;
}


+ 2
- 1
src/ToggleButton.js View File

@@ -1,5 +1,5 @@
export class ToggleButton {
constructor([titleDisabled, titleEnabled], imageUrl, enableF, disableF) {
constructor([titleDisabled, titleEnabled], imageUrl, accessKey, enableF, disableF) {
this.titleEnabled = titleEnabled;
this.titleDisabled = titleDisabled;
this.enableFunction = enableF;
@@ -9,6 +9,7 @@ export class ToggleButton {

let buttonImage = document.createElement("img");
buttonImage.src = imageUrl;
this.domElement.accessKey = accessKey;
this.domElement.dataset.enabled = "false";
this.domElement.appendChild(buttonImage);
this.domElement.appendChild(this.buttonText);


+ 1
- 0
src/Toolbox.js View File

@@ -33,6 +33,7 @@ export class Toolbox {
toolIconEl.src = "img/" + toolClass.img;
toolIconEl.alt = "";

buttonDomEl.accessKey = toolClass.accessKey;
buttonDomEl.appendChild(toolIconEl);
buttonDomEl.appendChild(document.createTextNode(" " + toolClass.title));
buttonDomEl.addEventListener("click", () => {


+ 1
- 0
src/tools/PencilTool.js View File

@@ -69,3 +69,4 @@ export class PencilTool {
}
PencilTool.title = "Pencil Tool";
PencilTool.img = "pencil.png";
PencilTool.accessKey = "p";

+ 1
- 0
src/tools/RectangleTool.js View File

@@ -52,3 +52,4 @@ export class RectangleTool {
}
RectangleTool.title = "Rectangle Tool";
RectangleTool.img = "rectangle.png";
RectangleTool.accessKey = "r";

Loading…
Cancel
Save