Fakultas Ilmu Komputer UI

Commit 91d1d10a authored by Rachmat Ridwan's avatar Rachmat Ridwan
Browse files

Fix keyboard listener

parent 9eee9caf
......@@ -10,15 +10,15 @@ function initNavigableCamera() {
scrollInitial = scrollDetector.scrollTop;
scrollDetector.addEventListener('scroll', zoomCameraFromScrollDetector)
scrollDetector.addEventListener('mousedown', startTrackball)
scrollDetector.parentElement.addEventListener('mousedown', startTrackball)
document.addEventListener('mousemove', trackMouseForTrackball)
document.addEventListener('mouseup', stopTrackball)
scrollDetector.addEventListener('touchstart', startTrackballOnDevice)
scrollDetector.parentElement.addEventListener('touchstart', startTrackballOnDevice)
document.addEventListener('touchmove', trackMouseForTrackballOnDevice)
document.addEventListener('touchend', stopTrackballOnDevice)
scrollDetector.parentElement.addEventListener('keydown', processCanvasArrowKeydown)
canvas.parentElement.addEventListener('keydown', processCanvasArrowKeydown)
}
/**
......
......@@ -300,7 +300,7 @@ div#speed-slider {
display: none;
}
canvas:focus + * > #canvas-status {
.canvas-wrapper:focus + * > #canvas-status {
display: block;
}
......
......@@ -106,26 +106,36 @@ void main()
<body>
<div class="canvas-wrapper">
<div tabindex="1" class="canvas-wrapper">
<canvas id="gl-canvas">
Oops ... your browser doesn't support the HTML5 canvas element
</canvas>
<div id="screen-info">
<p id="canvas-status">Canvas aktif dipilih</p>
<div>Objek dipilih: <span id="selobj-hierarchy"><span>body</span><span>black-body</span></span></div>
</div>
<div tabindex="1" id="scroll-detector">
<div id="scroll-detector">
<div>
<div></div>
</div>
</div>
</div>
<div id="screen-info">
<p id="canvas-status">Canvas aktif dipilih</p>
<div>Objek dipilih: <span id="selobj-hierarchy"><span>body</span><span>black-body</span></span></div>
</div>
<div id="menu-toggler-wrapper" class="show-menu">
<button type="button" class="btn btn-primary" id="menu-toggler-button">
<span class="button-text">Tutup</span>
<img class="arrow" src="arrow.svg" />
</button>
<div class="menu">
<div class="submenu">
<h3 class="submenu-title">Bantuan</h3>
<div id="help-content">
<p>Tekan kanvas terlebih dahulu untuk melakukan perintah di bawah.
<br />Tekan <strong>panah keyboard</strong> untuk memindahkan posisi kamera.
<br />Tekan <strong>spasi</strong> untuk memulai/menghentikan animasi.
<br />Tekan dan <strong>tahan kanvas</strong> untuk memutar kamera.
</p>
</div>
</div>
<div class="submenu">
<h3 class="submenu-title">Tree Objek</h3>
<label class="note">Bantuan: untuk memilih objek, <strong>klik kanan</strong> (pada desktop)
......@@ -419,14 +429,6 @@ void main()
</div>
</div>
</div>
<div class="submenu">
<h3 class="submenu-title">Bantuan</h3>
<div id="help-content">
<p>Tekan <strong>panah keyboard</strong> untuk memindahkan posisi kamera.
<br />Tekan <strong>spasi</strong> untuk memulai/menghentikan animasi.
</p>
</div>
</div>
</div>
</div>
</body>
......
......@@ -454,8 +454,8 @@ window.addEventListener('load', function init() {
// Attach event listener handles
canvas.addEventListener('keydown', handleSpaceKeydown)
canvas.addEventListener('keyup', handleSpaceKeyup)
canvas.parentElement.addEventListener('keydown', handleSpaceKeydown)
canvas.parentElement.addEventListener('keyup', handleSpaceKeyup)
window.addEventListener('resize', adjustViewport)
document.querySelector('#menu-toggler-button').addEventListener('click', toggleMenu)
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment