mirror of
https://github.com/hodgef/simple-keyboard.git
synced 2025-03-16 16:43:46 +08:00
Merge pull request #287 from Entkenntnis/master
Visual feedback on mobile&desktop
This commit is contained in:
commit
315ddc3892
@ -69,6 +69,11 @@ html {
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.simple-keyboard.hg-theme-default .hg-button.hg-activeButton {
|
||||||
|
background: #efefef;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* When using option "useButtonTag" */
|
/* When using option "useButtonTag" */
|
||||||
|
@ -1176,6 +1176,8 @@ class SimpleKeyboard {
|
|||||||
buttonDOM.setAttribute(attribute, value);
|
buttonDOM.setAttribute(attribute, value);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const hgActiveButtonClass = "hg-activeButton";
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Handle button click event
|
* Handle button click event
|
||||||
*/
|
*/
|
||||||
@ -1189,11 +1191,18 @@ class SimpleKeyboard {
|
|||||||
* Handle PointerEvents
|
* Handle PointerEvents
|
||||||
*/
|
*/
|
||||||
buttonDOM.onpointerdown = e => {
|
buttonDOM.onpointerdown = e => {
|
||||||
|
buttonDOM.classList.add(hgActiveButtonClass);
|
||||||
this.handleButtonClicked(button);
|
this.handleButtonClicked(button);
|
||||||
this.handleButtonMouseDown(button, e);
|
this.handleButtonMouseDown(button, e);
|
||||||
};
|
};
|
||||||
buttonDOM.onpointerup = () => this.handleButtonMouseUp(button);
|
buttonDOM.onpointerup = () => {
|
||||||
buttonDOM.onpointercancel = () => this.handleButtonMouseUp(button);
|
buttonDOM.classList.remove(hgActiveButtonClass);
|
||||||
|
this.handleButtonMouseUp(button);
|
||||||
|
};
|
||||||
|
buttonDOM.onpointercancel = () => {
|
||||||
|
buttonDOM.classList.remove(hgActiveButtonClass);
|
||||||
|
this.handleButtonMouseUp(button);
|
||||||
|
};
|
||||||
} else {
|
} else {
|
||||||
/**
|
/**
|
||||||
* Fallback for browsers not supporting PointerEvents
|
* Fallback for browsers not supporting PointerEvents
|
||||||
@ -1203,11 +1212,18 @@ class SimpleKeyboard {
|
|||||||
* Handle touch events
|
* Handle touch events
|
||||||
*/
|
*/
|
||||||
buttonDOM.ontouchstart = e => {
|
buttonDOM.ontouchstart = e => {
|
||||||
|
buttonDOM.classList.add(hgActiveButtonClass);
|
||||||
this.handleButtonClicked(button);
|
this.handleButtonClicked(button);
|
||||||
this.handleButtonMouseDown(button, e);
|
this.handleButtonMouseDown(button, e);
|
||||||
};
|
};
|
||||||
buttonDOM.ontouchend = () => this.handleButtonMouseUp(button);
|
buttonDOM.ontouchend = () => {
|
||||||
buttonDOM.ontouchcancel = () => this.handleButtonMouseUp(button);
|
buttonDOM.classList.remove(hgActiveButtonClass);
|
||||||
|
this.handleButtonMouseUp(button);
|
||||||
|
};
|
||||||
|
buttonDOM.ontouchcancel = () => {
|
||||||
|
buttonDOM.classList.remove(hgActiveButtonClass);
|
||||||
|
this.handleButtonMouseUp(button);
|
||||||
|
};
|
||||||
} else {
|
} else {
|
||||||
/**
|
/**
|
||||||
* Handle mouse events
|
* Handle mouse events
|
||||||
@ -1216,8 +1232,14 @@ class SimpleKeyboard {
|
|||||||
this.isMouseHold = false;
|
this.isMouseHold = false;
|
||||||
this.handleButtonClicked(button);
|
this.handleButtonClicked(button);
|
||||||
};
|
};
|
||||||
buttonDOM.onmousedown = e => this.handleButtonMouseDown(button, e);
|
buttonDOM.onmousedown = e => {
|
||||||
buttonDOM.onmouseup = () => this.handleButtonMouseUp(button);
|
buttonDOM.classList.add(hgActiveButtonClass);
|
||||||
|
this.handleButtonMouseDown(button, e);
|
||||||
|
};
|
||||||
|
buttonDOM.onmouseup = () => {
|
||||||
|
buttonDOM.classList.remove(hgActiveButtonClass);
|
||||||
|
this.handleButtonMouseUp(button);
|
||||||
|
};
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user