Skip to content

Commit

Permalink
Preserve only name changes and fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@wassgha
wassgha committed Jan 24, 2020
1 parent 909bb9e commit 18f906f
Show file tree
Hide file tree
Showing 5 changed files with 91 additions and 320 deletions.
23 changes: 0 additions & 23 deletions extensions/amp-next-page/1.0/amp-next-page.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,26 +37,3 @@
.i-amphtml-next-page-placeholder {
background: #eee;
}

.amp-next-page-default-separator {
position: relative;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
text-align: center;
font-family: 'Roboto', Helvetica, Arial, sans-serif;
font-weight: 400;
font-size: 14px;
width: 160px;
height: 38px;
margin: auto;
border-radius: 32px;
box-shadow: 0px 6px 17px 0px rgba(0, 0, 0, 0.09);
background: black;
color: white;
}

.i-amphtml-next-page-placeholder {
background: #eee;
}
17 changes: 8 additions & 9 deletions extensions/amp-next-page/1.0/page.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -193,7 +193,7 @@ export class Page {
* root has been removed
*/
resume() {
this.attach_();
this.attach_(devAssert(this.cachedContent_));
}

/**
Expand Down Expand Up @@ -234,14 +234,13 @@ export class Page {
.fetchPageDocument(this)
.then(content => {
this.state_ = PageState.LOADED;
this.cachedContent_ = content;
return this.manager_.createDocumentContainerForPage(this /** page */);
})
.then(container => {
this.container_ = container;
this.container_ = this.manager_.createDocumentContainerForPage(
this /** page */
);
// TODO(wassgha): To further optimize, this should ideally
// be parsed from the service worker instead of stored in memory
this.attach_();
this.cachedContent_ = content;
this.attach_(content);
})
.catch(() => {
this.state_ = PageState.FAILED;
Expand All @@ -252,9 +251,9 @@ export class Page {

/**
* Inserts the fetched (or cached) HTML as the document's content
* @param {!Document=} content
* @param {!Document} content
*/
attach_(content = devAssert(this.cachedContent_)) {
attach_(content) {
const shadowDoc = this.manager_.attachDocumentToPage(
this /** page */,
content,
Expand Down
114 changes: 37 additions & 77 deletions extensions/amp-next-page/1.0/service.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,13 +23,11 @@ import {
childElementByAttr,
childElementsByTag,
isJsonScriptTag,
removeChildren,
removeElement,
scopedQuerySelector,
} from '../../../src/dom';
import {dev, devAssert, user, userAssert} from '../../../src/log';
import {escapeCssSelectorIdent} from '../../../src/css';
import {htmlFor} from '../../../src/static-template';
import {installStylesForDoc} from '../../../src/style-installer';
import {
parseFavicon,
Expand Down Expand Up @@ -79,9 +77,6 @@ export class NextPageService {
*/
this.mutator_ = Services.mutatorForDoc(ampdoc);

/** @private @const {!../../../src/service/template-impl.Templates} */
this.templates_ = Services.templatesFor(this.win_);

/** @private {?Element} */
this.separator_ = null;

Expand Down Expand Up @@ -201,7 +196,7 @@ export class NextPageService {
return Promise.resolve();
}
// If we're still too far from the bottom, early return
if (this.getViewportsAway_() > PRERENDER_VIEWPORT_COUNT && !force) {
if (this.getViewportsAway_() < NEAR_BOTTOM_VIEWPORT_COUNT && !force) {
return Promise.resolve();
}

Expand Down Expand Up @@ -385,37 +380,33 @@ export class NextPageService {
* Create a container element for the document and insert it into
* the amp-next-page element
* @param {!Page} page
* @return {!Promise<!Element>}
* @return {!Element}
*/
createDocumentContainerForPage(page) {
const container = this.win_.document.createElement('div');
container.classList.add(DOC_CONTAINER_CLASS);
this.element_.insertBefore(container, this.moreBox_);

const shadowRoot = this.win_.document.createElement('div');
shadowRoot.classList.add(SHADOW_ROOT_CLASS);
container.appendChild(shadowRoot);

// Insert the separator
const separatorInstance = this.separator_.cloneNode(true);
container.appendChild(separatorInstance);
// TODO(wassgha): If async/wait was allowed, this would look a lot nicer!
return this.maybeRenderSeparatorTemplate_(separatorInstance, page).then(
() => {
// Insert the document
const shadowRoot = this.win_.document.createElement('div');
shadowRoot.classList.add(SHADOW_ROOT_CLASS);
container.appendChild(shadowRoot);

// Observe this page's visibility
this.visibilityObserver_.observe(
shadowRoot /** element */,
container /** parent */,
position => {
page.relativePos = position;
this.updateVisibility();
}
);
container.appendChild(this.separator_.cloneNode(true));

return container;
// Insert the container
this.element_.insertBefore(container, this.moreBox_);

// Observe this page's visibility
this.visibilityObserver_.observe(
shadowRoot /** element */,
container /** parent */,
position => {
page.relativePos = position;
this.updateVisibility();
}
);

return container;
}

/**
Expand All @@ -428,7 +419,7 @@ export class NextPageService {
*/
attachDocumentToPage(page, content, force = false) {
// If the user already scrolled to the bottom, prevent rendering
if (this.getViewportsAway_() < NEAR_BOTTOM_VIEWPORT_COUNT && !force) {
if (this.getViewportsAway_() <= NEAR_BOTTOM_VIEWPORT_COUNT && !force) {
// TODO(wassgha): Append a "load next article" button?
return null;
}
Expand Down Expand Up @@ -540,6 +531,7 @@ export class NextPageService {
removeElement(el);
});

// Mark document as hidden initially
doc.body.classList.add(HIDDEN_DOC_CLASS);

// Make sure all hidden elements are initially invisible
Expand All @@ -548,7 +540,7 @@ export class NextPageService {

/**
* Hides or shows elements based on the `next-page-hide` and
* `next-page-replace` attributes
* `amp-next-page-replace` attributes * `next-page-replace` attributes
* @param {!Document|!ShadowRoot} doc Document of interest
* @param {boolean=} isVisible Whether this page is visible or not
*/
Expand Down Expand Up @@ -723,17 +715,11 @@ export class NextPageService {
'be inside a <script> tag with type="application/json"'
);

const parsed = tryParseJson(scriptElement.textContent, error => {
const pages = tryParseJson(scriptElement.textContent, error => {
user().error(TAG, 'failed to parse inline page list', error);
});

const pages = user().assertArray(
parsed,
`${TAG} page list should be an array`
);

removeElement(scriptElement);
return pages;
return user().assertArray(pages, `${TAG} page list should be an array`);
}

/**
Expand All @@ -744,7 +730,11 @@ export class NextPageService {
* @private
*/
getSeparatorElement_(element) {
const providedSeparator = childElementByAttr(element, 'separator');
const providedSeparator = childElementByAttr(
element,
'amp-next-page-separator'
);
// TODO(wassgha): Use templates (amp-mustache) to render the separator
if (providedSeparator) {
removeElement(providedSeparator);
}
Expand All @@ -756,42 +746,9 @@ export class NextPageService {
* @private
*/
buildDefaultSeparator_() {
const html = htmlFor(this.getHostNextPageElement_());
return html`
<div
class="amp-next-page-default-separator"
aria-label="Next article separator"
>
Next article
</div>
`;
}

/**
* Renders the template inside the separator element using
* data from the current article (if a template is present)
*
* @param {!Element} separator
* @param {!Page} page
* @return {!Promise}
*/
maybeRenderSeparatorTemplate_(separator, page) {
if (!this.templates_.hasTemplate(separator)) {
return Promise.resolve();
}
const data = /** @type {!JsonObject} */ ({
title: page.title,
url: page.url,
image: page.image,
});
return this.templates_
.findAndRenderTemplate(separator, data)
.then(rendered => {
return this.mutator_.mutateElement(separator, () => {
removeChildren(dev().assertElement(separator));
separator.appendChild(rendered);
});
});
const separator = this.win_.document.createElement('div');
separator.classList.add('amp-next-page-separator');
return separator;
}

/**
Expand All @@ -800,7 +757,10 @@ export class NextPageService {
* @private
*/
getMoreBoxElement_(element) {
const providedMoreBox = childElementByAttr(element, 'more-box');
const providedMoreBox = childElementByAttr(
element,
'amp-next-page-more-box'
);
// TODO(wassgha): Use templates (amp-mustache) to render the more box
if (providedMoreBox) {
removeElement(providedMoreBox);
Expand All @@ -815,7 +775,7 @@ export class NextPageService {
buildDefaultMoreBox_() {
// TODO(wassgha): Better default more box
const moreBox = this.win_.document.createElement('div');
moreBox.classList.add('amp-next-page-default-more-box');
moreBox.classList.add('amp-next-page-more-box');
return moreBox;
}
}
Loading

0 comments on commit 18f906f

Please sign in to comment.