juni/junisaber
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

highlight active options in menu

Browse Source
This commit is contained in:
Kevin Ngo
2018-07-22 11:48:29 +02:00
parent 635f551516
commit a8ed0dbf03
7 changed files with 81433 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/active-color.js Normal file
View File

@@ -0,0 +1,24 @@
/**
* Acitve color.
*/
AFRAME.registerComponent('active-color', {
dependencies: ['material'],
schema: {
active: {default: false},
color: {default: '#4BF'}
},
init: function () {
this.defaultColor = this.el.getAttribute('material').color;
},
update: function () {
var el = this.el;
if (this.data.active) {
el.setAttribute('material', 'color', this.data.color);
} else {
el.setAttribute('material', 'color', this.defaultColor);
}
},
});

29
src/components/menu-difficulty-select.js
View File

@@ -1,34 +1,5 @@
var bindEvent = require('aframe-event-decorators').bindEvent;
/**
* Select difficulty.
*/
AFRAME.registerComponent('menu-difficulty-option', {
dependencies: ['material'],
schema: {
activeDifficulty: {default: ''}
},
init: function () {
this.defaultColor = this.el.getAttribute('material').color;
},
update: function () {
var el = this.el;
let optionValue = this.el.closest('[data-bind-for-value]').dataset.bindForValue;
if (optionValue === this.data.activeDifficulty) {
el.setAttribute('animation__mouseenter', 'enabled', false);
el.setAttribute('animation__mouseleave', 'enabled', false);
el.setAttribute('material', 'color', '#4BF');
} else {
el.setAttribute('material', 'color', this.defaultColor);
el.setAttribute('animation__mouseenter', 'enabled', true);
el.setAttribute('animation__mouseleave', 'enabled', true);
}
},
});
/**
* Select difficulty.
*/

2
src/index.html
View File

@@ -2,7 +2,7 @@
<html>
<head>
<title>Supersaber</title>
<script src="vendor/aframe.dev.js"></script>
<script src="vendor/aframe.pr3701.js"></script>
<script src="build/build.js"></script>
</head>
<body>

7
src/templates/menu.html
View File

@@ -20,6 +20,9 @@
<template id="searchResultTemplate">
<a-entity class="searchResult" data-id="{{ item.id }}">
<a-entity class="searchResultBackground"
bind__active-color="active: menuSelectedChallenge.id === '{{ item.id }}'"
bind__animation__mouseenter="enabled: menuSelectedChallenge.id !== '{{ item.id }}'"
bind__animation__mouseleave="enabled: menuSelectedChallenge.id !== '{{ item.id }}'"
geometry="primitive: plane; width: 0.8; height: 0.1"
material="shader: flat; color: #111"
position="0 -0.13 -0.01"
@@ -59,7 +62,9 @@
<template>
<a-entity class="difficultyOption" data-difficulty="{{ difficulty }}">
<a-entity class="difficultyBackground"
bind__menu-difficulty-option="activeDifficulty: menuSelectedChallenge.difficulty"
bind__active-color="active: menuSelectedChallenge.difficulty === '{{ difficulty }}'"
bind__animation__mouseenter="enabled: menuSelectedChallenge.difficulty !== '{{ difficulty }}'"
bind__animation__mouseleave="enabled: menuSelectedChallenge.difficulty !== '{{ difficulty }}'"
geometry="primitive: plane; width: 0.3; height: 0.1"
material="shader: flat; color: #111"
position="-0.4 -0.005 0"