Skip to content

Commit

Permalink
Removed NPM dependency, fixed checkboxes when false
Browse files Browse the repository at this point in the history
  • Loading branch information
@izzy
izzy committed Apr 18, 2022
1 parent c8d963d commit e9c1d88
Show file tree
Hide file tree
Showing 2 changed files with 131 additions and 57 deletions.
113 changes: 88 additions & 25 deletions generator.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,38 +5,101 @@
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
<title></title>

<style>
body {
font-family: sans-serif;
}

section {
display: block;
margin-bottom: 2rem;
}

input {
margin: 0.5em;
}

input:not([type="color"]) {
padding: 0.5em;
}

#url {
width: 20rem;
}

#obs-url {
background: #256eff;
border-radius: 1rem;
padding: 2rem;
color: #fff;
text-decoration: none;
display: block;
width: 12rem;
text-align: center;
}

#chat-frame {
float: left;
}

#chat-frame>iframe {
border: 0;
height: 500px;
}

#config>form {
margin-left: 1rem;
float: left;

}

#config>form>span {
width: 100%;
display: block;
padding: 0.4rem 0rem;
}

#config>form>span>label:first-child {
width: 5rem;
display: inline-block;
width: 13rem;
}
</style>
</head>

<body><section class="section"> <h1 class="title" >Twitch Chat Overlay URL generator</h1>
<h2 class="subtitle" >based on <a href="https://github.com/izzy/twitch-chat" target="_blank" rel="noreferrer">https://github.com/izzy/twitch-chat</a> </h2>
<label class="checkbox">
<input type="checkbox" value="debug" checked id="debug" />Use fake message</label>

</section>
<section class="section">

<div class="columns is-multiline">
<div class="column is-full">
<div class="columns">
<span class="column is-10"> <input class="input" readonly id="url" style="width:100%"></input></span>
<span class="column is-2"><button class="button" id="copy-button">Copy</button></span>
</div>
<body>
<section id="header">
<h1 class="title">Twitch Chat Overlay URL generator</h1>
<h2 class="subtitle">based on <a href="https://github.com/izzy/twitch-chat" target="_blank"
rel="noreferrer">https://github.com/izzy/twitch-chat</a> </h2>
</section>

<section id="url-">
<div>
<div>
<input class="input" type="text" readonly id="url" />
<button class="button" id="copy-button">Copy</button>
</div>

<div>
<a id="obs-url">Drag me into OBS</a>
(this does not work when OBS is running with Administrator privileges)
</div>
</div>

<div><label class="checkbox"><input type="checkbox" value="debug" checked id="debug" />Disable live preview mode</label></div>
</section>

<section>
<div id="config">
<div id="chat-frame">
<iframe src="./chat.html" height="100%" id="preview"></iframe>
</div>

<div class="column">
<div class="columns">
<div class="column is-one-quarter">
<iframe src="./chat.html" height="100%" id="preview"></iframe>
</div>

<div class="column is-three-quarters">
<form id="generator" class="columns is-multiline" ></form>
</div>
<form id="generator"></form>
</div>
</div>
</section>
<script src="./generator.js"></script>
</body>
Expand Down
75 changes: 43 additions & 32 deletions generator.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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")
Expand Down Expand Up @@ -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 || "";


}
}

Expand All @@ -118,16 +112,10 @@ async function buildMarkup() {
return rowEl;
})




generatorEl.append(...textElements);
generateURL();


}


const availableFonts = async () => {
await document.fonts.ready;

Expand All @@ -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)
Expand All @@ -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) => {
Expand All @@ -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 = () => {
Expand All @@ -187,9 +199,8 @@ const copyToClipBoard = () => {
});
}


copyButton.addEventListener("click", copyToClipBoard)
generatorEl.addEventListener("change", generateURL)
debugSwitch.addEventListener("change", generateURL)

buildMarkup();
buildMarkup();

0 comments on commit e9c1d88

Please sign in to comment.