Skip to content

Instantly share code, notes, and snippets.

@paulerickson

paulerickson/index.html

Last active December 13, 2019 20:43
Show Gist options
  • Save paulerickson/567444879fb38d12307fe9dc72a00940 to your computer and use it in GitHub Desktop.
Save paulerickson/567444879fb38d12307fe9dc72a00940 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!doctype html>
<script type="module">
import 'https://cdn.my.wisc.edu/@myuw-web-components/myuw-help@PR-18/myuw-help.min.mjs';
let numberOfHelpDialogs = 0;
const defaultCheckbox = document.body.appendChild(document.createElement('input'));
defaultCheckbox.type = 'checkbox';
defaultCheckbox.title = 'default?';
const createButton = document.body.appendChild(document.createElement('button'));
createButton.textContent = 'Create New Help Element';
createButton.onclick = () => {
const dialogNumber = ++numberOfHelpDialogs;
const help = document.body.appendChild(document.createElement('myuw-help'));
const buttonElement = document.body.appendChild(document.createElement('button'));
help.setAttribute('myuw-help-title', 'HALP!');
buttonElement.textContent = `Toggle ${dialogNumber}`;
buttonElement.onclick = () => help.hasAttribute('open')? help.removeAttribute('open') : help.setAttribute('open', '');
if (!defaultCheckbox.checked) {
['Foo', 'Bar', 'Baz'].forEach(label => {
const link = help.appendChild(document.createElement('a'));
link.href = label;
link.textContent = `${label}${dialogNumber}`;
link.slot = 'myuw-help-content';
});
}
};
</script>
<body></body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment