Object & Attribute formatting
data-phosis-object-format¶
Use this attribute to specify a basic format for how the content is populated from below.
data-phosis-object-[attribute]-format¶
Use this attribute to specify a basic format for how the content is populated.
Replace data-phosis-object-format in the examples below with data-phosis-object-[attribute]-format to use.
Using Formats¶
Ahoy, Beta Stuff Ahead!
This feature in Phosis is very much hot-off-the-presses and in testing.
We weighed getting this extremely useful feature into users’ hands as soon as possible versus knocking all the bugs out. So, note: we haven’t yet confirmed all of the date format strings are working as intended, but the basics should all be fine.
New in v0.32, Formats and formatting functions allow you to process the value before hydrating the object contents or attributes.
You reference the original value as a set of empty braces {}, or the result of a function inside those braces.
You can either prefix/postfix text, or run a formatting function on the value.
Prefix & postfix text¶
Text before and after the curly braces will be passed through during hydration.
If you took the example from above and wanted the text to be prefixed by the words “Title: “, you would do:
data-phosis-object-format="Title: {}"
Resulting in…
<h3 data-phosis-object="Title" data-phosis-object-format="Title: {}">I Am A Title</h3>
When hydrating in Phosis Render, the curly braces {} will be replaced with the current value before being placed into this content. In our example, if we were populating an article named “Test Article,” the hydrated HTML would be:
<h3>Title: Test Article</h3>
If you’re using data-phosis-object-attributes, you can use the variation data-phosis-object-[attribute]-format to specify a basic format for how a specific attribute is populated.
For example, in our attribute example above, say you wanted the href to be a mailto: link but the display text to be the plain email address, you can do:
data-phosis-object-href-format="mailto:{}"
Resulting in…
<h3><a href="#" data-phosis-object="Email Link" data-phosis-object-attributes="href,text" data-phosis-object-href-format="mailto:{}"></a></h3>
When hydrating in Phosis Render, the curly braces {} will be replaced with the current value before being placed into the appropriate attirbute.
Formatting functions¶
You can run a function on the original value by placing the function and its options within the curly braces.
Nest with caution
Currently, formatting functions can be nested, e.g.
data-phosis-object-format="Posted {lowerCase(dateTime(dddd, MMM Do))}"
But, we haven’t tested all functions nested within each other, so proceed with caution.
All formatting functions are presently in en-US culture. We’re looking forward to supporting international users soon!
These functions are available:
Date/time formatting functions¶
Function: dateTime(format string)
Formats the value as a date and/or time according to the format string. Format string tokens are a subset of those from moment.js, but run serverside.
Example object configuration:
<h5 data-phosis-object="DatePosted" data-phosis-object-format="Posted {dateTime(dddd, MMMM Do YYYY)} at {dateTime(h:mm A)}"></h3>
Example input value:
01/28/2020 15:04:00
Example result:
Posted Tuesday, January 28th 2020 at 3:04 PM
If the value isn’t parseable as a valid date or time, the hydrated value will be empty.
Date/time formatting reference¶
Days¶
| Token | Output | Description |
|---|---|---|
| D | 1 2 … 30 31 | Numeric day of the month without a leading zero. |
| DD | 01 02 … 30 31 | Numeric day of the month with a leading zero. |
| Do | 1st 2nd … 30th 31st | Numeric day of the month + ordinal suffix |
| DDD | 1 2 … 364 365 | Numeric day of the year without leading zeroes |
| DDDD | 001 002 … 364 365 | Numeric day of the year with leading zeroes |
| DDDo | 1st 2nd … 364th 365th | Numeric day of the year + ordinal suffix |
| E | 1 2 … 6 7 | ISO numeric day of the week |
| Eo | 1st 2nd … 6th 7th | Numeric ISO day of the week + ordinal suffix |
| ddd | Sun Mon … Fri Sat | Three-letter day of week name abbreviation |
| dddd | Sunday … Saturday | Day of week name |
Months¶
| Token | Output | Description |
|---|---|---|
| M | 1 2 … 11 12 | Numeric month of the year without leading zero |
| MM | 01 02 … 11 12 | Numeric month of the year with leading zero |
| Mo | 1st 2nd … 11th 12th | Numeric month of the year with + ordinal suffix |
| MMM | Jan Feb … Nov Dec | Three-letter month name abbreviation |
| MMM | January … December | Month name |
Years¶
| Token | Output | Description |
|---|---|---|
| YY | 90 91 … 19 20 | Two digit year |
| YYYY | 1990 1991 … 2019 2020 | Four digit year |
Hours¶
| Token | Output | Description |
|---|---|---|
| H | 0 1 … 22 23 | Hour of day without leading zero (24h clock) |
| HH | 00 01 … 22 23 | Hour of day with leading zero (24h clock) |
| h | 1 2 … 11 12 | Hour of day without leading zero (12h clock) |
| hh | 01 02 … 11 12 | Hour of day with leading zero (12h clock) |
Minutes¶
| Token | Output | Description |
|---|---|---|
| m | 0 1 … 58 59 | Minute of the hour without leading zero |
| mm | 00 01 … 58 59 | Minute of the hour with leading zero |
Seconds¶
| Token | Output | Description |
|---|---|---|
| s | 0 1 … 58 59 | Second of minute without leading zero |
| ss | 00 01 … 58 59 | Second of minute with leading zero |
Meridiems¶
| Token | Output | Description |
|---|---|---|
| A | A P | Single-letter capitalized meridiem |
| AA | AM PM | Two-letter capitalized meridiem |
| a | a p | Single-letter lowercase meridiem |
| aa | am pm | Two-letter lowercase meridiem |
Timestamps¶
| Token | Output | Description |
|---|---|---|
| X | 314921160 | Unix timestamp (seconds) |
Text formatting functions¶
Title case¶
Function: titleCase()
Converts the string to title case based on en-US culture.
Example object configuration:
<h2 data-phosis-object="Title" data-phosis-object-format="{titleCase()}"></h3>
Example input value:
I am a poorly capitalized article title
Example result:
I Am a Poorly Capitalized Article Title
Uppercase¶
Function: upperCase()
Converts the string to all-uppercase.
Example object configuration:
<h2 data-phosis-object="Title" data-phosis-object-format="{upperCase()}"></h3>
Example input value:
Why are you shouting?
Example result:
WHY ARE YOU SHOUTING?
Lowercase¶
Function: lowerCase()
Converts the string to all-lowercase.
Example object configuration:
<h2 data-phosis-object="Title" data-phosis-object-format="{lowerCase()}"></h3>
Example input value:
I am an E. E. Cummings Poem
Example result:
Remove spaces¶
Function: removeSpaces()
Removes spaces from the text.
Example object configuration:
<h2 data-phosis-object="Title" data-phosis-object-format="{removeSpaces()}"></h3>
Example input value:
I am very compressed
Example result:
Iamverycompressed
Dash spaces¶
Function: dashSpaces()
Replaces spaces from the text.
Example object configuration:
<h2 data-phosis-object="Title" data-phosis-object-format="{dashSpaces()}"></h3>
Example input value:
I want no space
Example result:
I-want-no-space
No non-alphanumerics¶
Function: removeNonAlphanumeric()
Removes all non-alphanumeric characters from the text.
Example object configuration:
<h2 data-phosis-object="Title" data-phosis-object-format="{removeNonAlphanumeric()}"></h3>
Example input value:
1, 2, 3, 4: Get your feet out on the floor
Example result:
1234Getyourfeetoutonthefloor
No non-alphanumerics and dash spaces¶
Function: removeNonAlphanumericDashSpaces()
Removes all non-alphanumeric characters from the text, and replaces spaces with dashes
Example object configuration:
<h2 data-phosis-object="Title" data-phosis-object-format="{removeNonAlphanumericDashSpaces()}"></h3>
Example input value:
1, 2, 3, 4: Get your feet out on the floor
Example result:
1-2-3-4-Get-your-feet-out-on-the-floor
Under development¶
More functions will be coming soon. Be sure to let us know of any you may find useful!