Skip to content

♻️[amp story 360] Use JSX #36942

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
processprocess merged 7 commits into from
Nov 16, 2021
Merged

♻️[amp story 360] Use JSX #36942

Changes from 1 commit
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
b4337e6
Use jsx instead of htmlfor
processprocess Nov 16, 2021
6a43a60
Implicit returns.
processprocess Nov 16, 2021
c742be4
Merge branch 'main' into 360-jsx
processprocess Nov 16, 2021
ff36d99
Lint
processprocess Nov 16, 2021
582fc5a
Remove superfluous argument.
processprocess Nov 16, 2021
f3bc606
Lint
processprocess Nov 16, 2021
4c0158c
Merge branch 'ampproject:main' into 360-jsx
processprocess Nov 16, 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
Next Next commit
Use jsx instead of htmlfor
  • Loading branch information
@processprocess
processprocess committed Nov 16, 2021
commit b4337e686eec82504c187c7f067840345f89013c
95 changes: 47 additions & 48 deletions extensions/amp-story-360/0.1/amp-story-360.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,11 @@
* For local development, run amp --host="192.168.44.47" --https --extensions=amp-story-360
*/

import * as Preact from '#core/dom/jsx';
import {CommonSignals} from '#core/constants/common-signals';
import {whenUpgradedToCustomElement} from '#core/dom/amp-element-helpers';
import {applyFillContent, isLayoutSizeDefined} from '#core/dom/layout';
import {closest} from '#core/dom/query';
import {htmlFor} from '#core/dom/static-template';

import {Services} from '#service';
import {LocalizedStringId} from '#service/localization/strings';
Expand Down Expand Up @@ -46,63 +46,62 @@ const CENTER_OFFSET = 90;
const MIN_WEBGL_DISTANCE = 2;

/**
* Generates the template for the permission button.
*
* Renders the template for the permission button.
* @param {!Element} element
* @return {!Element}
*/
const buildActivateButtonTemplate = (element) => htmlFor(element)`
<button class="i-amphtml-story-360-activate-button" role="button">
<span class="i-amphtml-story-360-activate-text"></span>
<span class="i-amphtml-story-360-activate-button-icon"
>360°
<svg
class="i-amphtml-story-360-activate-button-icon-svg"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
>
<defs>
<linearGradient id="i-amphtml-story-360-activate-gradient">
<stop stop-color="white" stop-opacity=".3"></stop>
<stop offset="1" stop-color="white"></stop>
</linearGradient>
<ellipse
id="i-amphtml-story-360-activate-ellipse"
ry="11.5"
rx="7.5"
cy="12"
cx="12"
stroke="url(#i-amphtml-story-360-activate-gradient)"
></ellipse>
</defs>
<use xlink:href="#i-amphtml-story-360-activate-ellipse"></use>
<use
xlink:href="#i-amphtml-story-360-activate-ellipse"
transform="rotate(90, 12, 12)"
></use>
</svg>
</span>
</button>
`;
const renderActivateButtonTemplate = () => (
<button class="i-amphtml-story-360-activate-button" role="button">
<span class="i-amphtml-story-360-activate-text"></span>
<span class="i-amphtml-story-360-activate-button-icon">
360°
<svg
class="i-amphtml-story-360-activate-button-icon-svg"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
>
<defs>
<linearGradient id="i-amphtml-story-360-activate-gradient">
<stop stop-color="white" stop-opacity=".3"></stop>
<stop offset="1" stop-color="white"></stop>
</linearGradient>
<ellipse
id="i-amphtml-story-360-activate-ellipse"
ry="11.5"
rx="7.5"
cy="12"
cx="12"
stroke="url(#i-amphtml-story-360-activate-gradient)"
></ellipse>
</defs>
<use href="#i-amphtml-story-360-activate-ellipse"></use>
<use
href="#i-amphtml-story-360-activate-ellipse"
transform="rotate(90, 12, 12)"
></use>
</svg>
</span>
</button>
);

/**
* Generates the template for the gyroscope feature discovery animation.
* Renders the template for the gyroscope feature discovery animation.
*
* NOTE: i-amphtml-story-360-discovery is used in maybeShowDiscoveryAnimation_
* and must be changed in both places if updated.
*
* @param {!Element} element
* @return {!Element}
*/
const buildDiscoveryTemplate = (element) => htmlFor(element)`
<div class="i-amphtml-story-360-discovery" aria-live="polite">
<div class="i-amphtml-story-360-discovery-animation"></div>
<span class="i-amphtml-story-360-discovery-text"></span>
</div>
`;
const renderDiscoveryTemplate = () => (
<div class="i-amphtml-story-360-discovery" aria-live="polite">
<div class="i-amphtml-story-360-discovery-animation"></div>
<span class="i-amphtml-story-360-discovery-text"></span>
</div>
);

/**
* @param {number} deg
Expand Down Expand Up @@ -548,7 +547,7 @@ export class AmpStory360 extends AMP.BaseElement {
)
) {
const page = this.getPage_();
const discoveryTemplate = page && buildDiscoveryTemplate(page);
const discoveryTemplate = page && renderDiscoveryTemplate(page);
// Support translation of discovery dialogue text.
this.mutateElement(() => {
discoveryTemplate.querySelector(
Expand Down Expand Up @@ -589,7 +588,7 @@ export class AmpStory360 extends AMP.BaseElement {
renderActivateButton_() {
const ampStoryPage = this.getPage_();
this.activateButton_ =
ampStoryPage && buildActivateButtonTemplate(ampStoryPage);
ampStoryPage && renderActivateButtonTemplate(ampStoryPage);

this.activateButton_.querySelector(
'.i-amphtml-story-360-activate-text'
Expand Down