From b42f17437cb02b0a2984af5ee71f5247bab8979b Mon Sep 17 00:00:00 2001
From: Jiiks <jiiks@windowslive.com>
Date: Sat, 20 Jan 2018 12:52:00 +0200
Subject: [PATCH] Cleanup and template splitting

---
 .../modules/ui/vue/components/BdSettings.vue  | 67 +++++++++++++++++++
 .../ui/vue/components/BdSettingsWrapper.vue   | 20 ++++++
 .../vue/components/generic/ScrollerWrap.vue   |  2 +
 .../ui/vue/components/generic/index.js        |  1 +
 .../generic/templates/ScrollerWrap.html       |  5 ++
 .../ui/vue/components/sidebar/Button.vue      |  6 ++
 .../ui/vue/components/sidebar/Header.vue      |  6 ++
 .../ui/vue/components/sidebar/Item.vue        | 11 +++
 .../ui/vue/components/sidebar/Sidebar.vue     |  2 +
 .../ui/vue/components/sidebar/View.vue        | 11 +++
 .../ui/vue/components/sidebar/index.js        |  5 ++
 .../components/sidebar/templates/Button.html  |  1 +
 .../components/sidebar/templates/Header.html  |  1 +
 .../components/sidebar/templates/Item.html    |  2 +
 .../components/sidebar/templates/Sidebar.html |  3 +
 .../components/sidebar/templates/View.html    | 14 ++++
 .../vue/components/templates/BdSettings.html  | 10 +++
 .../templates/BdSettingsWrapper.html          |  6 ++
 client/src/modules/ui/vueui.js                | 15 ++---
 19 files changed, 180 insertions(+), 8 deletions(-)
 create mode 100644 client/src/modules/ui/vue/components/BdSettings.vue
 create mode 100644 client/src/modules/ui/vue/components/BdSettingsWrapper.vue
 create mode 100644 client/src/modules/ui/vue/components/generic/ScrollerWrap.vue
 create mode 100644 client/src/modules/ui/vue/components/generic/index.js
 create mode 100644 client/src/modules/ui/vue/components/generic/templates/ScrollerWrap.html
 create mode 100644 client/src/modules/ui/vue/components/sidebar/Button.vue
 create mode 100644 client/src/modules/ui/vue/components/sidebar/Header.vue
 create mode 100644 client/src/modules/ui/vue/components/sidebar/Item.vue
 create mode 100644 client/src/modules/ui/vue/components/sidebar/Sidebar.vue
 create mode 100644 client/src/modules/ui/vue/components/sidebar/View.vue
 create mode 100644 client/src/modules/ui/vue/components/sidebar/index.js
 create mode 100644 client/src/modules/ui/vue/components/sidebar/templates/Button.html
 create mode 100644 client/src/modules/ui/vue/components/sidebar/templates/Header.html
 create mode 100644 client/src/modules/ui/vue/components/sidebar/templates/Item.html
 create mode 100644 client/src/modules/ui/vue/components/sidebar/templates/Sidebar.html
 create mode 100644 client/src/modules/ui/vue/components/sidebar/templates/View.html
 create mode 100644 client/src/modules/ui/vue/components/templates/BdSettings.html
 create mode 100644 client/src/modules/ui/vue/components/templates/BdSettingsWrapper.html

