Skip to content

Instantly share code, notes, and snippets.

@fstanis

fstanis/notes.html

Created March 19, 2020 17:32
Show Gist options
  • Save fstanis/89dae3a45d11188ec21d20105a50b3d7 to your computer and use it in GitHub Desktop.
Save fstanis/89dae3a45d11188ec21d20105a50b3d7 to your computer and use it in GitHub Desktop.
Download ZIP
AMP for Email - dynamic notes
Raw
notes.html
<!--
Copyright 2020 Google LLC
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
https://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<!doctype html>
<html ⚡4email>
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-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-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
<style amp4email-boilerplate>body{visibility:hidden}</style>
</head>
<body>
<section>
<header>Your notes:</header>
<amp-list src="https://email-toybox.glitch.me/getNotes?user=1b0796ce2e608114f6db1912f8e41c8af0a2c54f69b234ae080918734f0cbf01" single-item id="notesList" height="200">
<div placeholder>
<strong>IMPORTANT</strong>
<main>The notes are loading...</main>
</div>
<div fallback>
The notes failed to load.
</div>
<template type="amp-mustache">
<strong>IMPORTANT</strong>
<main>{{notes}}</main>
</template>
</amp-list>
</section>
<button on="tap:AMP.setState({ notEditing: false })">
Edit the notes
</button>
<hr>
<form hidden [hidden]="notEditing" method="post" on="submit-success:notesList.refresh" action-xhr="https://email-toybox.glitch.me/setNotes?user=1b0796ce2e608114f6db1912f8e41c8af0a2c54f69b234ae080918734f0cbf01">
<input type="text" name="notes">
<input type="submit">
<div submit-success>
Updated notes!
</div>
<div submit-error>
Error submitting notes!
</div>
</form>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment