Skip to content

Commit

Permalink
✨amp-image-slider P0 update based on spec change (ampproject#17350)
Browse files Browse the repository at this point in the history 
* Change hint reappear model

* Fix example CSS

* Rename hint classes and Add more integration tests

* First CSS Edge compatibility attempt

* Battling Edge Phase 2

* Battling Edge Phase 3

* Prune P1 stuff for now

* Remove unneeded code

* Round tests

* Remove stale comments
  • Loading branch information
@kevinkassimo @Enriqe
kevinkassimo authored and Enriqe committed Nov 28, 2018
1 parent 3b5da8d commit cb2c36b
Show file tree
Hide file tree
Showing 6 changed files with 99 additions and 249 deletions.
129 changes: 3 additions & 126 deletions examples/image-slider.amp.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@

.flex {
display: flex;
justify-content: space-between
justify-content: space-between;
}

.label {
Expand Down Expand Up @@ -78,14 +78,6 @@
transform: translate(50%, -50%);
}

.my-left-hint {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='32px' width='16px'><text x='0' y='15' fill='red' font-size='1'>&lt;-</text></svg>");
}

.my-right-hint {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='32px' width='16px'><text x='0' y='15' fill='red' font-size='1'>-&gt;</text></svg>");
}

.lightbox {
position: absolute;
width: 100%;
Expand Down Expand Up @@ -134,129 +126,14 @@ <h1>Drag/Click Slider with Customizable Labels</h1>

<h1>Customizable Hints</h1>

<p>Disable hint</p>
<amp-image-slider tabindex="0" layout="responsive" width="1024" height="600" disable-hint>
<amp-img src="https://unsplash.it/1080/720?image=1037" layout="fill"></amp-img>
<amp-img src="https://unsplash.it/1080/720?image=1038" layout="fill"></amp-img>
<div first class="label">BEFORE</div>
<div second class="label">AFTER</div>
</amp-image-slider>

<p>Reemerging hint (default to no interaction for 10s)</p>
<amp-image-slider tabindex="0" layout="responsive" width="1024" height="600"
hint-reappear>
<amp-img src="https://unsplash.it/1080/720?image=1037" layout="fill"></amp-img>
<amp-img src="https://unsplash.it/1080/720?image=1038" layout="fill"></amp-img>
<div first class="label">BEFORE</div>
<div second class="label">AFTER</div>
</amp-image-slider>

<p>Reemerging hint (customized to no interaction for 2s)</p>
<amp-image-slider tabindex="0" layout="responsive" width="1024" height="600"
hint-reappear hint-reappear-interval="2000">
<amp-img src="https://unsplash.it/1080/720?image=1037" layout="fill"></amp-img>
<amp-img src="https://unsplash.it/1080/720?image=1038" layout="fill"></amp-img>
<div first class="label">BEFORE</div>
<div second class="label">AFTER</div>
</amp-image-slider>

<p>Instantly reemerging hint (customized to no interaction for 0.001s)</p>
<p>No Reemerging hint</p>
<amp-image-slider tabindex="0" layout="responsive" width="1024" height="600"
hint-reappear hint-reappear-interval="1">
<amp-img src="https://unsplash.it/1080/720?image=1037" layout="fill"></amp-img>
<amp-img src="https://unsplash.it/1080/720?image=1038" layout="fill"></amp-img>
<div first class="label">BEFORE</div>
<div second class="label">AFTER</div>
</amp-image-slider>

<h1>Initial Percent</h1>
<p>30% to the left</p>
<amp-image-slider tabindex="0" layout="responsive" width="1024" height="600" initial-percent="0.3">
<amp-img src="https://unsplash.it/1080/720?image=1037" layout="fill"></amp-img>
<amp-img src="https://unsplash.it/1080/720?image=1038" layout="fill"></amp-img>
</amp-image-slider>

<h1><code>seekTo</code> action</h1>

<p>Position Observer with Seeking (gesture disabled)</p>
<div>
<amp-position-observer
intersection-ratios="1"
on="scroll:observed.seekTo(percent=event.percent)"
layout="nodisplay">
</amp-position-observer>
<amp-image-slider id="observed" tabindex="0" layout="responsive" width="1024" height="600" disable-gesture>
<amp-img src="https://unsplash.it/1080/720?image=1037" layout="fill"></amp-img>
<amp-img src="https://unsplash.it/1080/720?image=1038" layout="fill"></amp-img>
<div first class="label">BEFORE</div>
<div second class="label">AFTER</div>
</amp-image-slider>
</div>

<p>Example of seeking</p>
<amp-image-slider id="seekable" tabindex="0" layout="responsive" width="1024" height="600">
<amp-img src="https://unsplash.it/1080/720?image=1037" layout="fill"></amp-img>
<amp-img src="https://unsplash.it/1080/720?image=1038" layout="fill"></amp-img>
<div first class="label">BEFORE</div>
<div second class="label">AFTER</div>
</amp-image-slider>
<div class="flex">
<button on="tap:seekable.seekTo(percent=0)">Click me to Seek to Left</button>
<button on="tap:seekable.seekTo(percent=0.5)">Click me to Seek to Center</button>
<button on="tap:seekable.seekTo(percent=1)">Click me to Seek to Right</button>
</div>

<h1>Tab + Keyboard</h1>
<p>Move step set to 20%, Home for Center, PageUp for Left, PageDown for Right</p>
<amp-image-slider tabindex="0" step-size="0.2" layout="responsive" width="1024" height="600">
<amp-img src="https://unsplash.it/1080/720?image=1037" layout="fill"></amp-img>
<amp-img src="https://unsplash.it/1080/720?image=1038" layout="fill"></amp-img>
<div first class="label">BEFORE</div>
<div second class="label">AFTER</div>
</amp-image-slider>

<!--
<h1>Toggle <code>disable-gesture</code> (for user interaction, <code>seekTo</code> will still work)</h1>
<p>Toggling disable-gesture with One-time hint (will be recreated on enable, but if keep enabled, would only appear once)</p>
<amp-image-slider id="disableDemo" tabindex="11" layout="responsive" width="1024" height="600" [disable-gesture]="disableDemo.disabled">
<amp-img src="https://unsplash.it/1080/720?image=1037" layout="fill"></amp-img>
<amp-img src="https://unsplash.it/1080/720?image=1038" layout="fill"></amp-img>
<div first class="label">BEFORE</div>
<div second class="label">AFTER</div>
</amp-image-slider>
<div class="flex">
<button on="tap:AMP.setState({disableDemo: {disabled: false}})">Enable</button>
<button on="tap:disableDemo.seekTo(percent=0)">Seek to Left</button>
<button on="tap:AMP.setState({disableDemo: {disabled: true}})">Disable</button>
</div>
<p>Toggling disable-gesture with Hint Reappearing</p>
<amp-image-slider id="disableDemo1" tabindex="12" layout="responsive" width="1024" height="600" [disable-gesture]="disableDemo1.disabled"
hint-reappear hint-reappear-interval="1000">
<amp-img src="https://unsplash.it/1080/720?image=1037" layout="fill"></amp-img>
<amp-img src="https://unsplash.it/1080/720?image=1038" layout="fill"></amp-img>
<div first class="label">BEFORE</div>
<div second class="label">AFTER</div>
</amp-image-slider>
<div class="flex">
<button on="tap:AMP.setState({disableDemo1: {disabled: false}})">Enable</button>
<button on="tap:disableDemo1.seekTo(percent=0)">Seek to Left</button>
<button on="tap:AMP.setState({disableDemo1: {disabled: true}})">Disable</button>
</div>
<p>Toggling disable-gesture with NO hint</p>
<amp-image-slider id="disableDemo2" tabindex="13" layout="responsive" width="1024" height="600" disable-hint [disable-gesture]="disableDemo2.disabled">
disable-hint-reappear>
<amp-img src="https://unsplash.it/1080/720?image=1037" layout="fill"></amp-img>
<amp-img src="https://unsplash.it/1080/720?image=1038" layout="fill"></amp-img>
<div first class="label">BEFORE</div>
<div second class="label">AFTER</div>
</amp-image-slider>
<div class="flex">
<button on="tap:AMP.setState({disableDemo2: {disabled: false}})">Enable</button>
<button on="tap:disableDemo2.seekTo(percent=0)">Seek to Left</button>
<button on="tap:AMP.setState({disableDemo2: {disabled: true}})">Disable</button>
</div>
-->

<h1>Inside Carousel</h1>

Expand Down
23 changes: 12 additions & 11 deletions extensions/amp-image-slider/0.1/amp-image-slider.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,29 +95,30 @@ amp-image-slider amp-img > img {
bottom: 0;
z-index: 2;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
transition: opacity 0.3s;
}

.i-amphtml-image-slider-hint-hidden {
opacity: 0;
}

.amp-image-slider-hint-left-arrow {
background-size: 32px 16px;
width: 32px;
.amp-image-slider-hint-left {
display: inline-block;
background-size: 56px 16px;
width: 56px;
height: 16px;
margin-right: 15px !important;
background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 8"><g data-name="Layer 2"><path d="M4 5h12V3H4V0L0 4l4 4z" fill="#fff" data-name="Layer 1"/></g></svg>');
background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 8"><g data-name="Layer 2"><path d="M4 5h12V3H4V0L0 4l4 4z" fill="#fff" data-name="Layer 1"/></g></svg>');
filter: drop-shadow(3px 3px 4px black);
}

.amp-image-slider-hint-right-arrow {
background-size: 32px 16px;
width: 32px;
.amp-image-slider-hint-right {
display: inline-block;
background-size: 56px 16px;
width: 56px;
height: 16px;
margin-left: 15px !important;
background-image: url('data:image/svg+xml;charset=utf-8,<svg width="32" height="16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="a" d="M32.02 22H8v4h24.02v6L40 24l-7.98-8z"/></defs><g transform="translate(-8 -16)" fill="none" fill-rule="evenodd"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><g mask="url(#b)" fill="#F1F3F4"><path d="M0 0h48v48H0z"/></g></g></svg>');
background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 8"><g data-name="Layer 2"><path d="M24 5h-12V3H24V0L28 4l-4 4z" fill="#fff" data-name="Layer 1"/></g></svg>');
filter: drop-shadow(3px 3px 4px black);
}

Expand Down
Loading

0 comments on commit cb2c36b

Please sign in to comment.