Implement the main features of the CSS Editor
This commit is contained in:
samfun123
parent
6b0423ebb0
commit
5251d42c2f
|
|
@ -11,6 +11,9 @@
|
|||
const { ipcRenderer } = require('electron');
|
||||
|
||||
class BDIpc {
|
||||
static on(channel, cb) {
|
||||
ipcRenderer.on(channel, (event, message) => cb(event, message));
|
||||
}
|
||||
|
||||
static async send(channel, message) {
|
||||
channel = channel.startsWith('bd-') ? channel : `bd-${channel}`;
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@
|
|||
|
||||
const { Module } = require('./modulebase');
|
||||
const { BDIpc } = require('./bdipc');
|
||||
const $ = require('jquery');
|
||||
|
||||
class CssEditor extends Module {
|
||||
|
||||
|
|
@ -17,11 +18,15 @@ class CssEditor extends Module {
|
|||
this.state = {
|
||||
css: ''
|
||||
}
|
||||
this.customcss = $('<style id="customcss">').appendTo("head");
|
||||
window.cssEditor = this;
|
||||
|
||||
BDIpc.on("bd-update-css", (_, css) => this.customcss.text(css));
|
||||
BDIpc.on("bd-save-css", (_, css) => this.setState({css}));
|
||||
}
|
||||
|
||||
show() {
|
||||
BDIpc.send('openCssEditor', {});
|
||||
BDIpc.send('openCssEditor', {}).then(() => BDIpc.send('setCss', {css: this.state.css}));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -51,9 +51,8 @@ class Comms {
|
|||
o.reply(Common.Config.config);
|
||||
});
|
||||
|
||||
BDIpc.on('bd-openCssEditor', o => {
|
||||
o.reply(CSSEditor.openEditor());
|
||||
});
|
||||
BDIpc.on('bd-openCssEditor', o => CSSEditor.openEditor(o));
|
||||
BDIpc.on('bd-setCss', o => CSSEditor.setCSS(o.args));
|
||||
|
||||
BDIpc.on('bd-readFile', this.readFile);
|
||||
BDIpc.on('bd-readJson', o => this.readFile(o, true));
|
||||
|
|
@ -106,6 +105,7 @@ class BetterDiscord {
|
|||
this.windowUtils.send('did-navigate-in-page', { event, url, isMainFrame });
|
||||
});
|
||||
|
||||
BDIpc.on('bd-sendToDiscord', event => this.windowUtils.send(event.args.channel, event.args.message))
|
||||
|
||||
setTimeout(() => {
|
||||
if (__DEV) { this.injectScripts(); }
|
||||
|
|
|
|||
|
|
@ -15,11 +15,11 @@ const { Module } = require('./modulebase');
|
|||
|
||||
class CSSEditor extends Module {
|
||||
|
||||
openEditor() {
|
||||
openEditor(o) {
|
||||
if (this.editor && this.editor.open) {
|
||||
this.editor.focus();
|
||||
this.editor.flashFrame(true);
|
||||
return true;
|
||||
o.reply(true);
|
||||
}
|
||||
|
||||
this.editor = new BrowserWindow(this.options);
|
||||
|
|
@ -30,7 +30,17 @@ class CSSEditor extends Module {
|
|||
this.editor.open = false;
|
||||
});
|
||||
|
||||
return true;
|
||||
this.editor.webContents.on('did-finish-load', () => {
|
||||
o.reply(true);
|
||||
});
|
||||
}
|
||||
|
||||
setCSS(css) {
|
||||
this.editor.webContents.send("set-css", css);
|
||||
}
|
||||
|
||||
set alwaysOnTop(state) {
|
||||
this.editor.setAlwaysOnTop(state);
|
||||
}
|
||||
|
||||
//TODO user options from config
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
<body>
|
||||
<div class="container">
|
||||
<div class="titlebar">
|
||||
<div class="draggable"></div>
|
||||
<div class="icon">
|
||||
<div class="inner"></div>
|
||||
</div>
|
||||
|
|
@ -28,6 +29,7 @@
|
|||
<div class="flex-row">
|
||||
<button id="btnSave">Save</button>
|
||||
<button id="btnUpdate">Update</button>
|
||||
<div id="chkboxLiveUpdate"><input type="checkbox"><span>Live Update</span></div>
|
||||
</div>
|
||||
<div class="flex-row">
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -62,8 +62,12 @@ html, body {
|
|||
line-height: 41px;
|
||||
}
|
||||
|
||||
.titlebar .controls {
|
||||
margin: 4px 4px 0 0;
|
||||
}
|
||||
|
||||
.titlebar .controls button {
|
||||
-webkit-app-region: no-drag;
|
||||
border-radius: 3px;
|
||||
width: 25px;
|
||||
font-size: 12px;
|
||||
|
|
@ -90,6 +94,15 @@ html, body {
|
|||
background: #3a71c1;
|
||||
}
|
||||
|
||||
.titlebar .draggable {
|
||||
top: 4px;
|
||||
left: 4px;
|
||||
right: 62px;
|
||||
position: absolute;
|
||||
height: 36px;
|
||||
-webkit-app-region: drag;
|
||||
}
|
||||
|
||||
#spinner {
|
||||
background: rgba(51, 48, 48, 0.41);
|
||||
position: absolute;
|
||||
|
|
@ -148,6 +161,12 @@ html, body {
|
|||
color: #FFF;
|
||||
}
|
||||
|
||||
.tools #chkboxLiveUpdate span {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #bac9d2;
|
||||
font-family: Whitney,Helvetica Neue,Helvetica,Arial,sans-serif;
|
||||
}
|
||||
|
||||
|
||||
/*CodeMirror styling*/
|
||||
|
|
|
|||
|
|
@ -1,10 +1,16 @@
|
|||
const { remote, ipcRenderer } = require('electron');
|
||||
const { BDIpc } = require('../frontend/main.js');
|
||||
|
||||
//Options
|
||||
const options = {
|
||||
alwaysOnTop: false
|
||||
alwaysOnTop: false,
|
||||
liveUpdate: false
|
||||
};
|
||||
|
||||
function sendToDiscord(channel, message) {
|
||||
BDIpc.send('bd-sendToDiscord', {channel, message});
|
||||
}
|
||||
|
||||
//Elements
|
||||
const
|
||||
$spinner = $('#spinner'),
|
||||
|
|
@ -12,20 +18,32 @@ const
|
|||
$closeeditor = $('#closeeditor'),
|
||||
$editor = $('#editor'),
|
||||
$btnSave = $('#btnSave'),
|
||||
$btnUpdate = $('#btnUpdate');
|
||||
$btnUpdate = $('#btnUpdate'),
|
||||
$chkboxLiveUpdate = $("#chkboxLiveUpdate input");
|
||||
|
||||
$toggleaot.on('click', e => {
|
||||
$toggleaot.toggleClass("active");
|
||||
remote.getCurrentWindow().setAlwaysOnTop(options.alwaysOnTop = !options.alwaysOnTop);
|
||||
});
|
||||
$closeeditor.on('click', e => window.close());
|
||||
|
||||
ipcRenderer.on('set-css', (_, data) => {
|
||||
$btnSave.on('click', () => sendToDiscord("save-css", codeMirror.getValue()));
|
||||
$btnUpdate.on('click', () => sendToDiscord("update-css", codeMirror.getValue()));
|
||||
$chkboxLiveUpdate.on('click', () => options.liveUpdate = $chkboxLiveUpdate[0].checked);
|
||||
|
||||
BDIpc.on("set-css", (_, data) => {
|
||||
if (data.error) {
|
||||
alert(data.error);
|
||||
return;
|
||||
}
|
||||
setCss(data);
|
||||
|
||||
setCss(data.css);
|
||||
$spinner.hide();
|
||||
});
|
||||
|
||||
function setCss(css) {}
|
||||
function setCss(css) {
|
||||
codeMirror.setValue(css);
|
||||
}
|
||||
|
||||
function alert(message) {}
|
||||
|
||||
|
|
@ -47,6 +65,11 @@ const codeMirror = CodeMirror($editor[0], {
|
|||
dialog: { 'position': 'bottom' }
|
||||
});
|
||||
|
||||
codeMirror.on('change', () => {
|
||||
if (options.liveUpdate)
|
||||
sendToDiscord("update-css", codeMirror.getValue());
|
||||
});
|
||||
|
||||
codeMirror.on('keyup', function (editor, event) {
|
||||
if (window.controlDown) return;
|
||||
if (ExcludedIntelliSenseTriggerKeys[event.keyCode]) return;
|
||||
|
|
|
|||
|
|
@ -2,6 +2,10 @@ const { ipcRenderer } = require('electron');
|
|||
|
||||
class BDIpc {
|
||||
|
||||
static on(channel, cb) {
|
||||
ipcRenderer.on(channel, (event, args) => cb(event, args));
|
||||
}
|
||||
|
||||
static async send(channel, message) {
|
||||
const __eid = Date.now().toString();
|
||||
ipcRenderer.send(
|
||||
|
|
@ -17,4 +21,6 @@ class BDIpc {
|
|||
});
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = { BDIpc };
|
||||
Loading…
Reference in New Issue