Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Applab: add fit property for images #19011

Merged
merged 5 commits into from Nov 10, 2017
Merged

Conversation

cpirich
Copy link
Contributor

@cpirich cpirich commented Nov 9, 2017

  • Added fit image property for Image elements in design mode. The four exposed options in the dropdown are fill, contain, cover, and none. See https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit for details. Existing projects with images will default to fill for compatibility reasons. New images created in design mode or using the image() API will default to contain.
    screen shot 2017-11-09 at 11 30 29 am
  • Exposed this property via the setProperty() and getProperty() APIs with the property name fit. The droplet blocks and text mode autocomplete will show the same four options in the dropdown when the fit property is chosen.
  • Because the object-fit style is not supported on some older browsers (including all versions of IE), we use the object-fit-images polyfill to ensure that everything still works on IE. Additionally, when saving projects, we only store our own data-object-fit custom attribute with this value. At load time, we tack on the appropriate styles based on the value of that custom attribute. The polyfill needs to be triggered at launch, whenever we change the fit property, and within design mode's makeDraggable() after it wraps the image elements. The polyfill monitors changes to the src and the image element's size on its own.
  • Changed behavior when changing an image element's source URL such that we no longer resize the element.
  • Changed the visibility of placeholder images for Image, Chart, and Canvas elements in code mode while not running to match design mode (related, but separate feature request)
  • Updated existing tests and added new test code for the fit property

@cpirich cpirich changed the title add fit property for images Applab: add fit property for images Nov 9, 2017
Copy link
Contributor

@islemaster islemaster left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awesome! This looks really good.

*/

export function applabObjectFitImages(imgs, opts) {
if (/PhantomJS/.test(window.navigator.userAgent)) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍 Thanks for doing this instead of IN_UNIT_TEST - that means if we switch to headless chrome we'll actually run this polyfill in tests.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants