2019-06-10 05:40:35 +02:00
|
|
|
import Builtin from "../structs/builtin";
|
2019-06-11 04:33:45 +02:00
|
|
|
import {Settings, DataStore, React, Utilities} from "modules";
|
2019-06-10 05:40:35 +02:00
|
|
|
import CSSEditor from "../ui/customcss/editor";
|
|
|
|
|
2019-06-10 22:37:50 +02:00
|
|
|
const electron = require("electron");
|
|
|
|
|
2019-06-10 05:40:35 +02:00
|
|
|
export default new class CustomCSS extends Builtin {
|
|
|
|
get name() {return "Custom CSS";}
|
|
|
|
get category() {return "customcss";}
|
|
|
|
get id() {return "customcss";}
|
2019-06-10 22:37:50 +02:00
|
|
|
get startDetached() {return Settings.get(this.collection, this.category, "startDetached");}
|
|
|
|
get nativeOpen() {return Settings.get(this.collection, this.category, "nativeOpen");}
|
|
|
|
|
|
|
|
constructor() {
|
|
|
|
super();
|
|
|
|
this.css = "";
|
|
|
|
}
|
2019-06-10 05:40:35 +02:00
|
|
|
|
2019-06-11 04:33:45 +02:00
|
|
|
async enabled() {
|
|
|
|
if (!window.ace) {
|
|
|
|
Utilities.injectJs("https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.9/ace.js").then(() => {
|
|
|
|
if (window.require.original) window.require = window.require.original;
|
|
|
|
});
|
|
|
|
}
|
2019-06-10 05:40:35 +02:00
|
|
|
Settings.registerPanel(this.id, this.name, {
|
2019-06-10 22:37:50 +02:00
|
|
|
order: 2,
|
|
|
|
element: () => React.createElement(CSSEditor, {
|
|
|
|
css: this.css,
|
|
|
|
save: this.saveCSS.bind(this),
|
|
|
|
update: this.insertCSS.bind(this),
|
|
|
|
openNative: this.openNative.bind(this)
|
|
|
|
}),
|
|
|
|
onClick: (thisObject) => {
|
|
|
|
if (this.nativeOpen) this.openNative();
|
|
|
|
else if (this.startDetached) this.openDetached();
|
|
|
|
else thisObject._reactInternalFiber.child.memoizedProps.children.props.onSetSection(this.name);
|
|
|
|
}
|
2019-06-10 05:40:35 +02:00
|
|
|
});
|
2019-06-10 22:37:50 +02:00
|
|
|
this.loadCSS();
|
|
|
|
this.insertCSS();
|
2019-06-10 05:40:35 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
disabled() {
|
|
|
|
Settings.removePanel(this.id);
|
|
|
|
}
|
2019-06-10 22:37:50 +02:00
|
|
|
|
|
|
|
loadCSS() {
|
|
|
|
this.css = DataStore.loadCustomCSS();
|
|
|
|
}
|
|
|
|
|
|
|
|
insertCSS(newCss) {
|
|
|
|
if (typeof(newCss) === "undefined") newCss = this.css;
|
|
|
|
if ($("#customcss").length == 0) {
|
|
|
|
$("head").append("<style id=\"customcss\"></style>");
|
|
|
|
}
|
|
|
|
$("#customcss").text(newCss).detach().appendTo(document.head);
|
|
|
|
}
|
|
|
|
|
|
|
|
saveCSS(newCss) {
|
|
|
|
if (typeof(newCss) !== "undefined") this.css = newCss;
|
|
|
|
DataStore.saveCustomCSS(this.css);
|
|
|
|
}
|
|
|
|
|
|
|
|
openNative() {
|
|
|
|
electron.shell.openExternal(`file://${DataStore.customCSS}`);
|
|
|
|
}
|
|
|
|
|
|
|
|
openDetached() {
|
|
|
|
this.log("Should open detached");
|
2019-06-11 04:33:45 +02:00
|
|
|
const options = {
|
|
|
|
width: 500,
|
|
|
|
height: 550,
|
|
|
|
backgroundColor: "#282b30",
|
|
|
|
show: true,
|
|
|
|
resizable: false,
|
|
|
|
maximizable: false,
|
|
|
|
minimizable: false,
|
|
|
|
alwaysOnTop: true,
|
|
|
|
frame: true,
|
|
|
|
center: false,
|
|
|
|
webPreferences: {
|
|
|
|
nodeIntegration: true
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
const detached = new electron.remote.Browserdetached(options);
|
|
|
|
detached.setMenu(null);
|
|
|
|
detached.loadURL("about:blank");
|
|
|
|
detached.webContents.executeJavaScript(`var electron = require("electron");`);
|
|
|
|
detached.webContents.executeJavaScript(`var sender, receiver = electron.ipcRenderer;`);
|
|
|
|
detached.webContents.executeJavaScript(`receiver.on("bd-handshake", function(emitter, senderID) {
|
|
|
|
console.log(arguments);
|
|
|
|
sender = electron.remote.BrowserWindow.fromId(senderID);
|
|
|
|
receiver.removeAllListeners("bd-handshake");
|
|
|
|
});`);
|
|
|
|
detached.send("bd-handshake", electron.remote.getCurrentWindow().id);
|
|
|
|
React.createElement(CSSEditor, {
|
|
|
|
css: this.css,
|
|
|
|
save: this.saveCSS.bind(this),
|
|
|
|
update: this.insertCSS.bind(this),
|
|
|
|
openNative: this.openNative.bind(this)
|
|
|
|
});
|
2019-06-10 22:37:50 +02:00
|
|
|
}
|
2019-06-11 04:33:45 +02:00
|
|
|
};
|
|
|
|
|
|
|
|
// function addListeners(){
|
|
|
|
// document.getElementById('test').addEventListener('mousedown', mouseDown, false);
|
|
|
|
// window.addEventListener('mouseup', mouseUp, false);
|
|
|
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
// function mouseUp()
|
|
|
|
// {
|
|
|
|
// window.removeEventListener('mousemove', divMove, true);
|
|
|
|
// }
|
|
|
|
|
|
|
|
// function mouseDown(e){
|
|
|
|
// var div = document.getElementById('test');
|
|
|
|
// offY= e.clientY-parseInt(div.offsetTop);
|
|
|
|
// offX= e.clientX-parseInt(div.offsetLeft);
|
|
|
|
// window.addEventListener('mousemove', divMove, true);
|
|
|
|
// }
|
|
|
|
|
|
|
|
// function divMove(e){
|
|
|
|
// var div = document.getElementById('test');
|
|
|
|
// div.style.position = 'absolute';
|
|
|
|
// div.style.top = (e.clientY-offY) + 'px';
|
|
|
|
// div.style.left = (e.clientX-offX) + 'px';
|
|
|
|
// }
|