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

Jump to bottom

amp-script: Support creating all AMP elements e.g. amp-date-countdown #25344

Open
mwiley opened this issue Oct 31, 2019 · 12 comments
Open

amp-script: Support creating all AMP elements e.g. amp-date-countdown #25344

mwiley opened this issue Oct 31, 2019 · 12 comments
Labels
Component: amp-script Stale Inactive for one year or more Type: Bug WG: runtime

Comments

@mwiley
Copy link

mwiley commented Oct 31, 2019 •
edited by sparhami

What's the issue?

When trying to add amp-date-countdown dynamically using amp-script, a "Sanitized node" error is printed to the console, and it isn't added to the DOM.

How do we reproduce the issue?

JSBin: https://jsbin.com/tenozoxoko/edit?html,output

<!DOCTYPE html>
<html ⚡>
  <head>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <script async custom-element="amp-script" src="https://cdn.ampproject.org/v0/amp-script-0.1.js"></script>
    <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
    <script async custom-element="amp-date-countdown" src="https://cdn.ampproject.org/v0/amp-date-countdown-0.1.js"></script>
  </head>
  <body>
    <amp-script layout="container" script="hello-script" development>
      <button>Add timer</button>
      <div id="timer"></div>
    </amp-script>
    
    <script id="hello-script" type="text/plain" target="amp-script">
      const btn = document.querySelector('button');
      btn.addEventListener('click', () => {
        const timer = document.getElementById('timer');
        timer.innerHTML = `
          <amp-date-countdown layout="fixed" height="100" width="300" timestamp-seconds="2147483648">
            <template type="amp-mustache">
              {{d}}:{{h}}:{{m}}:{{s}}
            </template>
          </amp-date-countdown>
        `
      })
    </script>
  </body>
</html>

Create a page that uses amp-script, and within the script, dynamically add an amp-date-countdown to the DOM.

What browsers are affected?

All browsers appear to be affected.

Which AMP version is affected?

Version 1910251950120.
@dreamofabear dreamofabear changed the title amp-date-countdown can't be inserted using amp-script amp-script: Create <amp-date-countdown> Nov 18, 2019
@dreamofabear
Copy link

Thanks for filing this issue. Currently, only creating amp-img and amp-layout are supported. This will change in the future, but we'll update the documentation to point this out in the meantime.

@dreamofabear dreamofabear changed the title amp-script: Create <amp-date-countdown> amp-script: Support creating all AMP elements e.g. amp-date-countdown Nov 18, 2019
@mwiley
Copy link
Author

mwiley commented Nov 26, 2019

Great, thank you!

@nurulhudaapon
Copy link

Can we have support for amp-iframe? If not then what would be the best way to dynamically assign src of amp-iframe from script of amp-script?

@massawho
Copy link

massawho commented Dec 27, 2019 •
edited

I just needed to created an amp-pixel dynamically and found out that only amp-layout and amp-img is supported. The problem is that for what I need, amp-img would be enough, but I can't generate PAGE_VIEW_ID or RANDOM with it. That would be great if we can support other amp elements

@brycesteinhoff
Copy link

brycesteinhoff commented Jan 6, 2020 •
edited

We also would like to be able to dynamically create amp-iframe from amp-script. We need some programmatic control over which iframe src is loaded.

@PratkinV
Copy link

PratkinV commented Mar 5, 2020

Please add ability to create amp-analytics, it would help a lot.

@akira28
Copy link

akira28 commented May 4, 2020

I would need to add amp-ad dinamically

@c0un7-z3r0
Copy link

Please add amp-consent to allow loading of cmp layers.

@rafaelmuttoni
Copy link

Can we have support for amp-iframe? If not then what would be the best way to dynamically assign src of amp-iframe from script of amp-script?

Were you able to do it? I'm also looking for a way to dynamically assign src of amp-iframe.

@samouri samouri mentioned this issue Feb 19, 2021
Closed
@alexandr-kazakov
Copy link
Contributor

I tried to add images with a lightbox using amp-script, but the lightbox does not work: #27808 I think this is an important feature.
It turns out that I can't add images to the lightbox gallery right now.

@vivekn-procentris
Copy link

Need the ability to create amp-script at run time for analytics to dynamically add the src value for amp-script tags.

@stale
Copy link

stale bot commented Oct 19, 2022

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. Thank you for your contributions.

@stale stale bot added the Stale Inactive for one year or more label Oct 19, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Component: amp-script Stale Inactive for one year or more Type: Bug WG: runtime
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests