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

bigger pagination button raycast targets (fixes #49)

Browse Source
This commit is contained in:
Kevin Ngo
2018-10-04 00:59:26 -07:00
parent 5d1c9041ea
commit bad8e29812
2 changed files with 74 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
src/components/raycaster-target.js Normal file
View File

@@ -0,0 +1,58 @@
/**
* Set raycast target as a child independnent from entity.
* Useful for padding the raycast target of a mesh without changing the mesh.
*/
AFRAME.registerComponent('raycaster-target', {
schema: {
bindToggle: {default: ''},
depth: {type: 'number'},
height: {type: 'number'},
position: {type: 'vec3', default: {x: 0, y: 0, z: 0}},
rotation: {type: 'vec3', default: {x: 0, y: 0, z: 0}},
useBoxTarget: {default: false},
width: {type: 'number'}
},
init: (function () {
var boxGeometry = {primitive: 'box'};
var planeGeometry = {primitive: 'plane'};
return function () {
var data = this.data;
var el = this.el;
var geometry;
var raycastTarget;
raycastTarget = document.createElement('a-entity');
raycastTarget.classList.add('raycasterTarget');
if (data.bindToggle) {
raycastTarget.setAttribute('bind-toggle__raycastable', data.bindToggle);
} else {
raycastTarget.setAttribute('data-raycastable', '');
}
if (data.useBoxTarget) {
// 3D target.
geometry = boxGeometry;
geometry.depth = data.depth;
geometry.height = data.height;
geometry.width = data.width;
} else {
// 2D target.
geometry = planeGeometry;
geometry.height = data.height;
geometry.width = data.width;
}
raycastTarget.setAttribute('geometry', geometry);
raycastTarget.object3D.visible = false;
raycastTarget.object3D.position.copy(data.position);
raycastTarget.object3D.rotation.x = THREE.Math.degToRad(data.rotation.x);
raycastTarget.object3D.rotation.y = THREE.Math.degToRad(data.rotation.y);
raycastTarget.object3D.rotation.z = THREE.Math.degToRad(data.rotation.z);
el.appendChild(raycastTarget);
};
})()
});

20
src/templates/menu.html
View File

@@ -6,18 +6,31 @@
search-result-list
position="0 0.644 0"></a-entity>
<!-- TODO: Pagination icons. -->
<a-mixin id="searchPageButton"
animation__mouseenter="property: components.slice9.material.color; type: color; from: #050505; to: #333; startEvents: mouseenter; pauseEvents: mouseleave; dur: 150"
animation__mouseleave="property: components.slice9.material.color; type: color; from: #333; to: #050505; startEvents: mouseleave; pauseEvents: mouseenter; dur: 150"
mixin="slice"
raycaster-target="width: 1; height: 0.32"
slice9="width: 0.5; height: 0.08; padding: 0.03"
text="align: center; wrapCount: 40; zOffset: 0.001"></a-mixin>
<a-entity id="searchPrevPage" mixin="searchPageButton" bind-toggle__raycastable="search.hasPrev && menu.active" position="-0.05 0.65 0.01" proxy-event="event: click; to: a-scene; as: searchprevpage" bind__visible="search.hasPrev">
<a-entity
id="searchPrevPage"
mixin="searchPageButton"
bind-toggle__raycastable="search.hasPrev && menu.active"
raycaster-target="bindToggle: search.hasNext && menu.active; position: 0 0.08 0"
position="-0.05 0.65 0.01"
proxy-event="event: click; to: a-scene; as: searchprevpage; captureBubbles: true"
bind__visible="search.hasPrev">
<a-entity geometry="primitive: plane; width: 0.08; height: 0.08" material="shader: flat; src: #downIconImg; transparent: true" rotation="0 0 180" position="0 0 -0.001"></a-entity>
</a-entity>
<a-entity id="searchNextPage" mixin="searchPageButton" bind-toggle__raycastable="search.hasNext && menu.active" position="-0.05 -0.634 0.01" proxy-event="event: click; to: a-scene; as: searchnextpage" bind__visible="search.hasNext">
<a-entity
id="searchNextPage"
mixin="searchPageButton"
raycaster-target="bindToggle: search.hasNext && menu.active; position: 0 -0.08 0"
position="-0.05 -0.634 0.01"
proxy-event="event: click; to: a-scene; as: searchnextpage; captureBubbles: true"
bind__visible="search.hasNext">
<a-entity geometry="primitive: plane; width: 0.08; height: 0.08" material="shader: flat; src: #downIconImg; transparent: true" position="0 0 -0.001"></a-entity>
</a-entity>
{% endmacro %}
@@ -200,7 +213,6 @@
<a-entity mixin="textFont" text="align: center; color: #AAA; wrapCount: 20; value: SEARCH SONGS" position="0 -0.07 0.01"></a-entity>
</a-entity>
<a-entity
id="keyboard"
bind__super-keyboard="show: keyboardActive"