mirror of
https://github.com/qbcore-fivem/qb-core.git
synced 2026-08-29 01:08:57 +00:00
Styling update
This commit is contained in:
Kakarot
+17
-14
@@ -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();
|
||||
}
|
||||
|
||||
+38
-30
@@ -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<string, NotiVariantData>} VariantDefinitions
|
||||
* @property {Record<string, any>} 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();
|
||||
});
|
||||
|
||||
+93
-93
@@ -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);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -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",
|
||||
},
|
||||
},
|
||||
};
|
||||
@@ -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();
|
||||
};
|
||||
Reference in New Issue
Block a user