Cleanup and template splitting

client/src/modules/ui/vue/components/BdSettings.vue

@@ -0,0 +1,67 @@
+<template src="./templates/BdSettings.html"></template>
+
+<script>
+    /*Imports*/
+    import { SidebarView, Sidebar, SidebarItem } from './sidebar';
+    const components = { SidebarView, Sidebar, SidebarItem };
+
+    /*Constants*/
+    const sidebarItems = [
+        { text: 'Internal', _type: 'header' },
+        { id: 0, contentid: "core", text: 'Core', active: false, _type: 'button' },
+        { id: 1, contentid: "ui", text: 'UI', active: false, _type: 'button' },
+        { id: 2, contentid: "emotes", text: 'Emotes', active: false, _type: 'button' },
+        { id: 3, contentid: "css", text: 'CSS Editor', active: false, _type: 'button' },
+        { text: 'External', _type: 'header' },
+        { id: 4, contentid: "plugins", text: 'Plugins', active: false, _type: 'button' },
+        { id: 5, contentid: "themes", text: 'Themes', active: false, _type: 'button' }
+    ];
+
+    /*Methods*/
+    function itemOnClick(id) {
+        if (this.animating || id === this.activeIndex) return;
+        if (this.activeIndex >= 0) this.sidebarItems.find(item => item.id === this.activeIndex).active = false;
+        this.sidebarItems.find(item => item.id === id).active = true;
+        this.animating = true;
+        this.lastActiveIndex = this.activeIndex;
+        this.activeIndex = id;
+
+        if (this.first) {
+            this.first = false;
+        }
+
+        setTimeout(() => {
+            this.animating = false;
+            this.lastActiveIndex = -1;
+        }, 400);
+    }
+
+    function animatingContent(s) {
+        const item = this.sidebarItems.find(item => item.contentid === s);
+        if (!item) return false;
+        return item.id === this.lastActiveIndex;
+    }
+
+    function activeContent(s) {
+        const item = this.sidebarItems.find(item => item.contentid === s);
+        if (!item) return false;
+        return item.id === this.activeIndex;
+    }
+
+    const methods = { itemOnClick, animatingContent, activeContent };
+
+    export default {
+        components,
+        props: ['active', 'close'],
+        methods,
+        data() {
+            return {
+                sidebarItems,
+                activeIndex: -1,
+                lastActiveIndex: -1,
+                animating: false,
+                first: true
+            }
+        }
+    }
+</script>

client/src/modules/ui/vue/components/BdSettingsWrapper.vue

@@ -0,0 +1,20 @@
+<template src="./templates/BdSettingsWrapper.html"></template>
+<script>
+    /*Imports*/
+    import BdSettings from './BdSettings.vue';
+    const components = { BdSettings };
+
+    /*Methods*/
+    function showSettings() { this.active = true; }
+    function hideSettings() { this.active = false; }
+
+    const methods = { showSettings, hideSettings };
+
+    export default {
+        components,
+        methods,
+        data() {
+            return { active: false }
+        }
+    }
+</script>

client/src/modules/ui/vue/components/generic/ScrollerWrap.vue

@@ -0,0 +1,2 @@
+<template src="./templates/ScrollerWrap.html"></template>
+<script>export default {}</script>

client/src/modules/ui/vue/components/generic/index.js

@@ -0,0 +1 @@
+export { default as ScrollerWrap } from './ScrollerWrap.vue';

client/src/modules/ui/vue/components/generic/templates/ScrollerWrap.html

@@ -0,0 +1,5 @@
+<div class="bd-scroller-wrap">
+    <div class="bd-scroller">
+        <slot/>
+    </div>
+</div>

client/src/modules/ui/vue/components/sidebar/Button.vue

@@ -0,0 +1,6 @@
+<template src="./templates/Button.html"></template>
+<script>
+    export default {
+        props: ['item', 'onClick']
+    }
+</script>

client/src/modules/ui/vue/components/sidebar/Header.vue

@@ -0,0 +1,6 @@
+<template src="./templates/Header.html"></template>
+<script>
+    export default {
+        props: ['item']
+    }
+</script>

client/src/modules/ui/vue/components/sidebar/Item.vue

@@ -0,0 +1,11 @@
+<template src="./templates/Item.html"></template>
+<script>
+    /*Imports*/
+    import { SidebarHeader, SidebarButton } from './';
+    const components = { SidebarHeader, SidebarButton };
+
+    export default {
+        components,
+        props: ['item', 'onClick']
+    }
+</script>

