fix menu slide states

This commit is contained in:
Kevin Ngo
2018-10-16 21:28:27 -07:00
parent e195b9f2f2
commit 1fb48a29ab
2 changed files with 18 additions and 12 deletions

View File

@@ -5,34 +5,40 @@ AFRAME.registerComponent('menu-slide-animation', {
},
init: function () {
this.isOpen = false; // Means toleft.
this.isLeft = false; // Means toleft.
},
update: function (oldData) {
const data = this.data;
if (this.isOpen) {
if (this.isLeft) {
// Unselect.
if (oldData.menuSelectedChallengeId && !data.menuSelectedChallengeId) { this.closeMenu(); }
if (oldData.menuSelectedChallengeId && !data.menuSelectedChallengeId &&
!data.isSearching) { this.rightMenu(); }
// Keyboard close.
if (oldData.isSearching && !data.isSearching) { this.closeMenu(); }
if (oldData.isSearching && !data.isSearching && !data.menuSelectedChallengeId) {
this.rightMenu();
}
return;
}
if (!this.isOpen) {
if (!this.isLeft) {
// Select.
if (!oldData.menuSelectedChallengeId && data.menuSelectedChallengeId) { this.openMenu(); }
if (!oldData.menuSelectedChallengeId && data.menuSelectedChallengeId) { this.leftMenu(); }
// Keyboard open.
if (!oldData.isSearching && data.isSearching) { this.openMenu(); }
if (!oldData.isSearching && data.isSearching) { this.leftMenu(); }
}
},
closeMenu: function () {
rightMenu: function () {
if (!this.isLeft) { return; }
this.el.components.animation__menuright.beginAnimation();
this.isOpen = false;
this.isLeft = false;
},
openMenu: function () {
leftMenu: function () {
if (this.isLeft) { return; }
this.el.components.animation__menuleft.beginAnimation();
this.isOpen = true;
this.isLeft = true;
}
});

View File

@@ -114,7 +114,7 @@
class="menuAnimation"
bind__menu-slide-animation="isSearching: isSearching; menuSelectedChallengeId: menuSelectedChallenge.id"
animation__menuleft="property: object3D.position.x; to: -0.59; dur: 200; easing: easeOutCubic; autoplay: false"
animation__menuright="property: object3D.position.x; to: 0; dur: 200; easing: easeOutCubic; autoplay: false">
animation__menuright="property: object3D.position.x; from: -0.59; to: 0; dur: 200; easing: easeOutCubic; autoplay: false">
<a-entity id="divisorA"
position="0.566 0 -0.0025"