Enable color input option

qbcore-framework · Nov 1, 2023 · 4fbdf1a · 4fbdf1a
1 parent 518ddc4
commit 4fbdf1a
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 50 deletions.
diff --git a/client/config.lua b/client/config.lua
@@ -1,3 +1,2 @@
 Config = {}
-
-Config.Style = "default"
+Config.Style = 'default'
diff --git a/client/main.lua b/client/main.lua
@@ -6,30 +6,30 @@ AddEventHandler('onResourceStart', function(resourceName)
     end
     Wait(1000)
     SendNUIMessage({
-        action = "SET_STYLE",
+        action = 'SET_STYLE',
         data = Config.Style
     })
 end)
 
 RegisterNetEvent('QBCore:Client:OnPlayerLoaded', function()
     SendNUIMessage({
-        action = "SET_STYLE",
+        action = 'SET_STYLE',
         data = Config.Style
     })
 end)
 
-RegisterNUICallback("buttonSubmit", function(data, cb)
+RegisterNUICallback('buttonSubmit', function(data, cb)
     SetNuiFocus(false)
     properties:resolve(data.data)
     properties = nil
-    cb("ok")
+    cb('ok')
 end)
 
-RegisterNUICallback("closeMenu", function(_, cb)
+RegisterNUICallback('closeMenu', function(_, cb)
     SetNuiFocus(false)
     properties:resolve(nil)
     properties = nil
-    cb("ok")
+    cb('ok')
 end)
 
 local function ShowInput(data)
@@ -41,11 +41,11 @@ local function ShowInput(data)
 
     SetNuiFocus(true, true)
     SendNUIMessage({
-        action = "OPEN_MENU",
+        action = 'OPEN_MENU',
         data = data
     })
 
     return Citizen.Await(properties)
 end
 
-exports("ShowInput", ShowInput)
+exports('ShowInput', ShowInput)
diff --git a/html/index.html b/html/index.html
@@ -13,4 +13,4 @@
             <div class="background"></div>
         </div>
     </body>
-</html>
+</html>
diff --git a/html/script.js b/html/script.js
@@ -8,10 +8,7 @@ const OpenMenu = (data) => {
 
     $(`.main-wrapper`).fadeIn(0);
 
-    let form = [
-        "<form id='qb-input-form'>",
-        `<div class="heading">${ data.header != null ? data.header : "Form Title" }</div>`,
-    ];
+    let form = ["<form id='qb-input-form'>", `<div class="heading">${data.header != null ? data.header : "Form Title"}</div>`];
 
     data.inputs.forEach((item, index) => {
         switch (item.type) {
@@ -33,23 +30,24 @@ const OpenMenu = (data) => {
             case "checkbox":
                 form.push(renderCheckboxInput(item));
                 break;
+            case "color":
+                form.push(renderColorInput(item));
+                break;
             default:
                 form.push(`<div class="label">${item.text}</div>`);
         }
     });
-    form.push(
-        `<div class="footer"><button type="submit" class="btn btn-success" id="submit">${data.submitText ? data.submitText : "Submit"}</button></div>`
-    );
+    form.push(`<div class="footer"><button type="submit" class="btn btn-success" id="submit">${data.submitText ? data.submitText : "Submit"}</button></div>`);
 
     form.push("</form>");
 
     $(".main-wrapper").html(form.join(" "));
 
     $("#qb-input-form").on("change", function (event) {
-        if( $(event.target).attr("type") == 'checkbox' ) {
+        if ($(event.target).attr("type") == "checkbox") {
             const value = $(event.target).is(":checked") ? "true" : "false";
             formInputs[$(event.target).attr("value")] = value;
-        }else{
+        } else {
             formInputs[$(event.target).attr("name")] = $(event.target).val();
         }
     });
@@ -58,10 +56,7 @@ const OpenMenu = (data) => {
         if (event != null) {
             event.preventDefault();
         }
-        await $.post(
-            `https://${GetParentResourceName()}/buttonSubmit`,
-            JSON.stringify({ data: formInputs })
-        );
+        await $.post(`https://${GetParentResourceName()}/buttonSubmit`, JSON.stringify({ data: formInputs }));
         CloseMenu();
     });
 };
@@ -70,15 +65,15 @@ const renderTextInput = (item) => {
     const { text, name } = item;
     formInputs[name] = item.default ? item.default : "";
     const isRequired = item.isRequired == "true" || item.isRequired ? "required" : "";
-    const defaultValue = item.default ? `value="${item.default}"` : ""
+    const defaultValue = item.default ? `value="${item.default}"` : "";
 
     return ` <input placeholder="${text}" type="text" class="form-control" name="${name}" ${defaultValue} ${isRequired}/>`;
 };
 const renderPasswordInput = (item) => {
     const { text, name } = item;
     formInputs[name] = item.default ? item.default : "";
     const isRequired = item.isRequired == "true" || item.isRequired ? "required" : "";
-    const defaultValue = item.default ? `value="${item.default}"` : ""
+    const defaultValue = item.default ? `value="${item.default}"` : "";
 
     return ` <input placeholder="${text}" type="password" class="form-control" name="${name}" ${defaultValue} ${isRequired}/>`;
 };
@@ -87,7 +82,7 @@ const renderNumberInput = (item) => {
         const { text, name } = item;
         formInputs[name] = item.default ? item.default : "";
         const isRequired = item.isRequired == "true" || item.isRequired ? "required" : "";
-        const defaultValue = item.default ? `value="${item.default}"` : ""
+        const defaultValue = item.default ? `value="${item.default}"` : "";
 
         return `<input placeholder="${text}" type="number" class="form-control" name="${name}" ${defaultValue} ${isRequired}/>`;
     } catch (err) {
@@ -103,7 +98,7 @@ const renderRadioInput = (item) => {
     let div = `<div class="form-input-group"> <div class="form-group-title">${text}</div>`;
     div += '<div class="input-group">';
     options.forEach((option, index) => {
-        div += `<label for="radio_${name}_${index}"> <input type="radio" id="radio_${name}_${index}" name="${name}" value="${option.value}" 
+        div += `<label for="radio_${name}_${index}"> <input type="radio" id="radio_${name}_${index}" name="${name}" value="${option.value}"
                 ${(item.default ? item.default == option.value : index == 0) ? "checked" : ""}> ${option.text}</label>`;
     });
 
@@ -115,13 +110,12 @@ const renderRadioInput = (item) => {
 const renderCheckboxInput = (item) => {
     const { options, name, text } = item;
 
-
     let div = `<div class="form-input-group"> <div class="form-group-title">${text}</div>`;
     div += '<div class="input-group-chk">';
 
     options.forEach((option, index) => {
-        div += `<label for="chk_${name}_${index}">${option.text} <input type="checkbox" id="chk_${name}_${index}" name="${name}" value="${option.value}" ${option.checked ? 'checked' : ''}></label>`;
-        formInputs[option.value] = option.checked ? 'true' : 'false';
+        div += `<label for="chk_${name}_${index}">${option.text} <input type="checkbox" id="chk_${name}_${index}" name="${name}" value="${option.value}" ${option.checked ? "checked" : ""}></label>`;
+        formInputs[option.value] = option.checked ? "true" : "false";
     });
 
     div += "</div>";
@@ -137,14 +131,24 @@ const renderSelectInput = (item) => {
     formInputs[name] = options[0].value;
 
     options.forEach((option, index) => {
-        const isDefaultValue = item.default == option.value
-        div += `<option value="${option.value}" ${isDefaultValue ? 'selected' : '' }>${option.text}</option>`;
-        if(isDefaultValue){ formInputs[name] = option.value }
+        const isDefaultValue = item.default == option.value;
+        div += `<option value="${option.value}" ${isDefaultValue ? "selected" : ""}>${option.text}</option>`;
+        if (isDefaultValue) {
+            formInputs[name] = option.value;
+        }
     });
     div += "</select>";
     return div;
 };
 
+const renderColorInput = (item) => {
+    const { text, name } = item;
+    formInputs[name] = item.default ? item.default : "#ffffff";
+    const isRequired = item.isRequired == "true" || item.isRequired ? "required" : "";
+    const defaultValue = item.default ? `value="${item.default}"` : "";
+    return ` <input placeholder="${text}" type="color" class="form-control" name="${name}" ${defaultValue} ${isRequired}/>`;
+};
+
 const CloseMenu = () => {
     $(`.main-wrapper`).fadeOut(0);
     $("#qb-input-form").remove();
@@ -155,7 +159,7 @@ const SetStyle = (style) => {
     var stylesheet = $("<link>", {
         rel: "stylesheet",
         type: "text/css",
-        href: `./styles/${style}.css`
+        href: `./styles/${style}.css`,
     });
     stylesheet.appendTo("head");
 };
@@ -193,10 +197,7 @@ document.onkeyup = function (event) {
 // IDK why this is a thing ? what if they misclick?
 $(document).click(function (event) {
     var $target = $(event.target);
-    if (
-        !$target.closest(".main-wrapper").length &&
-        $(".main-wrapper").is(":visible")
-    ) {
+    if (!$target.closest(".main-wrapper").length && $(".main-wrapper").is(":visible")) {
         CancelMenu();
     }
 });
diff --git a/html/styles/default.css b/html/styles/default.css
@@ -27,16 +27,16 @@ body {
 /* width */
 ::-webkit-scrollbar {
     width: 10px;
-  }
-  
-  /* Track */
-  ::-webkit-scrollbar-track {
+}
+
+/* Track */
+::-webkit-scrollbar-track {
     box-shadow: inset 0 0 5px grey;
     border-radius: 10px;
-  }
-  
-  /* Handle */
-  ::-webkit-scrollbar-thumb {
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
     background: #171717e6;
     border-radius: 10px;
 }
@@ -112,6 +112,31 @@ body {
     transition-timing-function: linear, ease-in;
 }
 
+.form-control[type="color"] {
+    appearance: none;
+    -webkit-appearance: none;
+    width: 100%;
+    height: 50px;
+    border: none;
+    border-radius: 5px;
+    background: rgba(23, 23, 23, 90%);
+    cursor: pointer;
+}
+
+.form-control[type="color"]::-webkit-color-swatch-wrapper {
+    padding: 0;
+}
+
+.form-control[type="color"]::-webkit-color-swatch {
+    border: none;
+    border-radius: 5px;
+}
+
+.form-control[type="color"]:focus {
+    outline: none;
+    box-shadow: 0rem 0rem 0.1rem 0.05rem #000000; /* Adding focus shadow */
+}
+
 .form-input-group {
     background: rgba(23, 23, 23, 90%);
     box-shadow: 0rem 0rem 0.1rem 0.05rem #000000;
@@ -229,9 +254,9 @@ body {
 }
 
 .label {
-    background: rgba(23, 23, 23, 90%); 
-    padding: 10px;   
-    border-radius:5px;
+    background: rgba(23, 23, 23, 90%);
+    padding: 10px;
+    border-radius: 5px;
     font-size: 14px;
     margin: 5px 0px;
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -13,4 +13,4 @@ @@
                 <div class="background"></div>
             </div>
         </body>
-    </html>
+    </html>