moved app-content into a component

This commit is contained in:
booploops 2022-06-29 13:33:21 -07:00
parent 225a0bfa42
commit ff8fe37d29
6 changed files with 114 additions and 98 deletions

View file

@ -1,42 +0,0 @@
<div id="app-content" :scrollpos="chrome.contentScrollPosY" scrollaxis="y" :style="{'overflow': (chrome.contentAreaScrolling ? '' : 'hidden')}">
<div id="navigation-bar" v-if="getThemeDirective('appNavigation') == 'seperate'">
<button class="nav-item" @click="navigateBack()">
<%- include('../svg/chevron-left.svg') %>
</button>
<button class="nav-item" @click="navigateForward()">
<%- include('../svg/chevron-right.svg') %>
</button>
</div>
<!-- Include App Routes -->
<% for(var i=0; i < Object.keys(env.appRoutes).length ; i++) {%>
<transition
<% if(env.appRoutes[i].onEnter) {
%>
v-on:enter="<%- env.appRoutes[i].onEnter %>"
<%
}
%>
:name="chrome.desiredPageTransition">
<template
v-if="<%- env.appRoutes[i].condition %>">
<%- env.appRoutes[i].component %>
</template>
</transition>
<% } %>
<!-- Library - Made For You -->
<transition :name="chrome.desiredPageTransition" v-on:enter="getMadeForYou()">
<template v-if="page == 'library-madeforyou'">
<%- include('../pages/madeforyou') %>');
%>
</template>
</transition>
<!-- Library - Artists-->
<!-- Keybinds -->
<transition name="wpfade">
<template v-if="page == 'keybinds-settings'">
<keybinds-settings></keybinds-settings>
</template>
</transition>
</div>

View file

@ -135,7 +135,7 @@
<transition name="sidebartransition">
<%- include("sidebar") %>
</transition>
<%- include("app-content") %>
<app-content-area></app-content-area>
<transition name="drawertransition">
<div class="app-drawer"
v-if="drawer.open && drawer.panel == 'lyrics' && lyrics && lyrics != [] && lyrics.length > 0">

View file

@ -0,0 +1,57 @@
<script type="text/x-template" id="app-content-area">
<div id="app-content" :scrollpos="$root.chrome.contentScrollPosY" scrollaxis="y"
:style="{'overflow': ($root.chrome.contentAreaScrolling ? '' : 'hidden')}">
<div id="navigation-bar" v-if="$root.getThemeDirective('appNavigation') == 'seperate'">
<button class="nav-item" @click="$root.navigateBack()">
<%- include('../svg/chevron-left.svg') %>
</button>
<button class="nav-item" @click="$root.navigateForward()">
<%- include('../svg/chevron-right.svg') %>
</button>
</div>
<!-- Include App Routes -->
<% for(var i = 0; i < Object.keys(env.appRoutes).length ; i++) { %>
<transition
<% if(env.appRoutes[i].onEnter) {
%>
v-on:enter="<%- env.appRoutes[i].onEnter %>"
<%
}
%>
:name="$root.chrome.desiredPageTransition">
<template
v-if="<%- env.appRoutes[i].condition %>">
<%- env.appRoutes[i].component %>
</template>
</transition>
<% } %>
<!-- Library - Made For You -->
<transition :name="$root.chrome.desiredPageTransition" v-on:enter="$root.getMadeForYou()">
<template v-if="$root.page == 'library-madeforyou'">
<%- include('../pages/madeforyou') %>');
%>
</template>
</transition>
<!-- Library - Artists-->
<!-- Keybinds -->
<transition name="wpfade">
<template v-if="$root.page == 'keybinds-settings'">
<keybinds-settings></keybinds-settings>
</template>
</transition>
</div>
</script>
<script>
Vue.component('app-content-area', {
template: '#app-content-area',
data: function () {
return {
scrollPos: 0
}
},
methods: {
}
});
</script>

View file

@ -126,9 +126,9 @@
}
})
if (typeof this.$parent.getChildren == "function") {
this.$parent.getChildren()
console.log(this.$parent.children)
if (typeof this.$root.getChildren == "function") {
this.$root.getChildren()
console.log(this.$root.children)
}
await this.getChildren()
this.$root.sortPlaylists()

View file

@ -122,7 +122,7 @@
<!-- Sidebar Item -->
<script type="text/x-template" id="sidebar-library-item">
<button class="app-sidebar-item"
:class="$parent.getSidebarItemClass(page)" @click="$root.setWindowHash(page)">
:class="$root.getSidebarItemClass(page)" @click="$root.setWindowHash(page)">
<svg-icon :url="svgIconData" :name="'sidebar-' + svgIconName" v-if="svgIconData != ''" />
<span class="sidebar-item-text">{{ name }}</span>
</button>