Skip to content
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.

Sign up for GitHub

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

amp-position-observer and redesign of scrollbound/visibility-based behaviour #10818

Merged
merged 43 commits into from
Aug 15, 2017
Merged

amp-position-observer and redesign of scrollbound/visibility-based behaviour #10818

Show file tree
Hide file tree
Changes from 42 commits
Commits
Show all changes
43 commits
Select commit Hold shift + click to select a range
27f1495
phase 1~
aghassemi Aug 6, 2017
042086a
rename progress to scroll
aghassemi Aug 6, 2017
4aa395a
Scroll percent progress reporting
aghassemi Aug 6, 2017
e9dcf39
margin support
aghassemi Aug 6, 2017
872532e
first round of tests
aghassemi Aug 7, 2017
46ea06f
second round of tests
aghassemi Aug 7, 2017
9627c39
3rd round of tests
aghassemi Aug 7, 2017
8a0d078
more tests and cleanups
aghassemi Aug 7, 2017
be04db5
lint and type-check
aghassemi Aug 7, 2017
2939951
dep checks
aghassemi Aug 7, 2017
62e1878
Merge branch 'master' of github.com:ampproject/amphtml into sync
aghassemi Aug 7, 2017
fe5cbc1
validation rules
aghassemi Aug 9, 2017
9dea26b
dep
aghassemi Aug 9, 2017
0c0a01c
target-selector support
aghassemi Aug 9, 2017
3ca8a0c
documentation
aghassemi Aug 9, 2017
75e0f5f
Update amp-visibility-observer.md
aghassemi Aug 9, 2017
c8de383
fixing tests
aghassemi Aug 9, 2017
ca2e68f
Merge branch 'sync' of github.com:aghassemi/amphtml into sync
aghassemi Aug 9, 2017
ce16be6
lint
aghassemi Aug 9, 2017
c96cb89
lint
aghassemi Aug 9, 2017
4af0e66
Rename to amp-position-observer and add tests for getTotalDuration
aghassemi Aug 10, 2017
e2b4097
validation tests and experiment flag
aghassemi Aug 11, 2017
93f6bb3
nits
aghassemi Aug 11, 2017
d508ae0
unused file
aghassemi Aug 11, 2017
ca2cff8
test
aghassemi Aug 11, 2017
73f21c3
more tests
aghassemi Aug 11, 2017
12c0b82
polish
aghassemi Aug 11, 2017
bfa7caf
Merge branch 'master' of github.com:ampproject/amphtml into sync
aghassemi Aug 11, 2017
fe24d65
fix tests
aghassemi Aug 11, 2017
6c689ae
fix tests
aghassemi Aug 11, 2017
9fef26b
describes.integration improvement and integration test for scrollboun…
aghassemi Aug 11, 2017
f673cfc
more integration tests
aghassemi Aug 11, 2017
5be7f89
more more integration tests
aghassemi Aug 11, 2017
18a9028
iframe scrolling in iOS making integration tests fail, ugh
aghassemi Aug 11, 2017
a94dc6d
typo
aghassemi Aug 11, 2017
72ab5cf
some review comments
aghassemi Aug 15, 2017
a2001f4
Merge branch 'master' of github.com:ampproject/amphtml into sync
aghassemi Aug 15, 2017
bcf9910
more review comments
aghassemi Aug 15, 2017
e4a2612
lint
aghassemi Aug 15, 2017
a428271
all
aghassemi Aug 15, 2017
2c6dd91
validation fixes
aghassemi Aug 15, 2017
59dfc03
tests for math.clamp and new sample
aghassemi Aug 15, 2017
3e9518f
few more unit tests
aghassemi Aug 15, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 4 additions & 3 deletions build-system/amp4test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ app.use('/compose-doc', function(req, res) {
const experiments = req.query.experiments;
let metaTag = '';
let experimentString = '';
if (!!experiments) {
if (experiments) {
metaTag = '<meta name="amp-experiments-opt-in" content="' +
experiments + '">';
experimentString = '"' + experiments.split(',').join('","') + '"';
Expand All @@ -46,15 +46,16 @@ app.use('/compose-doc', function(req, res) {
<meta charset="utf-8">
<link rel="canonical" href="http://nonblocking.io/" >
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
${metaTag}
${metaTag}
<script>
window.AMP_CONFIG = window.AMP_CONFIG || {};
window.AMP_CONFIG['allow-doc-opt-in'] =
window.AMP_CONFIG['allow-doc-opt-in'] =
(window.AMP_CONFIG['allow-doc-opt-in'] || []).concat([${experimentString}]);
</script>
<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>
<script async src="/dist/${process.env.SERVE_MODE == 'compiled' ? 'v0' : 'amp'}.js"></script>
${extensionScripts}
<style amp-custom>${req.query.css}</style>
</head>
<body>
${req.query.body}
Expand Down
2 changes: 1 addition & 1 deletion build-system/dep-check-config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -188,7 +188,7 @@ exports.rules = [
// TODO(@zhouyx, #9213) Remove this item.
'extensions/amp-ad/0.1/amp-ad-xorigin-iframe-handler.js->' +
'src/service/position-observer-impl.js',
'extensions/amp-animation/0.1/scrollbound-scene.js->' +
'extensions/amp-position-observer/0.1/amp-position-observer.js->' +
'src/service/position-observer-impl.js',
'extensions/amp-analytics/0.1/amp-analytics.js->' +
'src/service/cid-impl.js',
Expand Down
2 changes: 1 addition & 1 deletion build-system/tasks/presubmit-checks.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -273,7 +273,7 @@ var forbiddenTerms = {
'src/service/position-observer-impl.js',
// TODO(@zhouyx, #9213) Remove this item.
'extensions/amp-ad/0.1/amp-ad-xorigin-iframe-handler.js',
'extensions/amp-animation/0.1/scrollbound-scene.js',
'extensions/amp-position-observer/0.1/amp-position-observer.js',
'src/service/video-manager-impl.js',
],
},
Expand Down
164 changes: 164 additions & 0 deletions examples/amp-position-observer.amp.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,164 @@
<!doctype html>
<html ⚡>

<head>
<meta charset="utf-8">
<title>amp-position-observer</title>
<link rel="canonical" href="amps.html">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<script async custom-element="amp-animation" src="https://cdn.ampproject.org/v0/amp-animation-0.1.js"></script>
<script async custom-element="amp-position-observer" src="https://cdn.ampproject.org/v0/amp-position-observer-0.1.js"></script>
<style amp-custom>
main {
font-family: Helvetica, sans-serif;
padding: 10px;
max-width: 412px;
margin: auto;
}

h1, h2, h3, h4 {
font-weight: normal;
}

amp-img img {
object-fit: cover;
}

.clock-hand {
position: absolute;
width: 2vw;
height: 20vw;
max-height: 90px;
max-width: 10px;
top: 50%;
left: 50%;
z-index: 2;
background: #FAFAFA;
transform-origin: 50% 0%;
border-radius: 10px;
transform: rotate(-180deg)
}

.spacer {
height: 70vh;
width: 100%;
background-image: -webkit-linear-gradient(#EEE 50%, white 50%);
background-image: linear-gradient(#EEE 50%, white 50%);
background-size: 100% 3em;
}

pre {
display: inline;
}
</style>
<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>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>

<body>
<amp-animation id="clockAnim1" layout="nodisplay">
<script type="application/json">
{
"duration": "3s",
"fill": "both",
"direction": "alternate",
"animations": [
{
"selector": "#clock-scene-1 .clock-hand",
"keyframes": [
{ "transform": "rotate(-180deg)" },
{ "transform": "rotate(0deg)" }
]
}
]
}
</script>
</amp-animation>

<amp-animation id="clockAnim2" layout="nodisplay">
<script type="application/json">
{
"duration": "6s",
"fill": "both",
"iterations": "infinity",
"animations": [
{
"selector": "#clock-scene-2 .clock-hand",
"keyframes": [
{ "transform": "rotate(-180deg)" },
{ "transform": "rotate(180deg)" }
]
}
]
}
</script>
</amp-animation>
<main>
<h1>amp-position-observer (Experimental)</h1>
<h1><div>Please ensure <pre>amp-position-observer</pre> experiment flag is enabled first</h1> Running
<pre>AMP.toggleExperiment('amp-position-observer', true);</pre> in Developer Console will enable the experiment for your browser.
</div>
<div class="spacer"></div>

<h2>Scrollbound animations with amp-position-observer and amp-animation</h2>
<h3>The following animation does one round (12pm-6pm) via scrolling when fully visible between the middle 80% of the viewport</h3>

<div id="clock-scene-1" class="clock-scene">
<amp-position-observer
intersection-ratios="1"
viewport-margins="10vh"
on="scroll:clockAnim1.seekTo(percent=event.percent)"
layout="nodisplay">
</amp-position-observer>

<amp-img layout="responsive" width=2 height=1.5 src="./img/clock.jpg">
<div class="clock-hand"></div>
</amp-img>
</div>

<div class="spacer"></div>

<h2>Custom visibility start-end with amp-position-observer and amp-animation</h2>
<h3>The following animation will start when the scene is 50% visible and pauses when 50% invisible</h3>

<div id="clock-scene-2" class="clock-scene">
<amp-position-observer
intersection-ratios="0.5"
on="enter:clockAnim2.start;exit:clockAnim2.pause"
layout="nodisplay">
</amp-position-observer>

<amp-img layout="responsive" width=2 height=1.5 src="./img/clock.jpg">
<div class="clock-hand"></div>
</amp-img>
</div>

<div class="spacer"></div>
<h2>Custom visibility end with amp-position-observer and amp-video</h2>
<h3>If played, the following video will pause when 20% invisible</h3>
<div>
<amp-position-observer
intersection-ratios="0.8"
on="exit:myVideo.pause"
layout="nodisplay">
</amp-position-observer>

<amp-video
id=myVideo
title="Big Buck Bunny"
artist="Blender Foundation"
poster="img/bigbuckbunny.jpg"
album="The Peach Open Movie Project"
src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
width="720"
height="405"
layout="responsive"
controls>
</amp-video>
</div>

<div class="spacer"></div>
<div class="spacer"></div>
</main>
</body>
</html>
3 changes: 2 additions & 1 deletion examples/animations.amp.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -178,7 +178,8 @@
<button on="tap:anim1.pause">Pause</button>
<button on="tap:anim1.resume">Resume</button>
<button on="tap:anim1.togglePause">Toggle Pause</button>
<button on="tap:anim1.seekTo(time=500)">Seek to 500</button>
<button on="tap:anim1.seekTo(time=2000)">Seek to 500</button>
<button on="tap:anim1.seekTo(percent=0.5)">Seek to 50%</button>
<button on="tap:anim1.reverse">Reverse</button>
<button on="tap:anim1.finish">Finish</button>
<button on="tap:anim1.cancel">Cancel</button>
Expand Down
Binary file added examples/img/clock.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading