@lrnwebcomponents/simple-modal
Version:
A simple modal that ensures accessibility and stack order context appropriately
126 lines (123 loc) • 7.41 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
<title>SimpleModal: simple-modal Demo</title>
<script src="../../../node_modules/@lrnwebcomponents/deduping-fix/deduping-fix.js"></script>
<script type="module">
import '@polymer/iron-demo-helpers/demo-pages-shared-styles.js';
import '@polymer/iron-demo-helpers/demo-snippet.js';
import '@lrnwebcomponents/simple-fields/lib/simple-fields-container.js';
import { SimpleModalStore } from '../simple-modal.js';
</script>
<style is="custom-style" include="demo-pages-shared-styles"></style>
</head>
<body>
<simple-fields-container id="sitetheme" label="Theme">
<select>
<option value="simple-blog" selected>Simple blog</option>
<option value="outline-player">Basic outline</option>
<option value="lrnapp-book">Course outline</option>
<option value="haxcms-dev-theme">DEVELOPER THEME</option>
<option value="infinite-scroll">Infinite scroll</option>
</select>
</simple-fields-container>
<div id="somediv"><p>This is to illustrate the notion of some DIV being handed off to the modal but just a clone, not the real thing.</p></div>
<div class="vertical-section-container centered">
<h3>Basic simple-modal demo</h3>
<demo-snippet>
<template>
<button id="button1">Open 1</button>
<button id="button2">Pull some div in</button>
<button id="button3">Fire an event</button>
<button id="button4">modal content</button>
<script>
document.getElementById('button1').addEventListener('click', () => {
let p = document.createElement("div");
p.innerHTML = '<em>Lets see how emphasized this is</em> or is not.<em>Lets see how emphasized this is</em> or is not.<em>Lets see how emphasized this is</em> or is not.<em>Lets see how emphasized this is</em> or is not.<em>Lets see how emphasized this is</em> or is not.';
const evt = new CustomEvent("simple-modal-show", {
bubbles: true,
cancelable: true,
detail: {
title: 'Some stuff pulled in',
elements: { content: p },
invokedBy: document.getElementById('button1'),
}
});
document.getElementById('button1').dispatchEvent(evt);
});
document.getElementById('button2').addEventListener('click', () => {
let p = document.createElement("p");
p.appendChild(document.getElementById('somediv').cloneNode(true));
const evt = new CustomEvent("simple-modal-show", {
bubbles: true,
cancelable: true,
detail: {
title: 'My new thing',
elements: { content: p },
invokedBy: document.getElementById('button2'),
}
});
document.getElementById('button2').dispatchEvent(evt);
});
window.__click = (e) => {
alert('i kept your event, now i will close');
console.log(e);
const evt = new CustomEvent("simple-modal-hide", {
bubbles: true,
cancelable: true,
detail: {}
});
document.getElementById('button3').dispatchEvent(evt);
};
// this is the best way to work with the modal as it provides the most flexibility
document.getElementById('button3').addEventListener('click', () => {
let p = document.createElement("div");
p.innerHTML = '<em>Lets see how emphasized this is</em> or is not.<em>Lets see how emphasized this is</em> or is not.<em>Lets see how emphasized this is</em> or is not.<em>Lets see how emphasized this is</em> or is not.<em>Lets see how emphasized this is</em> or is not.<em>Lets see how emphasized this is</em> or is not.<em>Lets see how emphasized this is</em> or is not.<em>Lets see how emphasized this is</em> or is not.<em>Lets see how emphasized this is</em> or is not.<em>Lets see how emphasized this is</em> or is not.<em>Lets see how emphasized this is</em> or is not.<em>Lets see how emphasized this is</em> or is not.<em>Lets see how emphasized this is</em> or is not.<em>Lets see how emphasized this is</em> or is not.<em>Lets see how emphasized this is</em> or is not.<em>Lets see how emphasized this is</em> or is not.<em>Lets see how emphasized this is</em> or is not.';
let h = document.createElement("h3");
h.innerHTML = 'We Love headings';
let button = document.createElement("button");
button.raised = true;
button.addEventListener('click', window.__click.bind(this));
button.appendChild(document.createTextNode("I keep event binding"));
const evt = new CustomEvent("simple-modal-show", {
bubbles: true,
cancelable: true,
detail: {
title: false,
elements: {header: h, content: p, buttons: button },
invokedBy: document.getElementById('button3'),
clone: false,
}
});
document.getElementById('button3').dispatchEvent(evt);
});
// this is the best way to work with the modal as it provides the most flexibility
document.getElementById('button4').addEventListener('click', () => {
let p = document.createElement("div");
p.innerHTML = '<em>Lets see how emphasized this is</em> or is not.<em>Lets see how emphasized this is</em> or is not.<em>Lets see how emphasized this is</em> or is not.<em>Lets see how emphasized this is</em> or is not.<em>Lets see how emphasized this is</em> or is not.<em>Lets see how emphasized this is</em> or is not.<em>Lets see how emphasized this is</em> or is not.<em>Lets see how emphasized this is</em> or is not.<em>Lets see how emphasized this is</em> or is not.<em>Lets see how emphasized this is</em> or is not.<em>Lets see how emphasized this is</em> or is not.<em>Lets see how emphasized this is</em> or is not.<em>Lets see how emphasized this is</em> or is not.<em>Lets see how emphasized this is</em> or is not.<em>Lets see how emphasized this is</em> or is not.<em>Lets see how emphasized this is</em> or is not.<em>Lets see how emphasized this is</em> or is not.';
let h = document.createElement("h3");
h.innerHTML = 'We Love headings';
let button = document.createElement("button");
button.addEventListener('click', window.__click.bind(this));
button.appendChild(document.createTextNode("I keep event binding"));
const evt = new CustomEvent("simple-modal-show", {
bubbles: true,
cancelable: true,
detail: {
title: false,
elements: {header: h, content: p, buttons: button },
invokedBy: document.getElementById('button3'),
clone: false,
modal: true
}
});
document.getElementById('button4').dispatchEvent(evt);
});
</script>
</template>
</demo-snippet>
</div>
</body>
</html>