-
+
+
`;
/**
+ * For amp-story-page-attachment-ui-v2.
* @param {!Element} element
* @return {!Element}
*/
const buildOpenOutlinkAttachmentElement = (element) =>
htmlFor(element)`
-
-
-
-
-
-
- `;
+
+
+
+
+
+ `;
/**
+ * For amp-story-page-attachment-ui-v2.
* @param {!Element} element
* @return {!Element}
*/
@@ -94,46 +91,30 @@ export const buildOpenAttachmentElementLinkIcon = (element) =>
/**
* Determines which open attachment UI to render.
- * @param {!Window} win
* @param {!Element} pageEl
* @param {!Element} attachmentEl
* @return {!Element}
*/
-export const renderPageAttachmentUI = (win, pageEl, attachmentEl) => {
- const openImgAttr = attachmentEl.getAttribute('cta-image');
- const attachmentHref = attachmentEl.getAttribute('href');
- if (isPageAttachmentUiV2ExperimentOn(win) && attachmentHref) {
- return renderOutlinkPageAttachmentUI(
- win,
- pageEl,
- attachmentEl,
- attachmentHref
- );
- } else if (isPageAttachmentUiV2ExperimentOn(win) && openImgAttr) {
- return renderPageAttachmentUiWithImages(win, pageEl, attachmentEl);
+export const renderPageAttachmentUI = (pageEl, attachmentEl) => {
+ if (isPageAttachmentUiV2ExperimentOn(pageEl.getAmpDoc().win)) {
+ if (attachmentEl.getAttribute('href')) {
+ return renderOutlinkPageAttachmentUI(pageEl, attachmentEl);
+ } else {
+ return renderInlinePageAttachmentUi(pageEl, attachmentEl);
+ }
}
- return renderDefaultPageAttachmentUI(win, pageEl, attachmentEl);
+ return renderOldPageAttachmentUI(pageEl, attachmentEl);
};
/**
* Renders default page attachment UI.
- * @param {!Window} win
* @param {!Element} pageEl
* @param {!Element} attachmentEl
* @return {!Element}
*/
-const renderDefaultPageAttachmentUI = (win, pageEl, attachmentEl) => {
- const openAttachmentEl = buildOpenDefaultAttachmentElement(pageEl);
- if (isPageAttachmentUiV2ExperimentOn(win)) {
- openAttachmentEl.classList.add(
- '.i-amphtml-amp-story-page-attachment-ui-v2'
- );
- // Setting theme
- const theme = attachmentEl.getAttribute('theme');
- if (theme && AttachmentTheme.DARK === theme.toLowerCase()) {
- openAttachmentEl.setAttribute('theme', AttachmentTheme.DARK);
- }
- }
+const renderOldPageAttachmentUI = (pageEl, attachmentEl) => {
+ const openAttachmentEl = buildOldAttachmentElement(pageEl);
+
// If the attachment is a link, copy href to the element so it can be previewed on hover and long press.
const attachmentHref = attachmentEl.getAttribute('href');
if (attachmentHref) {
@@ -155,37 +136,28 @@ const renderDefaultPageAttachmentUI = (win, pageEl, attachmentEl) => {
textEl.textContent = openLabel;
- if (isPageAttachmentUiV2ExperimentOn(win)) {
- openAttachmentEl.classList.add('i-amphtml-amp-story-page-attachment-ui-v2');
- }
return openAttachmentEl;
};
/**
* Renders inline page attachment UI.
- * @param {!Window} win
* @param {!Element} pageEl
* @param {!Element} attachmentEl
- * @param {!Element} attachmentHref
* @return {!Element}
*/
-const renderOutlinkPageAttachmentUI = (
- win,
- pageEl,
- attachmentEl,
- attachmentHref
-) => {
+const renderOutlinkPageAttachmentUI = (pageEl, attachmentEl) => {
const openAttachmentEl = buildOpenOutlinkAttachmentElement(pageEl);
// Copy href to the element so it can be previewed on hover and long press.
+ const attachmentHref = attachmentEl.getAttribute('href');
if (attachmentHref) {
openAttachmentEl.setAttribute('href', attachmentHref);
}
- // Getting elements
+ // Get elements.
const {chipEl, ctaLabelEl} = htmlRefs(openAttachmentEl);
- // Setting theme
+ // Set theme.
let themeAttribute = attachmentEl.getAttribute('theme');
if (themeAttribute) {
themeAttribute = themeAttribute.toLowerCase();
@@ -193,10 +165,10 @@ const renderOutlinkPageAttachmentUI = (
openAttachmentEl.setAttribute('theme', themeAttribute);
if (themeAttribute === AttachmentTheme.CUSTOM) {
- setCustomThemeStyles(win, attachmentEl, openAttachmentEl);
+ setCustomThemeStyles(attachmentEl, openAttachmentEl);
}
- // Appending text & aria-label.
+ // Append text & aria-label.
const openLabelAttr =
attachmentEl.getAttribute('cta-text') ||
attachmentEl.getAttribute('data-cta-text');
@@ -211,8 +183,8 @@ const renderOutlinkPageAttachmentUI = (
// Set image.
const openImgAttr = attachmentEl.getAttribute('cta-image');
if (openImgAttr && openImgAttr !== 'none') {
- const ctaImgEl = win.document.createElement('div');
- ctaImgEl.classList.add('i-amphtml-story-outlink-page-attachment-img');
+ const ctaImgEl = htmlFor(chipEl)`
+
`;
setImportantStyles(ctaImgEl, {
'background-image': 'url(' + openImgAttr + ')',
});
@@ -228,21 +200,20 @@ const renderOutlinkPageAttachmentUI = (
/**
* Renders inline page attachment UI.
- * @param {!Window} win
* @param {!Element} pageEl
* @param {!Element} attachmentEl
* @return {!Element}
*/
-const renderPageAttachmentUiWithImages = (win, pageEl, attachmentEl) => {
+const renderInlinePageAttachmentUi = (pageEl, attachmentEl) => {
const openAttachmentEl = buildOpenInlineAttachmentElement(pageEl);
- // Setting theme
+ // Set theme.
const theme = attachmentEl.getAttribute('theme');
if (theme && AttachmentTheme.DARK === theme.toLowerCase()) {
openAttachmentEl.setAttribute('theme', AttachmentTheme.DARK);
}
- // Appending text & aria-label.
+ // Append text & aria-label if defined.
const openLabelAttr =
attachmentEl.getAttribute('cta-text') ||
attachmentEl.getAttribute('data-cta-text');
@@ -254,32 +225,31 @@ const renderPageAttachmentUiWithImages = (win, pageEl, attachmentEl) => {
openAttachmentEl.setAttribute('aria-label', openLabel);
if (openLabel !== 'none') {
- const textEl = win.document.createElement('span');
- textEl.classList.add('i-amphtml-story-inline-page-attachment-label');
+ const textEl = htmlFor(openAttachmentEl)`
+
`;
textEl.textContent = openLabel;
openAttachmentEl.appendChild(textEl);
}
- // Adding images.
- const openImgAttr = attachmentEl.getAttribute('cta-image');
-
- const ctaImgEl = openAttachmentEl.querySelector(
- '.i-amphtml-story-inline-page-attachment-img'
- );
-
- setImportantStyles(ctaImgEl, {
- 'background-image': 'url(' + openImgAttr + ')',
- });
+ // Add images if they are defined.
+ const {chipEl} = htmlRefs(openAttachmentEl);
+ const makeImgElWithBG = (openImgAttr) => {
+ const ctaImgEl = htmlFor(chipEl)`
+
`;
+ setImportantStyles(ctaImgEl, {
+ 'background-image': 'url(' + openImgAttr + ')',
+ });
+ return ctaImgEl;
+ };
const openImgAttr2 = attachmentEl.getAttribute('cta-image-2');
-
if (openImgAttr2) {
- const ctaImgEl2 = win.document.createElement('div');
- ctaImgEl2.classList.add('i-amphtml-story-inline-page-attachment-img');
- setImportantStyles(ctaImgEl2, {
- 'background-image': 'url(' + openImgAttr2 + ')',
- });
- ctaImgEl.parentNode.insertBefore(ctaImgEl2, ctaImgEl.nextSibling);
+ chipEl.prepend(makeImgElWithBG(openImgAttr2));
+ }
+
+ const openImgAttr = attachmentEl.getAttribute('cta-image');
+ if (openImgAttr) {
+ chipEl.prepend(makeImgElWithBG(openImgAttr));
}
return openAttachmentEl;
@@ -287,11 +257,10 @@ const renderPageAttachmentUiWithImages = (win, pageEl, attachmentEl) => {
/**
* Sets custom theme attributes.
- * @param {!Window} win
* @param {!Element} attachmentEl
* @param {!Element} openAttachmentEl
*/
-export const setCustomThemeStyles = (win, attachmentEl, openAttachmentEl) => {
+export const setCustomThemeStyles = (attachmentEl, openAttachmentEl) => {
const accentColor = attachmentEl.getAttribute('cta-accent-color');
// Calculating contrast color (black or white) needed for outlink CTA UI.
@@ -300,7 +269,7 @@ export const setCustomThemeStyles = (win, attachmentEl, openAttachmentEl) => {
setImportantStyles(attachmentEl, {
'background-color': attachmentEl.getAttribute('cta-accent-color'),
});
- const styles = computedStyle(win, attachmentEl);
+ const styles = computedStyle(attachmentEl.getAmpDoc().win, attachmentEl);
const rgb = getRGBFromCssColorValue(styles['background-color']);
contrastColor = getTextColorForRGB(rgb);
setImportantStyles(attachmentEl, {
diff --git a/extensions/amp-story/1.0/amp-story-page-attachment.css b/extensions/amp-story/1.0/amp-story-page-attachment.css
index 3b0bd71a4c2ec..a7d7c4a0c5059 100644
--- a/extensions/amp-story/1.0/amp-story-page-attachment.css
+++ b/extensions/amp-story/1.0/amp-story-page-attachment.css
@@ -162,7 +162,7 @@ amp-story[desktop] .i-amphtml-amp-story-page-attachment-ui-v2.i-amphtml-story-pa
background: none !important;
}
-.i-amphtml-amp-story-page-attachment-ui-v2.i-amphtml-story-page-attachment-remote.i-amphtml-story-draggable-drawer-open:before {
+.i-amphtml-amp-story-page-attachment-ui-v2.i-amphtml-story-page-attachment-remote.i-amphtml-story-draggable-drawer-open:after {
content: "" !important;
position: absolute !important;
width: 100% !important;
@@ -175,7 +175,7 @@ amp-story[desktop] .i-amphtml-amp-story-page-attachment-ui-v2.i-amphtml-story-pa
animation: progress-bar-animation both 1s !important;
}
-[dir="rtl"] .i-amphtml-amp-story-page-attachment-ui-v2.i-amphtml-story-page-attachment-remote.i-amphtml-story-draggable-drawer-open:before {
+[dir="rtl"] .i-amphtml-amp-story-page-attachment-ui-v2.i-amphtml-story-page-attachment-remote.i-amphtml-story-draggable-drawer-open:after {
transform-origin: right !important;
}
diff --git a/extensions/amp-story/1.0/amp-story-page.js b/extensions/amp-story/1.0/amp-story-page.js
index fbbb01a1200d4..d2a50424a6073 100644
--- a/extensions/amp-story/1.0/amp-story-page.js
+++ b/extensions/amp-story/1.0/amp-story-page.js
@@ -1757,7 +1757,6 @@ export class AmpStoryPage extends AMP.BaseElement {
if (!this.openAttachmentEl_) {
this.openAttachmentEl_ = renderPageAttachmentUI(
- this.win,
this.element,
attachmentEl
);
diff --git a/extensions/amp-story/1.0/test/test-amp-story-page.js b/extensions/amp-story/1.0/test/test-amp-story-page.js
index 2d4344d4c3735..b2657aa3fb507 100644
--- a/extensions/amp-story/1.0/test/test-amp-story-page.js
+++ b/extensions/amp-story/1.0/test/test-amp-story-page.js
@@ -673,13 +673,14 @@ describes.realWin('amp-story-page', {amp: {extensions}}, (env) => {
expect(openAttachmentEl.getAttribute('target')).to.eql('_top');
});
- it('should build the new default outlink page attachment UI with target="_top" to navigate in top window', async () => {
+ it('should build the new outlink page attachment UI with target="_top" to navigate in top level browsing context', async () => {
toggleExperiment(win, 'amp-story-page-attachment-ui-v2', true);
const attachmentEl = win.document.createElement(
'amp-story-page-attachment'
);
attachmentEl.setAttribute('layout', 'nodisplay');
+ attachmentEl.setAttribute('href', 'google.com');
element.appendChild(attachmentEl);
page.buildCallback();