From a90d46dbc4e7f23e2c022e7e4e931c7ee8900794 Mon Sep 17 00:00:00 2001 From: Steve Boyd Date: Sat, 31 Jul 2021 14:45:24 +1200 Subject: [PATCH] NEW Title tips for form fields --- .../02_Developer_Guides/14_Files/02_Images.md | 4 +- docs/en/04_Changelogs/4.9.0.md | 45 ++++++++++++++++++- src/Forms/FormField.php | 30 ++++++++++++- tests/php/Forms/FormFieldTest.php | 20 +++++++++ 4 files changed, 95 insertions(+), 4 deletions(-) diff --git a/docs/en/02_Developer_Guides/14_Files/02_Images.md b/docs/en/02_Developer_Guides/14_Files/02_Images.md index 279c345bc..180a8a858 100644 --- a/docs/en/02_Developer_Guides/14_Files/02_Images.md +++ b/docs/en/02_Developer_Guides/14_Files/02_Images.md @@ -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. -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 SilverStripe\Assets\Image: diff --git a/docs/en/04_Changelogs/4.9.0.md b/docs/en/04_Changelogs/4.9.0.md index ef2990906..fba5ba140 100644 --- a/docs/en/04_Changelogs/4.9.0.md +++ b/docs/en/04_Changelogs/4.9.0.md @@ -1,6 +1,49 @@ # 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 (``) 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)). + +## 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! diff --git a/src/Forms/FormField.php b/src/Forms/FormField.php index d35871c3a..e4663291c 100644 --- a/src/Forms/FormField.php +++ b/src/Forms/FormField.php @@ -182,6 +182,11 @@ class FormField extends RequestHandler */ 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 * 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() { - return [ + $data = [ 'name' => $this->getName(), 'id' => $this->ID(), 'type' => $this->getInputType(), @@ -1569,6 +1574,11 @@ class FormField extends RequestHandler 'autoFocus' => $this->isAutofocus(), '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); 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; + } } diff --git a/tests/php/Forms/FormFieldTest.php b/tests/php/Forms/FormFieldTest.php index e6333e43f..8f60cddbb 100644 --- a/tests/php/Forms/FormFieldTest.php +++ b/tests/php/Forms/FormFieldTest.php @@ -15,6 +15,7 @@ use SilverStripe\Forms\NullableField; use SilverStripe\Forms\RequiredFields; use SilverStripe\Forms\Tests\FormFieldTest\TestExtension; use SilverStripe\Forms\TextField; +use SilverStripe\Forms\Tip; use SilverStripe\ORM\ValidationResult; class FormFieldTest extends SapphireTest @@ -360,6 +361,16 @@ class FormFieldTest extends SapphireTest $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() { $field = new FormField('MyField'); @@ -478,4 +489,13 @@ class FormFieldTest extends SapphireTest ['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()); + } }