From bad8e29812a0c9b7c33a032c8370a3d109e55d50 Mon Sep 17 00:00:00 2001
From: Kevin Ngo <me@ngokevin.com>
Date: Thu, 4 Oct 2018 00:59:26 -0700
Subject: [PATCH] bigger pagination button raycast targets (fixes #49)

---
 src/components/raycaster-target.js | 58 ++++++++++++++++++++++++++++++
 src/templates/menu.html            | 20 ++++++++---
 2 files changed, 74 insertions(+), 4 deletions(-)
 create mode 100644 src/components/raycaster-target.js

diff --git a/src/components/raycaster-target.js b/src/components/raycaster-target.js
new file mode 100644
index 0000000..78d05b2
--- /dev/null
+++ b/src/components/raycaster-target.js
@@ -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);
+    };
+  })()
+});
diff --git a/src/templates/menu.html b/src/templates/menu.html
index 9a743e3..4ad3052 100644
--- a/src/templates/menu.html
+++ b/src/templates/menu.html
@@ -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"