foster/liabru-matter-js
0
0
Fork 0
mirror of https://github.com/liabru/matter-js.git synced 2024-11-23 09:26:51 -05:00
Code Issues Wiki Activity

added arrow key navigation of examples in development demo

Browse source
This commit is contained in:
liabru 2023-08-13 12:17:40 +01:00
parent da99acbf71
commit 45cad777f6
1 changed files with 22 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
demo/src/Demo.js
View file

@ -41,8 +41,10 @@ var demo = function(examples, isDev) {
document.title = 'Matter.js Demo' + (isDev ? ' ・ Dev' : ''); document.title = 'Matter.js Demo' + (isDev ? ' ・ Dev' : '');
if (isDev) { if (isDev) {
var buttonSource = demo.dom.buttonSource; // add compare button
var buttonCompare = buttonSource.cloneNode(true); var buttonSource = demo.dom.buttonSource,
buttonCompare = buttonSource.cloneNode(true);
buttonCompare.textContent = '⎄'; buttonCompare.textContent = '⎄';
buttonCompare.title = 'Compare'; buttonCompare.title = 'Compare';
buttonCompare.href = '?compare'; buttonCompare.href = '?compare';
@ -52,11 +54,29 @@ var demo = function(examples, isDev) {
window.location = '?compare#' + demo.example.id; window.location = '?compare#' + demo.example.id;
event.preventDefault(); event.preventDefault();
}); });
buttonSource.parentNode.insertBefore(buttonCompare, buttonSource.nextSibling); buttonSource.parentNode.insertBefore(buttonCompare, buttonSource.nextSibling);
// always show debug info
Matter.before('Render.create', function(renderOptions) { Matter.before('Render.create', function(renderOptions) {
renderOptions.options.showDebug = true; renderOptions.options.showDebug = true;
}); });
// arrow key navigation of examples
document.addEventListener('keyup', function(event) {
var isBackKey = event.key === 'ArrowLeft' || event.key === 'ArrowUp',
isForwardKey = event.key === 'ArrowRight' || event.key === 'ArrowDown';
if (isBackKey || isForwardKey) {
var direction = isBackKey ? -1 : 1,
currentExampleIndex = demo.examples.findIndex(function(example) {
return example.id === demo.example.id;
}),
nextExample = demo.examples[(demo.examples.length + currentExampleIndex + direction) % demo.examples.length];
MatterTools.Demo.setExample(demo, nextExample);
}
});
} }
MatterTools.Demo.start(demo); MatterTools.Demo.start(demo);