@lrnwebcomponents/simple-modal
Version:
A simple modal that ensures accessibility and stack order context appropriately
87 lines (84 loc) • 3.78 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 '../simple-modal.js';
</script>
<style is="custom-style" include="demo-pages-shared-styles">
</style>
</head>
<body>
<simple-fields-container id="sitetheme" label="Theme">
<select value="simple-blog">
<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>
<style>
simple-modal#button1 {
--simple-modal-resize: both;
--simple-modal-width: 300px;
--simple-modal-height: 300px;
--simple-modal-min-width: 300px;
--simple-modal-min-height: 300px;
}
simple-modal.wide {
--simple-modal-width: 75vw;
--simple-modal-height: 75vh;
--simple-modal-max-width: 90vw;
--simple-modal-max-height: 90vh;
}
</style>
<script>
// this is how you prep the modal
const modal = window.SimpleModal.requestAvailability();
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',
id: 'button1',
elements: { content: p },
invokedBy: document.getElementById('button1'),
}
});
document.getElementById('button1').dispatchEvent(evt);
});
document.getElementById('button2').addEventListener('click', () => {
const evt = new CustomEvent("simple-modal-show", {
bubbles: true,
cancelable: true,
detail: {
title: 'My new thing',
elements: { content: document.getElementById('somediv').cloneNode(true) },
invokedBy: document.getElementById('button2'),
}
});
document.getElementById('button2').dispatchEvent(evt);
});
</script>
</template>
</demo-snippet>
</div>
</body>
</html>