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

pagination

Browse Source
This commit is contained in:
Kevin Ngo
2018-07-21 11:55:44 +02:00
parent b6021277e0
commit 0e1a4e619f
5 changed files with 84 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/keyboard-raycastable.js
View File

@@ -3,6 +3,7 @@ AFRAME.registerComponent('keyboard-raycastable', {
play: function () {
// TODO: bind-toggle__raycastable for when search is activated.
this.el.components['super-keyboard'].kbImg.setAttribute('raycastable', '');
this.el.components['super-keyboard'].kbImg.setAttribute('bind-toggle__raycastable',
'menu.active');
},
});

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

@@ -6,7 +6,7 @@ var bindEvent = require('aframe-event-decorators').bindEvent;
AFRAME.registerComponent('menu-difficulty-select', {
click: bindEvent(function (evt) {
this.el.emit('menudifficultyselect',
evt.target.closest('difficultyOption').dataset.difficulty,
evt.target.closest('.difficultyOption').dataset.difficulty,
false);
})
});

16
src/components/preview-song.js
View File

@@ -34,17 +34,19 @@ AFRAME.registerComponent('preview-song', {
// Stop.
if (oldData.challengeId && !this.data.challengeId) {
if (this.animation) { this.animation.pause(); }
this.audio.pause();
if (!this.audio.paused) { this.audio.pause(); }
this.audio.src = '';
return;
}
// Play preview.
this.audio.currentTime = this.data.previewStartTime;
this.audio.src = utils.getS3FileUrl(this.data.challengeId, 'song.ogg');
this.audio.volume = 0;
this.volumeTarget.volume = 0;
this.audio.play();
this.animation.restart();
if (this.data.challengeId) {
this.audio.currentTime = this.data.previewStartTime;
this.audio.src = utils.getS3FileUrl(this.data.challengeId, 'song.ogg');
this.audio.volume = 0;
this.volumeTarget.volume = 0;
this.audio.play();
this.animation.restart();
}
}
});

68
src/state/index.js
View File

@@ -1,8 +1,8 @@
var utils = require('../utils');
var hasInitialChallenge = !!AFRAME.utils.getUrlParameter('challenge');
var challengeDataStore = {};
const challengeDataStore = {};
const hasInitialChallenge = !!AFRAME.utils.getUrlParameter('challenge');
const SEARCH_PER_PAGE = 6;
AFRAME.registerState({
initialState: {
@@ -39,7 +39,13 @@ AFRAME.registerState({
// screen: keep track of layers or depth. Like breadcrumbs.
screen: hasInitialChallenge ? 'challenge' : 'home',
screenHistory: [],
searchResults: []
search: {
page: 0,
hasNext: false,
hasPrev: false,
results: [],
},
searchResultsPage: []
},
handlers: {
@@ -94,19 +100,35 @@ AFRAME.registerState({
state.menuSelectedChallenge.id = '';
},
searchprevpage: function (state) {
if (state.search.page === 0) { return; }
state.search.page--;
computeSearchPagination(state);
},
searchnextpage: function (state) {
if (state.search.page > Math.floor(state.search.results.length / SEARCH_PER_PAGE)) {
return;
}
state.search.page++;
computeSearchPagination(state);
},
/**
* Update search results. Will automatically render using `bind-for` (menu.html).
*/
searchresults: (state, payload) => {
var i;
state.searchResults.length = 0;
for (i = 0; i < 6; i++) {
if (!payload.results[i]) { continue; }
challengeDataStore[payload.results[i].id] = payload.results[i];
payload.results[i].songSubName = payload.results[i].songSubName || 'Unknown Arist';
state.searchResults.push(payload.results[i]);
state.search.page = 0;
state.search.results = payload.results;
for (i = 0; i < payload.results.length; i++) {
let result = payload.results[i];
result.songSubName = result.songSubName || 'Unknown Arist';
result.shortSongName = truncate(result.songName, 35);
result.shortSongSubName = truncate(result.songSubName, 35);
challengeDataStore[result.id] = result
}
state.searchResults.__dirty = true;
computeSearchPagination(state);
},
togglemenu: (state) => {
@@ -125,8 +147,7 @@ AFRAME.registerState({
/**
* Post-process the state after each action.
*/
computeState: (state) => {
}
// computeState: (state) => { }
});
/**
@@ -151,3 +172,24 @@ function popScreen (state) {
}
state.screen = state.screenHistory[state.screenHistory.length - 1];
}
function computeSearchPagination (state) {
let numPages = Math.ceil(state.search.results.length / SEARCH_PER_PAGE);
state.search.hasPrev = state.search.page > 0;
state.search.hasNext = state.search.page < numPages - 1;
state.searchResultsPage.length = 0;
for (i = state.search.page * SEARCH_PER_PAGE;
i < state.search.page * SEARCH_PER_PAGE + SEARCH_PER_PAGE; i++) {
if (!state.search.results[i]) { break; }
state.searchResultsPage.push(state.search.results[i]);
}
}
function truncate (str, length) {
if (!str) { return ''; }
if (str.length >= length) {
return str.substring(0, length - 3) + '...';
}
return str;
}

23
src/templates/menu.html
View File

@@ -1,10 +1,21 @@
{% macro searchResults () %}
<a-entity id="searchResultList"
bind-for="for: item; in: searchResults; key: id; template: #searchResultTemplate"
layout="type: box; columns: 1; marginRow: 0.1"
search-result-list>
bind-for="for: item; in: searchResultsPage; key: id; template: #searchResultTemplate"
layout="type: box; columns: 1; marginRow: -0.1"
search-result-list
position="0 0.45 0">
</a-entity>
<!-- TODO: Pagination icons. -->
<a-mixin id="searchPageButton"
animation__mouseenter="property: material.color; from: #050505; to: #333; startEvents: mouseenter; pauseEvents: mouseleave; dur: 150"
animation__mouseleave="property: material.color; from: #333; to: #050505; startEvents: mouseleave; pauseEvents: mouseenter; dur: 150"
geometry="primitive: plane; width: 0.9; height: 0.045"
material="color: #050505; shader: flat"
text="align: center; wrapCount: 40"></a-mixin>
<a-entity id="searchPrevPage" mixin="searchPageButton" bind-toggle__raycastable="search.hasPrev && menu.active" text="value: ^" position="-0.05 0.39 0" proxy-event="event: click; to: a-scene; as: searchprevpage"></a-entity>
<a-entity id="searchNextPage" mixin="searchPageButton" bind-toggle__raycastable="search.hasNext && menu.active" text="value: V" position="-0.05 -0.255 0" proxy-event="event: click; to: a-scene; as: searchnextpage"></a-entity>
{% raw %}
<template id="searchResultTemplate">
<a-entity class="searchResult" data-id="{{ item.id }}">
@@ -17,9 +28,9 @@
animation__mouseleave="property: material.color; from: #666; to: #111; startEvents: mouseleave; pauseEvents: mouseenter; dur: 150"
raycastable></a-entity>
<a-entity class="searchResultContent" position="0.125 -0.05 0">
<a-entity class="searchResultImage" geometry="primitive: plane; width: 0.1; height: 0.1" material="shader: flat; src: url(https://s3-us-west-2.amazonaws.com/supersaber/{{ item.id }}-image.jpg)" position="-0.575 -0.08 0.001"></a-entity>
<a-entity class="searchResultAuthor" mixin="textFont" text="wrapCount: 55; align: left; color: #54c2fd; value: {{ item.songSubName }}" position="0 -0.055 0"></a-entity>
<a-entity class="searchResultTitle" mixin="textFont" text="align: left; color: #FFF; wrapCount: 45; value: {{ item.songName }}" position="0 -0.09 0"></a-entity>
<a-entity class="searchResultImage" geometry="primitive: plane; width: 0.1; height: 0.1" material="shader: flat; src: url(https://s3-us-west-2.amazonaws.com/supersaber/{{ item.id }}-image.jpg)" position="-0.576 -0.08 0.001"></a-entity>
<a-entity class="searchResultAuthor" mixin="textFont" text="wrapCount: 55; align: left; color: #54c2fd; value: {{ item.shortSongSubName }}" position="0 -0.055 0"></a-entity>
<a-entity class="searchResultTitle" mixin="textFont" text="align: left; color: #FFF; wrapCount: 45; value: {{ item.shortSongName }}" position="0 -0.09 0"></a-entity>
<a-entity class="searchResultDownloads" mixin="textFont" text="color: #cc0856; anchor: left; value: {{ item.downloads }}" position="0.12 -0.09 0"></a-entity>
</a-entity>
</a-entity>