From 031e93185ae44a927f205c0d6dc8caa1d476a225 Mon Sep 17 00:00:00 2001
From: Jiiks <jiiks@windowslive.com>
Date: Tue, 30 Jan 2018 13:14:16 +0200
Subject: [PATCH] Css editor and ipc module

---
 client/src/index.js                           |  4 +-
 client/src/modules/csseditor.js               | 26 ++++++++
 client/src/modules/index.js                   |  1 +
 client/src/ui/components/BdSettings.vue       | 16 ++++-
 client/src/ui/components/bd/CssEditor.vue     | 64 ++++++++++++++-----
 client/src/ui/components/bd/EmoteSettings.vue | 27 ++++++++
 client/src/ui/components/bd/UISettings.vue    | 27 ++++++++
 client/src/ui/components/bd/index.js          |  3 +
 client/src/ui/dom.js                          |  5 ++
 common/modules/bdipc.js                       | 53 +++++++++++++++
 common/modules/index.js                       |  1 +
 11 files changed, 208 insertions(+), 19 deletions(-)
 create mode 100644 client/src/modules/csseditor.js
 create mode 100644 client/src/ui/components/bd/EmoteSettings.vue
 create mode 100644 client/src/ui/components/bd/UISettings.vue
 create mode 100644 common/modules/bdipc.js
 create mode 100644 common/modules/index.js

diff --git a/client/src/index.js b/client/src/index.js
index 073d2e15..9e7c305a 100644
--- a/client/src/index.js
+++ b/client/src/index.js
@@ -10,10 +10,12 @@
 
 import { DOM, BdUI } from './ui';
 import BdCss from './styles/index.scss';
-import { Events } from './modules';
+import { Events, CssEditor } from './modules';
 
 class BetterDiscord {
     constructor() {
+        window.DOM = DOM;
+        window.cssEditorTest = CssEditor;
         DOM.injectStyle(BdCss, 'bdmain');
         Events.on('global-ready', this.globalReady.bind(this));
         Events.emit('global-ready'); // Emit for now
diff --git a/client/src/modules/csseditor.js b/client/src/modules/csseditor.js
new file mode 100644
index 00000000..0721f7aa
--- /dev/null
+++ b/client/src/modules/csseditor.js
@@ -0,0 +1,26 @@
+/**
+ * BetterDiscord CSS Editor Module
+ * Copyright (c) 2015-present Jiiks/JsSucks - https://github.com/Jiiks / https://github.com/JsSucks
+ * All rights reserved.
+ * https://betterdiscord.net
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+*/
+
+import { ClientIPC } from '../../../common/modules';
+import { DOM } from '../ui';
+
+export default class {
+
+    static async show() {
+        const t = await ClientIPC.send('openCssEditor', {});
+        if (t === 1) ClientIPC.send('setCss', { css: DOM.getStyleCss('bd-customcss') });
+
+        ClientIPC.on('bd-update-css', this.updateCss);
+    }
+
+    static updateCss(e, css) {
+        DOM.injectStyle(css, 'bd-customcss');
+    }
+}
diff --git a/client/src/modules/index.js b/client/src/modules/index.js
index 73d1f3df..63af24e5 100644
--- a/client/src/modules/index.js
+++ b/client/src/modules/index.js
@@ -1,2 +1,3 @@
 export { default as Events } from './events';
 export { default as Settings } from './settings';
+export { default as CssEditor } from './csseditor';
\ No newline at end of file
diff --git a/client/src/ui/components/BdSettings.vue b/client/src/ui/components/BdSettings.vue
index 8276916f..330fed33 100644
--- a/client/src/ui/components/BdSettings.vue
+++ b/client/src/ui/components/BdSettings.vue
@@ -45,7 +45,7 @@
     // Imports
     import { Settings } from '../../modules';
     import { SidebarView, Sidebar, SidebarItem, ContentColumn } from './sidebar';
-    import { CoreSettings } from './bd';
+    import { CoreSettings, UISettings, EmoteSettings } from './bd';
     import { SvgX } from './common';
 
     // Constants
@@ -79,7 +79,7 @@
         },
         components: {
             SidebarView, Sidebar, SidebarItem, ContentColumn,
-            CoreSettings,
+            CoreSettings, UISettings, EmoteSettings,
             SvgX
         },
         methods: {
@@ -109,6 +109,18 @@
                 const item = this.sidebarItems.find(item => item.contentid === s);
                 if (!item) return false;
                 return item.id === this.lastActiveIndex;
+            },
+            enableSetting(cat, id) {
+                switch (cat) {
+                    case 'core':
+                        return this.coreSettings.find(setting => setting.id === id).enabled = true;
+                }
+            },
+            disableSetting(cat, id) {
+                switch (cat) {
+                    case 'core':
+                        return this.coreSettings.find(setting => setting.id === id).enabled = false;
+                }
             }
         }
     }
