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
New amp-story-bling-link element #22871
Changes from 13 commits
fad6e12
ac7206e
93d7e48
b6ffc48
dbd5718
3496698
ab5941a
bfbb77b
713625f
4c73a73
633a66c
dc74156
b3f7764
544de51
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,59 @@ | ||
/** | ||
* 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'; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Publishers won't be able to use this for now as this is invalid AMP, we can change it later once the feature is ready :) |
||
|
||
export class AmpStoryBlingLink { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Converted this from a custom component to an |
||
/** | ||
* Adds icon as a child element of <amp-story-bling-link> | ||
* @param {!Element} element | ||
*/ | ||
static addIconElement(element) { | ||
if (element.querySelector('.i-amphtml-story-bling-link-circle')) { | ||
return; | ||
} | ||
|
||
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 | ||
*/ | ||
static addPulseElement(element) { | ||
if (element.querySelector('.i-amphtml-story-bling-link-pulse')) { | ||
return; | ||
} | ||
|
||
const pulseEl = htmlFor(element)` | ||
<div class="i-amphtml-story-bling-link-pulse"></div>`; | ||
element.appendChild(pulseEl); | ||
} | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
At a high-level, I think we should decide exactly how templated these are supposed to be (perhaps in a separate PR). Is it okay if a publisher slaps a 6px red border around it? If they change the padding? Add a box-shadow?
We might want to think about whether it's worth either: