-
Notifications
You must be signed in to change notification settings - Fork 3.9k
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
Classical amp-inline-gallery-captions (0.1) #32075
Merged
caroqliu
merged 10 commits into
ampproject:master
from
caroqliu:amp-inline-gallery-captions
Feb 24, 2021
Merged
Changes from all commits
Commits
Show all changes
10 commits
Select commit
Hold shift + click to select a range
d60bc04
git cherry-pick 8cfe718
a9778bf
Fix missed parameter
caroqliu b6ebda7
Lint fixes
caroqliu 33aa4de
gulp presubmit
caroqliu 2348398
Merge branch 'master' into amp-inline-gallery-captions
caroqliu f74264d
Add experiments
caroqliu a9d6638
Merge branch 'master' into amp-inline-gallery-captions
caroqliu 68a4a43
Merge branch 'master' into amp-inline-gallery-captions
caroqliu 48e9ef4
Pass slides in last
caroqliu 419c7bf
Merge branch 'master' into amp-inline-gallery-captions
caroqliu File filter
Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
21 changes: 21 additions & 0 deletions
21
extensions/amp-inline-gallery/0.1/amp-inline-gallery-captions.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
/** | ||
* Copyright 2021 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. | ||
*/ | ||
|
||
amp-inline-gallery-captions { | ||
pointer-events: none; | ||
padding-top: var(--caption-margin-top); | ||
margin-top: calc(-1 * var(--i-amphtml-caption-height, 0)); | ||
} |
91 changes: 91 additions & 0 deletions
91
extensions/amp-inline-gallery/0.1/amp-inline-gallery-captions.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,91 @@ | ||
/** | ||
* 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. | ||
*/ | ||
|
||
import {closestAncestorElementBySelector} from '../../../src/dom'; | ||
import {exponentialFalloff} from './amp-inline-gallery-pagination'; | ||
import {isExperimentOn} from '../../../src/experiments'; | ||
import {isLayoutSizeDefined} from '../../../src/layout'; | ||
import {setImportantStyles} from '../../../src/style.js'; | ||
import {userAssert} from '../../../src/log'; | ||
|
||
export class AmpInlineGalleryCaptions extends AMP.BaseElement { | ||
/** @param {!AmpElement} element */ | ||
constructor(element) { | ||
super(element); | ||
} | ||
|
||
/** @override */ | ||
isRelayoutNeeded() { | ||
return true; | ||
} | ||
|
||
/** @override */ | ||
isLayoutSupported(layout) { | ||
caroqliu marked this conversation as resolved.
Show resolved
Hide resolved
|
||
userAssert( | ||
isExperimentOn(this.win, 'amp-inline-gallery-captions') || | ||
'expected "amp-inline-gallery-captions" experiment to be enabled' | ||
); | ||
return isLayoutSizeDefined(layout); | ||
} | ||
|
||
/** @override */ | ||
layoutCallback() { | ||
const {height} = this./*OK*/ getLayoutBox(); | ||
const parentGallery = closestAncestorElementBySelector( | ||
this.element, | ||
'amp-inline-gallery' | ||
); | ||
|
||
setImportantStyles(parentGallery, { | ||
'--i-amphtml-caption-height': `${height}px`, | ||
}); | ||
} | ||
|
||
/** | ||
* @param {number} unusedTotal | ||
* @param {number} index | ||
* @param {number} offset | ||
* @param {!Array<!Element>} slides | ||
*/ | ||
updateProgress(unusedTotal, index, offset, slides) { | ||
this.mutateElement(() => { | ||
this.updateCaptionOpacities_(slides, index, offset); | ||
}); | ||
} | ||
|
||
/** | ||
* Updates the opacities of the captions, based on their distance from the | ||
* current slide. | ||
* @param {!Array<!Element>} slides | ||
* @param {number} index | ||
* @param {number} offset | ||
*/ | ||
updateCaptionOpacities_(slides, index, offset) { | ||
slides.forEach((slide, i) => { | ||
const indexDistance = Math.abs(index + offset - i); | ||
// Want to fall off to zero at the mid way point, the next/prev slide | ||
// will start fading in at the same time. | ||
const falloffDistance = Math.min(2 * indexDistance, 1); | ||
const opacity = exponentialFalloff(falloffDistance, 3); | ||
setImportantStyles(slide, { | ||
'--caption-opacity': opacity, | ||
// Need to prevent pointer events on all other slide's captions so | ||
// that the user can select the caption text, click on links, etc. | ||
'pointer-events': opacity == 0 ? 'none' : 'all', | ||
}); | ||
}); | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
86 changes: 86 additions & 0 deletions
86
extensions/amp-inline-gallery/0.1/amp-inline-gallery-slide.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,86 @@ | ||
/** | ||
* Copyright 2021 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. | ||
*/ | ||
|
||
amp-inline-gallery-slide { | ||
/* | ||
* We do not want the slide to be positioned, so the captions can position | ||
* relative to the gallery itself. | ||
*/ | ||
position: static !important; | ||
/* | ||
* Do not transform the slide, but rather transform just the content. | ||
*/ | ||
transform: none !important; | ||
will-change: auto !important; | ||
} | ||
|
||
amp-inline-gallery-slide.i-amphtml-layout-size-defined { | ||
/* | ||
* Since the content is translated, it may be outside the area of the | ||
* slide itself. | ||
*/ | ||
overflow: visible !important; | ||
} | ||
|
||
.i-amphtml-inline-gallery-slide-container { | ||
width: 100%; | ||
height: 100%; | ||
/* Override default from <figure> */ | ||
margin: 0; | ||
} | ||
|
||
.i-amphtml-inline-gallery-slide-content-slot { | ||
display: flex; | ||
align-items: center; | ||
justify-content: center; | ||
/* Subtract out height for the caption */ | ||
height: calc(100% - calc(var(--i-amphtml-caption-height, 0px))); | ||
transform: var(--content-transform, translateZ(1px)); | ||
will-change: transform; | ||
overflow: hidden; | ||
} | ||
|
||
.i-amphtml-inline-gallery-slide-caption { | ||
position: absolute; | ||
left: 6px; | ||
right: 6px; | ||
margin-top: var(--caption-margin-top); | ||
height: var(--i-amphtml-caption-height, 0); | ||
overflow: hidden; | ||
opacity: var(--caption-opacity); | ||
} | ||
|
||
.i-amphtml-inline-gallery-slide-see-more { | ||
float: right; | ||
padding: 0; | ||
padding-left: 6px; | ||
border: 0; | ||
color: #48f; | ||
background-color: transparent; | ||
outline: none; | ||
font-family: inherit; | ||
font-size: inherit; | ||
line-height: 1.25em; | ||
} | ||
|
||
.i-amphtml-inline-gallery-slide-persistent-slot { | ||
clear: both; | ||
} | ||
|
||
.i-amphtml-inline-gallery-slide-content-slot > * { | ||
height: 100%; | ||
width: 100%; | ||
} |
121 changes: 121 additions & 0 deletions
121
extensions/amp-inline-gallery/0.1/amp-inline-gallery-slide.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,121 @@ | ||
/** | ||
* 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. | ||
*/ | ||
|
||
import {Layout} from '../../../src/layout'; | ||
import {Services} from '../../../src/services'; | ||
import {htmlFor} from '../../../src/static-template'; | ||
import {isExperimentOn} from '../../../src/experiments'; | ||
import {toArray} from '../../../src/types'; | ||
import {userAssert} from '../../../src/log'; | ||
|
||
export class AmpInlineGallerySlide extends AMP.BaseElement { | ||
/** | ||
* @return {!Element} | ||
* @private | ||
*/ | ||
createDom_() { | ||
caroqliu marked this conversation as resolved.
Show resolved
Hide resolved
|
||
userAssert( | ||
isExperimentOn(this.win, 'amp-inline-gallery-captions') || | ||
'expected "amp-inline-gallery-captions" experiment to be enabled' | ||
); | ||
const html = htmlFor(this.element); | ||
const content = html` | ||
<figure class="i-amphtml-inline-gallery-slide-container"> | ||
<div class="i-amphtml-inline-gallery-slide-content-slot"></div> | ||
<figcaption class="i-amphtml-inline-gallery-slide-caption"> | ||
<amp-truncate-text layout="fill"> | ||
<span class="i-amphtml-inline-gallery-slide-caption-slot"></span> | ||
<button | ||
class="i-amphtml-inline-gallery-slide-see-more" | ||
slot="collapsed" | ||
> | ||
See more | ||
</button> | ||
<div | ||
class="i-amphtml-inline-gallery-slide-persistent-slot" | ||
slot="persistent" | ||
></div> | ||
</amp-truncate-text> | ||
</figcaption> | ||
</figure> | ||
`; | ||
const expand = content.querySelector('[slot="collapsed"]'); | ||
expand.addEventListener('click', (e) => { | ||
this.openLightbox(); | ||
e.stopPropagation(); | ||
}); | ||
|
||
return content; | ||
} | ||
|
||
/** @param {!AmpElement} element */ | ||
constructor(element) { | ||
super(element); | ||
} | ||
|
||
/** | ||
* | ||
*/ | ||
openLightbox() { | ||
Services.extensionsFor(this.win) | ||
.installExtensionForDoc(this.getAmpDoc(), 'amp-lightbox-gallery') | ||
.then(() => { | ||
const el = document.querySelector('amp-lightbox-gallery'); | ||
return el.getImpl(); | ||
}) | ||
.then((impl) => { | ||
impl.open(this.element, true); | ||
}); | ||
} | ||
|
||
/** @override */ | ||
isLayoutSupported() { | ||
return Layout.FLEX_ITEM; | ||
} | ||
|
||
/** @override */ | ||
buildCallback() { | ||
const dom = this.createDom_(); | ||
const captionSlot = dom.querySelector( | ||
'.i-amphtml-inline-gallery-slide-caption-slot' | ||
); | ||
const contentSlot = dom.querySelector( | ||
'.i-amphtml-inline-gallery-slide-content-slot' | ||
); | ||
const attributionSlot = dom.querySelector( | ||
'.i-amphtml-inline-gallery-slide-persistent-slot' | ||
); | ||
const childNodesArray = toArray(this.element.childNodes); | ||
|
||
childNodesArray | ||
.filter((n) => { | ||
return n.hasAttribute && n.getAttribute('slot') === 'caption'; | ||
}) | ||
.forEach((node) => captionSlot.appendChild(node)); | ||
childNodesArray | ||
.filter((n) => { | ||
return !n.hasAttribute || !n.hasAttribute('slot'); | ||
}) | ||
.forEach((node) => contentSlot.appendChild(node)); | ||
childNodesArray | ||
.filter((n) => { | ||
return n.hasAttribute && n.getAttribute('slot') === 'attribution'; | ||
}) | ||
.forEach((node) => attributionSlot.appendChild(node)); | ||
|
||
this.element.appendChild(dom); | ||
} | ||
} |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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.
A bit surprised by it. Does it mean we are actually not allowing any links in captions? How do "more" and "less" buttons work?
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.
It's because this implementation doesn't actually have any interactivity or interactive descendants in the
amp-inline-gallery-captions
element, which is effectively just a fixed height block of space that gets covered by captions elements in a different tree (amp-inline-gallery-slide
). Agreed it is a bit unconventional and likely not necessary, but it should not be harmful.