client/src/modules/ui/vue/components/sidebar/Sidebar.vue

@@ -0,0 +1,2 @@
+<template src="./templates/Sidebar.html"></template>
+<script> export default {}</script>

client/src/modules/ui/vue/components/sidebar/View.vue

@@ -0,0 +1,11 @@
+<template src="./templates/View.html"></template>
+<script>
+    /*Imports =>*/
+    import { ScrollerWrap } from '../generic';
+    const components = { ScrollerWrap };
+    /*<= Imports*/
+
+    export default {
+        components
+    }
+</script>

client/src/modules/ui/vue/components/sidebar/index.js

@@ -0,0 +1,5 @@
+export { default as SidebarView } from './View.vue';
+export { default as Sidebar } from './Sidebar.vue';
+export { default as SidebarHeader } from './Header.vue';
+export { default as SidebarButton } from './Button.vue';
+export { default as SidebarItem } from './Item.vue';

client/src/modules/ui/vue/components/sidebar/templates/Button.html

@@ -0,0 +1 @@
+<div class="bd-item" :class="{active: item.active}" @click="onClick(item.id)">{{item.text}}</div>

client/src/modules/ui/vue/components/sidebar/templates/Header.html

@@ -0,0 +1 @@
+<div class='bd-header'>{{item.text}}</div>

client/src/modules/ui/vue/components/sidebar/templates/Item.html

@@ -0,0 +1,2 @@
+<SidebarButton v-if="item._type == 'button'" :item="item" :onClick="onClick" />
+<SidebarHeader v-else-if="item._type == 'header'" :item="item" />

client/src/modules/ui/vue/components/sidebar/templates/Sidebar.html

@@ -0,0 +1,3 @@
+<div class="bd-sidebar">
+    <slot/>
+</div>

client/src/modules/ui/vue/components/sidebar/templates/View.html

@@ -0,0 +1,14 @@
+<div class="bd-sidebar-view">
+    <div class="bd-sidebar-region">
+        <div class="bd-settingsWrap">
+            <ScrollerWrap>
+                <slot name="sidebar"/>
+            </ScrollerWrap>
+        </div>
+    </div>
+    <div class="bd-content-region">
+        <ScrollerWrap>
+            <slot name="content"/>
+        </ScrollerWrap>
+    </div>
+</div>

client/src/modules/ui/vue/components/templates/BdSettings.html

@@ -0,0 +1,10 @@
+<div class="bd-settings" :class="{active: active}">
+    <SidebarView>
+        <Sidebar slot="sidebar">
+            <div class="bd-settings-x" @click="close">
+                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 12 12"><g fill="none" fill-rule="evenodd"><path d="M0 0h12v12H0"></path><path class="fill" fill="#dcddde" d="M9.5 3.205L8.795 2.5 6 5.295 3.205 2.5l-.705.705L5.295 6 2.5 8.795l.705.705L6 6.705 8.795 9.5l.705-.705L6.705 6"></path></g></svg>
+            </div>
+            <SidebarItem v-for="item in sidebarItems" :item="item" :key="item.id" :onClick="itemOnClick"/>
+        </Sidebar>
+    </SidebarView>
+</div>

client/src/modules/ui/vue/components/templates/BdSettingsWrapper.html

@@ -0,0 +1,6 @@
+<div class="bd-settings-wrapper" :class="{active: active}">
+    <div class="bd-settings-button" :class="{active: active}" @click="showSettings">
+        <div class="bd-settings-button-btn"></div>
+    </div>
+    <BdSettings :active="active" :close="hideSettings"/>
+</div>

client/src/modules/ui/vueui.js

@@ -11,19 +11,18 @@
 const $ = require('jquery');
 const Vue = require('vue');
 
-const BdButton = (require('./components/bdbutton.vue')).default;
+const BdSettingsWrapper = (require('./vue/components/BdSettingsWrapper.vue')).default;
 class UI {
 
     constructor() {
-        $('body').append($('<div/>', {
+        $('body').append($('<bdbody/>').append($('<div/>', {
-            class: 'bd-settingsbutton',
+            id: 'bd-settings'
-            id: 'bd-settingsbutton'
+        })));
-        }));
 
          this.vueInstance = new Vue.default({
-             el: '#bd-settingsbutton',
+             el: '#bd-settings',
-             template: '<BdButton/>',
+             template: '<BdSettingsWrapper/>',
-             components: { BdButton }
+             components: { BdSettingsWrapper }
          });
     }