Skip to content

Διώνυσος — Text field, this component is a part of the Olympus Dionysos fields for WordPress.

License

Notifications You must be signed in to change notification settings

GetOlympus/olympus-dionysos-field-text

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

37 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Dionysos Text Field

Olympus Component CodeFactor Grade Packagist Version MIT

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 initializationVariables definitionSettings definitionRetrive dataRelease HistoryContributing


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

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.