NEW Title tips for form fields

This commit is contained in:
Steve Boyd 2021-07-31 14:45:24 +12:00
parent ae61be3a49
commit a90d46dbc4
4 changed files with 95 additions and 4 deletions

View File

@ -204,9 +204,9 @@ SilverStripe\Core\Injector\Injector:
Images added via the WYSIWYG editor and as objects on templates are [lazy loaded](https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading) by default. Images added via the WYSIWYG editor and as objects on templates are [lazy loaded](https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading) by default.
To disable lazy loading for an individual image with a template, you can call `$MyImage.LazyLoad(false)`. To disable lazy loading for an individual image in a template, use `$MyImage.LazyLoad(false)`.
You can opt out of lazy loading globally by setting the `Image::lazy_loading_enabled` config to `false`, see example `yml`: To out of lazy loading globally, notably if you already have a custom lazy loading implementation, use the following yml config:
```yml ```yml
SilverStripe\Assets\Image: SilverStripe\Assets\Image:

View File

@ -1,6 +1,49 @@
# 4.9.0 (Unreleased) # 4.9.0 (Unreleased)
## Overview
## New features - [Features and enhancements](#features-and-enhancements)
- [Image lazy loading](#image-lazy-loading)
- [Other new features](#other-features)
- [Bugfixes](#bugfixes)
## Features and enhancements {#features-and-enhancements}
### Image lazy loading {#image-lazy-loading}
Silverstripe CMS now lazy loads most images by default and includes some options to opt-out of this behaviour.
Image lazy loading defers the loading of images not in the viewport to improve the initial page load performance.
Read more about (image lazy-loading)[https://web.dev/browser-level-image-lazy-loading/].
This feature was implemented in partnership with Google.
Most images will now get the `loading="lazy"` attribute added to them. This includes:
- images added via the HTML Editor's **insert media** button
- image DataObjects added to templates
Image HTML tags (`<img>`) added in templates will not be lazy loaded by default.
To disable lazy loading for an individual image in a template, use `$MyImage.LazyLoad(false)`.
There's some scenarios where you might not want to use the native Silverstripe CMS lazy loading. For example, you might already have a custom lazy loading implementation.
To opt out of lazy loading globally, use the following yml config:
```yml
SilverStripe\Assets\Image:
lazy_loading_enabled: false
```
#### CMS authors
CMS authors can disable lazy loading on images added via the WYSIWYG editor in the "Edit image" panel by setting the new "Loading" field to "Eager".
### Other new features
* [Dot notation support in form fields](https://github.com/silverstripe/silverstripe-framework/pull/9192): Save directly into nested has_one relationships (see [docs](/developer_guides/forms/how_tos/handle_nested_data)). * [Dot notation support in form fields](https://github.com/silverstripe/silverstripe-framework/pull/9192): Save directly into nested has_one relationships (see [docs](/developer_guides/forms/how_tos/handle_nested_data)).
## Bugfixes {#bugfixes}
This release includes a number of bug fixes to improve a broad range of areas. Check the change logs for full details of these fixes split by module. Thank you to the community members that helped contribute these fixes as part of the release!

View File

@ -182,6 +182,11 @@ class FormField extends RequestHandler
*/ */
protected $customValidationMessage = ''; protected $customValidationMessage = '';
/**
* @var Tip|null
*/
private $titleTip;
/** /**
* Name of the template used to render this form field. If not set, then will look up the class * Name of the template used to render this form field. If not set, then will look up the class
* ancestry for the first matching template where the template name equals the class name. * ancestry for the first matching template where the template name equals the class name.
@ -1548,7 +1553,7 @@ class FormField extends RequestHandler
*/ */
public function getSchemaDataDefaults() public function getSchemaDataDefaults()
{ {
return [ $data = [
'name' => $this->getName(), 'name' => $this->getName(),
'id' => $this->ID(), 'id' => $this->ID(),
'type' => $this->getInputType(), 'type' => $this->getInputType(),
@ -1569,6 +1574,11 @@ class FormField extends RequestHandler
'autoFocus' => $this->isAutofocus(), 'autoFocus' => $this->isAutofocus(),
'data' => [], 'data' => [],
]; ];
$titleTip = $this->getTitleTip();
if ($titleTip instanceof Tip) {
$data['titleTip'] = $titleTip->getTipSchema();
}
return $data;
} }
/** /**
@ -1639,4 +1649,22 @@ class FormField extends RequestHandler
$this->extend('updateSchemaValidation', $validationList); $this->extend('updateSchemaValidation', $validationList);
return $validationList; return $validationList;
} }
/**
* @return Tip
*/
public function getTitleTip(): ?Tip
{
return $this->titleTip;
}
/**
* @param Tip|null $tip
* @return $this
*/
public function setTitleTip(?Tip $tip): self
{
$this->titleTip = $tip;
return $this;
}
} }

View File

@ -15,6 +15,7 @@ use SilverStripe\Forms\NullableField;
use SilverStripe\Forms\RequiredFields; use SilverStripe\Forms\RequiredFields;
use SilverStripe\Forms\Tests\FormFieldTest\TestExtension; use SilverStripe\Forms\Tests\FormFieldTest\TestExtension;
use SilverStripe\Forms\TextField; use SilverStripe\Forms\TextField;
use SilverStripe\Forms\Tip;
use SilverStripe\ORM\ValidationResult; use SilverStripe\ORM\ValidationResult;
class FormFieldTest extends SapphireTest class FormFieldTest extends SapphireTest
@ -360,6 +361,16 @@ class FormFieldTest extends SapphireTest
$this->assertInternalType('array', $schema); $this->assertInternalType('array', $schema);
} }
public function testGetSchemaDataDefaultsTitleTip()
{
$field = new FormField('MyField');
$schema = $field->getSchemaDataDefaults();
$this->assertFalse(array_key_exists('titleTip', $schema));
$field->setTitleTip(new Tip('Test tip'));
$schema = $field->getSchemaDataDefaults();
$this->assertSame('Test tip', $schema['titleTip']['content']);
}
public function testGetSchemaData() public function testGetSchemaData()
{ {
$field = new FormField('MyField'); $field = new FormField('MyField');
@ -478,4 +489,13 @@ class FormFieldTest extends SapphireTest
['SpecialURL', 'Special URL'], ['SpecialURL', 'Special URL'],
]; ];
} }
public function testGetSetTitleTip()
{
$field = new FormField('MyField');
$this->assertNull($field->getTitleTip());
$field->setTitleTip(new Tip('Test tip'));
$this->assertInstanceOf(Tip::class, $field->getTitleTip());
$this->assertSame('Test tip', $field->getTitleTip()->getMessage());
}
} }