Merge pull request #233 from DanDiplo/feature/input-type

Adding selectable input types to the Text Input
leekelleher · Jun 30, 2022 · a567df6 · a567df6
2 parents 746010f + df2ca4b
commit a567df6
Show file tree

Hide file tree

Showing 6 changed files with 64 additions and 2 deletions.
diff --git a/docs/editors/text-input--configuration-editor.png b/docs/editors/text-input--configuration-editor.png
diff --git a/docs/editors/text-input.md b/docs/editors/text-input.md
@@ -13,7 +13,15 @@ In your new Data Type, selected the "[Contentment] Text Input" option. You will
 
 ![Configuration Editor for Text Input](text-input--configuration-editor.png)
 
-The first field is **Placeholder text**, which is used to add initial instructional information for the text input, this is not a default value.
+The first field is **Input type**, which is used to configure the type of input expected. You can select from:
+* **Text** (for normal text) - *this is the default*
+* **Email** (for an email address)
+* **Telephone** (for a telephone number)
+* **URL** (for a web address)
+
+> From an HTML5 perspective, this is the [`<input>`'s `type` attribute](https://developer.mozilla.org/en-US/docs/Learn/Forms/HTML5_input_types).
+
+The second field is **Placeholder text**, which is used to add initial instructional information for the text input, this is not a default value.
 
 > For technical users, from a HTML5 perspective, this is the [`<input>`'s `placeholder` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text#placeholder).
 
@@ -35,6 +43,9 @@ The **Enable spellcheck?** option can enable your web-browser's spellcheck funct
 
 > For technical users, this is the [`<input>`'s `spellcheck` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text#spellcheck).
 
+The **Prepend icon** - allows you to optionally select an icon that is shown before your input control.
+
+The **Append icon** - this allows you to optionally select an icon that is shown after your input control.
 
 ### How to use the editor?
 

diff --git a/src/Umbraco.Cms.10.x/uSync/v10/DataTypes/ContentmentTextInputEmail.config b/src/Umbraco.Cms.10.x/uSync/v10/DataTypes/ContentmentTextInputEmail.config
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<DataType Key="47ba9960-89c6-4115-8108-76047170cfac" Alias="[Contentment] Text Input - Email" Level="1">
+  <Info>
+    <Name>[Contentment] Text Input - Email</Name>
+    <EditorAlias>Umbraco.Community.Contentment.TextInput</EditorAlias>
+    <DatabaseType>Nvarchar</DatabaseType>
+  </Info>
+  <Config><![CDATA[{
+  "inputType": "email",
+  "placeholderText": "Enter an email address",
+  "items": [],
+  "autocomplete": "0",
+  "spellcheck": "0",
+  "prepend": "icon-message color-black"
+}]]></Config>
+</DataType>
diff --git a/src/Umbraco.Community.Contentment/DataEditors/TextInput/TextInputConfigurationEditor.cs b/src/Umbraco.Community.Contentment/DataEditors/TextInput/TextInputConfigurationEditor.cs
@@ -32,6 +32,38 @@ public TextInputConfigurationEditor(ConfigurationEditorUtility utility, IIOHelpe
 
             var dataSources = new List<ConfigurationEditorModel>(_utility.GetConfigurationEditorModels<IDataListSource>(shortStringHelper));
 
+            Fields.Add(new ConfigurationField
+            {
+                Key = "inputType",
+                Name = "Input type",
+                Description = "Select the HTML input type.",
+                View = ioHelper.ResolveRelativeOrVirtualUrl(DropdownListDataListEditor.DataEditorViewPath),
+                Config = new Dictionary<string, object>
+                {
+                    { DropdownListDataListEditor.AllowEmpty, Constants.Values.False },
+                    { Constants.Conventions.ConfigurationFieldAliases.Items, new DataListItem[]
+                        {
+                            new DataListItem()
+                            {
+                                Name = "Text", Value = "text"
+                            },
+                            new DataListItem()
+                            {
+                                Name = "Email", Value = "email"
+                            },
+                            new DataListItem()
+                            {
+                                Name = "Telephone", Value = "tel"
+                            },
+                            new DataListItem()
+                            {
+                                Name = "URL", Value = "url"
+                            }
+                        }
+                    }
+                }
+            });
+
             Fields.Add(new ConfigurationField
             {
                 Key = "placeholderText",

diff --git a/src/Umbraco.Community.Contentment/DataEditors/TextInput/text-input.html b/src/Umbraco.Community.Contentment/DataEditors/TextInput/text-input.html
@@ -17,7 +17,7 @@
                ng-trim="false"
                id="{{model.alias}}"
                class="umb-property-editor umb-textstring"
-               type="text"
+               type="{{vm.inputType}}"
                list="{{vm.dataListId}}"
                autocomplete="{{vm.autoComplete}}"
                spellcheck="{{vm.spellCheck}}"

diff --git a/src/Umbraco.Community.Contentment/DataEditors/TextInput/text-input.js b/src/Umbraco.Community.Contentment/DataEditors/TextInput/text-input.js
@@ -11,13 +11,15 @@ angular.module("umbraco").controller("Umbraco.Community.Contentment.DataEditors.
 
         var defaultConfig = {
             items: [],
+            inputType: 'text',
             autocomplete: 0,
             placeholderText: null,
             defaultValue: null,
             prepend: null,
             append: null,
             maxChars: 500
         };
+
         var config = Object.assign({}, defaultConfig, $scope.model.config);
 
         var vm = this;
@@ -30,6 +32,7 @@ angular.module("umbraco").controller("Umbraco.Community.Contentment.DataEditors.
                 $scope.model.value = $scope.model.value.join(", ");
             }
 
+            vm.inputType = config.inputType;
             vm.autoComplete = Object.toBoolean(config.autocomplete) ? "on" : "off";
             vm.spellCheck = Object.toBoolean(config.spellcheck) ? "true" : "false";
             vm.placeholderText = config.placeholderText;