Amphtml: Create an API to allow 1-click links in the bottom 20% of amp-story-grid-layer

[newmuis]

Currently, 1-click links are only allowed in <amp-story-cta-layer>. This can make some designs difficult to achieve, since the link may need to be on a separate layer than other content.

Instead, I propose that we expose an API to allow bypassing the tooltip on <a> tags within <amp-story-grid-layer>, and at layout time detect whether the link is within the bottom 20% of the grid layer.

As an example, we could honor a has-tooltip attribute on <a> tags, with the options:

• has-tooltip="true" [default] No matter where on the screen it is, the link should trigger a tooltip
• has-tooltip="auto" The story format should determine whether a tooltip should be displayed (our current logic is "bottom 20%", but this could change over time; e.g. we could opt to say that tap targets greater than a certain size must have a tooltip)
• (note that has-tooltip="false" would explicitly not be supported)

[newmuis]

/cc @Enriqe @gmajoulet

[gmajoulet]

The API looks good to me.

As of today, we have a overflow: hidden; on the amp-story-cta-layer and do not display anything that overflows. With this new implementation, what do we do if an element overflows from the bottom 20%?

[newmuis]

My gut is that anything that intersects the top 80% is forced to have a tooltip, but I'm open to other ideas there as well.

[Enriqe]

I can take on this one @newmuis

[newmuis]

Sounds good. Thanks @Enriqe!

[dvoytenko]

@newmuis how would you look at the following variation?

1. A link can be anywhere, but requires metadata (description/icon).
2. A link can specify that a preference to be a 1-tap link.
3. When a link is clicked, the target clientX/Y are checked. If within the bottom 20% and the link expresses preference - the link is navigated without prompts. Otherwise, a prompt is shown.

[dvoytenko]

/cc @pbakaus

[newmuis]

We can't require (1), as it's backwards incompatible and would invalidate (some) existing stories. This metadata is intended to be optional.

(2) and (3) are what the original issue here proposes (or so I intended). Publishers can specify preference for the 1-click behavior with has-tooltip="auto"

Can you elaborate on what you envision differently than what I've already proposed? Is it just a difference in the semantics (i.e. the negation of the API proposed above)?

[pbakaus]

Im very much in favor of this proposal as-is.

[dvoytenko]

@newmuis

We can't require (1), as it's backwards incompatible and would invalidate (some) existing stories. This metadata is intended to be optional.

We don't have to require metadata strictly - instead we can default metadata to the domain name/favicon.

Can you elaborate on what you envision differently than what I've already proposed? Is it just a difference in the semantics (i.e. the negation of the API proposed above)?

Not sure if these are principal distinctions, but my suggestion is to use click's coordinates w.r.t to viewport to make the 1-2-tap decision, not the element's layout measurement. This will have performance benefit and we'll reduce questions about elements that may span the 20% line.

[Enriqe]

We don't have to require metadata strictly - instead we can default metadata to the domain name/favicon.

We already have default text / icon for the tooltip case. It would be straightforward to incorporate this.

[...] but my suggestion is to use click's coordinates w.r.t to viewport to make the 1-2-tap decision, not the element's layout measurement

I like this idea 👍

[dvoytenko]

To bikeshed more on the format. My recommendation is to change it slightly:

1. has-tooltip -> show-tooltip
2. Default value is show-tooltip=auto. The runtime makes the decision itself.
3. The page can override this with show-tooltip=true. Always show tooltip.
4. The show-tooltip=false is not allowed.

[newmuis]

Changing the default here is a breaking change to people who explicitly wanted tooltips in the bottom 20% with the current API.

[dvoytenko]

Ok. Got it now. Thanks for the clarification. I thought all of this was "new API".

[dvoytenko]

Actually I can seem to find has-tooltip anywhere. Has it been previously implemented at all?

[gmajoulet]

With the current logic the has-tooltip is not needed: any link outside of the amp-story-cta-layer triggers a tooltip.

[dvoytenko]

Ok. I think you have a greater visibility on how to name attributes/values/defaults. Let's get this implementation going!

[newmuis]

Just to clarify on the defaults, it's true that has-tooltip is not used anywhere. But, the default is covering the absence of that attribute, which currently when no attribute is specified (the only possibility currently), the behavior is to have a tooltip.

[Enriqe]

New API name will be show-tooltip, with the values that @newmuis described in the original comment.