[bump npm] handle layout / order change on search if selected el is still part of the new search

package.json

@@ -12,7 +12,7 @@
     "aframe-event-set-component": "^4.0.1",
     "aframe-geometry-merger-component": "^2.0.0-beta1",
     "aframe-haptics-component": "^1.4.2",
-    "aframe-layout-component": "^5.2.0",
+    "aframe-layout-component": "^5.3.0",
     "aframe-orbit-controls": "^1.2.0",
     "aframe-proxy-event-component": "^2.1.0",
     "aframe-slice9-component": "^1.0.0",

src/components/search.js

@@ -47,6 +47,21 @@ AFRAME.registerComponent('search', {
  * Click listener for search result.
  */
 AFRAME.registerComponent('search-result-list', {
+  init: function () {
+    const obv = new MutationObserver(mutations => {
+      for (let i = 0; i < mutations.length; i++) {
+        if (mutations[i].attributeName === 'data-index') {
+          this.refreshLayout();
+        }
+      }
+    });
+    obv.observe(this.el, {attributes: true, childList: false, subtree: true});
+  },
+
+  refreshLayout: function () {
+    this.el.emit('layoutrefresh', null, false);
+  },
+
   click: bindEvent(function (evt) {
     this.el.sceneEl.emit('menuchallengeselect',
                          evt.target.closest('.searchResult').dataset.id,

src/state/index.js

@@ -212,6 +212,7 @@ AFRAME.registerState({
         challengeDataStore[result.id] = result
       }
       computeSearchPagination(state);
+      computeMenuSelectedChallengeIndex(state);
     },
 
     'enter-vr': (state) => {
@@ -248,6 +249,7 @@ function computeSearchPagination (state) {
        i < state.search.page * SEARCH_PER_PAGE + SEARCH_PER_PAGE; i++) {
     if (!state.search.results[i]) { break; }
     state.searchResultsPage.push(state.search.results[i]);
+    state.search.results[i].index = i;
 
     state.search.songNameTexts +=
       truncate(state.search.results[i].songName, SONG_NAME_TRUNCATE).toUpperCase() + '\n';

src/templates/menu.html

@@ -1,8 +1,9 @@
 <!-- Macro is a templating function. It is rendered into the HTML below with searchResults(). -->
 {% macro searchResults () %}
+  <!-- TODO: Sort the layout based on the IDs. -->
   <a-entity id="searchResultList"
             bind-for="for: item; in: searchResultsPage; key: id; template: #searchResultTemplate; updateInPlace: true; pool: 6; delay: 25"
-            layout="type: box; columns: 1; marginRow: -0.2"
+            layout="type: box; columns: 1; marginRow: -0.2; orderAttribute: data-index"
             search-result-list
             position="0 0.644 0"></a-entity>
 
@@ -73,6 +74,7 @@
     <a-entity
       class="searchResult"
       bind-item__data-id="item.id"
+      bind-item__data-index="item.index"
       bind-item__song-preview="challengeId: item.id; previewStartTime: item.previewStartTime">
       <a-entity
         class="searchResultBackground"