pat-forward: understand the trigger auto option

[ale-rt]

This is useful to trigger an injection after something is injected.

Example of use cases I want to solve with this change:

1. when viewing a container I have a sidebar where I can search for a content
2. I add a content
3. I expect to see the content injected in the page main element
4. I expect to see the document appearing in the sidebar if it matches the search

I do not want to pass all the search parameters during the content creation.
So, after injecting the document I trigger through pat-forward the injection of the sidebar by triggering the search button.

[ale-rt]

@pilz Why this has the hold merge label?
I do not see any risk in merging, cause it adds a useful feature and it is 100% backward compatible.

[pilz]

It has triggered a diffuse fear in the design department and requires some talking first. I have put the hold label to signal that until I get a little time to talk to you about it.

[pilz]

@Ale can you write me a few lines why this is needed/which problem we solve with it? Thanks!

[ale-rt]

I think the ticket description already shows a valid use case, anyway I prepared a video that should show how cool is to have something like that:

• https://www.youtube.com/watch?v=I-nUHiV1IxI&feature=youtu.be

[ale-rt]

The problem it solves is to trigger updates of parts of the page without getting crazy storing state parameters somewhere (hidden inputs, query strings, etc...).
If you are aware of other quick methods to achieve the same results I am fine with that.

[pilz]

This is actually extremely similar to pat-inject trigger:autoload.

Pat-inject is there to load some content when a user clicks somewhere.
With trigger-autoload we gain a way to start an injection even automatically. Either immediately or when an element becomes visible.

Pat-forward is meant to forward a (click) event to another element somewhere on the page when the user clicks.
This PR would add trigger: autoload so that this forward event happens automatically.

Why is this so helpful?

Because in situations where we have the super complex sidebar with filters and search, changes to the content may affect the sidebar (Renaming a title, closing a task…). So on (auto-)save we must also refresh the sidebar. But then the sidebar might be in a complex state where the user has selected a custom grouping and used a search term. All that would be lost if we would just reload the content. We also must pass in all the parameters of the sidebar. But they live in a separate form. Formulating such a request to save the content item becomes highly complex.

Currently we don't do it. So the user completes a task and in the sidebar, the task still shows as open, until the user reloads the page. Not nice…

What if we could just trigger a submit of the sidebar search form when the user toggles the workflow state to done? That would totally be enough. We just simulate the fix that the user now performs manually. We trigger a refresh of the sidebar component.

This Pull Request allows us exactly that for pat-forward what we already successfully use for pat-inject.
A switch of the workflow dropdown would inject a markup snippet which contains a

<a class="pat-forward" data-pat-forward="selector: #submit; trigger: auto">…</a>

And upon injection finish, this snipped would trigger the form in the sidebar in its current state and for the user it would magically update correctly.

The code impact is minimal, we just add the trigger option. Nothing existing is changed.
The UX impact is high because we can suddenly implement something very close to push updates for user interface components.
And the time to market is minimal, we can right away use it with minimal changes to our code.

[pilz]

@cornae could you take a look, this is hot!

[pilz]

This is a very simple and non-intrusive extension. We have still not resolved the discussion why this is necessary because the topic is very complex to discuss and requires us to dissect the currrent injections in place. I want to set up two variations of prototype pages, one with an amended injection and one with a pat-forward trigger auto solution so that we can move the discussion from theory to practice.
So I will merge this to allow us to make examples. This will not harm anything.

[cornae]

Is this already deployed? I failed to find a mention of the trigger property in the documentation. Or is this on purpose because it's experimental?

https://patternslib.com/forward