Added 'Clocko' widget

clocko/index.html

@@ -0,0 +1,16 @@
+
+<link rel="stylesheet" href="./style.css" />
+<div id="main-container">
+	<div style="display: flex; flex-direction: column;">
+		<label id="line1" class="timeLabel"></label>
+		<label id="line2" class="timeLabel"></label>
+		<label id="line3" class="timeLabel"></label>
+	</div>
+</div>
+
+<script src="/.common/utils/helpers.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/dayjs@1/plugin/utc.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/dayjs@1/plugin/timezone.min.js"></script>'
+<script src="https://cdn.jsdelivr.net/npm/dayjs@1/plugin/advancedFormat.js"></script>'
+<script src="./script.js"></script>

clocko/script.js

@@ -0,0 +1,104 @@
+/////////////
+// IMPORTS //
+/////////////
+
+dayjs.extend(window.dayjs_plugin_utc);
+dayjs.extend(window.dayjs_plugin_timezone);
+dayjs.extend(window.dayjs_plugin_advancedFormat);
+
+////////////////////
+// URL PARAMETERS //
+////////////////////
+
+const queryString = window.location.search;
+const urlParams = new URLSearchParams(queryString);
+
+///////////////////
+// PAGE ELEMENTS //
+///////////////////
+
+const mainContainer = document.getElementById('main-container');
+const line1 = document.getElementById('line1');
+const line2 = document.getElementById('line2');
+const line3 = document.getElementById('line3');
+
+/////////////
+// OPTIONS //
+/////////////
+
+const enableLine1 = GetBooleanParam("enableLine1", true);
+const line1Format = urlParams.get("line1Format") || "ddd DD MMM YYYY hh:mm:ss A z";
+const line1Font = urlParams.get("line1Font") || "";
+const line1FontSize = GetIntParam("line1FontSize", 40);
+const line1FontWeight = urlParams.get("line1FontWeight") || "400";
+const line1FontColor = urlParams.get("line1FontColor") || "#ffffff";
+const line1FontOpacity = urlParams.get("line1FontOpacity") || "1";
+const line1TextAlignment = urlParams.get("line1TextAlignment") || "center";
+
+const enableLine2 = GetBooleanParam("enableLine2", false);
+const line2Format = urlParams.get("line2Format") || "hh:mm:ss A";
+const line2Font = urlParams.get("line2Font") || "";
+const line2FontSize = GetIntParam("line2FontSize", 40);
+const line2FontWeight = urlParams.get("line2FontWeight") || "400";
+const line2FontColor = urlParams.get("line2FontColor") || "#ffffff";
+const line2FontOpacity = urlParams.get("line2FontOpacity") || "1";
+const line2TextAlignment = urlParams.get("line2TextAlignment") || "center";
+
+const enableLine3 = GetBooleanParam("enableLine3", false);
+const line3Format = urlParams.get("line3Format") || "ddd DD MMM YYYY";
+const line3Font = urlParams.get("line3Font") || "";
+const line3FontSize = GetIntParam("line3FontSize", 40);
+const line3FontWeight = urlParams.get("line3FontWeight") || "400";
+const line3FontColor = urlParams.get("line3FontColor") || "#ffffff";
+const line3FontOpacity = urlParams.get("line3FontOpacity") || "1";
+const line3TextAlignment = urlParams.get("line3TextAlignment") || "center";
+
+
+
+////////////////
+// PAGE SETUP //
+////////////////
+
+if (!enableLine1)
+    line1.style.display = "none";
+if (!enableLine2)
+    line2.style.display = "none";
+if (!enableLine3)
+    line3.style.display = "none";
+
+
+
+////////////
+// CLOCKO //
+////////////
+
+UpdateTime();
+setInterval(() => {
+    UpdateTime();
+}, 1000);
+
+function UpdateTime() {
+    line1.textContent = dayjs().tz(dayjs.tz.guess()).format(line1Format);
+    line2.textContent = dayjs().tz(dayjs.tz.guess()).format(line2Format);
+    line3.textContent = dayjs().tz(dayjs.tz.guess()).format(line3Format);
+}
+
+
+
+/////////////
+// STYLING //
+/////////////
+
+function ApplyStyling(el, font, fontSize, fontWeight, fontColor, fontOpacity, textAlignment) {
+    if (font)
+        el.style.fontFamily = `'${font}'`;
+    el.style.fontSize = fontSize + "px";
+    el.style.fontWeight = fontWeight;
+    el.style.color = fontColor;
+    el.style.opacity = fontOpacity;
+    el.style.textAlign = textAlignment;
+}
+
+ApplyStyling(line1, line1Font, line1FontSize, line1FontWeight, line1FontColor, line1FontOpacity, line1TextAlignment);
+ApplyStyling(line2, line2Font, line2FontSize, line2FontWeight, line2FontColor, line2FontOpacity, line2TextAlignment);
+ApplyStyling(line3, line3Font, line3FontSize, line3FontWeight, line3FontColor, line3FontOpacity, line3TextAlignment);

clocko/settings/index.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" href="/.common/resources/logo.png" type="image/png">
+    <title>nutty</title>
+    <style>
+        body {
+            margin: 0;
+            display: flex;
+            background: #181818;
+        }
+
+        #widgetContainer {
+            width: 100vw;
+            height: 100vh;
+            border-width: 0px;
+        }
+    </style>
+</head>
+
+<body>
+    <iframe id="widgetContainer"></iframe>
+    <script src="script.js"></script>
+</body>
+
+</html>

clocko/settings/script.js

@@ -0,0 +1,26 @@
+const widgetContainer = document.getElementById('widgetContainer');
+
+const settingsPageURL = '/.common/core/settings-core';
+
+const currentURL = window.location.href;
+
+let settingsJSON;
+let baseURL = currentURL;
+
+if (baseURL.endsWith("index.html"))
+    baseURL = baseURL.replace("index.html", "");
+
+settingsJSON = "?settingsJson=" + baseURL + "settings.json";
+
+const lastSlashIndex = baseURL.lastIndexOf("/");
+let widgetURL = "&widgetURL=" + baseURL.replace("/settings", "");
+
+const usesStreamerBot = "&usesStreamerBot=false";
+
+console.debug("Window Ref: " + window.location.href);
+console.debug("Base URL: " + baseURL);
+console.debug("Settings JSON: " + settingsJSON);
+console.debug("Widget URL: " + widgetURL);
+console.debug("Uses Streamer Bot: " + usesStreamerBot);
+
+widgetContainer.src = settingsPageURL + settingsJSON + widgetURL + usesStreamerBot;

clocko/settings/settings.json

