+
+
+
-
diff --git a/generator.js b/generator.js
index 07256bd..386be93 100644
--- a/generator.js
+++ b/generator.js
@@ -10,41 +10,41 @@ const fontCheck = new Set([
const fields = [
- // { label: "Font", name: "font", type: "fontlist" },
{ label: "Websocket URI", name: "ws_uri", type: "text", defaultValue: "ws://localhost:8080" },
- { label: "Direction", name: "direction", type: "text" },
+ { label: "Direction (horizontal if enabled)", name: "direction", type: "checkbox" },
{ label: "Bubbles", name: "bubbles", type: "checkbox" },
{ label: "Background", name: "background", type: "color", defaultValue: "#FFFFFF", nullable: true },
{ label: "Background Color", name: "background_color", type: "color", defaultValue: "#FFFFFF", nullable: true },
{ label: "Text Color", name: "text_color", type: "color", nullable: true, },
{ label: "Default Color", name: "background", type: "color", nullable: true },
{ label: "Badges", name: "badges", type: "checkbox" },
- { label: "Highlights", name: "highlights", type: "checkbox" },
+ { label: "Highlights", name: "highlights", type: "checkbox", defaultValue: false },
{ label: "Timestamp", name: "timestamp", type: "checkbox", defaultValue: false },
{ label: "Timestamp locale", name: "timestamp_locale", type: "text", defaultValue: "en-US" },
{ label: "Cmdprefix", name: "cmdprefix", type: "text", nullable: true },
{ label: "Bots", name: "bots", type: "text", nullable: true },
- { label: "Fade duration", name: "Fade_duration", type: "number", nullable: true }
+ { label: "Fade duration", name: "Fade_duration", type: "number", nullable: true },
+ { label: "Font Family", name: "fontfamily", type: "text", nullable: true },
+ { label: "Font size", name: "fontsize", type: "text", nullable: true },
+ { label: "OBS Layer width", name: "layer-width", type: "number", defaultValue: "300" },
+ { label: "OBS Layer height", name: "layer-height", type: "number", defaultValue: "500" },
+ { label: "OBS Layer name", name: "layer-name", type: "text", defaultValue: "Chat Overlay" },
]
const iframe = document.querySelector("#preview");
+const chatFrame = document.querySelector("#chat-frame");
+const obsLink = document.querySelector("#obs-url");
const baseUrl = window.location.href.replace("generator.html", "chat.html?");
const copyButton = document.querySelector("#copy-button");
const urlEl = document.querySelector("#url")
const generatorEl = document.querySelector("#generator");
const debugSwitch = document.querySelector("#debug");
-async function buildMarkup() {
-
-
-
-
+async function buildMarkup() {
const textElements = fields.map(({ label, name, type, defaultValue, nullable }) => {
const rowEl = document.createElement("span");
- rowEl.classList.add("column")
- rowEl.classList.add("is-one-quarter");
- rowEl.style = "outline: 1px solid; margin-top: 1px;margin-left: 1px;"
+
switch (type) {
case "fontlist": {
var inputEl = document.createElement("select")
@@ -78,21 +78,15 @@ async function buildMarkup() {
}
default: {
- var inputEl = document.createElement("input", {
+ var inputEl = document.createElement("input", {});
- })
inputEl.name = name;
if (type !== "color") {
- inputEl.classList.add("input")
-
+ inputEl.classList.add("input");
}
inputEl.type = type;
-
-
inputEl.value = defaultValue || "";
-
-
}
}
@@ -118,16 +112,10 @@ async function buildMarkup() {
return rowEl;
})
-
-
-
generatorEl.append(...textElements);
generateURL();
-
-
}
-
const availableFonts = async () => {
await document.fonts.ready;
@@ -144,6 +132,7 @@ const availableFonts = async () => {
const generateURL = () => {
const searchParams = new URLSearchParams
+ const checkboxes = document.querySelectorAll("input[type=checkbox]");
const formData = new FormData(document.querySelector("#generator"));
for ([key, value] of formData.entries()) {
console.log(key, value)
@@ -152,21 +141,41 @@ const generateURL = () => {
if (isNullable && !isNullable.checked) {
continue;
}
+
+ // Change the chat preview direction dynamically
+ if (key === "direction") {
+ searchParams.append(key, value === true ? "vertical" : "horizontal");
+
+ if (value === true) {
+ iframe.style.width = "300px";
+ iframe.style.height = "500px";
+ chatFrame.style.float = "left";
+ } else {
+ iframe.style.width = "100%";
+ iframe.style.height = "6rem";
+ chatFrame.style.float = "none";
+ }
+ }
+
+ // Colour values
if (value[0] === "#") {
value = value.slice(1)
}
+
if (value === key) {
searchParams.append(key, true)
} else {
searchParams.append(key, value)
}
-
-
}
-
}
- setUrl(baseUrl + searchParams.toString())
+ checkboxes.forEach((c) => {
+ if (c.checked === false && c.name) {
+ searchParams.append(c.name, "false")
+ }
+ });
+ setUrl(baseUrl + searchParams.toString())
}
const setUrl = (url) => {
@@ -175,8 +184,11 @@ const setUrl = (url) => {
iUrl = url + "&debug=true";
}
iframe.src = iUrl;
+ obsLink.href = iUrl;
urlEl.value = url;
+
+ console.log(["new url: ", url]);
}
const copyToClipBoard = () => {
@@ -187,9 +199,8 @@ const copyToClipBoard = () => {
});
}
-
copyButton.addEventListener("click", copyToClipBoard)
generatorEl.addEventListener("change", generateURL)
debugSwitch.addEventListener("change", generateURL)
-buildMarkup();
+buildMarkup();
\ No newline at end of file