[TASK] EXT:form - Set proper default values in form wizard 34/44034/3
authorBjörn Jacob <bjoern.jacob@tritum.de>
Tue, 13 Oct 2015 21:00:56 +0000 (23:00 +0200)
committerWouter Wolters <typo3@wouterwolters.nl>
Fri, 16 Oct 2015 18:13:38 +0000 (20:13 +0200)
This patch sets proper default values for all elements in the form
wizard. The available elements and fields have been sorted by necessity,
i.e. most often used elements have been moved to the top.

The type of the TEXTLINE element can now be modified. That way the editor
can create HTML5 input types. The avaible input types within the wizard
have been streamlined to not show duplicate elements like checkbox or
radio (which are elements on their own). The right side of the wizard
has been optimized to not validate elements according to their HTML5
attributes. Last but not least the predefined email element is now of
type email.

Resolves: #70456
Releases: master
Change-Id: Iad3ad96faecd4cfe5820508b49c41fc5ae0be10b
Reviewed-on: http://review.typo3.org/44034
Reviewed-by: Morton Jonuschat <m.jonuschat@mojocode.de>
Tested-by: Morton Jonuschat <m.jonuschat@mojocode.de>
Reviewed-by: Wouter Wolters <typo3@wouterwolters.nl>
Tested-by: Wouter Wolters <typo3@wouterwolters.nl>
typo3/sysext/form/Classes/Domain/Factory/JsonToTypoScript.php
typo3/sysext/form/Configuration/PageTS/modWizards.ts
typo3/sysext/form/Configuration/TypoScript/Elements/Textline.ts
typo3/sysext/form/Resources/Public/JavaScript/Wizard/Elements/Basic/Button.js
typo3/sysext/form/Resources/Public/JavaScript/Wizard/Elements/Basic/Form.js
typo3/sysext/form/Resources/Public/JavaScript/Wizard/Elements/Predefined/Email.js
typo3/sysext/form/Resources/Public/JavaScript/Wizard/Viewport/Left/Options/Forms/Attributes.js

index 9cf3d53..3d70d26 100644 (file)
@@ -306,7 +306,7 @@ class JsonToTypoScript
             if ($key === 'name' && $value === '' && !$childrenWithParentName) {
                 $value = $this->elementId;
             }
-            if ($value != '' && $key != 'type') {
+            if ($value != '') {
                 $parent[$elementCounter . '.'][$key] = $value;
             }
         }
index 141b2d9..a555fea 100644 (file)
@@ -19,6 +19,7 @@ prefix = tx_form
                        }
                }
        }
