Skip to content

✨ Introduces new amp-story-bookend element tag#14937

Merged
newmuis merged 7 commits intoampproject:masterfrom
Enriqe:bookend-tag
May 2, 2018
Merged

✨ Introduces new amp-story-bookend element tag#14937
newmuis merged 7 commits intoampproject:masterfrom
Enriqe:bookend-tag

Conversation

@Enriqe
Copy link
Copy Markdown
Contributor

@Enriqe Enriqe commented Apr 27, 2018

Continuation of #14613 and in preparation of #12167.

Introduction of the new amp-story-bookend tag. Which opens the door for potentially supporting bookends entirely built in the DOM, enabling publishers to specify inline JSON and obviating the need for the RPC.

This introductory PR accepts JSONs using v0.1 and v1.0 of the bookend, but we will eventually only accept JSONs using v1.0 of the bookend JSON API.

@Enriqe Enriqe requested a review from newmuis April 27, 2018 21:28
mandatory_ancestor: "AMP-STORY"
mandatory_last_child: true
attrs: {
name: "bookend-config-src"
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Can we rename this to just src?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Sure


/** Class corresponding to the <amp-story-bookend> DOM element tag. */
export class AmpStoryBookend extends AMP.BaseElement {

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Can we do the loading of the bookend in this class?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

We can, it will just create some code duplication from amp-story-bookend.js to keep it backwards compatible.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

As discussed offline, I will be doing this on a separate PR.

| </amp-story>
| </body>
| </html>
| </html> No newline at end of file
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Did you expect to remove that end of file line break?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

I thought the test was expecting this but I don't think it does anymore. I'll keep it with a new line at the end.

*/
loadJsonFromAttribute_(attributeName) {
if (!this.storyElement_.hasAttribute(attributeName)) {
const bookendElem = this.getBookendElement_(this.storyElement_);
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Nit: we usually use bookendEl as a short for element

}

getBookendElement_(element) {
return [].slice.call(element.children)
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Nit: you can use the childElementsByTag from src/dom

return childElementsByTag(this.storyElement_, 'amp-story-bookend')[0];

You shouldn't need to pass the element as an argument here, since you're using that private property.
And jsdoc please : ))

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Even better, childElementByTag, since we're only getting one.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Nice, thanks! I'll just make the call inline since I don't think it deserves a separate method anymore.

}

getBookendElement_(element) {
return [].slice.call(element.children)
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Even better, childElementByTag, since we're only getting one.


/** @override */
isLayoutSupported(layout) {
return layout == Layout.CONTAINER;
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Should this be nodisplay?

*/
loadJsonFromAttribute_(attributeName) {
if (!this.storyElement_.hasAttribute(attributeName)) {
const bookendEl = childElementsByTag(this.storyElement_,
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Nit: childElementByTag(this.storyElement_, 'amp-story-bookend') like Alan suggested : ))

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Oops, didn't see that comment. Thanks!

import {once} from '../../../src/utils/function';
import {user} from '../../../src/log';

// TODO(#14591): Replace with 'src' when bookend api v0.1 is deprecated.
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

This is in the 1.0 codebase, so you should just be able to replace this now

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

(can you change this before merging?)

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Oh true. Ok, will do.

import {once} from '../../../src/utils/function';
import {user} from '../../../src/log';

// TODO(#14591): Replace with 'src' when bookend api v0.1 is deprecated.
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

(can you change this before merging?)

@Enriqe
Copy link
Copy Markdown
Contributor Author

Enriqe commented May 2, 2018

Ready to ship!

@newmuis newmuis merged commit 6eba2d6 into ampproject:master May 2, 2018
@Enriqe Enriqe deleted the bookend-tag branch May 2, 2018 14:57
noranazmy pushed a commit to noranazmy/amphtml that referenced this pull request May 10, 2018
* Introduces new amp-story-bookend element tag with validator logic.

* Changes attribute to src.

* Reviews.

* Change to nodisplay layout.

* change to childElementTag.

* Changes attribute to fetch JSON to src.

* fix tests.
honeybadgerdontcare added a commit that referenced this pull request May 10, 2018
* Revision bump for #14969

* Revision bump for #14937

* Simplify the script tag error.

* Whitelist pro.fontawesome.com in the AMP font list.

* Error category remapping

* Revision bump for #15106

* Revision bump for #15129

* Revision bump for #15155/15164/15191/15187
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants