okseby/orchard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Renamed cider-ui-tests to cider-ui, starting skeleton for settings page

Browse source
This commit is contained in:
booploops 2021-12-14 22:12:19 -08:00
parent 1ae4261849
commit 2df1a2d95f
69 changed files with 259 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

123
resources/cider-ui-tests/views/pages/collection-list.ejs
View file

@ -1,123 +0,0 @@
<script type="text/x-template" id="cider-collection-list">
<div class="content-inner collection-page">
<h3 class="header-text" v-observe-visibility="{callback: headerVisibility}">{{ title }}</h3>
<div v-if="data['data'] != 'null'" class="well">
<template v-for="item in data.data">
<template v-if="item.type == 'artists'">
<mediaitem-square-large :item="item"></mediaitem-square-large>
</template>
<template v-else>
<mediaitem-list-item
v-if="item.attributes.playParams.kind == 'song'"
:item="item"></mediaitem-list-item>
<mediaitem-mvview v-else-if="item.attributes.playParams.kind == 'musicVideo'" :item="item"></mediaitem-mvview>
<mediaitem-square-large v-else :item="item"></mediaitem-square-large>
</template>
</template>
<button v-if="triggerEnabled" style="opacity:0;height: 32px;" v-observe-visibility="{callback: visibilityChanged}">Show More</button>
</div>
<transition name="fabfade">
<button class="top-fab" v-show="showFab" @click="scrollToTop()">
<%- include("../svg/arrow-up.svg") %>
</button>
</transition>
</div>
</script>
<script>
Vue.component('cider-collection-list', {
template: "#cider-collection-list",
props: {
data: {
type: Object,
required: true
},
title: {
type: String,
required: false
},
type: {
type: String,
required: false,
default: "artists"
}
},
data: function () {
return {
triggerEnabled: true,
canSeeTrigger: false,
showFab: false
}
},
methods: {
scrollToTop() {
let target = document.querySelector(".header-text")
target.scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"})
},
getNext() {
// if this.data.next is not null, then we can run this.data.next() and concat to this.data.data to get the next page
switch(this.type) {
default:
case "artists":
if (this.data.next && this.triggerEnabled) {
this.triggerEnabled = false;
this.data.next().then(data => {
console.log(data);
this.data.next = data.next;
this.data.data = this.data.data.concat(data.data);
this.triggerEnabled = true;
});
}else{
console.log("No next page");
this.triggerEnabled = false;
}
break;
case "search":
if (this.data.next && this.triggerEnabled) {
this.triggerEnabled = false;
this.data.next().then(data => {
console.log(data);
this.data.next = data[this.data.groups].next;
this.data.data = this.data.data.concat(data[this.data.groups].data.data);
this.triggerEnabled = true;
});
}else{
console.log("No next page");
this.triggerEnabled = false;
}
break;
case "listen_now":
case "curator":
if (this.data.next && this.triggerEnabled) {
this.triggerEnabled = false;
app.mk.api.v3.music(this.data.next).then(data => {
console.log(data);
this.data.next = data.data.next;
this.data.data = this.data.data.concat(data.data.data);
this.triggerEnabled = true;
});
}else{
console.log("No next page");
this.triggerEnabled = false;
}
break;
}
},
headerVisibility: function (isVisible, entry) {
if(isVisible) {
this.showFab = false;
}else{
this.showFab = true;
}
},
visibilityChanged: function (isVisible, entry) {
if(isVisible) {
this.canSeeTrigger = true;
this.getNext();
}else{
this.canSeeTrigger = false;
}
}
}
})
</script>