+
        form {
                defaults {
                        showTabs = elements, options, form
@@ -27,85 +28,106 @@ prefix = tx_form
                                        showAccordions = basic, predefined, content
                                        accordions {
                                                basic {
-                                                       showButtons = checkbox, fieldset, fileupload, hidden, password, radio, reset, select, submit, textarea, textline
+                                                       showButtons = textline, textarea, checkbox, radio, select, fileupload, hidden, password, fieldset, submit, reset, button
                                                }
                                                predefined {
-                                                       showButtons = email, radiogroup, checkboxgroup, name
+                                                       showButtons = name, email, checkboxgroup, radiogroup
                                                }
                                                content {
                                                        showButtons = header, textblock
                                                }
                                        }
                                }
+
                                options {
                                        showAccordions = legend, label, attributes, options, validation, filters, various
                                        accordions {
-                                               attributes {
-                                                       showProperties = accept, accept-charset, accesskey, action, alt, autocomplete, autofocus, checked, class, cols, contenteditable, contextmenu, dir, draggable, dropzone, disabled, enctype, hidden, height, id, inputmode, label, lang, list, max, maxlength, method, min, minlength, multiple, name, novalidate, pattern, placeholder, readonly, required, rows, selected, selectionDirection, selectionEnd, selectionStart, size, spellcheck, src, step, style, tabindex, title, translate, type, value, width, wrap
-                                               }
                                                label {
                                                        showProperties = label
                                                }
+                                               attributes {
+                                                       showProperties = accept, accept-charset, accesskey, action, alt, autocomplete, autofocus, checked, class, cols, contenteditable, contextmenu, dir, draggable, dropzone, disabled, enctype, hidden, height, id, inputmode, label, lang, list, max, maxlength, method, min, minlength, multiple, name, novalidate, pattern, placeholder, readonly, required, rows, selected, selectionDirection, selectionEnd, selectionStart, size, spellcheck, src, step, style, tabindex, title, translate, type, value, width, wrap
+                                               }
                                                validation {
                                                        showRules = alphabetic, alphanumeric, between, date, digit, email, equals, fileallowedtypes, filemaximumsize, fileminimumsize, float, greaterthan, inarray, integer, ip, length, lessthan, regexp, required, uri
+
                                                        rules {
                                                                alphabetic {
                                                                        showProperties = message, error, breakOnError, showMessage, allowWhiteSpace
                                                                }
+
                                                                alphanumeric {
                                                                        showProperties = message, error, breakOnError, showMessage, allowWhiteSpace
                                                                }
+
                                                                between {
                                                                        showProperties = message, error, breakOnError, showMessage, minimum, maximum, inclusive
                                                                }
+
                                                                date {
                                                                        showProperties = message, error, breakOnError, showMessage, format
                                                                }
+
                                                                digit {
                                                                        showProperties = message, error, breakOnError, showMessage
                                                                }
+
                                                                email {
                                                                        showProperties = message, error, breakOnError, showMessage
                                                                }
+
                                                                equals {
                                                                        showProperties = message, error, breakOnError, showMessage, field
                                                                }
+
                                                                fileallowedtypes {
                                                                        showProperties = message, error, breakOnError, showMessage, types
                                                                }
+
                                                                filemaximumsize {
                                                                        showProperties = message, error, breakOnError, showMessage, maximum
                                                                }
+
                                                                fileminimumsize {
                                                                        showProperties = message, error, breakOnError, showMessage, minimum
                                                                }
+
                                                                float {
                                                                        showProperties = message, error, breakOnError, showMessage
                                                                }
+
                                                                greaterthan {
                                                                        showProperties = message, error, breakOnError, showMessage, minimum
                                                                }
+
                                                                inarray {
                                                                        showProperties = message, error, breakOnError, showMessage, array, strict
                                                                }
+
                                                                integer {
                                                                        showProperties = message, error, breakOnError, showMessage
                                                                }
+
                                                                ip {
                                                                        showProperties = message, error, breakOnError, showMessage
                                                                }
+
                                                                length {
                                                                        showProperties = message, error, breakOnError, showMessage, minimum, maximum
                                                                }
+
                                                                lessthan {
                                                                        showProperties = message, error, breakOnError, showMessage, maximum
                                                                }
+
                                                                regexp {
                                                                        showProperties = message, error, breakOnError, showMessage, expression
                                                                }
+
                                                                required {
                                                                        showProperties = message, error, breakOnError, showMessage
                                                                }
+
                                                                uri {
                                                                        showProperties = message, error, breakOnError, showMessage
                                                                }
@@ -113,40 +135,52 @@ prefix = tx_form
                                                }
                                                filtering {
                                                        showFilters = alphabetic, alphanumeric, currency, digit, integer, lowercase, regexp, removexss, stripnewlines, titlecase, trim, uppercase
+
                                                        filters {
                                                                alphabetic {
                                                                        showProperties = allowWhiteSpace
                                                                }
+
                                                                alphanumeric {
                                                                        showProperties = allowWhiteSpace
                                                                }
+
                                                                currency {
                                                                        showProperties = decimalPoint, thousandSeparator
                                                                }
+
                                                                digit {
                                                                        showProperties =
                                                                }
+
                                                                integer {
                                                                        showProperties =
                                                                }
+
                                                                lowercase {
                                                                        showProperties =
                                                                }
+
                                                                regexp {
                                                                        showProperties = expression
                                                                }
+
                                                                removexss {
                                                                        showProperties =
                                                                }
+
                                                                stripnewlines {
                                                                        showProperties =
                                                                }
+
                                                                titlecase {
                                                                        showProperties =
                                                                }
+
                                                                trim {
                                                                        showProperties = characterList
                                                                }
+
                                                                uppercase {
                                                                        showProperties =
                                                                }
@@ -154,6 +188,7 @@ prefix = tx_form
                                                }
                                        }
                                }
+
                                form {
                                        showAccordions = behaviour, prefix, attributes, postProcessor
                                        accordions {
@@ -172,47 +207,58 @@ prefix = tx_form
                                }
                        }
                }
+
                elements {
                        form {
                                accordions {
                                        attributes {
-                                               showProperties = accept, accept-charset, action, class, dir, enctype, id, lang, method, style, title
+                                               showProperties = accept, action, dir, enctype, lang, method, novalidate, class, id, style, title
                                        }
                                }
                        }
+
                        button {
-                               showAccordions = attributes
+                               showAccordions = label, attributes
                                accordions {
                                        attributes {
-                                               showProperties = value
+                                               showProperties = name, value, class, id
                                        }
                                }
                        }
+
                        checkbox {
                                showAccordions = label, attributes, validation
                                accordions {
                                        attributes {
-                                               showProperties = name, value
+                                               showProperties = name, value, class, id, checked, required
                                        }
                                        validation {
                                                showRules = required
                                        }
                                }
                        }
+
                        fieldset {
-                               showAccordions = legend
+                               showAccordions = legend, attributes
+                               accordions {
+                                       attributes {
+                                               showProperties = class, id
+                                       }
+                               }
                        }
+
                        fileupload {
                                showAccordions = label, attributes, validation
                                accordions {
                                        attributes {
-                                               showProperties = name
+                                               showProperties = name, class, id, required
                                        }
                                        validation {
                                                showRules = required, fileallowedtypes, filemaximumsize, fileminimumsize
                                        }
                                }
                        }
+
                        hidden {
                                showAccordions = attributes
                                accordions {
@@ -221,36 +267,56 @@ prefix = tx_form
                                        }
                                }
                        }
+
                        password {
                                showAccordions = label, attributes, validation
                                accordions {
                                        attributes {
-                                               showProperties = name, placeholder
+                                               showProperties = name, placeholder, class, id, autocomplete, required
                                        }
                                        validation {
                                                showRules = required, equals
                                        }
                                }
                        }
+
                        radio < .checkbox
+
                        reset < .button
+                       reset {
+                               accordions {
+                                       attributes {
+                                               showProperties := removeFromList(name)
+                                       }
+                               }
+                       }
+
                        select {
                                showAccordions = label, attributes, options, validation
                                accordions {
                                        attributes {
-                                               showProperties = name, multiple
+                                               showProperties = name, size, class, id, multiple, required
                                        }
                                        validation {
                                                showRules = required
                                        }
                                }
                        }
+
                        submit < .button
+                       submit {
+                               accordions {
+                                       attributes {
+                                               showProperties := removeFromList(name)
+                                       }
+                               }
+                       }
+
                        textarea {
                                showAccordions = label, attributes, validation, filters
                                accordions {
                                        attributes {
-                                               showProperties = name, placeholder, cols, rows
+                                               showProperties = name, placeholder, cols, rows, class, id, required
                                        }
                                        filtering {
                                                showFilters = alphabetic, alphanumeric, lowercase, regexp, stripnewlines, titlecase, trim, uppercase
@@ -260,11 +326,12 @@ prefix = tx_form
                                        }
                                }
                        }
+
                        textline {
                                showAccordions = label, attributes, validation, filters
                                accordions {
                                        attributes {
-                                               showProperties = name, placeholder
+                                               showProperties = name, placeholder, type, class, id, autocomplete, required
                                        }
                                        validation {
                                                showRules = alphabetic, alphanumeric, between, date, digit, email, equals, float, greaterthan, inarray, integer, ip, length, lessthan, regexp, required, uri
@@ -274,6 +341,13 @@ prefix = tx_form
                                        }
                                }
                        }
+
+                       name {
+                               showAccordions = legend, various
+                       }
+
+                       email < .textline
+
                        checkboxgroup {
                                showAccordions = legend, options, various, validation
                                accordions {
@@ -282,17 +356,16 @@ prefix = tx_form
                                        }
                                }
                        }
-                       email < .textline
+
+                       radiogroup < .checkboxgroup
+
                        header {
                                showAccordions = various
                        }
+
                        textblock {
                                showAccordions = various
                        }
-                       name {
-                               showAccordions = legend, various
-                       }
-                       radiogroup < .checkboxgroup
                }
        }
