Skip to content

🚀 [Story embeds] Remove support for expanded components like amp-twitter #36851

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

Merged
mszylkowski merged 14 commits into from
Nov 11, 2021
Merged

🚀 [Story embeds] Remove support for expanded components like amp-twitter #36851

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
e4f1956
Working removal
mszylkowski Nov 8, 2021
b5db57f
Removed extra styles / vars
mszylkowski Nov 8, 2021
fc37c15
Keep removing
mszylkowski Nov 9, 2021
e58de03
Removed more
mszylkowski Nov 9, 2021
94898c0
Merge branch 'main' of github.com:ampproject/amphtml into remove_embe…
mszylkowski Nov 9, 2021
44d80f2
Started removing languages
mszylkowski Nov 9, 2021
001344c
Removing localizatino strings
mszylkowski Nov 9, 2021
5c8ebf0
Removed other localizations
mszylkowski Nov 9, 2021
a2541aa
Removed remaining expand tweet
mszylkowski Nov 9, 2021
84d53e5
Updated zindex
mszylkowski Nov 9, 2021
29fdca8
Removed visual tests
mszylkowski Nov 10, 2021
0c9113a
Removed unused const
mszylkowski Nov 10, 2021
cd10a57
Adding click shield to tweet
mszylkowski Nov 10, 2021
f2aa242
Merge branch 'main' of github.com:ampproject/amphtml into remove_embe…
mszylkowski Nov 10, 2021
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
Prev Previous commit
Next Next commit
Removed more
  • Loading branch information
@mszylkowski
mszylkowski committed Nov 9, 2021
commit e58de03d039d5fc8bafde317cf5c89fbf76f9a39
3 changes: 1 addition & 2 deletions extensions/amp-story/1.0/amp-story-embedded-component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -188,8 +188,7 @@ export class AmpStoryEmbeddedComponent {
this.timer_ = Services.timerFor(this.win_);

/**
* Target producing the tooltip and going to expanded view (when
* expandable).
* Target producing the tooltip.
* @private {?Element}
*/
this.triggeringTarget_ = null;
Expand Down
5 changes: 1 addition & 4 deletions extensions/amp-story/1.0/amp-story-store-service.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,6 @@ export const UIType = {
export const EmbeddedComponentState = {
HIDDEN: 0, // Component is present in page, but hasn't been interacted with.
FOCUSED: 1, // Component has been clicked, a tooltip should be shown.
EXPANDED: 2, // Component is in expanded mode.
};

/**
Expand Down Expand Up @@ -314,10 +313,8 @@ const actions = (state, action, data) => {
return /** @type {!State} */ ({
...state,
[StateProperty.PAUSED_STATE]:
data.state === EmbeddedComponentState.EXPANDED ||
data.state === EmbeddedComponentState.FOCUSED,
[StateProperty.SYSTEM_UI_IS_VISIBLE_STATE]:
data.state !== EmbeddedComponentState.EXPANDED,
[StateProperty.SYSTEM_UI_IS_VISIBLE_STATE]: true,
[StateProperty.INTERACTIVE_COMPONENT_STATE]: data,
});
// Shows or hides the info dialog.
Expand Down
22 changes: 0 additions & 22 deletions extensions/amp-story/1.0/amp-story.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -754,28 +754,6 @@ amp-story .amp-video-eq,
z-index: 10000 !important;
}

.i-amphtml-story-expanded-view-overflow {
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
background-color: rgba(0, 0, 0, 1) !important;
position: absolute !important;
}

.i-amphtml-expanded-view-close-button {
position: absolute !important;
top: 0 !important;
left: 0 !important;
margin: 12px !important;
height: 24px !important;
width: 24px !important;
background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 36 36" fill="rgba(255, 255, 255, 0.8)"><path d="M28.5 9.62L26.38 7.5 18 15.88 9.62 7.5 7.5 9.62 15.88 18 7.5 26.38l2.12 2.12L18 20.12l8.38 8.38 2.12-2.12L20.12 18z"/><path d="M0 0h36v36H0z" fill="none"/></svg>') !important;
cursor: pointer !important;
text-align: center !important;
background-color: transparent !important; /* Resets default button background-color. */
}

@keyframes play-button-fly-in {
0% {
opacity: 0;
Expand Down
16 changes: 3 additions & 13 deletions extensions/amp-story/1.0/page-advancement.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -392,12 +392,7 @@ export class ManualAdvancement extends AdvancementConfig {
this.touchstartTimestamp_ = null;
this.timer_.cancel(this.timeoutId_);
this.timeoutId_ = null;
if (
!this.storeService_.get(StateProperty.SYSTEM_UI_IS_VISIBLE_STATE) &&
/** @type {InteractiveComponentDef} */ (
this.storeService_.get(StateProperty.INTERACTIVE_COMPONENT_STATE)
).state !== EmbeddedComponentState.EXPANDED
) {
if (!this.storeService_.get(StateProperty.SYSTEM_UI_IS_VISIBLE_STATE)) {
this.storeService_.dispatch(Action.TOGGLE_SYSTEM_UI_IS_VISIBLE, true);
}
}
Expand Down Expand Up @@ -633,15 +628,10 @@ export class ManualAdvancement extends AdvancementConfig {
*/
isHandledByEmbeddedComponent_(event, pageRect) {
const target = dev().assertElement(event.target);
const stored = /** @type {InteractiveComponentDef} */ (
this.storeService_.get(StateProperty.INTERACTIVE_COMPONENT_STATE)
);
const inExpandedMode = stored.state === EmbeddedComponentState.EXPANDED;

return (
inExpandedMode ||
(matches(target, interactiveElementsSelectors()) &&
this.canShowTooltip_(event, pageRect))
matches(target, interactiveElementsSelectors()) &&
this.canShowTooltip_(event, pageRect)
);
}

Expand Down