From 2720de029492755ed5b588fa8b80c8fd9d1d0797 Mon Sep 17 00:00:00 2001 From: Kevin Ngo Date: Tue, 2 Oct 2018 17:42:12 -0700 Subject: [PATCH] starting on menu-controls --- package-lock.json | 27 +++++++ package.json | 1 + src/components/menu-controls.js | 133 ++++++++++++++++++++++++++++++++ src/index.html | 4 +- src/index.js | 1 + 5 files changed, 165 insertions(+), 1 deletion(-) create mode 100644 src/components/menu-controls.js diff --git a/package-lock.json b/package-lock.json index d02125e..aa21c23 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,16 @@ "resolved": "https://registry.npmjs.org/@tweenjs/tween.js/-/tween.js-16.11.0.tgz", "integrity": "sha1-bnqKPWx4oFfs1WBQh5MEBtTgWAA=" }, + "@types/estree": { + "version": "0.0.39", + "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz", + "integrity": "sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==" + }, + "@types/node": { + "version": "10.11.3", + "resolved": "https://registry.npmjs.org/@types/node/-/node-10.11.3.tgz", + "integrity": "sha512-3AvcEJAh9EMatxs+OxAlvAEs7OTy6AG94mcH1iqyVDwVVndekLxzwkWQ/Z4SDbY6GO2oyUXyWW8tQ4rENSSQVQ==" + }, "a-sync-waterfall": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/a-sync-waterfall/-/a-sync-waterfall-1.0.0.tgz", @@ -193,6 +203,14 @@ } } }, + "aframe-thumb-controls-component": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/aframe-thumb-controls-component/-/aframe-thumb-controls-component-1.1.0.tgz", + "integrity": "sha512-qm66UizRn3y7REMtP4EFyI8X7GJlIAicQqSShCC/1pukMtWQ3tknQzFXYqN2unst7Lr0GG+MnYg5mE6BsRacyg==", + "requires": { + "rollup": "^0.59.1" + } + }, "agentkeepalive": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/agentkeepalive/-/agentkeepalive-2.2.0.tgz", @@ -9003,6 +9021,15 @@ "inherits": "^2.0.1" } }, + "rollup": { + "version": "0.59.4", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-0.59.4.tgz", + "integrity": "sha512-ISiMqq/aJa+57QxX2MRcvLESHdJ7wSavmr6U1euMr+6UgFe6KM+3QANrYy8LQofwhTC1I7BcAdlLnDiaODs1BA==", + "requires": { + "@types/estree": "0.0.39", + "@types/node": "*" + } + }, "run-async": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/run-async/-/run-async-0.1.0.tgz", diff --git a/package.json b/package.json index efadcdc..63013ad 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ "aframe-slice9-component": "^1.0.0", "aframe-state-component": "^5.0.0-beta6", "aframe-super-keyboard": "2.0.2", + "aframe-thumb-controls-component": "^1.1.0", "algoliasearch": "^3.29.0", "ansi-html": "0.0.7", "autoprefixer": "^7.2.3", diff --git a/src/components/menu-controls.js b/src/components/menu-controls.js new file mode 100644 index 0000000..8e6cb0f --- /dev/null +++ b/src/components/menu-controls.js @@ -0,0 +1,133 @@ +var hoveredIndex = undefined; +var keyEventsRegistered = false; +var results = null; + +const PER_PAGE = 6; + +/** + * Use menu with thumb. + */ +AFRAME.registerComponent('menu-controls', { + schema: { + enabled: {default: true}, + page: {default: 0}, + selectedChallengeId: {default: ''} + }, + + init: function () { + const data = this.data; + const el = this.el; + + results = document.getElementById('searchResultList').children; + + this.goPrevResult = this.goPrevResult.bind(this); + this.goNextResult = this.goNextResult.bind(this); + this.select = this.select.bind(this); + this.unselect = this.unselect.bind(this); + + el.addEventListener('thumbupstart', this.goPrevResult); + el.addEventListener('thumbdownstart', this.goNextResult); + el.addEventListener('thumbleftstart', this.unselect); + el.addEventListener('thumbrightstart', this.select); + + // When raycaster becomes active again, cancel. + el.addEventListener('mouseenter', evt => { + if (!el.components.cursor.intersectedEl) { return; } + if (el.components.cursor.intersectedEl.closest('#searchResultList')) { + this.cancelMenuControls(); + } + }); + + if (AFRAME.utils.getUrlParameter('debug') && !keyEventsRegistered) { + window.addEventListener('keydown', evt => { + if (evt.keyCode === 37) { this.unselect(); } + if (evt.keyCode === 38) { this.goPrevResult(); } + if (evt.keyCode === 39) { this.select(); } + if (evt.keyCode === 40) { this.goNextResult(); } + }); + keyEventsRegistered = true; + } + }, + + goPrevResult: function () { + if (!this.data.enabled) { return; } + + if (hoveredIndex === undefined) { + this.hoverResult(0); + return; + } + if (hoveredIndex > 0) { + if (results[hoveredIndex - 1].dataset.id === this.data.selectedChallengeId) { + if (hoveredIndex - 2 < 0) { + this.goPrevPage(); + } else { + this.hoverResult(hoveredIndex - 2); + } + } else { + this.hoverResult(hoveredIndex - 1); + } + } else { + this.goPrevPage(); + } + }, + + goPrevPage: function () { + this.hoverResult(PER_PAGE - 1); + this.el.sceneEl.emit('searchprevpage', null, false); + }, + + goNextResult: function () { + if (!this.data.enabled) { return; } + + if (hoveredIndex === undefined) { + this.hoverResult(0); + return; + } + if (hoveredIndex < PER_PAGE - 1) { + if (results[hoveredIndex + 1].dataset.id === this.data.selectedChallengeId) { + if (hoveredIndex + 2 > PER_PAGE - 1) { + this.goNextPage(); + } else { + this.hoverResult(hoveredIndex + 2); + } + } else { + this.hoverResult(hoveredIndex + 1); + } + } else { + this.goNextPage(); + } + }, + + goNextPage: function () { + this.hoverResult(0); + this.el.sceneEl.emit('searchnextpage', null, false); + }, + + select: function () { + if (!this.data.enabled) { return; } + if (hoveredIndex === undefined) { return; } + this.el.sceneEl.emit('menuchallengeselect', results[hoveredIndex].dataset.id, false); + }, + + unselect: function () { + if (!this.data.enabled) { return; } + this.el.sceneEl.emit('menuunselect', null, false); + }, + + hoverResult: function (i) { + if (hoveredIndex !== undefined) { + results[hoveredIndex].querySelector('.searchResultBackground') + .emit('mouseleave', null, false); + } + hoveredIndex = i; + results[i].querySelector('.searchResultBackground') + .emit('mouseenter', null, false); + }, + + cancelMenuControls: function () { + if (hoveredIndex === undefined) { return; } + results[hoveredIndex].querySelector('.searchResultBackground') + .emit('mouseleave', null, false); + hoveredIndex = undefined; + } +}); diff --git a/src/index.html b/src/index.html index 551de6e..6c61832 100644 --- a/src/index.html +++ b/src/index.html @@ -107,14 +107,16 @@ -