@@ -0,0 +1,280 @@
+{
+    "settings": [
+        {
+            "id": "enableLine1",
+            "label": "Enable Line 1",
+            "description": "Show the first line of the clock",
+            "type": "checkbox",
+            "defaultValue": true,
+            "group": "Appearance"
+        },
+        {
+            "id": "line1Format",
+            "label": "Format",
+            "description": "<a href='https://day.js.org/docs/en/display/format' target='_blank'>Click here for formatting options</a>",
+            "type": "text",
+            "defaultValue": "ddd DD MMM YYYY hh:mm:ss A z",
+            "showIf": "enableLine1",
+            "group": "Appearance"
+        },
+        {
+            "id": "line1Font",
+            "label": "Font",
+            "description": "",
+            "type": "text",
+            "defaultValue": "",
+            "showIf": "enableLine1",
+            "group": "Appearance"
+        },
+        {
+            "id": "line1FontSize",
+            "label": "Font Size",
+            "description": "",
+            "type": "number",
+            "min": 1,
+            "max": 120,
+            "defaultValue": 50,
+            "showIf": "enableLine1",
+            "group": "Appearance"
+        },
+        {
+            "id": "line1FontWeight",
+            "label": "Font Weight",
+            "description": "",
+            "type": "select",
+            "options": [
+                { "value": "100", "label": "Thin" },
+                { "value": "200", "label": "Extra Light" },
+                { "value": "300", "label": "Light" },
+                { "value": "400", "label": "Regular" },
+                { "value": "500", "label": "Medium" },
+                { "value": "600", "label": "Semi Bold" },
+                { "value": "700", "label": "Bold" },
+                { "value": "800", "label": "Extra Bold" },
+                { "value": "900", "label": "Black" }
+            ],
+            "defaultValue": "700",
+            "showIf": "enableLine1",
+            "group": "Appearance"
+        },
+        {
+            "id": "line1FontColor",
+            "label": "Font Color",
+            "description": "",
+            "type": "color",
+            "defaultValue": "#ffffff",
+            "showIf": "enableLine1",
+            "group": "Appearance"
+        },
+        {
+            "id": "line1FontOpacity",
+            "label": "Font Opacity",
+            "description": "",
+            "type": "number",
+            "defaultValue": "1",
+            "min": 0,
+            "max": 1,
+            "step": ".01",
+            "showIf": "enableLine1",
+            "group": "Appearance"
+        },
+        {
+            "id": "line1TextAlignment",
+            "label": "Text Alignment",
+            "description": "",
+            "type": "select",
+            "options": [
+                { "value": "left", "label": "Left" },
+                { "value": "center", "label": "Center" },
+                { "value": "right", "label": "Right" }
+            ],
+            "defaultValue": "center",
+            "showIf": "enableLine1",
+            "group": "Appearance"
+        },
+        {
+            "id": "enableLine2",
+            "label": "Enable Line 2",
+            "description": "Show the second line of the clock",
+            "type": "checkbox",
+            "defaultValue": false,
+            "group": "Appearance"
+        },
+        {
+            "id": "line2Format",
+            "label": "Format",
+            "description": "<a href='https://day.js.org/docs/en/display/format' target='_blank'>Click here for formatting options</a>",
+            "type": "text",
+            "defaultValue": "hh:mm:ss A",
+            "showIf": "enableLine2",
+            "group": "Appearance"
+        },
+        {
+            "id": "line2Font",
+            "label": "Font",
+            "description": "",
+            "type": "text",
+            "defaultValue": "",
+            "showIf": "enableLine2",
+            "group": "Appearance"
+        },
+        {
+            "id": "line2FontSize",
+            "label": "Font Size",
+            "description": "",
+            "type": "number",
+            "min": 1,
+            "max": 120,
+            "defaultValue": 40,
+            "showIf": "enableLine2",
+            "group": "Appearance"
+        },
+        {
+            "id": "line2FontWeight",
+            "label": "Font Weight",
+            "description": "",
+            "type": "select",
+            "options": [
+                { "value": "100", "label": "Thin" },
+                { "value": "200", "label": "Extra Light" },
+                { "value": "300", "label": "Light" },
+                { "value": "400", "label": "Regular" },
+                { "value": "500", "label": "Medium" },
+                { "value": "600", "label": "Semi Bold" },
+                { "value": "700", "label": "Bold" },
+                { "value": "800", "label": "Extra Bold" },
+                { "value": "900", "label": "Black" }
+            ],
+            "defaultValue": "600",
+            "showIf": "enableLine2",
+            "group": "Appearance"
+        },
+        {
+            "id": "line2FontColor",
+            "label": "Font Color",
+            "description": "",
+            "type": "color",
+            "defaultValue": "#ffffff",
+            "showIf": "enableLine2",
+            "group": "Appearance"
+        },
+        {
+            "id": "line2FontOpacity",
+            "label": "Font Opacity",
+            "description": "",
+            "type": "number",
+            "defaultValue": "0.9",
+            "min": 0,
+            "max": 1,
+            "step": ".01",
+            "showIf": "enableLine2",
+            "group": "Appearance"
+        },
+        {
+            "id": "line2TextAlignment",
+            "label": "Text Alignment",
+            "description": "",
+            "type": "select",
+            "options": [
+                { "value": "left", "label": "Left" },
+                { "value": "center", "label": "Center" },
+                { "value": "right", "label": "Right" }
+            ],
+            "defaultValue": "center",
+            "showIf": "enableLine2",
+            "group": "Appearance"
+        },
+        {
+            "id": "enableLine3",
+            "label": "Enable Line 3",
+            "description": "Show the third line of the clock",
+            "type": "checkbox",
+            "defaultValue": false,
+            "group": "Appearance"
+        },
+        {
+            "id": "line3Format",
+            "label": "Format",
+            "description": "<a href='https://day.js.org/docs/en/display/format' target='_blank'>Click here for formatting options</a>",
+            "type": "text",
+            "defaultValue": "ddd DD MMM YYYY",
+            "showIf": "enableLine3",
+            "group": "Appearance"
+        },
+        {
+            "id": "line3Font",
+            "label": "Font",
+            "description": "",
+            "type": "text",
+            "defaultValue": "",
+            "showIf": "enableLine3",
+            "group": "Appearance"
+        },
+        {
+            "id": "line3FontSize",
+            "label": "Font Size",
+            "description": "",
+            "type": "number",
+            "min": 1,
+            "max": 120,
+            "defaultValue": 30,
+            "showIf": "enableLine3",
+            "group": "Appearance"
+        },
+        {
+            "id": "line3FontWeight",
+            "label": "Font Weight",
+            "description": "",
+            "type": "select",
+            "options": [
+                { "value": "100", "label": "Thin" },
+                { "value": "200", "label": "Extra Light" },
+                { "value": "300", "label": "Light" },
+                { "value": "400", "label": "Regular" },
+                { "value": "500", "label": "Medium" },
+                { "value": "600", "label": "Semi Bold" },
+                { "value": "700", "label": "Bold" },
+                { "value": "800", "label": "Extra Bold" },
+                { "value": "900", "label": "Black" }
+            ],
+            "defaultValue": "400",
+            "showIf": "enableLine3",
+            "group": "Appearance"
+        },
+        {
+            "id": "line3FontColor",
+            "label": "Font Color",
+            "description": "",
+            "type": "color",
+            "defaultValue": "#ffffff",
+            "showIf": "enableLine3",
+            "group": "Appearance"
+        },
+        {
+            "id": "line3FontOpacity",
+            "label": "Font Opacity",
+            "description": "",
+            "type": "number",
+            "defaultValue": "0.7",
+            "min": 0,
+            "max": 1,
+            "step": ".01",
+            "showIf": "enableLine3",
+            "group": "Appearance"
+        },
+        {
+            "id": "line3TextAlignment",
+            "label": "Text Alignment",
+            "description": "",
+            "type": "select",
+            "options": [
+                { "value": "left", "label": "Left" },
+                { "value": "center", "label": "Center" },
+                { "value": "right", "label": "Right" }
+            ],
+            "defaultValue": "center",
+            "showIf": "enableLine3",
+            "group": "Appearance"
+        }
+    ]
+}

clocko/style.css

@@ -0,0 +1,29 @@
+* {
+	margin: 0;
+	padding: 0;
+}
+
+#main-container {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	box-sizing: border-box;
+    height: 95vh;
+    padding: 1em;
+}
+
+.timeLabel {
+	font-size: 40px;
+	text-transform: uppercase;
+	font-family: 'Inter', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
+	/* text-shadow: rgb(0, 0, 0) 2px 2px 2px; */
+	color: white;
+}
+
+#line1 {
+	text-align: center;
+}
+
+#line2 {
+	text-align: right;
+}