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.

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

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

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

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

mwiley opened this issue Oct 31, 2019 · 5 comments

Comments

@mwiley
Copy link

@mwiley mwiley commented Oct 31, 2019

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.

@mwiley mwiley added the Type: Bug label Oct 31, 2019
@choumx choumx changed the title amp-date-countdown can't be inserted using amp-script amp-script: Create <amp-date-countdown> Nov 18, 2019
@choumx

This comment has been minimized.

Copy link
Contributor

@choumx choumx commented Nov 18, 2019

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.

@choumx choumx 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

This comment has been minimized.

Copy link
Author

@mwiley mwiley commented Nov 26, 2019

Great, thank you!

@nurulhudaapon

This comment has been minimized.

Copy link

@nurulhudaapon nurulhudaapon commented Dec 7, 2019

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?

@massa1240

This comment has been minimized.

Copy link

@massa1240 massa1240 commented Dec 27, 2019

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

This comment has been minimized.

Copy link

@brycesteinhoff brycesteinhoff commented Jan 6, 2020

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
5 participants
You can’t perform that action at this time.