euro field erbij
64d2fd951dbf6335375e08fe4d1f419bf5457a96
4 files changed
WebFormBuilder/Examples/formConfigData.jsonWebFormBuilder/Models/HtmlInputType.csWebFormBuilder/wwwroot/script.jsWebFormBuilder/wwwroot/styles.css
diff --git a/WebFormBuilder/Examples/formConfigData.json b/WebFormBuilder/Examples/formConfigData.json
index 81a5ae0..52bf3d1 100644
--- a/WebFormBuilder/Examples/formConfigData.json
+++ b/WebFormBuilder/Examples/formConfigData.json
@@ -81,6 +81,14 @@
"Properties": [ "min=18", "max=120", "step=1" ],
"Value": "30"
},
+ {
+ "Type": "Euro",
+ "Name": "price",
+ "Label": "Price",
+ "Placeholder": "0,00",
+ "Tooltip": "Provide a price in euros.",
+ "Properties": [ "step=0.01" ]
+ },
{
"Type": "Date",
"Name": "dob",
diff --git a/WebFormBuilder/Models/HtmlInputType.cs b/WebFormBuilder/Models/HtmlInputType.cs
index ce7762f..9373632 100644
--- a/WebFormBuilder/Models/HtmlInputType.cs
+++ b/WebFormBuilder/Models/HtmlInputType.cs
@@ -13,6 +13,7 @@ public enum HtmlInputType
Url,
Number,
Range,
+ Euro,
Date,
Time,
DateTimeLocal,
diff --git a/WebFormBuilder/wwwroot/script.js b/WebFormBuilder/wwwroot/script.js
index 4111ee4..fdfafd9 100644
--- a/WebFormBuilder/wwwroot/script.js
+++ b/WebFormBuilder/wwwroot/script.js
@@ -96,23 +96,25 @@ function generateField(field, wrapper)
{
wrapper.style.display = 'none';
}
- else if (field.Label)
+ else
{
- const label = document.createElement("label");
- if (field.Type == "checkbox" || field.Type == "radio")
- label.htmlFor = field.Name+"_0";
- else
- label.htmlFor = field.Name;
- label.textContent = field.Label;
- wrapper.appendChild(label);
-
- if (field.Tooltip)
+ if (field.Label)
{
- const tooltip = createTooltip(field.Tooltip);
- label.appendChild(tooltip);
+ const label = document.createElement("label");
+ if (field.Type == "checkbox" || field.Type == "radio")
+ label.htmlFor = field.Name + "_0";
+ else
+ label.htmlFor = field.Name;
+ label.textContent = field.Label;
+ wrapper.appendChild(label);
+
+ if (field.Tooltip)
+ {
+ const tooltip = createTooltip(field.Tooltip);
+ label.appendChild(tooltip);
+ }
}
}
-
var element;
switch (field.Type)
{
@@ -131,8 +133,11 @@ function generateField(field, wrapper)
case "reset":
element = createButtonOrHidden(field);
break;
+ case "euro":
+ element = createEuroField(field);
+ break;
default:
- element = createInputOrTextareaField(field);
+ element = createInputField(field);
break;
}
@@ -150,6 +155,13 @@ function splitOnce(str, delimiter)
function AddProperties(field, element)
{
+ var el = element;
+ if (el.tagName === "DIV")
+ el = el.querySelector("input");
+
+ if (!el)
+ return;
+
if (field.Properties)
{
for (const key in field.Properties)
@@ -158,7 +170,7 @@ function AddProperties(field, element)
{
const [property, value] = splitOnce(field.Properties[key], '=');
- value && (element[property] = value);
+ value && (el[property] = value);
}
}
}
@@ -222,6 +234,28 @@ function createSelectField(field)
return element;
}
+function createEuroField(field)
+{
+ const eurowrapper = document.createElement("div");
+ eurowrapper.classList.add("euro-wrapper");
+
+ const input = document.createElement("input");
+ input.name = field.Name;
+ input.id = field.Name;
+ input.type = "number";
+
+ if (field.Placeholder)
+ input.placeholder = field.Placeholder;
+
+ if (field.Value)
+ input.value = field.Value;
+
+ eurowrapper.appendChild(input);
+
+ return eurowrapper;
+}
+
+
function filterItems(query)
{
@@ -258,7 +292,6 @@ function renderList(filteredItems, fieldName)
comboboxList.style.display = 'block';
}
-
function createComboboxField(field)
{
const combobox = document.createElement("div");
@@ -296,7 +329,7 @@ function createComboboxField(field)
}
-function createInputOrTextareaField(field)
+function createInputField(field)
{
const element = document.createElement(field.Type === "textarea" ? "textarea" : "input");
element.name = field.Name;
diff --git a/WebFormBuilder/wwwroot/styles.css b/WebFormBuilder/wwwroot/styles.css
index e50ca55..4a9e826 100644
--- a/WebFormBuilder/wwwroot/styles.css
+++ b/WebFormBuilder/wwwroot/styles.css
@@ -247,3 +247,27 @@ body
{
background: #f0f0f0;
}
+
+.euro-wrapper
+{
+ display: inline-block !important;
+ white-space: nowrap;
+ position: relative;
+ left: -0.6rem;
+}
+
+ .euro-wrapper::before
+ {
+ content: "\20AC";
+ font-weight: bold;
+ color: #555;
+ position: relative;
+ left: 1.5rem;
+ }
+
+ .euro-wrapper input
+ {
+ font-family: Courier New, Courier, monospace;
+ text-align: right;
+ }
+