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

Implement A2A support #13300

Merged
merged 7 commits into from
Feb 8, 2018
Merged

Conversation

dreamofabear
Copy link

@dreamofabear dreamofabear commented Feb 6, 2018

Closes #12496 and fixes #13056.

  • Repurpose unused a2a viewer message and capability
  • Consolidate navigation logic in ClickHandler service (will be renamed to Navigation after)
  • Add A2A support by support <a rel=amphtml> for links and <meta name="amp-to-amp-navigation" content="AMP.navigateTo, AMP-Redirect-To"> for other navigational features

TODO: Follow up with documentation and validator changes.

@dreamofabear
Copy link
Author

/to @jridgewell @danielrozenberg

* Lazy-generated list of A2A-enabled navigation features.
* @private {?Array<string>}
*/
this.a2aFeatures_ = null;
Copy link
Member

Choose a reason for hiding this comment

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

I thought we wanted to avoid calling it a2a?

Copy link
Author

Choose a reason for hiding this comment

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

Externally, yes. Internally I think it's fine.

}

// Otherwise, perform normal behavior of navigating the top frame.
win.top.location.href = url;
Copy link
Contributor

Choose a reason for hiding this comment

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

Why doesn't this handle custom protocols, too?

Copy link
Author

Choose a reason for hiding this comment

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

I considered this too. amp-form by spec only allows https protocol, but we maybe should add this to AMP.navigateTo. Leaving this and the other <a> behaviors (getExtraParamsUrl, URL expansion, etc.) for future work.

Copy link
Contributor

Choose a reason for hiding this comment

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

Please make an issue for it.

Copy link
Author

Choose a reason for hiding this comment

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

const meta = this.rootNode_.querySelector(
'meta[name="amp-to-amp-navigation"]');
this.a2aFeatures_ = (meta && meta.hasAttribute('content'))
? meta.getAttribute('content').split(',').map(s => s.trim())
Copy link
Contributor

Choose a reason for hiding this comment

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

We can remove the #map by splitting whitespace: content.trim().split(/\s*,\s*/)

Copy link
Author

Choose a reason for hiding this comment

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

I'd prefer to leave as is for readability.

'meta[name="amp-to-amp-navigation"]');
this.a2aFeatures_ = (meta && meta.hasAttribute('content'))
? meta.getAttribute('content').split(',').map(s => s.trim())
: [];
Copy link
Contributor

Choose a reason for hiding this comment

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

Nit: split this into if/else.

? meta.getAttribute('content').split(',').map(s => s.trim())
: [];
}
if (this.a2aFeatures_.indexOf(opt_requestedBy) >= 0) {
Copy link
Contributor

Choose a reason for hiding this comment

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

Array#includes is polyfilled.

*/
handleA2AClick_(e, target, location) {
const relations = (target.hasAttribute('rel'))
? target.getAttribute('rel').split(' ').map(s => s.trim())
Copy link
Contributor

Choose a reason for hiding this comment

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

Ditto splitting whitespace.

const relations = (target.hasAttribute('rel'))
? target.getAttribute('rel').split(' ').map(s => s.trim())
: [];
if (relations.indexOf('amphtml') < 0) {
Copy link
Contributor

Choose a reason for hiding this comment

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

Ditto #includes.

@dreamofabear
Copy link
Author

Tested locally with examples/viewer-webview.html. I'll add my test page in the follow-up.

@dreamofabear dreamofabear merged commit 2db6d70 into ampproject:master Feb 8, 2018
@dreamofabear dreamofabear deleted the fix-amp-navigate-to branch February 8, 2018 20:32
protonate pushed a commit to protonate/amphtml that referenced this pull request Feb 26, 2018
* squash and include a2a changes

* fix lint

* fix other tests

* unit tests

* fix lint

* update amp-form tests

* justin's comments
RanAbram pushed a commit to RanAbram/amphtml that referenced this pull request Mar 12, 2018
* squash and include a2a changes

* fix lint

* fix other tests

* unit tests

* fix lint

* update amp-form tests

* justin's comments
protonate pushed a commit to protonate/amphtml that referenced this pull request Mar 15, 2018
* squash and include a2a changes

* fix lint

* fix other tests

* unit tests

* fix lint

* update amp-form tests

* justin's comments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
5 participants