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

9
package-lock.json generated
View File

@@ -148,12 +148,9 @@
"integrity": "sha1-+w+EQdrdHosRzCRRK6eqaS1iK+E="
},
"aframe-state-component": {
"version": "4.5.0",
"resolved": "https://registry.npmjs.org/aframe-state-component/-/aframe-state-component-4.5.0.tgz",
"integrity": "sha512-jo7GG3ILwWW0zvaf8A2/30zLYyiqNJK/pBLZwGa/y6Xo3FWYgDL30stEHJslka4MtQNK7ONWPOA8mfQTwWUDjg==",
"requires": {
"aframe": "github:aframevr/aframe#2afb6ac191f1a44edbbfe6f0e733380356a9e0c8"
}
"version": "4.6.0",
"resolved": "https://registry.npmjs.org/aframe-state-component/-/aframe-state-component-4.6.0.tgz",
"integrity": "sha512-sth2BuNuw1Z7wb4HclkD3EJDJ5cYDFOkKCPobih63kw+L8ulhx0G1qEcCMg5JFEvK/Xn7SwpJMKfhJHMlGypMg=="
},
"aframe-super-keyboard": {
"version": "2.0.0",

2
package.json
View File

@@ -18,7 +18,7 @@
"aframe-particle-system-component": "^1.0.11",
"aframe-proxy-event-component": "^1.1.1",
"aframe-slice9-component": "^1.0.0",
"aframe-state-component": "^4.5.0",
"aframe-state-component": "^4.6.0",
"aframe-super-keyboard": "^2.0.0",
"algoliasearch": "^3.29.0",
"ansi-html": "0.0.7",

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"

81398
vendor/aframe.pr3701.js vendored Normal file
View File

File diff suppressed because one or more lines are too long