Dionysos Text Field

This component is a part of the Olympus Dionysos fields for WordPress.
It uses the default WordPress text field to display password, range, text, datetime, tel, and more fields.

composer require getolympus/olympus-dionysos-field-text

---

Table of contents

Field initialization • Variables definition • Settings definition • Retrive data • Release History • Contributing

---

Field initialization

Use the following lines to add a text field in your WordPress admin pages or custom post type meta fields:

return \GetOlympus\Dionysos\Field\Text::build('my_text_field_id', [
    'title'       => 'What do you like?',
    'default'     => 'Penguins, I am sure they\'re gonna dominate the World!',
    'description' => 'Put in here everything you want.',
    'placeholder' => 'McDonald\'s as well',
    'type'        => 'text',

    /**
     * Settings definition
     * @see the `Settings definition` section below
     */
    'settings' => [],
]);

Variables definition

Variable	Type	Default value if not set	Accepted values
title	String	'Text'	empty
default	String	empty	empty
description	String	empty	empty
placeholder	String	empty	empty
type	String	'text'	see Accepted type
settings	Array	see Field initialization	see Settings definition

Accepted type

• date see Date type
• datetime-local see Datetime-local type
• email see Email type
• hidden see Hidden type
• month see Month type
• number see Number type
• password see Password type
• range see Range type
• search see Search type
• tel see Tel type
• text see Text type
• time see Time type
• url see URL type
• week see Week type

Settings definition

The settings variable is an array of options depending on type value.
In all cases, here are the default settings with their explanations:

Variable	Type	Default value if not set	Accepted values
attrs	String	empty	empty
after	String	empty	empty
before	String	empty	empty
class	String	empty	empty
readonly	Boolean	false	true or false

• Special case: attrs will let you add all additional attributes you need, such as data-*. Pay attention to this!
• after will insert contents after the field. In number and range cases, the after content will prepend the max value
• before will insert contents before the field. In number and range cases, the before content will append the min value
• class will add CSS classes to the already-in regular-text field class (not used in hidden case)
• readonly will avoid the field to be used when its value is set to true

Date type

Full documentation on Mozilla Date page

Variable	Type	Default value if not set	Accepted values
max	Date	empty	latest date to accept in yyyy-MM-dd format
min	Date	empty	earliest date to accept in yyyy-MM-dd format
step	Integer	empty	integer, to read as day

Datetime-local type

Full documentation on Mozilla Datetime-local page

Variable	Type	Default value if not set	Accepted values
max	Date	empty	latest date to accept in yyyy-MM-ddThh:mm format
min	Date	empty	earliest date to accept in yyyy-MM-ddThh:mm format
step	Integer	empty	integer, to read as second

Email type

Full documentation on Mozilla Email page

Variable	Type	Default value if not set	Accepted values
maxlength	Integer	empty	empty
minlength	Integer	empty	empty
multiple	Boolean	false	true or false
pattern	String	empty	javascript regular expression
size	Integer	empty	empty
spellcheck	Boolean	false	true or false

Hidden type

Full documentation on Mozilla Hidden page

Variable	Type	Default value if not set	Accepted values
display	Boolean	false	true or false

This special display variable defines if the hidden field have to show field value or not:

• set to false, a sentence will show where the value is stored in Database
• set to true, a sentence will show where the value is stored in Database and what is the current value

Month type

Full documentation on Mozilla Month page

Variable	Type	Default value if not set	Accepted values
max	Date	empty	latest date to accept in yyyy-MM format
min	Date	empty	earliest date to accept in yyyy-MM format
step	Integer	empty	integer, to read as month

Number type

Full documentation on Mozilla Number page

Variable	Type	Default value if not set	Accepted values
max	Float	empty	empty
min	Float	empty	empty
step	Float	empty	empty

Password type

Full documentation on Mozilla Password page

Variable	Type	Default value if not set	Accepted values
maxlength	Integer	empty	empty
minlength	Integer	empty	empty
pattern	String	empty	javascript regular expression
size	Integer	empty	empty

Range type

Full documentation on Mozilla Range page

Variable	Type	Default value if not set	Accepted values
datalist	Array	empty	list of suggestions users can pick to automatically fill the control's value
max	Float	empty	empty
min	Float	empty	empty
step	Float	empty	empty

This range type will display an input number HTML tag with the field value.

Search type

Full documentation on Mozilla Search page

Variable	Type	Default value if not set	Accepted values
maxlength	Integer	empty	empty
minlength	Integer	empty	empty
pattern	String	empty	javascript regular expression
size	Integer	empty	empty
spellcheck	Boolean	false	true or false

Tel type

Full documentation on Mozilla Tel page

Variable	Type	Default value if not set	Accepted values
maxlength	Integer	empty	empty
minlength	Integer	empty	empty
pattern	String	empty	javascript regular expression
size	Integer	empty	empty

Text type

Full documentation on Mozilla Text page

Variable	Type	Default value if not set	Accepted values
maxlength	Integer	empty	empty
minlength	Integer	empty	empty
pattern	String	empty	javascript regular expression
size	Integer	empty	empty
spellcheck	Boolean	false	true or false

Time type

Full documentation on Mozilla Time page

Variable	Type	Default value if not set	Accepted values
max	Date	empty	latest time to accept in hh:mm or hh:mm:ss format
min	Date	empty	earliest time to accept in hh:mm or hh:mm:ss format
step	Integer	empty	integer, to read as second

When the step variable is provided, browser will add the seconds input area adjacent to the minutes section.
The max and min variables format will automatically be forced to hh:mm:ss.

URL type

Full documentation on Mozilla URL page

Variable	Type	Default value if not set	Accepted values
datalist	Array	empty	list of suggestions users can pick to automatically fill the control's value
maxlength	Integer	empty	empty
minlength	Integer	empty	empty
pattern	String	empty	javascript regular expression
size	Integer	empty	empty
spellcheck	Boolean	false	true or false

Week type

Full documentation on Mozilla Week page

Variable	Type	Default value if not set	Accepted values
max	Date	empty	latest time to accept in yyyy-Www format
min	Date	empty	earliest time to accept in yyyy-Www format
step	Integer	empty	integer, to read as 1week

Retrive data

Retrieve your value from Database with a simple get_option('my_text_field_id', '') (see WordPress reference):

// Get text from Database
$text = get_option('my_text_field_id', '');

// Display text
echo $text;

Release History

Version	Note
0.0.23	Fix jQuery integration on domReady
0.0.22	Change main DIV id to avoid HTML conflicts for labels
0.0.21	Enable datalist suggestions for range type

Contributing

1. Fork it (https://github.com/GetOlympus/olympus-dionysos-field-text/fork)
2. Create your feature branch (git checkout -b feature/fooBar)
3. Commit your changes (git commit -am 'Add some fooBar')
4. Push to the branch (git push origin feature/fooBar)
5. Create a new Pull Request

---

Built with ♥ by Achraf Chouk ~ (c) since a long time.