New amp-story-bling-link element (#22871)

* initial custom element * merch1 * add shopping cart icon * smaller merch img * fix types * pr comments * pr comments 2 * working alternative * refactored with mark up * refactored without mark up * pr comments * working implementation on <a> * turn component into link * less querying
ampproject · Jun 24, 2019 · 14e2eeb · 14e2eeb
1 parent adb0cec
commit 14e2eeb
Show file tree

Hide file tree

Showing 6 changed files with 222 additions and 0 deletions.
diff --git a/examples/amp-story/bling-link.html b/examples/amp-story/bling-link.html
@@ -0,0 +1,69 @@
+<!doctype html>
+<html amp lang="en">
+  <head>
+    <meta charset="utf-8">
+    <script async src="https://cdn.ampproject.org/v0.js"></script>
+    <script async custom-element="amp-story"
+        src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>
+    <title>My Story</title>
+    <meta name="viewport"
+          content="width=device-width,minimum-scale=1,initial-scale=1">
+    <link rel="canonical" href="blink-link.html">
+    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
+    <style amp-custom>
+      body {
+        font-family: 'Roboto', sans-serif;
+      }
+      amp-story-page {
+        background: black;
+      }
+      h1 {
+        color: white;
+        font-size: 2.875em;
+        font-weight: normal;
+        line-height: 1.174;
+        text-transform: uppercase;
+      }
+      p {
+        color: white;
+      }
+    </style>
+  </head>
+
+  <body>
+    <amp-story standalone>
+
+      <amp-story-page id="cover">
+        <amp-story-grid-layer template="vertical">
+          <h1>Hello World</h1>
+          <p>This is the cover page of this story.</p>
+        </amp-story-grid-layer>
+      </amp-story-page>
+
+      <amp-story-page id="page-1">
+        <amp-story-grid-layer template="vertical">            
+          <h1>First Page</h1>
+          <p>This is the first page of this story.</p>          
+        </amp-story-grid-layer>        
+      </amp-story-page>
+
+      <amp-story-page id="page-2">
+          <amp-story-grid-layer template="vertical">            
+              <h1>Second Page</h1>
+              <p>This is the second page of this story.</p>          
+            </amp-story-grid-layer>
+            <amp-story-grid-layer template="horizontal" style="padding-top: 260px">
+              <amp-img
+                src="./img/merch1.jpg"
+                width="210"
+                height="280"
+                max-width="210"
+                layout="fixed">
+              </amp-img>
+              <a id="blink-2" href="https://amp.dev" role="link" class="i-amphtml-story-bling-link"></a>
+            </amp-story-grid-layer>
+        </amp-story-page>
+
+    </amp-story>
+  </body>
+</html>
diff --git a/examples/amp-story/img/merch1.jpg b/examples/amp-story/img/merch1.jpg
diff --git a/extensions/amp-story/1.0/amp-story-bling-link.css b/extensions/amp-story/1.0/amp-story-bling-link.css
@@ -0,0 +1,71 @@
+/**
+ * Copyright 2019 The AMP HTML Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+ .i-amphtml-story-bling-link {
+  position: relative !important;
+  width: 90px !important;
+  height: 90px !important;
+}
+
+.i-amphtml-story-bling-link-circle {
+  position: absolute !important;  
+  border-radius: 50% !important;
+  background: rgba(255, 255, 255, 1) !important;
+  margin: 7.5px !important;
+  width: 75px !important;
+  height: 75px !important;  
+}
+
+amp-story-page[active] .i-amphtml-story-bling-link-pulse {
+  position: absolute !important;
+  border-radius: 50% !important;
+  background: rgba(255, 255, 255, 0.4) !important;
+  margin: 7.5px !important;
+  width: 75px !important;
+  height: 75px !important;
+  animation: pulse 1.5s cubic-bezier(0.4, 0.0, 0.2, 1) infinite alternate !important;
+}
+
+@keyframes pulse {
+  0% {
+    transform: scale(1);    
+  }
+  100% {
+    transform: scale(1.2);    
+  }
+}
+
+.i-amphtml-story-bling-link:hover .i-amphtml-story-bling-link-circle {
+  background: rgba(255, 255, 255, 0.4) !important;
+}
+
+.i-amphtml-story-bling-link:hover .i-amphtml-story-bling-link-pulse {
+  animation: none !important;
+}
+
+.i-amphtml-story-bling-link-icon {  
+  background-position: center !important;
+  background-repeat: no-repeat !important;
+  background-size: 36px 36px !important;
+  color: rgba(0, 0, 0, 0.54) !important;
+  width: 75px !important;
+  height: 75px !important;
+  display: flex !important;
+}
+
+.i-amphtml-story-bling-link-shopping-cart {
+  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"/><path d="M0 0h24v24H0z" fill="none"/></svg>') !important;
+}
diff --git a/extensions/amp-story/1.0/amp-story-bling-link.js b/extensions/amp-story/1.0/amp-story-bling-link.js
@@ -0,0 +1,70 @@
+/**
+ * Copyright 2019 The AMP HTML Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Bling link component that turns into a tooltip when clicked.
+ */
+
+import {htmlFor} from '../../../src/static-template';
+
+/**
+ * Links that are bling links.
+ * @const {string}
+ */
+export const BLING_LINK_SELECTOR = 'a.i-amphtml-story-bling-link';
+
+export const BLING_LINK_BUILT = 'built';
+
+export class AmpStoryBlingLink {
+  /**
+   * Builds bling link
+   * @param {!Element} element
+   */
+  static build(element) {
+    if (element[BLING_LINK_BUILT]) {
+      return;
+    }
+
+    this.addPulseElement_(element);
+    this.addIconElement_(element);
+
+    element[BLING_LINK_BUILT] = true;
+  }
+
+  /**
+   * Adds icon as a child element of <amp-story-bling-link>
+   * @param {!Element} element
+   * @private
+   */
+  static addIconElement_(element) {
+    const iconEl = htmlFor(element)`
+      <div class="i-amphtml-story-bling-link-circle">
+        <i class="i-amphtml-story-bling-link-icon i-amphtml-story-bling-link-shopping-cart"></i>
+      </div>`;
+    element.appendChild(iconEl);
+  }
+
+  /**
+   * Adds pulse as a child element of <amp-story-bling-link>
+   * @param {!Element} element
+   * @private
+   */
+  static addPulseElement_(element) {
+    const pulseEl = htmlFor(element)`
+      <div class="i-amphtml-story-bling-link-pulse"></div>`;
+    element.appendChild(pulseEl);
+  }
+}
diff --git a/extensions/amp-story/1.0/amp-story-page.js b/extensions/amp-story/1.0/amp-story-page.js
@@ -32,6 +32,7 @@ import {
 } from './amp-story-store-service';
 import {AdvancementConfig} from './page-advancement';
 import {AmpEvents} from '../../../src/amp-events';
+import {AmpStoryBlingLink, BLING_LINK_SELECTOR} from './amp-story-bling-link';
 import {
   AmpStoryEmbeddedComponent,
   EMBED_ID_ATTRIBUTE_NAME,
@@ -510,6 +511,7 @@ export class AmpStoryPage extends AMP.BaseElement {
   findAndPrepareEmbeddedComponents_(forceResize = false) {
     this.addClickShieldToEmbeddedComponents_();
     this.resizeInteractiveEmbeddedComponents_(forceResize);
+    this.addStylesToBlingLinks_();
   }
 
   /**
@@ -563,6 +565,15 @@ export class AmpStoryPage extends AMP.BaseElement {
     });
   }
 
+  /**
+   * Adds icon and pulse animation to bling links
+   */
+  addStylesToBlingLinks_() {
+    scopedQuerySelectorAll(this.element, BLING_LINK_SELECTOR).forEach(el => {
+      AmpStoryBlingLink.build(el);
+    });
+  }
+
   /** @private */
   markPageAsLoaded_() {
     dispatch(

diff --git a/extensions/amp-story/1.0/amp-story.css b/extensions/amp-story/1.0/amp-story.css
@@ -15,6 +15,7 @@
  */
 
 @import './amp-story-access.css';
+@import './amp-story-bling-link.css';
 @import './amp-story-desktop-panels.css';
 @import './amp-story-page-attachment.css';
 @import './amp-story-templates.css';