Follow up for #1775530: Move picture into core

Problem/Motivation

If an AJAX callback is sending a new picture it isn't processed.

Proposed resolution

Add a listener so the polyfill is executed after every AJAX request. The listener only has to be available if jQuery and Drupal are defined, so we don't load jQuery on every page.

Remaining tasks

Needs manual testing.

User interface changes

None

API changes

None

Comments

attiks’s picture

Status: Active » Needs review
StatusFileSize
new1.81 KB
nod_’s picture

Status: Needs review » Active

Adding a script and library_alter drupal.ajax to depend on the behavior for the polyfill seems like it'd work.

nod_’s picture

Status: Active » Needs review

woops, sorry for status change.

nod_’s picture

Status: Needs review » Needs work

so yeah, would be better to have that than checking for Drupal and jQuery which doesn't guarantee anything about ajax.

attiks’s picture

True, what was I thinking :-)

nod_’s picture

Status: Needs work » Needs review
StatusFileSize
new1.78 KB
attiks’s picture

+++ b/core/modules/picture/picture.moduleundefined
@@ -116,6 +129,13 @@ function picture_library_info() {
+  $libraries['drupal.ajax']['dependencies'][] = array('picture', 'drupal.picture');

So this means both picture.js and picturefill.js gets loaded even if there's no picture to display?

nod_’s picture

um that's right. We could just put the behavior in a file and remove the events bindings from the polyfill to avoid executing that all over the place.

I could live with #6, the file will be rather small and if people don't like it, they should not use the module.

Either way works for me, I'd prefer this one to avoid having contrib take that has an example and do crazy things.

attiks’s picture

#8 the good thing about the polyfill is that it works outside Drupal as well, this guaranties us the best compatibility with the standard.

The event bindings on the polyfill or needed for resize, so they have to stay, unless we switch to our new matchmedia model.

For this issue we need to find a solution without introducing more dependencies, and avoid loading files unless we really need them.

tstoeckler’s picture

+++ b/core/modules/picture/picture.module
@@ -101,6 +101,19 @@ function picture_menu() {
+    'website' => 'http://drupal.org/node/1836860',

I don't think we usually specify this fore core libraries. If we do want something we should use some documentation page, but not this issue.

attiks’s picture

This is the same as has been done for matchmedia.js, see http://drupalcode.org/project/drupal.git/blob/refs/heads/8.x:/core/modul...

But the bigger problem to solve is what to add to solve this problem.

attiks’s picture

Component: image system » picture.module

Moving to right component

attiks’s picture

Wrong issue

moshe weitzman’s picture

Any consensus on how to proceed here?

attiks’s picture

#8 we can not babysit contrib code, the patch in #1 only adds the js if needed, and although it looks strange it doesn't cause overhead if not needed.

@nod_ can you give feedback as well?

nod_’s picture

#1 +1, no better solution right now.

Don't need the closure though.

attiks’s picture

I'll try to reroll later today, unless someone beats me to it

attiks’s picture

StatusFileSize
new1.36 KB

Patch rerolled, closure removed

jelle_s’s picture

Status: Needs review » Needs work

#18: picture.js is missing from the patch.

attiks’s picture

Status: Needs work » Needs review
StatusFileSize
new1.81 KB

let's try again

rainbowarray’s picture

Just curious where this issue is at, since the last patch was in December. Has this been resolved elsewhere? Is a reroll needed?

rainbowarray’s picture

Assigned: attiks » Unassigned
Issue summary: View changes

It appears this patch still applies if somebody wants to review it.

attiks’s picture

Issue tags: +Needs reroll

FYI: picture is renamed to responsive_image so this needs a reroll once #2124377-74: Rename "Picture" module to "Responsive Image" module is committed

eli-t’s picture

Component: picture.module » responsive_image.module
SGhosh’s picture

Status: Needs review » Needs work

The underlying code seems to have changed a lot. The patch's code doesn't match with the current branch cod eat all. Also, will need to check whether the bug still remains.

Considering the change in name to responsive_image -

* function picture_library_info() { doesn't exist in responsive_image.module
* hence the new js file picture.js or now responsive_image.js cannot be added in the function for inclusion either

The patch needs to be recreated. Changing status to needs work.

attiks’s picture

If anybody wants to work on this, keep in mind that we can no longer change the upstream polyfill

rainbowarray’s picture

The most recent patch relies upon making a change to picturefill, which we won't be able to do. So how viable is this? Is there another way to tackle this?

attiks’s picture

Title: Picture doesn't work with ajax callback » [PP-1] Picture doesn't work with ajax callback
Status: Needs work » Postponed
Related issues: +#2260061: Responsive image module does not support sizes/picture polyfill 2.2

Files needs to be renamed, but the change to the polyfill is no longer needed.

Postponing on #2260061: Responsive image module does not support sizes/picture polyfill 2.2 since it will add the latest polyfill version.

wim leers’s picture

Title: [PP-1] Picture doesn't work with ajax callback » Picture doesn't work with ajax callback
Status: Postponed » Active

#2260061: Responsive image module does not support sizes/picture polyfill 2.2 got committed (YAY!), hence this is now unblocked :)

attiks’s picture

Status: Active » Needs review
StatusFileSize
new1.56 KB

Quick reroll, but this will load javascript on all pages where responsive images are used, even if there's no other javascript added, maybe we should try to detect if other javascript is added (especially ajax related).

wim leers’s picture

  1. I think #6 was a significantly better approach.
  2. The problem isn't clear to me. Is the problem. That picturefill.js isn't being loaded if an AJAX request adds the first responsive image? Or is the problem that we must invoke picturefill's function every time a responsive image is added to the DOM?
attiks’s picture

Assigned: Unassigned » attiks

#31 @Wim Leers off course use alter.

The problem is that it is needed if a new picture tag is added so it gets processed.

attiks’s picture

StatusFileSize
new1.62 KB

Status: Needs review » Needs work

The last submitted patch, 33: i1836860-33-responsive_images-ajax.patch, failed testing.

wim leers’s picture

So:

Or is the problem that we must invoke picturefill's function every time a responsive image is added to the DOM?

That seems like a huge flaw in the polyfill?

attiks’s picture

#35 Not sure, I don't even know if you could listen to newly added DOM elements and I think most polyfills work like this.

attiks’s picture

Status: Needs work » Needs review
StatusFileSize
new1.61 KB
wim leers’s picture

Title: Picture doesn't work with ajax callback » Picture doesn't work with AJAX callback
Status: Needs review » Needs work
  1. +++ b/core/modules/responsive_image/responsive_image.js
    @@ -0,0 +1,16 @@
    +    attach: function () {
    +      if (window.picturefill) {
    +        window.picturefill();
    +      }
    +    }
    

    This will actually cause it to run upon loading the page also. Which is unnecessary.

    I wonder if it'd be better to override

    Drupal.ajax.success<code> instead? Then we really only call it in case of an AJAX response.
    
    Though perhaps that's an optimization that's not worth it.
    
    If we'd know how much it costs to call <code>window.picturefill()

    when there is no work to be done, but there are actual <picture> elements on the page.

    Profiling this at http://scottjehl.github.io/picturefill/, it doesn't seem like there's any significant cost. Can you confirm that, @attiks?

  2. +++ b/core/modules/responsive_image/responsive_image.libraries.yml
    @@ -0,0 +1,4 @@
    +drupal.responsive_image:
    

    Let's s/drupal.responsive_image/ajax/.

    Because, this is really only necessary for AJAX requests; the current name implies its' more generally useful, but it's definitely not.

Vikas.Kumar’s picture

Status: Needs work » Needs review
StatusFileSize
new1.61 KB

Needs review.

attiks’s picture

Patch looks good, having this executed on page load is not going to be a performance problem.

@vks7056 can you do the rename to ajax instead of drupal.responsive_image as @Wim Leers asked in #38?

durgesh_singh’s picture

StatusFileSize
new1.61 KB
durgesh_singh’s picture

StatusFileSize
new1.61 KB
attiks’s picture

#42 Thanks for the patch, but the rename is not done:

drupal.responsive_image should be ajax

durgesh_singh’s picture

StatusFileSize
new1.61 KB

you means file name should be i1836860-38-ajax.patch

dcam’s picture

Issue tags: -Needs reroll

#44 applies to HEAD. Removing the "Needs reroll" tag.

attiks’s picture

Assigned: attiks » Unassigned
jelle_s’s picture

StatusFileSize
new1.6 KB

New patch:

  • Rename as suggested in #38.
  • Moved the js file to a js folder as it seems to be the standard throughout core
attiks’s picture

  1. +++ b/core/modules/responsive_image/js/responsive_image.js
    @@ -0,0 +1,16 @@
    +  Drupal.behaviors.responsive_images = {
    

    rename to responsive_image.ajax

  2. +++ b/core/modules/responsive_image/responsive_image.libraries.yml
    @@ -0,0 +1,4 @@
    +    js/responsive_image.js: {}
    

    responsive_image.ajax.js

jelle_s’s picture

StatusFileSize
new1.62 KB

New patch based on #48

Renamed the behavior to responsiveImageAJAX since the standard seems to be camelCase for behaviors.

Status: Needs review » Needs work

The last submitted patch, 49: i1836860-49-ajax.patch, failed testing.

Status: Needs work » Needs review

Jelle_S queued 49: i1836860-49-ajax.patch for re-testing.

attiks’s picture

Status: Needs review » Reviewed & tested by the community

This is good to go

alexpott’s picture

Status: Reviewed & tested by the community » Fixed

Committed 3473bd5 and pushed to 8.0.x. Thanks!

  • alexpott committed 3473bd5 on 8.0.x
    Issue #1836860 by attiks, durgesh_singh, Jelle_S, nod_, vks7056, Wim...

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.