diff --git a/html/js/app.js b/html/js/app.js
index 7a9b374..007f725 100644
--- a/html/js/app.js
+++ b/html/js/app.js
@@ -1,16 +1,29 @@
-import { registerWindowMethods } from "./testing.js";
-import { isEnvBrowser } from "./utils.js";
-import { determineStyleFromVariant, DEV_MODE, fetchNotifyConfig, NOTIFY_CONFIG } from "./config.js";
+import { determineStyleFromVariant, fetchNotifyConfig, NOTIFY_CONFIG } from "./config.js";
const { useQuasar } = Quasar;
const { onMounted, onUnmounted } = Vue;
+const fetchNui = async (evName, data) => {
+ const resourceName = window.GetParentResourceName();
+
+ const rawResp = await fetch(`https://${resourceName}/${evName}`, {
+ body: JSON.stringify(data),
+ headers: {
+ "Content-Type": "application/json; charset=UTF8",
+ },
+ method: "POST",
+ });
+
+ return await rawResp.json();
+};
+
+window.fetchNui = fetchNui;
+
const app = Vue.createApp({
setup() {
const $q = useQuasar();
const showNotif = async ({ data }) => {
- // Otherwise we process any old MessageEvent with a data property
if (data?.action !== "notify") return;
const { text, length, type, caption, icon: dataIcon } = data;
@@ -20,21 +33,15 @@ const app = Vue.createApp({
icon = dataIcon;
}
- // Make sure we have sucessfully fetched out config properly
if (!NOTIFY_CONFIG) {
console.error("The notification config did not load properly, trying again for next time");
- // Lets check again to see if it exists
await fetchNotifyConfig();
- // If we have a config lets re-run notification with same data, this
- // isn't recursive though.
if (NOTIFY_CONFIG) return showNotif({ data });
}
$q.notify({
message: text,
multiLine: text.length > 100,
- // If our text is larger than a 100 characters,
- // we should use multiline notifications
group: NOTIFY_CONFIG.NotificationStyling.group ?? false,
progress: NOTIFY_CONFIG.NotificationStyling.progress ?? true,
position: NOTIFY_CONFIG.NotificationStyling.position ?? "right",
@@ -56,7 +63,3 @@ const app = Vue.createApp({
app.use(Quasar, { config: {} });
app.mount("#q-app");
-
-if (DEV_MODE || isEnvBrowser()) {
- registerWindowMethods();
-}
diff --git a/html/js/config.js b/html/js/config.js
index 3757238..5ff6925 100644
--- a/html/js/config.js
+++ b/html/js/config.js
@@ -1,45 +1,53 @@
-import { fetchNui, isEnvBrowser } from "./utils.js";
-import { BrowserMockConfigData } from "./testing.js";
-
-export const DEV_MODE = false;
-
-/**
- * @typedef NotiVariantData
- * @property {string} icon
- * @property {string} color
- **/
-
-/**
- * Will hold config statically outside of Vue state
- * @property {Record
} VariantDefinitions
- * @property {Record} NotificationStyling
- **/
export let NOTIFY_CONFIG = null;
-/**
- * Pure function taking a notification type and returning an object
- * with style details
- * @param {string} variant
- * @returns NotiVariantData
- **/
+const defaultConfig = {
+ NotificationStyling: {
+ group: true,
+ position: "top-right",
+ progress: true,
+ },
+ VariantDefinitions: {
+ success: {
+ classes: "success",
+ icon: "done",
+ },
+ primary: {
+ classes: "primary",
+ icon: "info",
+ },
+ error: {
+ classes: "error",
+ icon: "dangerous",
+ },
+ police: {
+ classes: "police",
+ icon: "local_police",
+ },
+ ambulance: {
+ classes: "ambulance",
+ icon: "fas fa-ambulance",
+ },
+ },
+};
+
export const determineStyleFromVariant = (variant) => {
const variantData = NOTIFY_CONFIG.VariantDefinitions[variant];
if (!variantData) throw new Error(`Style of type: ${variant}, does not exist in the config`);
return variantData;
};
-// Fetch and set NOTIFY_CONFIG from client script callback
export const fetchNotifyConfig = async () => {
- NOTIFY_CONFIG = await fetchNui("getNotifyConfig", {}, BrowserMockConfigData);
- if (isEnvBrowser() || DEV_MODE) {
- console.log("Fetched Config:");
- console.dir(NOTIFY_CONFIG);
+ try {
+ NOTIFY_CONFIG = await window.fetchNui("getNotifyConfig", {});
+ if (!NOTIFY_CONFIG) {
+ NOTIFY_CONFIG = defaultConfig;
+ }
+ } catch (error) {
+ console.error("Failed to fetch notification config, using default", error);
+ NOTIFY_CONFIG = defaultConfig;
}
};
-// We specifically wait for all other files to load
-// just in case of a race condition between client handlers
-// and NUI fetch call
window.addEventListener("load", async () => {
await fetchNotifyConfig();
});
diff --git a/html/js/drawtext.js b/html/js/drawtext.js
index 975d6e1..e93dad0 100644
--- a/html/js/drawtext.js
+++ b/html/js/drawtext.js
@@ -1,124 +1,124 @@
let direction = null;
const drawText = async (textData) => {
- const text = document.getElementById("text");
- let {position} = textData;
- switch (textData.position) {
- case "left":
- addClass(text, position);
- direction = "left";
- break;
- case "top":
- addClass(text, position);
- direction = "top";
- break;
- case "right":
- addClass(text, position);
- direction = "right";
- break;
- default:
- addClass(text, "left");
- direction = "left";
- break;
- }
+ const text = document.getElementById("text");
+ let { position } = textData;
+ switch (textData.position) {
+ case "left":
+ addClass(text, position);
+ direction = "left";
+ break;
+ case "top":
+ addClass(text, position);
+ direction = "top";
+ break;
+ case "right":
+ addClass(text, position);
+ direction = "right";
+ break;
+ default:
+ addClass(text, "left");
+ direction = "left";
+ break;
+ }
- text.innerHTML = textData.text;
- document.getElementById("drawtext-container").style.display = "block";
- await sleep(100);
- addClass(text, "show");
+ text.innerHTML = textData.text;
+ document.getElementById("drawtext-container").style.display = "block";
+ await sleep(100);
+ addClass(text, "show");
};
const changeText = async (textData) => {
- const text = document.getElementById("text");
- let {position} = textData;
+ const text = document.getElementById("text");
+ let { position } = textData;
- removeClass(text, "show");
- addClass(text, "pressed");
- addClass(text, "hide");
+ removeClass(text, "show");
+ addClass(text, "pressed");
+ addClass(text, "hide");
- await sleep(500);
- removeClass(text, "left");
- removeClass(text, "right");
- removeClass(text, "top");
- removeClass(text, "bottom");
- removeClass(text, "hide");
- removeClass(text, "pressed");
-
- switch (textData.position) {
- case "left":
- addClass(text, position);
- direction = "left";
- break;
- case "top":
- addClass(text, position);
- direction = "top";
- break;
- case "right":
- addClass(text, position);
- direction = "right";
- break;
- default:
- addClass(text, "left");
- direction = "left";
- break;
- }
- text.innerHTML = textData.text;
-
- await sleep(100);
- text.classList.add("show");
-};
-
-const hideText = async () => {
- const text = document.getElementById("text");
- removeClass(text, "show");
- addClass(text, "hide");
-
- setTimeout(() => {
+ await sleep(500);
removeClass(text, "left");
removeClass(text, "right");
removeClass(text, "top");
removeClass(text, "bottom");
removeClass(text, "hide");
removeClass(text, "pressed");
- document.getElementById("drawtext-container").style.display = "none";
- }, 1000);
+
+ switch (textData.position) {
+ case "left":
+ addClass(text, position);
+ direction = "left";
+ break;
+ case "top":
+ addClass(text, position);
+ direction = "top";
+ break;
+ case "right":
+ addClass(text, position);
+ direction = "right";
+ break;
+ default:
+ addClass(text, "left");
+ direction = "left";
+ break;
+ }
+ text.innerHTML = textData.text;
+
+ await sleep(100);
+ text.classList.add("show");
+};
+
+const hideText = async () => {
+ const text = document.getElementById("text");
+ removeClass(text, "show");
+ addClass(text, "hide");
+
+ setTimeout(() => {
+ removeClass(text, "left");
+ removeClass(text, "right");
+ removeClass(text, "top");
+ removeClass(text, "bottom");
+ removeClass(text, "hide");
+ removeClass(text, "pressed");
+ document.getElementById("drawtext-container").style.display = "none";
+ }, 1000);
};
const keyPressed = () => {
- const text = document.getElementById("text");
- addClass(text, "pressed");
+ const text = document.getElementById("text");
+ addClass(text, "pressed");
};
window.addEventListener("message", (event) => {
- const data = event.data;
- const action = data.action;
- const textData = data.data;
- switch (action) {
- case "DRAW_TEXT":
- return drawText(textData);
- case "CHANGE_TEXT":
- return changeText(textData);
- case "HIDE_TEXT":
- return hideText();
- case "KEY_PRESSED":
- return keyPressed();
- default:
- return;
- }
+ const data = event.data;
+ const action = data.action;
+ const textData = data.data;
+ switch (action) {
+ case "DRAW_TEXT":
+ return drawText(textData);
+ case "CHANGE_TEXT":
+ return changeText(textData);
+ case "HIDE_TEXT":
+ return hideText();
+ case "KEY_PRESSED":
+ return keyPressed();
+ default:
+ return;
+ }
});
const sleep = (ms) => {
- return new Promise((resolve) => setTimeout(resolve, ms));
+ return new Promise((resolve) => setTimeout(resolve, ms));
};
const removeClass = (element, name) => {
- if (element.classList.contains(name)) {
- element.classList.remove(name);
- }
+ if (element.classList.contains(name)) {
+ element.classList.remove(name);
+ }
};
const addClass = (element, name) => {
- if (!element.classList.contains(name)) {
- element.classList.add(name);
- }
+ if (!element.classList.contains(name)) {
+ element.classList.add(name);
+ }
};
diff --git a/html/js/testing.js b/html/js/testing.js
deleted file mode 100644
index 5181f57..0000000
--- a/html/js/testing.js
+++ /dev/null
@@ -1,44 +0,0 @@
-// Will register dev utilities on window
-export const registerWindowMethods = () => {
- window.SendNotification = (data) => {
- window.dispatchEvent(
- new MessageEvent("message", {
- data: {
- action: "notify",
- ...data,
- },
- })
- );
- };
-};
-
-// Used for browser env handling
-export const BrowserMockConfigData = {
- NotificationStyling: {
- group: true,
- position: "top-right",
- progress: true,
- },
- VariantDefinitions: {
- success: {
- classes: "success",
- icon: "done",
- },
- primary: {
- classes: "primary",
- icon: "info",
- },
- error: {
- classes: "error",
- icon: "dangerous",
- },
- police: {
- classes: "police",
- icon: "local_police",
- },
- ambulance: {
- classes: "ambulance",
- icon: "fas fa-ambulance",
- },
- },
-};
diff --git a/html/js/utils.js b/html/js/utils.js
deleted file mode 100644
index bf2fb8c..0000000
--- a/html/js/utils.js
+++ /dev/null
@@ -1,27 +0,0 @@
-// Returns whether we are in browser or not
-export const isEnvBrowser = () => !window.invokeNative;
-
-/**
- * Real simple wrapper around fetch api for NUI focus
- * it will return the mockData param if we are in browser. So we don't
- * make a useless request to a hostname that doesn't exist.
- * @param evName {string} - The callback event name/type
- * @param data {any} - Optional `body` data JSON stringified & passed with the request
- * @param mockData {any} - Mock data to return if this is running in browser
- * @return Promise
- **/
-export const fetchNui = async (evName, data, mockData = null) => {
- if (isEnvBrowser()) return mockData;
-
- const resourceName = window.GetParentResourceName();
-
- const rawResp = await fetch(`https://${resourceName}/${evName}`, {
- body: JSON.stringify(data),
- headers: {
- "Content-Type": "application/json; charset=UTF8",
- },
- method: "POST",
- });
-
- return await rawResp.json();
-};