-}
+}
\ No newline at end of file
index 7901d41..3ce3732 100644 (file)
@@ -71,15 +71,6 @@ plugin.tx_form {
                                        340 = value
                                }
 
-                                       # fixedHtmlAttributeValues
-                                       # Used by: frontend, wizard (not implemented right now)
-                                       # Overwritable by user: FALSE
-                                       #
-                                       # The following values are automatically set as attributes.
-                               fixedHtmlAttributeValues {
-                                       type = text
-                               }
-
                                        # htmlAttributesUsedByTheViewHelperDirectly
                                        # Used by: frontend
                                        # Overwritable by user: FALSE
index 338abfe..bfb59a9 100644 (file)
@@ -94,7 +94,7 @@ TYPO3.Form.Wizard.Elements.Basic.Button = Ext.extend(TYPO3.Form.Wizard.Elements,
                                },
                                filters: {},
                                label: {
-                                       value: ''
+                                       value: TYPO3.l10n.localize('elements_label')
                                },
                                layout: 'front',
                                validation: {}
index fa3a4d3..695bbdf 100644 (file)
@@ -25,10 +25,12 @@ TYPO3.Form.Wizard.Elements.Basic.Form = Ext.extend(TYPO3.Form.Wizard.Elements, {
         * An Ext.Template, Ext.XTemplate or an array of strings to form an
         * Ext.XTemplate. Used in conjunction with the data and tplWriteMode
         * configurations.
+        *
+        * Adding novalidate attribute avoids HTML5 validation of elements.
         */
        tpl: new Ext.XTemplate(
-               '<form {[this.getAttributes(values.attributes)]}>',
-               '<ol></ol>',
+               '<form {[this.getAttributes(values.attributes)]} novalidate="novalidate">',
+                       '<ol></ol>',
                '</form>',
                {
                        compiled: true,
index e9c8aa0..8fe7519 100644 (file)
@@ -14,7 +14,8 @@ TYPO3.Form.Wizard.Elements.Predefined.Email = Ext.extend(TYPO3.Form.Wizard.Eleme
                var config = {
                        configuration: {
                                attributes: {
-                                       name: 'email'
+                                       name: 'email',
+                                       type: 'email'
                                },
                                label: {
                                        value: TYPO3.l10n.localize('elements_label_email')
index d4b7dc3..ad1d6c8 100644 (file)
@@ -904,24 +904,14 @@ TYPO3.Form.Wizard.Viewport.Left.Options.Forms.Attributes = Ext.extend(Ext.FormPa
                                                store: new Ext.data.JsonStore({
                                                        fields: ['label', 'value'],
                                                        data: [
-                                                               {label: TYPO3.l10n.localize('attributes_type_button'), value: 'button'},
-                                                               {label: TYPO3.l10n.localize('attributes_type_checkbox'), value: 'checkbox'},
                                                                {label: TYPO3.l10n.localize('attributes_type_color'), value: 'color'},
-                                                               {label: TYPO3.l10n.localize('attributes_type_date'), value: 'date '},
+                                                               {label: TYPO3.l10n.localize('attributes_type_date'), value: 'date'},
                                                                {label: TYPO3.l10n.localize('attributes_type_datetime'), value: 'datetime'},
                                                                {label: TYPO3.l10n.localize('attributes_type_datetime-local'), value: 'datetime-local'},
                                                                {label: TYPO3.l10n.localize('attributes_type_email'), value: 'email'},
-                                                               {label: TYPO3.l10n.localize('attributes_type_file'), value: 'file'},
-                                                               {label: TYPO3.l10n.localize('attributes_type_hidden'), value: 'hidden'},
-                                                               {label: TYPO3.l10n.localize('attributes_type_image'), value: 'image'},
                                                                {label: TYPO3.l10n.localize('attributes_type_month'), value: 'month'},
                                                                {label: TYPO3.l10n.localize('attributes_type_number'), value: 'number'},
-                                                               {label: TYPO3.l10n.localize('attributes_type_password'), value: 'password'},
-                                                               {label: TYPO3.l10n.localize('attributes_type_radio'), value: 'radio'},
-                                                               {label: TYPO3.l10n.localize('attributes_type_range'), value: 'range'},
-                                                               {label: TYPO3.l10n.localize('attributes_type_reset'), value: 'reset'},
                                                                {label: TYPO3.l10n.localize('attributes_type_search'), value: 'search'},
-                                                               {label: TYPO3.l10n.localize('attributes_type_submit'), value: 'submit'},
                                                                {label: TYPO3.l10n.localize('attributes_type_tel'), value: 'tel'},
                                                                {label: TYPO3.l10n.localize('attributes_type_text'), value: 'text'},
                                                                {label: TYPO3.l10n.localize('attributes_type_time'), value: 'time'},