diff --git a/client/src/modules/ui/vue/components/BdSettings.vue b/client/src/modules/ui/vue/components/BdSettings.vue
new file mode 100644
index 00000000..3f37c964
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/client/src/modules/ui/vue/components/BdSettingsWrapper.vue b/client/src/modules/ui/vue/components/BdSettingsWrapper.vue
new file mode 100644
index 00000000..ac83566b
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/client/src/modules/ui/vue/components/generic/ScrollerWrap.vue b/client/src/modules/ui/vue/components/generic/ScrollerWrap.vue
new file mode 100644
index 00000000..a511f680
--- /dev/null
+++ b/client/src/modules/ui/vue/components/generic/ScrollerWrap.vue
@@ -0,0 +1,2 @@
+<template src="./templates/ScrollerWrap.html"></template>
+<script>export default {}</script>
\ No newline at end of file
diff --git a/client/src/modules/ui/vue/components/generic/index.js b/client/src/modules/ui/vue/components/generic/index.js
new file mode 100644
index 00000000..c34f4339
--- /dev/null
+++ b/client/src/modules/ui/vue/components/generic/index.js
@@ -0,0 +1 @@
+export { default as ScrollerWrap } from './ScrollerWrap.vue';
\ No newline at end of file
diff --git a/client/src/modules/ui/vue/components/generic/templates/ScrollerWrap.html b/client/src/modules/ui/vue/components/generic/templates/ScrollerWrap.html
new file mode 100644
index 00000000..bcc9d428
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/client/src/modules/ui/vue/components/sidebar/Button.vue b/client/src/modules/ui/vue/components/sidebar/Button.vue
new file mode 100644
index 00000000..9e4b64a5
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/client/src/modules/ui/vue/components/sidebar/Header.vue b/client/src/modules/ui/vue/components/sidebar/Header.vue
new file mode 100644
index 00000000..a0d22170
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/client/src/modules/ui/vue/components/sidebar/Item.vue b/client/src/modules/ui/vue/components/sidebar/Item.vue
new file mode 100644
index 00000000..424b1a28
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/client/src/modules/ui/vue/components/sidebar/Sidebar.vue b/client/src/modules/ui/vue/components/sidebar/Sidebar.vue
new file mode 100644
index 00000000..d58e9924
--- /dev/null
+++ b/client/src/modules/ui/vue/components/sidebar/Sidebar.vue
@@ -0,0 +1,2 @@
+<template src="./templates/Sidebar.html"></template>
+<script> export default {}</script>
\ No newline at end of file
diff --git a/client/src/modules/ui/vue/components/sidebar/View.vue b/client/src/modules/ui/vue/components/sidebar/View.vue
new file mode 100644
index 00000000..3432053c
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/client/src/modules/ui/vue/components/sidebar/index.js b/client/src/modules/ui/vue/components/sidebar/index.js
new file mode 100644
index 00000000..7c4adcc7
--- /dev/null
+++ b/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';
\ No newline at end of file
diff --git a/client/src/modules/ui/vue/components/sidebar/templates/Button.html b/client/src/modules/ui/vue/components/sidebar/templates/Button.html
new file mode 100644
index 00000000..649f65a5
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/client/src/modules/ui/vue/components/sidebar/templates/Header.html b/client/src/modules/ui/vue/components/sidebar/templates/Header.html
new file mode 100644
index 00000000..2f430a8e
--- /dev/null
+++ b/client/src/modules/ui/vue/components/sidebar/templates/Header.html
@@ -0,0 +1 @@
+<div class='bd-header'>{{item.text}}</div>
\ No newline at end of file
diff --git a/client/src/modules/ui/vue/components/sidebar/templates/Item.html b/client/src/modules/ui/vue/components/sidebar/templates/Item.html
new file mode 100644
index 00000000..2eb13873
--- /dev/null
+++ b/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" />
\ No newline at end of file
diff --git a/client/src/modules/ui/vue/components/sidebar/templates/Sidebar.html b/client/src/modules/ui/vue/components/sidebar/templates/Sidebar.html
new file mode 100644
index 00000000..b423bd24
--- /dev/null
+++ b/client/src/modules/ui/vue/components/sidebar/templates/Sidebar.html
@@ -0,0 +1,3 @@
+<div class="bd-sidebar">
+    <slot/>
+</div>
\ No newline at end of file
diff --git a/client/src/modules/ui/vue/components/sidebar/templates/View.html b/client/src/modules/ui/vue/components/sidebar/templates/View.html
new file mode 100644
index 00000000..11eb65b3
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/client/src/modules/ui/vue/components/templates/BdSettings.html b/client/src/modules/ui/vue/components/templates/BdSettings.html
new file mode 100644
index 00000000..d2442e28
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/client/src/modules/ui/vue/components/templates/BdSettingsWrapper.html b/client/src/modules/ui/vue/components/templates/BdSettingsWrapper.html
new file mode 100644
index 00000000..7b72e058
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/client/src/modules/ui/vueui.js b/client/src/modules/ui/vueui.js
index 21387329..24601156 100644
--- a/client/src/modules/ui/vueui.js
+++ b/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/>', {
-            class: 'bd-settingsbutton',
-            id: 'bd-settingsbutton'
-        }));
+        $('body').append($('<bdbody/>').append($('<div/>', {
+            id: 'bd-settings'
+        })));
 
          this.vueInstance = new Vue.default({
-             el: '#bd-settingsbutton',
-             template: '<BdButton/>',
-             components: { BdButton }
+             el: '#bd-settings',
+             template: '<BdSettingsWrapper/>',
+             components: { BdSettingsWrapper }
          });
     }