I do not really comprehend the way to debug this the right way so I cannot solve the problem. I have an AMP page, take this as example:
<!doctype html>
<html AMP lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<link rel="canonical" href="//link_to_self" />
<meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1,initial-scale=1">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element=amp-sidebar src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<style amp-custom></style>
</head>
<body>
<amp-sidebar id="sidebar" layout="nodisplay">Sidebar</amp-sidebar>
<button on="tap:sidebar.open">Open sidebar</button>
</body>
</html>
What I want to do is a pure javascript call that does the same as the button does. This doesnt work:
<script>
document.getElementById("sidebar").open();
</script>
The reason I need this is that I have a swipe library that when swipe is detected needs to call the function to open the menu. Anyonw know how I would call the sidebar function?
The documentation has three states that are possible from HTML, how do I call these from javascript? (and if possible, how do I find the name of function with the chrome debugger or is it possible, I have now clue but I would think the answer is infront of me as I can read the javascript code.
<button on="tap:sidebar.toggle">Toggle sidebar</button>
<button on="tap:sidebar.open">Open sidebar</button>
<button on="tap:sidebar.close">Close sidebar</button>
From what I know, you can't unfortunately:
One thing we realized early on is that many performance issues are caused by the integration of multiple JavaScript libraries, tools, embeds, etc. into a page. This isn’t saying that JavaScript immediately leads to bad performance, but once arbitrary JavaScript is in play, most bets are off because anything could happen at any time and it is hard to make any type of performance guarantee. With this in mind we made the tough decision that AMP HTML documents would not include any author-written JavaScript, nor any third-party scripts.