diff --git a/client/src/ui/components/bd/CssEditor.vue b/client/src/ui/components/bd/CssEditor.vue
index 08f2e45d..0e8a992a 100644
--- a/client/src/ui/components/bd/CssEditor.vue
+++ b/client/src/ui/components/bd/CssEditor.vue
@@ -8,28 +8,60 @@
  * LICENSE file in the root directory of this source tree.
 */
 
-<template src="./templates/CssEditor.html">
+<template>
+    <SettingsWrapper headertext="CSS Editor">
+        <div class="bd-css-editor">
+            <div class="bd-form-item">
+                <h5>Custom Editor</h5>
+                <div class="bd-form-warning">
+                    <div class="bd-text">Custom Editor is not installed!</div>
+                    <FormButton>
+                        Install
+                    </FormButton>
+                </div>
+                <span style="color: #FFF; font-size: 12px; font-weight: 700;">*This is displayed if editor is not installed</span>
+                <FormButton :onClick="openInternalEditor">
+                    Open
+                </FormButton>
+            </div>
+            <div class="bd-form-divider"></div>
+            <SettingSwitch :setting="dummySetting" :onClick="settingClicked" />
+            <div class="bd-form-item">
+                <h5>System Editor</h5>
+                <FormButton>
+                    Open
+                </FormButton>
+            </div>
+            <div class="bd-form-divider"></div>
+            <FormButton :onClick="settingClicked">
+                Enabled
+            </FormButton>
+            <FormButton :disabled="true">
+                <span>Disabled</span>
+            </FormButton>
+            <FormButton :loading="true" />
+        </div>
+    </SettingsWrapper>
 </template>
 
 <script>
-    const { CssEditor } = require('../../../');
-
-    /*Imports*/
+    // Imports
+    import CssEditor from '../../';
     import { SettingsWrapper } from './';
-    import { SettingSwitch, FormButton } from '../generic';
-    const components = { SettingsWrapper, SettingSwitch, FormButton };
-
-    function openInternalEditor() {
-        CssEditor.show();
-    }
-
-    function settingClicked() {
-        this.dummySetting.checked = !this.dummySetting.checked;
-    }
+    import { SettingSwitch, FormButton } from '../common';
 
     export default {
-        components,
-        methods: { openInternalEditor, settingClicked },
+        components: {
+            SettingsWrapper,
+            SettingSwitch, FormButton
+        },
+        methods: {
+            openInternalEditor() {
+
+            },
+            settingClicked() {
+            }
+        },
         data() {
             return {
                 dummySetting: {
diff --git a/client/src/ui/components/bd/EmoteSettings.vue b/client/src/ui/components/bd/EmoteSettings.vue
new file mode 100644
index 00000000..3a5311d1
--- /dev/null
+++ b/client/src/ui/components/bd/EmoteSettings.vue
@@ -0,0 +1,27 @@
+                                                         /**
+ * BetterDiscord Emote Settings Component
+ * Copyright (c) 2015-present Jiiks/JsSucks - https://github.com/Jiiks / https://github.com/JsSucks
+ * All rights reserved.
+ * https://betterdiscord.net
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+*/
+
+<template>
+    <SettingsWrapper headertext="Emote Settings">
+    </SettingsWrapper>
+</template>
+
+<script>
+    // Imports
+    import { SettingsWrapper } from './';
+    import { SettingSwitch } from '../common';
+
+    export default {
+        components: {
+            SettingsWrapper,
+            SettingSwitch
+        }
+    }
+</script>
diff --git a/client/src/ui/components/bd/UISettings.vue b/client/src/ui/components/bd/UISettings.vue
new file mode 100644
index 00000000..b940c5a4
--- /dev/null
+++ b/client/src/ui/components/bd/UISettings.vue
@@ -0,0 +1,27 @@
+                                                         /**
+ * BetterDiscord UI Settings Component
+ * Copyright (c) 2015-present Jiiks/JsSucks - https://github.com/Jiiks / https://github.com/JsSucks
+ * All rights reserved.
+ * https://betterdiscord.net
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+*/
+
+<template>
+    <SettingsWrapper headertext="UI Settings">
+    </SettingsWrapper>
+</template>
+
+<script>
+    // Imports
+    import { SettingsWrapper } from './';
+    import { SettingSwitch } from '../common';
+
+    export default {
+        components: {
+            SettingsWrapper,
+            SettingSwitch
+        }
+    }
+</script>
diff --git a/client/src/ui/components/bd/index.js b/client/src/ui/components/bd/index.js
index f10f3b57..5428733f 100644
--- a/client/src/ui/components/bd/index.js
+++ b/client/src/ui/components/bd/index.js
@@ -1,2 +1,5 @@
 export { default as SettingsWrapper } from './SettingsWrapper.vue';
 export { default as CoreSettings } from './CoreSettings.vue';
+export { default as UISettings } from './UISettings.vue';
+export { default as EmoteSettings } from './EmoteSettings.vue';
+export { default as CssEditor } from './CssEditor.vue';
\ No newline at end of file
diff --git a/client/src/ui/dom.js b/client/src/ui/dom.js
index 5b26d2f7..84af116b 100644
--- a/client/src/ui/dom.js
+++ b/client/src/ui/dom.js
@@ -69,6 +69,11 @@ class DOM {
         this.bdStyles.append(this.createStyle(css, id));
     }
 
+    static getStyleCss(id) {
+        const exists = this.getElement(`bd-styles > #${id}`);
+        return exists.textContent || '';
+    }
+
     static deleteTheme(id) {
         const exists = this.getElement(`bd-themes > #${id}`);
         if (exists) exists.remove();
diff --git a/common/modules/bdipc.js b/common/modules/bdipc.js
new file mode 100644
index 00000000..89d287cc
--- /dev/null
+++ b/common/modules/bdipc.js
@@ -0,0 +1,53 @@
+/**
+ * BetterDiscord IPC Module
+ * Copyright (c) 2015-present Jiiks/JsSucks - https://github.com/Jiiks / https://github.com/JsSucks
+ * All rights reserved.
+ * https://betterdiscord.net
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+*/
+
+const { ipcRenderer, ipcMain } = require('electron');
+
+export class ClientIPC {
+    static on(channel, cb) {
+        ipcRenderer.on(channel, (event, message) => cb(event, message));
+    }
+
+    static async send(channel, message) {
+        channel = channel.startsWith('bd-') ? channel : `bd-${channel}`;
+        const __eid = Date.now().toString();
+        ipcRenderer.send(channel, Object.assign(message ? message : {}, { __eid }));
+        return new Promise((resolve, reject) => {
+            ipcRenderer.once(__eid, (event, arg) => resolve(arg));
+        });
+    }
+}
+
+class BDIpcEvent {
+
+    constructor(event, args) {
+        this.args = args;
+        this.ipcEvent = event;
+    }
+
+    bindings() {
+        this.send = this.send.bind(this);
+        this.reply = this.reply.bind(this);
+    }
+
+    send(message) {
+        this.ipcEvent.sender.send(this.args.__eid, message);
+    }
+
+    reply(message) {
+        this.send(message);
+    }
+}
+
+export class CoreIPC {
+    static on(channel, cb) {
+        ipcMain.on(channel, (event, args) => cb(new BDIpcEvent(event, args)));
+    }
+}
diff --git a/common/modules/index.js b/common/modules/index.js
new file mode 100644
index 00000000..b9428a35
--- /dev/null
+++ b/common/modules/index.js
@@ -0,0 +1 @@
+export { ClientIPC } from './bdipc';
\ No newline at end of file