getolympus/olympus-text-field

[READ-ONLY] Text field, this component is a part of the Olympus Zeus Core framework.

Tuesday, May 1, 2018
by crewstyle
Repository
1 Watchers
0 Stars
180 Installations

PHP
2 Dependents
0 Suggesters
0 Forks
0 Open issues
11 Versions
0 % Grown

The README.md

, _(*1)

Dionysos Text Field

![CodeFactor Grade][codefactor-image] ![MIT][license-image], _(*2)

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., _(*3)

composer require getolympus/olympus-dionysos-field-text

Field initialization • Variables definition • Settings definition • Retrive data • Release History • Contributing, _(*4)

Field initialization

Use the following lines to add a text field in your WordPress admin pages or custom post type meta fields:, _(*5)

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:, _(*6)

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, _(*7)

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, _(*8)

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, _(*9)

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, _(*10)

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, _(*11)

Month type

Full documentation on Mozilla Month page, _(*12)

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, _(*13)

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, _(*14)

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, _(*15)

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., _(*16)

Search type

Full documentation on Mozilla Search page, _(*17)

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, _(*18)

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, _(*19)

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, _(*20)

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., _(*21)

URL type

Full documentation on Mozilla URL page, _(*22)

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, _(*23)

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):, _(*24)

// 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